:root {
    /* Indigo con algo de vida, no el azul apagado de antes. */
    --tinta: #4f46e5;
    --tinta-oscura: #3f37c9;
    --tinta-clara: #eef0ff;
    --tinta-borde: #c7c9f5;

    /* Los neutros van tirados al azul del acento, no a gris puro:
       un gris neutro sobre una pantalla administrativa se ve muerto. */
    --ground: #eef1f7;
    --superficie: #ffffff;
    --superficie-2: #f4f6fb;
    --superficie-3: #e8ecf5;

    --texto: #16192a;
    --texto-2: #39405a;
    --apagado: #667090;

    --linea: #d3daea;
    --linea-fuerte: #b3bdd4;

    --ok: #0a7150;
    --ok-suave: #dcf5ea;
    --ok-borde: #92dcc0;

    --espera: #8a5300;
    --espera-suave: #fdf0d9;
    --espera-borde: #f0cd8e;

    --mal: #b3261e;
    --mal-suave: #fde8e6;
    --mal-borde: #f2b0aa;

    --sombra: 0 1px 2px rgba(22, 25, 42, .06), 0 1px 3px rgba(22, 25, 42, .04);
    --sombra-alta: 0 4px 16px rgba(22, 25, 42, .10);

    --lateral: 232px;
    --radio: 8px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--ground);
    color: var(--texto);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 14.5px;
    -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------ barra lateral */
.barra-lateral {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--lateral);
    background: linear-gradient(180deg, #241f5c 0%, #1b1840 100%);
    color: #d9dbf2;
    display: flex;
    flex-direction: column;
    padding: 22px 0 16px;
}

.marca { padding: 0 20px 24px; }
.marca-alpha { display: block; font-size: 1.32rem; font-weight: 700; color: #fff; letter-spacing: -.02em; }
.marca-sub { display: block; font-size: .7rem; color: #9d9fd4; letter-spacing: .1em; text-transform: uppercase; margin-top: 3px; }

.barra-lateral nav { display: flex; flex-direction: column; gap: 3px; padding: 0 12px; flex: 1; }

.barra-lateral .item {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 13px; border-radius: 7px;
    color: #c2c4e8; text-decoration: none; font-size: .93rem; font-weight: 500;
    transition: background .12s ease, color .12s ease;
}
.barra-lateral .item:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.barra-lateral .item.activo { background: var(--tinta); color: #fff; box-shadow: 0 2px 8px rgba(79, 70, 229, .45); }
.punto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .75; }

.pie-lateral { padding: 16px 20px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.usuario { font-size: .85rem; color: #fff; margin-bottom: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-salir {
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .18); color: #cdd0ef;
    border-radius: 6px; padding: 6px 11px; font-size: .82rem; font-weight: 500; cursor: pointer; width: 100%;
    transition: background .12s ease, color .12s ease;
}
.btn-salir:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* ---------------------------------------------------------------- contenido */
.contenido { margin-left: var(--lateral); min-height: 100vh; }
.contenido-suelto { min-height: 100vh; display: grid; place-items: center; padding: 24px; }

.barra-superior {
    background: var(--superficie);
    border-bottom: 1px solid var(--linea);
    padding: 17px 28px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    box-shadow: var(--sombra);
}
.barra-superior h1 { margin: 0; font-size: 1.3rem; font-weight: 650; letter-spacing: -.018em; }

main { padding: 22px 28px 60px; }

/* ------------------------------------------------------------------ solapas */
.solapas { display: flex; gap: 3px; flex-wrap: wrap; margin-bottom: 16px; border-bottom: 2px solid var(--linea); }
.solapa {
    background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px;
    padding: 10px 16px; font-size: .92rem; font-weight: 500; color: var(--apagado); cursor: pointer;
    display: flex; align-items: center; gap: 8px; border-radius: 6px 6px 0 0;
    transition: color .12s ease, background .12s ease;
}
.solapa:hover { color: var(--tinta); background: var(--tinta-clara); }
.solapa.activa { color: var(--tinta); border-bottom-color: var(--tinta); font-weight: 650; }
.solapa .contador {
    background: var(--superficie-3); border-radius: 999px; padding: 2px 9px;
    font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--texto-2);
}
.solapa.activa .contador { background: var(--tinta); color: #fff; }

/* ------------------------------------------------------------------ filtros */
.panel {
    background: var(--superficie); border: 1px solid var(--linea);
    border-radius: var(--radio); padding: 16px 18px; margin-bottom: 16px;
    box-shadow: var(--sombra);
}
.filtros { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo label { font-size: .71rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--apagado); }
.campo input, .campo select {
    border: 1px solid var(--linea-fuerte); border-radius: 6px; padding: 7px 10px;
    font-size: .89rem; background: var(--superficie); color: var(--texto);
    transition: border-color .12s ease, box-shadow .12s ease;
}
.campo input:hover, .campo select:hover { border-color: var(--apagado); }
.campo input:focus, .campo select:focus {
    outline: none; border-color: var(--tinta); box-shadow: 0 0 0 3px var(--tinta-clara);
}
.campo input:disabled { background: var(--superficie-2); color: var(--apagado); }
.campo.crece { flex: 1 1 220px; }
.campo.crece input { width: 100%; }

/* ------------------------------------------------------------------ botones */
.btn {
    /* El secundario es blanco con borde marcado y texto oscuro: antes se perdia
       contra el fondo y no se leia. */
    border: 1px solid var(--linea-fuerte);
    background: var(--superficie);
    color: var(--texto);
    border-radius: 6px;
    padding: 8px 16px;
    font-size: .89rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    box-shadow: var(--sombra);
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover:not(:disabled) { background: var(--tinta-clara); border-color: var(--tinta); color: var(--tinta-oscura); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--tinta-clara), 0 0 0 1px var(--tinta); }

.btn-primario { background: var(--tinta); border-color: var(--tinta); color: #fff; box-shadow: 0 1px 3px rgba(79, 70, 229, .35); }
.btn-primario:hover:not(:disabled) { background: var(--tinta-oscura); border-color: var(--tinta-oscura); color: #fff; }

.btn-peligro { background: var(--mal); border-color: var(--mal); color: #fff; box-shadow: 0 1px 3px rgba(179, 38, 30, .3); }
.btn-peligro:hover:not(:disabled) { background: #8f1d17; border-color: #8f1d17; color: #fff; }

/* Los de la grilla: chicos pero legibles. Antes eran demasiado tenues. */
.btn-chico { padding: 5px 11px; font-size: .8rem; font-weight: 600; border-radius: 5px; }

/* ------------------------------------------------------------------- grilla */
.tabla-caja {
    background: var(--superficie); border: 1px solid var(--linea);
    border-radius: var(--radio); overflow: auto; box-shadow: var(--sombra);
}
table.grilla { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 940px; }

/* Los valores van centrados; la unica que queda a la izquierda es la columna de
   texto largo, que centrada deja los bordes hechos un desastre. */
table.grilla th, table.grilla td {
    padding: 10px 12px; text-align: center; border-bottom: 1px solid var(--linea); vertical-align: middle;
}
table.grilla th.izq, table.grilla td.izq { text-align: left; }

/* Los botones de accion alineados al borde: si van centrados, cada fila los deja
   en un lugar distinto segun cuantos tenga. */
table.grilla th.acciones, table.grilla td.acciones { text-align: right; white-space: nowrap; }

table.grilla thead th {
    background: var(--superficie-2); color: var(--texto-2); font-size: .71rem;
    text-transform: uppercase; letter-spacing: .08em; font-weight: 700; white-space: nowrap;
    position: sticky; top: 0; z-index: 1; border-bottom: 2px solid var(--linea);
}
table.grilla thead th.ordenable { cursor: pointer; user-select: none; }
table.grilla thead th.ordenable:hover { color: var(--tinta); background: var(--tinta-clara); }
table.grilla tbody tr { transition: background .1s ease; }
table.grilla tbody tr:hover { background: var(--tinta-clara); }
table.grilla tbody tr:last-child td { border-bottom: none; }

/* La fila entera abre el detalle: tiene que verse que se puede clickear. */
tr.fila-detalle { cursor: pointer; }
tr.fila-detalle td:first-child { position: relative; }
tr.fila-detalle:hover td:first-child::before,
tr.fila-detalle:focus-visible td:first-child::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--tinta);
}
tr.fila-detalle:focus-visible { outline: 2px solid var(--tinta); outline-offset: -2px; background: var(--tinta-clara); }

/* Los controles no disparan el detalle, así que tampoco muestran su cursor. */
tr.fila-detalle .acciones, tr.fila-detalle input[type="checkbox"] { cursor: default; }
tr.fila-detalle .acciones .btn { cursor: pointer; }

td.numero { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }
td.mono { font-family: Consolas, "SF Mono", monospace; font-size: .83rem; white-space: nowrap; }
.vacio { padding: 48px 16px; text-align: center; color: var(--apagado); }
.leve { color: var(--apagado); font-weight: 400; }

/* ------------------------------------------------------------------ estados */
.pastilla {
    display: inline-block; font-size: .73rem; font-weight: 700; letter-spacing: .02em;
    padding: 3px 11px; border-radius: 999px; border: 1px solid; white-space: nowrap;
}
.pastilla.Pendiente { color: var(--texto-2); background: var(--superficie-3); border-color: var(--linea-fuerte); }
.pastilla.Procesando { color: var(--espera); background: var(--espera-suave); border-color: var(--espera-borde); }
.pastilla.Finalizada { color: var(--ok); background: var(--ok-suave); border-color: var(--ok-borde); }
.pastilla.ConError { color: var(--mal); background: var(--mal-suave); border-color: var(--mal-borde); }

.etiqueta-vigilancia {
    display: inline-block; font-size: .66rem; text-transform: uppercase; letter-spacing: .06em;
    font-weight: 700; background: var(--espera-suave); color: var(--espera);
    border: 1px solid var(--espera-borde);
    padding: 2px 8px; border-radius: 999px; white-space: nowrap; margin-left: 4px;
}

/* ----------------------------------------------------------------- progreso */
.progreso-lote {
    position: sticky; top: 0; z-index: 20;
    background: var(--superficie); border: 1px solid var(--tinta); border-left: 4px solid var(--tinta);
    border-radius: var(--radio); padding: 14px 18px; margin-bottom: 16px;
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    box-shadow: var(--sombra-alta);
}
.progreso-lote .barra { flex: 1 1 220px; height: 8px; background: var(--superficie-3); border-radius: 999px; overflow: hidden; }
.progreso-lote .relleno { height: 100%; background: linear-gradient(90deg, var(--tinta), #7c74f0); transition: width .3s ease; }
.progreso-lote .cifras { font-size: .85rem; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.progreso-lote .cifras b { color: var(--texto); }

/* ------------------------------------------------------------- configuración */
.titulo-seccion { font-size: 1.08rem; font-weight: 700; margin: 0 0 4px; letter-spacing: -.012em; }
.bajada-seccion { color: var(--apagado); font-size: .89rem; margin: 0 0 16px; max-width: 68ch; }
.encabezado-seccion { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.nota { font-size: .83rem; color: var(--apagado); margin: 10px 0 0; max-width: 68ch; }
.nota-alerta { color: var(--espera); font-weight: 500; }
.etiqueta-defecto {
    display: inline-block; font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700;
    background: var(--tinta-clara); color: var(--tinta-oscura); border: 1px solid var(--tinta-borde);
    padding: 2px 8px; border-radius: 999px; margin-left: 4px;
}
section.panel { margin-bottom: 18px; }

/* --------------------------------------------------------------- pie y aviso */
.pie-grilla { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 2px; flex-wrap: wrap; }
.pie-grilla .info { font-size: .85rem; color: var(--apagado); font-variant-numeric: tabular-nums; }

.aviso {
    border-radius: var(--radio); padding: 12px 16px; margin-bottom: 16px; font-size: .9rem;
    border: 1px solid; border-left-width: 4px; box-shadow: var(--sombra);
}
.aviso-error { background: var(--mal-suave); border-color: var(--mal-borde); border-left-color: var(--mal); color: #8f1d17; }
.aviso-ok { background: var(--ok-suave); border-color: var(--ok-borde); border-left-color: var(--ok); color: #06553b; }
.aviso-info { background: var(--tinta-clara); border-color: var(--tinta-borde); border-left-color: var(--tinta); color: #3730a3; }

/* ------------------------------------------------------------------- ingreso */
.caja-login {
    background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px;
    padding: 34px 34px; width: min(410px, 100%); box-shadow: var(--sombra-alta);
    border-top: 4px solid var(--tinta);
}
.caja-login h1 { font-size: 1.35rem; margin: 0 0 5px; letter-spacing: -.02em; }
.caja-login .bajada { color: var(--apagado); font-size: .89rem; margin: 0 0 24px; }
.caja-login .campo { margin-bottom: 16px; }
.caja-login .campo input { width: 100%; padding: 10px 12px; }
.caja-login .btn { width: 100%; padding: 11px; font-size: .95rem; }

/* --------------------------------------------------------------------- modal */
.modal-content { border-radius: 10px; border: 1px solid var(--linea); box-shadow: var(--sombra-alta); }
.modal-header { border-bottom: 1px solid var(--linea); background: var(--superficie-2); border-radius: 10px 10px 0 0; }
.modal-footer { border-top: 1px solid var(--linea); }
.modal-body { background: var(--ground); }
.modal-title { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 1.02rem; font-weight: 650; }
.detalle-id {
    font-family: Consolas, monospace; background: var(--superficie-3); color: var(--texto-2);
    padding: 2px 9px; border-radius: 5px; font-size: .88rem; font-weight: 700;
}

/* La banda que explica, en una línea, por qué la factura está donde está. */
.banda-estado {
    border-radius: var(--radio); padding: 14px 16px; margin-bottom: 16px;
    border: 1px solid; border-left-width: 4px; background: var(--superficie);
}
.banda-titulo { font-weight: 700; font-size: .95rem; margin-bottom: 3px; }
.banda-texto { font-size: .88rem; color: var(--texto-2); max-width: 70ch; }
.banda-motivo {
    margin-top: 10px; padding: 9px 12px; border-radius: 6px;
    background: rgba(0, 0, 0, .04); font-size: .85rem; color: var(--texto);
    font-family: Consolas, "SF Mono", monospace; line-height: 1.5;
}
.banda-ok { border-color: var(--ok-borde); border-left-color: var(--ok); }
.banda-ok .banda-titulo { color: var(--ok); }
.banda-error { border-color: var(--mal-borde); border-left-color: var(--mal); }
.banda-error .banda-titulo { color: var(--mal); }
.banda-espera { border-color: var(--espera-borde); border-left-color: var(--espera); }
.banda-espera .banda-titulo { color: var(--espera); }
.banda-info { border-color: var(--tinta-borde); border-left-color: var(--tinta); }
.banda-info .banda-titulo { color: var(--tinta-oscura); }
.banda-neutro { border-color: var(--linea-fuerte); border-left-color: var(--apagado); }
.banda-neutro .banda-titulo { color: var(--texto-2); }

/* El CAE es el dato que la gente viene a buscar: va destacado y no en una tabla. */
.caja-cae {
    display: flex; gap: 28px; flex-wrap: wrap; align-items: center;
    background: var(--ok-suave); border: 1px solid var(--ok-borde);
    border-radius: var(--radio); padding: 13px 18px; margin-bottom: 16px;
}
.caja-cae .etiqueta { display: block; margin-bottom: 2px; }
.cae-numero { font-family: Consolas, monospace; font-size: 1.12rem; font-weight: 700; color: var(--ok); letter-spacing: .02em; }

.fichas { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 18px; }
@media (min-width: 620px) { .fichas { grid-template-columns: 1fr 1fr; } }

.ficha { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px 16px; }
.ficha-titulo {
    font-size: .69rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
    color: var(--tinta); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--linea);
}
.ficha-fila { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; align-items: baseline; }
.ficha-fila + .ficha-fila { border-top: 1px dotted var(--linea); }

.modal-body .etiqueta {
    font-size: .71rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
    color: var(--apagado); white-space: nowrap;
}
.modal-body .valor { font-size: .9rem; text-align: right; font-weight: 500; }

.titulo-historial {
    font-size: .69rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
    color: var(--apagado); margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.titulo-historial .contador {
    background: var(--superficie-3); color: var(--texto-2); border-radius: 999px;
    padding: 1px 8px; font-size: .72rem;
}
.sin-intentos { color: var(--apagado); font-size: .89rem; }

table.tabla-intentos { min-width: 0; font-size: .85rem; }
table.tabla-intentos tbody tr:hover { background: transparent; }
table.tabla-intentos tbody tr:not(.fila-motivo):hover { background: var(--tinta-clara); }
table.tabla-intentos .relativo { color: var(--apagado); font-size: .8rem; }

/* El motivo va en su propia fila, pegado al intento que lo produjo. */
tr.fila-motivo td {
    border-bottom: 1px solid var(--linea); padding-top: 0; padding-bottom: 10px;
    font-size: .82rem; color: var(--mal); line-height: 1.5;
}
tr.fila-motivo td[colspan]::before { content: "↳ "; color: var(--apagado); }

@media (max-width: 820px) {
    .barra-lateral { position: static; width: auto; flex-direction: row; align-items: center; padding: 12px 16px; }
    .barra-lateral nav { flex-direction: row; padding: 0; flex: 1; }
    .marca { padding: 0 18px 0 0; }
    .marca-sub { display: none; }
    .pie-lateral { border: none; padding: 0; display: flex; gap: 10px; align-items: center; }
    .btn-salir { width: auto; }
    .contenido { margin-left: 0; }
    main { padding: 16px; }
    .barra-superior { padding: 14px 16px; }
}