/* Modulo de cotizaciones - enlix.pe */

:root {
    --azul: #1e40af;
    --azul-vivo: #2563eb;
    --azul-claro: #eff6ff;
    --texto: #111827;
    --tenue: #6b7280;
    --borde: #e5e7eb;
    --fondo: #f6f7f9;
    --verde: #059669;
    --rojo: #dc2626;
    --ambar: #b45309;

    /* Sombras suaves: dan profundidad sin el efecto "caja pesada" que
       produce un borde marcado en cada tarjeta. */
    --sombra-1: 0 1px 2px rgba(16, 24, 40, .05);
    --sombra-2: 0 1px 3px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04);
    --sombra-3: 0 4px 12px rgba(16, 24, 40, .08);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--fondo);
    color: var(--texto);
    font-size: 14px;
    line-height: 1.5;
}

/* --- Barra superior --- */
.barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 26px;
    background: #fff;
    border-bottom: 1px solid var(--borde);
    /* Fija: en listados largos deja la accion principal siempre a mano. */
    position: sticky;
    top: 0;
    z-index: 30;
    box-shadow: var(--sombra-1);
}

.marca {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--azul);
    text-decoration: none;
    font-size: 15.5px;
    letter-spacing: -.01em;
}
.barra nav { display: flex; align-items: center; gap: 14px; }
.barra nav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--tenue);
    text-decoration: none;
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 6px;
}
.barra nav a:hover { color: var(--azul); background: var(--azul-claro); }
.barra nav a.btn-primario { color: #fff; }
.barra nav a.btn-primario:hover { color: #fff; background: #1e3a8a; }

/* El listado se lee mejor contenido: en un monitor ancho, estirar 8 columnas
   a 1700px deja huecos enormes y obliga a barrer la vista de lado a lado. */
.contenedor { max-width: 1280px; margin: 26px auto; padding: 0 24px; }

/* El formulario si necesita todo el ancho: su tabla tiene 19 columnas y con
   menos espacio el Total linea queda fuera de pantalla. */
.contenedor-ancho { max-width: 1700px; }

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

/* --- Botones --- */
.btn {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid var(--borde);
    border-radius: 6px;
    background: #fff;
    color: var(--texto);
    text-decoration: none;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
}
.btn:hover { background: var(--fondo); }
.btn-primario { background: var(--azul); border-color: var(--azul); color: #fff; }
.btn-primario:hover { background: #1e3a8a; }
.btn-peligro { color: var(--rojo); border-color: #fecaca; }
.btn-peligro:hover { background: #fef2f2; }
.btn-sm { padding: 4px 8px; font-size: 12px; }

/* --- Tarjetas --- */
.tarjeta {
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 10px;
    padding: 22px 24px;
    margin-bottom: 18px;
    box-shadow: var(--sombra-2);
}
.tarjeta h2 {
    display: flex;
    align-items: center;
    /* En flex los nodos de texto en blanco no se renderizan, asi que sin
       gap el titulo queda pegado a la aclaracion: "ITEMS— las celdas...". */
    gap: 6px;
    margin: 0 0 18px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tenue);
    font-weight: 700;
}

/* --- Formularios --- */
.grid { display: grid; gap: 14px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

label { display: block; font-weight: 600; font-size: 12px; margin-bottom: 4px; color: var(--tenue); }
.obligatorio { color: var(--rojo); }

/* Error de campo: se muestra bajo el input, en cuanto el usuario sale de
   el, y dice que corregir en concreto. */
.error-campo {
    margin: 5px 0 0;
    font-size: 12px;
    color: var(--rojo);
    display: flex;
    align-items: center;
    gap: 4px;
}
.error-campo::before { content: "⚠"; font-size: 11px; }
input[aria-invalid="true"] { border-color: var(--rojo); background: #fffafa; }
input[aria-invalid="true"]:focus { outline-color: #fecaca; }

/* Giro del icono mientras se guarda. */
@keyframes girar { to { transform: rotate(360deg); } }
.girando { display: inline-flex; animation: girar .9s linear infinite; }
@media (prefers-reduced-motion: reduce) {
    .girando { animation: none; }
}

/* Enumerar cada type es fragil: uno nuevo se queda sin estilo y sale
   angosto. Se excluyen solo los que no son campos de texto.
   Va dentro de :where() para que la regla no aporte especificidad: con
   :not() suelto sumaba (0,4,1) y le ganaba a ajustes puntuales como el
   padding de la lupa del buscador. */
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"])),
select, textarea {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--borde);
    border-radius: 5px;
    font-size: 13px;
    font-family: inherit;
    background: #fff;
    color: var(--texto);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--azul-claro); border-color: var(--azul); }
input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
textarea { resize: vertical; min-height: 70px; }

/* --- Tablas --- */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 7px 8px; text-align: left; border-bottom: 1px solid #eef0f3; }
th {
    background: var(--fondo);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tenue);
    font-weight: 700;
    white-space: nowrap;
}
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: none; }

/* La tabla del listado va a sangre dentro de la tarjeta: los bordes
   laterales de la tarjeta ya la delimitan.
   El margen negativo va en el CONTENEDOR, no en la tabla: puesto en la
   tabla la dejaba 48px mas ancha que su caja y aparecia una barra de
   scroll horizontal permanente. */
.tabla-sangre { margin: 0 -24px; }
.tabla-sangre .tabla-listado { width: 100%; }
.tabla-listado th:first-child, .tabla-listado td:first-child { padding-left: 24px; }
.tabla-listado th:last-child,  .tabla-listado td:last-child  { padding-right: 24px; }

.tabla-scroll { overflow-x: auto; position: relative; }

/* Ocupa todo el ancho disponible: si sobra espacio las columnas se
   reparten en vez de dejar un hueco muerto a la derecha. */
.tabla-items { width: 100%; }
.tabla-items input, .tabla-items select { padding: 5px 6px; font-size: 12px; min-width: 58px; }
.tabla-items input[type="checkbox"] { min-width: auto; }
.tabla-items th, .tabla-items td { padding: 6px 5px; }

/* En pantallas angostas la tabla sigue scrolleando, pero el Total linea y los
   botones quedan clavados a la derecha: son lo que el vendedor necesita ver
   mientras escribe. */
.tabla-items th:last-child,
.tabla-items td:last-child {
    position: sticky;
    right: 0;
    min-width: 84px;
    background: #fff;
    /* z-index alto: sin esto las columnas que pasan por debajo se asoman. */
    z-index: 3;
    box-shadow: -6px 0 6px -6px rgba(0, 0, 0, .18);
}
.tabla-items th:nth-last-child(2),
.tabla-items td:nth-last-child(2) {
    position: sticky;
    right: 84px;
    min-width: 84px;
    background: var(--azul-claro);
    z-index: 2;
}
.tabla-items thead th:last-child,
.tabla-items thead th:nth-last-child(2) { background: var(--fondo); }

/* ---------------------------------------------------------------
   Look de hoja de calculo: replica el Bloque 2 del Excel original
   para que el vendedor reconozca la tabla que ya venia usando.
   --------------------------------------------------------------- */
/* Amarillo algo mas suave que el del Excel: se sigue reconociendo pero no
   vibra ni cansa la vista en una tabla de 19 columnas. */
.tabla-excel th {
    background: #fde047;
    color: #422006;
    border: 1px solid #e3c200;
    text-align: center;
    text-transform: none;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0;
    vertical-align: middle;
    padding: 7px 5px;
    position: sticky;
    top: 0;
    z-index: 4;
}
.tabla-excel td { border: 1px solid var(--borde); text-align: center; }
.tabla-excel thead th:last-child,
.tabla-excel thead th:nth-last-child(2) { background: #fde047; z-index: 6; }

/* Fila de leyenda: dice si la columna es Variable, Fija u Opcional. */
.tabla-excel .reglas td {
    background: #fffbe6;
    color: #8a6d00;
    font-size: 10px;
    line-height: 1.25;
    font-style: italic;
    padding: 4px 3px;
}
.tabla-excel .reglas td b { font-style: normal; }
.tabla-excel .reglas td:last-child,
.tabla-excel .reglas td:nth-last-child(2) { background: #fffbe6; }

/* Las celdas opcionales llevan el check pegado al monto. */
.tabla-excel .opcional label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    color: inherit;
    cursor: pointer;
}
.tabla-excel .opcional input[type="checkbox"] { margin: 0; cursor: pointer; }

/* Ganancia: el selector arriba, el monto calculado debajo. */
.tabla-excel td.calculado select { margin-bottom: 3px; }

/* ---------------------------------------------------------------
   Campos de dinero
   --------------------------------------------------------------- */

/* Las flechitas de los input[type=number] multiplicadas por 5 columnas
   ensucian toda la tabla y se pulsan sin querer. */
.tabla-items input[type="number"]::-webkit-outer-spin-button,
.tabla-items input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.tabla-items input[type="number"] { -moz-appearance: textfield; }

/* Los importes se leen mejor alineados a la derecha y en cifras de ancho
   fijo: las columnas de numeros quedan comparables de un vistazo. */
.tabla-items input.dinero {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.tabla-items input::placeholder { color: #cbd5e1; }

/* El foco tiene que cantar: son 19 columnas y hay que saber donde se esta. */
.tabla-items input:focus,
.tabla-items select:focus {
    outline: 2px solid var(--azul);
    outline-offset: -1px;
    background: #fffef5;
    position: relative;
    z-index: 1;
}

/* La fila entera se resalta al escribir en ella. */
.tabla-items tbody tr:focus-within td { background: #fffdf0; }
.tabla-items tbody tr:focus-within td.calculado { background: #e8f0fe; }

/* ---------------------------------------------------------------
   Panel de totales del formulario
   --------------------------------------------------------------- */
.panel-totales {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--borde);
}
.panel-totales-nota {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    color: var(--tenue);
    max-width: 340px;
    line-height: 1.45;
}
.panel-totales-nota .ico { flex-shrink: 0; margin-top: 2px; }
.panel-totales .totales { margin: 0; }
.panel-totales .totales div { padding: 4px 0; }

/* ---------------------------------------------------------------
   Barra fija de guardado
   --------------------------------------------------------------- */
.barra-guardar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 20px -24px 0;
    padding: 14px 24px;
    /* Opaco: con transparencia se leia el texto de la tarjeta por debajo. */
    background: #fff;
    border-top: 1px solid var(--borde);
    box-shadow: 0 -4px 14px rgba(15, 23, 42, .07);
}
/* Solo la etiqueta va en bloque. Sin el ">" tambien afectaba a los span
   internos del importe y partia "S/" y la cifra en dos lineas. */
.barra-guardar-total > span {
    display: block;
    font-size: 11px;
    color: var(--tenue);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.barra-guardar-total strong {
    font-size: 20px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.barra-guardar-acciones { display: flex; gap: 8px; }

.calculado { background: var(--azul-claro); color: var(--azul); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* --- Avisos --- */
.aviso { padding: 12px 14px; border-radius: 6px; margin-bottom: 20px; }
.aviso-error { background: #fef2f2; border: 1px solid #fecaca; color: var(--rojo); }
.aviso-ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: var(--verde); }
.aviso-info { background: var(--azul-claro); border: 1px solid #bfdbfe; color: var(--azul); }

/* --- Totales --- */
.totales { margin-left: auto; width: 320px; }
.totales div { display: flex; justify-content: space-between; padding: 6px 0; }
.totales .grande { border-top: 2px solid var(--texto); margin-top: 6px; padding-top: 10px; font-size: 17px; font-weight: 700; }

.etiqueta { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--fondo); color: var(--tenue); }

.vacio { text-align: center; padding: 48px 20px; color: var(--tenue); }
.pista { font-size: 11px; color: var(--tenue); font-weight: 400; }

/* Valores fijos del emisor: se ven, pero se nota que no son editables. */
.fijo {
    padding: 7px 9px;
    background: var(--fondo);
    border: 1px dashed var(--borde);
    border-radius: 5px;
    font-size: 13px;
    color: var(--texto);
}
.fijo + .fijo { margin-top: 6px; }
.fijo-fila { display: flex; justify-content: space-between; gap: 10px; }
.fijo-fila strong { font-variant-numeric: tabular-nums; }
.fijo-firma { line-height: 1.45; }
.firma-preview { display: block; max-height: 56px; margin-bottom: 2px; }
.fijo-linea { border-top: 1px solid var(--texto); margin: 0 0 6px; }
code {
    background: var(--fondo);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 12px;
    /* Sin esto, un token largo como APP_ACCESO_LIBRE=false no puede partirse
       y fuerza el ancho minimo de la pagina entera en un movil. */
    overflow-wrap: anywhere;
}

/* =====================================================================
   Iconos
   ===================================================================== */
.ico { vertical-align: -0.18em; flex-shrink: 0; }
.ico-tenue { color: var(--tenue); }
.ico-vacio { color: #cbd5e1; margin-bottom: 10px; }
.btn .ico { margin-right: 5px; }
.btn .ico:only-child { margin-right: 0; }
label .ico { margin-right: 3px; vertical-align: -0.15em; }
h2 .ico { color: var(--azul); vertical-align: -0.15em; }
.con-ico { display: inline-flex; align-items: center; gap: 6px; }
[x-cloak] { display: none !important; }

/* Botones que son solo un icono, para la columna de acciones. */
.acciones { display: flex; align-items: center; gap: 4px; }
.acciones form { display: inline-flex; margin: 0; }
.btn-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--borde);
    border-radius: 6px;
    background: #fff;
    color: var(--tenue);
    cursor: pointer;
    text-decoration: none;
    padding: 0;
}
.btn-ico:hover { background: var(--azul-claro); color: var(--azul); border-color: #bfdbfe; }
.btn-ico-peligro:hover { background: #fef2f2; color: var(--rojo); border-color: #fecaca; }
.btn-activo { background: var(--azul-claro); border-color: #bfdbfe; color: var(--azul); }

/* =====================================================================
   Tarjetas de resumen
   ===================================================================== */
.tarjetas-resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.resumen {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 10px;
    padding: 16px 18px;
    box-shadow: var(--sombra-2);
    overflow: hidden;
}
/* Franja de color a la izquierda: distingue las tres metricas de un
   vistazo sin recargar la tarjeta. */
.resumen::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--azul-vivo);
}
.resumen:nth-child(2)::before { background: var(--azul-vivo); }
.resumen:nth-child(3)::before { background: var(--verde); }
.resumen:nth-child(4)::before { background: #7c3aed; }

.resumen-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 9px;
    background: var(--azul-claro);
    color: var(--azul);
    flex-shrink: 0;
}
.resumen:nth-child(3) .resumen-ico { background: #ecfdf5; color: var(--verde); }
.resumen:nth-child(4) .resumen-ico { background: #f5f3ff; color: #7c3aed; }

.resumen-valor {
    display: block;
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    line-height: 1.25;
    /* Los importes con dos monedas se parten en dos lineas antes que
       desbordar la tarjeta. */
    overflow-wrap: anywhere;
}
.resumen-etq { display: block; font-size: 11px; color: var(--tenue); margin-top: 2px; }

/* =====================================================================
   Buscador y filtros
   ===================================================================== */
.barra-busqueda { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.campo-busqueda { position: relative; flex: 1; min-width: 260px; }
.campo-busqueda .icono-campo {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tenue);
    pointer-events: none;
    display: flex;
}
/* Especificidad alta a proposito: la regla general de inputs usa varios
   :not() y le ganaba a este padding, dejando la lupa encima del texto. */
.campo-busqueda input[type="search"] { padding-left: 32px; }

.panel-filtros {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--borde);
}
/* Punto que avisa que hay filtros activos. */
.punto {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--azul);
    margin-left: 5px;
    vertical-align: middle;
}

/* Encabezados ordenables */
.orden { color: inherit; text-decoration: none; display: inline-block; }
.orden:hover { color: var(--azul); }

.tabla-listado td { padding: 11px 8px; vertical-align: middle; }
.tabla-listado tbody tr { transition: background .12s; }
.tabla-listado tbody tr:hover { background: #f8fafc; }
.mono { font-variant-numeric: tabular-nums; }
.tenue { color: var(--tenue); }

/* El numero de cotizacion es el identificador que el vendedor canta por
   telefono: conviene que salte a la vista. */
.folio {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 5px;
    background: var(--azul-claro);
    color: var(--azul);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
}
.monto { font-size: 14px; font-variant-numeric: tabular-nums; }

/* =====================================================================
   Modal de confirmacion
   ===================================================================== */
.modal-fondo {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 100;
}
.modal {
    background: #fff;
    border-radius: 10px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
    overflow: hidden;
}
.modal-cabecera {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    background: #fef2f2;
    border-bottom: 1px solid #fecaca;
}
.modal-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fee2e2;
    color: var(--rojo);
    flex-shrink: 0;
}
.modal-cabecera strong { display: block; font-size: 15px; color: #991b1b; }
.modal-cabecera span { font-size: 12px; color: #b91c1c; }

.modal-cuerpo { padding: 18px 20px; font-size: 13px; }
.modal-cuerpo > p:first-child { margin: 0 0 12px; color: var(--tenue); }

.modal-datos { width: 100%; }
.modal-datos td { padding: 5px 0; border-bottom: 1px solid var(--borde); }
.modal-datos tr:last-child td { border-bottom: none; }
.modal-datos td:first-child { color: var(--tenue); width: 34%; }
.modal-datos td:last-child { text-align: right; word-break: break-word; }

.modal-pie {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    background: var(--fondo);
    border-top: 1px solid var(--borde);
}
.modal-pie form { margin: 0; }

.btn-peligro-solido {
    background: var(--rojo);
    border-color: var(--rojo);
    color: #fff;
}
.btn-peligro-solido:hover { background: #b91c1c; border-color: #b91c1c; }

/* =====================================================================
   Modal de detalle
   ===================================================================== */
.modal-ancho { max-width: 900px; }

/* Casi pantalla completa: el formulario lleva una tabla de 19 columnas y
   en un modal estrecho seria inusable. */
.modal-completo {
    max-width: 1700px;
    width: 96vw;
    height: 94vh;
    display: flex;
    flex-direction: column;
}
.modal-cuerpo-form {
    flex: 1;
    /* Solo vertical: el scroll horizontal lo maneja la tabla de items en su
       propio contenedor, no el modal entero. */
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 18px 0;
    background: var(--fondo);
}
/* Dentro del modal las tarjetas del formulario no necesitan sombra: ya
   estan sobre una superficie elevada. Y van mas compactas: el alto util
   es el del modal, no el de la pagina. */
.modal-cuerpo-form .tarjeta {
    box-shadow: none;
    padding: 16px 18px;
    margin-bottom: 12px;
}
.modal-cuerpo-form .tarjeta h2 { margin-bottom: 14px; }
.modal-cuerpo-form .grid { gap: 12px; }

/* Con un modal abierto el fondo no debe desplazarse: al hacer scroll
   dentro del formulario, si se llega al final el gesto arrastraba la
   pagina de atras. */
body.sin-scroll { overflow: hidden; }
/* La barra de guardar se pega al fondo del area scrolleable del modal.
   Los margenes negativos igualan el padding del contenedor: con -20px
   contra 18px sobresalia 2px por lado y aparecia scroll horizontal. */
.modal-cuerpo-form .barra-guardar {
    margin: 16px -18px 0;
    padding: 14px 18px;
}

/* Velo de guardado: evita doble envio y da senal de que algo pasa. */
.modal-velo {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .78);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--azul);
    border-radius: 10px;
    z-index: 5;
}
.modal { position: relative; }

.modal-cabecera-neutra {
    background: #fff;
    border-bottom: 1px solid var(--borde);
    position: relative;
}
.modal-cabecera-neutra strong { color: var(--texto); }
.modal-cabecera-neutra span { color: var(--tenue); }
.modal-ico-azul { background: var(--azul-claro); color: var(--azul); }

.modal-cerrar {
    position: absolute;
    top: 14px;
    right: 14px;
    border: none;
    background: none;
    color: var(--tenue);
    cursor: pointer;
    padding: 4px;
    line-height: 0;
    border-radius: 5px;
}
.modal-cerrar:hover { background: var(--fondo); color: var(--texto); }

/* El detalle puede ser largo: scroll dentro del modal y no en la pagina. */
.modal-cuerpo-scroll { max-height: 65vh; overflow-y: auto; }

.det-cargando { color: var(--tenue); text-align: center; padding: 32px 0; }

/* Franja superior: el total y los cuatro datos que se miran primero. */
.det-hero {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    background: var(--fondo);
    border: 1px solid var(--borde);
    border-radius: 9px;
    padding: 14px 18px;
    margin-bottom: 18px;
}
.det-hero-total { min-width: 150px; }
.det-hero-total > span {
    display: block;
    font-size: 10.5px;
    color: var(--tenue);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.det-hero-total > strong {
    font-size: 26px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    line-height: 1.2;
    white-space: nowrap;
}
.det-hero-datos {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    margin-left: auto;
}
.det-hero-datos > div { min-width: 0; }
/* Solo la etiqueta directa. Sin el ">" tambien alcanzaba al span de la
   insignia de estado y le quitaba la pastilla. */
.det-hero-datos > div > span {
    display: block;
    font-size: 10.5px;
    color: var(--tenue);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 3px;
}
.det-hero-datos strong { display: block; font-size: 13.5px; font-weight: 600; }
.det-hero-datos strong .etiqueta { font-size: 11px; }
.det-hero-datos em {
    display: block;
    font-style: normal;
    font-size: 11px;
    margin-top: 2px;
}
.det-vencida { color: var(--rojo); font-weight: 700; }
.det-porvencer { color: var(--ambar); font-weight: 700; }

.det-columnas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.det-bloque { margin-bottom: 18px; }
.det-bloque h4 {
    margin: 0 0 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tenue);
    font-weight: 700;
}
.det-bloque h4 .ico { color: var(--azul); margin-right: 4px; }
.det-destacado { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.det-texto { margin: 0; font-size: 13px; line-height: 1.55; }

/* Pares etiqueta-valor.
   La etiqueta lleva ancho fijo y el valor se alinea a la izquierda pegado
   a ella: justificarlos a los extremos abria huecos enormes y obligaba a
   recorrer la linea con la vista para emparejarlos. */
.det-bloque dl {
    display: grid;
    grid-template-columns: 108px 1fr;
    gap: 6px 10px;
    margin: 0;
    font-size: 13px;
}
.det-bloque dt { color: var(--tenue); }
.det-bloque dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

.det-tabla { font-size: 12.5px; }
.det-tabla th {
    background: var(--fondo);
    font-size: 10.5px;
    padding: 7px 8px;
    white-space: nowrap;
}
.det-tabla td { padding: 8px; vertical-align: top; }
.det-tabla .num { font-variant-numeric: tabular-nums; }
.det-tabla-interna { font-size: 11.5px; }
.det-tabla-interna td, .det-tabla-interna th { padding: 5px 6px; }

.det-totales {
    margin: 12px 0 0 auto;
    width: 260px;
    font-size: 13px;
}
.det-totales div { display: flex; justify-content: space-between; padding: 5px 0; }
.det-totales .fuerte {
    border-top: 2px solid var(--texto);
    margin-top: 4px;
    padding-top: 8px;
    font-size: 16px;
    font-weight: 700;
}

/* Desglose interno plegable */
.det-plegable {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    background: var(--fondo);
    border: 1px solid var(--borde);
    border-radius: 6px;
    padding: 9px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tenue);
    cursor: pointer;
    font-family: inherit;
    margin-bottom: 10px;
}
.det-plegable:hover { background: #f1f5f9; }
.det-plegable .pista { text-transform: none; letter-spacing: 0; font-weight: 400; }
.det-flecha { margin-left: auto; transition: transform .15s; line-height: 0; }
.det-flecha.girada { transform: rotate(180deg); }

@media (max-width: 720px) {
    .det-columnas { grid-template-columns: 1fr; }
    .det-totales { width: 100%; }
}

/* =====================================================================
   Pantalla de acceso
   ===================================================================== */
.pantalla-login {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
}
.caja-login {
    width: 100%;
    max-width: 370px;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: 30px 28px;
}
.login-marca {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 16px;
    font-weight: 700;
    color: var(--azul);
    margin-bottom: 24px;
}
.pantalla-login .aviso { font-size: 12.5px; }
.pantalla-login .pie { margin-top: 18px; padding: 0; }

/* =====================================================================
   Pantalla de estado
   ===================================================================== */
.estado-cabecera {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}
.estado-cabecera strong { display: block; font-size: 16px; }
.estado-cabecera span { font-size: 13px; opacity: .85; }
.estado-ok  { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.estado-mal { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

.tabla-estado td { padding: 8px 6px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla-estado tr:last-child td { border-bottom: none; }
.estado-ico { width: 24px; }
.estado-ico.si    { color: var(--verde); }
.estado-ico.aviso { color: var(--ambar); }
.estado-ico.no    { color: var(--rojo); }
.estado-nombre { width: 34%; font-weight: 600; }
.estado-detalle { color: var(--tenue); font-size: 12.5px; }

/* Cinta de aviso del modo prueba. Deliberadamente molesta: esta para que
   nadie deje el acceso abierto por olvido. */
.cinta-aviso {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #b91c1c;
    color: #fff;
    padding: 8px 20px;
    font-size: 12.5px;
    text-align: center;
}
/* Los elementos flex traen min-width:auto y no se encogen por debajo de su
   contenido: sin esto el texto largo de la cinta empuja el ancho de toda
   la pagina y aparece scroll horizontal en movil. */
.cinta-aviso > span { min-width: 0; }
.cinta-aviso .ico { flex-shrink: 0; }
.cinta-aviso code {
    background: rgba(255, 255, 255, .18);
    color: #fff;
    padding: 1px 5px;
    border-radius: 3px;
}

/* Usuario y salida en la barra superior */
.sesion {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: var(--tenue);
    padding-left: 14px;
    border-left: 1px solid var(--borde);
}
.form-salir { display: inline-flex; margin: 0; }

/* =====================================================================
   Acciones de estado en el pie del detalle
   ===================================================================== */
.modal-pie-estado { justify-content: space-between; flex-wrap: wrap; }
.acciones-estado { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.btn-estado-emitir   { border-color: #bfdbfe; color: var(--azul); background: var(--azul-claro); }
.btn-estado-emitir:hover { background: #dbeafe; }
.btn-estado-aceptar  { border-color: #a7f3d0; color: var(--verde); background: #ecfdf5; }
.btn-estado-aceptar:hover { background: #d1fae5; }
.btn-estado-rechazar { border-color: #fecaca; color: var(--rojo); background: #fef2f2; }
.btn-estado-rechazar:hover { background: #fee2e2; }
.btn-volver-borrador { color: var(--tenue); }
.btn[disabled] { opacity: .55; cursor: default; }

/* Estados */
.etiqueta-borrador  { background: #f1f5f9; color: #475569; }
/* Vencida no es un estado guardado: sale de comparar fechas. Por eso va
   con borde, para distinguirla de las etiquetas de estado real. */
.etiqueta-vencida {
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fed7aa;
    margin-left: 4px;
}
.etiqueta-emitida   { background: var(--azul-claro); color: var(--azul); }
.etiqueta-aceptada  { background: #ecfdf5; color: var(--verde); }
.etiqueta-rechazada { background: #fef2f2; color: var(--rojo); }

/* =====================================================================
   Responsive
   =====================================================================
   La tabla de items del formulario se deja scrollear a proposito: son 19
   columnas y no hay forma honesta de meterlas en un movil. El listado en
   cambio si se adapta, escondiendo lo secundario.
   ===================================================================== */

@media (max-width: 1000px) {
    .contenedor { margin: 18px auto; padding: 0 16px; }
    .tarjeta { padding: 18px 16px; }
    .tabla-sangre { margin: 0 -16px; }
    .tabla-listado th:first-child, .tabla-listado td:first-child { padding-left: 16px; }
    .tabla-listado th:last-child,  .tabla-listado td:last-child  { padding-right: 16px; }

    .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
    .totales { width: 100%; }

    .barra { flex-wrap: wrap; padding: 10px 16px; row-gap: 8px; }
    .barra nav { flex-wrap: wrap; }
}

/* Tablet: sobran el RUC y el conteo de items para reconocer una fila. */
@media (max-width: 860px) {
    .tabla-listado th:nth-child(3), .tabla-listado td:nth-child(3),
    .tabla-listado th:nth-child(5), .tabla-listado td:nth-child(5) { display: none; }
}

@media (max-width: 640px) {
    body { font-size: 13.5px; }

    /* 16px es el minimo que evita que iOS haga zoom al enfocar un campo.
       Con menos, cada toque desplaza la pagina y hay que volver a encuadrar. */
    input, select, textarea { font-size: 16px; }

    /* WCAG 2.1 AA pide 44x44 de area tactil. Los iconos de accion se
       quedaban en 28px: se fallaba el toque constantemente. */
    .btn-ico { width: 44px; height: 44px; }
    .btn { min-height: 44px; }
    .acciones { gap: 4px; }
    input[type="checkbox"] { width: 20px; height: 20px; }

    /* Solo queda lo imprescindible: numero, empresa, total y acciones. */
    .tabla-listado th:nth-child(4), .tabla-listado td:nth-child(4),
    .tabla-listado th:nth-child(7), .tabla-listado td:nth-child(7) { display: none; }

    .grid-3, .grid-4, .grid { grid-template-columns: 1fr !important; }
    .grid > div[style*="span 2"] { grid-column: auto !important; }

    .tarjetas-resumen { grid-template-columns: 1fr; gap: 10px; }
    .campo-busqueda { min-width: 100%; }
    .barra-busqueda .btn { flex: 1; justify-content: center; }

    .sesion { padding-left: 0; border-left: none; }

    .cinta-aviso { display: block; padding: 8px 14px; font-size: 11.5px; text-align: left; }
    .cinta-aviso .ico { display: none; }
    .barra-busqueda { gap: 8px; }

    /* La tarjeta ya no sangra: en pantalla estrecha cada pixel cuenta y el
       margen negativo dejaba las acciones fuera de la vista. */
    .tabla-sangre { margin: 0; }
    .tabla-listado th:first-child, .tabla-listado td:first-child { padding-left: 6px; }
    .tabla-listado th:last-child,  .tabla-listado td:last-child  { padding-right: 6px; }
    .tabla-listado th, .tabla-listado td { padding-left: 6px; padding-right: 6px; }

    /* El pie de los modales se apila para que los botones no se aplasten. */
    .modal-pie { flex-direction: column-reverse; }
    .modal-pie .btn, .modal-pie form, .modal-pie form .btn { width: 100%; justify-content: center; }
    .modal-cuerpo-scroll { max-height: 70vh; }

    .barra-guardar { flex-direction: column; align-items: stretch; gap: 10px; }
    .barra-guardar-acciones .btn { flex: 1; justify-content: center; }

    .det-totales { width: 100%; }
}