/*
 * SistemaDoc — piezas visuales compartidas
 * ============================================================================
 *
 * Rediseño de agosto de 2026. Todo el aspecto del sistema vive AQUÍ: colores,
 * tarjetas, contadores, chips del semáforo, tablas y controles. Las páginas
 * solo colocan clases; ninguna vuelve a escribir su propio bloque <style>.
 *
 * Por qué es un archivo aparte y no se añadió a styles.css: el rediseño avanza
 * pantalla por pantalla, y styles.css lo cargan diecinueve páginas que todavía
 * llevan el diseño claro de siempre. Manteniéndolos separados, una página se
 * pasa al diseño nuevo el día que cambia su HTML y no antes. Cuando estén
 * todas, styles.css se podrá retirar.
 *
 * TODO lo de aquí está encerrado bajo .sd-app o bajo un nombre .sd-*, a
 * propósito: así este archivo no puede alterar una página que no se haya
 * migrado, ni siquiera si alguien lo cargara por error.
 */

/* ===========================================================================
   La paleta
   ---------------------------------------------------------------------------
   Cambiar el aspecto de las diecisiete pantallas se hace AQUÍ y en ningún otro
   sitio. Ninguna regla de más abajo lleva un color escrito a mano.

   Debajo está la paleta oscura, que fue la primera, conservada bajo la clase
   «sd-oscuro» del body por si se quiere volver: sería añadir esa clase en
   sd_cabecera(), en includes/interfaz.php, y nada más.
   =========================================================================== */

:root {
    /* Superficies, de la más al fondo a la más cercana */
    --sd-fondo:        #f2f4f6;   /* la página */
    --sd-panel:        #ffffff;   /* las tarjetas */
    --sd-panel-2:      #ffffff;   /* menú lateral y barra superior */
    --sd-panel-3:      #e8ecee;   /* el recuadro del avatar */

    --sd-linea:        rgba(16,24,32,.11);
    --sd-linea-suave:  rgba(16,24,32,.07);
    --sd-linea-fuerte: rgba(16,24,32,.20);

    /* Texto, de más a menos importante */
    --sd-texto:      #16181a;
    --sd-suave:      #4d555b;
    --sd-tenue:      #667079;   /* 5,05:1 sobre blanco · 4,58 sobre el fondo — AA en las dos */
    --sd-texto-vivo: #000000;

    /* El ámbar de la casa. Como fondo de botón se mantiene igual que en el
       diseño; como color de texto hace falta uno más oscuro, o sobre blanco
       no se lee. */
    --sd-ambar:        #e3a94a;
    --sd-ambar-claro:  #f0bf72;
    --sd-ambar-tinta:  #1a1408;
    --sd-ambar-suave:  rgba(227,169,74,.20);
    --sd-ambar-roce:   rgba(227,169,74,.12);   /* el paso del ratón, más claro que lo activo */
    --sd-ambar-texto:  #9a6a12;
    --sd-ambar-vivo:   #7d550c;

    /* Fondos de apoyo */
    --sd-hover:        rgba(16,24,32,.045);
    --sd-kpi-activo:   #fffcf5;
    --sd-campo-fondo:  #ffffff;
    --sd-placa-fondo:  rgba(16,24,32,.06);
    --sd-placa-hover:  rgba(16,24,32,.12);
    --sd-fila-grupo:   #eef1f4;   /* las cabeceras de grupo dentro de una tabla */

    /* Los botones secundarios llevan relleno, no transparencia. Con el fondo
       claro un borde tenue no basta: un icono suelto no parece pulsable. */
    --sd-boton-fondo: #eef1f4;
    --sd-boton-borde: rgba(16,24,32,.24);
    --sd-boton-hover: #e0e6ea;
    --sd-sombra-alta: 0 5px 16px rgba(16,24,32,.12);

    /* Sobre fondo claro, un borde de un píxel no basta para despegar una
       tarjeta de la página: hace falta una sombra muy suave. En oscuro sobra,
       y por eso allí vale «none». */
    --sd-sombra: 0 1px 2px rgba(16,24,32,.06), 0 1px 8px rgba(16,24,32,.04);

    /* El semáforo. El primer color es el del texto y tiene que leerse sobre
       fondo claro; el «pleno» es el del cuadradito, y va saturado. */
    --sd-rojo:            #9b2f21;
    --sd-rojo-pleno:      #d4553f;
    --sd-rojo-fondo:      rgba(212,85,63,.13);
    --sd-amarillo:        #8a5f14;
    --sd-amarillo-pleno:  #d99a2b;
    --sd-amarillo-fondo:  rgba(217,154,43,.18);
    --sd-verde:           #1c6b3f;
    --sd-verde-pleno:     #3f8a5e;
    --sd-verde-fondo:     rgba(63,138,94,.14);
    --sd-gris:            #4d555b;
    --sd-gris-pleno:      #8a939a;
    --sd-gris-fondo:      rgba(16,24,32,.07);
    --sd-perm:            #23566f;
    --sd-perm-pleno:      #5b8fae;
    --sd-perm-fondo:      rgba(91,143,174,.15);

    /* Los rellenos sólidos con texto blanco (§13.10): la banda de la flota,
       los rectángulos de plazo y el mapa del patio. Van en variables APARTE
       del semáforo de texto a propósito: en la paleta oscura --sd-rojo y
       compañía se aclaran para leerse SOBRE fondo oscuro, y como fondo de un
       bloque con letra blanca serían ilegibles. Estos tonos no cambian con el
       tema — un bloque oscuro con texto blanco se lee igual de bien en los
       dos. */
    --sd-bloque-rojo:     #9b2f21;
    --sd-bloque-amarillo: #8a5f14;
    --sd-bloque-verde:    #1c6b3f;
    --sd-bloque-gris:     #4d555b;
    --sd-bloque-azul:     #23566f;

    --sd-radio: 6px;
    --sd-alto-control: 46px;
}

/* La paleta oscura original. Para usarla, añadir la clase «sd-oscuro» al body. */
body.sd-oscuro {
    --sd-fondo:        #0d1012;
    --sd-panel:        #14181a;
    --sd-panel-2:      #101416;
    --sd-panel-3:      #1b2124;

    --sd-linea:        rgba(255,255,255,.09);
    --sd-linea-suave:  rgba(255,255,255,.055);
    --sd-linea-fuerte: rgba(255,255,255,.16);

    --sd-texto:      #eef1f2;
    --sd-suave:      #a4abaf;
    --sd-tenue:      #798286;
    --sd-texto-vivo: #ffffff;

    --sd-ambar-claro:  #f3c274;
    --sd-ambar-tinta:  #16120a;
    --sd-ambar-suave:  rgba(227,169,74,.14);
    --sd-ambar-roce:   rgba(227,169,74,.08);
    --sd-ambar-texto:  #e3a94a;
    --sd-ambar-vivo:   #f4cd91;

    --sd-hover:        rgba(255,255,255,.05);
    --sd-kpi-activo:   #171b1d;
    --sd-campo-fondo:  #0d1012;
    --sd-placa-fondo:  rgba(255,255,255,.07);
    --sd-placa-hover:  rgba(255,255,255,.13);
    --sd-fila-grupo:   #101416;
    --sd-sombra:       none;
    --sd-boton-fondo:  rgba(255,255,255,.07);
    --sd-boton-borde:  rgba(255,255,255,.20);
    --sd-boton-hover:  rgba(255,255,255,.14);
    --sd-sombra-alta:  0 5px 18px rgba(0,0,0,.45);

    --sd-rojo:            #f08e78;
    --sd-rojo-fondo:      rgba(212,85,63,.18);
    --sd-amarillo:        #ecc275;
    --sd-amarillo-fondo:  rgba(217,154,43,.18);
    --sd-verde:           #8ecfa5;
    --sd-verde-pleno:     #5b9c74;
    --sd-verde-fondo:     rgba(91,156,116,.18);
    --sd-gris:            #a4abaf;
    --sd-gris-pleno:      #6b7478;
    --sd-gris-fondo:      rgba(255,255,255,.08);
    --sd-perm:            #9dc4dd;
    --sd-perm-fondo:      rgba(91,143,174,.18);
}

/* ===========================================================================
   Armazón
   =========================================================================== */

body.sd-body {
    margin: 0;
    background: var(--sd-fondo);
    font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    color: var(--sd-texto);
    -webkit-font-smoothing: antialiased;
}

.sd-app { display: flex; min-height: 100vh; max-width: 100%; }
.sd-contenido > * { min-width: 0; }
.sd-app a { color: var(--sd-ambar-texto); text-decoration: none; }
.sd-app a:hover { color: var(--sd-ambar-vivo); text-decoration: underline; }
.sd-app *, .sd-app *::before, .sd-app *::after { box-sizing: border-box; }
.sd-app :focus-visible { outline: 2px solid var(--sd-ambar); outline-offset: 2px; }

.sd-cuerpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sd-contenido { padding: 24px 22px 30px; display: flex; flex-direction: column; gap: 22px; }

.sd-topbar {
    background: var(--sd-panel-2);
    border-bottom: 1px solid var(--sd-linea);
    padding: 12px 22px;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}

/* ===========================================================================
   Menú lateral
   ---------------------------------------------------------------------------
   El HTML lo genera generar_menu(), que comparten las quince páginas que
   todavía no se han rediseñado. Por eso NO se toca esa función: se le da
   aspecto desde aquí, apuntando a las clases de Bootstrap que ya emite.
   =========================================================================== */

.sd-lateral {
    width: 236px; flex: 0 0 236px;
    background: var(--sd-panel-2);
    border-right: 1px solid var(--sd-linea);
    padding: 20px 0 24px;
    display: flex; flex-direction: column; gap: 18px;
}

.sd-marca { padding: 0 18px; display: flex; align-items: center; gap: 11px; }
.sd-marca-logo {
    width: 38px; height: 38px; flex: 0 0 38px; border-radius: 5px;
    background: var(--sd-ambar); color: var(--sd-ambar-tinta);
    display: flex; align-items: center; justify-content: center;
    font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 15px;
}
.sd-marca-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.sd-marca-txt b { font-size: 15px; font-weight: 600; color: var(--sd-texto); }
.sd-marca-txt span {
    font-family: 'IBM Plex Mono', monospace; font-size: 10px;
    letter-spacing: .09em; color: var(--sd-tenue);
}

.sd-lateral .nav { list-style: none; margin: 0; padding: 0 10px; display: flex; flex-direction: column; gap: 2px; }
.sd-lateral .nav-item { list-style: none; }
.sd-lateral .nav-link {
    display: flex; align-items: center; gap: 11px;
    min-height: 42px; padding: 0 12px; border-radius: 5px;
    color: var(--sd-suave); font-size: 14.5px; text-decoration: none;
}
.sd-lateral .nav-link i { width: 17px; text-align: center; font-size: 14px; color: var(--sd-tenue); }
/*
 * El paso del ratón por el menú se pintaba con --sd-hover, que es un negro al
 * 4,5%: contrasta de sobra pero no se NOTA, porque el cambio es de blanco a un
 * blanco un pelín sucio. Ivan lo dijo: «solo se vuelve plomo».
 *
 * Ahora usa el ámbar de la casa, que además es el color con el que ya se marca
 * dónde estás. Los dos estados se distinguen por intensidad y por peso: el roce
 * es un ámbar al 12% con el texto y el icono en ámbar oscuro; el activo es el
 * mismo ámbar al 20%, en seminegrita y con el icono en ámbar vivo.
 *
 * Contraste comprobado sobre el blanco del menú: 6,08:1 el roce y 5,75 el
 * activo, los dos con AA de sobra para texto pequeño.
 */
.sd-lateral .nav-link { transition: background .12s ease, color .12s ease; }
.sd-lateral .nav-link:hover {
    background: var(--sd-ambar-roce); color: var(--sd-ambar-vivo); text-decoration: none;
}
.sd-lateral .nav-link:hover i { color: var(--sd-ambar-vivo); }

/*
 * Dónde estás: relleno ÁMBAR SÓLIDO con el texto oscuro encima.
 *
 * Empezó siendo un tinte al 20%, con el roce al 12%. Medidos uno contra otro,
 * esos dos fondos se separan 1,058 — o sea nada: los dos son un blanco
 * amarilleado y no hay forma de saber cuál es cuál. Es el mismo fallo de los
 * chips de estado, que también pasaban la métrica y no se leían.
 *
 * En sólido la separación entre roce y activo pasa a 1,925, y el texto encima
 * da 8,75:1, el mejor contraste del sistema. Encaja además con la regla que ya
 * rige los estados: lo que hay que ver sin buscarlo va en relleno sólido.
 */
.sd-lateral .nav-link.activo {
    background: var(--sd-ambar); color: var(--sd-ambar-tinta); font-weight: 500;
}
.sd-lateral .nav-link.activo i { color: var(--sd-ambar-tinta); }

/* Encima de donde ya estás no se enciende nada: no lleva a ningún sitio nuevo */
.sd-lateral .nav-link.activo:hover {
    background: var(--sd-ambar); color: var(--sd-ambar-tinta);
}
.sd-lateral .nav-link.activo:hover i { color: var(--sd-ambar-tinta); }

/* Las sangrías de generar_menu(): los paneles cuelgan del Dashboard */
.sd-lateral .nav-item.ps-3 .nav-link { padding-left: 26px; font-size: 13.5px; }
.sd-lateral .nav-section-header {
    font-family: 'IBM Plex Mono', monospace; font-size: 10px;
    letter-spacing: .13em; color: var(--sd-tenue) !important;
    padding: 12px 12px 4px; list-style: none;
}

.sd-lateral-pie {
    margin-top: auto; padding: 16px 18px 0;
    border-top: 1px solid var(--sd-linea);
    display: flex; align-items: center; gap: 10px;
}

/*
 * El botón de claro/oscuro va ARRIBA, en su propio renglón justo debajo de la
 * marca: al pie del menú no se veía, lo dijo Ivan. Y renglón propio, no un
 * icono junto al logo: el lateral mide 236px (196 en pantallas medianas) y en
 * la fila de la marca un segundo icono no cabe sin estrangular el nombre.
 */
.sd-app .sd-lateral-tema { padding: 0 18px; margin-top: -4px; display: flex; }
.sd-app .sd-lateral-tema .sd-btn { width: 100%; }

/* ===========================================================================
   Tipografía y utilidades
   =========================================================================== */

.sd-h1 { font-size: 25px; font-weight: 600; letter-spacing: -.02em; margin: 0; color: var(--sd-texto); }
.sd-h2 { font-size: 16px; font-weight: 600; margin: 0; color: var(--sd-texto); }
.sd-sub { font-size: 14px; color: var(--sd-suave); margin: 0; text-wrap: pretty; }
.sd-mono { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; }
.sd-tenue { color: var(--sd-tenue); }
.sd-suave { color: var(--sd-suave); }

.sd-rotulo {
    font-family: 'IBM Plex Mono', monospace; font-size: 10px;
    letter-spacing: .12em; color: var(--sd-tenue);
}

.sd-placa {
    font-family: 'IBM Plex Mono', monospace; font-size: 13.5px; letter-spacing: .02em;
    background: var(--sd-placa-fondo); border-radius: 4px;
    padding: 5px 9px; display: inline-block; color: var(--sd-texto);
}
a.sd-placa:hover { background: var(--sd-placa-hover); color: var(--sd-texto-vivo); text-decoration: none; }

.sd-avatar {
    width: 34px; height: 34px; flex: 0 0 34px; border-radius: 5px;
    background: var(--sd-panel-3); color: var(--sd-suave);
    display: flex; align-items: center; justify-content: center;
    font-family: 'IBM Plex Mono', monospace; font-size: 12.5px;
}

/* ===========================================================================
   Tarjetas
   =========================================================================== */

.sd-tarjeta {
    background: var(--sd-panel); border: 1px solid var(--sd-linea);
    border-radius: var(--sd-radio); box-shadow: var(--sd-sombra);
}
.sd-tarjeta-cab {
    padding: 14px 18px; border-bottom: 1px solid var(--sd-linea);
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.sd-tarjeta-cpo { padding: 18px; }
.sd-tarjeta-pie { padding: 12px 18px; border-top: 1px solid var(--sd-linea); font-size: 13px; color: var(--sd-suave); }

/* ===========================================================================
   Contadores
   ---------------------------------------------------------------------------
   Son botones: al pulsarlos filtran la lista de abajo. La cifra cuenta
   SUJETOS —unidades o conductores—, nunca documentos.
   =========================================================================== */

.sd-kpi {
    background: var(--sd-panel); border: 1px solid var(--sd-linea);
    border-radius: var(--sd-radio); box-shadow: var(--sd-sombra);
    padding: 15px 17px; min-height: 118px;
    display: flex; flex-direction: column; gap: 8px;
    width: 100%; min-width: 0; text-align: left; color: var(--sd-texto); cursor: pointer;
}
/*
 * Los contadores hacen algo al pulsarlos: en el panel principal llevan a otra
 * pantalla y en los tableros filtran la lista. Pero quietos no lo decían, y
 * quien entra por primera vez no tiene por qué adivinarlo. Ahora se levantan
 * un poco, se les marca el borde y toman sombra. Lo pidió Ivan el 21-ago-2026.
 */
.sd-kpi {
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.sd-kpi:hover {
    border-color: var(--sd-boton-borde);
    box-shadow: var(--sd-sombra-alta);
    transform: translateY(-2px);
}
.sd-kpi:active { transform: translateY(0); }

/*
 * Y los que llevan a otra pantalla —no los que solo filtran— muestran además
 * una flecha permanente en la esquina. Sale sola con el selector: solo los
 * contadores que son <a> la llevan, sin tocar el HTML de ninguna página.
 */
.sd-app a.sd-kpi { position: relative; }
/* Sitio para la flecha, o pisaría rótulos largos como «POR VENCER EN 30 DÍAS» */
.sd-app a.sd-kpi .sd-kpi-top { padding-right: 20px; }
.sd-app a.sd-kpi::after {
    content: '\203A';
    position: absolute; top: 11px; right: 15px;
    font-size: 21px; line-height: 1; color: var(--sd-tenue);
    transition: transform .15s ease, color .15s ease;
}
.sd-app a.sd-kpi:hover::after {
    color: var(--sd-ambar-texto);
    transform: translateX(3px);
}
.sd-kpi.activo { border-color: rgba(227,169,74,.55); background: var(--sd-kpi-activo); }
.sd-kpi-top { display: flex; align-items: center; gap: 8px; }
.sd-kpi-marca { width: 9px; height: 9px; flex: 0 0 9px; }
.sd-kpi-rotulo {
    font-family: 'IBM Plex Mono', monospace; font-size: 10px;
    letter-spacing: .11em; color: var(--sd-suave);
}
.sd-kpi-cifra {
    font-family: 'IBM Plex Mono', monospace; font-size: 34px; font-weight: 500;
    line-height: 1; font-variant-numeric: tabular-nums;
}
/*
 * Los cuatro contadores no son cuatro cosas del mismo tipo: dos son trabajo
 * pendiente y dos son inventario. Con la misma cifra de 34px, «31 unidades
 * activas» pesaba igual que «13 documentos vencidos». Los de inventario pasan
 * a una cifra menor: siguen ahí y siguen siendo enlaces, pero se leen después.
 */
.sd-kpi-menor { min-height: 96px; }
.sd-kpi-menor .sd-kpi-cifra { font-size: 23px; }
.sd-kpi-pie { font-size: 12.5px; color: var(--sd-suave); margin-top: auto; }

/* ===========================================================================
   El semáforo
   ---------------------------------------------------------------------------
   Cinco estados y ni uno más. La traducción de estado a clase se hace en un
   solo sitio, includes/interfaz.php, así que cambiar un color aquí lo cambia
   en todas las pantallas a la vez.
   =========================================================================== */

.sd-chip {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: 'IBM Plex Mono', monospace; font-size: 10.5px;
    letter-spacing: .09em; padding: 5px 9px; border-radius: 3px; white-space: nowrap;
}
.sd-chip i { font-size: 10px; }
.sd-punto { width: 7px; height: 7px; flex: 0 0 7px; display: inline-block; }

.sd-rojo     { background: var(--sd-rojo-fondo);     color: var(--sd-rojo); }
.sd-amarillo { background: var(--sd-amarillo-fondo); color: var(--sd-amarillo); }
.sd-verde    { background: var(--sd-verde-fondo);    color: var(--sd-verde); }
.sd-gris     { background: var(--sd-gris-fondo);     color: var(--sd-gris); }
.sd-perm     { background: var(--sd-perm-fondo);     color: var(--sd-perm); }

.sd-rojo     .sd-punto, .sd-marca-rojo     { background: var(--sd-rojo-pleno); }
.sd-amarillo .sd-punto, .sd-marca-amarillo { background: var(--sd-amarillo-pleno); }
.sd-verde    .sd-punto, .sd-marca-verde    { background: var(--sd-verde-pleno); }
.sd-gris     .sd-punto, .sd-marca-gris     { background: var(--sd-gris-pleno); }
.sd-perm     .sd-punto, .sd-marca-perm     { background: var(--sd-perm-pleno); }

.sd-borde-rojo     { border-left: 3px solid var(--sd-rojo-pleno); }
.sd-borde-amarillo { border-left: 3px solid var(--sd-amarillo-pleno); }
.sd-borde-verde    { border-left: 3px solid var(--sd-verde-pleno); }
.sd-borde-gris     { border-left: 3px solid var(--sd-gris-pleno); }
.sd-borde-perm     { border-left: 3px solid var(--sd-perm-pleno); }

/* ===========================================================================
   Tablas
   =========================================================================== */

.sd-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.sd-tabla th {
    font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .11em;
    color: var(--sd-tenue); font-weight: 500; text-align: left;
    padding: 10px 14px; border-bottom: 1px solid var(--sd-linea); white-space: nowrap;
}
.sd-tabla td { padding: 12px 14px; border-bottom: 1px solid var(--sd-linea-suave); vertical-align: middle; }
.sd-tabla tbody tr:hover { background: var(--sd-hover); }
.sd-tabla .sd-num {
    font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums;
    color: var(--sd-suave); white-space: nowrap;
}
.sd-tabla-grupo td { background: var(--sd-fila-grupo); padding: 8px 14px; border-bottom: 1px solid var(--sd-linea); }
.sd-tabla-grupo:hover td { background: var(--sd-fila-grupo); }
.sd-grupo-rotulo {
    font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .13em;
    color: var(--sd-suave); display: flex; align-items: center; gap: 9px;
}
.sd-acciones { display: flex; gap: 6px; justify-content: flex-end; }

/* ===========================================================================
   Controles
   =========================================================================== */

.sd-btn {
    min-height: var(--sd-alto-control); border-radius: 5px;
    font-size: 14px; font-weight: 600; padding: 0 18px;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    border: 1px solid transparent; cursor: pointer; line-height: 1; text-decoration: none;
}
.sd-btn:hover { text-decoration: none; }

/*
 * Un botón que es un <a> necesita ganarle a la regla general de los enlaces.
 * «.sd-app a» tiene más especificidad que «.sd-btn-principal», así que sin
 * esto el texto salía ámbar sobre fondo ámbar: el botón se veía vacío.
 */
.sd-app a.sd-btn-principal,
.sd-app a.sd-btn-principal:hover  { color: var(--sd-ambar-tinta); }
.sd-app a.sd-btn-secundario       { color: var(--sd-texto); }
.sd-app a.sd-btn-secundario:hover { color: var(--sd-texto-vivo); }
.sd-app a.sd-btn-verde,
.sd-app a.sd-btn-verde:hover      { color: #eafff1; }
.sd-app a.sd-kpi                  { color: var(--sd-texto); text-decoration: none; }
.sd-app a.sd-kpi:hover            { color: var(--sd-texto); text-decoration: none; }
.sd-btn-principal { background: var(--sd-ambar); color: var(--sd-ambar-tinta); }
.sd-btn-principal:hover { background: var(--sd-ambar-claro); color: var(--sd-ambar-tinta); }
/*
 * Relleno y borde marcado, para que se vea que es un botón aunque solo
 * lleve un icono. Antes era transparente con un borde tenue: sobre el fondo
 * oscuro se distinguía, pero sobre el claro quedaba un icono suelto que no
 * parecía pulsable. Lo pidió Ivan el 21-ago-2026.
 */
.sd-btn-secundario {
    background: var(--sd-boton-fondo);
    border-color: var(--sd-boton-borde);
    color: var(--sd-texto); font-weight: 500;
}
.sd-btn-secundario:hover {
    background: var(--sd-boton-hover);
    border-color: var(--sd-linea-fuerte);
    color: var(--sd-texto-vivo);
}
/* Al pulsar se hunde un poco: confirma que el clic entró */
.sd-btn:active { transform: translateY(1px); }
.sd-btn-verde { background: #1f6b3e; color: #eafff1; }
.sd-btn-verde:hover { background: #278049; color: #fff; }
.sd-btn-chico { min-height: 38px; font-size: 13px; padding: 0 13px; font-weight: 500; }
.sd-btn-icono { width: 44px; min-height: 44px; padding: 0; }
.sd-btn-chico.sd-btn-icono { width: 38px; min-height: 38px; }

.sd-campo {
    width: 100%; min-height: var(--sd-alto-control);
    background: var(--sd-campo-fondo); border: 1px solid var(--sd-linea-fuerte);
    border-radius: 5px; padding: 0 13px; font-size: 14.5px; color: var(--sd-texto);
}
.sd-campo::placeholder { color: var(--sd-tenue); }

.sd-buscador {
    display: flex; align-items: center; gap: 10px;
    background: var(--sd-panel); border: 1px solid var(--sd-linea-fuerte);
    border-radius: 5px; padding: 0 13px; min-height: var(--sd-alto-control);
}
.sd-buscador i { color: var(--sd-tenue); font-size: 13px; }
.sd-buscador input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--sd-texto); font-size: 14px; height: 44px; }
.sd-buscador input:focus { outline: none; }

.sd-filtro {
    min-height: 40px; border-radius: 5px; border: 1px solid var(--sd-boton-borde);
    background: var(--sd-boton-fondo); color: var(--sd-suave);
    font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .09em;
    padding: 0 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
}
.sd-filtro.activo { background: var(--sd-ambar-suave); border-color: rgba(227,169,74,.45); color: var(--sd-ambar-vivo); }

.sd-aviso {
    border-radius: var(--sd-radio); padding: 14px 18px; font-size: 14px;
    border: 1px solid var(--sd-linea-fuerte); background: var(--sd-panel); color: var(--sd-suave);
}
.sd-aviso-ambar { border-color: rgba(227,169,74,.45); background: var(--sd-ambar-suave); color: var(--sd-ambar-vivo); }

/*
 * Los tableros disponibles, como fichas y no como lista.
 *
 * Antes eran cinco enlaces apilados en una columna estrecha dentro de una
 * tarjeta que ocupa todo el ancho: mucho hueco vacío, y no se veía que
 * fueran pulsables. Como fichas ocupan el ancho, se leen de un vistazo y
 * tienen un blanco grande donde pinchar, que en el patio importa.
 */
.sd-lista-paneles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
}
.sd-lista-paneles a {
    display: flex; align-items: center; gap: 12px; min-height: 58px;
    padding: 0 16px; border-radius: var(--sd-radio); color: var(--sd-texto);
    font-size: 14.5px; border: 1px solid var(--sd-linea);
    background: var(--sd-panel-2);
}
.sd-lista-paneles a { transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.sd-lista-paneles a:hover {
    background: var(--sd-kpi-activo); border-color: rgba(227,169,74,.45);
    color: var(--sd-texto-vivo); text-decoration: none;
    box-shadow: var(--sd-sombra-alta); transform: translateY(-2px);
}
.sd-lista-paneles a:hover i { color: var(--sd-ambar); }
.sd-lista-paneles i { width: 20px; text-align: center; font-size: 16px; color: var(--sd-tenue); }

/* ===========================================================================
   Celular
   ---------------------------------------------------------------------------
   Por debajo de 900 px la tabla deja de ser tabla: cada fila pasa a ser una
   tarjeta, con el nombre de cada columna delante del dato. No hace falta
   duplicar el HTML — los rótulos salen del atributo data-rotulo.
   =========================================================================== */

.sd-solo-movil { display: none; }

/* Entre 1000 y 1250 px el menú se estrecha en vez de desaparecer de golpe */
@media (max-width: 1250px) {
    .sd-lateral { width: 196px; flex: 0 0 196px; }
    .sd-lateral .nav-link { font-size: 13.5px; gap: 9px; }
    .sd-contenido { padding: 20px 16px 26px; }
    .sd-topbar { padding: 11px 16px; }
}

@media (max-width: 1000px) {
    .sd-lateral { display: none; }
    .sd-contenido { padding: 16px 14px 90px; gap: 16px; }
    .sd-topbar { padding: 10px 14px; }
    .sd-solo-movil { display: flex; }
    .sd-no-movil { display: none !important; }

    .sd-tabla, .sd-tabla tbody, .sd-tabla tr, .sd-tabla td { display: block; width: 100%; }
    .sd-tabla thead { display: none; }

    .sd-tabla tbody tr {
        background: var(--sd-panel); border: 1px solid var(--sd-linea);
        border-radius: var(--sd-radio); margin-bottom: 10px; padding: 12px 14px;
    }
    .sd-tabla tbody tr:hover { background: var(--sd-panel); }

    .sd-tabla td {
        border: 0; padding: 4px 0;
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
    }
    .sd-tabla td::before {
        content: attr(data-rotulo);
        font-family: 'IBM Plex Mono', monospace; font-size: 9.5px;
        letter-spacing: .11em; color: var(--sd-tenue); flex: 0 0 auto;
    }
    .sd-tabla td[data-rotulo=""]::before { content: none; }
    .sd-tabla td.sd-td-ancho { display: block; }
    .sd-tabla td.sd-td-ancho::before { display: block; margin-bottom: 4px; }

    .sd-tabla tr.sd-tabla-grupo {
        background: transparent; border: 0; padding: 12px 2px 2px;
        margin: 0; border-radius: 0;
    }
    .sd-tabla-grupo td { background: transparent; border: 0; padding: 0; display: block; }
    .sd-tabla-grupo td::before { content: none; }

    .sd-acciones { justify-content: flex-start; }
    .sd-kpi { min-height: 92px; padding: 12px 13px; }
    .sd-kpi-cifra { font-size: 27px; }
    .sd-kpi-pie { display: none; }
}

/* Barra inferior: solo en celular, y solo en las páginas que la coloquen */
.sd-mov-tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--sd-panel-2); border-top: 1px solid var(--sd-linea);
    display: none; padding: 7px 4px 11px;
}
.sd-mov-tab {
    flex: 1; min-height: 54px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 5px;
    color: var(--sd-tenue); font-size: 10.5px; text-decoration: none;
}
.sd-mov-tab i { font-size: 17px; }
.sd-mov-tab.activo { color: var(--sd-ambar-vivo); font-weight: 500; }
.sd-mov-tab.activo i { color: var(--sd-ambar-vivo); }
/* Lo mismo en la barra del celular, por coherencia */
.sd-mov-tab { transition: background .12s ease, color .12s ease; }
.sd-mov-tab:hover { background: var(--sd-ambar-roce); color: var(--sd-ambar-vivo); text-decoration: none; }
.sd-mov-tab:hover i { color: inherit; }

@media (max-width: 1000px) { .sd-mov-tabs { display: flex; } }

/* ===========================================================================
   Impresión
   ---------------------------------------------------------------------------
   El papel SIEMPRE va en blanco, por oscura que sea la pantalla. Y el estado
   se imprime con borde y texto, no con relleno de color, para que se lea en
   una impresora en blanco y negro.
   =========================================================================== */

@media print {
    body.sd-body { background: #fff !important; color: #16181a !important; }
    .sd-app { display: block; }
    .sd-lateral, .sd-topbar, .sd-mov-tabs, .sd-no-imprimir { display: none !important; }
    .sd-contenido { padding: 0 !important; gap: 14px !important; }

    .sd-tarjeta, .sd-kpi {
        background: #fff !important; border: 1px solid #c9cfd3 !important;
        color: #16181a !important; break-inside: avoid;
    }
    .sd-h1, .sd-h2, .sd-kpi-cifra { color: #16181a !important; }
    .sd-sub, .sd-suave, .sd-tenue, .sd-rotulo, .sd-kpi-rotulo, .sd-kpi-pie { color: #5a6167 !important; }

    .sd-tabla th { color: #5a6167 !important; border-bottom: 1px solid #c9cfd3 !important; }
    .sd-tabla td { border-bottom: 1px solid #e3e7ea !important; color: #16181a !important; }
    .sd-tabla .sd-num { color: #3d444a !important; }
    .sd-tabla-grupo td { background: #f1f3f5 !important; }

    .sd-placa { background: transparent !important; border: 1px solid #c9cfd3; color: #16181a !important; }
    .sd-chip {
        background: transparent !important; border: 1px solid currentColor;
        font-weight: 700; padding: 2px 7px;
    }
    .sd-rojo     { color: #9b2f21 !important; }
    .sd-amarillo { color: #8a5f14 !important; }
    .sd-verde    { color: #1c6b3f !important; }
    .sd-gris     { color: #4a5157 !important; }
    .sd-perm     { color: #23566f !important; }
    .sd-punto { display: none; }

    .sd-app a { color: #16181a !important; text-decoration: none !important; }
}

/* Rejilla de los cuatro contadores: cuatro en fila, dos en celular */
/*
 * Cuatro contadores si caben, y si no se van repartiendo solos en dos filas.
 * Con «repeat(4, 1fr)» a secas, en una ventana estrecha se salían de la
 * pantalla y aparecía barra horizontal.
 */
.sd-rejilla-kpi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 12px;
}
@media (max-width: 620px) { .sd-rejilla-kpi { grid-template-columns: repeat(2, 1fr); gap: 8px; } }

/* ===========================================================================
   Formularios
   =========================================================================== */

.sd-etiqueta {
    font-family: 'IBM Plex Mono', monospace; font-size: 10.5px;
    letter-spacing: .11em; color: var(--sd-suave);
    display: block; margin-bottom: 7px;
}
.sd-ayuda { font-size: 12.5px; color: var(--sd-tenue); margin: 6px 0 0; }

select.sd-campo {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--sd-suave) 50%),
                      linear-gradient(135deg, var(--sd-suave) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px;
}
textarea.sd-campo { min-height: 76px; padding: 11px 13px; line-height: 1.5; resize: vertical; }
.sd-campo option { background: var(--sd-panel); color: var(--sd-texto); }

/* Rejilla de campos: doce columnas, como Bootstrap pero sin Bootstrap */
.sd-form-rejilla { display: grid; grid-template-columns: repeat(12, 1fr); gap: 15px; }
.sd-col-3  { grid-column: span 3; }
.sd-col-4  { grid-column: span 4; }
.sd-col-6  { grid-column: span 6; }
.sd-col-12 { grid-column: span 12; }
@media (max-width: 1000px) {
    .sd-col-3, .sd-col-4, .sd-col-6 { grid-column: span 12; }
}

/* ===========================================================================
   Ventana emergente
   ---------------------------------------------------------------------------
   Escrita a mano, sin Bootstrap: las pantallas rediseñadas ya no lo cargan.
   Son treinta líneas de CSS y quince de JavaScript, y a cambio se ahorra una
   librería entera por cada página.
   =========================================================================== */

.sd-modal {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(4,6,7,.66);
    display: none; align-items: center; justify-content: center; padding: 20px;
}
.sd-modal.abierta { display: flex; }
.sd-modal-caja {
    width: 720px; max-width: 100%; max-height: 92vh; overflow-y: auto;
    background: var(--sd-panel); border: 1px solid var(--sd-linea-fuerte);
    border-radius: 8px; display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(16,24,32,.28);
}
.sd-modal-cab {
    padding: 18px 22px; border-bottom: 1px solid var(--sd-linea);
    display: flex; align-items: center; gap: 12px;
}
.sd-modal-cpo { padding: 22px; }
.sd-modal-pie {
    padding: 16px 22px; border-top: 1px solid var(--sd-linea);
    display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
}
@media (max-width: 1000px) {
    .sd-modal { align-items: flex-end; padding: 0; }
    .sd-modal-caja { max-height: 94vh; border-radius: 8px 8px 0 0; }
}

/* ===========================================================================
   Avisos y detalles sueltos
   =========================================================================== */

.sd-aviso-ok {
    border-color: rgba(91,156,116,.45); background: var(--sd-verde-fondo); color: var(--sd-verde);
}
.sd-aviso-mal {
    border-color: rgba(212,85,63,.45); background: var(--sd-rojo-fondo); color: var(--sd-rojo);
}

/* Cantidad por debajo de la esperada: se marca aparte del semáforo de tiempo */
.sd-falta { color: var(--sd-rojo); font-weight: 600; }
.sd-nota-falta { font-size: 12px; color: var(--sd-rojo); margin-top: 4px; display: block; }

.sd-mini { font-size: 12.5px; color: var(--sd-tenue); }
.sd-mini a { color: var(--sd-tenue); }
.sd-mini a:hover { color: var(--sd-suave); }

/* Historial de una unidad: la tabla ancha y el formulario estrecho al costado */
.sd-rejilla-historial { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
@media (max-width: 1200px) { .sd-rejilla-historial { grid-template-columns: minmax(0, 1fr); } }

/*
 * La celda del expediente: chip y total en la misma línea.
 * Sin esto el chip se iba abajo y las filas con alerta quedaban más altas que
 * las demás, así que el listado se veía descuadrado.
 */
.sd-celda-expediente { white-space: nowrap; }
.sd-celda-expediente .sd-chip { margin-right: 7px; }
@media (max-width: 1000px) { .sd-celda-expediente { white-space: normal; } }

/*
 * Contadores que representan una CATEGORÍA y no un estado del semáforo —los
 * tipos de unidad de la flota—: en vez del cuadradito de color llevan el icono
 * de lo que son. Poner ahí un verde o un rojo mentiría: un tracto no está
 * «bien» ni «mal», simplemente es un tracto.
 */
.sd-kpi-tipo .sd-kpi-top i {
    width: 16px; text-align: center; font-size: 14px; color: var(--sd-tenue);
}
.sd-kpi-tipo:hover .sd-kpi-top i,
.sd-kpi-tipo.activo .sd-kpi-top i { color: var(--sd-ambar-texto); }

/* ===========================================================================
   Listas agrupadas por tipo de documento
   ---------------------------------------------------------------------------
   El tablero pintaba una fila por documento y quedaba un muro: de los 28 que
   había el 21-ago-2026, ocho eran la MISMA tarjeta vencida el MISMO día en
   ocho unidades. Agrupadas, lo repetido pesa un renglón y lo excepcional
   destaca. El detalle se despliega al pulsar la cabecera del grupo.
   =========================================================================== */

.sd-grupo-cab { cursor: pointer; }
.sd-grupo-cab:hover { background: var(--sd-hover); }

/*
 * La flecha de plegar es un BOTÓN, no un icono.
 *
 * Era un <i> con un click en la fila entera: con ratón funcionaba y con
 * teclado no había forma de abrir un grupo. Como en el tablero 27 de las 36
 * filas nacen plegadas, eso dejaba fuera tres cuartas partes de los datos.
 * Ahora es un <button> real dentro de la celda, enfocable, con aria-expanded,
 * y la fila entera sigue respondiendo al ratón por comodidad.
 */
.sd-flecha {
    appearance: none; background: none; border: 0; padding: 0; margin: 0;
    color: var(--sd-tenue); width: 14px; font-size: 11px; line-height: 1;
    cursor: pointer; transition: transform .15s ease;
    display: inline-flex; align-items: center; justify-content: center;
}
.sd-flecha:hover { color: var(--sd-texto); }
.sd-flecha[aria-expanded="true"] { transform: rotate(90deg); color: var(--sd-ambar-vivo); }

/* El área que se puede pulsar es mayor que la flecha, sin mover el dibujo */
.sd-flecha::before {
    content: ''; position: absolute; width: 34px; height: 34px;
    margin-left: -10px; margin-top: -11px;
}
.sd-grupo-cab td:first-child { position: relative; }

/* El detalle nace plegado */
.sd-grupo-detalle { display: none; }
.sd-grupo-detalle.visible { display: table-row; }
.sd-grupo-detalle td { background: var(--sd-fila-grupo); }

.sd-sangria {
    display: inline-block; width: 14px; border-left: 2px solid var(--sd-linea-fuerte);
    height: 14px; margin-right: 10px; vertical-align: middle;
}

/* Las placas del grupo, debajo del nombre del documento */
.sd-sujetos { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.sd-sujetos .sd-placa { font-size: 12px; padding: 3px 7px; }

@media (max-width: 1000px) {
    .sd-grupo-detalle.visible { display: block; }
    .sd-sangria { display: none; }
}

@media print {
    /* En papel se imprime todo abierto: no hay dónde pulsar */
    .sd-grupo-detalle { display: table-row !important; }
    .sd-flecha { display: none; }
    .sd-grupo-detalle td { background: transparent !important; }
}

/* El par de botones de WhatsApp: copiar en escritorio, abrir en celular */
.sd-whatsapp { display: flex; gap: 7px; align-items: center; }

/* ===========================================================================
   La tira de los próximos doce meses
   ---------------------------------------------------------------------------
   La única pieza del sistema que mira más allá de 30 días. Va al pie del
   tablero y tiene que ganarse el sitio siendo pequeña: mide menos de alto que
   uno de los contadores.

   Las barras van en GRIS a propósito. Nada de esto ha vencido, y pintar de
   rojo algo que vence dentro de cuatro meses sería mentir. El ámbar aparece
   solo en la barra del mes pico, y solo para decir qué familia manda: en
   diciembre, diecisiete de veintiséis son pólizas.
   =========================================================================== */

.sd-tira {
    display: flex; align-items: stretch; gap: 22px;
    padding: 16px 20px;
}

.sd-tira-rotulo {
    flex: 0 0 150px; display: flex; flex-direction: column; justify-content: center; gap: 2px;
}
.sd-tira-total {
    font-family: 'IBM Plex Mono', monospace; font-size: 27px; line-height: 1;
    font-variant-numeric: tabular-nums; color: var(--sd-texto);
}

/* Las barras */
.sd-tira-barras {
    flex: 1 1 auto; min-width: 0;
    display: flex; align-items: flex-end; gap: 4px;
    border-bottom: 1px solid var(--sd-linea-fuerte);
    padding-bottom: 0; height: 86px;
}

.sd-tira-mes {
    flex: 1 1 0; min-width: 0; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    position: relative;
}

.sd-tira-barra {
    width: 100%; max-width: 26px;
    background: var(--sd-gris-pleno); opacity: .55;
    border-radius: 2px 2px 0 0;
    display: flex; flex-direction: column; justify-content: flex-end;
    transition: opacity .15s ease;
}
.sd-tira-mes:hover .sd-tira-barra { opacity: .9; }
.sd-tira-mes.pico .sd-tira-barra { opacity: .8; }

/* La parte de abajo de la barra del pico: la familia que manda */
.sd-tira-parte {
    width: 100%; background: var(--sd-ambar); border-radius: 0 0 2px 2px;
}

.sd-tira-cifra {
    position: absolute; top: -3px;
    font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 500;
    color: var(--sd-texto); font-variant-numeric: tabular-nums;
}

.sd-tira-etiqueta {
    position: absolute; bottom: -17px;
    font-family: 'IBM Plex Mono', monospace; font-size: 9.5px;
    letter-spacing: .04em; color: var(--sd-tenue);
}

/* Donde cambia el año. Decirlo con texto costaría un renglón entero. */
.sd-tira-anio {
    flex: 0 0 1px; align-self: stretch;
    background: var(--sd-linea-fuerte); margin: 0 3px;
}

.sd-tira-frase {
    flex: 0 1 300px; margin: 0; align-self: center;
    font-size: 13px; line-height: 1.55; color: var(--sd-suave); text-wrap: pretty;
}

/* Sitio para los nombres de los meses, que van por debajo de la línea */
.sd-tira { padding-bottom: 32px; }

@media (max-width: 1000px) {
    .sd-tira { flex-direction: column; gap: 14px; padding-bottom: 34px; }
    .sd-tira-rotulo { flex: none; flex-direction: row; align-items: baseline; gap: 8px; }
    .sd-tira-frase { flex: none; }
    .sd-tira-barras { height: 70px; }
}

@media print {
    .sd-tira-barra { opacity: 1 !important; background: #c9cfd3 !important; }
    .sd-tira-parte { background: #8a939a !important; }
}

/* ===========================================================================
   El veredicto del reporte de conjunto
   ---------------------------------------------------------------------------
   Esta pantalla responde UNA pregunta: ¿este camión puede salir a la
   carretera? Todo lo demás —las tablas, las fechas— es la justificación.

   Por eso el veredicto no es un chip más: ocupa el ancho, va arriba del todo
   y se lee desde lejos, porque quien lo mira suele estar de pie en el patio
   con el móvil en la mano y el motor encendido.

   Los colores son los del semáforo de siempre, pero aquí van a franja
   completa en vez de a fondo suave: es el único sitio del sistema donde el
   color ES el mensaje.
   =========================================================================== */

.sd-veredicto {
    border-radius: var(--sd-radio);
    border: 1px solid var(--sd-linea);
    border-left: 6px solid var(--sd-gris-pleno);
    background: var(--sd-panel);
    box-shadow: var(--sd-sombra);
    padding: 20px 24px;
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}

.sd-veredicto-icono {
    font-size: 34px; line-height: 1; flex: 0 0 auto; color: var(--sd-gris-pleno);
}

.sd-veredicto-txt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.sd-veredicto-txt b {
    font-size: 23px; font-weight: 600; letter-spacing: -.01em; line-height: 1.15;
    color: var(--sd-texto);
}

.sd-veredicto-cuentas {
    font-family: 'IBM Plex Mono', monospace; font-size: 12.5px;
    color: var(--sd-suave); display: flex; gap: 14px; flex-wrap: wrap;
}
.sd-veredicto-cuentas b { font-size: inherit; font-weight: 600; }

/* Cada color pinta el borde y el icono; el texto se queda legible siempre */
.sd-veredicto.sd-v-rojo     { border-left-color: var(--sd-rojo-pleno);     background: var(--sd-rojo-fondo); }
.sd-veredicto.sd-v-amarillo { border-left-color: var(--sd-amarillo-pleno); background: var(--sd-amarillo-fondo); }
.sd-veredicto.sd-v-verde    { border-left-color: var(--sd-verde-pleno);    background: var(--sd-verde-fondo); }

.sd-veredicto.sd-v-rojo     .sd-veredicto-icono, .sd-veredicto.sd-v-rojo     .sd-veredicto-txt b { color: var(--sd-rojo); }
.sd-veredicto.sd-v-amarillo .sd-veredicto-icono, .sd-veredicto.sd-v-amarillo .sd-veredicto-txt b { color: var(--sd-amarillo); }
.sd-veredicto.sd-v-verde    .sd-veredicto-icono, .sd-veredicto.sd-v-verde    .sd-veredicto-txt b { color: var(--sd-verde); }

@media (max-width: 560px) {
    .sd-veredicto { padding: 16px 18px; gap: 14px; }
    .sd-veredicto-icono { font-size: 27px; }
    .sd-veredicto-txt b { font-size: 19px; }
}

/*
 * Al imprimir, el fondo de color desaparece. Una impresora en blanco y negro
 * lo devolvería como un gris que no distingue el rojo del verde, y el reporte
 * se entrega en papel: el veredicto tiene que leerse igual de claro ahí.
 */
@media print {
    .sd-veredicto {
        background: #fff !important; border: 2px solid #16181a !important;
        border-left-width: 8px !important; break-inside: avoid;
    }
    .sd-veredicto-txt b, .sd-veredicto-icono { color: #16181a !important; }
    .sd-veredicto-cuentas { color: #3d444a !important; }
}

/* La franja de quién generó el reporte y cuándo. Se imprime: en el PDF es lo
   único que dice de dónde salió el papel. */
.sd-firma {
    font-size: 12.5px; color: var(--sd-tenue);
    border-top: 1px solid var(--sd-linea); padding-top: 12px;
}
@media print { .sd-firma { color: #5a6167 !important; border-top-color: #c9cfd3 !important; } }

/* ===========================================================================
   Listas de casillas — el generador de expedientes
   ---------------------------------------------------------------------------
   Tres columnas de documentos que se marcan y desmarcan para decidir qué
   entra en el PDF. Las pinta el JavaScript, no PHP, así que estas clases son
   parte del contrato con expediente.php: si se renombran hay que cambiarlas
   también allí.
   =========================================================================== */

.sd-oculto { display: none !important; }

.sd-lista-docs {
    border: 1px solid var(--sd-linea-fuerte); border-radius: var(--sd-radio);
    background: var(--sd-campo-fondo);
    padding: 10px 12px; max-height: 230px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 2px;
}

.sd-casilla { display: flex; align-items: flex-start; gap: 9px; padding: 3px 0; }

.sd-casilla-inp {
    width: 15px; height: 15px; flex: 0 0 15px; margin-top: 2px;
    accent-color: var(--sd-ambar-vivo); cursor: pointer;
}

.sd-casilla-txt {
    font-size: 13.5px; line-height: 1.45; color: var(--sd-texto);
    cursor: pointer; min-width: 0;
}

.sd-casilla-extra { color: var(--sd-tenue); font-size: 12px; margin-left: 5px; }

/*
 * «Solo en la lista»: el documento figura en el índice de la carátula pero no
 * se anexa, porque no hay archivo escaneado. Merece decirlo en el sitio donde
 * se marca, no descubrirlo al abrir el PDF.
 */
.sd-casilla-marca {
    display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 3px;
    background: var(--sd-gris-fondo); color: var(--sd-gris);
    font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: .06em;
    text-transform: uppercase; vertical-align: 1px;
}

/* Los enlaces «Todos / Ninguno» de cada columna */
.sd-marcar { font-size: 12.5px; color: var(--sd-ambar-vivo); cursor: pointer; }
.sd-marcar:hover { text-decoration: underline; }

/* El campo de «agregar otro documento» pegado a su botón */
.sd-pegado { display: flex; }
.sd-pegado .sd-campo {
    border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none;
}
.sd-pegado .sd-btn {
    border-top-left-radius: 0; border-bottom-left-radius: 0; flex: 0 0 auto;
}

/* La ruedecita del botón mientras se arma el PDF */
.sd-girando { animation: sd-vuelta 1s linear infinite; }
@keyframes sd-vuelta { to { transform: rotate(360deg); } }

/* ===========================================================================
   La portada — el inicio de sesión
   ---------------------------------------------------------------------------
   Es la única pantalla sin menú lateral: todavía no se sabe quién entra, así
   que no hay nada que enseñarle. Reutiliza .sd-app para heredar la tipografía,
   los colores y el foco visible, pero en vez de la columna del menú lleva una
   sola caja centrada.
   =========================================================================== */

.sd-portada {
    flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
    padding: 24px 20px 40px;
}

.sd-portada-caja { width: 100%; max-width: 390px; display: flex; flex-direction: column; gap: 18px; }

.sd-portada-marca {
    display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
}

.sd-portada-marca .sd-marca-logo { width: 46px; height: 46px; font-size: 17px; border-radius: 9px; }

.sd-portada-marca b { font-size: 21px; font-weight: 600; letter-spacing: -.01em; }

.sd-portada-pie { text-align: center; font-size: 12px; color: var(--sd-tenue); }

/*
 * El botón de claro/oscuro del login, la única pantalla sin menú lateral ni
 * hoja de «Más». Va fijo en la esquina superior derecha, lejos de la caja
 * centrada, para que no estorbe ni descuadre nada en ningún tamaño.
 */
.sd-tema-esquina { position: fixed; top: 14px; right: 14px; z-index: 50; }

/* ===========================================================================
   Piezas del panel de administración
   ---------------------------------------------------------------------------
   /paneladmin usa esta misma hoja desde el 21-ago-2026. Lo único que necesita
   y no existía son estas cuatro cosas.
   =========================================================================== */

/* Dos columnas desiguales: la lista larga a la izquierda, las fichas a la
   derecha. En pantalla estrecha se apilan. */
/*
 * Era 7 y 5. Se le dio una columna más al lado de la tabla cuando los botones
 * de acción pasaron a llevar su palabra: con 7/12 del ancho, en una pantalla
 * de 1440 la tabla de usuarios se quedaba en 654px y el grupo se partía en dos.
 */
.sd-rejilla-7-5 {
    display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: 20px; align-items: start;
}
/* Por debajo de 1300 la tabla se queda sin sitio para su fila de botones:
   el formulario baja debajo y la tabla ocupa el ancho entero */
@media (max-width: 1300px) { .sd-rejilla-7-5 { grid-template-columns: minmax(0, 1fr); } }

.sd-columna { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* Lista de accesos: enlaces a toda anchura, separados por una línea */
.sd-lista-enlaces { display: flex; flex-direction: column; }
.sd-app .sd-lista-enlaces a {
    display: flex; align-items: center; gap: 11px;
    padding: 12px 18px; border-top: 1px solid var(--sd-linea);
    color: var(--sd-texto); font-size: 14px; text-decoration: none;
}
.sd-app .sd-lista-enlaces a { transition: background .12s ease, color .12s ease; }
.sd-app .sd-lista-enlaces a:hover {
    background: var(--sd-ambar-roce); color: var(--sd-ambar-vivo); text-decoration: none;
}
.sd-lista-enlaces a:hover i { color: var(--sd-ambar-vivo); }
.sd-lista-enlaces a i { width: 17px; text-align: center; color: var(--sd-tenue); }

/*
 * Etiqueta neutra para nombrar cosas dentro de una celda: los documentos que
 * le faltan a una unidad, los motores de una tabla. No es un estado, así que
 * no lleva color del semáforo — para eso está .sd-chip.
 */
.sd-tag {
    display: inline-block; margin: 1px 3px 1px 0; padding: 2px 7px; border-radius: 3px;
    background: var(--sd-panel-3); color: var(--sd-suave);
    font-size: 11.5px; white-space: nowrap;
}

/* Un número grande dentro de una tarjeta corriente, sin ser un contador
   pulsable de los del tablero */
.sd-cifra { font-size: 30px; font-weight: 600; line-height: 1; letter-spacing: -.02em; }

/* ===========================================================================
   La hoja de «Más» — el resto del sistema en el celular
   ---------------------------------------------------------------------------
   En un teléfono el menú lateral está oculto y no hay hamburguesa, así que la
   barra inferior es la ÚNICA navegación que existe. Con cinco huecos fijos, lo
   que no cabía quedaba fuera del alcance: el generador de PDF, las alertas, el
   perfil, el panel de administración y —esto era lo grave— cerrar sesión, que
   vive en el pie del menú lateral.

   Ahora cuatro pestañas son fijas y la quinta abre esta hoja.

   ⚠️ LA HOJA SE IMPRIME FUERA DE `.sd-app`, y tiene que ser así: va fija por
   encima de todo. Eso significa que **ninguna regla escrita como `.sd-app algo`
   la alcanza** — ni el color de los enlaces, ni el reseteo de `box-sizing`, ni
   el anillo de foco. Todo lo que necesite se declara aquí, sin prefijo. Fue
   exactamente ese el fallo del primer intento: los renglones salían en línea,
   azules y subrayados, porque las reglas llevaban el prefijo y no casaban.
   =========================================================================== */

.sd-hoja {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(16, 24, 32, .45);
    display: none; align-items: flex-end;
}
.sd-hoja.abierta { display: flex; }
.sd-hoja *, .sd-hoja *::before, .sd-hoja *::after { box-sizing: border-box; }

.sd-hoja-caja {
    width: 100%; max-height: 86vh; overflow-y: auto;
    background: var(--sd-panel);
    border-top-left-radius: 15px; border-top-right-radius: 15px;
    padding: 7px 0 calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 32px rgba(16, 24, 32, .22);
    /* Un solo momento de movimiento, y sale rápido de la mano: la curva frena
       al final en vez de arrancar despacio. */
    animation: sd-subir .26s cubic-bezier(.22, 1, .36, 1);
}
@keyframes sd-subir { from { transform: translateY(26px); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .sd-hoja-caja { animation: none; }
}

/* El tirador de arriba: dice «esto es una hoja» sin escribirlo */
.sd-hoja-tirador {
    width: 36px; height: 4px; border-radius: 2px; margin: 4px auto 12px;
    background: var(--sd-linea-fuerte);
}

.sd-hoja-cab {
    display: flex; align-items: center; gap: 12px;
    padding: 0 14px 12px; border-bottom: 1px solid var(--sd-linea);
}

/*
 * Cada renglón: el icono en su columna fija, el nombre, y debajo la aclaración
 * de los dos que no se explican solos. 56px de alto porque esto se pulsa con el
 * pulgar y de pie.
 */
.sd-hoja-item {
    display: flex; align-items: center; gap: 14px;
    min-height: 56px; padding: 9px 18px;
    color: var(--sd-texto); font-size: 15px; line-height: 1.35;
    text-decoration: none;
}
.sd-hoja-item { transition: background .12s ease, color .12s ease; }
.sd-hoja-item:hover  { background: var(--sd-ambar-roce); color: var(--sd-ambar-vivo); text-decoration: none; }
.sd-hoja-item:hover i { color: var(--sd-ambar-vivo); }
.sd-hoja-item:active { background: var(--sd-panel-3); }

.sd-hoja-item i {
    width: 22px; flex: 0 0 22px; text-align: center;
    font-size: 16px; color: var(--sd-tenue);
}

/* El texto en columna: el nombre arriba y la aclaración justo debajo */
.sd-hoja-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sd-hoja-txt small {
    font-size: 12.5px; line-height: 1.4; color: var(--sd-tenue);
}

/*
 * El renglón de claro/oscuro es un <button> entre enlaces: se le quita el
 * aspecto de botón del navegador para que se vea como los demás renglones.
 * Sin prefijo .sd-app: la hoja se imprime fuera de ese contenedor (§13.13).
 */
button.sd-hoja-item {
    width: 100%; appearance: none; background: none; border: 0;
    font: inherit; cursor: pointer; text-align: left;
}

/* Dónde estás. Es un fondo, no una barra de color al canto */
.sd-hoja-item.activo,
.sd-hoja-item.activo:hover { background: var(--sd-ambar); color: var(--sd-ambar-tinta); }
.sd-hoja-item.activo i,
.sd-hoja-item.activo small { color: var(--sd-ambar-tinta); }

/*
 * La cuenta va aparte y rotulada. Una línea a secas obliga a adivinar por qué
 * está ahí; el rótulo lo dice en dos palabras.
 */
.sd-hoja-grupo {
    margin-top: 8px; padding: 14px 18px 6px;
    border-top: 1px solid var(--sd-linea);
}

/* El anillo de foco también hay que declararlo: .sd-app :focus-visible no llega */
.sd-hoja :focus-visible { outline: 2px solid var(--sd-ambar); outline-offset: -2px; }

/* La pestaña de «Más» es un <button>, no un enlace: hay que igualarla */
.sd-mov-tab { appearance: none; background: none; border: 0; font: inherit; cursor: pointer; }

/* Que la barra no se meta debajo del indicador de inicio del iPhone */
.sd-mov-tabs { padding-bottom: calc(11px + env(safe-area-inset-bottom, 0px)); }

/* ===========================================================================
   Trámites — la lista del tablero y la de alertas
   ---------------------------------------------------------------------------
   Ivan lo dijo en una frase: «que no se combine el color de las letras con el
   fondo». Los chips lo hacían: texto rojo oscuro sobre fondo rojo claro, ámbar
   sobre ámbar, verde sobre verde. Pasaban la medida de contraste, pero el ojo
   ve un manchón del mismo tono y hay que acercarse para leerlo.

   Aquí el estado deja de ser un chip y pasa a ser un BLOQUE SÓLIDO con el texto
   en blanco. Texto y fondo no comparten nada: ni tono, ni claridad. Se lee de
   lejos, de pie y con sol.

   Los rellenos son los tonos oscuros que ya estaban en la paleta, que con
   blanco encima dan 7,44:1 el rojo y 5,63:1 el ámbar. No hizo falta ni un color
   nuevo.
   =========================================================================== */

.sd-tramites { display: flex; flex-direction: column; }

.sd-tramite {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) auto;
    align-items: stretch;
    border-top: 1px solid var(--sd-linea);
}
.sd-tramite:first-child { border-top: 0; }
.sd-tramite:hover { background: var(--sd-hover); }

/* El bloque del plazo: lo primero que se ve al bajar la vista por el borde */
.sd-tramite-plazo {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 15px 8px; text-align: center;
    color: #fff; background: var(--sd-bloque-gris);
}
.sd-tramite-plazo b {
    font-family: 'IBM Plex Mono', monospace; font-size: 20px; font-weight: 600;
    line-height: 1; font-variant-numeric: tabular-nums;
}
.sd-tramite-plazo span {
    font-family: 'IBM Plex Mono', monospace; font-size: 9px;
    letter-spacing: .1em; line-height: 1.3;
}
.sd-plazo-rojo   { background: var(--sd-bloque-rojo); }
.sd-plazo-ambar  { background: var(--sd-bloque-amarillo); }
.sd-plazo-verde  { background: var(--sd-bloque-verde); }
.sd-plazo-azul   { background: var(--sd-bloque-azul); }

/* El cuerpo: el nombre del trámite y de quién es */
.sd-tramite-cuerpo {
    display: flex; flex-direction: column; gap: 6px; justify-content: center;
    padding: 13px 4px 13px 16px; min-width: 0;
}
.sd-tramite-nombre {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    font-size: 15.5px; font-weight: 500; color: var(--sd-texto); line-height: 1.25;
}
.sd-tramite-nombre i { font-size: 13px; color: var(--sd-tenue); }
.sd-tramite-pie { font-size: 12.5px; color: var(--sd-suave); }

/* Cuántos van en el grupo. Va en gris sólido para no competir con el plazo */
.sd-tramite-cuantos {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600;
    background: var(--sd-bloque-gris); color: #fff;
    padding: 2px 7px; border-radius: 3px; letter-spacing: .04em;
}

.sd-tramite-acciones {
    display: flex; align-items: center; gap: 7px; padding: 13px 16px 13px 8px;
}

/* Las placas: borde propio, no un relleno gris que se funde con la tarjeta */
.sd-tramite-placas { display: flex; flex-wrap: wrap; gap: 5px; }
.sd-app .sd-tramite-placas a,
.sd-tramite-placas span {
    font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .02em;
    padding: 2px 7px; border-radius: 3px;
    border: 1px solid var(--sd-linea-fuerte); color: var(--sd-suave);
    background: var(--sd-panel); text-decoration: none; white-space: nowrap;
}
.sd-app .sd-tramite-placas a:hover {
    border-color: var(--sd-texto); color: var(--sd-texto); text-decoration: none;
}

/* El separador de tramo, dentro de la lista */
.sd-tramo {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 16px 11px; background: var(--sd-panel-3);
    border-top: 1px solid var(--sd-linea);
}
.sd-tramo:first-child { border-top: 0; }
.sd-tramo b {
    font-family: 'IBM Plex Mono', monospace; font-size: 10.5px;
    letter-spacing: .12em; text-transform: uppercase; color: var(--sd-texto);
}
.sd-tramo span { font-size: 12.5px; color: var(--sd-suave); margin-left: auto; }

/* El detalle de un grupo: nace plegado, igual que antes */
.sd-tramite-detalle { display: none; }
.sd-tramite-detalle.visible { display: grid; }
.sd-tramite-detalle .sd-tramite-plazo { background: var(--sd-panel-3); color: var(--sd-suave); }
.sd-tramite-detalle .sd-tramite-cuerpo { padding-top: 9px; padding-bottom: 9px; }

@media (max-width: 620px) {
    .sd-tramite { grid-template-columns: 88px minmax(0, 1fr); }
    .sd-tramite-plazo { padding: 12px 6px; }
    .sd-tramite-plazo b { font-size: 17px; }
    .sd-tramite-acciones {
        grid-column: 2; padding: 0 16px 13px; justify-content: flex-start;
    }
    .sd-tramite-cuerpo { padding-bottom: 9px; }
}

/* ===========================================================================
   El veredicto de la flota — la primera línea del tablero
   =========================================================================== */

.sd-flota {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    padding: 18px 22px; border-radius: var(--sd-radio);
    color: #fff; background: var(--sd-bloque-gris);
}
.sd-flota.mal   { background: var(--sd-bloque-rojo); }
.sd-flota.ojo   { background: var(--sd-bloque-amarillo); }
.sd-flota.bien  { background: var(--sd-bloque-verde); }

.sd-flota i { font-size: 30px; line-height: 1; flex: 0 0 auto; }
.sd-flota-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sd-flota-txt b { font-size: 20px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.sd-flota-txt span { font-size: 13.5px; line-height: 1.45; }

@media print {
    .sd-flota { background: #fff !important; color: #16181a !important;
                border: 2px solid #16181a !important; }
    .sd-tramite-plazo { background: #fff !important; color: #16181a !important;
                        border-right: 2px solid #16181a; }
    .sd-tramite-cuantos { background: #fff !important; color: #16181a !important;
                          border: 1px solid #16181a; }
}

/* La barra de filtros de la pantalla de alertas */
.sd-filtros {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
    padding: 12px 16px; border-bottom: 1px solid var(--sd-linea);
}
.sd-filtro-btn {
    appearance: none; cursor: pointer;
    font: inherit; font-size: 13px;
    padding: 6px 13px; border-radius: 999px;
    border: 1px solid var(--sd-boton-borde); background: var(--sd-boton-fondo);
    color: var(--sd-suave);
}
.sd-filtro-btn:hover { background: var(--sd-boton-hover); color: var(--sd-texto); }
.sd-filtro-btn.activo {
    background: var(--sd-texto); border-color: var(--sd-texto); color: var(--sd-panel);
}

/* ===========================================================================
   El mapa del patio — «Conos y tacos»
   ---------------------------------------------------------------------------
   La pantalla era una tabla de siete columnas donde cinco eran un guion,
   porque no hay ninguna verificación registrada todavía. Una tabla vacía
   disfrazada de tabla de datos.

   Ahora la flota se ve como se ve desde la puerta del patio: catorce
   recuadros, uno por tracto, cada uno con el color de su estado. Se abarca de
   una mirada y se pulsa el que toca.

   El relleno es sólido con el texto en blanco, como el resto de los estados
   del sistema (§13.10): letra y fondo no comparten tono.
   =========================================================================== */

.sd-patio {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 10px; padding: 18px;
}

.sd-patio-plaza {
    appearance: none; border: 0; cursor: pointer; font: inherit;
    display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
    padding: 13px 14px; border-radius: var(--sd-radio); text-align: left;
    color: #fff; background: var(--sd-bloque-gris);
    transition: transform .12s ease, box-shadow .12s ease;
}
.sd-patio-plaza:hover { transform: translateY(-2px); box-shadow: var(--sd-sombra-alta); }
.sd-patio-plaza:focus-visible { outline: 3px solid var(--sd-texto); outline-offset: 2px; }

/* La elegida se hunde y gana un borde, para que se vea cuál abrió el detalle */
.sd-patio-plaza.elegida {
    transform: none;
    box-shadow: inset 0 0 0 3px var(--sd-texto), var(--sd-sombra-alta);
}

.sd-patio-placa {
    font-family: 'IBM Plex Mono', monospace; font-size: 15px; font-weight: 600;
    letter-spacing: .02em; line-height: 1.1;
}
.sd-patio-cuando {
    font-family: 'IBM Plex Mono', monospace; font-size: 10px;
    letter-spacing: .09em; text-transform: uppercase;
}
/* Lo que falta se dice en el propio recuadro: es lo que hay que resolver */
.sd-patio-falta {
    font-size: 11px; padding: 1px 6px; border-radius: 3px;
    background: rgba(255, 255, 255, .22);
}

/*
 * Los cuatro colores. «Nunca revisada» va en azul pizarra y no en gris: hoy son
 * las catorce, y no es un hueco de datos sino trabajo que nadie ha empezado.
 * Con blanco encima da 7,98:1, el mejor contraste de los cuatro.
 */
.sd-plaza-verde  { background: var(--sd-bloque-verde); }
.sd-plaza-ambar  { background: var(--sd-bloque-amarillo); }
.sd-plaza-rojo   { background: var(--sd-bloque-rojo); }
.sd-plaza-nunca  { background: var(--sd-bloque-azul); }

/* El detalle de la que se pulsa, debajo del mapa */
.sd-patio-detalle { border-top: 1px solid var(--sd-linea); padding: 18px; }
.sd-patio-detalle[hidden] { display: none; }

.sd-patio-cab {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-bottom: 14px;
}
.sd-patio-cab b { font-family: 'IBM Plex Mono', monospace; font-size: 20px; font-weight: 600; }

/* Las cantidades encontradas, una por equipo */
.sd-patio-equipos { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.sd-patio-equipo {
    display: flex; flex-direction: column; gap: 3px;
    padding: 10px 14px; border-radius: var(--sd-radio);
    border: 1px solid var(--sd-linea); background: var(--sd-panel-2); min-width: 104px;
}
.sd-patio-equipo b {
    font-family: 'IBM Plex Mono', monospace; font-size: 19px; font-weight: 600;
    color: var(--sd-texto);
}
.sd-patio-equipo.falta { border-color: var(--sd-rojo); }
.sd-patio-equipo.falta b { color: var(--sd-rojo); }

@media (max-width: 620px) {
    .sd-patio { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; padding: 14px; }
    .sd-patio-plaza { padding: 11px 12px; }
}

@media print {
    .sd-patio-plaza {
        background: #fff !important; color: #16181a !important;
        border: 2px solid #16181a !important; box-shadow: none !important;
    }
    .sd-patio-falta { background: transparent !important; border: 1px solid #16181a; }
}

/* ===========================================================================
   Los botones de acción de una fila
   ---------------------------------------------------------------------------
   Eran cuatro iconos sin texto —carpeta, lápiz, uno que cambiaba de forma
   según el estado, y basurero— y la gente no sabía qué hacía cada uno. El
   `title` no es una etiqueta: tarda un segundo de ratón quieto, y en un
   teléfono no aparece bajo ningún gesto.

   Ahora cada botón lleva su palabra. Los pinta sd_acciones(), en
   includes/interfaz.php, que es la única implementación del grupo.

   ⚠️ El ancho de la columna lo declara CADA TABLA en su <th>, y tiene que dar
   para la fila entera de botones: con la palabra al lado, los cuatro de
   unidades piden unos 400px y no los 200 de cuando eran iconos pelados. Si el
   <th> se queda corto, el navegador NO ensancha la columna: parte el grupo en
   tantas filas como haga falta y el renglón de la tabla se estira a lo alto.
   Es exactamente lo que pasó el 23-ago-2026.
   =========================================================================== */

/*
 * El grupo. El flex-wrap es la válvula de escape: en una pantalla estrecha se
 * parte en dos filas de dos antes que empujar la tabla fuera de la página.
 */
.sd-acciones { flex-wrap: wrap; gap: 5px; align-content: center; }

/*
 * Dentro del grupo los botones van más apretados que un botón suelto: menos
 * aire a los lados y menos hueco entre el dibujo y la palabra. Así los cuatro
 * de unidades ocupan unos 370px en vez de 470.
 */
.sd-acciones .sd-btn { padding: 0 8px; gap: 4px; min-height: 34px; }
.sd-btn-rotulo { font-size: 12px; letter-spacing: .01em; white-space: nowrap; }

/*
 * El destructivo: rojo en el texto, el borde y el icono. NO en relleno sólido,
 * porque en una tabla de treinta y una filas serían treinta y un bloques rojos
 * y el rojo dejaría de significar peligro. Al pasar el ratón o al llegar con el
 * tabulador sí se rellena: ahí ya hay intención.
 *
 * Contraste: 7,44:1 en los dos estados.
 */
.sd-app .sd-btn-borrar {
    color: var(--sd-rojo);
    border-color: rgba(155, 47, 33, .45);
    background: var(--sd-panel);
    font-weight: 500;
}
.sd-app .sd-btn-borrar:hover,
.sd-app .sd-btn-borrar:focus-visible {
    color: #fff;
    background: var(--sd-bloque-rojo);
    border-color: var(--sd-bloque-rojo);
}
.sd-app .sd-btn-borrar i { color: inherit; }

/* En oscuro, el borde fijo del destructivo desaparecería sobre la tarjeta:
   se aclara igual que su texto, que allí es el salmón de la paleta. */
body.sd-oscuro .sd-app .sd-btn-borrar { border-color: rgba(240, 142, 120, .45); }

/*
 * El de descarga: baja el escaneado al equipo en vez de abrirlo en pestaña.
 * Va en relleno rojo sólido con el texto en blanco (7,44:1), que es la
 * fórmula de §13.10 para lo que tiene que notarse: lo pidió Ivan así. No se
 * confunde con el de borrar, que va en contorno, solo se rellena cuando hay
 * intención y lleva la raya delante.
 *
 * Los tonos van escritos, como en .sd-btn-verde: el --sd-rojo de la paleta
 * oscura es un salmón claro que dejaría el texto blanco sin contraste.
 */
.sd-app .sd-btn-descarga,
.sd-app a.sd-btn-descarga {
    background: #9b2f21; border-color: #9b2f21; color: #fff; font-weight: 500;
}
.sd-app .sd-btn-descarga:hover,
.sd-app .sd-btn-descarga:focus-visible,
.sd-app a.sd-btn-descarga:hover,
.sd-app a.sd-btn-descarga:focus-visible {
    background: #7f2318; border-color: #7f2318; color: #fff;
}
.sd-app .sd-btn-descarga i { color: inherit; }

/*
 * La raya que aparta el destructivo, para que no se pulse por vecindad.
 *
 * Va DENTRO del propio botón, dibujada en su margen izquierdo. Antes era un
 * <span> suelto dentro del grupo, y al partirse en dos filas la rayita podía
 * caer la primera de la segunda fila, perdida en medio de la nada. Así viaja
 * siempre pegada al botón que separa, se envuelva por donde se envuelva.
 */
.sd-app .sd-btn-aparte { position: relative; margin-left: 11px; }
.sd-app .sd-btn-aparte::before {
    content: ''; position: absolute; left: -8px; top: 50%;
    width: 1px; height: 20px; margin-top: -10px;
    background: var(--sd-linea);
}

/* El grupo va dentro de un <form> cuando la acción es un POST */
.sd-acciones form { display: contents; }

/*
 * Un dato numérico que sí puede partirse en dos renglones. Existe por el
 * teléfono de un conductor, que trae dos números separados por una barra y
 * mide veinte caracteres: con el `white-space: nowrap` de .sd-num esa sola
 * fila le robaba 182px a la columna en las veintidós, y lo que faltaba se lo
 * quitaba a los botones.
 */
.sd-tabla .sd-num-parte { white-space: normal; overflow-wrap: anywhere; }

/*
 * Por debajo de 1440 los cuatro botones ya no caben de una tirada, y el flex
 * los parte tres y uno: se lee como si el de borrar se hubiera caído. En esa
 * franja se ordenan en rejilla de dos en dos, que es una forma y no un
 * accidente.
 *
 * El corte está medido con el navegador y con la tipografía de verdad cargada
 * (ojo con eso: sin ella las medidas salen un 7% cortas y engañan). La fila
 * entera pide 375px de contenido —349 de botones, 15 de huecos y 11 de la raya—
 * y la columna deja de darlos a partir de 1340 en conductores y de 1440 en
 * unidades, que es la más apretada de las dos.
 */
@media (min-width: 1001px) and (max-width: 1439px) {
    .sd-acciones-cuatro {
        display: grid; grid-template-columns: auto auto; justify-content: end;
    }
    /* En rejilla la separación ya la da el renglón: la rayita sobra y el
       margen desalinearía las dos columnas */
    .sd-app .sd-acciones-cuatro .sd-btn-aparte { margin-left: 0; }
    .sd-app .sd-acciones-cuatro .sd-btn-aparte::before { display: none; }
}

@media (max-width: 1000px) {
    /*
     * En la tarjeta del celular las acciones ocupan su propio renglón, con una
     * línea encima que las separa de los datos, y se alinean a la izquierda.
     * Los botones crecen: aquí se pulsan con el dedo, no con un puntero de un
     * píxel.
     */
    .sd-tabla td > .sd-acciones { flex: 1 1 auto; min-width: 0; justify-content: flex-start; }
    .sd-acciones { justify-content: flex-start; }
    .sd-acciones .sd-btn { min-height: 38px; padding: 0 11px; }
    .sd-btn-rotulo { font-size: 12.5px; }

    .sd-tabla td.sd-td-acciones {
        margin-top: 8px; padding-top: 10px;
        border-top: 1px solid var(--sd-linea-suave);
    }

    /* Suelta dentro de una tarjeta, la rayita no separa nada: sobra */
    .sd-app .sd-btn-aparte { margin-left: 5px; }
    .sd-app .sd-btn-aparte::before { display: none; }
}

@media print {
    .sd-btn-borrar { color: #16181a !important; border-color: #16181a !important; }
}

/* ===========================================================================
   Impresión, segunda parte: el papel no es un celular
   ---------------------------------------------------------------------------
   Una hoja A4 mide unos 700 px CSS de ancho, así que al imprimir se activaban
   TODAS las reglas de celular (max-width: 1000px): la tabla se convertía en
   tarjetas apiladas y el reporte de conjunto se iba a siete hojas. Y la
   primera salía casi en blanco: el «break-inside: avoid» de .sd-tarjeta
   empujaba a la hoja siguiente una tarjeta más alta que la página entera.

   Este bloque va AL FINAL del archivo a propósito: tiene que ganar en la
   cascada a las reglas de celular, que están escritas más arriba. Si se
   agrega CSS nuevo, que sea por encima de esta sección.
   =========================================================================== */

/* El marco que da barra de desplazamiento a una tabla ancha. En papel no hay
   barra, así que en impresión se abre (más abajo). */
.sd-desliza { overflow-x: auto; }

/* La cabecera del documento impreso: en pantalla no existe. */
.sd-imprimir-cab { display: none; }

@media print {

    /* En papel, una tabla es una tabla: se deshace la vista de tarjetas */
    .sd-tabla { display: table !important; width: 100% !important; font-size: 12px; }
    .sd-tabla thead { display: table-header-group !important; }
    .sd-tabla tbody { display: table-row-group !important; }
    .sd-tabla tr {
        display: table-row !important; background: transparent !important;
        border: 0 !important; border-radius: 0 !important;
        margin: 0 !important; padding: 0 !important;
    }
    .sd-tabla td {
        display: table-cell !important; width: auto !important;
        padding: 6px 10px !important; vertical-align: middle !important;
    }
    .sd-tabla th { padding: 6px 10px !important; }
    .sd-tabla td::before { content: none !important; }

    /* Que el reporte fluya: la tarjeta SÍ puede partirse entre hojas —si no,
       una más alta que la página deja la primera hoja en blanco—. Lo que no
       se parte es una fila, y la cabecera de un bloque va pegada a su tabla
       para que no quede sola al pie de una hoja. */
    .sd-tarjeta { break-inside: auto; box-shadow: none !important; }
    .sd-tabla tr { break-inside: avoid; }
    .sd-tarjeta-cab { break-inside: avoid; break-after: avoid; padding: 9px 12px; }
    .sd-tarjeta-cpo { padding: 12px; }
    .sd-veredicto { padding: 13px 16px; }
    .sd-veredicto-icono { font-size: 26px; }
    .sd-veredicto-txt b { font-size: 19px; }

    .sd-desliza { overflow: visible !important; }

    /* El recuadro del avatar pierde su fondo al imprimir; se le da borde */
    .sd-avatar {
        background: #fff !important; color: #16181a !important;
        border: 1px solid #c9cfd3;
    }

    /* La cabecera del documento: quién lo emite, qué es y de cuándo.
       Solo texto y una línea: en papel la tinta se paga. */
    .sd-imprimir-cab {
        display: flex !important; align-items: flex-end;
        justify-content: space-between; gap: 16px;
        padding-bottom: 10px; border-bottom: 2px solid #16181a;
    }
    .sd-imprimir-empresa {
        font-size: 14px; font-weight: 700; letter-spacing: .02em;
        color: #16181a; line-height: 1.3;
    }
    .sd-imprimir-titulo { font-size: 12px; color: #5a6167; margin-top: 2px; }
    .sd-imprimir-meta {
        font-family: 'IBM Plex Mono', monospace; font-size: 10.5px;
        color: #5a6167; text-align: right; line-height: 1.6; flex: 0 0 auto;
    }
}