/* portal-shell.css · PORTALES F1 (9 jul 2026)
   Identidad compartida de los shells de departamento + master.
   Deriva del Liquid Glass del dashboard (misma paleta TF). */
:root {
    --brand-primary: #FBBF24;
    --brand-secondary: #1D9E75;
    --bg-base: #0E0921;
    --bg-image: url('https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=2000&q=75&auto=format&fit=crop');
    --glass: rgba(255, 255, 255, 0.08);
    --glass-strong: rgba(255, 255, 255, 0.14);
    --glass-soft: rgba(255, 255, 255, 0.05);
    --text-primary: #F4F0FF;
    --text-secondary: #E8E0FF;
    --text-muted: rgba(212, 201, 245, 0.85);
    --ok: #34D399;
    --warning: #FBBF24;
    --danger: #F87171;
    --info: #93C5FD;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--bg-base); }
body {
    min-height: 100svh;
    font-family: 'Inter', -apple-system, sans-serif;
    color: var(--text-primary);
    background: linear-gradient(180deg, rgba(14,9,33,.60), rgba(14,9,33,.78)), var(--bg-image) center/cover no-repeat fixed;
    padding: max(18px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(28px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.contenedor { max-width: 1100px; margin: 0 auto; }

/* ── header del portal ── */
.portal-header {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    background: var(--glass);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    padding: 18px 22px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    margin-bottom: 18px;
}
@supports not (backdrop-filter: blur(1px)) {
    .portal-header, .seccion, .card-depto { background: rgba(20,14,45,.92); }
}
.portal-header .marca { color: var(--brand-primary); font-weight: 700; font-size: 1.15rem; letter-spacing: .02em; }
/* El logotipo REAL de Fernández (versión blanca · fondo oscuro de la casa).
   Reemplaza el texto "TF"; alto fijo, ancho por proporción (2250×907). */
.portal-header img.marca { height: 30px; width: auto; display: block; }
.portal-header .titulo { font-size: 1.15rem; font-weight: 600; }
.portal-header .responsable { color: var(--text-muted); font-size: .8rem; width: 100%; }
.portal-header .espacio { flex: 1; }
.portal-header .quien { color: var(--text-secondary); font-size: .8rem; }
button.salir {
    border: 1px solid rgba(255,255,255,.2); background: transparent;
    color: var(--text-secondary); border-radius: 10px; padding: 8px 14px;
    font-family: inherit; font-size: .82rem; cursor: pointer;
}
button.salir:hover { border-color: var(--brand-primary); color: var(--brand-primary); }

/* ── secciones ── */
.seccion {
    background: var(--glass);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    padding: 20px 22px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    margin-bottom: 18px;
}
.seccion h2 { font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
.seccion .nota { color: var(--text-muted); font-size: .8rem; margin-bottom: 14px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pill {
    border-radius: 999px; padding: 5px 12px; font-size: .78rem;
    background: var(--glass-strong); color: var(--text-secondary);
    border: 1px solid rgba(255,255,255,.12);
}
.pill.danger { color: var(--danger); border-color: rgba(248,113,113,.4); }
.pill.warning { color: var(--warning); border-color: rgba(251,191,36,.4); }
.pill.ok { color: var(--ok); border-color: rgba(52,211,153,.4); }
/* el tono apagado: lo que todavía NO es un resultado (en vuelo · sin promedio aún) */
.pill.muted { color: var(--text-muted); border-color: rgba(255,255,255,.10); }

/* ── el panel de la agilidad de cobro (turnaround-ui.mjs · el MISMO que ve
   operaciones). Sus pastillas no viven en un .pills: sin estas reglas salían
   PEGADAS —el pincel es DOM API pura, no deja ni un espacio entre spans—. ── */
.agilidad-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.agilidad-cobro h4 { font-size: .95rem; font-weight: 600; margin-bottom: 4px; }
.agilidad-cobro .nota { color: var(--text-muted); font-size: .8rem; margin: 0; line-height: 1.45; }

/* ── filas de casos ── */
.familia { margin-bottom: 16px; }
.familia h3 { font-size: .85rem; color: var(--text-secondary); font-weight: 600; margin-bottom: 8px; }
/* OBRA C · subfamilia del control documental (Equipo → Económicos / Chasis) */
.familia h4.familia-sub {
    font-size: .74rem; color: var(--gv-suave); font-weight: 600; letter-spacing: .03em;
    text-transform: uppercase; margin: 10px 0 6px 10px;
}
.fila-caso {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 12px;
    background: var(--glass-soft); margin-bottom: 6px;
    border: 1px solid rgba(255,255,255,.07);
}
.fila-caso .folio { font-weight: 600; font-size: .88rem; font-variant-numeric: tabular-nums; }
.fila-caso .fecha { color: var(--text-muted); font-size: .75rem; margin-left: auto; }
.chip {
    border-radius: 999px; padding: 3px 10px; font-size: .72rem; font-weight: 600;
    background: rgba(147,197,253,.15); color: var(--info);
}
.chip.success, .chip.ok { background: rgba(52,211,153,.15); color: var(--ok); }
.chip.warning { background: rgba(251,191,36,.15); color: var(--warning); }
.chip.danger { background: rgba(248,113,113,.15); color: var(--danger); }
.chip.muted { background: rgba(255,255,255,.08); color: var(--text-muted); }
/* OBRA B · bloque «Subir CCP» de una fila de la cola (facturación anticipada) */
.ccp-bloque { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.ccp-resumen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ccp-dato { font-size: .76rem; color: var(--text-primary, #F4F0FF); }
.ccp-dato.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ccp-dato.muted { color: var(--text-muted); }
.ccp-msg { font-size: .78rem; flex-basis: 100%; }
.ccp-msg.ok { color: var(--ok); }
.ccp-msg.error { color: var(--danger); }
.ccp-msg.warning { color: var(--warning); }
.ccp-msg.progreso { color: var(--text-muted); }
.btn-mini {
    border-radius: 999px; padding: 4px 12px; font-size: .74rem; font-weight: 600;
    background: rgba(147,197,253,.15); color: var(--info); cursor: pointer;
    border: 1px solid rgba(147,197,253,.3);
}
.btn-mini:hover { background: rgba(147,197,253,.25); }
.btn-mini:disabled { opacity: .5; cursor: default; }
.semaforo { font-size: .72rem; font-weight: 600; }
.semaforo.ambar { color: var(--warning); }
.semaforo.rojo { color: var(--danger); }

/* ── hitos de la queja (M6 · Obra A · P4) ── */
.queja-hitos {
    flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    padding-top: 6px; border-top: 1px dashed rgba(255,255,255,.08);
}
.queja-hitos .hito {
    font-size: .68rem; font-weight: 600; padding: 2px 8px; border-radius: 999px;
    color: var(--text-muted); background: rgba(255,255,255,.05);
}
.queja-hitos .hito.hecho { color: var(--ok); background: rgba(52,211,153,.12); }
.queja-hitos .hito.actual { color: var(--info); background: rgba(147,197,253,.18); box-shadow: 0 0 0 1px rgba(147,197,253,.35); }
.queja-hitos .hito.pendiente { opacity: .6; }

/* ── banner de tendencia PNC ×3 (M6 · Obra B · P7) ── */
.tendencia-pnc {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 10px 12px; margin-bottom: 8px; border-radius: 12px;
    background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.25);
}
.tendencia-pnc .tendencia-causa { font-weight: 600; font-size: .85rem; }
.tendencia-pnc button { margin-left: auto; }

/* ── acción correctiva · Ishikawa + avance (M6 · Obra C · P8) ── */
.avance-barra {
    height: 6px; border-radius: 999px; background: rgba(255,255,255,.08);
    margin: 8px 0; overflow: hidden;
}
.avance-relleno { height: 100%; background: var(--ok); border-radius: 999px; }
.ishikawa { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ishikawa .factor {
    flex: 1 1 140px; min-width: 120px; padding: 8px 10px; border-radius: 10px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06);
    display: flex; flex-direction: column; gap: 3px;
}
.ishikawa .factor.resaltado { border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.08); }
.ishikawa .factor-nombre { font-size: .72rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.ishikawa .factor-causa { font-size: .8rem; }
.ishikawa .factor-vacio { font-size: .8rem; opacity: .4; }
.causa-raiz { font-size: .85rem; font-weight: 600; margin-top: 8px; }

/* ── encuesta de servicio · captura por área (M6 · Obra D) ── */
.req-linea .area-nombre { flex: 1 1 auto; font-size: .85rem; font-weight: 600; }

/* ── orden de servicio P13 (cadena del inventario · B4) ── */
.chip.orden-rotulo { background: rgba(251,191,36,.14); color: var(--warning); }
.orden-detalle {
    flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
    padding-top: 4px; border-top: 1px dashed rgba(255,255,255,.08);
}
.orden-dato { font-size: .74rem; color: var(--text-secondary); }
.orden-dato.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-muted); }
.orden-falla { flex-basis: 100%; font-size: .78rem; color: var(--text-primary); }
.orden-obs { flex-basis: 100%; font-size: .74rem; color: var(--text-muted); }

/* ── inventario de refacciones · vista de Diana (cadena · B7) ── */
.inv-stock {
    font-variant-numeric: tabular-nums; font-weight: 700; font-size: .95rem;
    min-width: 2.2em; text-align: right;
}
.inv-historial {
    margin-top: 12px; padding: 12px;
    background: var(--glass-soft); border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px; display: flex; flex-direction: column; gap: 8px;
}
.inv-historial-titulo { font-size: .82rem; font-weight: 600; color: var(--text-secondary); }
.inv-mov { display: flex; align-items: baseline; gap: 10px; font-size: .78rem; }
.inv-mov.entrada .inv-mov-texto { color: var(--ok); }
.inv-mov.salida .inv-mov-texto { color: var(--text-secondary); }
.inv-mov.descuadre .inv-mov-texto { color: var(--danger); }
.inv-mov .fecha { margin-left: auto; color: var(--text-muted); font-size: .72rem; }
.inv-captura { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 16px; }
.inv-captura h3 { font-size: .85rem; color: var(--text-secondary); }
.inv-otra { display: flex; flex-direction: column; gap: 8px; }
/* OBRA B · picker de proveedor(es) obligatorio en el alta de refacción */
.inv-prov-alta { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; }
.inv-prov-alta > label { font-size: .74rem; color: var(--text-secondary); }
.inv-prov-lista { max-height: 200px; }

/* ── board facturación ── */
.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.columna {
    background: var(--glass-soft); border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px; padding: 12px;
}
.columna h4 { font-size: .78rem; color: var(--text-secondary); margin-bottom: 8px; }
.columna .conteo { color: var(--brand-primary); }
.tarjeta-mini {
    background: var(--glass); border-radius: 10px; padding: 8px 10px;
    margin-bottom: 6px; font-size: .78rem;
}
.tarjeta-mini .cliente { color: var(--text-muted); font-size: .72rem; }

/* ── cartera comercial ── */
.fila-cliente {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: 10px; background: var(--glass-soft);
    margin-bottom: 5px; font-size: .85rem;
}
.fila-cliente .meses { margin-left: auto; color: var(--text-muted); font-size: .74rem; }

/* ── estados vacíos / errores / placeholder ── */
.vacio { color: var(--text-muted); font-size: .85rem; padding: 8px 0; }
.error-carga { color: var(--danger); font-size: .85rem; padding: 8px 0; }
.construccion { text-align: center; padding: 36px 16px; }
.construccion .emoji { font-size: 2rem; margin-bottom: 10px; }
.construccion p { color: var(--text-secondary); font-size: .9rem; line-height: 1.5; max-width: 460px; margin: 0 auto; }

/* ── master · cards por departamento ── */
.grid-deptos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.card-depto {
    display: block; text-decoration: none; color: inherit;
    background: var(--glass);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px; padding: 18px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: border-color .18s ease, transform .18s ease;
}
.card-depto:hover { border-color: var(--brand-primary); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .card-depto { transition: none; } .card-depto:hover { transform: none; } }
.card-depto h3 { font-size: .95rem; margin-bottom: 2px; }
/* El chip de modo: dice la verdad de lo que pasa al tocar la card.
   Acompañas = solo lectura (tono discreto) · Administras = puedes modificar
   (rojo de marca · el único departamento que dirección opera de frente). */
.card-depto .modo-depto {
    display: inline-block; margin: 4px 0 8px; padding: 2px 8px;
    border-radius: 999px; font-size: .64rem; font-weight: 600;
    letter-spacing: .02em; text-transform: uppercase;
}
.card-depto .modo-depto.acompana { background: rgba(255,255,255,.08); color: var(--text-muted); }
.card-depto .modo-depto.administra { background: rgba(252,2,2,.16); color: #FCA5A5; }
/* OBRA B fachada (18 jul) · segmento de un portal fusionado dentro de la card
   (Gestiones dentro de RH): divisor sutil para que se lea como dos procesos
   del MISMO departamento, no como ruido. */
.card-depto .puesto.segmento-fusion { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.12); }
.card-depto.card-administra { border-color: rgba(252,2,2,.35); }
.card-depto.card-administra:hover { border-color: #FC0202; }
.card-depto .puesto { color: var(--text-muted); font-size: .72rem; margin-bottom: 12px; }
/* Sello de certificación ISO 9001:2015 (orden de Edgar 18-jul) · marca de
   certificación OFICIAL, se usa TAL CUAL (sobre su fondo blanco, no se
   recolorea) → un chip blanco que se lee sobre el fondo oscuro de la casa.
   Va en el pie de cada portal, junto a la marca Fernández (que vive arriba). */
.sello-iso {
    display: flex; align-items: center; justify-content: center; gap: 18px;
    flex-wrap: wrap; text-align: left;
    margin: 34px auto 4px; padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.1); max-width: 720px;
}
/* El sello ISO es un PNG TRANSPARENTE (la marca de certificación va sin fondo).
   Sobre la identidad oscura se perdía → plato de VIDRIO ESMERILADO detrás
   (blanco translúcido + desenfoque) para que la marca siempre lea, sin
   recolorearla. Orden de Edgar 18-jul. */
.sello-iso img {
    height: 96px; width: auto; display: block;
    background: rgba(255,255,255,.94);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    padding: 9px 12px; border-radius: 12px;
    box-shadow: 0 2px 14px rgba(0,0,0,.3);
}
@supports not (backdrop-filter: blur(1px)) { .sello-iso img { background: #F4F2EC; } }
.sello-iso .sello-txt { color: var(--text-muted); font-size: .78rem; line-height: 1.5; max-width: 300px; }
/* Variante "banda de confianza" del master (asiento del SGC · veredicto 18-jul):
   un marco sobrio de vidrio le da un poco más de presencia, sin subir al header. */
.sello-iso.sello-iso-banda {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px; padding: 18px 26px; border-top: 1px solid rgba(255,255,255,.1);
}
.sello-iso.sello-iso-banda img { height: 104px; }
.sello-iso.sello-iso-banda .sello-txt { color: var(--text-secondary); }
.card-depto .kpi { font-size: .8rem; line-height: 1.45; }
.card-depto .kpi.sin-datos { color: var(--text-muted); }
.card-depto .kpi.ok { color: var(--ok); }
.card-depto .kpi.atencion { color: var(--warning); }
.card-depto .kpi.critico { color: var(--danger); }   /* F3 · vencidos de gestiones en ROJO */
.card-depto .abiertos { margin-top: 8px; font-size: .74rem; color: var(--text-secondary); }

/* estado de arranque */
.velando { text-align: center; color: var(--text-muted); padding: 60px 0; font-size: .9rem; }

/* ── GESTIONES (F4) · semáforo documental ─────────────────────────────── */
.badge-borrador {
    display: inline-block; margin-left: 8px; padding: 2px 8px;
    font-size: .62rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; border-radius: 999px;
    background: rgba(251,191,36,.15); color: var(--warning);
    border: 1px solid rgba(251,191,36,.4); vertical-align: middle;
    cursor: help;
}
.vigencia-franja {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 12px 14px; margin-bottom: 14px; border-radius: 12px;
    background: rgba(251,191,36,.08);
    border: 1px solid rgba(251,191,36,.35);
}
.vigencia-icono { font-size: 1.1rem; line-height: 1.3; }
.vigencia-cuerpo { display: flex; flex-direction: column; gap: 4px; }
.vigencia-linea { font-size: .82rem; line-height: 1.4; color: var(--text-secondary); }
.vigencia-linea.vencido { color: var(--danger); font-weight: 600; }
.vigencia-linea.por_vencer { color: var(--warning); }
.vigencia-linea.mas { color: var(--text-muted); font-size: .74rem; }
.fila-doc {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 12px; border-radius: 10px; margin-bottom: 6px;
    background: rgba(255,255,255,.03);
}
.fila-doc.es-vencido { border-left: 3px solid var(--danger); background: rgba(248,113,113,.06); }
.doc-id { display: flex; flex-direction: column; min-width: 180px; flex: 1; }
.doc-titulo { font-weight: 600; font-size: .88rem; }
.doc-tipo { color: var(--text-muted); font-size: .72rem; }
.fila-doc .fecha { color: var(--text-muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
.ver-doc {
    border: 1px solid var(--brand-primary); color: var(--brand-primary);
    background: transparent; border-radius: 8px; padding: 4px 12px;
    font-size: .78rem; cursor: pointer;
}
.ver-doc:hover { background: rgba(251,191,36,.12); }
.visor-doc .visor-barra { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.visor-doc .visor-titulo { font-weight: 600; font-size: .9rem; }
.visor-marco { width: 100%; height: 70vh; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(255,255,255,.04); }
.form-doc { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; align-items: end; }
.form-doc label { display: flex; flex-direction: column; gap: 4px; font-size: .74rem; color: var(--text-secondary); }
.form-doc input, .form-doc select {
    padding: 8px 10px; border-radius: 8px; font-size: .85rem;
    background: rgba(255,255,255,.06); color: var(--text-primary, #fff);
    border: 1px solid rgba(255,255,255,.14);
}
.form-doc input:focus, .form-doc select:focus { outline: none; border-color: var(--brand-primary); }
.btn-primario {
    padding: 9px 18px; border-radius: 9px; border: none; cursor: pointer;
    background: var(--brand-primary); color: #1a1206; font-weight: 700; font-size: .85rem;
}
.btn-primario:disabled { opacity: .55; cursor: wait; }
.form-msg { grid-column: 1 / -1; font-size: .82rem; padding: 6px 0; }
.form-msg.ok { color: var(--ok); }
.form-msg.error { color: var(--danger); }
.form-msg.progreso { color: var(--text-muted); }
.visor-aviso { color: var(--danger); font-size: .82rem; padding: 10px 0; }

/* ── REQUISICIONES DE COMPRA (M4 · Obra B) · líneas dinámicas + acciones ── */
.form-doc h3 { grid-column: 1 / -1; margin: 6px 0 0; font-size: .9rem; color: var(--text-primary, #fff); }
.req-lineas { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; }
.req-linea { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.req-linea input { flex: 1 1 130px; min-width: 0; }
.req-linea select { flex: 1 1 150px; min-width: 0; }
.inv-acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* EL PUENTE (D3) · panel de entradas propuestas al recibir una requisición */
.puente-panel { flex-basis: 100%; margin-top: 8px; padding: 10px 12px; border-radius: 9px; background: rgba(52,211,153,.07); border-left: 3px solid var(--ok); }
.puente-lista { margin: 6px 0 10px; padding-left: 18px; font-size: .82rem; color: var(--text-secondary); }
.puente-lista li { margin: 2px 0; }

/* ── BANDEJA DE PROPUESTAS (D3) · el motor propone, el humano decide ────── */
.prop-fila {
    border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
    padding: 14px; margin-bottom: 12px; background: rgba(255,255,255,.03);
}
.prop-titulo { font-size: .88rem; font-weight: 600; margin-bottom: 8px; }
.prop-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.prop-acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.prop-rechazo { display: grid; gap: 8px; margin-top: 10px; }
.prop-motivo {
    width: 100%; padding: 8px 10px; border-radius: 8px; font-size: .85rem;
    font-family: inherit; resize: vertical;
    background: rgba(255,255,255,.06); color: var(--text-primary, #fff);
    border: 1px solid rgba(255,255,255,.14);
}
.prop-motivo:focus { outline: none; border-color: var(--brand-primary); }
.bandeja-propuestas .form-msg { padding-top: 10px; }
.prop-chips .fecha { color: var(--text-muted); font-size: .75rem; }
.prop-borrador-nota { color: var(--warning); font-size: .74rem; margin-bottom: 8px; }

/* Fix canónico A-v6 (§3.19.1): el atributo [hidden] pierde contra cualquier
   display del autor (.prop-rechazo es grid) — esta regla lo hace ganar SIEMPRE.
   Seguro: todos los toggles del shell usan la propiedad .hidden. */
[hidden] { display: none !important; }

/* ── GRÁFICAS VIVAS (Obra A) · panel claro «papel» sobre el glass ──────────
   Ley de Edgar: fondos claros SIEMPRE en las gráficas — claro/luminoso +
   tinta + el rojo de marca como acento. El semáforo conserva su vocabulario
   (verde/ámbar/rojo) en tonos legibles sobre claro. El motor (grafica-svg.mjs)
   no conoce colores: todos viven aquí, por clase. */
:root {
    --gv-papel: #FBF8F2;                 /* el papel: claro y cálido */
    --gv-tinta: #2B2436;                 /* la tinta */
    --gv-suave: rgba(43, 36, 54, 0.68);  /* tinta secundaria (metas, ejes) */
    --gv-rejilla: rgba(43, 36, 54, 0.16);
    --gv-acento: #D64550;                /* el rojo de marca: el valor de HOY */
    --gv-verde: #0E9F6E;
    --gv-ambar: #D97706;
    --gv-rojo: #DC2626;
    --gv-gris: #E9E4DA;                  /* el faltante de la dona */
}
.gv-panel { background: var(--gv-papel); border-radius: 12px; padding: 10px 8px 6px; margin-top: 12px; }
.gv { display: block; width: 100%; height: auto; }
.gv text { fill: var(--gv-tinta); font-family: inherit; font-size: 10px; }
.gv .gv-eje { stroke: var(--gv-rejilla); stroke-width: 1; }
.gv .gv-eje-texto { fill: var(--gv-suave); font-size: 10px; }
.gv .gv-linea { fill: none; stroke: var(--gv-tinta); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gv .gv-area { fill: rgba(43, 36, 54, 0.08); }
.gv .gv-punto { fill: var(--gv-tinta); }
.gv .gv-punto-final { fill: var(--gv-acento); }
.gv .gv-valor-final { fill: var(--gv-acento); font-weight: 700; font-size: 12px; }
.gv .gv-valor { fill: var(--gv-tinta); font-weight: 600; font-size: 10px; }
.gv .gv-meta { stroke: var(--gv-suave); stroke-width: 1; stroke-dasharray: 4 3; }
.gv .gv-meta-texto { fill: var(--gv-suave); font-size: 10px; }
.gv .gv-hueco { stroke: var(--gv-rejilla); stroke-width: 1; stroke-dasharray: 2 3; }
.gv .gv-barra.gv-verde { fill: var(--gv-verde); }
.gv .gv-barra.gv-ambar { fill: var(--gv-ambar); }
.gv .gv-barra.gv-rojo { fill: var(--gv-rojo); }
/* M5 · el rojo de MARCA para lo accionable (causas controlables de pérdida) —
   distinto del rojo-semáforo: no marca incumplimiento, marca dónde actuar. */
.gv .gv-barra.gv-acento { fill: var(--gv-acento); }
.gv .gv-barra.gv-neutra { fill: var(--gv-tinta); opacity: 0.75; }
.gv .gv-marca { stroke: var(--gv-tinta); stroke-width: 1.5; stroke-dasharray: 3 2; }
.gv .gv-dona-resto { stroke: var(--gv-gris); stroke-width: 12; }
.gv .gv-dona-arco { stroke-width: 12; stroke-linecap: round; }
.gv .gv-dona-arco.gv-verde { stroke: var(--gv-verde); }
.gv .gv-dona-arco.gv-rojo { stroke: var(--gv-rojo); }
.gv .gv-dona-arco.gv-neutra { stroke: var(--gv-tinta); }
.gv .gv-dona-meta { stroke: var(--gv-tinta); stroke-width: 1.5; }
.gv .gv-dona-valor { font-size: 20px; font-weight: 800; }
.gv .gv-vacio { fill: var(--gv-suave); font-size: 11px; }
.gv .gv-vacio-nota { fill: var(--gv-suave); font-size: 9.5px; }
.gv-panel-vacia { opacity: 0.92; }
.gv-fila { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
@media (min-width: 720px) { .gv-fila { grid-template-columns: 1fr 1fr; } }
.gv-fila .gv-panel { margin-top: 0; }
.gv-titulo { color: var(--gv-suave); font-size: 0.72rem; font-weight: 600; margin: 0 4px 6px; }
.gv.gv-dona { max-width: 150px; margin: 0 auto; }
/* El SVG (viewBox 320) no puede forzar el track del grid más ancho que el
   contenedor en pantallas angostas: el papel cede, el dibujo escala. */
.grid-deptos > .card-depto, .gv-fila > .gv-panel { min-width: 0; }
.gv { max-width: 100%; }

/* ── CONCILIADOR REFACCIONES ↔ PROVEEDORES · la herramienta de Diana (OBRA A) ──
   Ley de Edgar: fondos CLAROS siempre en las superficies de trabajo — el lienzo
   es «papel» (como las gráficas), tinta oscura, marca TF como acento de la
   relación. Tocar-y-relacionar (jamás drag): robusto en touch. Móvil primero. */
.conc-progreso { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.conc-progreso-texto { font-size: .82rem; color: var(--text-secondary); font-weight: 600; }
.conc-progreso .avance-barra { height: 8px; margin: 0; }
.conc-canvas {
    position: relative;
    background: var(--gv-papel); color: var(--gv-tinta);
    border-radius: 14px; padding: 14px;
    display: grid; grid-template-columns: 1fr; gap: 14px;
}
@media (min-width: 640px) { .conc-canvas { grid-template-columns: 1fr 1fr; } }
/* la línea conectora se dibuja encima del papel, sin robar los toques */
.conc-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.conc-svg .conc-linea { stroke: var(--gv-acento); stroke-width: 2.5; stroke-linecap: round; fill: none; opacity: .85; }
.conc-col { position: relative; z-index: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.conc-col-tit { font-size: .8rem; font-weight: 700; color: var(--gv-tinta); text-transform: uppercase; letter-spacing: .03em; }
.conc-buscar {
    padding: 8px 10px; border-radius: 8px; font-size: .85rem; font-family: inherit;
    background: #fff; color: var(--gv-tinta); border: 1px solid var(--gv-rejilla); width: 100%;
}
.conc-buscar:focus { outline: none; border-color: var(--brand-primary); }
.conc-lista { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow-y: auto; padding-right: 2px; }
.conc-card {
    display: flex; flex-direction: column; gap: 2px; text-align: left; width: 100%;
    min-height: 44px; padding: 9px 12px; border-radius: 10px; cursor: pointer;
    background: #fff; color: var(--gv-tinta);
    border: 1.5px solid var(--gv-rejilla); font-family: inherit;
    transition: border-color .15s ease, background .15s ease, transform .28s ease, opacity .28s ease;
}
.conc-card:hover { border-color: rgba(214,69,80,.5); }
.conc-card.sel { border-color: var(--gv-acento); background: rgba(214,69,80,.08); box-shadow: 0 0 0 1px rgba(214,69,80,.35); }
.conc-card .conc-card-tit { font-weight: 600; font-size: .86rem; }
.conc-card .conc-card-sub { font-size: .72rem; color: var(--gv-suave); }
.conc-card.saliendo { opacity: 0; transform: translateX(14px); }
@media (prefers-reduced-motion: reduce) { .conc-card { transition: border-color .15s ease, background .15s ease; } .conc-card.saliendo { opacity: 0; transform: none; } }
.conc-col-vacio { font-size: .82rem; color: var(--gv-suave); padding: 10px 4px; }
.conc-acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.conc-deshacer {
    border: 1px solid var(--gv-rejilla); background: transparent; color: var(--text-secondary);
    border-radius: 9px; padding: 9px 16px; font-family: inherit; font-size: .82rem; cursor: pointer;
}
.conc-deshacer:hover:not(:disabled) { border-color: var(--brand-primary); color: var(--brand-primary); }
.conc-deshacer:disabled { opacity: .4; cursor: default; }
.conc-listo {
    text-align: center; padding: 28px 16px; background: var(--gv-papel);
    color: var(--gv-tinta); border-radius: 14px;
}
.conc-listo .conc-listo-emoji { font-size: 2rem; margin-bottom: 8px; }
.conc-listo p { color: var(--gv-suave); font-size: .9rem; line-height: 1.5; max-width: 440px; margin: 0 auto; }
.conc-listo .conc-listo-tit { color: var(--gv-tinta); font-weight: 700; font-size: 1rem; margin-bottom: 4px; }

/* ── Sub-portales conmutables · RH + Gestiones (OBRA B · v2 · 11 jul) ──────── */
.sub-portal-tabs {
    display: flex; gap: 8px; margin: 4px 0 18px;
    border-bottom: 1px solid var(--gv-rejilla); padding-bottom: 0;
}
.sub-tab {
    border: 1px solid transparent; border-bottom: none;
    background: transparent; color: var(--text-secondary);
    border-radius: 10px 10px 0 0; padding: 10px 20px; margin-bottom: -1px;
    font-family: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.sub-tab:hover:not(.activa) { color: var(--brand-primary); }
.sub-tab.activa {
    color: var(--brand-primary);
    background: var(--glass-soft);
    border-color: var(--gv-rejilla);
    border-bottom: 1px solid var(--bg-base);
}
.sub-portal-pane[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .sub-tab { transition: none; } }

/* ── OBRA A · Ojo de Sauron · solo-lectura + Notas de Dirección (v2) ───────── */
/* Supresión de TODA superficie de escritura de las secciones cuando la
   Dirección observa en modo espejo. La franja/compositor de notas vive fuera
   de .seccion (en .ojo-sauron) → no se ve afectada. El "Salir" se conserva. */
.solo-lectura .seccion form,
.solo-lectura .seccion .btn-primario,
.solo-lectura .seccion .ver-doc,
.solo-lectura .seccion button:not(.salir),
.solo-lectura .seccion input,
.solo-lectura .seccion select,
.solo-lectura .seccion textarea { display: none !important; }
.solo-lectura .portal-header { box-shadow: inset 0 -2px 0 var(--warning, #d97706); }

.ojo-sauron { margin: 0 0 20px; }
/* Mini-pase 12 jul · encuadre de ACOMPAÑAMIENTO, no de vigilancia: nota amable
   (acento cálido a la izquierda), jamás alerta roja/naranja de auditoría. */
.ojo-sauron-banner {
    display: flex; align-items: center; gap: 12px;
    background: var(--glass-soft); border: 1px solid var(--gv-rejilla);
    border-left: 3px solid var(--brand-primary);
    border-radius: 12px; padding: 12px 16px; margin-bottom: 14px;
}
.ojo-sauron-banner .ojo-ojo { font-size: 1.4rem; line-height: 1; }
.ojo-sauron-banner .ojo-texto { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.ojo-sauron-banner .ojo-texto strong { color: var(--brand-primary); font-size: .92rem; }
.ojo-sauron-banner .ojo-texto span { color: var(--text-secondary); font-size: .8rem; }
.ojo-sauron-banner .ojo-volver {
    border: 1px solid var(--gv-rejilla); border-radius: 9px; padding: 8px 14px;
    color: var(--text-secondary); font-size: .8rem; text-decoration: none; white-space: nowrap;
}
.ojo-sauron-banner .ojo-volver:hover { border-color: var(--brand-primary); color: var(--brand-primary); }

.nota-dir-franja {
    background: var(--glass-soft); border: 1px solid var(--gv-rejilla);
    border-left: 3px solid var(--brand-primary); border-radius: 10px;
    padding: 12px 16px; margin-bottom: 14px;
}
.nota-dir-franja[hidden] { display: none; }
.nota-dir-badge {
    display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--brand-primary); margin-bottom: 8px;
}
.nota-dir-item { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 4px 0; }
.nota-dir-item .nota-dir-texto { color: var(--text-primary); font-size: .88rem; margin: 0; line-height: 1.45; }
.nota-dir-item .fecha { color: var(--gv-suave); font-size: .74rem; white-space: nowrap; }
.nota-dir-form {
    background: var(--glass-soft); border: 1px dashed var(--gv-rejilla);
    border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
}
.nota-dir-form textarea {
    width: 100%; box-sizing: border-box; resize: vertical; font-family: inherit; font-size: .88rem;
    border: 1px solid var(--gv-rejilla); border-radius: 8px; padding: 8px 10px;
    background: var(--bg-base); color: var(--text-primary);
}
.ojo-fila select { margin: 0 4px; }

/* ── LA PUERTA DEL EJECUTIVO · programación semanal del cliente (comercial) ──
   Una invitación, no un formulario duro: las tres entradas conviven a la vista
   y la previsualización es INFORMACIÓN (lo que entendimos), nunca una decisión.
   En modo espejo, la superficie de escritura ni se construye (.solo-lectura
   además la suprimiría). */
.prog-entradas { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.prog-campo { display: flex; flex-direction: column; gap: 4px; font-size: .74rem; color: var(--text-secondary); }
.prog-campo select {
    padding: 8px 10px; border-radius: 8px; font-size: .85rem;
    background: rgba(255,255,255,.06); color: var(--text-primary, #fff);
    border: 1px solid rgba(255,255,255,.14); max-width: 420px;
}
.prog-campo select:focus, .prog-textarea:focus { outline: none; border-color: var(--brand-primary); }
.prog-textarea {
    width: 100%; box-sizing: border-box; resize: vertical; font-family: inherit; font-size: .85rem;
    border: 1px solid var(--gv-rejilla); border-radius: 8px; padding: 8px 10px;
    background: var(--bg-base); color: var(--text-primary);
}
.prog-acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn-secundario {
    padding: 9px 16px; border-radius: 9px; cursor: pointer; font-size: .82rem; font-weight: 600;
    background: transparent; color: var(--brand-primary);
    border: 1px solid var(--brand-primary);
}
.btn-secundario:hover { background: rgba(251,191,36,.12); }
.btn-secundario:disabled { opacity: .55; cursor: wait; }
.prog-preview {
    margin-top: 14px; padding: 14px 16px; border-radius: 12px;
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.12);
}
.prog-preview[hidden], .prog-envio[hidden] { display: none; }
.prog-titulo { margin: 0 0 8px; font-size: .9rem; font-weight: 600; }
.prog-preview .nota { color: var(--text-muted); font-size: .8rem; margin: 8px 0 0; }
.prog-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.prog-envio { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-top: 14px; }
/* §22 FRONTERA-IA · se dice ANTES de subir el archivo, sin drama y sin letra chica */
.prog-frontera { margin-top: 4px; font-size: .74rem; color: var(--text-muted); line-height: 1.45; }
/* G3-copy · «Las que has enviado»: la promesa del portal, cumplida en pantalla */
.prog-enviadas { margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.10); }
.prog-enviadas .fila-doc { align-items: center; }

/* ── EL BUZÓN DE CUENTAS POR PAGAR · vidrio AHUMADO OSCURO (15 jul) ─────────
   Dirección aprobada por Edgar en Stitch («Buzón de Cuentas por Pagar —
   Refinado Pro» · VARIANTE OSCURA): tinta clara sobre humo. Es SU elección
   explícita para ESTA pantalla —la variante clara se generó y la rechazó—,
   la excepción consciente a su ley de fondos claros (registrada el 15-jul):
   no se «corrige» a claro. Misma gramática boarding-pass del tablero de
   maniobras: tickets con muescas y corte punteado, secciones como chips
   esmerilados, UN solo rojo sólido («Guardar factura», en la vista previa).
   Los tonos de texto del semáforo son variantes CLARAS (--cxp-*-txt): los
   --gv-* de gráfica son para papel y sobre humo no llegan a 4.5:1 — medido,
   no supuesto (tests/tools/evidencia-cxp-buzon.mjs · la lección del texto
   invisible, 14-jul). */
:root {
    --cxp-humo: rgba(16, 11, 34, 0.86);          /* el humo del ticket */
    --cxp-humo-suave: rgba(16, 11, 34, 0.78);    /* recibos · chips · nota */
    --cxp-humo-hondo: rgba(8, 5, 20, 0.60);      /* pozos dentro del humo (textarea) */
    --cxp-borde: rgba(244, 240, 255, 0.18);
    --cxp-tinta: #F4F0FF;
    --cxp-tinta-suave: rgba(232, 224, 255, 0.85);
    --cxp-verde-txt: #7CE3B1;
    --cxp-ambar-txt: #FFD37D;
    --cxp-rojo-txt: #FFB3BA;                     /* texto chico en rojo */
    --cxp-rojo-vivo: #FF97A0;                    /* cifras grandes en rojo */
}
/* el HOST del buzón (facturación · section.seccion): su h2 y su mensaje de
   sección viven sobre el glass del shell y confiaban en la veladura del body
   para leerse — la verificación ejecutada (foto clara SIN acreditar veladura)
   los cazó en ~1.4:1. Se les da el MISMO humo de la piel, escopado con :has()
   para no tocar ni una sección de los demás portales. El h2 del host queda
   como EL título visible; el del panel (dictado por la vista) se calla aquí
   para no decir «Cuentas por pagar» dos veces, una arriba de la otra. */
.seccion:has(.cxp-panel) > h2 {
    display: inline-block; background: var(--cxp-humo-suave); border: 1px solid var(--cxp-borde);
    border-radius: 999px; padding: 8px 18px; margin-bottom: 10px; font-weight: 800;
    backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.seccion:has(.cxp-panel) > .form-msg {
    display: inline-block; background: var(--cxp-humo-suave); border: 1px solid var(--cxp-borde);
    border-radius: 10px; padding: 8px 12px; margin-bottom: 4px;
    backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.seccion:has(> h2) .cxp-titulo { display: none; }
.cxp-panel { color: var(--cxp-tinta); padding: 2px 0 10px; }
.cxp-panel .mono, .cxp-subir .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; }
.cxp-titulo {
    display: inline-block; font-size: 1rem; font-weight: 800; color: var(--cxp-tinta);
    background: var(--cxp-humo-suave); border: 1px solid var(--cxp-borde);
    border-radius: 999px; padding: 8px 18px; margin: 0 0 10px;
    backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.cxp-nota {
    background: var(--cxp-humo-suave); border: 1px solid var(--cxp-borde);
    border-radius: 12px; padding: 10px 14px; margin: 0 0 14px; max-width: 760px;
    font-size: .78rem; line-height: 1.55; color: var(--cxp-tinta-suave);
    backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.cxp-vacio {
    background: var(--cxp-humo-suave); border: 1px dashed rgba(244,240,255,.30);
    border-radius: 16px; padding: 24px; max-width: 680px; margin-top: 14px;
    font-size: .78rem; color: var(--cxp-tinta-suave); line-height: 1.6;
    backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* las píldoras del resumen: etiqueta en versalitas + cifra prominente; en la
   de vencidas la CIFRA es la N, en rojo — la dirección aprobada */
.cxp-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.cxp-pildora {
    display: flex; flex-direction: column; gap: 2px; min-width: 168px;
    background: var(--cxp-humo); border: 1px solid var(--cxp-borde);
    border-radius: 14px; padding: 12px 18px;
    backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.cxp-pildora-etq {
    font-size: .78rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--cxp-tinta-suave);
}
.cxp-pildora-cifra { font-size: 26px; font-weight: 800; color: var(--cxp-tinta); font-variant-numeric: tabular-nums; line-height: 1.15; }
.cxp-pildora-sub { font-size: .78rem; color: var(--cxp-tinta-suave); }
.cxp-pildora-texto { font-size: .78rem; font-weight: 700; color: var(--cxp-tinta); align-self: center; }
.cxp-pildora.danger .cxp-pildora-etq { color: var(--cxp-rojo-txt); }
.cxp-pildora.danger .cxp-pildora-cifra { color: var(--cxp-rojo-vivo); }
.cxp-pildora.warning .cxp-pildora-etq { color: var(--cxp-ambar-txt); }
.cxp-pildora.muted .cxp-pildora-cifra { color: var(--cxp-tinta-suave); }

.cxp-divisa {
    display: inline-block; font-size: .78rem; font-weight: 600; margin: 0 0 10px;
    color: var(--cxp-ambar-txt); background: var(--cxp-humo-suave);
    border: 1px solid rgba(255,211,125,.35); border-radius: 10px; padding: 8px 12px;
    backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* las secciones: chip esmerilado con su punto y su conteo — la foto respira */
.cxp-seccion { margin-top: 22px; }
.cxp-seccion-chip {
    display: inline-flex; align-items: center; gap: 10px; margin: 0 0 12px;
    background: var(--cxp-humo-suave); border: 1px solid var(--cxp-borde);
    border-radius: 999px; padding: 8px 16px 8px 14px;
    backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.cxp-seccion-chip::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--gv-acento); flex: 0 0 auto; }
.cxp-seccion-pagadas .cxp-seccion-chip::before { background: rgba(244,240,255,.38); }
.cxp-seccion-titulo { font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--cxp-tinta); }
.cxp-seccion-num {
    font-size: .78rem; font-weight: 800; color: var(--cxp-tinta);
    background: rgba(244,240,255,.14); border-radius: 999px; padding: 2px 9px; font-variant-numeric: tabular-nums;
}
.cxp-lista { display: flex; flex-direction: column; gap: 16px; }

/* el TICKET: dos zonas de humo, corte punteado y muescas (la sombra, UNA, vive
   en el underlay ::before — la máscara se comería un box-shadow propio) */
.cxp-ticket { position: relative; }
.cxp-ticket::before {
    content: ''; position: absolute; inset: 10px 12px; border-radius: 16px;
    box-shadow: 0 18px 44px rgba(4, 2, 12, .50); z-index: -1;
}
.cxp-zona {
    background: var(--cxp-humo); border: 1px solid var(--cxp-borde);
    backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.cxp-zona-info {
    border-radius: 16px 16px 0 0; border-bottom: 0; padding: 18px 22px 14px;
    -webkit-mask-image:
        radial-gradient(circle 10px at 0 100%, transparent 9.5px, #000 10.5px),
        radial-gradient(circle 10px at 100% 100%, transparent 9.5px, #000 10.5px);
    -webkit-mask-composite: source-in;
    mask-image:
        radial-gradient(circle 10px at 0 100%, transparent 9.5px, #000 10.5px),
        radial-gradient(circle 10px at 100% 100%, transparent 9.5px, #000 10.5px);
    mask-composite: intersect;
}
.cxp-zona-acciones {
    border-radius: 0 0 16px 16px; border-top: 1.5px dashed rgba(244,240,255,.32);
    padding: 12px 22px 14px;
    -webkit-mask-image:
        radial-gradient(circle 10px at 0 0, transparent 9.5px, #000 10.5px),
        radial-gradient(circle 10px at 100% 0, transparent 9.5px, #000 10.5px);
    -webkit-mask-composite: source-in;
    mask-image:
        radial-gradient(circle 10px at 0 0, transparent 9.5px, #000 10.5px),
        radial-gradient(circle 10px at 100% 0, transparent 9.5px, #000 10.5px);
    mask-composite: intersect;
}
.cxp-zona-info:last-child { border-radius: 16px; border-bottom: 1px solid var(--cxp-borde); -webkit-mask-image: none; mask-image: none; }

/* el encabezado: el proveedor manda; el aging, en la esquina */
.cxp-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.cxp-quien { min-width: 0; }
.cxp-proveedor { font-size: 19px; font-weight: 800; color: var(--cxp-tinta); line-height: 1.25; overflow-wrap: anywhere; }
.cxp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.cxp-chip-ruteo {
    display: inline-block; border: 1px solid rgba(244,240,255,.35); border-radius: 999px;
    padding: 3px 10px; font-size: .78rem; font-weight: 700; letter-spacing: .10em;
    text-transform: uppercase; color: var(--cxp-tinta); background: rgba(244,240,255,.10);
}
.cxp-chip-orden {
    display: inline-block; border: 1px solid rgba(255,211,125,.40); border-radius: 999px;
    padding: 3px 10px; font-size: .78rem; font-weight: 700;
    color: var(--cxp-ambar-txt); background: rgba(255,211,125,.10);
}
.cxp-rfc, .cxp-fecha { font-size: .78rem; color: var(--cxp-tinta-suave); }

/* la etiqueta de la esquina: A TIEMPO · ESTA SEMANA · VENCIDA */
.cxp-esquina {
    display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
    border-radius: 999px; padding: 6px 13px;
    font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    border: 1px solid rgba(244,240,255,.22); background: rgba(244,240,255,.08);
    color: var(--cxp-tinta-suave);
}
.cxp-punto { width: 8px; height: 8px; border-radius: 50%; background: rgba(244,240,255,.40); flex: 0 0 auto; }
.cxp-esquina.ok { color: var(--cxp-verde-txt); }
.cxp-esquina.ok .cxp-punto { background: var(--cxp-verde-txt); }
.cxp-esquina.warning { color: var(--cxp-ambar-txt); }
.cxp-esquina.warning .cxp-punto { background: var(--cxp-ambar-txt); }
.cxp-esquina.danger { color: var(--cxp-rojo-txt); }
.cxp-esquina.danger .cxp-punto { background: var(--cxp-rojo-vivo); }

/* el calendarito del vencimiento (día grande) y el monto prominente */
.cxp-media { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; align-items: stretch; }
.cxp-cal {
    display: flex; flex-direction: column; gap: 2px; min-width: 116px;
    border: 1px solid rgba(244,240,255,.18); border-radius: 12px;
    background: rgba(244,240,255,.07); padding: 10px 14px;
}
.cxp-cal-etq { font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cxp-tinta-suave); }
.cxp-cal-dia { font-size: 26px; font-weight: 800; color: var(--cxp-tinta); font-variant-numeric: tabular-nums; line-height: 1.1; }
.cxp-cal-mes { font-size: .78rem; font-weight: 600; color: var(--cxp-tinta-suave); }
.cxp-monto-bloque { justify-content: flex-start; }
.cxp-monto { font-size: 26px; font-weight: 800; color: var(--cxp-tinta); font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap; }

/* el semáforo dictado, palabra por palabra */
.cxp-reloj { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: .78rem; font-weight: 600; color: var(--cxp-tinta-suave); }
.cxp-reloj .cxp-punto { width: 7px; height: 7px; }
.cxp-reloj.ok .cxp-punto { background: var(--cxp-verde-txt); }
.cxp-reloj.warning .cxp-punto { background: var(--cxp-ambar-txt); }
.cxp-reloj.warning .cxp-reloj-texto { color: var(--cxp-ambar-txt); }
.cxp-reloj.danger .cxp-punto { background: var(--cxp-rojo-vivo); }
.cxp-reloj.danger .cxp-reloj-texto { color: var(--cxp-rojo-txt); }

/* el estado del ciclo + a qué proceso va (y por qué) */
.cxp-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.cxp-chip {
    display: inline-block; border-radius: 8px; padding: 3px 10px;
    font-size: .78rem; font-weight: 600; line-height: 1.4;
    background: rgba(244,240,255,.10); color: var(--cxp-tinta); border: 1px solid rgba(244,240,255,.22);
}
.cxp-chip.ok { color: var(--cxp-verde-txt); border-color: rgba(124,227,177,.45); background: rgba(124,227,177,.10); }
.cxp-chip.warning { color: var(--cxp-ambar-txt); border-color: rgba(255,211,125,.45); background: rgba(255,211,125,.10); }
.cxp-chip.danger { color: var(--cxp-rojo-txt); border-color: rgba(255,151,160,.45); background: rgba(255,151,160,.10); }
.cxp-chip.muted { color: var(--cxp-tinta-suave); }
.cxp-destino-texto { font-size: .78rem; color: var(--cxp-tinta-suave); }
.cxp-ruteo { font-size: .78rem; color: var(--cxp-tinta-suave); font-style: italic; }
.cxp-sugerida { margin: 10px 0 0; font-size: .78rem; color: var(--cxp-tinta-suave); line-height: 1.5; }

/* el hueco se VE (§20.c) */
.cxp-avisos { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.cxp-aviso {
    font-size: .78rem; font-weight: 600; line-height: 1.5; border-radius: 10px; padding: 8px 12px;
    border: 1px solid rgba(255,211,125,.45); background: rgba(255,211,125,.10); color: var(--cxp-ambar-txt);
}
.cxp-aviso.danger { border-color: rgba(255,151,160,.45); background: rgba(255,151,160,.10); color: var(--cxp-rojo-txt); }
.cxp-aviso.error { border-color: rgba(255,151,160,.45); background: rgba(255,151,160,.10); color: var(--cxp-rojo-txt); }

/* las acciones de la fila: TODAS fantasma, tap ≥44px (el único rojo sólido de
   la pantalla es «Guardar factura», en la vista previa) */
.cxp-acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cxp-fila .btn-mini {
    min-height: 44px; padding: 8px 18px; border-radius: 12px;
    background: rgba(244,240,255,.08); border: 1.5px solid rgba(244,240,255,.38);
    color: var(--cxp-tinta); font-size: .78rem; font-weight: 700; letter-spacing: .02em;
    cursor: pointer; font-family: inherit;
}
.cxp-fila .btn-mini:hover { background: rgba(214,69,80,.22); border-color: rgba(255,151,160,.60); }
.cxp-fila .btn-mini:focus-visible { outline: 3px solid rgba(255,151,160,.60); outline-offset: 2px; }
.cxp-fila .btn-mini:disabled { opacity: .5; cursor: wait; }

/* FASE 10.i · el chip «Solicitar OC» (remate 15-jul): acción-CHIP en la familia
   ámbar de la orden de compra (la de .cxp-chip-orden) — píldora y versalitas
   para que el ojo lo distinga de las acciones del dinero. Fantasma, jamás rojo:
   el único rojo sólido sigue siendo «Guardar factura». El hover se queda en su
   ámbar (el rojo del hover genérico diría «dinero» donde no lo hay). */
.cxp-fila .btn-mini.cxp-chip-solicitar {
    border-radius: 999px; text-transform: uppercase; letter-spacing: .08em;
    font-size: .72rem; font-weight: 800;
    color: var(--cxp-ambar-txt); border-color: rgba(255,211,125,.50);
    background: rgba(255,211,125,.10);
}
.cxp-fila .btn-mini.cxp-chip-solicitar:hover { background: rgba(255,211,125,.20); border-color: rgba(255,211,125,.70); }

/* …y el estado declarado mientras Compras responde: mismo lenguaje ámbar, pero
   NO es botón — es la palabra que habla donde viviría el folio de la orden. */
.cxp-chip-solicitada {
    display: inline-block; border-radius: 999px; padding: 3px 12px;
    font-size: .78rem; font-weight: 700; line-height: 1.4;
    color: var(--cxp-ambar-txt); background: rgba(255,211,125,.10);
    border: 1px solid rgba(255,211,125,.45);
}

/* el RECIBO silencioso (pagadas): humo suave, sin gritos */
.cxp-recibo {
    background: var(--cxp-humo-suave); border: 1px solid rgba(244,240,255,.14);
    border-radius: 14px; padding: 12px 18px;
    backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 8px 22px rgba(4, 2, 12, .32);
}
.cxp-recibo-linea { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; }
.cxp-proveedor-mini { font-size: .88rem; font-weight: 800; color: var(--cxp-tinta); overflow-wrap: anywhere; }
.cxp-monto-mini { font-size: .88rem; font-weight: 800; color: var(--cxp-tinta); font-variant-numeric: tabular-nums; }
.cxp-recibo-fecha { font-size: .78rem; color: var(--cxp-tinta-suave); margin-left: auto; }
.cxp-recibo .cxp-acciones, .cxp-recibo .cxp-avisos { margin-top: 10px; }

/* ligar a orden de compra: el motor PROPONE, el humano confirma (D3) */
.cxp-ligar {
    margin-top: 12px; padding: 14px 16px; border-radius: 14px;
    border: 1.5px dashed rgba(244,240,255,.35); background: var(--cxp-humo);
    backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.cxp-ligar-titulo { font-size: .78rem; font-weight: 800; letter-spacing: .06em; color: var(--cxp-tinta); flex-basis: 100%; }
.cxp-select {
    background: var(--cxp-humo-hondo); color: var(--cxp-tinta);
    border: 1px solid rgba(244,240,255,.35); border-radius: 10px;
    padding: 9px 12px; min-height: 44px; font-size: .78rem; font-family: inherit; max-width: 100%;
}
.cxp-select:focus { outline: none; border-color: rgba(255,151,160,.60); }

/* subir el CFDI: arrastrar, pegar o elegir · la vista previa antes del server */
.cxp-subir {
    margin: 14px 0; padding: 16px 18px; color: var(--cxp-tinta);
    background: var(--cxp-humo); border: 1px solid var(--cxp-borde); border-radius: 16px;
    backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.cxp-subir-titulo { font-size: .88rem; font-weight: 800; color: var(--cxp-tinta); margin: 0 0 4px; }
.cxp-subir-nota { font-size: .78rem; color: var(--cxp-tinta-suave); line-height: 1.5; margin: 0 0 12px; }
.cxp-soltar {
    border: 1.5px dashed rgba(244,240,255,.35); border-radius: 14px; padding: 16px;
    text-align: center; background: rgba(244,240,255,.05);
    transition: border-color .15s ease, background .15s ease;
}
.cxp-soltar-activa { border-color: var(--cxp-rojo-vivo); background: rgba(214,69,80,.14); }
@media (prefers-reduced-motion: reduce) { .cxp-soltar { transition: none; } }
/* el icono de la zona (flecha de subir), dibujado por el CSS — el DOM no adorna */
.cxp-soltar-icono {
    display: block; width: 34px; height: 34px; margin: 0 auto 8px;
    border: 2px solid rgba(244,240,255,.50); border-radius: 9px; position: relative;
}
.cxp-soltar-icono::before {
    content: ''; position: absolute; left: 50%; top: 8px; width: 2px; height: 14px;
    background: rgba(244,240,255,.70); transform: translateX(-50%);
}
.cxp-soltar-icono::after {
    content: ''; position: absolute; left: 50%; top: 6px; width: 9px; height: 9px;
    border-left: 2px solid rgba(244,240,255,.70); border-top: 2px solid rgba(244,240,255,.70);
    transform: translateX(-50%) rotate(45deg);
}
.cxp-soltar-texto { font-size: .78rem; font-weight: 600; color: var(--cxp-tinta-suave); margin: 0 0 10px; }
.cxp-textarea {
    width: 100%; background: var(--cxp-humo-hondo); color: var(--cxp-tinta);
    border: 1px solid rgba(244,240,255,.22); border-radius: 10px; padding: 10px 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; resize: vertical;
}
.cxp-textarea::placeholder { color: rgba(232,224,255,.62); }
.cxp-textarea:focus { outline: none; border-color: rgba(255,151,160,.60); }
.cxp-subir-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; align-items: center; }
.cxp-btn-fantasma {
    min-height: 44px; padding: 8px 18px; border-radius: 12px;
    background: rgba(244,240,255,.08); border: 1.5px solid rgba(244,240,255,.38);
    color: var(--cxp-tinta); font-size: .78rem; font-weight: 700; letter-spacing: .02em;
    cursor: pointer; font-family: inherit;
}
.cxp-btn-fantasma:hover { background: rgba(214,69,80,.22); border-color: rgba(255,151,160,.60); }
.cxp-btn-fantasma:focus-visible { outline: 3px solid rgba(255,151,160,.60); outline-offset: 2px; }
.cxp-btn-fantasma:disabled { opacity: .5; cursor: wait; }
/* blanco sobre rojo de marca a 19px/800 = texto GRANDE (WCAG ≥3:1 ✓) — el
   ÚNICO rojo sólido de la pantalla: guardar la factura previsualizada */
.cxp-btn-rojo {
    background: var(--gv-acento); border: 1.5px solid var(--gv-acento); color: #fff;
    font-size: 19px; font-weight: 800; min-height: 48px; padding: 8px 26px;
    border-radius: 12px; letter-spacing: .01em; cursor: pointer; font-family: inherit; margin-top: 12px;
}
.cxp-btn-rojo:hover { background: #C13B46; border-color: #C13B46; }
.cxp-btn-rojo:focus-visible { outline: 3px solid rgba(255,151,160,.60); outline-offset: 2px; }
.cxp-btn-rojo:disabled { opacity: .55; cursor: wait; }

/* la VISTA PREVIA del CFDI: lo que entendimos, antes de que nada se guarde */
.cxp-preview {
    margin-top: 12px; padding: 14px 16px; border-radius: 12px;
    background: rgba(244,240,255,.07); border: 1px solid var(--cxp-borde);
}
.cxp-preview-etq {
    display: block; font-size: .78rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--cxp-tinta-suave); margin: 0 0 6px;
}
.cxp-preview-msg { font-size: .88rem; font-weight: 700; margin: 0 0 10px; color: var(--cxp-tinta); }
.cxp-preview-msg.ok { color: var(--cxp-verde-txt); }
.cxp-preview-msg.error { color: var(--cxp-rojo-txt); }
.cxp-preview-datos { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.cxp-dato { display: flex; flex-direction: column; min-width: 0; }
.cxp-dato-etiqueta { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .10em; color: var(--cxp-tinta-suave); }
.cxp-dato-valor { font-size: .88rem; font-weight: 700; color: var(--cxp-tinta); overflow-wrap: anywhere; }
.cxp-preview-aviso { font-size: .78rem; font-weight: 600; margin: 10px 0 0; line-height: 1.5; }
.cxp-preview-aviso.error { color: var(--cxp-rojo-txt); }
.cxp-preview-aviso.warning { color: var(--cxp-ambar-txt); }
.cxp-subir .ccp-msg { display: block; margin-top: 10px; font-size: .78rem; }
.cxp-subir .ccp-msg.ok { color: var(--cxp-verde-txt); }
.cxp-subir .ccp-msg.error { color: var(--cxp-rojo-txt); }
.cxp-subir .ccp-msg.warning { color: var(--cxp-ambar-txt); }
.cxp-subir .ccp-msg.progreso { color: var(--cxp-tinta-suave); }

/* accesibilidad: sin transparencias → humo sólido (la lección del texto invisible) */
@media (prefers-reduced-transparency: reduce) {
    .cxp-zona, .cxp-recibo, .cxp-ligar, .cxp-pildora, .cxp-seccion-chip,
    .cxp-titulo, .cxp-nota, .cxp-subir, .cxp-divisa, .cxp-vacio,
    .seccion:has(.cxp-panel) > h2, .seccion:has(.cxp-panel) > .form-msg {
        background: #14102B; backdrop-filter: none; -webkit-backdrop-filter: none;
    }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .cxp-zona, .cxp-recibo, .cxp-ligar, .cxp-pildora, .cxp-seccion-chip,
    .cxp-titulo, .cxp-nota, .cxp-subir, .cxp-divisa, .cxp-vacio,
    .seccion:has(.cxp-panel) > h2, .seccion:has(.cxp-panel) > .form-msg { background: rgba(13, 9, 28, .96); }
}
@media (max-width: 720px) {
    .cxp-cal-dia, .cxp-monto, .cxp-pildora-cifra { font-size: 22px; }
    .cxp-proveedor { font-size: 17px; }
    .cxp-zona-info, .cxp-zona-acciones { padding-left: 16px; padding-right: 16px; }
    .cxp-btn-rojo { width: 100%; }
    .cxp-recibo-fecha { margin-left: 0; flex-basis: 100%; }
}
/* el mensaje de sección (vive en el glass OSCURO, fuera del panel) sí usa el tono
   warning — no existía y salía en color de cuerpo, indistinguible de un aviso neutro */
.form-msg.warning { color: var(--warning); }

/* ── Tablero de maniobras · piel boarding-pass de vidrio CLARO (15 jul) ──────
   Dirección aprobada por Edgar en Stitch («Refinado Pro»): cada maniobra es un
   ticket de vidrio claro sobre la foto de la casa, con muescas laterales,
   línea de corte punteada y UN solo rojo sólido (Confirmar recepción). Esta es
   la copia CANÓNICA sin escopar del pincel (maniobras-ui.mjs); la que hoy
   APLICA en vivo es su réplica escopada a #maniobrasModal dentro de
   public/operaciones/index.html (esa página no enlaza este archivo) — si
   tocas una, toca la otra. Los tonos de TEXTO chico sobre vidrio son
   variantes oscuras (--man-*-txt): los --gv-* de gráfica no llegan a 4.5:1
   sobre vidrio (la lección del texto invisible, 14-jul; contraste verificado
   por tests/tools/evidencia-maniobras-tablero.mjs). */
.man-panel {
    color: var(--gv-tinta); padding: 2px 0 24px;
    --man-vidrio: rgba(255, 255, 255, 0.88);
    --man-vidrio-suave: rgba(255, 255, 255, 0.82);
    --man-borde-luz: rgba(255, 255, 255, 0.65);
    --man-tinta-suave: rgba(43, 36, 54, 0.78);
    --man-verde-txt: #0A5C41;
    --man-ambar-txt: #7C3607;
    --man-rojo-txt: #A31616;
}
.man-titulo { font-size: 1rem; font-weight: 800; color: var(--gv-tinta); margin: 0 0 6px; }
.man-nota {
    background: var(--man-vidrio-suave); border: 1px solid var(--man-borde-luz);
    border-radius: 12px; padding: 10px 14px; margin: 0 0 16px; max-width: 760px;
    font-size: .78rem; line-height: 1.55; color: var(--man-tinta-suave);
    backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%);
}
.man-vacio {
    background: var(--man-vidrio-suave); border: 1px dashed rgba(43,36,54,.30);
    border-radius: 16px; padding: 28px 24px; max-width: 680px;
    font-size: .82rem; color: var(--man-tinta-suave); line-height: 1.6;
    backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
}
.man-panel .mono { font-family: 'SF Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }

/* arriba SOLO las píldoras de conteo, esmeriladas — sin widgets */
.man-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.man-pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--man-vidrio-suave); border: 1px solid var(--man-borde-luz);
    border-radius: 999px; padding: 8px 16px; font-size: .82rem; font-weight: 700; color: var(--gv-tinta);
    backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%);
}
.man-pill::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: rgba(43,36,54,.35); flex: 0 0 auto; }
.man-pill.ok::before { background: var(--gv-verde); }
.man-pill.warning::before { background: var(--gv-ambar); }
.man-pill.danger::before { background: var(--gv-rojo); }

/* la tasa de pérdida: una línea callada */
.man-tasa {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
    background: var(--man-vidrio-suave); border: 1px solid var(--man-borde-luz);
    border-radius: 12px; padding: 8px 14px; margin: 8px 0 0;
    backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%);
}
.man-tasa-texto { font-size: .78rem; font-weight: 600; color: var(--man-tinta-suave); }
.man-tasa-texto.ok { color: var(--man-verde-txt); }
.man-tasa-texto.warning { color: var(--man-ambar-txt); }
.man-tasa-texto.danger { color: var(--man-rojo-txt); }
.man-motivos { display: inline-flex; flex-wrap: wrap; gap: 6px; }

/* el chip genérico (motivos · división · estado del renglón) */
.man-chip {
    display: inline-block; border-radius: 8px; padding: 3px 10px;
    font-size: .78rem; font-weight: 600; line-height: 1.4;
    background: rgba(43,36,54,.06); color: var(--gv-tinta); border: 1px solid rgba(43,36,54,.18);
}
.man-chip.ok { color: var(--man-verde-txt); border-color: rgba(14,159,110,.45); background: rgba(14,159,110,.08); }
.man-chip.warning { color: var(--man-ambar-txt); border-color: rgba(217,119,6,.45); background: rgba(217,119,6,.08); }
.man-chip.danger { color: var(--man-rojo-txt); border-color: rgba(220,38,38,.40); background: rgba(220,38,38,.07); }
.man-chip.muted { color: rgba(43,36,54,.72); }

/* las secciones: chip esmerilado con su punto y su conteo, y aire entre ellas */
.man-seccion { margin-top: 24px; }
.man-seccion-chip {
    display: inline-flex; align-items: center; gap: 10px; margin: 0 0 12px;
    background: var(--man-vidrio-suave); border: 1px solid var(--man-borde-luz);
    border-radius: 999px; padding: 8px 16px 8px 14px;
    backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
}
.man-seccion-chip::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--gv-acento); flex: 0 0 auto; }
.man-seccion-encurso .man-seccion-chip::before { background: var(--gv-verde); }
.man-seccion-perdidas .man-seccion-chip::before { background: var(--gv-rojo); }
.man-seccion-cumplidas .man-seccion-chip::before { background: rgba(43,36,54,.40); }
.man-seccion-titulo { font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gv-tinta); }
.man-seccion-num {
    font-size: .78rem; font-weight: 800; color: var(--gv-tinta);
    background: rgba(43,36,54,.08); border-radius: 999px; padding: 2px 9px; font-variant-numeric: tabular-nums;
}
.man-lista { display: flex; flex-direction: column; gap: 16px; }

/* el TICKET: dos zonas de vidrio, corte punteado y muescas (la sombra, UNA,
   vive en el underlay ::before — la máscara se comería un box-shadow propio) */
.man-ticket { position: relative; }
.man-ticket::before {
    content: ''; position: absolute; inset: 10px 12px; border-radius: 16px;
    box-shadow: 0 18px 44px rgba(14,9,33,.30); z-index: -1;
}
.man-zona {
    background: var(--man-vidrio); border: 1px solid var(--man-borde-luz);
    backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
}
.man-zona-info {
    border-radius: 16px 16px 0 0; border-bottom: 0; padding: 20px 24px 16px;
    -webkit-mask-image:
        radial-gradient(circle 10px at 0 100%, transparent 9.5px, #000 10.5px),
        radial-gradient(circle 10px at 100% 100%, transparent 9.5px, #000 10.5px);
    -webkit-mask-composite: source-in;
    mask-image:
        radial-gradient(circle 10px at 0 100%, transparent 9.5px, #000 10.5px),
        radial-gradient(circle 10px at 100% 100%, transparent 9.5px, #000 10.5px);
    mask-composite: intersect;
}
.man-zona-acciones {
    border-radius: 0 0 16px 16px; border-top: 1.5px dashed rgba(43,36,54,.28);
    padding: 12px 24px 16px;
    -webkit-mask-image:
        radial-gradient(circle 10px at 0 0, transparent 9.5px, #000 10.5px),
        radial-gradient(circle 10px at 100% 0, transparent 9.5px, #000 10.5px);
    -webkit-mask-composite: source-in;
    mask-image:
        radial-gradient(circle 10px at 0 0, transparent 9.5px, #000 10.5px),
        radial-gradient(circle 10px at 100% 0, transparent 9.5px, #000 10.5px);
    mask-composite: intersect;
}
.man-zona-info:last-child { border-radius: 16px; border-bottom: 1px solid var(--man-borde-luz); -webkit-mask-image: none; mask-image: none; }

/* el encabezado del ticket: el código ES el título (rojo de marca, tabular) */
.man-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.man-codigos { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.man-codigo {
    font-size: 26px; font-weight: 800; letter-spacing: .015em; line-height: 1.15;
    color: var(--gv-acento); font-variant-numeric: tabular-nums; user-select: all;
}
.man-codigo-sin { color: rgba(43,36,54,.60); font-size: 19px; font-weight: 700; }
.man-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.man-chip-tipo {
    display: inline-block; border: 1px solid rgba(43,36,54,.30); border-radius: 999px;
    padding: 3px 10px; font-size: .78rem; font-weight: 700; letter-spacing: .10em;
    text-transform: uppercase; color: var(--gv-tinta); background: rgba(255,255,255,.55);
}
.man-cliente { font-size: .78rem; color: var(--man-tinta-suave); overflow-wrap: anywhere; }

/* la etiqueta de estado en la esquina: A TIEMPO · EN RIESGO · VENCIDA */
.man-esquina {
    display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
    border-radius: 999px; padding: 6px 13px;
    font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    border: 1px solid rgba(43,36,54,.16); background: rgba(255,255,255,.60);
}
.man-punto { width: 8px; height: 8px; border-radius: 50%; background: rgba(43,36,54,.35); flex: 0 0 auto; }
.man-esquina.ok { color: var(--man-verde-txt); }
.man-esquina.ok .man-punto { background: var(--gv-verde); }
.man-esquina.warning { color: var(--man-ambar-txt); }
.man-esquina.warning .man-punto { background: var(--gv-ambar); }
.man-esquina.danger { color: var(--man-rojo-txt); }
.man-esquina.danger .man-punto { background: var(--gv-rojo); }
.man-esquina.muted { color: rgba(43,36,54,.72); }

/* el calendarito: CITA (hora grande + fecha) con la TERMINAL al lado */
.man-media { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.man-cal {
    display: flex; flex-direction: column; gap: 2px; min-width: 132px;
    border: 1px solid rgba(43,36,54,.14); border-radius: 12px;
    background: rgba(255,255,255,.62); padding: 10px 14px;
}
.man-cal-etq { font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(43,36,54,.72); }
.man-cal-hora { font-size: 19px; font-weight: 800; color: var(--gv-tinta); font-variant-numeric: tabular-nums; line-height: 1.2; }
.man-cal-fecha { font-size: .78rem; font-weight: 600; color: var(--man-tinta-suave); font-variant-numeric: tabular-nums; }
.man-terminal-nombre { font-size: 19px; font-weight: 700; color: var(--gv-tinta); line-height: 1.25; overflow-wrap: anywhere; }
.man-modalidad { margin: 12px 0 0; font-size: .78rem; color: var(--man-tinta-suave); line-height: 1.5; }

/* el reloj del motor (en la perdida, este renglón es el chip del motivo) */
.man-reloj { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: .78rem; font-weight: 600; color: var(--man-tinta-suave); }
.man-reloj .man-punto { width: 7px; height: 7px; }
.man-reloj.ok .man-punto { background: var(--gv-verde); }
.man-reloj.warning .man-punto { background: var(--gv-ambar); }
.man-reloj.warning .man-reloj-texto { color: var(--man-ambar-txt); }
.man-reloj.danger .man-punto { background: var(--gv-rojo); }
.man-reloj.danger .man-reloj-texto { color: var(--man-rojo-txt); }
.man-seccion-perdidas .man-ticket .man-reloj {
    display: inline-flex; border: 1px solid rgba(220,38,38,.35); background: rgba(220,38,38,.07);
    border-radius: 999px; padding: 5px 12px;
}
.man-seccion-perdidas .man-ticket .man-reloj .man-punto { background: var(--gv-rojo); }
.man-seccion-perdidas .man-ticket .man-reloj .man-reloj-texto { color: var(--man-rojo-txt); font-weight: 700; }

.man-detalle { margin: 10px 0 0; font-size: .78rem; color: rgba(43,36,54,.72); line-height: 1.5; }

/* el hueco se VE (§20.c) */
.man-avisos { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.man-aviso {
    font-size: .78rem; font-weight: 600; line-height: 1.5; border-radius: 10px; padding: 8px 12px;
    border: 1px solid rgba(217,119,6,.40); background: rgba(217,119,6,.08); color: var(--man-ambar-txt);
}
.man-aviso.danger { border-color: rgba(220,38,38,.40); background: rgba(220,38,38,.07); color: var(--man-rojo-txt); }

/* las acciones: UN rojo sólido; lo demás fantasma, tap ≥44px */
.man-acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.man-fila .btn-mini {
    min-height: 44px; padding: 8px 18px; border-radius: 12px;
    background: rgba(255,255,255,.55); border: 1.5px solid rgba(43,36,54,.30);
    color: var(--gv-tinta); font-size: .78rem; font-weight: 700; letter-spacing: .02em;
    cursor: pointer; font-family: inherit;
}
.man-fila .btn-mini:hover { background: rgba(214,69,80,.10); border-color: rgba(214,69,80,.50); }
.man-fila .btn-mini:focus-visible { outline: 3px solid rgba(214,69,80,.55); outline-offset: 2px; }
.man-fila .btn-mini:disabled { opacity: .5; cursor: wait; }
/* blanco sobre rojo de marca a 19px/800 = texto GRANDE (WCAG ≥3:1 ✓) */
.man-fila .man-btn-rojo {
    background: var(--gv-acento); border-color: var(--gv-acento); color: #fff;
    font-size: 19px; font-weight: 800; min-height: 48px; padding: 8px 26px; letter-spacing: .01em;
}
.man-fila .man-btn-rojo:hover { background: #C13B46; border-color: #C13B46; color: #fff; }

/* el RENGLÓN compacto (en curso · cumplidas): vidrio silencioso */
.man-renglon {
    background: var(--man-vidrio-suave); border: 1px solid var(--man-borde-luz);
    border-radius: 14px; padding: 12px 18px;
    backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
    box-shadow: 0 8px 22px rgba(14,9,33,.18);
}
.man-renglon-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.man-renglon-codigos { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; }
.man-codigo-mini { font-size: .88rem; font-weight: 800; color: var(--gv-tinta); font-variant-numeric: tabular-nums; user-select: all; }
.man-reloj-mini { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: .78rem; font-weight: 600; color: var(--man-tinta-suave); }
.man-reloj-mini .man-punto { width: 7px; height: 7px; }
.man-reloj-mini.ok .man-punto { background: var(--gv-verde); }
.man-reloj-mini.warning .man-punto { background: var(--gv-ambar); }
.man-reloj-mini.warning .man-reloj-texto { color: var(--man-ambar-txt); }
.man-reloj-mini.danger .man-punto { background: var(--gv-rojo); }
.man-reloj-mini.danger .man-reloj-texto { color: var(--man-rojo-txt); }
.man-cita-mini { margin: 8px 0 0; font-size: .78rem; font-weight: 700; color: var(--gv-tinta); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.man-renglon .man-modalidad, .man-renglon .man-detalle { margin-top: 6px; }
.man-renglon .man-acciones { margin-top: 10px; }

/* los capturadores inline (perder · reprogramar · re-citar): la MISMA piel de
   vidrio claro — su lógica y sus clases no se tocan */
.man-perder {
    margin-top: 12px; padding: 14px 16px; border-radius: 14px;
    border: 1.5px dashed rgba(43,36,54,.30); background: var(--man-vidrio);
    backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.man-perder-titulo { width: 100%; font-size: .78rem; font-weight: 800; letter-spacing: .06em; color: var(--gv-tinta); }
.man-select {
    border: 1px solid rgba(43,36,54,.30); border-radius: 10px; padding: 9px 12px; min-height: 44px;
    font-size: .78rem; color: var(--gv-tinta); background: #fff; font-family: inherit;
}
.man-papeleta { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.man-papeleta-nota { width: 100%; margin: 0; font-size: .78rem; color: var(--man-ambar-txt); line-height: 1.5; }
.man-papeleta input[type="file"] { font-size: .78rem; color: var(--man-tinta-suave); }
.man-papeleta-nombre { font-size: .78rem; font-weight: 700; color: var(--man-verde-txt); }

/* accesibilidad: sin transparencias → papel sólido (la lección del texto invisible) */
@media (prefers-reduced-transparency: reduce) {
    .man-zona, .man-renglon, .man-perder, .man-pill, .man-seccion-chip,
    .man-nota, .man-tasa, .man-vacio {
        background: var(--gv-papel); backdrop-filter: none; -webkit-backdrop-filter: none;
    }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .man-zona, .man-renglon, .man-perder, .man-pill, .man-seccion-chip,
    .man-nota, .man-tasa, .man-vacio { background: rgba(255,255,255,.96); }
}
@media (max-width: 720px) {
    .man-codigo { font-size: 22px; }
    .man-zona-info, .man-zona-acciones { padding-left: 16px; padding-right: 16px; }
    .man-fila .man-btn-rojo { width: 100%; }
}