/* ==========================================================================
   Sistema de Inventario · hoja de estilos unica
   Sin frameworks: tokens CSS + layout con grid/flex.
   ========================================================================== */

/* Manrope (marca Inveko), servida desde el sistema: la CSP no deja cargar fuentes de afuera */
@font-face {
    font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
    src: url("../fonts/manrope-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
    src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* ======================================================================
       TOKENS. Una pantalla usa SOLO estos nombres: por funcion, no por color.
       Cambiar la marca = cambiar los valores de aqui, no las pantallas.
       ====================================================================== */

    /* Superficies y texto */
    --color-fondo: #f4f5f1;            /* detras de todo */
    --color-superficie: #ffffff;       /* paneles, tarjetas, campos */
    --color-superficie-suave: #f8f9f6; /* cabeceras de tabla, filas al pasar */
    --color-texto: #14202e;            /* texto principal */
    --color-texto-secundario: #475466; /* etiquetas, datos de apoyo */
    --color-texto-tenue: #5f6b79;      /* ayudas, fechas, "sin datos" (4.9:1 sobre el fondo) */
    --color-texto-inverso: #ffffff;    /* texto sobre el acento o el menu */
    --color-borde: #e2e5de;
    --color-borde-fuerte: #ccd1c8;     /* botones, lineas de tabla */
    --color-borde-campo: #7b8491;      /* inputs: 3.4:1 sobre el fondo (WCAG 1.4.11) */

    /* Acento: marca Inveko (navy, verde azulado y ambar) */
    --color-acento: #0f2a44;           /* boton principal, enlaces (14.6:1 con blanco) */
    --color-acento-hover: #1d4063;
    --color-acento-oscuro: #0f2a44;    /* menu lateral, tarjeta de total */
    --color-acento-claro: #0e7a6d;     /* foco, indicador activo, barras (verde azulado, 5.2:1) */
    --color-acento-suave: #e8eef4;     /* fondo de avisos info y resaltados */
    --color-acento-borde: #c5d3e0;
    --color-foco: rgba(14, 122, 109, .18);
    /* Ambar: SOLO sobre navy o como fondo con texto navy (con blanco da 2.1:1) */
    --color-ambar: #f2a33a;
    --color-sobre-ambar: #0f2a44;

    /* Estados (cada uno: color, fondo suave, texto sobre el suave, borde) */
    --color-exito: #0e7a6d;
    --color-exito-suave: #e2f3f0;
    --color-exito-texto: #0a5a50;
    --color-exito-borde: #b3ddd5;
    --color-alerta: #a35f00;
    --color-alerta-suave: #fdf1dc;
    --color-alerta-texto: #7a4800;
    --color-alerta-borde: #f2d59e;
    --color-error: #b3261e;
    --color-error-suave: #fbe6e4;
    --color-error-texto: #8c1c16;
    --color-error-borde: #efbab5;

    /* Sobre fondos oscuros (menu, tarjeta de total) y velos */
    --sobre-oscuro-10: rgba(255, 255, 255, .1);
    --sobre-oscuro-20: rgba(255, 255, 255, .2);
    --sobre-oscuro-40: rgba(255, 255, 255, .4);
    --sobre-oscuro-70: rgba(255, 255, 255, .7);
    --sobre-oscuro-90: rgba(255, 255, 255, .9);
    --color-velo: rgba(15, 42, 68, .5); /* detras de las ventanas */

    /* Componentes con color propio */
    /* Menu lateral: navy mas profundo que la caja del icono Inveko (#0f2a44),
       que se separa del fondo con un borde claro fino */
    --menu-fondo: #0a1d30;
    --menu-texto: #c9d4e0;            /* 11.4:1 */
    --menu-titulo: #8a9cb1;           /* 6.1:1 */
    --menu-hover: #132b44;
    --menu-activo-fondo: #1b3a5a;     /* blanco encima 11.7:1 */
    --menu-activo: #f2a33a;           /* ambar: barra e icono activos (5.6:1) */
    --menu-borde: rgba(255, 255, 255, .08);
    --menu-logo-borde: rgba(255, 255, 255, .22);
    --escaner-video: #000;
    --escaner-panel: #0a1d30;
    --escaner-linea: #ff4d4d;

    /* Tipografia */
    --fuente: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --fuente-mono: "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
    --letra-xs: .75rem;    /* 12px  notas, codigos */
    --letra-sm: .875rem;   /* 14px  texto normal */
    --letra-md: 1rem;      /* 16px  titulos de panel, campos en celular */
    --letra-lg: 1.25rem;   /* 20px  titulo de pagina, cifras */
    --letra-xl: 1.5rem;    /* 24px  cifras destacadas */
    --letra-2xl: 2rem;     /* 32px  la cifra principal */
    --peso-normal: 400;
    --peso-medio: 500;
    --peso-semi: 600;      /* titulos y etiquetas */
    --peso-fuerte: 700;    /* cifras */
    --peso-titulo: 800;    /* titulos de pagina y marca (Manrope ExtraBold) */

    /* Espacios: el numero x 4px */
    --esp-05: .125rem;     /* 2px */
    --esp-1: .25rem;       /* 4px */
    --esp-2: .5rem;        /* 8px */
    --esp-3: .75rem;       /* 12px */
    --esp-4: 1rem;         /* 16px */
    --esp-6: 1.5rem;       /* 24px */
    --esp-8: 2rem;         /* 32px */

    /* Forma y profundidad */
    --radio: 8px;
    --radio-sm: 5px;
    --sombra: 0 1px 2px rgba(15, 42, 68, .06), 0 4px 12px rgba(15, 42, 68, .05);
    --sombra-alta: 0 8px 28px rgba(15, 42, 68, .16);
    --sombra-arriba: 0 -4px 14px rgba(15, 42, 68, .1);

    /* Medidas del esqueleto de la app */
    --ancho-menu: 232px;
    --alto-barra: 56px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--fuente);
    font-size: var(--letra-sm);
    line-height: 1.5;
    color: var(--color-texto);
    background: var(--color-fondo);
}

a { color: var(--color-acento); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 var(--esp-2); line-height: 1.25; font-weight: var(--peso-semi); }
h1 { font-size: var(--letra-lg); font-weight: var(--peso-titulo); letter-spacing: -.01em; }
h2 { font-size: var(--letra-md); }
h3 { font-size: var(--letra-sm); }

/* ==========================================================================
   Estructura
   ========================================================================== */

.app { display: flex; min-height: 100vh; }

.menu {
    width: var(--ancho-menu);
    flex: 0 0 var(--ancho-menu);
    background: var(--menu-fondo);
    color: var(--menu-texto);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.menu__marca {
    display: flex; align-items: center; gap: var(--esp-3);
    padding: var(--esp-4) var(--esp-4);
    border-bottom: 1px solid var(--menu-borde);
}
.menu__marca strong { color: var(--color-texto-inverso); font-size: var(--letra-md); line-height: 1.25; }
.menu__marca strong { font-size: var(--letra-xl); font-weight: var(--peso-titulo); letter-spacing: -.02em; }
/* Mismo radio que la caja del SVG (15/64) para que el borde la siga */
.menu__logo { flex: none; width: 36px; height: 36px; border-radius: 23.4%; box-shadow: 0 0 0 1.5px var(--menu-logo-borde); }

.menu__grupo { padding: var(--esp-3) 0 var(--esp-05); }
.menu__titulo {
    padding: 0 var(--esp-4) var(--esp-1);
    font-size: var(--letra-xs);
    text-transform: uppercase;
    letter-spacing: .9px;
    color: var(--menu-titulo);
    font-weight: var(--peso-semi);
}

.menu a {
    display: flex;
    align-items: center;
    gap: var(--esp-2);
    padding: var(--esp-2) var(--esp-4);
    color: var(--menu-texto);
    font-size: var(--letra-sm);
    margin: 1px var(--esp-2);
    border-radius: var(--radio);
    border-left: 3px solid transparent;
    font-weight: var(--peso-medio);
    transition: background-color .15s ease, color .15s ease;
}
.menu a:hover { background: var(--menu-hover); color: var(--color-texto-inverso); text-decoration: none; }
.menu a.activo, .menu a.activo:hover {
    background: var(--menu-activo-fondo);
    color: var(--color-texto-inverso);
    border-left-color: var(--menu-activo);
    font-weight: var(--peso-semi);
}
.menu__icono { display: flex; opacity: .8; }
.menu__icono .ico { width: 18px; height: 18px; }
.menu a.activo .menu__icono { opacity: 1; color: var(--menu-activo); }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.barra {
    height: var(--alto-barra);
    background: var(--color-superficie);
    border-bottom: 1px solid var(--color-borde);
    display: flex;
    align-items: center;
    gap: var(--esp-4);
    padding: 0 var(--esp-4);
    position: sticky;
    top: 0;
    z-index: 20;
}
.barra__titulo { font-weight: var(--peso-semi); font-size: var(--letra-md); }
.barra__espacio { flex: 1; }

/* Boton "Consultar producto" de la barra: parece un buscador, abre la ventana (F11) */
.consulta-rapida {
    display: inline-flex; align-items: center; gap: var(--esp-2);
    min-width: 15rem; padding: var(--esp-1) var(--esp-2) var(--esp-1) var(--esp-3);
    border: 1px solid var(--color-borde); border-radius: var(--radio);
    background: var(--color-fondo); color: var(--color-texto-secundario);
    font: inherit; font-size: var(--letra-sm); cursor: pointer;
}
.consulta-rapida:hover { border-color: var(--color-borde-fuerte); color: var(--color-texto); }
.consulta-rapida:focus-visible { outline: 2px solid var(--color-foco); outline-offset: 1px; }
.consulta-rapida__texto { flex: 1; text-align: left; }
/* Donde hay lupa propia (factura, proforma, ajustes, kardex) esa es la que
   sirve -- desde ella si se agrega el producto -- y F11 la abre (app.js) */
body:has([data-boton-buscar-avanzado]) .consulta-rapida { display: none; }
.consulta-rapida kbd, .consulta-global kbd {
    font: inherit; font-size: var(--letra-xs); padding: 0 var(--esp-1);
    border: 1px solid var(--color-borde); border-radius: 4px; background: var(--color-superficie);
}
/* Tecla de atajo dentro de un boton (facturacion: "Guardar factura F3") */
.btn kbd {
    font: inherit; font-size: var(--letra-xs); line-height: 1.3; padding: 0 var(--esp-1);
    border: 1px solid currentColor; border-radius: 4px; opacity: .65; margin-left: var(--esp-1);
}
html.movil .btn kbd, .barra-cobro .btn kbd { display: none; }   /* sin teclado fisico */
@media (max-width: 900px) {
    .consulta-rapida { min-width: 0; padding: var(--esp-2); }
    .consulta-rapida__texto, .consulta-rapida kbd { display: none; }
}
/* La consulta trae la ventana de productos en modo pagina: que la lista ocupe el alto que queda */
.consulta-global .busqueda-rapida { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* En la consulta: existencias por bodega del producto elegido */
.modal-buscar-producto__resultados tbody tr.fila-desglose { cursor: default; background: var(--color-acento-suave); }
.desglose-bodegas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-4); }
.desglose-bodegas li { display: flex; gap: var(--esp-2); }
.desglose-bodegas .stock-si { color: var(--color-exito-texto); }
.desglose-bodegas .stock-no { color: var(--color-error); }

.usuario-chip {
    display: flex;
    align-items: center;
    gap: var(--esp-2);
    padding: var(--esp-1) var(--esp-2) var(--esp-1) var(--esp-1);
    border-radius: 999px;
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    color: inherit;
    text-decoration: none;
    transition: background .12s ease, border-color .12s ease;
}
.usuario-chip:hover { background: var(--color-acento-suave); border-color: var(--color-acento-claro); text-decoration: none; }
.avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--color-acento);
    color: var(--color-texto-inverso);
    display: grid; place-items: center;
    font-size: var(--letra-xs); font-weight: var(--peso-fuerte);
}
.usuario-chip__datos { line-height: 1.15; }
.usuario-chip__datos strong { display: block; font-size: var(--letra-xs); }
.usuario-chip__datos span { font-size: var(--letra-xs); color: var(--color-texto-tenue); }

.contenido { padding: var(--esp-4); flex: 1; max-width: 1500px; width: 100%; }

/* Al saltar a una seccion (#ancla), que la barra superior fija no tape su titulo */
.panel[id] { scroll-margin-top: calc(var(--esp-8) * 2); }

.cabecera-pagina {
    display: flex; align-items: flex-start; gap: var(--esp-4);
    flex-wrap: wrap; margin-bottom: var(--esp-4);
}
.cabecera-pagina p { margin: var(--esp-05) 0 0; color: var(--color-texto-secundario); font-size: var(--letra-sm); max-width: 70ch; }
.cabecera-pagina .acciones { margin-left: auto; display: flex; gap: var(--esp-2); flex-wrap: wrap; }
/* Estado del documento junto a su numero (no mezclado con los botones) */
.cabecera-estado { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-1); margin-top: var(--esp-1); }

/* Foto del producto: recuadro en la ficha y ventana para verla en grande */
.foto-producto { flex: none; width: 8.5rem; display: flex; flex-direction: column; gap: var(--esp-2); }
.foto-producto__marco {
    aspect-ratio: 1; display: grid; place-items: center; text-align: center; overflow: hidden;
    border: 1px solid var(--color-borde); border-radius: var(--radio); background: var(--color-superficie);
}
.foto-producto__marco .ico { width: 1.75rem; height: 1.75rem; }
.foto-producto__ver { all: unset; width: 100%; height: 100%; cursor: zoom-in; }
.foto-producto__ver:focus-visible { outline: 2px solid var(--color-acento); outline-offset: -2px; }
.foto-producto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.foto-producto__acciones { display: flex; gap: var(--esp-1); flex-wrap: wrap; }
.foto-producto__acciones form { margin: 0; }
/* el input de archivo va dentro de su boton: oculto a la vista, no al teclado */
.foto-producto__acciones label { position: relative; white-space: nowrap; }
.foto-producto__acciones input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.foto-producto__acciones label:focus-within { outline: 2px solid var(--color-acento); outline-offset: 2px; }

/* Enlace de regreso arriba del titulo (macro volver): area de toque de 44px */
.volver {
    display: inline-flex; align-items: center; gap: var(--esp-1);
    min-height: 44px; margin: calc(var(--esp-2) * -1) 0 var(--esp-1);
    color: var(--color-acento); font-size: var(--letra-sm); font-weight: var(--peso-semi); text-decoration: none;
}
.volver .ico { width: 1.1rem; height: 1.1rem; }
.volver:hover span { text-decoration: underline; }
.volver:focus-visible { outline: 2px solid var(--color-foco); outline-offset: 2px; border-radius: var(--radio-sm); }

/* Ficha del producto: titulo, estados y datos con su nombre */
.ficha-producto .foto-producto { width: 7rem; }
.ficha-producto__titulo { flex: 1 1 22rem; min-width: 0; }
.ficha-producto__titulo h1 { margin: 0; overflow-wrap: anywhere; }
.ficha-producto__estados { display: flex; flex-wrap: wrap; gap: var(--esp-1); margin-top: var(--esp-2); }
.ficha-producto__estados:empty { display: none; }
.ficha-datos, .ficha-resumen { display: grid; gap: var(--esp-2) var(--esp-4); margin: var(--esp-3) 0 0; }
.ficha-datos { grid-template-columns: repeat(auto-fill, minmax(10rem, max-content)); }
.ficha-resumen { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.ficha-datos dt, .ficha-resumen dt { font-size: var(--letra-xs); color: var(--color-texto-secundario); font-weight: var(--peso-semi); }
.ficha-datos dd, .ficha-resumen dd { margin: 0; font-size: var(--letra-sm); color: var(--color-texto); overflow-wrap: anywhere; }
.ficha-resumen dd { font-weight: var(--peso-semi); }
.ficha-estado .panel__cuerpo { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4); flex-wrap: wrap; }
.ficha-estado p { margin: var(--esp-1) 0 0; max-width: 60ch; }
.ficha-estado form { margin: 0; }
@media (max-width: 640px) {
    .ficha-producto .foto-producto { width: 5.5rem; }
    .ficha-producto__titulo { flex-basis: calc(100% - 7rem); }
    .ficha-producto .acciones { margin-left: 0; width: 100%; }
    .ficha-producto .acciones .btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }
    .ficha-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ficha-estado .btn { width: 100%; justify-content: center; min-height: 44px; }
}
.visor-foto {
    width: min(760px, 94vw); max-height: 92vh; padding: 0; overflow: hidden;
    border: 1px solid var(--color-borde-fuerte); border-radius: var(--radio); box-shadow: var(--sombra-alta);
}
.visor-foto::backdrop { background: var(--color-velo); }
.visor-foto__cabecera {
    display: flex; justify-content: space-between; align-items: center; gap: var(--esp-2);
    padding: var(--esp-2) var(--esp-4); border-bottom: 1px solid var(--color-borde);
}
.visor-foto__cabecera h3 { margin: 0; font-size: var(--letra-md); }
.visor-foto__cuerpo { display: grid; place-items: center; min-height: 12rem; padding: var(--esp-3); background: var(--color-superficie); }
.visor-foto__cuerpo img { max-width: 100%; max-height: calc(92vh - 6rem); object-fit: contain; }
/* Ojito de la linea del carrito */
.ver-foto-linea { margin-right: var(--esp-2); vertical-align: middle; }
.ver-foto-linea .ico { width: 1.1rem; height: 1.1rem; }

/* ==========================================================================
   Paneles y rejillas
   ========================================================================== */

.panel {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    margin-bottom: var(--esp-4);
}
.panel__cabecera {
    padding: var(--esp-3) var(--esp-4);
    border-bottom: 1px solid var(--color-borde);
    display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap;
}
.panel__cabecera h2, .panel__cabecera h3 { margin: 0; }
.panel__cabecera .derecha { margin-left: auto; display: flex; gap: var(--esp-2); align-items: center; }
.panel__cuerpo { padding: var(--esp-4); }
.panel__cuerpo--separado { border-top: 1px solid var(--color-borde); }
/* Copias de seguridad: subir un archivo (archivo, clave y boton en una fila) */
.form-subir-copia { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: flex-end; }
.form-subir-copia .campo { margin-bottom: 0; flex: 1 1 16rem; }
/* Paneles dentro de una rejilla: la separacion la pone el gap */
.rejilla > .panel, .pos-grid > .panel, .total-stack > .panel { margin-bottom: 0; }
.panel__pie {
    padding: var(--esp-2) var(--esp-4); border-top: 1px solid var(--color-borde);
    background: var(--color-superficie-suave); font-size: var(--letra-sm); color: var(--color-texto-secundario);
    border-radius: 0 0 var(--radio) var(--radio);
}

.rejilla { display: grid; gap: var(--esp-4); }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* Productos: filtros en una rejilla compacta arriba, la tabla se desplaza
   dentro del panel (encabezado fijo) y la paginacion queda siempre a mano */
.contenido:has(.productos) { max-width: none; }
.productos__filtros {
    display: grid; gap: var(--esp-2) var(--esp-3); align-items: end;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    padding: var(--esp-3) var(--esp-4);
    border-bottom: 1px solid var(--color-borde);
}
.productos__filtros .campo { margin: 0; min-width: 0; }
.productos__filtros select, .productos__filtros input:not([type=checkbox]) { width: 100%; }
.productos__buscar { grid-column: span 2; }
.productos__fin { display: flex; gap: var(--esp-2); align-items: center; flex-wrap: wrap; }
.productos__resumen {
    margin: var(--esp-3) var(--esp-4) var(--esp-2);
    display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4); align-items: center; justify-content: space-between;
}
.productos__resumen p { margin: 0; }
/* Eliminar en lote: contador + acciones; la casilla de cada fila, angosta */
.barra-lote { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; }
th.col-marca, td.col-marca { width: 1%; padding-right: 0; }
[data-resultados][aria-busy="true"] { opacity: .6; transition: opacity .15s; }
.productos__fin .check { white-space: nowrap; }
.productos table.tabla td { padding-top: var(--esp-1); padding-bottom: var(--esp-1); }
@media (min-width: 1100px) {
    .productos__tabla { max-height: calc(100vh - 380px); min-height: 260px; overflow-y: auto; }
}
/* Carga del XML de compra: el campo del archivo como una zona clara y el boton al lado */
.carga-xml { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: center; margin-top: var(--esp-3); }
.carga-xml__campo {
    flex: 1 1 22rem; display: flex; flex-direction: column; gap: var(--esp-1);
    padding: var(--esp-3) var(--esp-4); border: 1px dashed var(--color-borde-campo);
    border-radius: var(--radio); background: var(--color-superficie-suave); cursor: pointer;
}
.carga-xml__campo:hover, .carga-xml__campo:focus-within { border-color: var(--color-acento-claro); background: var(--color-acento-suave); }
.carga-xml__titulo { font-weight: var(--peso-semi); font-size: var(--letra-sm); }
.carga-xml__campo .ayuda { margin: 0; }
.carga-xml input[type=file] { font-size: var(--letra-sm); }
.carga-xml input[type=file]::file-selector-button {
    font: inherit; font-weight: var(--peso-semi); margin-right: var(--esp-3); cursor: pointer;
    padding: var(--esp-2) var(--esp-3); border-radius: var(--radio-sm);
    border: 1px solid var(--color-acento); background: var(--color-acento); color: var(--color-texto-inverso);
}
.aviso--accion { align-items: center; justify-content: space-between; flex-wrap: wrap; }
.mas-datos { margin-top: var(--esp-2); }

/* Lineas del XML de compra: producto, cantidad y costo editables por fila */
.tabla-xml__resumen {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3);
    margin: var(--esp-4) 0 var(--esp-2); font-size: var(--letra-sm);
}
.tabla-xml__total { margin-left: auto; }
.tabla-xml__total strong { font-size: var(--letra-md); }
.tabla-xml td { vertical-align: middle; }
.tabla-xml__origen { max-width: 18rem; }
.tabla-xml__producto { min-width: 18rem; }
.tabla-xml__producto .buscador input { width: 100%; }
.tabla-xml input[type=number] { width: 6.5rem; }
/* Sin producto asignado: se nota en la fila, no solo en la etiqueta roja */
.tabla-xml tr.tabla-xml__fila--pendiente > td:first-child { box-shadow: inset 3px 0 0 var(--color-error); }
@media (max-width: 640px) {
    .tabla-xml__producto, .tabla-xml__origen { min-width: 0; max-width: none; }
    /* Origen y producto: etiqueta arriba y el contenido a todo el ancho */
    .tabla-xml td.tabla-xml__origen, .tabla-xml td.tabla-xml__producto {
        flex-direction: column; align-items: stretch; text-align: left; gap: var(--esp-1);
    }
    .tabla-xml td > .buscador { width: 100%; }
    .tabla-xml tr.tabla-xml__fila--pendiente { border-left: 3px solid var(--color-error); }
    .tabla-xml tr.tabla-xml__fila--pendiente > td:first-child { box-shadow: none; }
    .tabla-xml__total { margin-left: 0; flex-basis: 100%; }
}

/* Documento en borrador: lineas editables en la tabla y datos de la compra */
input.linea-editable { width: 6.5rem; }
input.linea-editable--pct { width: 4.75rem; }
.linea-acciones { white-space: nowrap; }
.linea-acciones form + form { margin-left: var(--esp-1); }
.form-compra__titulo { margin: var(--esp-4) 0 var(--esp-2); padding-top: var(--esp-3); border-top: 1px solid var(--color-borde); }
.form-compra .plegable { margin-bottom: var(--esp-3); }

/* Precios de venta en la factura de compra: precio y % de ganancia juntos */
.tabla-precios td { vertical-align: middle; }
.tabla-precios__par { display: flex; gap: var(--esp-2); align-items: center; justify-content: flex-end; }
.tabla-precios__par input[data-precio] { width: 6.5rem; }
.tabla-precios__pct { display: inline-flex; align-items: center; gap: var(--esp-1); color: var(--color-texto-secundario); }
.tabla-precios__pct input { width: 4.75rem; }

/* Etiqueta de precio (ficha): la vista previa y el formulario al lado */
.etiqueta-precio__cuerpo { display: flex; flex-wrap: wrap; gap: var(--esp-4); align-items: center; }
.etiqueta-precio__vista {
    width: 290px; max-width: 100%; height: auto; image-rendering: pixelated;
    border: 1px solid var(--color-borde-fuerte); border-radius: var(--radio-sm); background: var(--color-superficie);
}
.etiqueta-precio__form { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: end; }
.etiqueta-precio__form .campo { margin: 0; width: 12rem; }
.etiqueta-precio__form p { flex-basis: 100%; margin: 0; }

/* Pantalla ancha: todos los filtros en una sola fila, mas alto para la tabla.
   Con 7 filtros, por debajo de 1600 px los selects quedaban en "Toc…": van en dos filas */
@media (min-width: 1600px) {
    .productos__filtros { grid-template-columns: minmax(200px, 2fr) repeat(7, minmax(0, 1fr)) auto; }
    .productos__buscar { grid-column: auto; }
    .productos__fin { flex-wrap: nowrap; }
    .productos__tabla { max-height: calc(100vh - 312px); }
}
@media (max-width: 640px) { .productos__buscar { grid-column: 1 / -1; } }

/* Lista + formulario (clientes, proveedores, categorias/lineas/marcas): la
   lista manda y se desplaza dentro de su panel; el formulario queda a la vista */
.contenido:has(.maestro) { max-width: none; }
.maestro { display: grid; gap: var(--esp-4); align-items: start; }
.maestro tr.fila-editando { background: var(--color-acento-suave); }
.maestro__buscar .check { white-space: nowrap; }
.maestro > .panel { margin: 0; min-width: 0; }
.maestro .grupo-btn { flex-wrap: nowrap; }
.maestro table.tabla td { padding-top: var(--esp-1); padding-bottom: var(--esp-1); }
.maestro__buscar { display: flex; gap: var(--esp-2); padding: var(--esp-3) var(--esp-4) 0; }
.maestro__buscar input[type=search] { flex: 1; min-width: 0; }
.maestro__buscar { align-items: center; }
@media (max-width: 640px) {
    .maestro__buscar { flex-wrap: wrap; }
    .maestro__buscar:has(select, .check) input[type=search] { flex-basis: 100%; }
    .maestro__buscar select { flex: 1; min-width: 0; }
}
.maestro__resumen {
    margin: var(--esp-2) var(--esp-4) 0;
    display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4); align-items: center; justify-content: space-between;
}
.maestro__resumen p { margin: 0; }
.maestro__tabla { margin-top: var(--esp-3); }
@media (min-width: 1100px) {
    .maestro { grid-template-columns: minmax(0, 1.7fr) minmax(340px, 1fr); }
    .maestro__tabla { max-height: calc(100vh - 330px); min-height: 240px; overflow-y: auto; }
    .maestro__formulario { position: sticky; top: var(--esp-4); }
}
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
/* Indicadores del tablero: 6 tarjetas en una fila en pantallas de PC (con 200 px quedaba una sola abajo) */
.rejilla--kpi { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* Tarjetas de indicador: neutras. El color solo marca lo que pide atencion
   (kpi--alerta, kpi--error), y solo en la cifra. */
.kpi {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: var(--esp-4) var(--esp-4);
}
.kpi__etiqueta { font-size: var(--letra-sm); color: var(--color-texto-secundario); display: flex; align-items: center; gap: var(--esp-2); }
.kpi__valor { font-size: var(--letra-xl); font-weight: var(--peso-fuerte); line-height: 1.15; margin-top: var(--esp-05);
              font-variant-numeric: tabular-nums; }
/* Icono en un cuadro suave: se reconoce la cifra sin leer la etiqueta */
.kpi__icono { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; flex: none;
              border-radius: var(--radio); background: var(--color-acento-suave); color: var(--color-acento); }
.kpi__icono .ico { width: 1rem; height: 1rem; }
.kpi--error .kpi__icono { background: var(--color-error-suave); color: var(--color-error); }
.kpi--error .kpi__nota { color: var(--color-error-texto); }
/* Tarjeta que lleva al detalle */
a.kpi--enlace { display: block; color: inherit; text-decoration: none;
                transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
a.kpi--enlace:hover { border-color: var(--color-acento-borde); box-shadow: var(--sombra); transform: translateY(-1px); }
a.kpi--enlace:focus-visible { outline: 2px solid var(--color-foco); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { a.kpi--enlace, a.kpi--enlace:hover { transition: none; transform: none; } }
/* Tablero: paneles de datos, no texto corrido -> usa todo el ancho de la
   pantalla (las demas paginas mantienen su limite). Dos columnas que crecen
   cada una por su lado, asi un panel corto no deja un hueco al lado del alto. */
/* Tablero: dos columnas del mismo alto (el ultimo recuadro de cada una se
   estira hasta donde llega la otra) y debajo las tablas a todo el ancho. */
.contenido:has(.tablero-columnas) { max-width: none; }
.tablero-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-4); }
.tablero-columna { display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
.tablero-columna > .panel, .tablero-tablas > .panel { margin: 0; min-width: 0; }
.tablero-columna > .panel:last-child { flex: 1; }
.tablero-tablas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); }
@media (max-width: 1200px) { .tablero-columnas { grid-template-columns: minmax(0, 1fr); } }
.panel--estira { display: flex; flex-direction: column; }
.panel--estira > .panel__cuerpo, .panel--estira > .tabla-scroll { flex: 1; }
.panel--estira > .panel__pie { margin-top: auto; }
/* Mas vendidos: el nombre en una linea (antes se partia en 2-3) y la barra mas angosta */
.tabla--ranking__nombre { max-width: 0; width: 60%; }
.tabla--ranking__nombre > a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabla--ranking__barra { width: 30%; min-width: 4rem; }
.tabla--ranking td.num { white-space: nowrap; }

/* Tabla de una linea por fila (sin datos apilados bajo cada celda) */
.tabla--una-linea td, .tabla--una-linea th { white-space: nowrap; }
.tabla--una-linea .celda-corta { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }

.kpi__nota { font-size: var(--letra-xs); color: var(--color-texto-tenue); margin-top: var(--esp-1); }
.kpi--alerta .kpi__valor { color: var(--color-alerta); }
.kpi--error .kpi__valor { color: var(--color-error); }
/* Cifras dentro de un panel: sin marco (nada de tarjetas dentro de tarjetas) */
.cifras { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.cifras .kpi { border: none; padding: 0; background: none; }
.cifras .kpi__valor { font-size: var(--letra-lg); }

/* Carga con esqueleto (app.js: cargarConEsqueleto). Cada barra va EN la linea
   de texto (inline-block de 1em): la linea mide lo mismo que con letras, asi
   la fila o el item del esqueleto mide igual que el real y nada salta. */
.esqueleto {
    display: inline-block; vertical-align: top; height: 1em; margin-top: .25em;
    border-radius: var(--radio-sm);
    background: linear-gradient(90deg, var(--color-borde) 30%, var(--color-superficie-suave) 50%, var(--color-borde) 70%);
    background-size: 300% 100%;
    animation: esqueleto-brillo 1.8s ease-in-out infinite;   /* un brillo que pasa, no un parpadeo */
}
.esqueleto--campo { display: block; width: 100%; height: 2.4rem; margin-top: var(--esp-1); }
@keyframes esqueleto-brillo {
    from { background-position: 100% 0; }
    to   { background-position: 0 0; }
}
/* Quien pidio "reducir movimiento" en su sistema ve las barras quietas */
@media (prefers-reduced-motion: reduce) {
    .esqueleto { animation: none; }
}
.buscador__item.esqueleto-item { cursor: default; }
.buscador__item.esqueleto-item:hover { background: none; }
.esqueleto-item > span { flex: 1; }
.buscador__item--error { justify-content: space-between; color: var(--color-texto-secundario); cursor: default; }
.buscador__item--error:hover { background: none; }
.esqueleto-formulario { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--esp-6); }
.esqueleto-formulario__columna { display: grid; gap: var(--esp-4); align-content: start; }

/* Tablero: lo que pide accion hoy */
.pendientes__lista { list-style: none; margin: 0; padding: 0; }
.pendientes__item {
    display: flex; align-items: center; gap: var(--esp-3);
    padding: var(--esp-3) var(--esp-4); border-top: 1px solid var(--color-borde); font-size: var(--letra-md);
}
.pendientes__item:first-child { border-top: none; }
.pendientes__item > span { flex: 1; min-width: 0; }
.pendientes__item > .ico { width: 20px; height: 20px; }
.pendientes__item--error > .ico { color: var(--color-error); }
.pendientes__item--alerta > .ico { color: var(--color-alerta); }
.pendientes__nada { margin: 0; padding: var(--esp-4) var(--esp-4); color: var(--color-texto-secundario); }
.pendientes__nada .ico { color: var(--color-exito); margin-right: var(--esp-1); }

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

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

table.tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--letra-sm);
}
table.tabla th {
    text-align: left;
    padding: var(--esp-2) var(--esp-3);
    background: var(--color-superficie-suave);
    border-bottom: 2px solid var(--color-borde-fuerte);
    font-weight: var(--peso-semi);
    font-size: var(--letra-xs);
    color: var(--color-texto-secundario);
    white-space: nowrap;
    position: sticky; top: 0; z-index: 1;
}
/* El titulo de una columna numerica va alineado igual que sus valores */
table.tabla th.num { text-align: right; }
/* Detalle de productos (factura/proforma): columnas de numeros del mismo ancho */
@media (min-width: 641px) {
    table.tabla--carrito { table-layout: fixed; }
    table.tabla--carrito th.num, table.tabla--carrito td.num { width: 11%; }
    table.tabla--carrito th:last-child:not(.num), table.tabla--carrito td:last-child:not(.num) { width: 90px; text-align: right; }
}
table.tabla td {
    padding: var(--esp-2) var(--esp-3);
    border-bottom: 1px solid var(--color-borde);
    vertical-align: middle;
}
table.tabla tbody tr:hover { background: var(--color-superficie-suave); }
table.tabla tfoot td {
    font-weight: var(--peso-fuerte);
    background: var(--color-superficie-suave);
    border-top: 2px solid var(--color-borde-fuerte);
    border-bottom: none;
}
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mono { font-family: var(--fuente-mono); font-size: .82em; }
.tenue { color: var(--color-texto-tenue); }
.compacta td, .compacta th { padding: var(--esp-1) var(--esp-2); }

/* Nada que mostrar (macro sin_datos): icono, titulo, una linea y, si hay, la accion */
.vacio {
    display: flex; flex-direction: column; align-items: center; gap: var(--esp-2);
    padding: var(--esp-8) var(--esp-4);
    text-align: center;
    color: var(--color-texto-secundario);
    font-size: var(--letra-sm);
}
.vacio > .ico { font-size: var(--letra-2xl); color: var(--color-texto-tenue); }
.vacio__titulo { margin: 0; font-size: var(--letra-md); font-weight: var(--peso-semi); color: var(--color-texto); }
.vacio__texto { margin: 0; max-width: 44ch; }
.vacio > .btn { margin-top: var(--esp-2); }
.vacio--pagina { padding-top: var(--esp-8); padding-bottom: var(--esp-8); }
.vacio--pagina .vacio__titulo { font-size: var(--letra-lg); }

/* Sin conexion: franja fija arriba, por encima de todo */
.sin-conexion {
    position: sticky; top: 0; z-index: 60;
    display: flex; align-items: center; justify-content: center; gap: var(--esp-2);
    padding: var(--esp-2) var(--esp-4);
    background: var(--color-alerta-suave); color: var(--color-alerta-texto);
    border-bottom: 1px solid var(--color-alerta-borde);
    font-size: var(--letra-sm); font-weight: var(--peso-medio); text-align: center;
}

/* Accion en proceso: boton deshabilitado con un giro antes del texto */
.btn.btn--trabajando { opacity: .8; cursor: progress; }
.btn--trabajando::before {
    content: ""; flex: none; width: 1em; height: 1em;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .btn--trabajando::before { animation-duration: 2.4s; }   /* sigue diciendo "trabajando", sin girar rapido */
}

/* Cantidad editable dentro del detalle de productos */
input.cantidad-linea {
    width: 100%; max-width: 6.5rem;
    padding: var(--esp-1) var(--esp-2);
    text-align: right; font: inherit; font-variant-numeric: tabular-nums;
    border: 1px solid var(--color-borde-campo); border-radius: var(--radio-sm);
    background: var(--color-superficie); color: inherit;
}
input.cantidad-linea:focus { outline: 2px solid var(--color-acento-claro); outline-offset: 0; }
/* Fila editable del carrito: lista de precio y casilla del IVA */
select.lista-linea { width: auto; min-width: 7.5rem; padding: var(--esp-1) var(--esp-2); font-size: var(--letra-sm); }
label.iva-linea { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--esp-1); white-space: nowrap; cursor: pointer; }
label.iva-linea input { width: 1.05rem; height: 1.05rem; margin: 0; cursor: pointer; }
label.iva-linea:has(input:disabled) { cursor: default; color: var(--color-texto-secundario); }

/* Logo del RIDE en Parametros */
.logo-ride { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-4); }
.logo-ride__vista {
    width: 240px; max-width: 100%; height: 96px;
    display: flex; align-items: center; justify-content: center;
    border: 1px dashed var(--color-borde-fuerte); border-radius: var(--radio); background: var(--color-superficie);
}
.logo-ride__vista img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Resalta brevemente la fila que se acaba de agregar al carrito */
@keyframes fila-nueva { from { background: var(--color-exito-suave); } to { background: transparent; } }
tr.fila-nueva { animation: fila-nueva 1.1s ease-out; }

/* ==========================================================================
   Insignias y estados
   ========================================================================== */

.badge {
    display: inline-block;
    padding: var(--esp-05) var(--esp-2);
    border-radius: 999px;
    font-size: var(--letra-xs);
    font-weight: var(--peso-semi);
    letter-spacing: .3px;
    white-space: nowrap;
    border: 1px solid transparent;
}
.badge--ok      { background: var(--color-exito-suave);     color: var(--color-exito);     border-color: var(--color-exito-borde); }
.badge--alerta  { background: var(--color-alerta-suave); color: var(--color-alerta); border-color: var(--color-alerta-borde); }
.badge--error   { background: var(--color-error-suave);  color: var(--color-error);  border-color: var(--color-error-borde); }
.badge--info    { background: var(--color-acento-suave);   color: var(--color-acento);   border-color: var(--color-acento-borde); }
.badge--neutro  { background: var(--color-fondo);             color: var(--color-texto-secundario); border-color: var(--color-borde-fuerte); }

/* ==========================================================================
   Botones
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    padding: var(--esp-2) var(--esp-3);
    border-radius: var(--radio-sm);
    border: 1px solid var(--color-borde-fuerte);
    background: var(--color-superficie);
    color: var(--color-texto);
    font-size: var(--letra-sm);
    font-weight: var(--peso-medio);
    font-family: inherit;
    cursor: pointer;
    line-height: 1.4;
    transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--color-fondo); text-decoration: none; border-color: var(--color-texto-tenue); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.btn--primario { background: var(--color-acento); border-color: var(--color-acento); color: var(--color-texto-inverso); }
.btn--primario:hover { background: var(--color-acento-hover); border-color: var(--color-acento-hover); }
.btn--ok { background: var(--color-exito); border-color: var(--color-exito); color: var(--color-texto-inverso); }
.btn--ok:hover { background: var(--color-exito-texto); border-color: var(--color-exito-texto); }
.btn--peligro { background: var(--color-superficie); border-color: var(--color-error-borde); color: var(--color-error); }
.btn--peligro:hover { background: var(--color-error-suave); }
.btn--sm { padding: var(--esp-1) var(--esp-2); font-size: var(--letra-xs); }
.btn--icono { padding: var(--esp-1) var(--esp-2); }
.btn--bloque { width: 100%; justify-content: center; }

/* Iconos de static/iconos.svg ({{ icono('nombre') }}): del tamano y color del texto */
.ico {
    width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em;
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.grupo-btn { display: flex; gap: var(--esp-2); flex-wrap: wrap; align-items: center; }
.grupo-btn--columna { flex-direction: column; }

/* ==========================================================================
   Pantalla de Facturación estilo caja (POS): dos columnas, tarjeta de total
   con degradado, filas etiqueta+campo densas. Ver EJEMPLO/pos.* (referencia
   visual que pidió el usuario, adaptada a las variables de este proyecto).
   ========================================================================== */

.pos-shell { max-width: 1280px; margin: 0 auto; }

.pos-grid { display: grid; grid-template-columns: 1.7fr .6fr; gap: var(--esp-4); align-items: start; }
.total-stack { display: grid; gap: var(--esp-4); align-content: start; }
@media (max-width: 1100px) { .pos-grid { grid-template-columns: 1fr; } }

/* Fila compacta "etiqueta: campo" */
.campo-fila {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    align-items: center;
    gap: var(--esp-2);
    margin-bottom: var(--esp-2);
    font-size: var(--letra-sm);
}
.campo-fila label { font-weight: var(--peso-semi); color: var(--color-texto); }
.campo-fila input, .campo-fila select { padding: var(--esp-1) var(--esp-2); font-size: var(--letra-sm); }
.campo-fila-doble { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--esp-4); }
@media (max-width: 700px) {
    .campo-fila-doble { grid-template-columns: 1fr; gap: 0; }
    .campo-fila { grid-template-columns: 1fr; align-items: start; gap: var(--esp-05); }
}
.campo-fila__grupo { display: flex; gap: var(--esp-1); }
.campo-fila__grupo input, .campo-fila__grupo select { min-width: 0; }
.campo-fila__grupo .btn--icono { flex: none; }

/* Botones circulares de acción en la cabecera de un panel (Facturación) */
.icono-circular {
    width: 1.9rem; height: 1.9rem; padding: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--letra-sm); flex: none;
}

/* Tarjeta de total con degradado */
.total-card {
    background: var(--color-acento-oscuro);
    color: var(--color-texto-inverso);
    border-radius: var(--radio);
    padding: var(--esp-4) var(--esp-4);
    display: grid;
    gap: var(--esp-2);
}
.total-card__etiqueta { font-size: var(--letra-sm); opacity: .85; }
.total-card__monto { font-size: var(--letra-2xl); font-weight: var(--peso-fuerte); line-height: 1.1; }
.total-card__items { font-size: var(--letra-xs); opacity: .85; margin: 0; }
.nowrap { white-space: nowrap; }
.total-card .tenue { color: var(--color-texto-inverso); opacity: .85; }
.total-card .badge { background: var(--sobre-oscuro-20); color: var(--color-texto-inverso); border-color: var(--sobre-oscuro-40); }
.total-card .grupo-btn { flex-direction: column; align-items: stretch; margin-top: var(--esp-1); }
.total-card .btn {
    justify-content: center; background: transparent; color: var(--color-texto-inverso);
    border: 1px dashed var(--sobre-oscuro-70);
}
.total-card .btn:hover { background: var(--sobre-oscuro-10); }
.total-card .btn--primario {
    background: var(--color-superficie); color: var(--color-acento-oscuro); border-color: var(--color-superficie); font-weight: var(--peso-fuerte);
}
.total-card .btn--primario:hover { background: var(--color-acento-suave); }

/* Cuadrícula para agregar un producto: código, cantidad, lista de precio /
   precio, descuento, impuesto -- en dos filas de 3; el botón Agregar queda
   chico, alineado a la derecha bajo Impuesto. */
.producto-entrada {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--esp-2);
    align-items: start;     /* etiquetas y casillas parejas; la ayuda (codigo, "Teclas 1, 2 o 3") cuelga debajo */
}
.producto-entrada .campo--agregar { grid-column: 3; display: flex; align-items: end; justify-content: flex-end; }

/* Mientras se consulta la existencia de nuevo, atenua el dato anterior en vez
   de borrarlo -- evita el parpadeo de "..." al cambiar de fila o bodega. */
[data-ubicacion-cantidad] { transition: opacity .15s; }
[data-ubicacion-cantidad].cargando { opacity: .4; }
/* Resumen de la factura: filas etiqueta-valor y el total destacado (es lo que se cobra) */
.resumen-total {
    background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio);
    padding: var(--esp-3) var(--esp-4); align-self: start;
}
.resumen-total__fila {
    display: flex; justify-content: space-between; gap: var(--esp-3); padding: var(--esp-1) 0;
    font-size: var(--letra-sm); color: var(--color-texto-secundario); font-variant-numeric: tabular-nums;
}
.resumen-total__total {
    margin-top: var(--esp-2); padding-top: var(--esp-3); border-top: 1px solid var(--color-borde);
    font-size: var(--letra-lg); font-weight: var(--peso-fuerte); color: var(--color-texto);
}
.resumen-total__total .num { font-size: var(--letra-xl); }
/* Agregar: accion principal de la fila de producto, a tamano normal */
.producto-entrada .campo--agregar .btn { min-width: 8rem; justify-content: center; }
/* Con el dedo, los botones redondos (buscar, camara) de 44 px */
/* Con el dedo (celular, tablet): todo boton y campo de al menos 44 px, como
   piden las guias de accesibilidad -- con mouse se mantienen compactos */
@media (pointer: coarse) {
    .icono-circular { width: 44px; height: 44px; }
    .btn, .btn--sm { min-height: 44px; }
    .menu__hamburguesa { min-width: 44px; min-height: 44px; }
    input[type=file] { min-height: 44px; }
}
@media (max-width: 640px) {
    .producto-entrada { grid-template-columns: 1fr; }
    .producto-entrada .campo--agregar { grid-column: 1; justify-content: stretch; }
}


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

.campo { margin-bottom: var(--esp-3); }
.campo > label {
    display: block;
    font-size: var(--letra-sm);
    font-weight: var(--peso-semi);
    color: var(--color-texto-secundario);
    margin-bottom: var(--esp-1);
}
.campo .ayuda { font-size: var(--letra-xs); color: var(--color-texto-tenue); margin-top: var(--esp-1); }
.campo .ayuda.neg { color: var(--color-alerta); }
.requerido::after { content: " *"; color: var(--color-error); }

input[type=text], input[type=password], input[type=number], input[type=date],
input[type=email], input[type=search], select, textarea {
    width: 100%;
    padding: var(--esp-2) var(--esp-2);
    border: 1px solid var(--color-borde-campo);
    border-radius: var(--radio-sm);
    font-family: inherit;
    font-size: var(--letra-sm);
    background: var(--color-superficie);
    color: var(--color-texto);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--color-acento-claro);
    box-shadow: 0 0 0 3px var(--color-foco);
}
input[readonly], input:disabled, select:disabled {
    background: var(--color-fondo); color: var(--color-texto-secundario); cursor: not-allowed;
}
textarea { min-height: 62px; resize: vertical; }
input.num, td input.num { text-align: right; }

input[type=number] { -moz-appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.fila-campos {
    display: grid;
    gap: var(--esp-3);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.filtros {
    display: flex; gap: var(--esp-2); flex-wrap: wrap; align-items: flex-end;
}
.filtros .campo { margin-bottom: 0; min-width: 130px; }
.filtros .campo--ancho { min-width: 240px; flex: 1; }

.check { display: flex; align-items: center; gap: var(--esp-2); font-size: var(--letra-sm); }
.check input { width: auto; }

/* ==========================================================================
   Avisos
   ========================================================================== */

.avisos { margin-bottom: var(--esp-4); display: flex; flex-direction: column; gap: var(--esp-2); }
.aviso {
    padding: var(--esp-3) var(--esp-4);
    border-radius: var(--radio-sm);
    border-left: 4px solid;
    font-size: var(--letra-sm);
    display: flex; gap: var(--esp-2); align-items: flex-start;
    margin-bottom: var(--esp-4);
}
.avisos > .aviso, .aviso:last-child { margin-bottom: 0; }   /* la lista ya los separa con gap */
.aviso .ico { margin-top: .15em; }
.aviso--ok     { background: var(--color-exito-suave);     border-color: var(--color-exito);     color: var(--color-exito-texto); }
.aviso--error  { background: var(--color-error-suave);  border-color: var(--color-error);  color: var(--color-error-texto); }
.aviso--alerta { background: var(--color-alerta-suave); border-color: var(--color-alerta); color: var(--color-alerta-texto); }
.aviso--info   { background: var(--color-acento-suave);   border-color: var(--color-acento);   color: var(--color-acento-oscuro); }

/* Dentro de un panel, la nota es texto de apoyo: sin caja dentro de la caja */
/* Informes de facturas: la lista de informes a la izquierda, el resultado a la derecha */
.informes { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: var(--esp-4); align-items: start; }
.informes__lista { display: flex; flex-direction: column; padding: var(--esp-1) 0; margin-bottom: 0; }
.informes__lista a { padding: var(--esp-2) var(--esp-3); color: var(--color-texto); font-size: var(--letra-sm); line-height: 1.3; }
.informes__lista-titulo { margin: 0; padding: var(--esp-2) var(--esp-3) var(--esp-1); font-size: var(--letra-xs);
    font-weight: var(--peso-semi); color: var(--color-texto-tenue); }
.informes__lista a:hover { background: var(--color-superficie-suave); }
.informes__lista a.activo { background: var(--color-acento-suave); color: var(--color-acento); font-weight: var(--peso-semi);
    box-shadow: inset 3px 0 0 var(--color-acento); }
@media (max-width: 900px) { .informes { grid-template-columns: minmax(0, 1fr); } }

/* Rol de pagos: fila de grupos (EMPLEADO | DIAS | INGRESOS | DESCUENTOS | TOTALES) */
table.tabla .tabla--rol__grupos th { text-align: center; }
table.tabla .tabla--rol__grupos th + th { border-left: 1px solid var(--color-borde-fuerte); }
.panel .nota { background: none; border: 0; padding: 0; color: var(--color-texto-secundario); }
.globo-muestra { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: var(--esp-1); }
.nota {
    background: var(--color-acento-suave);
    border: 1px solid var(--color-acento-borde);
    border-radius: var(--radio-sm);
    padding: var(--esp-2) var(--esp-3);
    font-size: var(--letra-sm);
    color: var(--color-acento-oscuro);
    margin-bottom: var(--esp-4);
}

/* ==========================================================================
   Buscador de productos (autocompletado)
   ========================================================================== */

.buscador { position: relative; }
.input-grande { font-size: var(--letra-md); padding: var(--esp-3) var(--esp-3); }
.buscador__resultados {
    position: absolute;
    z-index: 60;
    left: 0; right: 0; top: calc(100% + 3px);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde-fuerte);
    border-radius: var(--radio-sm);
    box-shadow: var(--sombra-alta);
    max-height: 320px;
    overflow-y: auto;
    display: none;
}
.buscador__resultados.visible { display: block; }
.buscador__item {
    padding: var(--esp-2) var(--esp-3);
    cursor: pointer;
    border-bottom: 1px solid var(--color-borde);
    display: flex; gap: var(--esp-3); align-items: center;
}
.buscador__item:last-child { border-bottom: none; }
.buscador__item:hover, .buscador__item.activo { background: var(--color-acento-suave); }
.buscador__item .sku { font-family: var(--fuente-mono); font-size: var(--letra-xs); color: var(--color-texto-secundario); }
.buscador__item .nombre { font-weight: var(--peso-medio); }
.buscador__item .saldo { margin-left: auto; text-align: right; font-size: var(--letra-xs); white-space: nowrap; }
.buscador__item--crear { color: var(--color-acento); font-weight: var(--peso-semi); }
.buscador__mas { justify-content: center; color: var(--color-acento); font-weight: var(--peso-semi); min-height: 44px; }

.producto-buscar-fila { display: flex; gap: var(--esp-2); align-items: center; }
.producto-buscar-fila input { flex: 1; min-width: 0; }

/* ==========================================================================
   Ventana de busqueda avanzada de productos (Facturacion)
   ========================================================================== */

.modal-buscar-producto {
    width: min(900px, 92vw);
    max-height: 85vh;
    border: 1px solid var(--color-borde-fuerte);
    border-radius: var(--radio);
    box-shadow: var(--sombra-alta);
    padding: var(--esp-4);
}
.modal-buscar-producto::backdrop { background: var(--color-velo); }
.modal-buscar-producto__cabecera {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: var(--esp-4);
}
.modal-buscar-producto__cabecera h3 { margin: 0; }
.modal-buscar-producto__filtros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--esp-3);
    margin-bottom: var(--esp-3);
}
.modal-buscar-producto__resultados { margin-top: var(--esp-4); max-height: 45vh; }
.modal-buscar-producto__resultados tbody tr { cursor: pointer; }
.modal-buscar-producto__resultados tbody tr:hover { background: var(--color-acento-suave); }

/* Con decenas de miles de productos: ventana mas grande, filtros en una
   fila, la lista ocupa todo el alto que queda y se recorre con el teclado */
@media (min-width: 641px) {
    .modal-buscar-producto { width: min(1280px, 96vw); height: min(88vh, 960px); max-height: 88vh; }
    .modal-buscar-producto[open] { display: flex; flex-direction: column; }
    .modal-buscar-producto__resultados { flex: 1; max-height: none; min-height: 0; overflow-y: auto; }
}
@media (min-width: 1000px) {
    .modal-buscar-producto__filtros { grid-template-columns: minmax(260px, 2.4fr) repeat(4, minmax(0, 1fr)) auto; align-items: end; }
}
.modal-buscar-producto__filtros .campo { margin-bottom: 0; min-width: 0; }
.modal-buscar-producto__filtros select, .modal-buscar-producto__filtros input:not([type=checkbox]) { width: 100%; }
.modal-buscar-producto__stock { white-space: nowrap; align-self: end; padding-bottom: var(--esp-2); }
.modal-buscar-producto__estado { margin: var(--esp-3) 0 0; min-height: 1.4em; }
.modal-buscar-producto__resultados { margin-top: var(--esp-2); }
.modal-buscar-producto__resultados tbody tr:focus-visible { outline: 2px solid var(--color-foco); outline-offset: -2px; background: var(--color-acento-suave); }
.modal-buscar-producto__resultados td.stock-si { font-weight: var(--peso-semi); color: var(--color-exito-texto); }
.modal-buscar-producto__resultados td.stock-no { color: var(--color-texto-secundario); }

/* ==========================================================================
   Ventana superpuesta "Nuevo producto" (iframe al formulario en modo embebido)
   ========================================================================== */

.modal-producto-nuevo {
    width: min(1100px, 96vw);
    height: min(88vh, 900px);
    padding: 0;
    border: 1px solid var(--color-borde-fuerte);
    border-radius: var(--radio);
    box-shadow: var(--sombra-alta);
    overflow: hidden;
}
.modal-producto-nuevo[open] { display: flex; flex-direction: column; }
.modal-producto-nuevo::backdrop { background: var(--color-velo); }
.modal-producto-nuevo__cabecera {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--esp-2) var(--esp-4); border-bottom: 1px solid var(--color-borde);
}
.modal-producto-nuevo__cabecera h3 { margin: 0; }
.modal-producto-nuevo__cuerpo { position: relative; flex: 1; display: flex; }
.modal-producto-nuevo iframe { flex: 1; width: 100%; border: 0; }
/* Esqueleto del formulario encima del iframe mientras carga (no mueve nada al irse) */
.modal-producto-nuevo__carga { position: absolute; inset: 0; background: var(--color-superficie); padding: var(--esp-4); overflow: hidden; }
body.embebido { background: var(--color-superficie); }
body.embebido .contenido { padding: var(--esp-4) var(--esp-4); }
/* Los botones (Crear/Cancelar) quedan fijos al pie de la ventana: el formulario es largo. */
body.embebido form > .grupo-btn {
    position: sticky; bottom: 0; z-index: 5;
    background: var(--color-superficie); padding: var(--esp-3) 0; margin-top: var(--esp-4);
    border-top: 1px solid var(--color-borde);
}

/* ==========================================================================
   Graficos SVG propios
   ========================================================================== */

.gr { width: 100%; height: auto; display: block; overflow: visible; }
.gr text { font-family: var(--fuente); font-size: var(--letra-xs); fill: var(--color-texto-tenue); }
.gr .eje { stroke: var(--color-borde); stroke-width: 1; }
.gr .rejilla-linea { stroke: var(--color-borde); stroke-width: 1; stroke-dasharray: 3 3; }
.leyenda { display: flex; gap: var(--esp-4); flex-wrap: wrap; font-size: var(--letra-xs); color: var(--color-texto-secundario); }
.leyenda span { display: inline-flex; align-items: center; gap: var(--esp-1); }
.leyenda i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
/* Serie punteada: se distingue sin depender del color (daltonismo rojo-verde) */
.leyenda i.leyenda__punteada { width: 14px; height: 0; border-radius: 0; border-top: 2px dashed; background: none !important; }

.barra-progreso {
    height: 6px; background: var(--color-borde); border-radius: 3px; overflow: hidden; min-width: 60px;
}
.barra-progreso > i { display: block; height: 100%; background: var(--color-acento-claro); }
.barra-progreso > i.ok { background: var(--color-exito); }
.barra-progreso > i.alerta { background: var(--color-alerta); }
.barra-progreso > i.error { background: var(--color-error); }

/* ==========================================================================
   Login
   ========================================================================== */

/* Fondo del azul del menu (sin pantalla blanca); todo centrado en una
   columna: logo y nombre arriba, el formulario en una tarjeta clara. */
.login {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 380px);
    justify-content: center;
    align-content: center;
    gap: var(--esp-6);
    background: var(--menu-fondo);
    padding: var(--esp-6) var(--esp-4);
}
.login__marca { color: var(--color-texto); text-align: center; margin-bottom: var(--esp-6); }
.login__marca h1 { margin: 0; font-size: var(--letra-2xl); line-height: 1.2; color: var(--color-acento); }
.login__marca p { margin: var(--esp-1) 0 0; color: var(--color-texto-secundario); font-weight: var(--peso-medio); }
.login__marca h1 { font-weight: var(--peso-titulo); letter-spacing: -.02em; }
.login__logo { display: block; width: 72px; height: 72px; margin: 0 auto var(--esp-3); }
.login__tarjeta {
    background: var(--color-superficie);
    border-radius: var(--radio);
    padding: var(--esp-8);
    width: 100%;
    box-shadow: var(--sombra-alta);
}
@media (prefers-reduced-motion: reduce) { .menu a { transition: none; } }
.login__titulo { margin: 0 0 var(--esp-4); font-size: var(--letra-lg); text-align: center; }
/* Campos y boton de 44 px: comodos con el dedo y con el mouse */
.login input, .login .btn { min-height: 44px; }
.login__clave { position: relative; }
.login__clave input { padding-right: 48px; }
.login__ver {
    position: absolute; top: 0; right: 0; width: 44px; height: 100%;
    display: grid; place-items: center; border: 0; background: none; cursor: pointer;
    color: var(--color-texto-tenue); border-radius: 0 var(--radio) var(--radio) 0;
}
.login__ver:hover, .login__ver[aria-pressed="true"] { color: var(--color-acento); }
.login__ver:focus-visible { outline: 2px solid var(--color-foco); outline-offset: -2px; }
.login__ver .ico { width: 20px; height: 20px; }
.login__mayusculas { margin: var(--esp-1) 0 0; font-size: var(--letra-xs); color: var(--color-alerta-texto);
                     display: flex; align-items: center; gap: var(--esp-1); }
.login__mayusculas[hidden] { display: none; }
.login__mayusculas .ico { width: 14px; height: 14px; }
.login .btn[disabled] { opacity: .75; cursor: progress; }
.login__pie { margin-top: var(--esp-4); font-size: var(--letra-xs); color: var(--color-texto-tenue); text-align: center; }
@media (max-width: 760px) {
    .login__logo { width: 60px; height: 60px; }
    .login__marca h1 { font-size: var(--letra-xl); }
    .login__tarjeta { padding: var(--esp-6); }
}

/* ==========================================================================
   Paginacion, tabs, utilidades
   ========================================================================== */

.paginacion { display: flex; gap: var(--esp-1); align-items: center; justify-content: center; padding: var(--esp-3); }
.paginacion a, .paginacion span {
    padding: var(--esp-1) var(--esp-2); border-radius: var(--radio-sm);
    border: 1px solid var(--color-borde-fuerte); font-size: var(--letra-xs); background: var(--color-superficie);
}
.paginacion .actual { background: var(--color-acento); color: var(--color-texto-inverso); border-color: var(--color-acento); }

/* "Cargar mas" (paginacion por cursor): las filas nuevas se agregan debajo */
.cargar-mas {
    display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4); align-items: center; justify-content: center;
    padding: var(--esp-3); border-top: 1px solid var(--color-borde);
}
.cargar-mas .btn[aria-disabled="true"] { opacity: .6; pointer-events: none; }

.tabs { display: flex; gap: var(--esp-1); border-bottom: 1px solid var(--color-borde); margin-bottom: var(--esp-4); }
.tabs a {
    padding: var(--esp-2) var(--esp-4); font-size: var(--letra-sm); color: var(--color-texto-secundario);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs a:hover { color: var(--color-acento); text-decoration: none; }
.tabs a.activo { color: var(--color-acento); border-bottom-color: var(--color-acento); font-weight: var(--peso-semi); }

.lista-datos { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--esp-1) var(--esp-4); font-size: var(--letra-sm); }
.lista-datos dt { color: var(--color-texto-tenue); font-size: var(--letra-xs); }
.lista-datos dd { margin: 0; font-weight: var(--peso-medio); overflow-wrap: anywhere; }

.pos { color: var(--color-exito); }
.neg { color: var(--color-error); }
.centro { text-align: center; }
.dcha { text-align: right; }
.oculto { display: none !important; }
.mt { margin-top: var(--esp-4); }
.mt-sm { margin-top: var(--esp-2); }
.mt-0 { margin-top: 0; }
.mb { margin-bottom: var(--esp-4); }
.m-0 { margin: 0; }
.ancho-completo { width: 100%; }
.ancho-auto { width: auto; }
.col-min { width: 1%; }
.en-linea { display: inline; }
.peso-normal, .lista-datos .peso-normal { font-weight: var(--peso-normal); }
.mayusculas { text-transform: uppercase; }
.mb0 { margin-bottom: 0; }
.pequeno { font-size: var(--letra-xs); }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Menú lateral en pantallas chicas: en vez de aplastarlo en una barra
   horizontal (ilegible con 20+ enlaces), se oculta fuera de pantalla y se
   abre como cajón encima del contenido, con un botón ☰ en la barra
   superior para abrirlo/cerrarlo. */
.menu__hamburguesa { display: none; }
.menu__fondo { display: none; }

@media (max-width: 900px) {
    .app { flex-direction: column; }
    .menu__hamburguesa {
        display: inline-flex; align-items: center; justify-content: center;
        width: 2.1rem; height: 2.1rem; border-radius: var(--radio-sm);
        font-size: var(--letra-md); flex: none;
    }
    .menu {
        position: fixed; top: 0; left: 0; z-index: 60;
        width: min(78vw, 300px); flex: none;
        transform: translateX(-100%);
        transition: transform .18s ease;
        box-shadow: var(--sombra);
    }
    .app.menu-abierto .menu { transform: translateX(0); }
    .menu__fondo {
        position: fixed; inset: 0; z-index: 55;
        background: var(--color-velo);
    }
    .app:not(.menu-abierto) .menu__fondo { display: none; }
    .app.menu-abierto .menu__fondo { display: block; }
    .contenido { padding: var(--esp-3); }
}

@media (max-width: 640px) {
    /* Carrito de facturación en celular: tabla ancha -> tarjetas apiladas,
       una por línea, con el nombre de cada columna al lado del valor. */
    table.tabla--carrito thead { display: none; }
    table.tabla--carrito, table.tabla--carrito tbody, table.tabla--carrito tr,
    table.tabla--carrito td { display: block; width: 100%; }
    table.tabla--carrito tr {
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-sm);
        margin-bottom: var(--esp-2);
        padding: var(--esp-1) var(--esp-3);
    }
    table.tabla--carrito td {
        display: flex; justify-content: space-between; gap: var(--esp-3);
        border-bottom: 1px dashed var(--color-borde);
        padding: var(--esp-2) 0;
    }
    table.tabla--carrito td:last-child { border-bottom: none; justify-content: flex-end; }
    table.tabla--carrito td[data-label]::before {
        content: attr(data-label);
        font-weight: var(--peso-semi);
        color: var(--color-texto-secundario);
        font-size: var(--letra-xs);
    }
    /* Carrito editable (facturacion, proformas, planes): tarjeta compacta de
       3 renglones en vez de 7 -- producto / cantidad x precio = total /
       descuento e IVA con Quitar. Columnas: 1 producto, 2 cant, 3 PVP,
       4 desc, 5 imp, 6 total, 7 quitar. */
    table.tabla--carrito [data-carrito-filas] tr {
        display: grid; align-items: center; gap: var(--esp-1) var(--esp-2);
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        grid-template-areas: "prod prod prod prod" "cant pvp . total" "desc imp . quitar";
        padding: var(--esp-2) var(--esp-3);
    }
    table.tabla--carrito [data-carrito-filas] td { border: 0; padding: 0; width: auto; display: block; }
    table.tabla--carrito [data-carrito-filas] td::before { display: none; }
    table.tabla--carrito [data-carrito-filas] td:nth-child(1) { grid-area: prod; font-weight: var(--peso-semi); }
    table.tabla--carrito [data-carrito-filas] td:nth-child(2) { grid-area: cant; }
    table.tabla--carrito [data-carrito-filas] td:nth-child(3) { grid-area: pvp; color: var(--color-texto-secundario); }
    table.tabla--carrito [data-carrito-filas] td:nth-child(3)::before { display: inline; content: "× "; font-size: var(--letra-sm); font-weight: var(--peso-normal); }
    table.tabla--carrito [data-carrito-filas] td:nth-child(4), table.tabla--carrito [data-carrito-filas] td:nth-child(5) { font-size: var(--letra-xs); color: var(--color-texto-tenue); }
    table.tabla--carrito [data-carrito-filas] td:nth-child(4) { grid-area: desc; }
    table.tabla--carrito [data-carrito-filas] td:nth-child(5) { grid-area: imp; }
    table.tabla--carrito [data-carrito-filas] td:nth-child(4)::before { display: inline; content: "Desc. "; font-size: var(--letra-xs); font-weight: var(--peso-normal); }
    table.tabla--carrito [data-carrito-filas] td:nth-child(5)::before { display: inline; content: "IVA "; font-size: var(--letra-xs); font-weight: var(--peso-normal); }
    /* Lineas de un documento ya emitido (factura, proforma): 2 renglones en
       vez de 6 -- producto y total / cant x precio, desc. e IVA. Columnas:
       1 producto, 2 cant, 3 precio, 4 desc, 5 imp, 6 total. */
    table.tabla--lineas tbody tr {
        display: grid; align-items: baseline; gap: var(--esp-1) var(--esp-1);
        grid-template-columns: auto auto auto auto minmax(0, 1fr) auto;
        grid-template-areas: "prod prod prod prod prod total" "cant pvp desc imp . .";
        padding: var(--esp-2) var(--esp-3);
    }
    table.tabla--lineas tbody td { border: 0; padding: 0; width: auto; display: block; }
    table.tabla--lineas td[data-label]::before { display: none; }
    table.tabla--lineas tbody td:nth-child(1) { grid-area: prod; font-weight: var(--peso-semi); font-size: var(--letra-md); }
    table.tabla--lineas tbody td:nth-child(1) div { display: inline; margin-left: var(--esp-1); }
    table.tabla--lineas tbody td:nth-child(6) { grid-area: total; font-weight: var(--peso-semi); font-size: var(--letra-md); }
    table.tabla--lineas tbody td:nth-child(n+2):nth-child(-n+5) { font-size: var(--letra-sm); color: var(--color-texto-secundario); }
    table.tabla--lineas tbody td:nth-child(2) { grid-area: cant; }
    table.tabla--lineas tbody td:nth-child(3) { grid-area: pvp; }
    table.tabla--lineas tbody td:nth-child(4) { grid-area: desc; }
    table.tabla--lineas tbody td:nth-child(5) { grid-area: imp; }
    table.tabla--lineas td[data-label]:nth-child(3)::before { display: inline; content: "× "; }
    table.tabla--lineas td[data-label]:nth-child(4)::before { display: inline; content: "· Desc. "; }
    table.tabla--lineas td[data-label]:nth-child(5)::before { display: inline; content: "· IVA "; }
    table.tabla--lineas td.sin-descuento { display: none; }
    table.tabla--carrito [data-carrito-filas] td:nth-child(6) { grid-area: total; font-size: var(--letra-md); font-weight: var(--peso-fuerte); }
    table.tabla--carrito [data-carrito-filas] td:nth-child(7) { grid-area: quitar; justify-self: end; }
    table.tabla--carrito [data-carrito-filas] input.cantidad-linea { width: 5.5rem; min-height: 44px; }
    table.tabla--carrito [data-carrito-filas] .btn--sm { min-height: 44px; }
}

/* ==========================================================================
   Dialogo de confirmacion / aviso (reemplaza confirm()/alert() nativos)
   ========================================================================== */

.modal-fondo {
    position: fixed; inset: 0;
    z-index: 500;
    background: var(--color-velo);
    display: flex; align-items: center; justify-content: center;
    padding: var(--esp-4);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}
.modal-fondo.visible { opacity: 1; pointer-events: auto; }

.modal-caja {
    background: var(--color-superficie);
    border-radius: var(--radio);
    box-shadow: var(--sombra-alta);
    width: 100%;
    max-width: 420px;
    padding: var(--esp-4) var(--esp-6) var(--esp-4);
    transform: translateY(10px) scale(.97);
    transition: transform .15s ease;
}
.modal-fondo.visible .modal-caja { transform: translateY(0) scale(1); }

.modal-caja__cabecera { display: flex; gap: var(--esp-3); align-items: flex-start; }
.modal-caja__icono {
    flex: none;
    width: 2.1rem; height: 2.1rem;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--letra-md);
    background: var(--color-acento-suave); color: var(--color-acento);
}
.modal-caja--peligro .modal-caja__icono { background: var(--color-error-suave); color: var(--color-error); }
/* Confirmar con contraseña (eliminar en lote) */
.modal-caja__clave { margin: var(--esp-4) 0 0; }
.modal-caja__clave input { width: 100%; }
.modal-caja__mensaje {
    margin: var(--esp-1) 0 0;
    color: var(--color-texto);
    font-size: var(--letra-sm);
    line-height: 1.45;
}
.modal-caja__acciones {
    display: flex; justify-content: flex-end; gap: var(--esp-2);
    margin-top: var(--esp-4);
}
.modal-caja--peligro .btn--primario { background: var(--color-error); border-color: var(--color-error); }
.modal-caja--peligro .btn--primario:hover { background: var(--color-error-texto); border-color: var(--color-error-texto); }

/* ==========================================================================
   Impresion
   ========================================================================== */

@media print {
    .menu, .barra, .acciones, .filtros, .no-imprimir, .paginacion { display: none !important; }
    .informes { display: block; }
    body { background: var(--color-superficie); font-size: var(--letra-xs); }
    .panel { box-shadow: none; border: 1px solid var(--color-texto-tenue); page-break-inside: avoid; }
    .contenido { padding: 0; max-width: none; }
    table.tabla th { background: var(--color-borde) !important; -webkit-print-color-adjust: exact; }
    a { color: inherit; text-decoration: none; }
}

/* ==========================================================================
   Vista movil (celular y tablet): clase "movil" en <html>, puesta por
   _movil_head.html. El sistema se reduce a Facturacion y Cuentas por pagar,
   con navegacion abajo (al alcance del pulgar) y controles de 44px o mas.
   ========================================================================== */

/* Letra en el celular: cuerpo de 16px y nada por debajo de 14px (se lee sin
   acercar el telefono). Sube la escala entera, asi todo guarda su proporcion. */
html.movil { --letra-xs: .875rem; --letra-sm: 1rem; --letra-md: 1.0625rem; }
/* Codigos (.mono, al 82% de su texto) en tablas y notas: tampoco bajo 14px */
html.movil td.mono, html.movil td .mono, html.movil dd.mono, html.movil .pequeno.mono, html.movil .pequeno .mono,
html.movil .tenue.mono { font-size: var(--letra-xs); }

.solo-movil, .menu a.solo-movil, .barra-inferior, .barra-cobro { display: none; }
html.movil .solo-escritorio { display: none !important; }
/* Busqueda rapida del celular: la marca debajo de la descripcion (no cabe otra columna) */
.buscar-marca { display: none; }
html.movil .busqueda-rapida .buscar-marca { display: block; }

/* Menu: solo los enlaces marcados data-movil */
html.movil .menu a:not([data-movil]),
html.movil .menu__titulo { display: none; }
html.movil .menu a.solo-movil { display: flex; }
html.movil .solo-movil:not(a) { display: block; }

/* Datos de un documento ya emitido, en el celular: resumen en vez de casillas grises */
.resumen-doc p { margin: 0; }
.resumen-doc__nombre { font-size: var(--letra-lg); font-weight: var(--peso-semi); overflow-wrap: anywhere; }
.resumen-doc__linea { color: var(--color-texto-tenue); font-size: var(--letra-md); margin-top: var(--esp-1) !important; }
.resumen-doc .aviso { margin: var(--esp-3) 0 0; }
.resumen-doc .plegable { margin-top: var(--esp-3); }
.resumen-doc summary { gap: var(--esp-1); }
.resumen-doc summary .ico { width: 1.1rem; height: 1.1rem; transform: rotate(-90deg); transition: transform .15s ease; }
.resumen-doc details[open] summary .ico { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .resumen-doc summary .ico { transition: none; } }
.resumen-doc .lista-datos { font-size: var(--letra-md); }
.resumen-doc .lista-datos dt { font-size: var(--letra-sm); }

/* Documento nuevo en el celular: lo secundario (fecha, bodega, caja, descuento...)
   tras un boton "Mas datos"; los campos siguen en el formulario y se envian igual */
.boton-mas-datos {
    display: none; background: none; border: 0; padding: var(--esp-05) 0; cursor: pointer; font: inherit;
    font-weight: var(--peso-semi); color: var(--color-acento); align-items: center; gap: var(--esp-1);
}
html.movil .boton-mas-datos { display: flex; min-height: 44px; grid-column: 1 / -1; }
.boton-mas-datos .ico { width: 1.1rem; height: 1.1rem; transform: rotate(-90deg); transition: transform .15s ease; }
.mas-datos-abierto .boton-mas-datos .ico { transform: rotate(90deg); }
html.movil [data-mas-datos-zona]:not(.mas-datos-abierto) .campo-secundario { display: none; }
@media (prefers-reduced-motion: reduce) { .boton-mas-datos .ico { transition: none; } }
html.movil .menu__grupo:not(:has(a[data-movil])) { display: none; }
html.movil .menu a { padding: var(--esp-3) var(--esp-4); font-size: var(--letra-md); }

/* Volver a la vista movil desde la version completa: solo en celular/tablet */
.boton-vista, .menu a.menu__vista-movil { display: none; }
html.puede-movil:not(.movil) .boton-vista { display: inline-flex; white-space: nowrap; }
html.puede-movil:not(.movil) .menu a.menu__vista-movil { display: flex; color: var(--color-texto-inverso); font-weight: var(--peso-semi); }
.boton-vista__corto { display: none; }
/* Pantalla chica en version completa: barra superior en una sola linea */
@media (max-width: 640px) {
    .boton-vista__largo { display: none; }
    .boton-vista__corto { display: inline; }
    .barra { gap: var(--esp-2); padding: 0 var(--esp-3); }
    .barra__titulo { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .usuario-chip__datos { display: none; }
    .usuario-chip { padding: var(--esp-1); }
}

/* Barra superior compacta */
html.movil .barra { gap: var(--esp-2); padding: 0 var(--esp-3); }
html.movil .barra__titulo { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.movil .usuario-chip__datos { display: none; }
html.movil .usuario-chip { padding: var(--esp-1); }

/* Navegacion inferior fija */
html.movil body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
html.movil body:has(> .login) { padding-bottom: 0; }   /* el login no tiene barra inferior */
html.movil .barra-inferior {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--color-superficie);
    border-top: 1px solid var(--color-borde);
    box-shadow: var(--sombra-arriba);
    padding-bottom: env(safe-area-inset-bottom);
}
.barra-inferior a {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--esp-05); min-height: 60px;
    font-size: var(--letra-xs); color: var(--color-texto-secundario);
    border-top: 3px solid transparent;
}
.barra-inferior .ico { width: 22px; height: 22px; }
.barra-inferior a:hover { text-decoration: none; }
.barra-inferior a.activo { color: var(--color-acento); font-weight: var(--peso-fuerte); border-top-color: var(--color-acento-claro); }

/* Boton central "Facturar": 5 columnas y el CTA siempre en la del medio,
   aunque al rol le falte alguno de los otros enlaces */
html.movil .barra-inferior--cta { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.barra-inferior a.barra-inferior__cta {
    grid-column: 3; color: var(--color-acento); font-weight: var(--peso-fuerte);
    border-top-color: transparent; justify-content: flex-end; padding-bottom: var(--esp-1);
}
.barra-inferior__boton {
    display: grid; place-items: center;
    width: 58px; height: 58px; margin-top: calc(-1 * var(--esp-6));
    border-radius: 50%; border: 4px solid var(--color-superficie);
    background: var(--color-acento); color: var(--color-texto-inverso);
    box-shadow: var(--sombra-alta);
}
.barra-inferior .barra-inferior__boton .ico { width: 28px; height: 28px; }
.barra-inferior__cta:active .barra-inferior__boton, .barra-inferior__cta.activo .barra-inferior__boton { background: var(--color-acento-oscuro); }

/* Al facturar: total y "Guardar" siempre visibles abajo */
html.movil .barra-cobro {
    display: flex; align-items: center; gap: var(--esp-3);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: var(--esp-2) var(--esp-3) calc(var(--esp-2) + env(safe-area-inset-bottom));
    background: var(--color-acento-oscuro);
    color: var(--color-texto-inverso);
    box-shadow: var(--sombra-arriba);
}
.barra-cobro__total { flex: 1; display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.barra-cobro__total > span { font-size: var(--letra-xs); opacity: .85; }
.barra-cobro__total strong { font-size: var(--letra-xl); }
.barra-cobro .btn {
    min-height: 48px; padding: 0 var(--esp-4);
    background: var(--color-superficie); color: var(--color-acento-oscuro); border-color: var(--color-superficie);
    font-weight: var(--peso-fuerte); font-size: var(--letra-md);
}
.barra-cobro .btn:disabled { opacity: .55; }
/* En computadora: la misma barra flota abajo a la derecha solo mientras el
   resumen del total no se ve (app.js la marca con --flotante al subir) */
html:not(.movil) .barra-cobro--flotante {
    display: flex; align-items: center; gap: var(--esp-4);
    position: fixed; right: var(--esp-6); bottom: var(--esp-4); z-index: 40;
    min-width: 320px; padding: var(--esp-3) var(--esp-4);
    border-radius: var(--radio);
    background: var(--color-acento-oscuro); color: var(--color-texto-inverso);
    box-shadow: var(--sombra-alta);
    animation: barra-cobro-entra .18s ease-out;
}
html:not(.movil) .barra-cobro--flotante .btn { min-height: 44px; }
@keyframes barra-cobro-entra { from { opacity: 0; transform: translateY(var(--esp-2)); } }
@media (prefers-reduced-motion: reduce) { html:not(.movil) .barra-cobro--flotante { animation: none; } }

/* Controles tactiles: 16px evita el zoom automatico de iOS al enfocar */
html.movil input[type=text], html.movil input[type=password], html.movil input[type=number],
html.movil input[type=date], html.movil input[type=email], html.movil input[type=search],
html.movil input[type=tel], html.movil select, html.movil textarea,
html.movil .campo-fila input, html.movil .campo-fila select {
    font-size: var(--letra-md);
    min-height: 44px;
    padding: var(--esp-2) var(--esp-3);
}
html.movil input[type=tel] {
    width: 100%; border: 1px solid var(--color-borde-campo); border-radius: var(--radio-sm);
    font-family: inherit; background: var(--color-superficie); color: var(--color-texto);
}
html.movil .btn { min-height: 44px; }
html.movil .btn--sm { min-height: 44px; padding: var(--esp-1) var(--esp-3); font-size: var(--letra-sm); }
html.movil .check { font-size: var(--letra-md); min-height: 40px; }
html.movil .check input { width: 20px; height: 20px; }
html.movil input.check-grande { width: 24px; height: 24px; }
html.movil .campo-fila { font-size: var(--letra-sm); }
html.movil .icono-circular { width: 44px; height: 44px; font-size: var(--letra-md); }
html.movil h1 { font-size: var(--letra-lg); font-weight: var(--peso-titulo); letter-spacing: -.01em; }

/* Indicadores mas compactos */
html.movil .rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-2); }
html.movil .rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-2); }
html.movil .kpi { padding: var(--esp-2) var(--esp-3); }
html.movil .kpi__valor { font-size: var(--letra-lg); }
html.movil .rejilla--3 .kpi__nota { display: none; }
html.movil .kpi__etiqueta { font-size: var(--letra-xs); }

/* Facturacion: entrada de producto en dos columnas */
html.movil .producto-entrada { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.movil .producto-entrada .campo { margin-bottom: 0; }
html.movil .producto-entrada .campo--ancho-movil { grid-column: 1 / -1; }
html.movil .producto-entrada .campo--agregar .btn {
    width: 100%; justify-content: center; min-height: 48px; font-size: var(--letra-md);
}
html.movil .input-grande { font-size: var(--letra-md); }

/* Orden de la entrada de producto en el celular:
   codigo | cantidad precio | lista de precio | desc imp | agregar */
html.movil .producto-entrada > .buscador { order: 1; }
html.movil .producto-entrada > .campo:has(#cantidad) { order: 2; }
html.movil .producto-entrada > .campo:has(#precio_unitario) { order: 3; }
html.movil .producto-entrada > .campo:has(#lista_precio) { order: 4; }
html.movil .producto-entrada > .boton-mas-datos { order: 5; }
html.movil .producto-entrada > .campo:has(#descuento_pct) { order: 5; }
html.movil .producto-entrada > .campo:has(#impuesto_pct) { order: 6; }
html.movil .producto-entrada > .campo--agregar { order: 7; }

/* Busqueda de producto a pantalla completa */
html.movil .modal-buscar-producto {
    width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
    margin: 0; border: 0; border-radius: 0; padding: var(--esp-4);
}
html.movil .modal-buscar-producto[open] { display: flex; flex-direction: column; }
html.movil .modal-buscar-producto__filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-2); }
html.movil .modal-buscar-producto__filtros .campo { margin-bottom: 0; }
html.movil .modal-buscar-producto__filtros .campo:first-child { grid-column: 1 / -1; }
html.movil .modal-buscar-producto__resultados { flex: 1; max-height: none; }
html.movil .modal-buscar-producto__resultados td { padding: var(--esp-3) var(--esp-2); }

/* Escaner de codigo de barras (camara): solo en la vista movil */
.boton-camara { display: none; }
html.movil .boton-camara:not([hidden]) { display: inline-flex; }
.escaner {
    width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
    margin: 0; padding: 0; border: 0;
    background: var(--escaner-video); color: var(--color-texto-inverso);
}
.escaner[open] { display: flex; flex-direction: column; }
.escaner::backdrop { background: var(--escaner-video); }
.escaner__video { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.escaner__video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.escaner__guia {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
.escaner__guia span {
    width: min(82vw, 520px); height: min(34vw, 220px);
    border: 3px solid var(--sobre-oscuro-90); border-radius: 12px;
    box-shadow: 0 0 0 100vmax var(--color-velo);
    position: relative;
}
.escaner__guia span::after {
    content: ""; position: absolute; left: 6%; right: 6%; top: 50%; height: 2px;
    background: var(--escaner-linea); box-shadow: 0 0 8px var(--escaner-linea);
    animation: escaner-linea 1.6s ease-in-out infinite alternate;
}
@keyframes escaner-linea { from { transform: translateY(-40px); } to { transform: translateY(40px); } }
.escaner__pie {
    padding: var(--esp-4) var(--esp-4) calc(var(--esp-4) + env(safe-area-inset-bottom));
    background: var(--escaner-panel);
}
.escaner__mensaje { margin: 0 0 var(--esp-3); text-align: center; font-size: var(--letra-md); }
.escaner__botones { display: flex; gap: var(--esp-2); }
.escaner__botones .btn { flex: 1; justify-content: center; min-height: 48px; font-size: var(--letra-md); }

/* Formularios secundarios plegables */
.plegable > summary {
    cursor: pointer; font-weight: var(--peso-semi); color: var(--color-acento);
    padding: var(--esp-05) 0; min-height: 32px;
}
.plegable[open] > summary { margin-bottom: var(--esp-3); }
html.movil .plegable > summary { min-height: 44px; display: flex; align-items: center; }

/* Parametros en celular: cada uno a todo el ancho (nombre, campo, para que sirve) */
@media (max-width: 640px) {
    .tabla--parametros thead { display: none; }
    .tabla--parametros tr, .tabla--parametros td { display: block; width: 100%; }
    .tabla--parametros tr { padding: var(--esp-3) 0; border-bottom: 1px solid var(--color-borde); }
    .tabla--parametros td { border: 0; padding: var(--esp-1) 0; }
}

/* Tablas que pasan a tarjetas en pantalla chica */
@media (max-width: 640px) {
    table.tabla--tarjetas thead { display: none; }
    table.tabla--tarjetas, table.tabla--tarjetas tbody, table.tabla--tarjetas tfoot,
    table.tabla--tarjetas tr, table.tabla--tarjetas td { display: block; width: 100%; }
    table.tabla--tarjetas tbody { padding: var(--esp-2); }
    table.tabla--tarjetas tbody tr {
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-sm);
        margin-bottom: var(--esp-2);
        padding: var(--esp-1) var(--esp-3);
        background: var(--color-superficie);
    }
    table.tabla--tarjetas td {
        display: flex; justify-content: space-between; align-items: center; gap: var(--esp-3);
        border-bottom: 1px dashed var(--color-borde);
        padding: var(--esp-2) 0;
        text-align: right;
    }
    table.tabla--tarjetas td:last-child { border-bottom: none; }
    table.tabla--tarjetas td:not([data-label]) { justify-content: flex-end; }
    table.tabla--tarjetas td[data-label]::before {
        content: attr(data-label);
        font-weight: var(--peso-semi); color: var(--color-texto-secundario);
        font-size: var(--letra-xs);
        text-align: left; flex: none;
    }
    table.tabla--tarjetas td:empty { display: none; }
    /* Devolucion: 2 renglones -- [x] producto / vendido, disponible y la
       cantidad a devolver. Columnas: 1 check, 2 producto, 3 vendido,
       4 ya devuelto (solo escritorio), 5 disponible, 6 cantidad. */
    table.tabla--devolver tbody tr {
        display: grid; align-items: center; gap: var(--esp-2) var(--esp-3);
        grid-template-columns: auto auto auto minmax(0, 1fr);
        grid-template-areas: "check prod prod prod" "check vend disp cant";
        padding: var(--esp-3);
    }
    table.tabla--devolver tbody td { border: 0; padding: 0; width: auto; display: block; text-align: left; }
    table.tabla--devolver td:nth-child(1) { grid-area: check; align-self: start; }
    table.tabla--devolver td:nth-child(2) { grid-area: prod; font-weight: var(--peso-semi); font-size: var(--letra-md); }
    table.tabla--devolver td:nth-child(2) div { display: inline; margin-left: var(--esp-1); }
    table.tabla--devolver td:nth-child(3) { grid-area: vend; }
    table.tabla--devolver td:nth-child(5) { grid-area: disp; }
    table.tabla--devolver td:nth-child(3), table.tabla--devolver td:nth-child(5) { font-size: var(--letra-sm); color: var(--color-texto-secundario); white-space: nowrap; }
    table.tabla--devolver td:nth-child(6) { grid-area: cant; display: flex; justify-content: flex-end; }
    table.tabla--devolver td:nth-child(6) > input { flex: none; width: 96px; }
    table.tabla--devolver td::before { display: none !important; }
    table.tabla--devolver td:nth-child(3)::before { display: inline !important; content: "Vendido "; }
    table.tabla--devolver td:nth-child(5)::before { display: inline !important; content: "· Disp. "; }
    /* Un campo dentro de la tarjeta ocupa el espacio que deja la etiqueta */
    table.tabla--tarjetas td > select, table.tabla--tarjetas td > input { flex: 1; min-width: 0; max-width: none !important; }
    table.tabla--tarjetas tfoot tr { display: flex; justify-content: space-between; padding: var(--esp-2) var(--esp-3); }
    table.tabla--tarjetas tfoot td { width: auto; border: none; padding: 0; }
    table.tabla--tarjetas tfoot td::before { display: none; }
}

/* Inicio en el celular */
.accion-grande {
    display: flex; align-items: center; gap: var(--esp-4);
    padding: var(--esp-4) var(--esp-4);
    border-radius: var(--radio);
    background: var(--color-acento);
    color: var(--color-texto-inverso);
}
.accion-grande:hover { text-decoration: none; }
.accion-grande strong { font-size: var(--letra-lg); }
.accion-grande__icono {
    flex: none; width: 52px; height: 52px; border-radius: 50%;
    background: var(--sobre-oscuro-20);
    display: grid; place-items: center;
}
.accion-grande__icono .ico { width: 26px; height: 26px; }
.accion-grande + .hoy { margin-top: var(--esp-4); }

/* Lo del dia: la cifra mas grande de la pantalla */
.hoy {
    display: flex; flex-direction: column; gap: var(--esp-05);
    padding: var(--esp-4);
    background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio);
    color: inherit;
}
.hoy:hover { text-decoration: none; }
.hoy__etiqueta { font-size: var(--letra-sm); color: var(--color-texto-secundario); }
.hoy__valor { font-size: var(--letra-2xl); font-weight: var(--peso-fuerte); line-height: 1.1; }
.hoy__detalle { font-size: var(--letra-sm); color: var(--color-texto-tenue); }

/* Atajos: secundarios, sin borde ni sombra que compitan con lo principal */
.atajos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-2); margin-top: var(--esp-3); }
.atajos:empty { display: none; }
.atajo {
    display: grid; place-items: center; min-height: 44px;
    border-radius: var(--radio); background: var(--color-borde);
    color: var(--color-texto-secundario); font-size: var(--letra-sm); font-weight: var(--peso-medio);
}
.atajo:hover { text-decoration: none; background: var(--color-borde-fuerte); }

/* Secciones: el titulo y su total arriba, la lista debajo, bien separadas entre si */
.seccion-movil { margin-top: var(--esp-6); }
.seccion-movil__cabecera {
    display: flex; align-items: flex-start; gap: var(--esp-2);
    padding: 0 var(--esp-1) var(--esp-2); color: inherit;
}
.seccion-movil__cabecera:hover { text-decoration: none; }
.seccion-movil__cabecera h2 { margin: 0; font-size: var(--letra-md); }
.seccion-movil__total {
    margin-left: auto; display: flex; flex-direction: column; align-items: flex-end;
    font-size: var(--letra-xs);
}
.seccion-movil__total strong { font-size: var(--letra-md); }
.seccion-movil .panel { margin: 0; }
.lista-toque__fila {
    display: flex; align-items: center; gap: var(--esp-3);
    padding: var(--esp-3) var(--esp-4); min-height: 60px;
    border-bottom: 1px solid var(--color-borde);
    color: inherit;
}
.lista-toque__fila:last-child { border-bottom: none; }
.lista-toque__fila:hover { background: var(--color-superficie-suave); text-decoration: none; }
.lista-toque__principal { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: var(--letra-xs); }
.lista-toque__principal strong {
    font-size: var(--letra-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lista-toque__lateral { display: flex; flex-direction: column; align-items: flex-end; gap: var(--esp-1); white-space: nowrap; }

@media print {
    .barra-inferior, .barra-cobro { display: none !important; }
    html.movil body { padding-bottom: 0; }
}

/* ==========================================================================
   Panel del SRI (tablero e inicio): cifras, estado de la cola y ultimos
   ========================================================================== */

.texto-alerta { color: var(--color-alerta); }
.panel-sri .panel__cabecera { gap: var(--esp-2); flex-wrap: wrap; }
.panel-sri .panel__cabecera .ico { width: 1em; height: 1em; vertical-align: -2px; }
.panel-sri__cifras {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--color-borde);
}
.panel-sri__cifras > div { display: flex; flex-direction: column; gap: var(--esp-1); padding: var(--esp-3) var(--esp-4); }
.panel-sri__cifras > div + div { border-left: 1px solid var(--color-borde); }
.panel-sri__etiqueta { font-size: var(--letra-xs); color: var(--color-texto-secundario); text-transform: uppercase; letter-spacing: .04em; }
.panel-sri__valor { font-size: var(--letra-2xl); line-height: 1.1; font-variant-numeric: tabular-nums; }
.panel-sri__aviso { margin: 0; padding: var(--esp-2) var(--esp-4); font-size: var(--letra-sm); color: var(--color-alerta);
                    background: var(--color-alerta-suave); border-bottom: 1px solid var(--color-borde); }
.panel-sri__lista { list-style: none; margin: 0; padding: 0; }
.panel-sri__lista li + li { border-top: 1px solid var(--color-borde); }
.panel-sri__lista a {
    display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: var(--esp-3); align-items: center;
    padding: var(--esp-2) var(--esp-4); color: inherit; text-decoration: none;
}
.panel-sri__lista a:hover { background: var(--color-superficie-suave); }
.panel-sri__tipo { font-size: var(--letra-xs); font-weight: var(--peso-semi); color: var(--color-texto-secundario); }
.panel-sri__doc { display: flex; flex-direction: column; min-width: 0; }
.panel-sri__doc > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-sri__der { display: flex; flex-direction: column; align-items: flex-end; gap: var(--esp-1); }
@media (max-width: 760px) {
    .panel-sri__cifras > div { padding: var(--esp-2) var(--esp-3); }
    .panel-sri__valor { font-size: var(--letra-xl); }
    .panel-sri__lista a { grid-template-columns: 2.75rem minmax(0, 1fr) auto; gap: var(--esp-2); padding: var(--esp-2) var(--esp-3); }
}

/* ==========================================================================
   CAMBIO DE PAGINA SIN PANTALLAZO (base.html + app.js: activarEsqueleto)
   La pagina nueva no se pinta hasta tener su contenido (rel="expect") y entra
   con un fundido corto; si tarda, la actual muestra un esqueleto con la forma
   de una pantalla del sistema (mismas barras .esqueleto del buscador).
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }
}
.contenido { position: relative; }
.esqueleto-pagina {
    position: absolute; inset: 0; z-index: 30;
    padding: inherit; background: var(--color-fondo);
    animation: esqueleto-pagina-entra .14s ease-out;
}
.esqueleto-pagina__marco { position: sticky; top: var(--esp-4); display: grid; gap: var(--esp-4); }
.esqueleto-pagina__cabecera { display: flex; align-items: center; gap: var(--esp-2); }
.esqueleto-pagina__fila { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: var(--esp-4); }
.esqueleto-pagina__tarjeta {
    display: grid; gap: var(--esp-3); align-content: start; padding: var(--esp-4);
    background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio);
}
.esqueleto-pagina__tarjeta--lado { background: var(--color-acento-suave); border-color: var(--color-acento-borde); }
.esqueleto-pagina .esqueleto { display: block; margin: 0; height: .875rem; }
.esqueleto-pagina .esqueleto--titulo { width: min(22rem, 45%); height: 1.75rem; margin-right: auto; }
.esqueleto-pagina .esqueleto--boton { width: 6.5rem; height: 2rem; }
.esqueleto-pagina .esqueleto--cifra { width: 60%; height: 2.25rem; }
.esqueleto-pagina .esqueleto--fila { height: 2.25rem; }
.esqueleto-pagina .esqueleto--corto { width: 40%; }
.esqueleto-pagina .esqueleto--medio { width: 65%; }
@keyframes esqueleto-pagina-entra { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 900px) {
    .esqueleto-pagina__fila { grid-template-columns: minmax(0, 1fr); }
    .esqueleto-pagina__cabecera .esqueleto--boton:nth-child(n+3) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .esqueleto-pagina { animation: none; } }
@media print { .esqueleto-pagina { display: none; } }