:root {
    /* Manual de marca QM (jul 2023): primarios Pantone Blue 072 C y 354 C; secundarios 2925 C,
       401 C, 151 C, 1235 C y Warm Red C */
    --azul:    #10069F;
    --azul-2:  #2a1fc0;
    --verde:   #00A440;
    --verde-2: #00B140;
    --rojo:    #ef5c43;
    --naranja: #ff801d;
    --amarillo:#ffb72c;
    --celeste: #009bd9;
    --gris-qm: #aaa696;
    --gris-bg: #f4f5f8;
    --gris-br: #e0dfe6;
    --texto:   #1c1b29;
    --texto-2: #5c5a6b;
    --radius:  12px;
    --shadow:  0 2px 6px rgba(16,6,159,.08);
    --f-marca: "Termina", "M PLUS 1", "Segoe UI", Arial, sans-serif;
    --f-texto: "M PLUS 1", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
    margin: 0; padding: 0;
    font-family: var(--f-texto);
    background: var(--gris-bg);
    color: var(--texto);
    font-size: 16px;
    line-height: 1.4;
    -webkit-text-size-adjust: 100%;
}

/* ------------ Header ------------ */
.app-header {
    position: sticky; top: 0; z-index: 20;
    background: var(--azul);
    color: #fff;
    display: flex; align-items: center;
    padding: 12px 14px;
    padding-top: calc(12px + env(safe-area-inset-top));
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    gap: 10px;
}
.app-header__back {
    color: #fff; text-decoration: none;
    font-size: 26px; line-height: 1;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
}
.app-header__back:active { background: rgba(255,255,255,.25); }
.app-header__title {
    font-size: 17px; font-weight: 600;
    margin: 0; flex: 1;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ------------ Main ------------ */
.app-main {
    padding: 12px;
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
    max-width: 780px;
    margin: 0 auto;
}

/* ------------ Cards ------------ */
.card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 14px;
    margin-bottom: 10px;
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform .08s;
}
.card:active { transform: scale(.99); }

.card__title {
    font-weight: 700; font-size: 16px;
    margin-bottom: 2px;
    word-break: break-word;
}
.card__meta {
    font-size: 13px; color: var(--texto-2);
    display: flex; flex-wrap: wrap; gap: 8px;
}
.card__row { margin-top: 6px; }

/* ------------ Status pills ------------ */
.pill {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}
.pill--pendiente   { background: #fff3c4; color: #7a5d00; }
.pill--controlada  { background: #c8e6c9; color: #1b5e20; }
.pill--en_proceso  { background: #cfcaf0; color: #10069F; }
.pill--finalizada  { background: #dcedc8; color: #33691e; }
.pill--rechazada   { background: #ffcdd2; color: #b71c1c; }
.pill--desvio      { background: #ffab91; color: #bf360c; }
.pill--otro        { background: #d0d0d0; color: #555; }
.pill--listo       { background: #c8e6c9; color: #1b5e20; }

/* ------------ Pieza "otro control" ------------ */
.card--otro {
    background: #ececec;
    color: #6b6b6b;
}
.card--otro .card__title { color: #6b6b6b; }

/* ------------ Botones ------------ */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    min-height: 48px;
    padding: 10px 16px;
    border-radius: var(--radius);
    border: none;
    font-size: 15px; font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background .12s, transform .06s;
    user-select: none;
}
.btn:active { transform: scale(.97); }
.btn--primary   { background: var(--verde);  color: #fff; }
.btn--primary:active { background: var(--verde-2); }
.btn--blue      { background: var(--azul);   color: #fff; }
.btn--blue:active { background: var(--azul-2); }
.btn--danger    { background: var(--rojo);   color: #fff; }
.btn--warn      { background: var(--naranja);color: #fff; }
.btn--ghost     { background: #fff; color: var(--azul); border: 1.5px solid var(--azul); }
.btn--block     { width: 100%; }
.btn--small     { min-height: 40px; padding: 8px 12px; font-size: 13px; }

.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.btn-row .btn { flex: 1; min-width: 130px; }

/* ------------ Formularios ------------ */
.form-group { margin-bottom: 14px; }
.form-label {
    display: block;
    font-size: 13px; font-weight: 600;
    color: var(--texto-2);
    margin-bottom: 5px;
}
.form-control {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 1.5px solid var(--gris-br);
    border-radius: var(--radius);
    font-size: 16px;
    background: #fff;
    color: var(--texto);
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .12s;
}
.form-control:focus {
    outline: none;
    border-color: var(--azul);
}
select.form-control {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'><path fill='%23666' d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 22px;
    padding-right: 34px;
}
.form-group--inline { display: flex; gap: 8px; }
.form-group--inline > * { flex: 1; }

/* Fecha triple */
.fecha-triple {
    display: flex; gap: 6px; align-items: center;
}
.fecha-triple input {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
}
.fecha-triple .sep { font-size: 20px; color: var(--texto-2); }

/* ------------ Alertas ------------ */
.alert {
    padding: 12px 14px;
    border-radius: var(--radius);
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 1.45;
}
.alert--warn    { background: #fff3c4; color: #7a5d00; border-left: 4px solid var(--amarillo); }
.alert--danger  { background: #ffebee; color: #b71c1c; border-left: 4px solid var(--rojo); }
.alert--info    { background: #e8e6f8; color: #10069F; border-left: 4px solid var(--azul); }
.alert--success { background: #e8f5e9; color: #1b5e20; border-left: 4px solid var(--verde); }

/* ------------ Sticky bottom ------------ */
.bottom-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: #fff;
    border-top: 1px solid var(--gris-br);
    padding: 10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    display: flex;
    gap: 8px;
    box-shadow: 0 -2px 10px rgba(0,0,0,.05);
    z-index: 30;
    max-width: 780px;
    margin: 0 auto;
}
.bottom-bar .btn { flex: 1; }

/* ------------ Filtro ------------ */
.search-bar {
    display: flex;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 12px;
    overflow: hidden;
}
.search-bar input {
    flex: 1; border: none;
    min-height: 48px;
    padding: 10px 14px;
    font-size: 16px;
    background: transparent;
    outline: none;
}
.search-bar button {
    border: none;
    padding: 0 16px;
    background: var(--azul);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}

/* ------------ Empty ------------ */
.empty {
    text-align: center;
    color: var(--texto-2);
    padding: 40px 20px;
    font-size: 15px;
}
.empty__icon {
    font-size: 48px;
    display: block;
    margin-bottom: 10px;
    opacity: .35;
}

/* ------------ Checkbox desvíos ------------ */
.chk-desvio {
    display: flex;
    align-items: flex-start;
    padding: 12px;
    border: 1.5px solid var(--gris-br);
    border-radius: var(--radius);
    background: #fff;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background .1s;
}
.chk-desvio:active { background: #f0f0f0; }
.chk-desvio input[type="checkbox"] {
    width: 22px; height: 22px;
    margin: 0 10px 0 0;
    flex-shrink: 0;
    accent-color: var(--azul);
}
.chk-desvio__label { flex: 1; font-size: 14px; line-height: 1.35; }
.chk-desvio__label small { color: var(--texto-2); font-size: 11px; display:block; }
.chk-desvio input:checked ~ .chk-desvio__label { font-weight: 600; }
.chk-desvio:has(input:checked) { border-color: var(--azul); background: #e8e6f8; }
.chk-desvio input[type="checkbox"] { width: 24px; height: 24px; }

/* ------------ Toast ------------ */
.toast {
    position: fixed;
    left: 50%; bottom: 90px;
    transform: translateX(-50%);
    background: rgba(0,0,0,.85);
    color: #fff;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 14px;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
    max-width: 90vw;
    text-align: center;
}
.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(-4px);
}

/* ------------ FAB (Floating Action Button) ------------ */
.fab {
    position: fixed;
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    width: 60px; height: 60px;
    border-radius: 50%;
    background: var(--verde);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; font-weight: 300; line-height: 1;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    z-index: 40;
    transition: transform .1s, background .15s;
}
.fab:active {
    transform: scale(.9);
    background: var(--verde-2);
}

/* ------------ Acciones inline dentro de un card ------------ */
.card__actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--gris-br);
}
.card__actions .btn {
    flex: 1;
    min-width: 0;
    min-height: 40px;
    padding: 8px 10px;
    font-size: 13px;
}

/* =========================================================
   Colores por categoría en la vista de un control
   ========================================================= */

/* 1 · Sin controlar + Con final  → verde claro */
.card--finalizada      { background: #DCEDC8; }

/* 2 · Sin controlar + Sin final  → amarillo */
.card--pendiente       { background: #FFF9C4; }

/* 3 · Sin controlar + Rechazada  → rojo claro */
.card--rechazada       { background: #FFCDD2; }

/* 4 · Sin controlar + Relevada   → gris */
.card--relevada        { background: #E0E0E0; }

/* 5 · Controlada acá, sin desvíos pendientes → verde oscuro */
.card--controlada-ok   { background: #A5D6A7; }

/* 6 · Controlada acá, con desvíos pendientes → rojo oscuro */
.card--controlada-desv { background: #EF9A9A; }

/* 7 · Controlada en OTRO control → gris apagado (ya existe card--otro,
       pero la reforzamos por si acaso) */
.card--otro            { background: #ECECEC; color: #6b6b6b; }
.card--otro .card__title { color: #6b6b6b; }

/* Mantener el texto oscuro y legible en todas las tarjetas coloreadas */
.card--finalizada .card__title,
.card--pendiente .card__title,
.card--rechazada .card__title,
.card--relevada .card__title,
.card--controlada-ok .card__title,
.card--controlada-desv .card__title {
    color: #1c1c1c;
}

/* Pill adicional que faltaba */
.pill--relevada { background: #E0E0E0; color: #4a4a4a; }

/* Ajuste de borde en pills para que no "salten" cuando el fondo del card
   es del mismo color (por ejemplo amarillo sobre amarillo) */
.card--finalizada .pill--finalizada,
.card--pendiente  .pill--pendiente,
.card--rechazada  .pill--rechazada,
.card--relevada   .pill--relevada,
.card--controlada-ok .pill--controlada,
.card--controlada-desv .pill--desvio {
    box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.10);
}


/* Título de sección (Piezas encontradas / Controles) */
.seccion-titulo {
    font-size: 14px;
    color: #555;
    margin: 18px 0 8px 0;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}
.seccion-titulo small {
    color: #999;
    font-weight: 400;
    font-size: 12px;
}

/* Ajuste del pill dentro de card__meta para que no quede pegado */
.card__meta .pill {
    margin-left: 4px;
}


/* =========================================================
   Modo selección múltiple
   ========================================================= */
.card--selectable {
    position: relative;
    -webkit-touch-callout: none;
    transition: outline .12s, background .12s;
}

.card--selectable .card__checkbox {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    margin: 0;
    accent-color: var(--azul);
    display: none;
    z-index: 5;
    cursor: pointer;
}

/* Estado "modo selección activo" */
.selection-mode .card--selectable {
    padding-left: 56px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.selection-mode .card--selectable .card__checkbox {
    display: block;
}
.selection-mode .card--selectable > a {
    pointer-events: none;   /* el tap togglea la selección, no navega */
}
.selection-mode .card__actions {
    display: none;
}
.selection-mode .search-bar {
    display: none;
}

/* Pieza seleccionada */
.card--selected {
    outline: 3px solid var(--azul);
    outline-offset: -3px;
    background: #e8e6f8 !important;
}
.card--selected .card__title {
    color: var(--azul);
}

/* Hint visual del "modo selección" */
body.selection-mode .app-header {
    background: #0a3d91;
}
body.selection-mode .app-header__title::after {
    content: " · SELECCIÓN";
    font-size: 11px;
    font-weight: 500;
    opacity: .8;
}

/* Barra de acciones inferior */
.selection-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: #fff;
    border-top: 2px solid var(--azul);
    padding: 10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    display: none;
    flex-direction: column;
    gap: 8px;
    z-index: 60;
    box-shadow: 0 -4px 16px rgba(0,0,0,.12);
    max-width: 780px;
    margin: 0 auto;
}
.selection-mode .selection-bar {
    display: flex;
}
.selection-bar__info {
    text-align: center;
    font-size: 13px;
    color: #555;
    font-weight: 600;
}
.selection-bar__actions {
    display: flex;
    gap: 8px;
}
.selection-bar__actions .btn {
    flex: 1;
}
.selection-bar__actions .btn--icon {
    flex: 0 0 48px;
    padding: 0;
    font-size: 18px;
}

/* Selección múltiple visible (además de mantener presionado) */
.seleccion-inicio { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0 12px; flex-wrap: wrap; }
.hint-longpress { font-size: 11px; color: #888; }
.selection-mode .seleccion-inicio { display: none; }
.selection-bar__top { display: flex; align-items: center; gap: 8px; }
.selection-bar__top .selection-bar__info { flex: 1; }
.btn-link { background: none; border: 0; padding: 6px 4px; color: var(--azul); font-weight: 700; font-size: 13px; cursor: pointer; min-height: 32px; }
.btn-link:active { opacity: .6; }
.selection-mode .card--selectable .card__checkbox { width: 28px; height: 28px; pointer-events: none; }

/* Inputs extra en pieza_masiva.php */
.pieza-card {
    padding: 12px 14px;
}
.pieza-card__title {
    font-size: 15px;
    font-weight: 700;
    word-break: break-all;
    margin-bottom: 8px;
}
.pieza-card__title small {
    display: block;
    font-weight: 400;
    color: var(--texto-2);
    font-size: 12px;
    margin-top: 3px;
}
.pieza-card__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}
.pieza-card__fields .form-group {
    margin-bottom: 0;
}
@media (max-width: 480px) {
    .pieza-card__fields {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Componentes de la web del taller (Relevamiento / Ensayos)
   ========================================================= */

/* Menú de inicio y selección de ensayo: botones grandes para el dedo */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
@media (min-width: 600px) { .menu-grid { grid-template-columns: repeat(3, 1fr); } }
.tile {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    min-height: 104px;
    padding: 14px 10px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 6px;
    text-align: center;
    text-decoration: none;
    color: var(--texto);
    font-weight: 600;
    font-size: 15px;
    transition: transform .06s, background .12s;
}
.tile:active { transform: scale(.97); background: #e8e6f8; }
.tile__icono { font-size: 34px; line-height: 1; }
.tile small { font-weight: 400; color: var(--texto-2); font-size: 12px; }
.tile--ancho { grid-column: 1 / -1; min-height: 72px; flex-direction: row; }

/* Grupo de opciones tipo "botonera" (radio / checkbox) */
.seg {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label {
    flex: 1 1 auto;
    min-width: 70px;
    min-height: 48px;
    display: flex; align-items: center; justify-content: center;
    padding: 8px 12px;
    border: 1.5px solid var(--gris-br);
    border-radius: var(--radius);
    background: #fff;
    font-weight: 600; font-size: 15px;
    cursor: pointer;
    user-select: none;
    text-align: center;
}
.seg input:checked + label { border-color: var(--azul); background: #e8e6f8; color: var(--azul); }
.seg input:focus-visible + label { outline: 2px solid var(--azul-2); }
.seg--resultado input[value="Aprobado"]:checked + label  { border-color: var(--verde); background: #e8f5e9; color: var(--verde); }
.seg--resultado input[value="Rechazada"]:checked + label { border-color: var(--rojo);  background: #ffebee; color: var(--rojo); }
.seg--resultado input[value="Retenido"]:checked + label,
.seg--resultado input[value="Reproceso"]:checked + label { border-color: var(--naranja); background: #fff3e0; color: var(--naranja); }

/* Lista de piezas para tildar */
.chk-item {
    display: flex; align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1.5px solid var(--gris-br);
    border-radius: var(--radius);
    background: #fff;
    margin-bottom: 8px;
    cursor: pointer;
}
.chk-item input[type="checkbox"], .chk-item input[type="radio"] {
    width: 24px; height: 24px; margin: 0; flex-shrink: 0;
    accent-color: var(--azul);
}
.chk-item__texto { flex: 1; min-width: 0; font-size: 14px; line-height: 1.35; }
.chk-item__texto strong { display: block; font-size: 15px; word-break: break-all; }
.chk-item__texto small { display: block; color: var(--texto-2); font-size: 12px; }
.chk-item:has(input:checked) { border-color: var(--azul); background: #e8e6f8; }
.chk-item.oculto { display: none; }

.etiqueta {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 11px; font-weight: 700;
    background: #eceff1; color: #455a64;
    margin-right: 4px;
}
.etiqueta--azul    { background: #e8e6f8; color: var(--azul); }
.etiqueta--naranja { background: #fff3e0; color: #e65100; }
.etiqueta--verde   { background: #e8f5e9; color: var(--verde); }
.etiqueta--gris    { background: #e0e0e0; color: #555; }

/* Barra de filtro + acciones sobre una lista */
.barra-lista {
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
    margin-bottom: 8px;
}
.barra-lista .form-control { flex: 1 1 160px; min-height: 44px; }
.barra-lista .btn { min-height: 44px; }
.contador { font-size: 13px; font-weight: 700; color: var(--azul); }

/* Secciones del formulario */
.seccion {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 14px;
    margin-bottom: 12px;
}
.seccion__titulo {
    font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
    color: var(--texto-2);
    margin: 0 0 10px 0;
}
.form-hint { font-size: 12px; color: var(--texto-2); margin-top: 4px; }
.form-error { font-size: 12px; color: var(--rojo); margin-top: 4px; font-weight: 600; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .grid-2 { grid-template-columns: 1fr; } }
.grid-2 .form-group { margin-bottom: 0; }

/* Estado de calibración del equipo elegido */
.equipo-estado { font-size: 13px; font-weight: 600; margin-top: 5px; min-height: 1em; }
.equipo-estado--ok        { color: #1b5e20; }
.equipo-estado--aviso     { color: #8a5a00; }
.equipo-estado--bloqueado { color: var(--rojo); }
.equipo-estado--libre     { color: #8a5a00; }

/* Fila de kit (Armado) */
.kit-fila {
    border: 1.5px dashed var(--gris-br);
    border-radius: var(--radius);
    padding: 10px;
    margin-bottom: 10px;
    background: #fafafa;
}
.kit-fila__cabecera { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-weight: 700; font-size: 14px; }
fieldset[disabled] .kit-fila { opacity: .5; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

/* Resumen de confirmación */
.resumen { margin: 0; }
.resumen div { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid #eee; font-size: 14px; }
.resumen div:last-child { border-bottom: 0; }
.resumen dt { flex: 0 0 110px; color: var(--texto-2); font-weight: 600; }
.resumen dd { margin: 0; flex: 1; word-break: break-word; }

.alert__lista { margin: 6px 0 0 0; padding-left: 18px; }
.alert strong + .alert__lista { margin-top: 6px; }

/* Interruptor sí / no */
.switch { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; font-size: 15px; cursor: pointer; }
.switch input { width: 24px; height: 24px; accent-color: var(--azul); margin: 0; }

/* Ocultar / mostrar */
.d-none { display: none !important; }
.mt-0 { margin-top: 0 !important; }
.texto-chico { font-size: 13px; color: var(--texto-2); }
.seg--resultado label { flex: 1 1 40%; }

/* =========================================================
   Lista desplegable táctil (lista.js)
   ========================================================= */
.lista-oculto {
    position: absolute !important; opacity: 0; pointer-events: none;
    width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important;
}
.form-group, .seccion { position: relative; }
.lista-campo {
    display: flex; align-items: center; gap: 8px;
    text-align: left; cursor: pointer;
    font-family: inherit;
}
.lista-campo__texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-campo--vacio .lista-campo__texto { color: #9e9e9e; }
.lista-campo__flecha { color: #666; font-size: 18px; }
.lista-campo__color, .lista-item__color {
    width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
.lista-campo--error { border-color: var(--rojo); }
.lista-campo:disabled { background: #f0f0f0; color: #999; }

.lista-panel { position: fixed; inset: 0; z-index: 200; display: none; }
.lista-panel.abierta { display: block; }
.lista-panel__fondo { position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.lista-panel__caja {
    position: absolute; left: 0; right: 0; bottom: 0;
    max-height: 85vh; max-width: 780px; margin: 0 auto;
    background: #fff; border-radius: 16px 16px 0 0;
    display: flex; flex-direction: column;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 24px rgba(0,0,0,.2);
}
@media (min-width: 700px) {
    .lista-panel__caja { top: 8vh; bottom: auto; border-radius: 16px; height: 80vh; max-height: 80vh; }   /* alto fijo: no salta al filtrar */
}
.lista-panel__cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.lista-panel__titulo { font-size: 16px; }
.lista-panel__cerrar { border: 0; background: #eee; width: 38px; height: 38px; border-radius: 50%; font-size: 16px; cursor: pointer; }
.lista-panel__buscar { margin-bottom: 8px; }
.lista-panel__items { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; min-height: 120px; }
.lista-panel__pie { padding-top: 8px; }

/* Firmas (firmas.php / firma.js) */
.firma-pad { border: 1px dashed #9aa5c4; border-radius: 10px; background: #fff; padding: 6px; }
.firma-pad__lienzo { display: block; width: 100%; height: 170px; touch-action: none; background: #fff; border-radius: 6px; cursor: crosshair; }
.firma-pad__acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-top: 6px; }
.firma-pad__acciones .texto-chico { margin-right: auto; }
.firma-img { display: block; max-width: 100%; max-height: 110px; background: #fff; border: 1px solid #e3e6ef; border-radius: 6px; padding: 4px; }
.firmas-remito { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .firmas-remito { grid-template-columns: 1fr 1fr; } }
.firmas-remito__caja { border: 1px solid #e3e6ef; border-radius: 12px; padding: 10px 12px; }
.firmas-remito__caja h3 { margin: 0 0 8px; font-size: 15px; }
.lista-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    min-height: 48px; padding: 8px 10px;
    border: 0; border-bottom: 1px solid #eee; background: #fff;
    text-align: left; font-size: 15px; font-family: inherit; cursor: pointer; color: var(--texto);
}
.lista-item:active { background: #e8e6f8; }
.lista-item__texto { flex: 1; min-width: 0; word-break: break-word; }
.lista-item__texto small { display: block; color: var(--texto-2); font-size: 12px; }
.lista-item--elegido { background: #e8e6f8; font-weight: 700; color: var(--azul); }
.lista-item--agregar { color: var(--verde); font-weight: 700; background: #f1f8e9; }
.lista-item__check { font-size: 20px; }
.lista-grupo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--texto-2); padding: 10px 10px 4px; background: #fafafa; position: sticky; top: 0; }
.lista-nota { font-size: 12px; color: var(--texto-2); padding: 10px; text-align: center; }
body.lista-abierta { overflow: hidden; }

/* =========================================================
   Ventana modal (rechazo / cuarentena)
   ========================================================= */
.modal { position: fixed; inset: 0; z-index: 150; display: none; }
.modal.abierta { display: block; }
.modal__fondo { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.modal__caja {
    position: absolute; left: 0; right: 0; bottom: 0; max-width: 620px; margin: 0 auto;
    background: #fff; border-radius: 16px 16px 0 0; padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    max-height: 92vh; overflow-y: auto;
}
@media (min-width: 700px) { .modal__caja { top: 8vh; bottom: auto; border-radius: 16px; } }
.modal__titulo { margin: 0 0 4px; font-size: 18px; }
.modal__sub { margin: 0 0 14px; font-size: 13px; color: var(--texto-2); }
.modal--rechazo .modal__titulo { color: var(--rojo); }
.modal--cuarentena .modal__titulo { color: #e65100; }

/* =========================================================
   Resultado por pieza
   ========================================================= */
.pieza-fila {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
    padding: 5px 8px; margin-bottom: 4px;
    border: 1.5px solid var(--gris-br); border-radius: var(--radius); background: #fff;
}
.pieza-fila__check { width: 22px; height: 22px; margin: 0; accent-color: var(--azul); flex-shrink: 0; }
.pieza-fila__texto { flex: 1 1 180px; min-width: 0; font-size: 14px; line-height: 1.25; }
.pieza-fila__texto strong { display: inline; font-size: 14px; word-break: break-all; margin-right: 6px; }
.pieza-fila__texto small { display: inline-block; max-width: 100%; vertical-align: bottom; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-2); font-size: 12px; }
.pieza-fila__detalle { flex-basis: 100%; font-size: 12px; font-weight: 600; }
.pieza-fila__detalle button { margin-left: 6px; }
.pieza-fila.d-none { display: none; }
.pieza-fila[data-res="Aprobado"]  { border-color: var(--verde); background: #f1f8e9; }
.pieza-fila[data-res="Rechazada"] { border-color: var(--rojo); background: #fff5f5; }
.pieza-fila[data-res="Retenido"], .pieza-fila[data-res="Reproceso"] { border-color: var(--naranja); background: #fffaf0; }
.pieza-fila:has(.pieza-fila__check:checked) { box-shadow: 0 0 0 2px var(--azul) inset; }
/* Piezas que no se ofrecen (§4.18): ya informadas / MTTO en gris, rechazadas en rojo */
.pieza-fila__leyenda { display: block; margin-top: 0; font-size: 12px; font-style: italic; color: #757575; }
.pieza-fila[data-bloqueada] { background: var(--gris-bg); border-style: dashed; padding-top: 3px; padding-bottom: 3px; }
.pieza-fila[data-bloqueada] .pieza-fila__leyenda, .pieza-fila--rechazada .pieza-fila__leyenda { display: inline; margin-left: 6px; }
.pieza-fila[data-bloqueada] .pieza-fila__texto, .pieza-fila[data-bloqueada] .pieza-fila__leyenda { color: #9e9e9e; }
.pieza-fila[data-bloqueada] .pieza-fila__texto small { color: #9e9e9e; }
.pieza-fila[data-bloqueada] .res-mini { opacity: .35; pointer-events: none; }
.pieza-fila.pieza-fila--rechazada { background: #fff5f5; border-color: #ef9a9a; }
.pieza-fila.pieza-fila--rechazada .pieza-fila__texto, .pieza-fila.pieza-fila--rechazada .pieza-fila__texto small,
.pieza-fila.pieza-fila--rechazada .pieza-fila__leyenda { color: var(--rojo); }
.pieza-fila.pieza-fila--rechazada .pieza-fila__leyenda { font-style: normal; font-weight: 700; }
.pieza-fila__bloqueo { width: 24px; text-align: center; flex-shrink: 0; }
.opciones-lista { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 10px; }
.check-linea { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: 14px; cursor: pointer; }
.check-linea input { width: 22px; height: 22px; margin: 0; accent-color: var(--azul); }
.drops { display: flex; flex-wrap: wrap; gap: 8px; }
.drops__casilla { width: 92px; flex: 0 0 auto; }

.res-mini { display: flex; gap: 4px; flex-shrink: 0; }
.res-mini input { position: absolute; opacity: 0; pointer-events: none; }
.res-mini label {
    min-width: 38px; height: 32px; padding: 0 6px;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--gris-br); border-radius: 10px; background: #fff;
    font-size: 12px; font-weight: 700; cursor: pointer; user-select: none;
}
.res-mini input[value="Aprobado"]:checked + label  { background: var(--verde); border-color: var(--verde); color: #fff; }
.res-mini input[value="Rechazada"]:checked + label { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.res-mini input[value="Retenido"]:checked + label,
.res-mini input[value="Reproceso"]:checked + label { background: var(--naranja); border-color: var(--naranja); color: #fff; }

.res-masivo { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; padding: 8px; background: #f5f7fa; border-radius: var(--radius); }
.res-masivo__txt { font-size: 12px; font-weight: 700; color: var(--texto-2); flex-basis: 100%; }
.res-masivo .btn { min-height: 38px; padding: 6px 10px; font-size: 13px; flex: 1 1 auto; }
.btn--verde-suave { background: #e8f5e9; color: var(--verde); border: 1.5px solid var(--verde); }
.btn--rojo-suave { background: #ffebee; color: var(--rojo); border: 1.5px solid var(--rojo); }
.btn--naranja-suave { background: #fff3e0; color: #e65100; border: 1.5px solid var(--naranja); }

/* =========================================================
   Colores de pintura (muestras como en los precintos de Clientes)
   ========================================================= */
.colores { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.colores input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.color-op {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 8px; border: 2px solid var(--gris-br); border-radius: var(--radius); background: #fff;
    cursor: pointer; font-size: 12px; font-weight: 700; text-align: center; min-height: 84px; justify-content: center;
}
.color-op__caja { width: 100%; height: 36px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.colores input:checked + .color-op { border-color: var(--azul); box-shadow: 0 0 0 2px var(--azul); }
.color-op--nuevo { color: var(--verde); border-style: dashed; }
.color-nuevo { display: grid; grid-template-columns: 1fr 72px; gap: 8px; align-items: end; margin-top: 10px; }
.color-nuevo input[type="color"] { width: 72px; height: 48px; padding: 2px; border: 1.5px solid var(--gris-br); border-radius: var(--radius); background: #fff; }
.color-nuevo .btn { grid-column: 1 / -1; }

/* Selección de usuario (mockup) */
.usuario-actual { font-size: 12px; background: rgba(255,255,255,.15); color: #fff; padding: 6px 10px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.tile--usuario { min-height: 130px; }
.etiqueta--mockup { background: #fff3c4; color: #7a5d00; }

/* ═════════════ Precintado y Remitos ═════════════ */
.pestanas { display: flex; gap: 6px; margin: 0 0 12px; }
.pestanas__tab { flex: 1; text-align: center; padding: 10px 6px; border-radius: 10px; background: #fff; border: 1.5px solid var(--gris-br);
                 color: var(--texto-2); font-weight: 700; text-decoration: none; font-size: 14px; }
.pestanas__tab.activa { border-color: var(--azul); background: #e8e6f8; color: var(--azul); }
.filtros { margin-bottom: 6px; }
.filtros .form-group { margin-bottom: 8px; }
.filtros .seg { margin-bottom: 8px; }
.fila-switch { display: flex; flex-wrap: wrap; gap: 0 18px; }
.muestra { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,.25); vertical-align: -2px; }
.muestra--vacia { background: repeating-linear-gradient(45deg, #fff 0 3px, #ddd 3px 6px); }
.prec-fila { align-items: flex-start; }
.prec-fila__sin-chk { width: 24px; text-align: center; flex: 0 0 24px; }
.prec-fila--vencida { background: #ffebee; border-color: #ef9a9a; }
.prec-fila--espera { color: #8a8a8a; cursor: default; background: #fafafa; }
.prec-fila .card__row { margin-top: 6px; }
.vig { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.vig .form-control { max-width: 160px; }
.prev-expira { margin: 0 0 8px; color: #1a365d; }
.prev-card { border: 1.5px solid var(--gris-br); border-radius: 10px; padding: 10px; margin-bottom: 8px; background: #fff; }
.prev-card--aviso { background: #fff8e1; border-color: #ffe082; }
.prev-card__cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.prev-card__aviso { font-size: 13px; color: #8a5a00; margin-top: 4px; }
.prev-linea { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; }
.prev-linea small { flex: 0 0 74px; color: var(--texto-2); }
.prev-linea code, .precinto-txt code, .regen { font-family: ui-monospace, Consolas, monospace; font-size: 14px; overflow-wrap: anywhere; }
.seccion--aviso { border-left: 4px solid var(--naranja); }
.fila-diam { display: flex; gap: 8px; align-items: center; }
.fila-diam .form-control { max-width: 150px; }
.diam-estado { font-size: 13px; font-weight: 600; }
.diam-estado--verde { color: var(--verde); }
.diam-estado--rojo { color: var(--rojo); }
.decl__cab { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 6px; }
.decl__sel input { width: 24px; height: 24px; accent-color: var(--azul); margin: 2px 0 0; }
.decl__titulo { flex: 1; min-width: 0; }
.decl__titulo small { color: var(--texto-2); }
.decl__gen { border: 1.5px solid var(--gris-br); background: #fff; border-radius: 10px; min-width: 44px; min-height: 44px; font-size: 22px; cursor: pointer; }
.decl__gen.activo { border-color: var(--verde); background: #e8f5e9; color: var(--verde); }
.decl--generado { background: #f1f8f1; }
.decl--vencido { background: #ffebee; }
.decl--reemplazado { opacity: .6; }
.precinto-txt { display: flex; width: 100%; gap: 8px; align-items: baseline; text-align: left; padding: 8px 10px; margin: 0 0 6px;
                border: 1px dashed #b0bec5; border-radius: 8px; background: #f8fafc; cursor: pointer; font: inherit; color: inherit; }
.precinto-txt small { flex: 0 0 74px; color: var(--texto-2); }
.precinto-txt code { flex: 1; }
.precinto-txt:active { background: #e8e6f8; }
.precinto-txt[disabled] { opacity: .5; cursor: default; }
.etiqueta--btn { border: 0; cursor: pointer; font: inherit; font-size: 12px; }
.acciones-decl .btn-row { flex-wrap: wrap; margin-bottom: 8px; }
.regen { display: block; padding: 6px 8px; border-radius: 6px; margin: 2px 0 4px; }
.regen--antes { background: #ffebee; text-decoration: line-through; }
.regen--ahora { background: #e8f5e9; }

/* Remitos */
.rem-card--anulado { background: #ffebee; }
.rem-card--anulado .card__title { text-decoration: line-through; }
.ctrl-op { align-items: flex-start; }
.ctrl-op--pending { background: #ffebee; border-color: #ef9a9a; }
.ctrl-op--assigned { background: #eeeeee; color: #666; cursor: default; }
.ctrl-op__piezas { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.ctrl-op__piezas .ok { color: var(--verde); }
.ctrl-op__piezas .pend { color: var(--rojo); }
.item-ent { border: 1.5px solid var(--gris-br); border-radius: var(--radius); padding: 10px; margin-bottom: 10px; background: #fff; }
.item-ent__cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-weight: 700; }
.item-ent .form-group { margin-bottom: 8px; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; }
.tabla th, .tabla td { border-bottom: 1px solid #eee; padding: 6px 8px; text-align: left; vertical-align: top; }
.tabla th { background: #f1f4f8; font-size: 13px; }
.tabla td.num, .tabla th.num { text-align: right; }
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* =========================================================
   Personal, Planificación, Trazabilidad y Avisos (16/10/2026)
   ========================================================= */
.per-grid { display: grid; grid-template-columns: 1fr; gap: 0 10px; }
@media (min-width: 760px) { .per-grid { grid-template-columns: 1fr 1fr; } }
.per-card { display: flex; gap: 12px; align-items: center; }
.per-card__texto { min-width: 0; flex: 1; }
.per-card--baja { opacity: .6; }
.per-foto { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--gris-bg); }
.per-foto--vacia { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--texto-2); border: 1.5px solid var(--gris-br); }
.per-foto--grande { width: 140px; height: 140px; font-size: 36px; }
.per-foto--chica { width: 40px; height: 40px; font-size: 13px; }
.per-ficha { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.per-ficha .resumen { flex: 1 1 240px; }
.per-ficha__foto { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.per-ficha__subir { cursor: pointer; }
.venc { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 8px 10px; margin-bottom: 6px; border-radius: 8px; border-left: 4px solid var(--gris-br); background: #fafafa; font-size: 14px; }
.venc__estado { font-weight: 700; margin-left: auto; }
.venc--ok   { border-left-color: var(--verde); }
.venc--aviso { border-left-color: var(--amarillo); background: #fffde7; }
.venc--warn { border-left-color: var(--naranja); background: #fff3e0; }
.venc--bad  { border-left-color: var(--rojo); background: #ffebee; }
.venc--entr { border-left-color: var(--azul); }
tr.venc--bad td { background: #ffebee; }
tr.venc--warn td { background: #fff3e0; }

.pla-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 0 0 10px; }
.pla-kpis div { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px 4px; text-align: center; }
.pla-kpis strong { display: block; font-size: 22px; }
.pla-kpis span { font-size: 11px; color: var(--texto-2); }
.pla-fila { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.pla-fila__quien { display: flex; gap: 10px; align-items: center; flex: 1 1 220px; min-width: 0; }
.pla-fila__quien small { display: block; color: var(--texto-2); font-size: 12px; }
.pla-fila__datos { display: flex; flex-wrap: wrap; gap: 6px; flex: 2 1 420px; align-items: center; }
.pla-fila__datos .form-control { flex: 1 1 130px; min-height: 40px; }
.pla-fila--ausente { background: #ffebee; }
.pla-fila--tarde, .pla-fila--retiro { background: #fff8e1; }
.pla-fila--franco { opacity: .75; }
.pla-fila--ausente .pla-estado { color: var(--rojo); font-weight: 700; }
.pla-barra { height: 10px; border-radius: 6px; background: var(--gris-bg); overflow: hidden; margin: -4px 0 10px; }
.pla-barra span { display: block; height: 100%; background: var(--verde); }
details.seccion > summary, details.card > summary { cursor: pointer; list-style: none; }
details.seccion > summary::-webkit-details-marker, details.card > summary::-webkit-details-marker { display: none; }

.aud__resumen { font-size: 13px; margin-top: 4px; word-break: break-word; }
.aud__motivo { font-size: 12px; margin-top: 2px; color: #7a5d00; }
.aud--insert .aud__accion { background: #c8e6c9; color: #1b5e20; }
.aud--update .aud__accion { background: #fff3c4; color: #7a5d00; }
.aud--delete .aud__accion { background: #ffcdd2; color: #b71c1c; }
details.aud[open] { box-shadow: 0 0 0 2px var(--azul-2) inset; }
details.aud .tabla-scroll { margin-top: 8px; }

.aviso__texto { font-size: 15px; margin-bottom: 6px; white-space: normal; }
.aviso--tomado { border-left: 4px solid var(--azul-2); }
.aviso--pendiente { border-left: 4px solid var(--amarillo); }
.aviso--realizado, .aviso--anulado { opacity: .7; }
.aviso--vencido { border-left-color: var(--rojo); }
.aviso__vence--mal { color: var(--rojo); font-weight: 700; }
.aviso__resp { font-size: 13px; background: var(--gris-bg); border-radius: 8px; padding: 6px 8px; margin-top: 6px; }
.aviso__acciones { margin-top: 8px; flex-wrap: wrap; }
.aviso__acciones .form-control { flex: 1 1 160px; min-height: 40px; }

/* =========================================================
   Diseño ancho para PC: sga_cabecera(..., ['ancho' => true])
   (Relevamiento, Precintado, Planificación, Personal, Trazabilidad,
   Avisos y menús). Ensayos, Remitos y Calidad no lo usan.
   En celular y tablet angosta no cambia nada.
   ========================================================= */
@media (min-width: 900px) {
    .layout-ancho .app-main { max-width: 1480px; padding: 16px 24px calc(90px + env(safe-area-inset-bottom)); }
    .layout-ancho .bottom-bar,
    .layout-ancho .selection-bar { max-width: 1480px; }
    .layout-ancho .bottom-bar { justify-content: flex-end; padding-left: 24px; padding-right: 24px; }
    .layout-ancho .bottom-bar .btn { flex: 0 1 300px; }
    .layout-ancho .fab { right: max(24px, calc((100vw - 1480px) / 2 + 24px)); }

    /* Listas de tarjetas en grilla */
    .layout-ancho .lista-cards {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
        gap: 12px; align-items: start; margin-bottom: 12px;
    }
    .layout-ancho .lista-cards > .card,
    .layout-ancho .lista-cards > .chk-item,
    .layout-ancho .lista-cards > .seccion { margin: 0; }
    .layout-ancho .lista-cards--compacta { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; }
    .layout-ancho .lista-cards:has(> .pla-fila) { grid-template-columns: repeat(auto-fill, minmax(600px, 1fr)); }
    .layout-ancho .lista-cards:has(> details.aud) { grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); }
    .layout-ancho .lista-cards:has(> .pla-plan) { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }

    /* Filtros en una fila */
    .layout-ancho .filtros { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 12px; }
    .layout-ancho .filtros > * { margin-bottom: 0; }
    .layout-ancho .filtros > .search-bar { flex: 2 1 360px; margin-bottom: 0; }
    .layout-ancho .filtros > .grid-2 { flex: 2 1 480px; }
    .layout-ancho .filtros > .form-group,
    .layout-ancho .filtros > .seg { flex: 1 1 240px; }
    .layout-ancho .filtros > .barra-lista { flex: 1 1 100%; margin: 0; }

    /* Formularios largos y fichas en dos columnas */
    .layout-ancho .form-cols,
    .layout-ancho .columnas {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; align-items: start;
    }
    .layout-ancho .form-cols > .alert { grid-column: 1 / -1; }
    .layout-ancho .pla-cabecera { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }

    /* Menús y Personal */
    .layout-ancho .menu-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
    .layout-ancho .tile { min-height: 130px; }
    .layout-ancho .per-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 0 12px; }
}
@media (min-width: 1400px) {
    .layout-ancho .form-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =========================================================
   Calendario de diagramas (Personal › Diagramas y ficha)
   ========================================================= */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.grid-3 .form-group { margin-bottom: 0; }
@media (max-width: 480px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
.cal { margin: 8px 0; max-width: 340px; }
.cal__mes { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.cal__grilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal__dia-sem { text-align: center; font-size: 11px; color: var(--texto-2); font-weight: 600; }
.cal__d { text-align: center; font-size: 12px; line-height: 28px; border-radius: 6px; }
.cal__d--t { background: #c8e6c9; color: #1b5e20; font-weight: 600; }
.cal__d--f { background: #eceff1; color: #78909c; }
.cal__d--hoy { box-shadow: 0 0 0 2px var(--azul) inset; }
.cal__muestra { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; }
.cal-par { display: flex; flex-wrap: wrap; gap: 0 24px; }
.cal-par .cal { flex: 1 1 260px; }
.cal-nav { align-items: center; flex-wrap: wrap; }
.cal-nav form { display: flex; }
.diag details { margin-top: 6px; }
.form-diag { margin-top: 8px; }
.cal-anio { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 20px; }
.cal-anio .cal { max-width: none; }
.cal-anio__titulo { font-size: 20px; }
.diag__personas { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.diag__personas small { color: var(--texto-2); margin-left: 4px; }
.diag__puesto select { min-height: 36px; padding: 4px 8px; font-size: 13px; }
tr.diag__sin td { background: #fff8e1; }
@media print {
    .app-header, .cal-nav .btn, .bottom-bar { display: none !important; }
    .cal-anio { grid-template-columns: repeat(4, 1fr); }
    .cal__d--t { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* =========================================================
   Planificación › Tareas (elegir tarea y tocar personas, o arrastrar)
   ========================================================= */
.tablero { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 900px) {
    .tablero { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); align-items: start; }
    .tar-disp { position: sticky; top: 76px; max-height: calc(100vh - 100px); overflow: auto; }
}
.tar-disp { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; }
.tar-disp.sobre { box-shadow: 0 0 0 3px var(--naranja) inset; }
.tar-tareas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; align-items: start; }
.tar-tarea { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px; cursor: pointer;
             border: 2px solid transparent; min-height: 110px; transition: border-color .12s, background .12s; }
.tar-tarea.elegida { border-color: var(--azul); background: #e8e6f8; }
.tar-tarea.sobre { border-color: var(--verde); background: #f1f8e9; }
.tablero.con-tarea .tar-tarea:not(.elegida) { opacity: .85; }
.tar-tarea__cab { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-bottom: 6px; }
.tar-tarea__cab strong { font-size: 15px; }
.tar-n { color: var(--texto-2); font-size: 13px; }
.tar-lista { display: flex; flex-direction: column; gap: 6px; min-height: 36px; }
.tar-lista--disp { margin-top: 8px; }
.tar-chip { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: var(--gris-bg);
            border: 1.5px solid var(--gris-br); cursor: grab; user-select: none; }
.tar-chip:active { cursor: grabbing; }
.tar-chip__txt { flex: 1; min-width: 0; font-size: 13px; line-height: 1.25; }
.tar-chip__txt strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tar-chip__txt small { display: block; color: var(--texto-2); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tar-chip__quitar { border: 0; background: transparent; color: var(--texto-2); font-size: 15px; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.tar-chip__quitar:hover { background: #ffebee; color: var(--rojo); }
.tar-lista--disp .tar-chip__quitar { display: none; }
.tablero.con-tarea .tar-lista--disp .tar-chip { border-color: var(--azul-2); background: #fff; cursor: pointer; }
.tar-chip.arrastrando { opacity: .4; }
.tar-chip.guardando { opacity: .5; pointer-events: none; }
.tar-chip.d-none { display: none; }
@media (max-width: 899px) {
    .tar-tareas { order: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tar-disp { order: 2; }
    .tar-lista--disp { max-height: 60vh; overflow: auto; }
    .tar-tarea { min-height: 80px; }
}

/* Filtro «Grupo / función» de varias opciones */
.filtro-multi { position: relative; }
.filtro-multi > summary { cursor: pointer; list-style: none; display: flex; align-items: center; min-height: 44px; }
.filtro-multi > summary::-webkit-details-marker { display: none; }
.filtro-multi > summary::after { content: '▾'; margin-left: auto; padding-left: 8px; color: var(--texto-2); }
.filtro-multi__resumen { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filtro-multi__panel { position: absolute; z-index: 40; left: 0; right: 0; min-width: 260px; max-height: 60vh; overflow: auto;
                       background: #fff; border: 1.5px solid var(--gris-br); border-radius: var(--radius); box-shadow: 0 6px 18px rgba(0,0,0,.12);
                       padding: 8px 10px; margin-top: 4px; }
.filtro-multi fieldset { border: 0; padding: 0; margin: 0 0 6px; }
.filtro-multi legend { font-size: 12px; font-weight: 700; color: var(--texto-2); text-transform: uppercase; padding: 4px 0; }
.filtro-multi .check-linea { display: flex; min-height: 32px; font-size: 13px; }
/* Tablero: botones de cada persona según dónde está */
.tar-chip__btn { border: 0; background: transparent; font-size: 14px; cursor: pointer; padding: 4px 5px; border-radius: 6px; }
.tar-chip__btn:hover { background: #eceff1; }
.tar-chip__quitar:hover { background: #ffebee; color: var(--rojo); }
.tar-lista--disp .tar-chip__viene, .tar-lista--disp .tar-chip__quitar { display: none; }
.tar-lista--franco .tar-chip__franco, .tar-lista--franco .tar-chip__quitar { display: none; }
.tar-tarea .tar-chip__viene { display: none; }
/* ➖ solo para los extras (que en vez de 🚫 ausente usan ➖: no estaban diagramados) */
.tar-chip:not([data-extra="1"]) .tar-chip__noviene, .tar-lista--franco .tar-chip__noviene, .tar-chip[data-extra="1"] [data-marcar="ausente"] { display: none; }
.tar-lista--disp .tar-chip__comentar, .tar-lista--franco .tar-chip__comentar { display: none; }
.tar-chip__txt .tar-chip__nota { display: block; font-style: normal; font-size: 12px; color: var(--azul); white-space: normal; }
.tar-chip__txt .tar-chip__nota::before { content: '💬 '; }
.tar-chip__txt .tar-chip__nota[hidden] { display: none; }
.lista-tareas__nota { display: block; font-style: normal; font-size: 13px; color: var(--azul); padding-left: 4px; }
.tar-franco { margin-top: 10px; border-top: 1px solid var(--gris-br); padding-top: 6px; }
.tar-franco > summary { cursor: pointer; list-style: none; }
.tar-franco.sobre { box-shadow: 0 0 0 3px var(--naranja) inset; border-radius: 8px; }
.tar-lista--franco .tar-chip { background: #fafafa; opacity: .85; }
.tar-lista--franco { max-height: 40vh; overflow: auto; }

/* Planificación: área (Operarios / Mantenimiento) arriba de las pestañas */
.pestanas--area { margin-bottom: 6px; }
.pestanas--area .pestanas__tab { font-weight: 700; }
.pestanas--area .pestanas__tab.activa { background: var(--azul); color: #fff; border-color: var(--azul); }

/* Tablas ordenables (clic en la cabecera) */
table.tabla-ordenable th { cursor: pointer; user-select: none; white-space: nowrap; }
table.tabla-ordenable th:hover { background: #e3eaf3; }
table.tabla-ordenable th::after { content: ' ↕'; color: #b0bec5; font-size: 11px; }
table.tabla-ordenable th[data-dir="asc"]::after { content: ' ▲'; color: var(--azul); }
table.tabla-ordenable th[data-dir="desc"]::after { content: ' ▼'; color: var(--azul); }
tr.fila-hoy td { background: #fff8e1; }
/* Personal: barra para ordenar las tarjetas */
.orden-barra { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; font-size: 13px; }
.orden-barra a { padding: 6px 10px; border-radius: 8px; border: 1.5px solid var(--gris-br); background: #fff; color: var(--texto); text-decoration: none; }
.orden-barra a.activa { border-color: var(--azul); background: #e8e6f8; color: var(--azul); font-weight: 700; }
.seccion-titulo a { padding: 2px 6px; border-radius: 6px; text-decoration: none; }
.seccion-titulo a.activa { background: var(--azul); color: #fff; }

/* Planificación › Tareas › 👁 Ver tareas: lista de cada tarea con su gente */
.tar-acciones { margin-bottom: 8px; align-items: center; }
.modal--lista .modal__caja { max-width: 760px; max-height: 88vh; overflow: auto; }
@media (min-width: 900px) { .modal--lista .modal__caja { top: 5vh; } }
.lista-tareas h3 { margin: 14px 0 4px; font-size: 18px; color: var(--azul); border-bottom: 2px solid #e3eaf3; padding-bottom: 2px; }
.lista-tareas h3 small { color: var(--texto-2); font-size: 13px; font-weight: 400; }
.lista-tareas ul { margin: 0 0 6px; padding-left: 22px; columns: 2 220px; column-gap: 24px; }
.lista-tareas li { font-size: 16px; line-height: 1.6; break-inside: avoid; }
.lista-tareas li small { color: var(--texto-2); font-size: 12px; }
.modal-tareas__botones { justify-content: flex-end; margin-top: 12px; }
@media print {
    body.ver-tareas-abierto .app-header,
    body.ver-tareas-abierto .app-main > *:not(#modal-tareas),
    body.ver-tareas-abierto #modal-tareas .modal__fondo,
    body.ver-tareas-abierto .modal-tareas__botones { display: none !important; }
    body.ver-tareas-abierto #modal-tareas, body.ver-tareas-abierto #modal-tareas .modal__caja {
        position: static !important; max-height: none; overflow: visible; box-shadow: none; transform: none; }
    body.ver-tareas-abierto .lista-tareas li { font-size: 13px; }
}
/* Tarjeta de persona del tablero: si no entran nombre y botones, los botones bajan a otra línea */
.tar-chip { flex-wrap: wrap; row-gap: 2px; }
.tar-chip__txt { flex: 1 1 110px; min-width: 100px; }
@media (max-width: 899px) {
    .tar-chip { padding: 6px; gap: 6px; }
    .tar-chip__btn { padding: 2px 4px; font-size: 13px; }
}
/* Ver tareas: botones siempre visibles abajo aunque la lista sea larga */
.modal--lista .modal-tareas__botones { position: sticky; bottom: -14px; background: #fff; padding: 10px 0 4px; margin-bottom: -4px; border-top: 1px solid #eee; }
/* Tablero: referencia de los símbolos */
.tar-leyenda { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: 13px; color: var(--texto-2);
               background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px 12px; margin-bottom: 10px; }
.tar-leyenda b { font-size: 15px; margin-right: 2px; }
.tar-leyenda__ayuda { margin-left: auto; font-style: italic; }
@media (max-width: 899px) { .tar-leyenda__ayuda { margin-left: 0; flex-basis: 100%; } }
/* Flujo de piezas: tarjetas por etapa (Relevamiento › … › Entrega) y recorrido de cada pieza */
.flujo { display: flex; align-items: stretch; gap: 4px; overflow-x: auto; padding: 4px 2px 10px; margin-bottom: 4px; }
.flujo__sep { align-self: center; color: var(--texto-2); font-size: 20px; flex: 0 0 auto; }
.flujo__etapa { flex: 1 0 84px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px 8px;
                background: #fff; border: 2px solid transparent; border-radius: var(--radius); box-shadow: var(--shadow);
                color: var(--texto); text-decoration: none; text-align: center; }
.flujo__etapa:hover { border-color: #a39ce6; }
.flujo__etapa--activa { border-color: var(--azul); background: #e8e6f8; }
.flujo__etapa--vacia { opacity: .55; }
.flujo__icono { font-size: 22px; line-height: 1; }
.flujo__n { font-size: 22px; font-weight: 700; color: var(--azul); }
.flujo__nombre { font-size: 12px; font-weight: 600; white-space: nowrap; }
.flujo__pasan { font-size: 11px; color: var(--texto-2); }
.flujo-ruta { white-space: normal; min-width: 320px; }
.flujo-ruta__sep { color: #9e9e9e; margin: 0 2px; }
.flujo-paso { display: inline-block; font-size: 12px; padding: 1px 6px; border-radius: 10px; margin: 1px 0; white-space: nowrap; }
.flujo-paso--hecha { background: #e8f5e9; color: #2e7d32; }
.flujo-paso--hecha::before { content: '✓ '; }
.flujo-paso--actual { background: var(--azul); color: #fff; font-weight: 600; }
.flujo-paso--pendiente { background: #f1f1f1; color: #616161; }
.flujo-paso--problema { background: #ffebee; color: var(--rojo); outline: 1px solid #ef9a9a; }
.flujo-paso--actual.flujo-paso--problema { background: var(--rojo); color: #fff; }
.flujo-paso__info { display: block; font-size: 10px; font-weight: 400; opacity: .85; line-height: 1.1; }
.flujo-informe { margin-top: 4px; font-size: 12px; }
.flujo-informe summary { cursor: pointer; color: var(--azul); }
.flujo-informe ul { margin: 4px 0 0; padding-left: 18px; }
/* Ensayos: fotos de la falla en la ventana de rechazo / cuarentena */
.det-fotos__boton { position: relative; cursor: pointer; }
.det-fotos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.det-fotos img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--gris-br); }

/* Planificación: desplegable de disponibles dentro de la tarea elegida */
.tar-tarea { position: relative; }
.tar-pop { position: absolute; left: 6px; right: 6px; top: 38px; z-index: 30; min-width: 240px; background: #fff;
           border: 1px solid var(--azul-2, #2a1fc0); border-radius: 10px; box-shadow: 0 8px 22px rgba(0,0,0,.18);
           padding: 6px; cursor: default; }
.tar-pop__cab { display: flex; gap: 6px; align-items: center; }
.tar-pop__cab .form-control { min-height: 36px; padding: 6px 10px; font-size: 14px; }
.tar-pop__cerrar { border: 0; background: transparent; font-size: 16px; cursor: pointer; padding: 4px 8px; border-radius: 6px; color: var(--texto-2); }
.tar-pop__cerrar:hover { background: #eceff1; }
.tar-pop__lista { list-style: none; margin: 6px 0 0; padding: 0; max-height: 50vh; overflow: auto; }
.tar-pop__item { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 7px 8px;
                 border-radius: 8px; cursor: pointer; font: inherit; }
.tar-pop__item:hover, .tar-pop__item:focus { background: #e8e6f8; outline: none; }
.tar-pop__item:disabled { opacity: .45; }
.tar-pop__item strong { display: block; font-size: 13px; }
.tar-pop__item small { display: block; font-size: 11px; color: var(--texto-2); }
.tar-pop__vacio { padding: 8px; font-size: 13px; color: var(--texto-2); }
@media (max-width: 899px) {
    .tar-tareas .tar-tarea:nth-child(even) .tar-pop { left: auto; right: 0; }
    .tar-tareas .tar-tarea:nth-child(odd) .tar-pop { left: 0; right: auto; }
    .tar-pop { width: min(86vw, 320px); }
}
/* Celular: en vez de lista desplegable, una caja con los nombres de los disponibles dentro de la tarea */
@media (max-width: 700px) {
    .tar-tareas .tar-tarea .tar-pop { position: static; width: auto; min-width: 0; left: auto; right: auto;
                                       margin: 6px 0; box-shadow: none; }
    .tar-pop__lista { display: flex; flex-wrap: wrap; gap: 6px; max-height: 45vh; }
    .tar-pop__lista li { flex: 0 0 auto; max-width: 100%; }
    .tar-pop__item { width: auto; max-width: 100%; padding: 8px 10px; background: #e8e6f8; border: 1px solid #cfcaf0; }
    .tar-pop__item:active { background: #cfcaf0; }
    .tar-pop__item strong { font-size: 13px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tar-pop__item small { display: none; }
    .tar-pop__vacio { flex: 1 0 100%; }
    .tar-tareas .tar-tarea.elegida { grid-column: 1 / -1; }   /* la tarea elegida ocupa todo el ancho */
    .tar-tarea .tar-ind { grid-template-columns: 1fr; }
}
/* ── Planificación: reparto, indicación por tarea, almuerzo, diagrama y foto de la jornada ── */
.tar-reparto { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.tar-reparto .form-group { margin: 0; min-width: 220px; }
.tar-reparto input[name="capacitacion"] { flex: 1 1 220px; }
.tar-reparto__jornada { margin-left: auto; }
.tar-ind { display: grid; grid-template-columns: 108px 1fr; gap: 6px; margin: 4px 0 6px; cursor: default; }
.tar-ind .form-control { padding: 4px 8px; font-size: .85rem; min-height: 0; }
.tar-tarea--alta  { box-shadow: inset 4px 0 0 #c62828, var(--shadow); }
.tar-tarea--media { box-shadow: inset 4px 0 0 #ef6c00, var(--shadow); }
.tar-tarea--baja  { box-shadow: inset 4px 0 0 #78909c, var(--shadow); }
.alm-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }   /* una columna por horario */
.alm-todos { align-items: center; } .alm-todos__otra { display: inline-flex; gap: 6px; align-items: center; }
@media (max-width: 900px) { .alm-cols { grid-template-columns: 1fr; } }
.alm-col--sin { background: #fafafa; }
.alm-persona { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-top: 1px solid #eee; }
.alm-persona__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.alm-persona__txt small { color: #666; }
.dia-tabla-caja { overflow-x: auto; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); }
.dia-tabla { border-collapse: separate; border-spacing: 2px; font-size: .78rem; }
.dia-tabla th { font-weight: 600; text-align: center; padding: 2px; min-width: 22px; }
.dia-tabla thead th small { display: block; color: #888; font-weight: 400; }
.dia-tabla .dia-grupo { position: sticky; left: 0; background: #fff; text-align: left; min-width: 220px; max-width: 300px; padding: 6px 8px; }
.dia-tabla .dia-grupo small { display: block; color: #666; font-weight: 400; }
.dia-personas { display: block; font-weight: 400; color: #444; font-size: .72rem; line-height: 1.3; margin-top: 2px; }
.dia-tabla td { width: 22px; height: 26px; border-radius: 4px; }
.dia-t, .dia-ref--t { background: #66bb6a; }
.dia-f, .dia-ref--f { background: #9575cd; }
.dia-x { background: #eceff1; }
.dia-tabla .dia-hoy { outline: 2px solid #2a1fc0; outline-offset: -1px; }
.dia-tabla thead .dia-finde { color: #8e24aa; }
.dia-ref { display: inline-block; padding: 0 6px; border-radius: 4px; color: #fff; font-weight: 600; }
/* Diagrama › vista anual: elegir diagramas al costado, un mes debajo del otro, el personal abajo */
.dia-anual { display: grid; grid-template-columns: minmax(200px, 240px) 1fr; gap: 12px; align-items: start; }
.dia-anual__elegir { position: sticky; top: 8px; }
.dia-anual__elegir .check-linea { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.dia-anual__meses { display: grid; gap: 10px; min-width: 0; }
.dia-tabla--anual td { width: 18px; height: 18px; }
.dia-tabla--anual th { min-width: 18px; }
.dia-tabla--anual .dia-grupo { min-width: 170px; white-space: nowrap; }
.dia-color { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; }
.dia-anual__personal { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px 18px; }
/* Vista anual › estilo calendario: el número del día en el cuadrado y una franja por diagrama */
.dia-cal-anio { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.dia-cal-anio--n1 { grid-template-columns: minmax(0, 620px); }
.dia-cal-anio--n2 { grid-template-columns: repeat(2, minmax(0, 520px)); }
.dia-cal-anio--n1 .dia-cal__num, .dia-cal-anio--n2 .dia-cal__num { font-size: 18px; }
.dia-cal { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px; }
.dia-cal__titulo { font-weight: 700; color: var(--azul); margin-bottom: 6px; text-align: center; }
.dia-cal__grilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; padding: 4px; border: 1px solid #90a4ae; border-radius: 6px; }   /* los días, en una caja */
.dia-cal__sem { text-align: center; font-size: 11px; font-weight: 600; color: #888; }
.dia-cal__sem.dia-finde { color: #8e24aa; }
.dia-cal__dia { position: relative; aspect-ratio: 1; border-radius: 5px; overflow: hidden; background: #eceff1; border: 1px solid #000; }
.dia-cal__dia.dia-hoy { outline: 2px solid #2a1fc0; outline-offset: -1px; }
.dia-cal__dia--vacio { background: #e0e0e0; border-color: #bdbdbd; }
.dia-cal__dia--vacio .dia-cal__num { color: #9e9e9e; text-shadow: none; font-weight: 600; }   /* el día del mes vecino */
/* inicio de cada período (día de Cartelera, 26): borde rojo grueso */
.dia-cal__dia--periodo { border: 3px solid #c62828; }
@media print { .dia-cal__dia--periodo { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
.dia-cal__franjas { position: absolute; inset: 0; display: flex; flex-direction: column; }
.dia-cal__franjas i { flex: 1; background: #eceff1; border-bottom: 1px solid rgba(255, 255, 255, .6); }
.dia-cal__franjas i:last-child { border-bottom: 0; }
.dia-cal__num { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #111; background: transparent; text-shadow: -1px 0 #fff, 1px 0 #fff, 0 -1px #fff, 0 1px #fff; }
/* Imprimir el diagrama (mes, tabla anual o calendario): solo el diagrama, con sus colores */
.dia-imprimir-titulo { display: none; }
@media print {
    body:has(.dia-tabla-caja, .dia-cal-anio) .menu-lateral, body:has(.dia-tabla-caja, .dia-cal-anio) .app-header,
    body:has(.dia-tabla-caja, .dia-cal-anio) .pestanas, body:has(.dia-tabla-caja, .dia-cal-anio) .filtros,
    body:has(.dia-tabla-caja, .dia-cal-anio) .alert, body:has(.dia-tabla-caja, .dia-cal-anio) .toast,
    .dia-anual__elegir, .dia-anual + .seccion .texto-chico a { display: none !important; }
    .dia-imprimir-titulo { display: block; margin: 0 0 4px; color: #000; font-size: 16px; }
    .dia-imprimir-titulo small { display: block; font-size: 10px; font-weight: 500; color: #333; margin-top: 2px; }
    .dia-imprimir-titulo .dia-color { width: 9px; height: 9px; vertical-align: -1px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    @page { size: A4 portrait; margin: 10mm; }
    html:has(.dia-tabla-caja, .dia-cal-anio), body:has(.dia-tabla-caja, .dia-cal-anio), body:has(.dia-tabla-caja, .dia-cal-anio) .app-main { background: #fff !important; }
    .dia-anual { display: block; }
    .dia-tabla-caja, .dia-cal { box-shadow: none; overflow: visible; break-inside: avoid; }
    /* el año entero en una hoja: 3 meses por fila (4 filas), compactos */
    .dia-cal-anio { grid-template-columns: repeat(3, 58mm); justify-content: space-between; align-items: start; gap: 0; }
    .dia-cal__dia { aspect-ratio: 1; height: auto; }   /* cada día cuadrado: 58 mm / 7 ≈ 8 mm */
    .dia-cal { padding: 0 0 2mm; }
    .dia-anual + .seccion { break-before: page; }      /* el personal, en la hoja siguiente */
    /* 1 mes: uno grande; 2 meses: uno al lado del otro */
    .dia-anual--corto + .seccion { break-before: auto; margin-top: 6mm; }   /* con 1 o 2 meses el personal entra en la misma hoja */
    .dia-cal-anio.dia-cal-anio--n1 { grid-template-columns: 180mm; justify-content: center; }
    .dia-cal-anio.dia-cal-anio--n2 { grid-template-columns: repeat(2, 90mm); }
    .dia-cal-anio--n1 .dia-cal__num { font-size: 22px; } .dia-cal-anio--n2 .dia-cal__num { font-size: 15px; }
    .dia-cal-anio--n1 .dia-cal__titulo, .dia-cal-anio--n2 .dia-cal__titulo { font-size: 16px; }
    .dia-cal-anio--n1 .dia-cal__sem, .dia-cal-anio--n2 .dia-cal__sem { font-size: 11px; }
    .dia-anual + .seccion { padding: 2px 0 0; margin-top: 2mm; box-shadow: none; }
    .dia-anual + .seccion .seccion__titulo { font-size: 10px; margin: 0 0 2px; }
    .dia-anual__personal { grid-template-columns: repeat(3, 1fr); gap: 2px 10px; font-size: 9px; }
    .dia-anual__personal strong, .dia-anual__personal small, .dia-anual__personal p { font-size: 9px; line-height: 1.25; }
    .dia-cal__titulo { font-size: 11px; margin-bottom: 2px; }
    .dia-cal__grilla { gap: 1px; }
    .dia-cal__sem { font-size: 8px; }
    .dia-cal__num { font-size: 11px; }
    .dia-tabla td, .dia-tabla .dia-grupo, .dia-cal__franjas i, .dia-cal__dia, .dia-color, .dia-ref {
        -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media (max-width: 800px) { .dia-anual { grid-template-columns: 1fr; } .dia-anual__elegir { position: static; } }
.pla-reloj { font-variant-numeric: tabular-nums; font-weight: 700; }
.pla-foto__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.pla-foto__grid > div { display: flex; flex-direction: column; background: #f5f7fa; border-radius: 6px; padding: 6px 8px; font-size: .85rem; }
.pla-foto__otros { background: #fff8e1 !important; }
/* Menú lateral: solo en PC (escritorio.css) */
.menu-lateral { display: none; }
/* Logo QM en la barra (manual de marca: versión blanca sobre el azul) */
.app-header__logo { height: 20px; width: auto; flex: 0 0 auto; }
.app-header__title { font-family: var(--f-marca); letter-spacing: .01em; }
/* Vencimiento del precinto con que llega (relevamiento de mantenimiento) */
.venc-estado { margin: 6px 0; padding: 7px 10px; border-radius: 8px; font-size: 14px; font-weight: 600; }
.venc-estado--vencido, .venc-estado--ilegible { background: #fde3de; color: #a3260f; border: 1px solid #f3a99a; }
.venc-estado--ilegible { background: #fff4e5; color: #8a4b00; border-color: #ffd19a; }
.venc-estado--por_vencer { background: #fff3b0; color: #6b4e00; border: 1px solid #f0d35a; }
.venc-estado--vigente { background: #e3f5ea; color: #0b6b33; border: 1px solid #a6dcb9; }
.venc-estado--sin { background: #eceef3; color: #3c3a52; }
/* Equipos por vencer: leyenda amarilla (Ensayos) */
.equipo-estado--aviso { background: #fff3b0; color: #6b4e00; border: 1px solid #f0d35a; border-radius: 6px; padding: 3px 8px; display: inline-block; }

/* Planificación › Tareas en PC (diseño ancho): la grilla de tareas como la tabla del escritorio
   (planificacion.Tareas.COLS = 4): siempre al menos 4 columnas y más si entran; las tareas de
   una misma fila tienen la misma altura. */
@media (min-width: 900px) {
    .layout-ancho .tar-tareas { grid-template-columns: repeat(auto-fill, minmax(min(210px, calc((100% - 24px) / 4)), 1fr));
                                gap: 8px; align-items: stretch; }
    .layout-ancho .tar-tarea { padding: 8px; min-height: 120px; }
    .layout-ancho .tar-tarea__cab strong { font-size: 14px; }
    .layout-ancho .tar-tarea .tar-ind { grid-template-columns: 1fr; gap: 4px; }
    .layout-ancho .tar-tarea .tar-lista { gap: 4px; }
    .layout-ancho .tar-tarea .tar-chip { padding: 4px 6px; gap: 6px; }
    .layout-ancho .tar-tarea .per-foto--chica { width: 28px; height: 28px; font-size: 11px; }
    .layout-ancho .tar-tarea .tar-chip__btn { padding: 2px 3px; font-size: 13px; }
    /* en la tarea: foto y nombre en una línea, los botones debajo */
    .layout-ancho .tar-tarea .tar-chip { row-gap: 0; }
    .layout-ancho .tar-tarea .tar-chip__txt { flex: 1 1 calc(100% - 40px); min-width: 0; }
    .layout-ancho .tar-tarea .tar-chip__btn:first-of-type { margin-left: 30px; }
    /* La tarea elegida = formato de tablet / celular: ocupa todo el ancho y muestra a los disponibles
       como nombres para tocar (en vez de lista desplegable), en tantas columnas como entren */
    .layout-ancho .tar-tareas .tar-tarea.elegida { grid-column: 1 / -1; }
    .layout-ancho .tar-tareas .tar-tarea .tar-pop { position: static; width: auto; min-width: 0; margin: 6px 0;
                                                    box-shadow: none; }
    .layout-ancho .tar-pop__cab .form-control { max-width: 360px; }
    .layout-ancho .tar-pop__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
                                    gap: 6px; max-height: 45vh; }
    .layout-ancho .tar-pop__lista li { min-width: 0; }
    .layout-ancho .tar-pop__item { padding: 7px 10px; background: #e8e6f8; border: 1px solid #cfcaf0; }
    .layout-ancho .tar-pop__item:hover, .layout-ancho .tar-pop__item:focus { background: #cfcaf0; }
    .layout-ancho .tar-pop__item strong { text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .layout-ancho .tar-pop__item small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .layout-ancho .tar-pop__vacio { grid-column: 1 / -1; }
    .layout-ancho .tar-tarea.elegida .tar-ind { grid-template-columns: 160px minmax(0, 480px); }
}