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

: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: #f4f6fa;            /* detras de todo */
    --color-superficie: #ffffff;       /* paneles, tarjetas, campos */
    --color-superficie-suave: #f7f9fc; /* cabeceras de tabla, filas al pasar */
    --color-texto: #17202a;            /* texto principal */
    --color-texto-secundario: #48566a; /* etiquetas, datos de apoyo */
    --color-texto-tenue: #647184;      /* ayudas, fechas, "sin datos" */
    --color-texto-inverso: #ffffff;    /* texto sobre el acento o el menu */
    --color-borde: #e2e7ee;
    --color-borde-fuerte: #ccd4e0;     /* botones, lineas de tabla */
    --color-borde-campo: #7a879a;      /* inputs: 3:1 sobre el fondo (WCAG 1.4.11) */

    /* Acento: el azul del logo (Repuestos Briones) */
    --color-acento: #1a4b7e;           /* boton principal, enlaces, activo */
    --color-acento-hover: #13385f;
    --color-acento-oscuro: #0f2c4c;    /* menu lateral, tarjeta de total */
    --color-acento-claro: #2f6fb5;     /* foco, indicador activo, barras */
    --color-acento-suave: #e3eefb;     /* fondo de avisos info y resaltados */
    --color-acento-borde: #c2d9f3;
    --color-foco: rgba(47, 111, 181, .16);

    /* Estados (cada uno: color, fondo suave, texto sobre el suave, borde) */
    --color-exito: #1a7d51;
    --color-exito-suave: #e3f6ec;
    --color-exito-texto: #0f5c3b;
    --color-exito-borde: #b6e2cb;
    --color-alerta: #a05f00;
    --color-alerta-suave: #fdf1dc;
    --color-alerta-texto: #7d4a00;
    --color-alerta-borde: #f0d9ae;
    --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, 32, 56, .5); /* detras de las ventanas */

    /* Componentes con color propio */
    --menu-texto: #cfdcea;
    --menu-titulo: #7b94af;
    --menu-activo: #57a0ee;
    --escaner-video: #000;
    --escaner-panel: #0b1624;
    --escaner-linea: #ff4d4d;

    /* Tipografia */
    --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", 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 */

    /* 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(16, 32, 56, .06), 0 4px 12px rgba(16, 32, 56, .05);
    --sombra-alta: 0 8px 28px rgba(16, 32, 56, .16);
    --sombra-arriba: 0 -4px 14px rgba(16, 32, 56, .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); }
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(--color-acento-oscuro);
    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(--sobre-oscuro-10);
}
.menu__marca strong { color: var(--color-texto-inverso); font-size: var(--letra-md); line-height: 1.25; }
/* Fondo blanco: los logos suelen tener letras oscuras que no se verian sobre el azul */
.menu__logo {
    flex: none; width: 44px; height: 44px; padding: 3px;
    border-radius: var(--radio); background: var(--color-superficie); object-fit: contain;
}

.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);
    border-left: 3px solid transparent;
}
.menu a:hover { background: var(--sobre-oscuro-10); color: var(--color-texto-inverso); text-decoration: none; }
.menu a.activo {
    background: var(--sobre-oscuro-10);
    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; }

.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; }

.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%; }

.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; }

/* 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; }
.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; }
.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); }
/* 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)); }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 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); }
.kpi__valor { font-size: var(--letra-xl); font-weight: var(--peso-fuerte); line-height: 1.15; margin-top: var(--esp-05); }
.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; }

/* 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); }

.punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: var(--esp-1); }
.punto--ok { background: var(--color-exito); }
.punto--alerta { background: var(--color-alerta); }
.punto--error { background: var(--color-error); }

/* ==========================================================================
   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 .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: end;
}
.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; }
@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); }

.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); }

/* ==========================================================================
   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
   ========================================================================== */

.login {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: var(--color-fondo);
    padding: var(--esp-4);
}
.login__tarjeta {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: var(--esp-8);
    width: 100%;
    max-width: 380px;
}
.login__marca { text-align: center; margin-bottom: var(--esp-6); }
.login__marca h1 { margin: 0; }
.login__logo { display: block; width: 160px; height: 160px; margin: 0 auto; object-fit: contain; }
.login__pie { margin-top: var(--esp-4); font-size: var(--letra-xs); color: var(--color-texto-tenue); text-align: center; }

/* ==========================================================================
   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);
    }
}

/* ==========================================================================
   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); }
.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.
   ========================================================================== */

.solo-movil, .menu a.solo-movil, .barra-inferior, .barra-cobro { display: none; }
html.movil .solo-escritorio { display: none !important; }

/* 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 .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 .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; }

/* 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: 38px; 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); }

/* 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 > .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; }

/* 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; }
    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; }
.seccion-movil__vacio { margin: 0; padding: 0 var(--esp-1); color: var(--color-texto-tenue); font-size: var(--letra-sm); }
.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; }
}