/* ZRA11 / ZRA12 — inventario de RANSA.

   Por que este archivo existe: esas dos paginas se escribieron mezclando clases
   mc01-* reales (card, btn, table, grid, summary) con otras que NO existen en
   mc01-shared.css (page, titlebar, alert, toolbar, tablewrap, tag, empty, bar,
   list, actions, hint, inline). El resultado renderizaba a medias.

   Se definen SOLO las que faltaban, y todas colgando de .mc01-page. Como esa
   clase no existia en el proyecto, nada de lo ya escrito puede verse afectado:
   ninguna pantalla vieja entra por este selector.

   Misma escena y misma paleta que ZRA10: supervisor de almacen, de dia,
   leyendo tablas densas. Claro, neutros teñidos hacia el azul de marca, y el
   unico color saturado marcando estado. Si el cromo compitiera con la fila
   fuera de tolerancia, la diferencia se perderia -- que es justo lo que estas
   pantallas existen para encontrar. */

.mc01-page {
    --t:        oklch(0.24 0.02 255);
    --t2:       oklch(0.50 0.02 255);
    --pap:      oklch(0.99 0.003 255);
    --hueco:    oklch(0.97 0.006 255);
    --linea:    oklch(0.90 0.008 255);
    --acento:   oklch(0.48 0.13 255);
    --bien:     oklch(0.52 0.11 155);
    --bienbg:   oklch(0.96 0.03 155);
    --mal:      oklch(0.52 0.17 25);
    --malbg:    oklch(0.96 0.035 25);
    --aviso:    oklch(0.55 0.12 75);
    --avisobg:  oklch(0.96 0.045 75);

    color: var(--t);
    max-width: 86rem;
    padding: 0 1.5rem 4rem;
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* Cabecera */
.mc01-page .mc01-titlebar { display: flex; align-items: baseline; gap: .75rem; padding: 2rem 0 1.25rem; }
.mc01-page .mc01-titlebar h1 { margin: 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -.015em; }
.mc01-page .mc01-titlebar p { margin: .15rem 0 0; color: var(--t2); font-size: .875rem; }
.mc01-page .mc01-tcode {
    font: 600 .6875rem/1 ui-monospace, monospace; letter-spacing: .12em; color: var(--acento);
    border: 1px solid var(--linea); border-radius: .25rem; padding: .4rem .5rem;
}

/* Bloques. Sin sombras ni tarjetas anidadas: separan por linea y por aire. */
.mc01-page .mc01-card { padding: 1.75rem 0; border: 0; background: none; border-radius: 0; }
.mc01-page .mc01-card + .mc01-card { border-top: 1px solid var(--linea); }
.mc01-page .mc01-card > h2 { margin: 0 0 1rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; }
.mc01-page .mc01-card > h3 { margin: 1.75rem 0 .75rem; font-size: .9375rem; font-weight: 600; }

/* Barra de filtros */
.mc01-page .mc01-toolbar { display: flex; align-items: end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.mc01-page .mc01-toolbar label { display: flex; flex-direction: column; gap: .35rem; }
.mc01-page .mc01-toolbar span { font-size: .75rem; font-weight: 600; color: var(--t2); }

.mc01-page select, .mc01-page input[type="text"], .mc01-page input[type="number"], .mc01-page input:not([type]) {
    min-height: 2.5rem; padding: 0 .625rem; border: 1px solid var(--linea); border-radius: .375rem;
    background: var(--pap); color: var(--t); font: inherit;
    transition: border-color 180ms cubic-bezier(.22,1,.36,1);
}
.mc01-page select:focus-visible, .mc01-page input:focus-visible {
    outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento);
}
.mc01-page input[type="checkbox"] { accent-color: var(--acento); width: 1rem; height: 1rem; }

/* Botones */
.mc01-page .mc01-btn {
    display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1rem;
    border: 1px solid var(--linea); border-radius: .375rem; background: var(--pap); color: var(--t);
    font: 600 .875rem/1 inherit; cursor: pointer;
    transition: background 180ms cubic-bezier(.22,1,.36,1), border-color 180ms cubic-bezier(.22,1,.36,1);
}
.mc01-page .mc01-btn:hover:not(:disabled) { background: var(--hueco); border-color: var(--t2); }
.mc01-page .mc01-btn:disabled { opacity: .4; cursor: not-allowed; }
.mc01-page .mc01-btn.danger { border-color: var(--mal); color: var(--mal); }
.mc01-page .mc01-btn.danger:hover:not(:disabled) { background: var(--malbg); }
.mc01-page .mc01-btn.primary { background: var(--acento); border-color: transparent; color: var(--pap); }
.mc01-page .mc01-btn.primary:hover:not(:disabled) { background: oklch(0.42 0.14 255); }
.mc01-page .mc01-rowactions { display: flex; gap: .4rem; white-space: nowrap; }

/* ── ZRA13: modal de recursos ─────────────────────────────────────────────
   Se abre solo al asignar, y muestra la carga de cada recurso: repartir
   sobre quien ya tiene 400 ubicaciones es como no repartir. */
.zra-modal-fondo {
    position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
    background: oklch(0.24 0.02 255 / 0.45); padding: 1.5rem;
}
.zra-modal {
    width: min(46rem, 100%); max-height: 85vh; overflow: auto;
    background: oklch(0.99 0.003 255); border-radius: .75rem; padding: 1.5rem;
    box-shadow: 0 12px 40px oklch(0.24 0.02 255 / 0.25);
}
.zra-modal header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.zra-modal h3 { margin: 0; font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; }

.zra-recursos { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .75rem; }
.zra-recurso {
    display: flex; flex-direction: column; gap: .15rem; text-align: left; padding: .875rem;
    border: 1px solid oklch(0.90 0.008 255); border-radius: .5rem;
    background: oklch(0.99 0.003 255); cursor: pointer;
    transition: border-color 180ms cubic-bezier(.22,1,.36,1), background 180ms cubic-bezier(.22,1,.36,1);
}
.zra-recurso:hover { background: oklch(0.97 0.006 255); }
.zra-recurso.on { border-color: oklch(0.48 0.13 255); background: oklch(0.96 0.02 255); }
.zra-recurso .cod { font: 600 .9375rem/1.2 ui-monospace, monospace; }
.zra-recurso .nom { font-size: .875rem; }
.zra-recurso .meta { font-size: .75rem; color: oklch(0.50 0.02 255); }
.zra-recurso .carga { margin-top: .35rem; font-size: .75rem; font-weight: 600; color: oklch(0.55 0.12 75); }

/* ── ZRA15: recursos de conteo ────────────────────────────────────────────
   El supervisor entra a esta pantalla por UNA fila: la pistola que quedo
   trabada. Asi que el umbral no se lee, se ve. Tiñe la fila (tr.warn, que ya
   existe), engorda el numero de minutos y la sube al tope de la lista. Lo
   libre, que no reclama nada, baja de peso en vez de sumar otro cartel: en
   una tabla donde todo pesa igual no se encuentra nada. */
.mc01-page .zra-cod { font-family: ui-monospace, monospace; letter-spacing: .01em; }

.mc01-page .mc01-table tr.libre td { color: var(--t2); }
.mc01-page .mc01-table tr.libre .zra-cod { color: var(--t); }

.mc01-page .zra-min { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mc01-page .zra-min.alto { font-weight: 600; color: oklch(0.42 0.11 75); }
.mc01-page .zra-nadie { color: var(--t2); }

/* Quien lo ocupa: usuario arriba, nombre debajo y en gris. */
.mc01-page .zra-quien { display: flex; flex-direction: column; gap: .05rem; line-height: 1.3; }
.mc01-page .zra-quien small { font-size: .6875rem; color: var(--t2); }

/* La regla vigente vive pegada al campo que la cambia, no en otra tarjeta. */
.mc01-page .zra-regla {
    display: flex; align-items: baseline; gap: .5rem; padding: .5rem .875rem;
    border: 1px solid var(--linea); border-radius: .375rem; background: var(--hueco);
}
.mc01-page .zra-regla b {
    font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.mc01-page .zra-regla span { font-size: .8125rem; color: var(--t2); }
.mc01-page .zra-regla.off b { color: var(--t2); }
.mc01-page .zra-num { width: 6.5rem; font-variant-numeric: tabular-nums; }

/* Tablas */
.mc01-page .mc01-tablewrap { overflow-x: auto; border: 1px solid var(--linea); border-radius: .5rem; }
.mc01-page .mc01-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.mc01-page .mc01-table th {
    position: sticky; top: 0; z-index: 1; text-align: left; white-space: nowrap;
    padding: .5rem .75rem; background: var(--hueco); border-bottom: 1px solid var(--linea);
    font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--t2);
}
.mc01-page .mc01-table td { padding: .5rem .75rem; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.mc01-page .mc01-table tr:last-child td { border-bottom: 0; }
.mc01-page .mc01-table tr.sel { background: oklch(0.96 0.02 255); }

/* El estado tiñe la fila entera: es lo que se busca al barrer la lista. */
.mc01-page .mc01-table tr.bad  { background: var(--malbg); }
.mc01-page .mc01-table tr.warn { background: var(--avisobg); }
.mc01-page .mc01-table td.neg { color: var(--mal); font-weight: 600; font-variant-numeric: tabular-nums; }
.mc01-page .mc01-table td.pos { color: var(--bien); font-weight: 600; font-variant-numeric: tabular-nums; }
.mc01-page .mc01-empty { padding: 1.5rem; text-align: center; color: var(--t2); }

.mc01-page .mc01-tag {
    display: inline-block; padding: .1rem .45rem; border-radius: .25rem; background: var(--hueco);
    font-size: .6875rem; font-weight: 600; letter-spacing: .03em; color: var(--t2);
}
/* Pendiente, no diferencia: la ubicacion todavia no se visito. */
.mc01-page .mc01-tag.pend { background: var(--avisobg); color: var(--aviso); }

/*  El comentario del contador. Se acota para que no empuje la grilla: el texto
    completo esta en el title, y lo que importa a la vista es que HAY algo dicho. */
.mc01-page .mc01-table td.mc01-coment {
    max-width: 18rem; font-size: .8125rem; color: var(--t2);
}
.mc01-page .mc01-table td.mc01-coment span,
.mc01-page .mc01-table td.mc01-coment small {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mc01-page .mc01-table td.mc01-coment span { color: var(--t); }

/* Cifras. Rejilla de una linea, sin el cliche del numero gigante con gradiente. */
.mc01-page .mc01-summary {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 1px;
    margin-bottom: 1.25rem; background: var(--linea);
    border: 1px solid var(--linea); border-radius: .5rem; overflow: hidden;
}
.mc01-page .mc01-summary > div { display: flex; flex-direction: column; gap: .1rem; padding: .75rem .875rem; background: var(--pap); }
.mc01-page .mc01-summary b { font-size: 1.375rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.mc01-page .mc01-summary span { font-size: .75rem; color: var(--t2); }
.mc01-page .mc01-summary .bad b  { color: var(--mal); }
.mc01-page .mc01-summary .warn b { color: var(--aviso); }
.mc01-page .mc01-summary .ok b   { color: var(--bien); }

/* Barra de avance */
.mc01-page .mc01-bar { width: 7rem; height: .375rem; border-radius: 999px; background: var(--linea); overflow: hidden; }
.mc01-page .mc01-bar span {
    display: block; height: 100%; border-radius: inherit; background: var(--acento);
    transition: width 420ms cubic-bezier(.22,1,.36,1);
}
.mc01-page .mc01-table small { color: var(--t2); font-size: .6875rem; font-variant-numeric: tabular-nums; }

/* Avisos y texto secundario */
.mc01-page .mc01-alert { padding: .75rem 1rem; margin: 1rem 0; border-radius: .5rem; font-size: .875rem; }
.mc01-page .mc01-alert.success { background: var(--bienbg); color: oklch(0.34 0.09 155); }
.mc01-page .mc01-alert.error   { background: var(--malbg);  color: oklch(0.36 0.13 25); }
.mc01-page .mc01-alert.warn    { background: var(--avisobg); color: oklch(0.37 0.10 75); }
.mc01-page .mc01-alert strong { display: block; }
.mc01-page .mc01-hint { color: var(--t2); font-size: .875rem; margin: .5rem 0 0; max-width: 68ch; }
.mc01-page .mc01-loading { padding: 2rem 0; color: var(--t2); }
.mc01-page .mc01-inline { display: inline-flex; align-items: center; gap: .45rem; font-size: .875rem; color: var(--t2); cursor: pointer; }
.mc01-page .mc01-list { margin: .5rem 0 0; padding-left: 1.1rem; color: var(--t2); font-size: .875rem; }
.mc01-page .mc01-list b { color: var(--t); }

.mc01-page .mc01-actions { display: flex; align-items: end; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }
.mc01-page .mc01-actions label { display: flex; flex-direction: column; gap: .35rem; flex: 1 1 18rem; }
.mc01-page .mc01-actions span { font-size: .75rem; font-weight: 600; color: var(--t2); }

@media (max-width: 40rem) {
    .mc01-page { padding: 0 1rem 3rem; }
    .mc01-page .mc01-toolbar { flex-direction: column; align-items: stretch; }
}

/* ── ZRA12: detalle de un grupo de la conciliación ────────────────────────
   La conciliación se lee por ubicación + código; el desglose por paleta,
   vencimiento, ronda e intento se abre acá. Son trece columnas de
   trazabilidad: con el ancho del modal de recursos entrarían tres. */
.zra-modal.ancho { width: min(76rem, 100%); }

/* El modal hereda el cromo de la página: adentro va una .mc01-table. */
.zra-modal .mc01-tablewrap { overflow-x: auto; border: 1px solid var(--linea); border-radius: .5rem; }
.zra-modal .mc01-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.zra-modal .mc01-table th {
    position: sticky; top: 0; z-index: 1; text-align: left; white-space: nowrap;
    padding: .5rem .75rem; background: var(--hueco); border-bottom: 1px solid var(--linea);
    font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--t2);
}
.zra-modal .mc01-table td { padding: .5rem .75rem; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.zra-modal .mc01-table tr.warn { background: var(--avisobg); }
.zra-modal header p { margin: .15rem 0 0; }

/* Cifras alineadas por la coma: una columna de cantidades que baila no se
   compara de un vistazo, y comparar es lo único que se hace acá. */
.mc01-page .mc01-table td { font-variant-numeric: tabular-nums; }