/* ProfessionalUser POS · estilos de todas las pantallas.
Las fuentes van dentro del programa: el sistema se ve igual sin internet. */
@font-face {
font-family: "Onest";
src: url("../fuentes/onest.woff2") format("woff2");
font-weight: 100 900;
font-display: swap;
}
@font-face {
font-family: "Bricolage Grotesque";
src: url("../fuentes/bricolage-grotesque.woff2") format("woff2");
font-weight: 200 800;
font-display: swap;
}
:root {
--tinta: #0F1E36;
--tinta-2: #46546B;
--tinta-3: #6F7B8E;
--fondo: #EEF1F5;
--superficie: #FFFFFF;
--linea: #D9DFE7;
--linea-fuerte: #B4BECC;
--marino: #0F1E36;
--marino-2: #1B2F50;
--verde: #0B7A5C;
--verde-oscuro: #075E46;
--verde-claro: #E2F3EC;
--azul: #2450A8;
--azul-claro: #E6EDFB;
--ambar: #8A5300;
--ambar-claro: #FFF1D2;
--rojo: #B3261E;
--rojo-oscuro: #8E1D17;
--rojo-claro: #FCE9E7;
--radio: 10px;
--radio-grande: 16px;
--sombra: 0 1px 2px rgb(15 30 54 / .06), 0 8px 24px -12px rgb(15 30 54 / .18);
--fuente: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
--fuente-titulo: "Bricolage Grotesque", var(--fuente);
--fuente-codigo: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
min-height: 100vh;
min-height: 100dvh;
background: var(--fondo);
color: var(--tinta);
font-family: var(--fuente);
font-size: 1rem;
line-height: 1.5;
font-feature-settings: "tnum";
}
h1, h2 {
margin: 0;
font-family: var(--fuente-titulo);
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.15;
text-wrap: balance;
}
h1 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); }
h2 { font-size: 1.1875rem; letter-spacing: -0.01em; }
h3 { margin: 0; font-size: 1rem; font-weight: 600; }
p { margin: 0; }
a { color: var(--verde-oscuro); }
small { font-size: .8125rem; }
:focus-visible {
outline: 3px solid color-mix(in srgb, var(--verde) 55%, white);
outline-offset: 2px;
}
.oculto {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.tenue { color: var(--tinta-3); }
.icono {
width: 1.25em;
height: 1.25em;
flex: none;
}
/* ───────────── Logo ───────────── */
.logo {
display: inline-flex;
align-items: center;
gap: .625em;
font-size: 1rem;
color: var(--tinta);
text-decoration: none;
}
.logo-marca { width: 2.25em; height: 2.25em; flex: none; }
.logo-texto {
display: flex;
align-items: baseline;
gap: .35em;
font-family: var(--fuente-titulo);
line-height: 1;
}
.logo-nombre { font-size: 1.25em; font-weight: 700; letter-spacing: -0.03em; }
.logo-pos {
font-size: .8125em;
font-weight: 700;
letter-spacing: .04em;
color: var(--verde);
}
.logo-claro { color: #fff; }
.logo-claro .logo-pos { color: #7FE0BF; }
.logo.grande { font-size: 1.375rem; }
.logo.enorme {
font-size: clamp(1.5rem, .6rem + 4.6vw, 3.75rem);
flex-direction: column;
gap: .45em;
max-width: 100%;
}
.logo.enorme .logo-texto { flex-wrap: wrap; justify-content: center; row-gap: .2em; }
.logo.enorme .logo-marca { width: 2.6em; height: 2.6em; }
.logo-imagen { display: block; height: 36px; width: auto; max-width: 100%; }
.logo-imagen.grande { height: 64px; }
.logo-imagen.enorme { height: auto; max-height: min(38vh, 300px); max-width: min(100%, 620px); }
/* ───────────── Botones ───────────── */
.boton {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
min-height: 46px;
padding: 0 1.125rem;
border: 1px solid transparent;
border-radius: var(--radio);
font: inherit;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background-color .12s, border-color .12s, color .12s;
}
.boton-principal { background: var(--verde); color: #fff; }
.boton-principal:hover { background: var(--verde-oscuro); }
.boton-suave { background: var(--superficie); border-color: var(--linea-fuerte); color: var(--tinta); }
.boton-suave:hover { border-color: var(--tinta-2); }
.boton-texto { background: none; color: var(--verde-oscuro); padding-inline: .75rem; }
.boton-texto:hover { background: var(--verde-claro); }
.boton-peligro { background: var(--rojo); color: #fff; }
.boton-peligro:hover { background: var(--rojo-oscuro); }
.boton-peligro-suave { background: none; color: var(--rojo); }
.boton-peligro-suave:hover { background: var(--rojo-claro); }
.boton-chico { min-height: 36px; padding-inline: .75rem; font-size: .9375rem; }
.boton-ancho { width: 100%; }
/* Botón trabajando: se ve ocupado y no acepta otro clic. */
.boton.enviando { pointer-events: none; opacity: .75; }
.boton.enviando::before {
content: "";
width: 1em;
height: 1em;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: girar .7s linear infinite;
}
form[data-enviando] .boton:not(.enviando) { pointer-events: none; opacity: .5; }
@keyframes girar { to { transform: rotate(360deg); } }
/* ───────────── Formularios ───────────── */
.formulario { display: grid; gap: 1.25rem; }
.campo { display: grid; align-content: start; gap: .375rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.campo label, .campo legend {
padding: 0;
font-size: .9375rem;
font-weight: 600;
color: var(--tinta);
}
.campo legend { margin-bottom: .375rem; }
.fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); align-items: start; gap: 1rem; }
input[type="text"], input[type="password"], input[type="email"], input:not([type]) {
width: 100%;
min-height: 46px;
padding: .5rem .75rem;
border: 1px solid var(--linea-fuerte);
border-radius: var(--radio);
background: var(--superficie);
color: var(--tinta);
font: inherit;
transition: border-color .12s, box-shadow .12s;
}
select {
width: 100%;
min-height: 46px;
padding: .5rem 2.5rem .5rem .75rem;
border: 1px solid var(--linea-fuerte);
border-radius: var(--radio);
background: var(--superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2346546B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .75rem center / 1.125rem;
color: var(--tinta);
font: inherit;
appearance: none;
}
select:focus {
outline: none;
border-color: var(--verde);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 22%, transparent);
}
input::placeholder { color: var(--tinta-3); }
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input:not([type]):focus {
outline: none;
border-color: var(--verde);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 22%, transparent);
}
input:disabled { background: var(--fondo); color: var(--tinta-2); }
input[type="checkbox"], input[type="radio"] {
width: 1.25rem;
height: 1.25rem;
margin: 0;
flex: none;
accent-color: var(--verde);
}
.ayuda { font-size: .875rem; color: var(--tinta-2); }
.con-boton { position: relative; }
.con-boton input { padding-right: 3rem; }
.ver-clave {
position: absolute;
inset: 1px 1px 1px auto;
width: 44px;
display: grid;
place-items: center;
border: 0;
border-radius: 0 var(--radio) var(--radio) 0;
background: none;
color: var(--tinta-3);
cursor: pointer;
}
.ver-clave:hover, .ver-clave[aria-pressed="true"] { color: var(--verde-oscuro); }
.casilla { display: flex; gap: .75rem; align-items: flex-start; cursor: pointer; }
.casilla input { margin-top: .15rem; }
.casilla > span { display: grid; gap: .125rem; font-weight: 600; }
.casilla small { font-weight: 400; color: var(--tinta-2); font-size: .875rem; }
/* Dos opciones lado a lado, como un interruptor. */
.segmentos {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
padding: 4px;
border-radius: calc(var(--radio) + 2px);
background: var(--fondo);
border: 1px solid var(--linea);
}
.segmentos label { position: relative; display: block; cursor: pointer; }
.segmentos input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.segmentos span {
display: grid;
place-items: center;
min-height: 40px;
padding: 0 .5rem;
border-radius: calc(var(--radio) - 2px);
font-size: .9375rem;
font-weight: 600;
color: var(--tinta-2);
text-align: center;
}
.segmentos input:checked + span { background: var(--superficie); color: var(--tinta); box-shadow: 0 1px 2px rgb(15 30 54 / .14); }
.segmentos input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--verde) 55%, white); }
.solo-windows { display: none; }
.formulario:has(#aut-windows:checked) .solo-sql { display: none; }
.formulario:has(#aut-windows:checked) .solo-windows { display: block; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .25rem; }
.empuja { margin-left: auto; }
/* ───────────── Avisos ───────────── */
.aviso {
display: flex;
gap: .75rem;
padding: .875rem 1rem;
border-radius: var(--radio);
border: 1px solid;
font-size: .9375rem;
}
.aviso .icono { margin-top: .1rem; }
.aviso-texto { display: grid; gap: .25rem; min-width: 0; }
.aviso-texto strong { font-weight: 600; }
.aviso-ok { background: var(--verde-claro); border-color: #A9D9C6; color: var(--verde-oscuro); }
.aviso-info { background: var(--azul-claro); border-color: #B9CBEF; color: var(--azul); }
.aviso-alerta { background: var(--ambar-claro); border-color: #EBCB85; color: var(--ambar); }
.aviso-error { background: var(--rojo-claro); border-color: #EDB9B4; color: var(--rojo-oscuro); }
.detalle { font-size: .8125rem; opacity: .85; overflow-wrap: anywhere; }
/* ───────────── Antes de entrar: instalación y entrada ───────────── */
.acceso {
display: grid;
grid-template-columns: minmax(340px, 5fr) 7fr;
min-height: 100vh;
min-height: 100dvh;
}
.acceso-marca {
position: relative;
display: flex;
flex-direction: column;
gap: 2.5rem;
padding: clamp(1.5rem, 4vw, 3rem);
background:
radial-gradient(120% 80% at 0% 100%, var(--marino-2) 0%, transparent 60%),
var(--marino);
color: #fff;
overflow: hidden;
}
/* Trama de puntos tenue, como el papel de rollo visto de cerca. */
.acceso-marca::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgb(255 255 255 / .07) 1px, transparent 1.2px);
background-size: 18px 18px;
mask-image: linear-gradient(to bottom, transparent, #000 40%);
pointer-events: none;
}
.acceso-marca > * { position: relative; }
.acceso-marca-contenido { flex: 1; display: grid; align-content: center; }
.acceso-pie { font-size: .8125rem; color: rgb(255 255 255 / .55); }
/* 0.99.73: en el celular el lado azul no se ve: la versión y la hora van debajo del formulario. */
.acceso-pie-movil { display: none; margin: 1.25rem 0 0; text-align: center; font-size: .8125rem; color: var(--texto-suave, #667085); }
/* Sin pasos que mostrar (pantalla de entrada): el azul lleva el mural de facturación. Con pasos (instalación), no. */
.acceso-marca:not(:has(.tiquete)) .acceso-marca-contenido { display: none; }
.acceso-marca:has(.tiquete) .acceso-mural { display: none; }
.acceso-mural { flex: 1; display: grid; place-items: center; min-height: 0; }
.mural-caja { width: min(100%, 460px); display: grid; gap: .25rem; }
.mural { display: block; width: 100%; height: auto; max-height: 54vh; }
.mural-lema { margin: .75rem 0 0; font-family: var(--fuente-titulo); font-size: clamp(1.375rem, 1rem + 1.2vw, 2rem); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; color: #fff; }
.mural-sub { margin: 0; font-size: .9375rem; color: rgb(255 255 255 / .65); }
/* El logo fijo del sistema, arriba del formulario. */
.acceso-logo { display: grid; justify-items: center; padding-bottom: .75rem; }
.acceso-logo .logo-imagen { height: auto; max-height: 110px; max-width: 100%; }
.acceso-logo .logo { font-size: 1.75rem; }
.acceso-cuerpo {
display: grid;
align-items: center;
padding: clamp(1.5rem, 5vw, 4rem);
background: var(--superficie);
}
.acceso-caja { width: 100%; max-width: 520px; margin-inline: auto; display: grid; gap: 1.25rem; }
.acceso-caja > h1 + .entrada { margin-top: -.5rem; }
.pie-entrada { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-top: .75rem; padding-top: 1.25rem; border-top: 1px solid var(--linea); }
.idiomas { display: flex; gap: .25rem; font-size: .9375rem; }
.idiomas a { padding: .375rem .625rem; border-radius: 8px; color: var(--tinta-2); text-decoration: none; }
.idiomas a:hover { background: var(--fondo); }
.idiomas a.actual { background: var(--verde-claro); color: var(--verde-oscuro); font-weight: 600; }
.entrada { color: var(--tinta-2); max-width: 60ch; }
.entrada strong { color: var(--tinta); font-weight: 600; }
/* El avance de la instalación, impreso como un tiquete. */
.tiquete {
--diente: 9px;
width: min(100%, 330px);
padding: 1.25rem 1.25rem calc(1.25rem + var(--diente));
background: #fff;
color: var(--tinta);
mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% 0 / calc(2 * var(--diente)) 100% repeat-x;
}
.tiquete-titulo {
padding-bottom: .75rem;
border-bottom: 2px dashed var(--linea-fuerte);
font-family: var(--fuente-titulo);
font-weight: 700;
font-size: 1.0625rem;
}
.tiquete ol { list-style: none; margin: 0; padding: 0; }
.tiquete li {
display: flex;
align-items: flex-start;
gap: .75rem;
padding: .875rem 0;
border-bottom: 1px dashed var(--linea-fuerte);
color: var(--tinta-3);
}
.tiquete li:last-child { border-bottom: 0; padding-bottom: .25rem; }
.tiquete-numero {
display: grid;
place-items: center;
width: 1.75rem;
height: 1.75rem;
flex: none;
border: 1.5px solid var(--linea-fuerte);
border-radius: 50%;
font-size: .875rem;
font-weight: 700;
}
.tiquete-texto { display: grid; padding-top: .1rem; font-weight: 600; min-width: 0; }
.tiquete-texto small { font-weight: 400; color: var(--tinta-2); overflow-wrap: anywhere; }
.tiquete li.actual { color: var(--tinta); }
.tiquete li.actual .tiquete-numero { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.tiquete li.hecho { color: var(--tinta); }
.tiquete li.hecho .tiquete-numero {
background: var(--verde);
border-color: var(--verde);
color: transparent;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
background-size: 62%;
background-position: center;
background-repeat: no-repeat;
}
/* Datos de la conexión guardada y ruta del archivo. */
.datos { display: grid; gap: .5rem; margin: 0; }
.datos div { display: grid; grid-template-columns: 9rem 1fr; gap: .75rem; }
.datos dt { color: var(--tinta-2); }
.datos dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.ruta {
padding: .75rem .875rem;
border-radius: var(--radio);
background: var(--fondo);
font-family: var(--fuente-codigo);
font-size: .875rem;
overflow-wrap: anywhere;
}
/* Lista de cambios de la base. */
.cambios, .historial ul { list-style: none; margin: 0; padding: 0; }
.cambios { border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.cambios li + li { border-top: 1px solid var(--linea); }
.cambios summary, .historial li {
display: flex;
align-items: baseline;
gap: .75rem;
padding: .75rem .875rem;
}
.cambios summary { cursor: pointer; list-style: none; }
.cambios summary::-webkit-details-marker { display: none; }
.cambios summary:hover { background: var(--fondo); }
.cambio-numero { font-family: var(--fuente-codigo); font-size: .875rem; color: var(--tinta-3); }
.cambio-texto { flex: 1; min-width: 0; font-weight: 600; }
.cambio-ver { font-size: .875rem; color: var(--verde-oscuro); white-space: nowrap; }
.cambio-ver::after { content: "Ver SQL"; }
details[open] > summary .cambio-ver::after { content: "Ocultar"; }
.cambios pre {
margin: 0;
padding: .875rem;
max-height: 320px;
overflow: auto;
background: var(--marino);
color: #DCE6F5;
font-family: var(--fuente-codigo);
font-size: .8125rem;
line-height: 1.55;
tab-size: 4;
}
.historial { font-size: .9375rem; }
.historial > summary { cursor: pointer; color: var(--tinta-2); padding: .25rem 0; }
.historial li { padding-inline: 0; border-bottom: 1px solid var(--linea); }
.historial time { color: var(--tinta-3); font-size: .875rem; white-space: nowrap; }
/* ───────────── Adentro: menú lateral, barra del teléfono y página ───────────── */
/* En pantalla ancha el menú lateral está siempre a la izquierda; en angosta se saca con el botón Menú de la barra. */
.marco { display: grid; grid-template-columns: 272px minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
/* La casilla que abre y cierra el menú en pantalla angosta. No se ve; el botón Menú es su etiqueta. */
.menu-interruptor { display: none; }
.barra { display: none; }
.barra-marca { display: inline-flex; text-decoration: none; border-radius: var(--radio); min-width: 0; }
.barra-usuario { display: flex; align-items: center; gap: .5rem; min-width: 0; margin-left: auto; }
.barra-usuario .marca { padding: .375rem .625rem; }
.lateral {
position: sticky;
top: 0;
display: flex;
flex-direction: column;
height: 100vh;
height: 100dvh;
min-width: 0;
background: var(--superficie);
border-right: 1px solid var(--linea);
}
.lateral-velo, .lateral-cerrar { display: none; }
.lateral-cabeza { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 68px; padding: .75rem 1rem .5rem 1.125rem; }
.lateral-cabeza .logo { font-size: .9375rem; }
.lateral-cabeza .logo-imagen { height: 44px; }
/* La sucursal en que se trabaja; tocándola se cambia. */
.lateral-lugar {
display: flex; align-items: center; gap: .625rem;
margin: .25rem .75rem .5rem; padding: .5rem .625rem;
border: 1px solid var(--linea); border-radius: var(--radio);
background: var(--fondo); color: var(--tinta); text-decoration: none;
transition: border-color .12s, background-color .12s;
}
.lateral-lugar:not(.sin-cambio):hover { border-color: var(--verde); background: var(--verde-claro); }
.lateral-lugar > .icono:first-child { color: var(--verde); }
.lateral-lugar > span { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.lateral-lugar strong, .lateral-lugar small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral-lugar strong { font-weight: 600; }
.lateral-lugar small { color: var(--tinta-2); }
.lateral-lugar-cambio { width: 1rem; height: 1rem; color: var(--tinta-3); }
.lateral-pie { display: flex; align-items: center; gap: .625rem; padding: .75rem; border-top: 1px solid var(--linea); }
.lateral-pie form { margin: 0; }
.lateral-pie .boton span { display: none; }
.lateral-pie .boton { min-width: 40px; padding-inline: .625rem; }
.lateral-usuario { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.lateral-usuario strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral-usuario small, .lateral-usuario small a { color: var(--tinta-3); text-decoration: none; }
.lateral-usuario small a:hover { color: var(--verde-oscuro); text-decoration: underline; }
.avatar-soporte { background: var(--ambar-claro); color: var(--ambar); }
.avatar-soporte .icono { width: 1.125rem; height: 1.125rem; }
@media (max-width: 1023px) {
.marco { display: block; }
.barra {
position: sticky; top: 0; z-index: 10;
display: flex; align-items: center; gap: .625rem;
min-height: 56px; padding: .375rem .75rem;
background: var(--superficie); border-bottom: 1px solid var(--linea);
}
.barra-marca .logo { font-size: .875rem; }
.barra-marca .logo-imagen { height: 40px; }
.barra-menu { min-height: 40px; padding-inline: .625rem; }
/* La casilla sigue en la página (oculta a la vista) para poder abrir el menú con el teclado. */
.menu-interruptor { display: block; position: absolute; width: 1px; height: 1px; opacity: 0; }
.menu-interruptor:focus-visible ~ .barra .barra-menu { outline: 3px solid color-mix(in srgb, var(--verde) 55%, white); outline-offset: 2px; }
.lateral {
position: fixed; inset: 0 auto 0 0; z-index: 41;
width: min(88vw, 330px);
border-right: 0; box-shadow: 0 0 60px rgb(15 30 54 / .35);
transform: translateX(-102%); visibility: hidden;
transition: transform .2s ease, visibility 0s .2s;
}
.menu-interruptor:checked ~ .lateral { transform: none; visibility: visible; transition: transform .2s ease; }
.lateral-velo { display: block; position: fixed; inset: 0; z-index: 40; background: rgb(15 30 54 / .5); opacity: 0; pointer-events: none; transition: opacity .2s; }
.menu-interruptor:checked ~ .lateral-velo { opacity: 1; pointer-events: auto; }
.lateral-cerrar { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radio); color: var(--tinta-2); cursor: pointer; }
.lateral-cerrar:hover { background: var(--fondo); color: var(--tinta); }
.lateral-pie .boton span { display: inline; }
}
/* El panel para elegir dónde trabajar. */
.lugares { display: grid; gap: 1.25rem; }
.lugares-empresa { display: grid; gap: .5rem; }
.lugares-empresa h2 { color: var(--tinta-2); font-size: 1rem; }
.lugar {
display: flex;
align-items: center;
gap: .75rem;
width: 100%;
min-height: 60px;
padding: .625rem .875rem;
border: 1px solid var(--linea-fuerte);
border-radius: var(--radio);
background: var(--superficie);
color: var(--tinta);
font: inherit;
text-align: left;
cursor: pointer;
transition: background-color .12s, border-color .12s;
}
.lugar > .icono:first-child { color: var(--verde); }
.lugar:hover { border-color: var(--verde); background: var(--verde-claro); }
.lugar.actual { border-color: var(--verde); }
.lugar.enviando { opacity: .7; }
.lugar-nombre { flex: 1; min-width: 0; font-family: var(--fuente-titulo); font-size: 1.125rem; font-weight: 600; }
.avatar {
display: grid;
place-items: center;
width: 2.25rem;
height: 2.25rem;
flex: none;
border-radius: 50%;
background: var(--marino);
color: #fff;
font-family: var(--fuente-titulo);
font-weight: 700;
}
.pagina {
width: 100%;
max-width: 1080px;
margin-inline: auto;
padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2rem) 4rem;
display: grid;
gap: 1.5rem;
}
/* Pantalla de inicio. */
.portada { display: grid; place-items: center; padding: clamp(1.5rem, 6vh, 4rem) 0 clamp(1rem, 4vh, 2.5rem); }
/* ───────────── El menú lateral ───────────── */
/* El buscador del menú: filtra las opciones de todos los paneles. Solo aparece con JavaScript. */
.lat-buscar { position: relative; margin: 0 .75rem .5rem; }
.lat-buscar[hidden] { display: none; }
.lat-buscar .icono { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); width: 1.0625rem; height: 1.0625rem; color: var(--tinta-3); pointer-events: none; }
.lat-buscar input[type="text"] { min-height: 40px; padding: .375rem .75rem .375rem 2.375rem; font-size: .9375rem; background: var(--fondo); border-color: var(--linea); }
.lat-buscar input[type="text"]:focus { background: var(--superficie); }
.lat-menu { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .25rem .75rem 1rem; display: grid; align-content: start; gap: 2px; }
.lat-menu summary { list-style: none; cursor: pointer; user-select: none; }
.lat-menu summary::-webkit-details-marker { display: none; }
/* Inicio y cada panel: un renglón con su ícono. */
.lat-inicio, .lat-panel > summary {
display: flex; align-items: center; gap: .75rem;
min-height: 44px; padding: 0 .75rem;
border-radius: var(--radio);
color: var(--tinta); font-weight: 600; text-decoration: none;
transition: background-color .12s, color .12s;
}
.lat-inicio > .icono, .lat-panel > summary > .icono:first-child { color: var(--tinta-2); }
.lat-inicio > span, .lat-panel > summary > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lat-inicio:hover, .lat-panel > summary:hover { background: var(--fondo); }
.lat-inicio.actual { background: var(--verde-claro); color: var(--verde-oscuro); }
.lat-inicio.actual > .icono { color: var(--verde); }
.lat-panel[open] > summary { color: var(--verde-oscuro); }
.lat-panel[open] > summary > .icono:first-child { color: var(--verde); }
.lat-abre { width: 1rem; height: 1rem; color: var(--tinta-3); transition: transform .15s; }
.lat-panel[open] > summary .lat-abre, .lat-grupo[open] > summary .lat-abre { transform: rotate(180deg); }
.lat-panel[hidden], .lat-grupo[hidden], .lat-opcion[hidden], .lat-sin-resultados[hidden] { display: none; }
/* Las opciones del panel, con una línea a la izquierda que las une a su panel. */
.lat-opciones { display: grid; gap: 1px; margin: .125rem 0 .5rem 1.3125rem; padding-left: .5rem; border-left: 2px solid var(--linea); }
/* Un grupo (Parámetros, Usuarios…) sale cerrado: solo su nombre. Al tocarlo se ven sus opciones. */
.lat-grupo-titulo {
display: flex; align-items: center; gap: .5rem;
min-height: 40px; padding: .25rem .625rem;
border-radius: 9px;
color: var(--tinta); font-size: .9688rem; font-weight: 600;
transition: background-color .12s, color .12s;
}
.lat-grupo-titulo > span { flex: 1; min-width: 0; }
.lat-grupo-titulo:hover { background: var(--fondo); }
.lat-grupo[open] > .lat-grupo-titulo { color: var(--verde-oscuro); }
.lat-grupo-opciones { display: grid; gap: 1px; margin: 0 0 .25rem .5rem; padding-left: .375rem; border-left: 2px solid var(--linea); }
.lat-opcion {
display: flex; align-items: center; gap: .5rem;
min-height: 40px; padding: .25rem .625rem;
border-radius: 9px;
color: var(--tinta-2); font-size: .9688rem; text-decoration: none;
transition: background-color .12s, color .12s;
}
.lat-opcion:hover { background: var(--fondo); color: var(--tinta); }
.lat-opcion.actual { background: var(--verde-claro); color: var(--verde-oscuro); font-weight: 600; }
.lat-texto { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.lat-texto small { color: var(--tinta-3); font-weight: 400; }
.lat-check { width: 1rem; height: 1rem; color: var(--verde); }
.lat-sin-resultados { padding: .75rem; font-size: .9375rem; }
/* Estas dos las usa también la lista de sucursales. */
.menu-icono { color: var(--verde); width: 1.125rem; height: 1.125rem; }
.menu-texto { flex: 1; min-width: 0; display: grid; line-height: 1.25; white-space: nowrap; }
.menu-texto small { color: var(--tinta-3); font-weight: 400; }
.pide-clave { display: inline-flex; align-items: center; color: var(--tinta-3); }
.pide-clave .icono { width: 1rem; height: 1rem; }
/* Cuando el sistema pide la clave de quien sí tiene el permiso: una ventana delante de la silueta de la pantalla. */
.tras-clave { display: grid; gap: 1.25rem; filter: blur(2px); opacity: .7; pointer-events: none; user-select: none; }
.tras-clave-titulo { font-family: var(--fuente-titulo); font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.tras-clave-fila { display: flex; gap: .75rem; }
.tras-clave-fila span { height: 46px; border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--linea); }
.tras-clave-fila span:first-child { flex: 0 1 420px; }
.tras-clave-fila span:last-child { flex: 0 0 110px; }
.tras-clave-bloque { display: grid; border: 1px solid var(--linea); border-radius: var(--radio-grande); background: var(--superficie); overflow: hidden; }
.tras-clave-bloque span { height: 60px; border-bottom: 1px solid var(--linea); background: linear-gradient(90deg, transparent 1rem, var(--fondo) 1rem, var(--fondo) 38%, transparent 38%, transparent 52%, var(--fondo) 52%, var(--fondo) 70%, transparent 70%) center / 100% 14px no-repeat; }
.tras-clave-bloque span:first-child { height: 46px; background: #F7F9FB; }
.tras-clave-bloque span:last-child { border-bottom: 0; }
.ventana.ventana-clave { width: min(92vw, 440px); overflow: auto; }
.ventana.ventana-clave::backdrop { background: rgb(15 30 54 / .55); backdrop-filter: blur(4px); }
/* En celular va arriba y no pegada abajo: así el teclado no tapa la casilla de la contraseña. */
@media (max-width: 640px) { .ventana.ventana-clave { inset: 0; margin: 5vh auto auto; border-radius: var(--radio-grande); max-height: 90dvh; } }
.ventana-clave .ventana-cerrar { position: absolute; top: .75rem; right: .75rem; z-index: 1; color: var(--ambar); }
.ventana-clave .ventana-cerrar:hover { background: rgb(255 255 255 / .6); color: var(--tinta); }
.clave-cabeza {
position: relative;
display: grid;
justify-items: center;
gap: .625rem;
padding: 2rem 1.5rem 1.375rem;
text-align: center;
background: linear-gradient(180deg, var(--ambar-claro), var(--superficie));
}
.clave-cabeza h2 { font-size: 1.375rem; }
.clave-icono {
display: grid;
place-items: center;
width: 4rem;
height: 4rem;
border-radius: 1.25rem;
background: var(--superficie);
color: var(--ambar);
box-shadow: 0 0 0 1px #EBCB85, 0 10px 24px -10px rgb(138 83 0 / .55);
}
.clave-icono .icono { width: 1.75rem; height: 1.75rem; }
/* El permiso que se pide, como una etiqueta. */
.clave-permiso {
display: inline-flex;
align-items: center;
gap: .375rem;
max-width: 100%;
padding: .3rem .75rem;
border-radius: 999px;
background: var(--superficie);
box-shadow: 0 0 0 1px var(--linea);
color: var(--tinta);
font-size: .9375rem;
font-weight: 600;
}
.clave-permiso .icono { width: 1rem; height: 1rem; color: var(--verde); }
.clave-cuerpo { gap: 1rem; padding: .25rem 1.5rem 1.5rem; }
.clave-texto { color: var(--tinta-2); text-align: center; text-wrap: balance; }
.clave-cuerpo input[type="password"], .clave-cuerpo input[type="text"] { min-height: 52px; font-size: 1.0625rem; }
.clave-cuerpo .boton-principal { min-height: 52px; font-size: 1.0625rem; }
.clave-cuerpo .boton-texto { margin-top: -.5rem; }
.clave-detalle { display: grid; gap: .125rem; margin: 0 1.5rem .5rem; padding: .625rem .875rem; border: 1px solid #EBCB85; border-radius: var(--radio); background: var(--ambar-claro); color: var(--tinta); }
.clave-detalle span { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ambar); }
.clave-detalle strong { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.clave-espera { margin: 0; padding: .5rem .75rem; border-radius: var(--radio); background: var(--azul-claro); color: var(--azul); font-size: .9375rem; text-align: center; }
.clave-espera[hidden] { display: none; }
.clave-espera.bien { background: var(--verde-claro); color: var(--verde-oscuro); font-weight: 600; }
.clave-espera.mal { background: var(--rojo-claro); color: var(--rojo-oscuro); }
.clave-cuerpo .boton-suave { min-height: 46px; }
.clave-cuerpo .boton-suave[hidden] { display: none; }
.solicitudes { display: grid; gap: .875rem; }
.solicitud { display: grid; gap: .625rem; }
.solicitud-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .375rem .75rem; }
.solicitud-detalle { margin: 0; font-size: 1.0625rem; line-height: 1.4; overflow-wrap: anywhere; }
.captura-marco { position: relative; width: 100%; overflow: auto; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: var(--fondo); }
.captura { display: block; border: 0; transform-origin: 0 0; background: var(--fondo); }
.estado-solicitudes { text-decoration: none; color: var(--ambar); font-weight: 600; }
.clave-nota { display: flex; align-items: flex-start; justify-content: center; gap: .375rem; padding-top: .875rem; border-top: 1px solid var(--linea); color: var(--tinta-3); font-size: .8125rem; }
.clave-nota .icono { width: .9375rem; height: .9375rem; margin-top: .125rem; }
/* Encabezado de un módulo. */
.encabezado { display: grid; gap: .5rem; }
.encabezado-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.camino { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; color: var(--tinta-2); font-size: .9375rem; }
.camino a { display: inline-flex; align-items: center; gap: .375rem; color: inherit; font-weight: 600; text-decoration: none; }
.camino a:hover { color: var(--verde-oscuro); }
.camino > .icono { width: 1rem; height: 1rem; color: var(--tinta-3); }
.camino-menu { position: relative; }
.camino-menu > summary {
display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .4rem; margin: -.2rem -.4rem; border-radius: 8px;
font-weight: 600; cursor: pointer; list-style: none;
}
.camino-menu > summary::-webkit-details-marker { display: none; }
.camino-menu > summary .icono { width: .9rem; height: .9rem; color: var(--tinta-3); }
.camino-menu > summary:hover, .camino-menu[open] > summary { background: var(--superficie); color: var(--verde-oscuro); }
.camino-lista, .camino-lista ul { list-style: none; margin: 0; padding: 0; }
.camino-lista {
position: absolute; z-index: 30; top: calc(100% + .35rem); left: -.4rem; min-width: 220px; padding: .375rem;
background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra);
}
.camino-lista a { display: block; padding: .45rem .75rem; border-radius: 8px; color: var(--tinta); font-weight: 500; text-decoration: none; white-space: nowrap; }
.camino-lista a:hover { background: var(--fondo); color: var(--verde-oscuro); }
.camino-lista a[aria-current=page] { color: var(--verde-oscuro); font-weight: 700; }
.camino-grupo > span { display: block; padding: .5rem .75rem .2rem; color: var(--tinta-3); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.camino-grupo ul a { padding-left: 1.25rem; }
.autorizado { display: inline-flex; align-items: center; gap: .375rem; width: fit-content; color: var(--ambar); font-size: .9375rem; font-weight: 600; }
.autorizado .icono { width: 1.125rem; height: 1.125rem; }
.volver {
display: inline-flex;
align-items: center;
gap: .375rem;
width: fit-content;
color: var(--tinta-2);
font-size: .9375rem;
font-weight: 600;
text-decoration: none;
}
.volver:hover { color: var(--verde-oscuro); }
/* Tabla. */
.tabla-caja { border: 1px solid var(--linea); border-radius: var(--radio-grande); background: var(--superficie); overflow: hidden; }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th {
padding: .75rem 1rem;
text-align: left;
font-size: .875rem;
font-weight: 600;
color: var(--tinta-2);
background: #F7F9FB;
border-bottom: 1px solid var(--linea);
}
.tabla td { padding: .625rem 1rem; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: #F7F9FB; }
/* La fila marcada con un clic: es la que copia Ctrl+C (Ctrl+A copia toda la tabla). */
.tabla tbody tr.fila-marcada td { background: var(--azul-claro); }
.tabla tbody tr[data-ir]:focus-within td, .tabla tbody tr[data-doble-clic]:focus-within td { background: var(--verde-claro); }
.tabla tbody tr[data-ir], .tabla tbody tr[data-doble-clic] { cursor: default; }
.tabla-usuario { display: inline-flex; align-items: center; gap: .75rem; color: inherit; font-weight: 600; text-decoration: none; }
.tabla-usuario > span:last-child { display: grid; line-height: 1.25; }
.tabla-usuario small { font-weight: 400; color: var(--tinta-3); }
.tabla-usuario .avatar { background: var(--fondo); color: var(--tinta); border: 1px solid var(--linea); }
.tabla-accion { width: 1%; text-align: right; }
.tabla-accion a { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radio); color: var(--tinta-3); }
.tabla-accion a:hover { background: var(--verde-claro); color: var(--verde-oscuro); }
.marca {
display: inline-flex;
align-items: center;
gap: .375rem;
padding: .25rem .625rem;
border-radius: 999px;
background: var(--fondo);
color: var(--tinta-2);
font-size: .875rem;
font-weight: 600;
white-space: nowrap;
}
.marca .icono { width: 1rem; height: 1rem; }
.marca-verde { background: var(--verde-claro); color: var(--verde-oscuro); }
.marca-azul { background: var(--azul-claro); color: var(--azul); }
.marca-ambar { background: var(--ambar-claro); color: var(--ambar); }
/* Ficha de usuario. */
.ficha { display: grid; gap: 1rem; max-width: 760px; }
.tarjeta {
display: grid;
gap: 1.125rem;
padding: clamp(1rem, 2.5vw, 1.5rem);
border: 1px solid var(--linea);
border-radius: var(--radio-grande);
background: var(--superficie);
}
.permisos-lista { display: grid; gap: 1rem; }
.modulo-permisos { margin: 0; min-width: 0; }
.modulo-permisos legend {
display: flex;
align-items: center;
gap: .625rem;
width: 100%;
padding: 0;
font-family: var(--fuente-titulo);
font-size: 1.1875rem;
font-weight: 600;
float: left;
margin-bottom: 1rem;
}
.modulo-permisos legend + * { clear: both; }
.modulo-permisos legend .boton { margin-left: auto; }
.modulo-permisos-icono {
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: 8px;
background: var(--verde-claro);
color: var(--verde-oscuro);
}
.permisos-opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: .5rem; }
.permisos-opciones { align-items: start; }
.permisos-grupo { grid-column: 1 / -1; margin: .5rem 0 0; padding-top: .625rem; border-top: 1px solid var(--linea); font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-2); }
.permiso {
position: relative;
display: grid;
align-content: center;
min-height: 48px;
padding: .5rem .75rem;
border: 1px solid var(--linea-fuerte);
border-radius: var(--radio);
transition: background-color .12s, border-color .12s;
}
.permiso > label { display: flex; align-items: center; gap: .625rem; font-weight: 600; cursor: pointer; }
.permiso:has(.ayuda-permiso) > label { padding-right: 2.25rem; }
.permiso:has(input:checked) { background: var(--verde-claro); border-color: var(--verde); color: var(--verde-oscuro); }
.permiso:has(input:disabled) { border-style: dashed; }
.permiso:has(input:disabled) > label { cursor: default; }
/* 0.99.45: la ficha de permisos del usuario, compacta (el dueño: «ocupa mucho espacio, todo eso a un 20 %»). */
body:has(form.perm-ficha) :is(h1, .encabezado h1) { font-size: 1.375rem; }
body:has(form.perm-ficha) .tarjeta { padding: .5rem .75rem; margin-bottom: .5rem; max-width: none; }
body:has(form.perm-ficha) :is(.tarjeta, .perm-copiar, .ficha) { font-size: .8125rem; }
body:has(form.perm-ficha) :is(.boton, input:not([type=checkbox]), select) { min-height: 28px; padding-top: .125rem; padding-bottom: .125rem; font-size: .8125rem; }
body:has(form.perm-ficha) .modulo-permisos legend { font-size: .9375rem; margin-bottom: .375rem; gap: .375rem; }
body:has(form.perm-ficha) .modulo-permisos-icono { width: 1.375rem; height: 1.375rem; border-radius: 5px; }
body:has(form.perm-ficha) .modulo-permisos-icono .icono { width: .875rem; height: .875rem; }
body:has(form.perm-ficha) .permisos-opciones { grid-template-columns: repeat(auto-fill, minmax(min(100%, 165px), 1fr)); gap: .1875rem; }
body:has(form.perm-ficha) .permisos-grupo { margin: .125rem 0 0; padding-top: .25rem; font-size: .6875rem; }
body:has(form.perm-ficha) .permiso { min-height: 0; padding: .125rem .375rem; border-radius: 5px; }
body:has(form.perm-ficha) .permiso > label { gap: .3125rem; font-weight: 500; font-size: .75rem; line-height: 1.2; }
body:has(form.perm-ficha) .permiso:has(.ayuda-permiso) > label { padding-right: 1.25rem; }
body:has(form.perm-ficha) .permiso input[type=checkbox] { width: .875rem; height: .875rem; }
body:has(form.perm-ficha) .permiso .signo-ayuda { width: 1rem; height: 1rem; font-size: .625rem; border-width: 1px; }
body:has(form.perm-ficha) .ayuda { margin: .25rem 0; font-size: .75rem; }
/* El signo ? de ayuda. */
.signo-ayuda {
display: inline-grid;
place-items: center;
width: 1.625rem;
height: 1.625rem;
flex: none;
border: 1.5px solid currentColor;
border-radius: 50%;
color: var(--tinta-2);
font-size: .875rem;
font-weight: 700;
line-height: 1;
}
.ayuda-permiso > summary { position: absolute; top: .6875rem; right: .625rem; list-style: none; cursor: pointer; }
.ayuda-permiso > summary::-webkit-details-marker { display: none; }
.ayuda-permiso > summary:hover, .ayuda-permiso[open] > summary { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.ayuda-permiso p { margin-top: .5rem; color: var(--tinta-2); font-size: .875rem; font-weight: 400; }
.consejos { max-width: 760px; border: 1px solid var(--linea); border-radius: var(--radio-grande); background: var(--superficie); }
.consejos > summary { display: flex; align-items: center; gap: .625rem; padding: .75rem 1rem; font-weight: 600; cursor: pointer; list-style: none; }
.consejos > summary::-webkit-details-marker { display: none; }
.consejos[open] > summary .signo-ayuda { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.consejos ul { display: grid; gap: .375rem; margin: 0; padding: 0 1rem 1rem 2.875rem; color: var(--tinta-2); font-size: .9375rem; }
.accesos { display: grid; gap: 1rem; }
.acceso-empresa h3 { margin-bottom: .5rem; color: var(--tinta-2); }
/* ───────────── Ventanas delante ───────────── */
.velo { position: fixed; inset: 0; z-index: 30; background: rgb(15 30 54 / .5); }
.ventana {
position: fixed;
inset: 0;
z-index: 31;
margin: auto;
width: min(92vw, 520px);
max-height: min(92vh, 92dvh);
padding: 0;
border: 0;
border-radius: var(--radio-grande);
background: var(--superficie);
color: var(--tinta);
box-shadow: 0 24px 60px -12px rgb(15 30 54 / .45);
overflow: hidden;
display: flex;
flex-direction: column;
}
/* ── Avisos estilo SweetAlert (app.js, posAviso): alerta, confirmar y pedir ── */
dialog.swal {
position: fixed; inset: 0; margin: auto; z-index: 60;
width: min(92vw, 30rem); padding: 1.75rem 1.5rem 1.5rem;
border: 0; border-radius: 12px; background: var(--superficie); color: var(--tinta);
box-shadow: 0 24px 60px -12px rgb(15 30 54 / .5);
display: flex; flex-direction: column; align-items: center; text-align: center; gap: .75rem;
animation: swal-entra .3s cubic-bezier(.2, 1.4, .4, 1);
}
dialog.swal::backdrop { background: rgb(15 30 54 / .45); animation: swal-velo .2s ease-out; }
dialog.swal.swal-sale { animation: swal-sale .15s ease-in forwards; }
.swal-icono {
width: 4.75rem; height: 4.75rem; border-radius: 50%; border: .25rem solid currentColor;
display: grid; place-items: center; margin: .25rem 0 .25rem; animation: swal-icono .5s ease-out;
}
.swal-icono span { font-size: 2.75rem; font-weight: 700; line-height: 1; font-family: Arial, sans-serif; }
.swal-alerta { color: #F8BB86; }
.swal-pregunta { color: #87ADBD; }
.swal-info { color: #3FC3EE; }
.swal-error { color: #F27474; }
.swal-ok { color: #A5DC86; }
.swal-titulo { margin: 0; font-size: 1.35rem; font-weight: 600; line-height: 1.3; color: #545454; overflow-wrap: anywhere; }
.swal-texto { margin: 0; font-size: 1rem; line-height: 1.45; color: #5A6573; overflow-wrap: anywhere; }
.swal-entrada { width: 100%; font-size: 1.05rem; padding: .55rem .75rem; border: 1px solid var(--linea-fuerte, #b8c0cc); border-radius: 6px; }
.swal-entrada:focus { outline: none; border-color: #B4DBED; box-shadow: 0 0 0 3px rgb(100 150 200 / .3); }
.swal-botones { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: .5rem; }
.swal-botones button {
min-width: 7rem; padding: .65rem 1.4rem; border: 0; border-radius: 6px; font: inherit; font-weight: 600; font-size: 1rem;
color: #fff; cursor: pointer; box-shadow: none;
}
.swal-si { background: var(--verde); }
.swal-si.swal-peligro { background: #DD3333; }
.swal-no { background: #6E7881; }
.swal-botones button:hover { filter: brightness(.92); }
.swal-botones button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(11 122 92 / .4); }
.swal-botones .swal-peligro:focus-visible { box-shadow: 0 0 0 3px rgb(221 51 51 / .4); }
.swal-botones .swal-no:focus-visible { box-shadow: 0 0 0 3px rgb(110 120 129 / .4); }
@keyframes swal-entra { 0% { transform: scale(.7); opacity: 0; } 45% { transform: scale(1.05); opacity: 1; } 80% { transform: scale(.97); } 100% { transform: scale(1); } }
@keyframes swal-sale { to { transform: scale(.85); opacity: 0; } }
@keyframes swal-velo { from { opacity: 0; } }
@keyframes swal-icono { 0% { transform: rotateY(-90deg); opacity: 0; } 60% { transform: rotateY(15deg); opacity: 1; } 100% { transform: rotateY(0); } }
@media (prefers-reduced-motion: reduce) { dialog.swal, dialog.swal::backdrop, .swal-icono, dialog.swal.swal-sale { animation: none; } }
/* Una ventana que todavía no se ha abierto (el panel del modo soporte espera su hora) no se ve: el display de arriba le ganaba al del navegador. */
dialog.ventana:not([open]) { display: none; }
.ventana.ancha { width: min(94vw, 860px); }
.ventana::backdrop { background: rgb(15 30 54 / .5); }
.ventana[open] ~ .velo, .ventana:modal + .velo { display: none; }
.ventana-cabeza {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1rem 1rem 1.5rem;
border-bottom: 1px solid var(--linea);
}
.ventana-cabeza h2 { font-size: 1.25rem; }
.ventana-cerrar {
display: grid;
place-items: center;
width: 2.5rem;
height: 2.5rem;
border-radius: var(--radio);
color: var(--tinta-2);
}
.ventana-cerrar:hover { background: var(--fondo); color: var(--tinta); }
/* El cuerpo es lo que se desplaza. Cada fila toma el alto de lo que trae (max-content): sin eso, una tabla larga se
encogía hasta caber (se veían 6 filas de 200) y la rueda del ratón movía la pantalla de atrás. */
.ventana-cuerpo { padding: 1.5rem; overflow: auto; display: grid; gap: 1rem; grid-auto-rows: max-content; align-content: start; overscroll-behavior: contain; min-height: 0; }
/* Con una ventana delante, la pantalla de atrás no se mueve. */
html:has(dialog.ventana[open]) { overflow: hidden; }
.ventana .acciones { margin-top: .5rem; }
.codigo-verificador {
font-family: var(--fuente-codigo);
font-size: 1.75rem;
font-weight: 700;
letter-spacing: .3em;
text-align: center;
padding: .75rem;
border: 2px dashed var(--linea-fuerte);
border-radius: var(--radio);
background: var(--fondo);
user-select: all;
}
/* ───────────── Configuración de Hacienda ───────────── */
.hacienda { max-width: 860px; }
.seccion {
display: grid;
gap: 1rem;
margin: 0;
padding: clamp(1rem, 2.5vw, 1.5rem);
border: 1px solid var(--linea);
border-radius: var(--radio-grande);
background: var(--superficie);
}
.seccion > legend {
padding: 0 .5rem;
margin-left: -.5rem;
background: var(--superficie);
border-radius: 6px;
font-family: var(--fuente-titulo);
font-size: 1.1875rem;
font-weight: 600;
}
.fila-4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.fila-telefono { grid-template-columns: minmax(90px, 1fr) minmax(140px, 2fr) minmax(180px, 3fr); }
.fila-smtp { grid-template-columns: minmax(180px, 3fr) minmax(90px, 1fr) auto; align-items: end; }
.casilla-abajo { padding-bottom: .75rem; }
.campo-corto { max-width: 360px; }
.con-boton-texto { display: flex; gap: .5rem; }
.con-boton-texto input { flex: 1; min-width: 0; }
.con-boton-texto .boton { min-height: 46px; }
input[type="file"] {
width: 100%;
padding: .5rem;
border: 1px dashed var(--linea-fuerte);
border-radius: var(--radio);
background: var(--superficie);
font: inherit;
font-size: .9375rem;
}
input[type="number"] {
width: 100%;
min-height: 46px;
padding: .5rem .75rem;
border: 1px solid var(--linea-fuerte);
border-radius: var(--radio);
background: var(--superficie);
color: var(--tinta);
font: inherit;
}
input[type="number"]:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 22%, transparent); }
.texto-alerta { color: var(--rojo); font-weight: 600; }
.acciones-fijas {
position: sticky;
bottom: 0;
padding: .75rem 0;
background: linear-gradient(to top, var(--fondo) 70%, transparent);
}
/* Empresas y sus sucursales. */
.empresa { max-width: 760px; }
.empresa.inactiva { background: #F7F9FB; }
.empresa > .boton { justify-self: start; }
.empresa-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; }
.empresa-acciones, .sucursal-acciones { display: flex; flex-wrap: wrap; gap: .375rem; }
.sucursal-fila { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; min-height: 56px; padding: .5rem .75rem; }
.sucursal-fila .menu-texto { white-space: normal; font-weight: 600; flex: 1 1 160px; }
.sucursal-acciones { margin-left: auto; }
.empresa-cabeza h2 { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: 1.375rem; }
.empresa-datos { display: flex; flex-wrap: wrap; gap: .125rem 1rem; margin-top: .25rem; color: var(--tinta-2); font-size: .9375rem; }
.sucursales { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.sucursales li + li { border-top: 1px solid var(--linea); }
.sucursales a:not(.boton) { display: flex; align-items: center; gap: .75rem; min-height: 56px; padding: .5rem .75rem; color: inherit; text-decoration: none; }
.sucursales a:not(.boton):hover { background: var(--verde-claro); }
.sucursales .menu-texto { white-space: normal; font-weight: 600; }
.acciones-ficha { padding-top: .25rem; }
/* Cuadro de confirmación. */
.dialogo {
width: min(92vw, 440px);
padding: 1.5rem;
border: 0;
border-radius: var(--radio-grande);
color: var(--tinta);
box-shadow: 0 24px 60px -12px rgb(15 30 54 / .45);
}
.dialogo[open] { display: grid; gap: .75rem; }
.dialogo::backdrop { background: rgb(15 30 54 / .5); }
.dialogo p { color: var(--tinta-2); }
.dialogo .acciones { margin-top: .5rem; }
/* Sin contenido o sin permiso. */
.vacio {
display: grid;
justify-items: center;
gap: .75rem;
padding: clamp(2rem, 8vh, 5rem) 1rem;
text-align: center;
}
.vacio h1 { font-size: 1.5rem; }
.vacio p { color: var(--tinta-2); max-width: 46ch; }
.vacio .boton { margin-top: .5rem; }
.vacio-icono {
display: grid;
place-items: center;
width: 4rem;
height: 4rem;
border-radius: 50%;
background: var(--superficie);
border: 1px solid var(--linea);
color: var(--tinta-3);
}
.vacio-icono .icono { width: 1.75rem; height: 1.75rem; }
/* ───────────── Pantallas angostas (celular, tablet en vertical) ───────────── */
@media (max-width: 860px) {
.acceso { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
.acceso-marca { gap: 1.25rem; padding: 1.25rem 1.25rem 1.5rem; }
.acceso-pie { display: none; }
.acceso-pie-movil { display: block; }
.acceso-cuerpo { align-items: start; }
/* En pantalla angosta la entrada no lleva mural: solo el logo y el formulario. */
.acceso-marca:not(:has(.tiquete)) { display: none; }
.acceso:has(.acceso-marca:not(:has(.tiquete))) { grid-template-rows: 1fr; }
/* El tiquete se acuesta: los tres pasos en una fila. */
.tiquete { width: 100%; padding: .75rem .75rem calc(.75rem + var(--diente)); }
.tiquete-titulo { display: none; }
.tiquete ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.tiquete li, .tiquete li:last-child { flex-direction: column; align-items: center; gap: .375rem; padding: 0; border: 0; text-align: center; font-size: .8125rem; }
.tiquete-texto small { display: none; }
}
@media (max-width: 640px) {
.ventana { width: 100vw; max-height: 100dvh; inset: auto 0 0 0; border-radius: var(--radio-grande) var(--radio-grande) 0 0; }
.fila-telefono, .fila-smtp { grid-template-columns: 1fr 1fr; }
.fila-telefono .campo:last-child { grid-column: 1 / -1; }
.sucursal-acciones { margin-left: 0; width: 100%; flex-wrap: nowrap; }
.sucursal-acciones .boton-peligro-suave { margin-left: auto; }
.solo-ancho { display: none; }
.barra-texto { display: none; } /* el texto de un botón que en teléfono queda solo con su ícono */
.barra-menu span { display: none; }
.tabla th, .tabla td { padding-inline: .75rem; }
.datos div { grid-template-columns: 1fr; gap: 0; }
.acciones-ficha .empuja { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition: none !important; }
.boton.enviando::before { animation-duration: 2s; }
}
/* ---- Opciones: pestañas ---------------------------------------------------------------- */
.pestanas {
display: flex; flex-wrap: wrap; gap: .25rem; margin: 1rem 0 0; padding: .25rem;
background: color-mix(in srgb, var(--marino) 6%, var(--fondo)); border-radius: var(--radio-grande);
}
.pestana {
display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; padding: .4rem .9rem; border-radius: 12px;
color: var(--tinta-2); font-weight: 600; font-size: .9375rem; text-decoration: none; white-space: nowrap;
}
.pestana .icono { width: 1.1rem; height: 1.1rem; }
.pestana:hover { background: rgb(255 255 255 / .7); color: var(--tinta); }
.pestana.activa { background: var(--superficie); color: var(--verde-oscuro); box-shadow: 0 1px 2px rgb(15 30 54 / .14); }
.pestana-cuerpo { margin-top: 1rem; }
.subpestanas { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--linea); }
.subpestanas a { padding: .5rem .25rem; margin-bottom: -1px; color: var(--tinta-2); font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; }
.subpestanas a:hover { color: var(--tinta); }
.subpestanas a.activa { color: var(--verde-oscuro); border-bottom-color: var(--verde); }
@media (max-width: 720px) {
.pestanas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
}
/* ---- Impresiones: líneas y tiquete -------------------------------------------------------- */
.impresiones-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { .impresiones-cuerpo { grid-template-columns: 1fr; } }
.lineas { display: grid; gap: .5rem; }
.linea { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto auto auto auto; gap: .5rem; align-items: center; }
.linea-numero { color: var(--tinta-3); font-size: .875rem; text-align: right; font-variant-numeric: tabular-nums; }
.linea select { padding-inline: .5rem; }
.casilla-sola { gap: 0; align-items: center; }
.casilla-sola input { margin: 0; }
.casilla-sola > span { padding: .25rem .4rem; }
.linea-botones { display: inline-flex; gap: .125rem; }
.linea-botones .boton { min-height: 32px; min-width: 32px; padding: 0 .35rem; }
.linea-botones .icono { width: 1rem; height: 1rem; }
.boton-rojo { color: var(--rojo); }
.boton-rojo:hover { background: var(--rojo-claro); }
.linea input[name=fuente] { width: 11rem; }
.linea input[name=tamano] { width: 5rem; }
@media (max-width: 720px) {
.linea { grid-template-columns: 1.6rem minmax(0, 1fr) minmax(0, 1fr); padding-bottom: .5rem; border-bottom: 1px dashed var(--linea); }
.linea input[name=texto] { grid-column: 2 / span 2; }
.linea input[name=fuente] { grid-column: 2; width: auto; }
.linea input[name=tamano] { grid-column: 3; width: auto; }
.linea .casilla-sola { grid-column: 2; }
.linea-botones { grid-column: 3; justify-self: end; }
}
.tiquete-vista { position: sticky; top: 1rem; }
.tiquete-vista-titulo { margin: 0 0 .5rem; color: var(--tinta-3); font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.papel {
padding: 1rem .9rem; background: #FFFDF7; color: #222; border: 1px solid #E6E0CF; border-radius: 4px;
box-shadow: 0 6px 18px -10px rgb(15 30 54 / .35); font-family: var(--fuente-codigo); font-size: .8125rem; line-height: 1.35;
text-align: center; overflow-wrap: anywhere;
box-sizing: content-box; width: 72mm; max-width: calc(100% - 1.8rem - 2px); /* el ancho útil del tiquete impreso */
}
.papel-relleno { color: #B9B2A0; letter-spacing: .1em; margin-block: .25rem; }
.papel-linea.negrita { font-weight: 700; }
/* ---- Datáfonos ------------------------------------------------------------------------- */
.datafonos { display: grid; gap: .75rem; margin-bottom: 1rem; }
.datafono { display: grid; grid-template-columns: 1.6rem minmax(140px, 1fr) minmax(200px, 1.4fr) auto auto; gap: .75rem; align-items: end; padding-bottom: .75rem; border-bottom: 1px dashed var(--linea); }
.datafono-monedas { display: flex; align-items: center; gap: .75rem; padding-bottom: .5rem; }
.datafono-monedas .etiqueta { font-size: .8125rem; color: var(--tinta-3); }
.casilla-corta { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
/* Cuentas bancarias para transferencias (cambio 0088). */
.cuenta-banco { display: grid; grid-template-columns: 1.6rem minmax(140px, 1fr) minmax(120px, .9fr) minmax(160px, 1.2fr) minmax(130px, auto) auto; gap: .75rem; align-items: end; padding-bottom: .75rem; border-bottom: 1px dashed var(--linea); }
.cuenta-banco .linea-numero { padding-bottom: .9rem; }
.datafono .linea-numero { padding-bottom: .9rem; }
.datafono-quitar { min-height: 44px; }
.campo-boton { align-self: end; }
@media (max-width: 720px) {
.datafono { grid-template-columns: 1.6rem minmax(0, 1fr) auto; }
.datafono .campo:nth-of-type(2) { grid-column: 2 / span 2; }
.datafono-quitar { grid-column: 3; grid-row: 1; }
}
/* ---- Logo ------------------------------------------------------------------------------ */
.logo-cuadro { display: grid; grid-template-columns: minmax(200px, 320px) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 720px) { .logo-cuadro { grid-template-columns: 1fr; } }
.logo-actual {
display: grid; place-items: center; min-height: 160px; padding: 1rem; border: 1px dashed var(--linea-fuerte); border-radius: var(--radio-grande);
background: repeating-conic-gradient(#F3F5F8 0 25%, #fff 0 50%) 0 0 / 20px 20px; text-align: center;
}
.logo-actual img { max-width: 100%; max-height: 180px; }
/* ---- Opciones de sistema, alertas, publicidad ------------------------------------------- */
.opciones-lista { display: grid; gap: .875rem; margin-bottom: 1.25rem; }
.opciones-lista-fila { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: .75rem 0 0; }
.segmentos-ancho { max-width: 320px; }
.clave-condiciones { margin-top: 1rem; padding: 1rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--fondo); }
.alerta-fila { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 1rem; align-items: start; padding-block: .75rem; border-bottom: 1px solid var(--linea); }
.alerta-fila:last-of-type { border-bottom: 0; }
@media (max-width: 720px) { .alerta-fila { grid-template-columns: 1fr; } }
textarea { font: inherit; }
.casilla-destacada { padding: 1rem; margin-bottom: 1rem; border: 1px solid var(--linea); border-radius: var(--radio); }
.casilla-destacada:has(input:checked) { border-color: var(--verde); background: var(--verde-claro); }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.galeria-item { display: grid; gap: .5rem; border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; background: var(--superficie); }
.galeria-vista { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--marino); }
.galeria-vista img, .galeria-vista video { width: 100%; height: 100%; object-fit: contain; display: block; }
.galeria-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.galeria-play .icono { width: 2.5rem; height: 2.5rem; filter: drop-shadow(0 2px 6px rgb(0 0 0 / .5)); }
.galeria-datos { display: grid; padding: 0 .75rem; }
.galeria-nombre { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.galeria-datos small { color: var(--tinta-3); }
.galeria-acciones { display: flex; gap: .25rem; padding: 0 .5rem .5rem; }
.fila-subir { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
@media (max-width: 720px) { .fila-subir { grid-template-columns: 1fr; } }
/* ---- Tarifas de IVA -------------------------------------------------------------------- */
.tarifas tr.inactiva td { color: var(--tinta-3); }
.tarifas td.codigo { font-family: var(--fuente-codigo); font-weight: 600; }
.tarifas td.tarifa { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tarifas tbody tr { cursor: pointer; }
.interruptor {
position: relative; width: 44px; height: 26px; padding: 0; border: 0; border-radius: 13px; background: var(--linea-fuerte); cursor: pointer;
transition: background .15s;
}
.interruptor-bola { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: left .15s; }
.interruptor.encendido { background: var(--verde); }
.interruptor.encendido .interruptor-bola { left: 21px; }
.interruptor:focus-visible { outline: 3px solid color-mix(in srgb, var(--verde) 55%, white); outline-offset: 2px; }
/* ---- Etiqueta de romana ---------------------------------------------------------------- */
.romana-ejemplo { margin: 1rem 0; padding: 1rem; border-radius: var(--radio); background: var(--fondo); }
.romana-codigo { display: inline-flex; margin-bottom: .5rem; font-family: var(--fuente-codigo); font-size: 1.5rem; letter-spacing: .08em; }
.romana-codigo .parte { padding: .2rem .35rem; border-bottom: 4px solid; }
.parte.verificador { color: var(--azul); border-color: var(--azul); }
.parte.codigo { color: var(--verde-oscuro); border-color: var(--verde); }
.parte.unidad { color: var(--ambar); border-color: var(--ambar); }
.parte.relleno { color: var(--tinta-3); border-color: var(--linea-fuerte); }
.parte.control { color: var(--tinta-3); border-color: var(--linea); }
.romana-ejemplo p:last-child { margin: 0; }
.romana-ejemplo.no-cabe .romana-codigo { outline: 2px solid var(--rojo); outline-offset: 4px; border-radius: 4px; }
.opciones-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; margin-bottom: 1.25rem; }
.opciones-dos .segmentos { max-width: 220px; }
.subir-con-vista { display: grid; gap: 1rem; }
.vista-previa { padding: 1rem; border: 1px dashed var(--linea-fuerte); border-radius: var(--radio); background: var(--fondo); }
.vista-previa-marco { display: grid; place-items: center; max-width: 480px; aspect-ratio: 16 / 9; background: var(--marino); border-radius: 8px; overflow: hidden; }
.vista-previa-marco img, .vista-previa-marco video { max-width: 100%; max-height: 100%; }
.vista-previa-datos { margin: .5rem 0 0; }
/* ---- Configuración POS (equipos) -------------------------------------------------------- */
.identificar h2 { display: flex; align-items: center; gap: .5rem; margin-top: 0; }
.fila-identificar { grid-template-columns: minmax(0, 420px) auto; align-items: start; }
.fila-identificar .campo-boton { align-self: start; margin-top: 1.75rem; }
@media (max-width: 720px) { .fila-identificar { grid-template-columns: 1fr; } .fila-identificar .campo-boton { margin-top: 0; } }
.equipos { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .25rem; }
.equipos a { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .6rem .75rem; border-radius: var(--radio); color: var(--tinta); text-decoration: none; }
.equipos a:hover { background: var(--fondo); }
.otros-equipos { display: inline-block; margin-left: .75rem; }
.documentos td { vertical-align: middle; }
.documentos input[type=text] { min-width: 12rem; }
.documentos .copias { width: 4.5rem; }
.segmentos-chico span { padding: .3rem .8rem; font-size: .9375rem; }
@media (max-width: 720px) {
.documentos thead { display: none; }
.documentos tr { display: grid; grid-template-columns: 1fr auto; gap: .5rem; padding: .75rem; border-bottom: 1px solid var(--linea); }
.documentos td { padding: 0; border: 0; }
.documentos td:first-child, .documentos td:last-child { grid-column: 1 / -1; }
.documentos input[type=text] { width: 100%; min-width: 0; }
}
/* ---- Proveedores ------------------------------------------------------------------------- */
.encabezado-botones { display: flex; flex-wrap: wrap; gap: .5rem; }
/* El buscador de una lista: la caja de texto con su lupa, las casillas y el botón. */
.buscador { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 1rem 0; }
.buscador-campo { position: relative; flex: 1 1 280px; max-width: 520px; }
.buscador-campo .icono { position: absolute; left: .875rem; top: 50%; transform: translateY(-50%); color: var(--tinta-3); pointer-events: none; }
.buscador-campo input[type="text"] { padding-left: 2.75rem; }
.casilla-linea { align-items: center; gap: .5rem; }
.casilla-linea input { margin: 0; }
.casilla-linea > span { font-weight: 500; color: var(--tinta-2); }
.proveedores .col-codigo { width: 1%; white-space: nowrap; text-align: right; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.proveedores td small { display: block; }
.proveedores td small.solo-angosto { display: none; } /* lo que en teléfono va debajo del nombre porque su columna se quita */
.proveedores .sin-partir { white-space: nowrap; }
.proveedores tr.inactivo td { color: var(--tinta-3); }
.proveedor-nombre { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; color: inherit; font-weight: 600; text-decoration: none; }
.proveedor-nombre:hover { color: var(--verde-oscuro); text-decoration: underline; }
.tabla-caja + .ayuda { margin-top: .75rem; }
.vacio h2 { font-size: 1.5rem; }
/* La ficha del proveedor. */
.proveedor-ficha { max-width: none; }
.fila-identificacion { grid-template-columns: minmax(200px, 1fr) minmax(280px, 2fr); }
.fila-nombre { grid-template-columns: minmax(110px, 150px) minmax(0, 1fr); }
.fila-credito { grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); }
.fila-credito .campo-plazo input { max-width: 160px; }
.obligatorio { color: var(--rojo); font-weight: 700; }
/* Lo que solo se exige con régimen simplificado aparece al elegirlo, sin esperar a guardar. */
.si-simplificado { display: none; }
.proveedor-ficha:has(input[name="regimen"][value="simplificado"]:checked) .si-simplificado { display: revert; }
/* Sin crédito, el plazo no aplica. */
.proveedor-ficha:has(input[name="credito"][value="no"]:checked) .campo-plazo { opacity: .45; }
.adicionar > summary { display: inline-flex; align-items: center; gap: .25rem; width: fit-content; padding: .25rem 0; color: var(--verde-oscuro); font-size: .9375rem; font-weight: 600; cursor: pointer; list-style: none; }
.adicionar > summary::-webkit-details-marker { display: none; }
.adicionar > summary .icono { width: 1rem; height: 1rem; transition: transform .12s; }
.adicionar[open] > summary .icono { transform: rotate(45deg); }
.adicionar[open] { display: grid; gap: .375rem; }
/* En una ventana larga, guardar y cancelar quedan siempre a la vista, pegados abajo. */
.ventana .acciones-al-pie {
position: sticky; bottom: -1.5rem; z-index: 1; /* -1.5rem: el relleno de la ventana, para que quede a ras del borde */
margin: 0 -1.5rem -1.5rem; padding: .875rem 1.5rem;
background: var(--superficie); border-top: 1px solid var(--linea);
}
/* La ventana de categorías. */
.categorias { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.categorias li { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem auto; align-items: center; gap: .5rem; }
.categorias-uso { font-size: .875rem; white-space: nowrap; text-align: right; }
.boton:disabled { opacity: .4; cursor: not-allowed; }
@media (max-width: 640px) {
.fila-identificacion, .fila-nombre, .fila-credito { grid-template-columns: 1fr; }
.fila-identificacion .con-boton-texto { flex-wrap: wrap; }
.fila-identificacion .con-boton-texto input { flex-basis: 100%; }
.fila-identificacion .con-boton-texto .boton { flex: 1; }
/* En celular el nombre ya abre la ficha: la columna del lápiz se quita para que la tabla quepa. */
.proveedores th:last-child, .proveedores .tabla-accion { display: none; }
.acciones-al-pie { flex-wrap: nowrap; gap: .375rem; }
.acciones-al-pie .boton { padding-inline: .625rem; }
/* En teléfono los botones del encabezado van en una fila: los secundarios solo con su ícono y el principal a lo ancho. */
.encabezado-botones { width: 100%; flex-wrap: nowrap; }
.encabezado-botones .boton { flex: none; min-width: 46px; padding-inline: .75rem; }
.encabezado-botones .boton-principal { flex: 1; min-width: 0; }
.proveedores td small.solo-angosto { display: block; }
.proveedores thead { display: none; }
}
/* ---- Clientes ---------------------------------------------------------------------------- */
.cliente-celda { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.cliente-celda > div { display: grid; gap: .125rem; min-width: 0; }
.cliente-foto-chica { width: 2.5rem; height: 2.5rem; flex: none; border-radius: 50%; object-fit: cover; background: var(--fondo); border: 1px solid var(--linea); }
span.cliente-foto-chica { display: grid; place-items: center; font-weight: 700; color: var(--tinta); }
.marca-enlace { text-decoration: none; width: fit-content; }
.marca-enlace:hover { filter: brightness(.95); }
.marca-roja { background: var(--rojo-claro); color: var(--rojo-oscuro); }
.clientes td small { display: block; }
.etiqueta { font-size: .9375rem; font-weight: 600; color: var(--tinta); }
.filas-varias { display: grid; gap: .5rem; }
.fila-varia { display: flex; gap: .375rem; align-items: center; }
.fila-varia input { flex: 1; min-width: 0; }
.fila-varia .boton { min-height: 44px; min-width: 44px; padding: 0; }
.agregar-fila { justify-self: start; }
.si-inscrito { display: none; }
.cliente-ficha:has(input[name="inscrito"][value="si"]:checked) .si-inscrito { display: revert; }
.cliente-ficha:has(input[name="credito"][value="no"]:checked) .campo-plazo { opacity: .45; }
.fila-gps { grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) auto; align-items: end; }
.fila-credito-3 { grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) minmax(0, 1fr); }
.foto-cuadro { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.foto-actual { display: grid; place-items: center; width: 160px; height: 160px; border-radius: var(--radio-grande); background: var(--fondo); border: 1px dashed var(--linea-fuerte); color: var(--tinta-3); overflow: hidden; }
.foto-actual img { width: 100%; height: 100%; object-fit: cover; }
.foto-actual .icono { width: 2.5rem; height: 2.5rem; }
.exoneracion-resumen { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.exoneraciones { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }
.exoneraciones li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; padding: .875rem 1rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); }
.exoneraciones li.vencida { background: #F7F9FB; }
.exoneraciones li.vencida strong { color: var(--tinta-3); text-decoration: line-through; }
.exoneracion-datos { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .625rem; min-width: 0; }
.exoneracion-datos small { flex-basis: 100%; }
.exoneracion-acciones { display: flex; gap: .25rem; align-items: center; margin-left: auto; }
.exoneracion-manual > summary .signo-ayuda { font-size: 1rem; }
.exoneracion-manual .formulario { padding: 0 1rem 1rem; }
.datos-lectura { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem 1rem; margin: 0; }
.datos-lectura div { display: grid; gap: .125rem; padding: .625rem .75rem; border-radius: var(--radio); background: var(--fondo); }
.datos-lectura dt { font-size: .8125rem; color: var(--tinta-2); }
.datos-lectura dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.categorias.con-extra li { grid-template-columns: minmax(0, 1fr) auto 7.5rem auto; }
@media (max-width: 640px) {
.fila-gps, .fila-credito-3 { grid-template-columns: 1fr; }
.foto-cuadro { grid-template-columns: 1fr; }
.foto-actual { width: 100%; max-width: 240px; height: auto; aspect-ratio: 1; }
/* El nombre arriba a todo lo ancho; debajo, en un renglón: lo de adentro, cuántos lo usan y eliminar. */
.categorias.con-extra li { grid-template-columns: auto minmax(0, 1fr) auto; padding-bottom: .5rem; border-bottom: 1px solid var(--linea); }
.categorias.con-extra li > input { grid-column: 1 / -1; }
.categorias.con-extra li > a { grid-column: 1; padding-left: 0; }
.exoneracion-acciones { margin-left: 0; }
}
/* ───────────── El menú de la pantalla (ocupa el lugar del menú principal en el lateral) ───────────── */
/* La casilla que alterna entre el menú de la pantalla y el principal. No se ve; sus etiquetas son «Menú principal» y «Volver». */
.lat-interruptor { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.lat-pantalla, .lat-general { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* Todo con hermanos (la casilla va antes que los dos menús) y con :empty, que cualquier navegador entiende. */
.lat-pantalla:empty { display: none; }
.lat-pantalla:not(:empty) ~ .lat-general { display: none; }
.lat-interruptor:checked ~ .lat-pantalla { display: none; }
.lat-interruptor:checked ~ .lat-pantalla:not(:empty) ~ .lat-general { display: flex; }
.menu-pantalla { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .25rem .75rem 1rem; display: flex; flex-direction: column; gap: 2px; }
.mp-volver {
display: flex; align-items: center; gap: .5rem; flex: none;
min-height: 42px; padding: 0 .75rem;
border: 1px solid var(--linea); border-radius: var(--radio);
background: var(--fondo); color: var(--tinta); font-weight: 600; cursor: pointer; user-select: none;
transition: border-color .12s, background-color .12s;
}
.mp-volver:hover { border-color: var(--verde); background: var(--verde-claro); }
.mp-volver .icono { width: 1.125rem; height: 1.125rem; color: var(--tinta-2); }
.lat-general > .lat-volver-pantalla { margin: 0 .75rem .5rem; }
.lat-pantalla:empty ~ .lat-general > .lat-volver-pantalla { display: none; }
.lat-interruptor:focus-visible ~ .lat-pantalla .mp-volver,
.lat-interruptor:focus-visible ~ .lat-general .mp-volver { outline: 3px solid color-mix(in srgb, var(--verde) 55%, white); outline-offset: 2px; }
.mp-titulo { display: flex; align-items: center; gap: .5rem; padding: .875rem .75rem .375rem; font-family: var(--fuente-titulo); font-size: 1.0625rem; font-weight: 600; }
.mp-titulo .icono { color: var(--verde); }
.mp-opciones { display: grid; gap: 2px; }
.mp-grupo { padding: .75rem .75rem .25rem; color: var(--tinta-3); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.mp-opcion {
display: flex; align-items: center; gap: .625rem;
width: 100%; min-height: 42px; padding: 0 .75rem;
border: 0; border-radius: 9px; background: none;
color: var(--tinta); font: inherit; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer;
transition: background-color .12s, color .12s;
}
.mp-opcion > .icono { width: 1.125rem; height: 1.125rem; color: var(--tinta-2); }
.mp-opcion > span { flex: 1; min-width: 0; }
.mp-opcion:hover { background: var(--fondo); }
.mp-opcion kbd { padding: .0625rem .375rem; border: 1px solid var(--linea); border-radius: 6px; background: var(--superficie); color: var(--tinta-3); font: 500 .6875rem var(--fuente); white-space: nowrap; }
.mp-opcion.mp-principal { background: var(--verde); color: #fff; font-weight: 600; }
.mp-opcion.mp-principal:hover { background: var(--verde-oscuro); }
.mp-opcion.mp-principal > .icono { color: #fff; }
.mp-opcion.mp-principal kbd { border-color: rgb(255 255 255 / .35); background: none; color: #fff; }
.mp-opcion.mp-actual { background: var(--verde-claro); color: var(--verde-oscuro); font-weight: 600; }
.mp-opcion.mp-actual > .icono { color: var(--verde); }
.mp-opcion.mp-peligro, .mp-opcion.mp-peligro > .icono { color: var(--rojo); }
.mp-opcion.mp-peligro:hover { background: var(--rojo-claro); }
.mp-opcion.mp-pronto { color: var(--tinta-3); cursor: default; }
.mp-opcion.mp-pronto:hover { background: none; }
.mp-opcion.mp-pronto > .icono { color: var(--linea-fuerte); }
.mp-opcion small { padding: .0625rem .5rem; border-radius: 999px; background: var(--fondo); color: var(--tinta-2); font-size: .6875rem; font-weight: 600; }
/* Los atajos de teclado no se anuncian donde no hay teclado. */
@media (hover: none), (pointer: coarse) { .mp-opcion kbd { display: none; } }
/* ───────────── Productos ───────────── */
/* La pantalla de productos usa todo el ancho: en monitor grande las secciones se reparten en más columnas. */
.pagina:has(> .producto) { max-width: none; gap: 1rem; align-content: start; grid-template-columns: minmax(0, 1fr); }
.producto { align-content: start; grid-template-columns: minmax(0, 1fr); }
.pagina:has(> .producto) .encabezado h1 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); }
.prod-cabeza { align-items: center; }
.prod-existencia { color: var(--tinta-2); font-size: .9375rem; }
.prod-existencia strong { color: var(--tinta); font-variant-numeric: tabular-nums; }
.producto { display: grid; gap: 1rem; }
.producto textarea {
width: 100%; min-height: 46px; padding: .5rem .75rem;
border: 1px solid var(--linea-fuerte); border-radius: var(--radio);
background: var(--superficie); color: var(--tinta); resize: vertical;
}
.producto textarea:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 22%, transparent); }
.producto .num { text-align: right; font-variant-numeric: tabular-nums; }
.producto input.lectura { background: var(--fondo); border-color: var(--linea); color: var(--tinta-2); }
.producto .campo label { display: flex; align-items: baseline; gap: .375rem; font-size: .8125rem; letter-spacing: -.01em; color: var(--tinta-2); white-space: nowrap; }
.contador { margin-left: auto; font-weight: 400; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.texto-ambar { color: var(--ambar); }
.enlace { padding: 0; border: 0; background: none; color: var(--verde-oscuro); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.derecha { text-align: right; }
/* La cabecera de la ficha: código (ancho, que se lea entero un código de barras), descripción, las miniaturas y abajo el detalle. */
.prod-identidad {
display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 2.6fr); gap: .75rem 1rem; align-items: start;
padding: 1rem; border: 1px solid var(--linea); border-radius: var(--radio-grande); background: var(--superficie);
}
.prod-codigo .con-boton-texto .boton { min-width: 46px; padding-inline: .75rem; }
.prod-codigo input { font-family: var(--fuente-codigo); font-size: 1.0625rem; letter-spacing: .02em; }
.prod-detalle { grid-column: 1 / -1; }
.prod-identidad:has(> .prod-imagen) { grid-template-columns: minmax(300px, 1fr) minmax(0, 2.6fr) auto; }
.prod-imagen { display: flex; gap: .375rem; align-self: end; min-width: 68px; height: 46px; padding: .25rem; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: var(--fondo); color: var(--tinta-2); font-size: .6875rem; font-weight: 600; text-decoration: none; overflow: hidden; align-items: center; justify-content: center; }
.prod-imagen.vacia { border-style: dashed; padding-inline: .75rem; gap: .25rem; }
.prod-imagen:hover { border-color: var(--verde); color: var(--verde-oscuro); }
.prod-imagen img { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; background: #fff; }
.prod-imagen .icono { width: 1.125rem; height: 1.125rem; }
.prod-imagenes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.prod-imagenes figure { margin: 0; display: grid; gap: .375rem; padding: .375rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); }
.prod-imagenes figure.principal { border-color: var(--verde); box-shadow: 0 0 0 1px var(--verde); }
.prod-imagenes figure > a { display: block; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--fondo); }
.prod-imagenes img { width: 100%; height: 100%; object-fit: contain; }
.prod-imagenes figcaption { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; justify-content: space-between; font-size: .8125rem; }
.prod-imagenes figcaption strong { color: var(--verde-oscuro); }
/* Las secciones se reparten solas en columnas, en su orden: de arriba abajo y luego a la derecha. */
.prod-columnas { columns: 320px; column-gap: 1rem; }
.prod-seccion {
break-inside: avoid; margin: 0 0 1rem;
border: 1px solid var(--linea); border-radius: var(--radio-grande); background: var(--superficie);
}
.prod-seccion > summary { display: flex; align-items: center; gap: .75rem; padding: .875rem 1rem .25rem; list-style: none; }
.prod-seccion > summary::-webkit-details-marker { display: none; }
.prod-seccion > summary h2 { flex: 1; font-size: 1.0625rem; }
/* En pantalla ancha las secciones están siempre abiertas: el título no es un botón y el resumen no hace falta. */
.prod-seccion > summary { pointer-events: none; }
.prod-seccion > summary small, .prod-abre { display: none; }
.prod-cuerpo { display: grid; gap: .625rem; padding: .5rem 1rem 1rem; }
.prod-fila { display: grid; gap: .5rem; align-items: end; }
.prod-fila-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prod-fila-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prod-fila-precio { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.prod-fila-medida { grid-template-columns: minmax(0, 1.55fr) minmax(0, .9fr) minmax(0, 1.1fr); }
.prod-precio label { color: var(--verde-oscuro); font-weight: 700; }
.prod-precio input[type="text"] { min-height: 52px; border-color: var(--verde); background: var(--verde-claro); color: var(--verde-oscuro); font-size: 1.375rem; font-weight: 700; }
.prod-nota { font-size: .8125rem; line-height: 1.35; }
.prod-ejemplo { padding: .375rem .625rem; border-radius: 8px; background: var(--fondo); font-size: .875rem; font-variant-numeric: tabular-nums; }
.prod-ejemplo:empty { display: none; }
.prod-nota-exclusion { display: none; }
.prod-pestanas:has(input[name="pestana"]:not([value="listas"]):checked) .prod-nota-exclusion { display: block; }
.prod-fila-arriba { align-items: start; }
.prod-fila-existencias { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); }
.prod-de-sucursal { margin-left: .375rem; color: var(--tinta-3); font-family: var(--fuente); font-size: .8125rem; font-weight: 500; letter-spacing: 0; }
.producto select { padding-left: .5rem; padding-right: 1.75rem; background-position: right .4375rem center; text-overflow: ellipsis; }
.producto .campo label { overflow: hidden; text-overflow: ellipsis; }
/* En los renglones apretados (ubicación), «Adicionar» es solo el signo +. */
.prod-ubicaciones .campo > .adicionar > summary .icono { width: 1.125rem; height: 1.125rem; }
.prod-mantenimiento { justify-self: start; }
.producto select:disabled { background-color: var(--fondo); color: var(--tinta-3); cursor: not-allowed; }
.prod-ubicaciones select, .prod-fila-medida select { padding-left: .4375rem; padding-right: 1.375rem; background-position: right .25rem center; font-size: .875rem; }
/* «Adicionar» va en la línea de la etiqueta, a la derecha, para no gastar un renglón; al abrirlo, el nombre nuevo sale debajo. */
.producto .campo:has(> .adicionar) { position: relative; }
.producto .campo > .adicionar > summary { position: absolute; top: -.125rem; right: 0; padding: 0; font-size: .8438rem; }
.producto .prod-cuerpo > .adicionar > summary { font-size: .875rem; }
/* Las tres pestañas de precios: listas, mayoreo y oferta. Cambian sin recargar, con la casilla marcada. */
.segmentos-3 { grid-template-columns: repeat(3, 1fr); }
.prod-pestana { display: none; gap: .5rem; }
.prod-pestanas:has(input[name="pestana"][value="listas"]:checked) [data-pestana="listas"],
.prod-pestanas:has(input[name="pestana"][value="mayoreo"]:checked) [data-pestana="mayoreo"],
.prod-pestanas:has(input[name="pestana"][value="oferta"]:checked) [data-pestana="oferta"] { display: grid; }
.prod-tabla { display: grid; gap: .375rem; }
.prod-tabla-titulos, .prod-tabla-fila { display: grid; gap: .375rem; align-items: center; }
.prod-tabla-titulos { color: var(--tinta-2); font-size: .8125rem; font-weight: 600; }
.prod-tabla-titulos span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.prod-listas .prod-tabla-titulos, .prod-listas .prod-tabla-fila { grid-template-columns: 2rem minmax(0, 1.15fr) minmax(0, .7fr) minmax(0, 1.2fr); }
.prod-escalas .prod-tabla-titulos, .prod-escalas .prod-tabla-fila { grid-template-columns: minmax(0, .7fr) minmax(0, 1.15fr) minmax(0, .7fr) minmax(0, 1.2fr) 2.25rem; }
.prod-tabla select { padding-left: .4375rem; padding-right: 1.375rem; background-position: right .25rem center; font-size: .875rem; }
.prod-tabla input[type="text"] { padding-inline: .4375rem; font-size: .9375rem; }
.prod-tabla .boton { min-height: 36px; min-width: 36px; padding: 0; }
.prod-lista-numero { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--azul-claro); color: var(--azul); font-size: .875rem; font-weight: 700; }
.prod-lista-nombre { grid-column: 2 / -1; margin-top: -.25rem; color: var(--tinta-3); }
.prod-pie-pestana { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.prod-habilitar { display: inline-flex; align-items: center; gap: .625rem; font-weight: 600; cursor: pointer; }
/* Una casilla dibujada como interruptor de sí o no. */
.palanca {
appearance: none; position: relative; flex: none; width: 44px !important; height: 26px !important; margin: 0;
border-radius: 13px; background: var(--linea-fuerte); cursor: pointer; transition: background-color .15s;
}
.palanca::before { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: left .15s; }
.palanca:checked { background: var(--verde); }
.palanca:checked::before { left: 21px; }
.prod-categorizar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .625rem; align-items: center; padding: .5rem .625rem; border-radius: var(--radio); background: var(--fondo); }
.prod-categorizar .ayuda { font-size: .8125rem; line-height: 1.3; }
.prod-opciones { gap: 0 1rem; padding-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prod-opciones label span { line-height: 1.2; }
.prod-opciones label { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 42px; border-bottom: 1px solid var(--fondo); cursor: pointer; }
.prod-cabys-nombre strong { color: var(--tinta); font-weight: 600; }
.prod-cabys-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; max-height: 18rem; overflow-y: auto; }
.prod-cabys-lista button, .prod-cabys-lista a {
display: block; width: 100%; padding: .5rem .625rem;
border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie);
color: var(--tinta); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.prod-cabys-lista button:hover, .prod-cabys-lista a:hover { border-color: var(--verde); background: var(--verde-claro); }
.prod-cabys-lista strong { font-family: var(--fuente-codigo); font-size: .9375rem; }
.prod-cabys-lista small { display: block; margin-top: .125rem; color: var(--tinta-2); }
.prod-cabys-lista .marca { padding-block: 0; font-size: .75rem; }
.prod-farma { display: grid; gap: .625rem; padding: .75rem; border: 1px dashed var(--linea-fuerte); border-radius: var(--radio); }
.prod-farma-titulo { color: var(--ambar); font-size: .875rem; font-weight: 600; }
.prod-historial { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .375rem .75rem; margin: 0; }
.prod-historial div { display: grid; gap: 0; padding: .375rem .5rem; border-radius: 8px; background: var(--fondo); }
.prod-historial dt { color: var(--tinta-2); font-size: .75rem; }
.prod-historial dd { margin: 0; font-size: .9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.prod-guardar-movil { display: none; }
/* Las ventanas de la pantalla. */
.prod-buscador { margin: 0; }
.prod-buscador select { width: auto; flex: 1 1 170px; max-width: 240px; }
.prod-lista-codigo { font-family: var(--fuente-codigo); font-size: .9375rem; }
.prod-indice { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.prod-indice a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .125rem .75rem; align-items: center; padding: .75rem .875rem; border: 1px solid var(--linea); border-radius: var(--radio); color: var(--tinta); text-decoration: none; }
.prod-indice a:hover { border-color: var(--verde); background: var(--verde-claro); }
.prod-indice small { grid-column: 1; color: var(--tinta-2); }
.prod-indice .marca { grid-column: 2; grid-row: 1 / span 2; }
.prod-enlace-lista { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem .875rem; border: 1px solid var(--linea); border-radius: var(--radio); }
.prod-enlace-lista > div { display: grid; }
/* Con ratón, los campos van más bajitos: en un monitor grande se ve toda la ficha sin bajar. */
@media (min-width: 1024px) and (pointer: fine) {
.producto input[type="text"], .producto select { min-height: 38px; padding-block: .3125rem; }
.producto .con-boton-texto .boton { min-height: 38px; }
.producto .campo { gap: .25rem; }
.producto .segmentos span { min-height: 32px; }
.producto .prod-precio input[type="text"] { min-height: 46px; }
.prod-opciones label { min-height: 40px; }
.mp-opcion { min-height: 38px; }
.mp-grupo { padding-top: .625rem; }
.producto textarea { min-height: 38px; padding-block: .3125rem; }
.prod-cuerpo { gap: .5rem; padding: .375rem .875rem .875rem; }
.prod-seccion > summary { padding: .75rem .875rem .125rem; }
.prod-seccion { margin-bottom: .75rem; }
.prod-columnas { column-gap: .75rem; }
.prod-identidad { padding: .75rem .875rem; }
.pagina:has(> .producto) { gap: .75rem; padding-top: 1.25rem; padding-bottom: 1.5rem; }
.prod-codigos .fila-varia .boton { min-height: 38px; min-width: 38px; }
}
@media (max-width: 1100px) {
.prod-identidad { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.prod-identidad:has(> .prod-imagen) { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.prod-identidad:has(> .prod-imagen) .prod-imagen { grid-column: 1 / -1; justify-content: flex-start; align-self: start; width: max-content; max-width: 100%; }
}
/* Teléfono y tablet angosta: una sola columna; cada sección se abre y se cierra, y cerrada dice lo que tiene. */
@media (max-width: 860px) {
.prod-identidad, .prod-identidad:has(> .prod-imagen) { grid-template-columns: 1fr; }
.prod-columnas { columns: auto; }
.prod-seccion { margin-bottom: .625rem; }
.prod-seccion > summary { pointer-events: auto; cursor: pointer; flex-wrap: wrap; row-gap: 0; min-height: 56px; padding: .625rem 1rem; }
.prod-seccion > summary h2 { flex: 1 1 auto; }
.prod-seccion > summary small { display: block; order: 3; flex: 1 1 100%; min-width: 0; color: var(--tinta-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-seccion[open] > summary small { display: none; }
.prod-abre { display: block; color: var(--tinta-3); transition: transform .15s; }
.prod-seccion[open] > summary .prod-abre { transform: rotate(180deg); }
.prod-existencia { display: none; }
.prod-cabeza .boton-principal { display: none; } /* en teléfono el botón de guardar va abajo, siempre a la vista */
.prod-guardar-movil {
display: block; position: sticky; bottom: 0; z-index: 5;
margin: 0 calc(-1 * clamp(1rem, 3vw, 2rem)) -4rem; padding: .625rem clamp(1rem, 3vw, 2rem) calc(.625rem + env(safe-area-inset-bottom));
background: var(--superficie); border-top: 1px solid var(--linea);
}
.prod-buscador select { max-width: none; }
.prod-opciones { grid-template-columns: 1fr; }
}
/* ---- CABYS grupal ------------------------------------------------------------------------- */
.cabys-estado { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 560px; }
.cabys-estado .falta dd { color: var(--rojo); }
/* La pantalla «No hay conexión con la base de datos»: lo que dijo SQL Server, plegado. */
.error-detalle { margin-top: 1.25rem; color: var(--tinta-2); font-size: .875rem; }
.error-detalle summary { cursor: pointer; font-weight: 600; }
.error-detalle p { margin: .5rem 0 0; overflow-wrap: anywhere; font-family: var(--fuente-codigo); font-size: .8125rem; }
/* ── Productos en Excel: las clases de archivo, lo que cambia cada columna, la tabla de cambios y el avance. ── */
.datos-lectura .falta dd { color: var(--rojo); }
.seccion > h2:has(> .cabys-numero) { display: flex; align-items: center; gap: .625rem; }
.excel-clases { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .75rem; }
.excel-clase { display: flex; gap: .75rem; align-items: flex-start; justify-content: space-between; padding: .875rem 1rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--fondo); }
.excel-clase p { margin: .25rem 0 0; color: var(--tinta-2); font-size: .875rem; }
.excel-clase > .boton { flex: none; }
label.excel-clase { justify-content: flex-start; }
label.excel-clase:has(input:checked) { border-color: var(--verde); background: var(--verde-claro); }
.excel-columnas { display: flex; flex-wrap: wrap; gap: .375rem; }
.excel-cambios td { vertical-align: top; }
.excel-cambios td > div + div { margin-top: .125rem; }
.excel-cambios s { color: var(--tinta-3); }
.excel-cambios code + small { margin-left: .375rem; }
.excel-avance { width: 100%; height: 1rem; accent-color: var(--verde); }
.cabys-paso > h2 { display: flex; align-items: center; gap: .625rem; }
.cabys-numero { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; flex: none; border-radius: 50%; background: var(--marino); color: #fff; font-family: var(--fuente); font-size: .9375rem; font-weight: 700; }
.cabys-paso .buscador { margin: 0; }
.cabys-elegido { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: .875rem 1rem; border: 1px solid var(--verde); border-radius: var(--radio); background: var(--verde-claro); }
.cabys-elegido p { margin-top: .25rem; font-weight: 600; }
.cabys-codigo { font-family: var(--fuente-codigo); }
.cabys-elegido .cabys-codigo { margin-right: .5rem; font-size: 1.125rem; }
.cabys-productos tbody tr[data-clic] { cursor: pointer; }
.cabys-productos tbody tr[data-clic]:hover td { background: var(--verde-claro); }
.cabys-productos span.proveedor-nombre { display: block; }
.cabys-productos tr.cabys-listo td { background: color-mix(in srgb, var(--verde-claro) 55%, white); }
.cabys-productos .tabla-accion { white-space: nowrap; }
@media (max-width: 640px) {
.cabys-productos .tabla-accion { display: table-cell; }
.cabys-productos th:last-child { display: table-cell; }
}
.cabys-productos span.proveedor-nombre:hover { color: inherit; text-decoration: none; }
/* ───────────── Secciones de una pantalla en teléfono (Opciones) ───────────── */
/* En PC las secciones están en el menú de la izquierda. En teléfono ese menú es un cajón, así que la página
muestra en qué sección se está y, al tocarla, la lista completa hacia abajo (sin desplazar de lado). */
.secciones-movil { display: none; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); }
.secciones-movil > summary { display: flex; align-items: center; gap: .625rem; min-height: 48px; padding: 0 .875rem; font-weight: 600; cursor: pointer; list-style: none; user-select: none; }
.secciones-movil > summary::-webkit-details-marker { display: none; }
.secciones-movil > summary > .icono:first-child { color: var(--verde); }
.secciones-movil > summary > span { flex: 1; min-width: 0; }
.secciones-movil > summary > small { color: var(--verde-oscuro); font-weight: 600; }
.secciones-movil[open] > summary .lat-abre { transform: rotate(180deg); }
.secciones-movil > nav { display: grid; gap: 2px; padding: .25rem .5rem .5rem; border-top: 1px solid var(--linea); }
@media (max-width: 1023px) { .secciones-movil { display: block; } }
/* ───────────── Unidades de medida (Opciones) ───────────── */
.unidades-titulo { display: flex; align-items: center; gap: .5rem; margin: .5rem 0 0; font-size: 1.0625rem; }
.unidades td.codigo { white-space: nowrap; }
.unidades-buscar { display: grid; gap: .75rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--linea); }
.unidades-buscar .buscador { margin: 0; }
/* ───────────── El manual ───────────── */
/* El signo «?» al lado del título de cada pantalla. */
.ayuda-boton {
display: inline-grid; place-items: center; vertical-align: middle;
width: 1.75rem; height: 1.75rem; margin-left: .5rem;
border: 1.5px solid var(--linea-fuerte); border-radius: 50%;
background: var(--superficie); color: var(--tinta-2);
font: 700 1rem/1 var(--fuente); text-decoration: none; cursor: pointer;
transition: border-color .12s, color .12s, background-color .12s;
}
a.ayuda-boton:hover, a:hover > .ayuda-boton { border-color: var(--verde); background: var(--verde-claro); color: var(--verde-oscuro); }
.portada-manual { margin-top: 1.5rem; }
.portada-manual .ayuda-boton { margin: 0 .25rem 0 0; width: 1.5rem; height: 1.5rem; font-size: .875rem; }
.portada { align-content: center; justify-items: center; }
/* El panel en que se abre: a la derecha, a todo lo alto; en teléfono, toda la pantalla. */
.panel-ayuda {
position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0;
width: min(100vw, 620px); height: 100dvh; max-width: none; max-height: none;
border: 0; border-left: 1px solid var(--linea); background: var(--superficie); color: var(--tinta);
box-shadow: -24px 0 60px -20px rgb(15 30 54 / .45);
flex-direction: column;
}
.panel-ayuda[open] { display: flex; }
.panel-ayuda::backdrop { background: rgb(15 30 54 / .35); }
.panel-ayuda > header { display: flex; align-items: center; gap: .5rem; padding: .75rem .75rem .75rem 1.25rem; border-bottom: 1px solid var(--linea); }
.panel-ayuda > header h2 { flex: 1; min-width: 0; font-size: 1.1875rem; }
.panel-ayuda .ventana-cerrar { border: 0; background: none; font-size: 1.75rem; line-height: 1; cursor: pointer; }
.panel-ayuda-otra { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radio); color: var(--tinta-2); font-size: 1.125rem; text-decoration: none; }
.panel-ayuda-otra:hover { background: var(--fondo); color: var(--tinta); }
.panel-ayuda-cuerpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1.25rem 1.25rem 2rem; }
.panel-ayuda-cuerpo .manual { max-width: none; padding: 0; border: 0; background: none; }
/* La página del manual. */
.manual { max-width: 820px; padding: clamp(1rem, 3vw, 2rem); border: 1px solid var(--linea); border-radius: var(--radio-grande); background: var(--superficie); line-height: 1.6; }
.manual > :first-child { margin-top: 0; }
.manual h3 { margin: 2rem 0 .5rem; padding-top: 1.25rem; border-top: 1px solid var(--linea); font-size: 1.25rem; }
.manual h4 { margin: 1.25rem 0 .25rem; font-size: 1.0625rem; }
.manual p { margin: .625rem 0; }
.manual ul, .manual ol { margin: .5rem 0; padding-left: 1.5rem; display: grid; gap: .3125rem; }
.manual li::marker { color: var(--verde); font-weight: 700; }
.manual a { color: var(--verde-oscuro); font-weight: 600; }
.manual kbd { padding: .0625rem .375rem; border: 1px solid var(--linea-fuerte); border-bottom-width: 2px; border-radius: 6px; background: var(--fondo); font: 600 .875em var(--fuente); white-space: nowrap; }
.manual-nota { padding: .75rem 1rem; border-left: 4px solid var(--verde); border-radius: 0 var(--radio) var(--radio) 0; background: var(--verde-claro); }
.manual-num {
display: inline-grid; place-items: center; vertical-align: text-bottom;
min-width: 1.375rem; height: 1.375rem; padding: 0 .25rem; margin: 0 .125rem;
border-radius: 999px; background: #d92d20; color: #fff; font: 700 .8125rem/1 var(--fuente);
}
.manual-foto { margin: 1rem 0; }
.manual-foto img { display: block; max-width: 100%; height: auto; border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: 0 6px 20px -10px rgb(15 30 54 / .35); }
.manual-foto figcaption { margin-top: .375rem; color: var(--tinta-2); font-size: .875rem; text-align: center; }
.manual-tabla { margin: .75rem 0; overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); }
.manual-tabla table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.manual-tabla th, .manual-tabla td { padding: .5rem .75rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); }
.manual-tabla th { background: var(--fondo); color: var(--tinta-2); font-size: .8125rem; }
.manual-tabla tr:last-child td { border-bottom: 0; }
.manual-tabla td:first-child { font-weight: 600; white-space: nowrap; }
.manual-pie { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--linea); }
.manual-barra { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.manual-buscar { flex: 1 1 26rem; display: flex; align-items: center; gap: .5rem; min-width: 0; }
.manual-buscar > .icono { flex: none; color: var(--tinta-3); }
.manual-buscar input { flex: 1; min-width: 0; min-height: 46px; padding: .5rem .75rem; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: var(--superficie); color: var(--tinta); font: inherit; }
.manual-hallazgos { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; max-width: 820px; }
.manual-hallazgos li { padding: .75rem 1rem; }
.manual-hallazgos a { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; color: var(--verde-oscuro); text-decoration: none; font-size: 1.0625rem; }
.manual-hallazgos a small { color: var(--tinta-3); font-size: .8125rem; }
.manual-hallazgos p { margin: .375rem 0 0; color: var(--tinta-2); line-height: 1.5; }
.manual-hallazgos mark { padding: 0 .125rem; border-radius: 3px; background: #FFE58A; color: inherit; }
.manual-indice { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.manual-indice h2 { font-size: 1.0625rem; margin-bottom: .5rem; }
.manual-indice ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .125rem; }
.manual-indice a { display: block; padding: .4375rem .625rem; border-radius: 9px; color: var(--tinta); text-decoration: none; }
.manual-indice a:hover { background: var(--verde-claro); color: var(--verde-oscuro); }
@media (max-width: 640px) { .manual-tabla td:first-child { white-space: normal; } }
@media print {
.lateral, .barra, .encabezado .camino, .manual-pie { display: none !important; }
.manual { border: 0; padding: 0; max-width: none; }
}
/* ───────────── Panel flotante de mantenimiento (listas de los productos) ───────────── */
/* «Adicionar» en la ficha: abre el panel de esa lista. Va en la línea de la etiqueta, a la derecha. */
.adicionar-panel { display: inline-flex; align-items: center; gap: .25rem; color: var(--verde-oscuro); font-size: .8438rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.adicionar-panel:hover { text-decoration: underline; }
.adicionar-panel .icono { width: 1rem; height: 1rem; }
.producto .campo:has(> .adicionar-panel) { position: relative; }
.producto .campo > .adicionar-panel { position: absolute; top: -.125rem; right: 0; }
.panel-lista { width: min(96vw, 560px); height: min(92dvh, 760px); max-width: none; max-height: none; padding: 0; border: 0; border-radius: var(--radio-grande); background: var(--superficie); box-shadow: 0 24px 60px -12px rgb(15 30 54 / .45); overflow: hidden; }
.panel-lista.panel-ancho { width: min(96vw, 1100px); height: min(94dvh, 880px); }
.panel-lista::backdrop { background: rgb(15 30 54 / .5); }
.panel-lista iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 640px) { .panel-lista { width: 100vw; height: 92dvh; margin: auto 0 0; border-radius: var(--radio-grande) var(--radio-grande) 0 0; } }
/* La página que va dentro del panel (DisenoMarco). Sola, sin panel, se ve como una página angosta. */
.marco-panel { min-height: 100dvh; background: var(--superficie); }
.panel-pagina { max-width: 560px; margin-inline: auto; }
.panel-pagina-cabeza { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: .5rem; padding: .75rem .75rem .75rem 1.25rem; border-bottom: 1px solid var(--linea); background: var(--superficie); }
.panel-pagina-cabeza h1 { flex: 1; min-width: 0; font-size: 1.25rem; }
.panel-pagina-cabeza .ventana-cerrar:first-child { margin-left: -.5rem; }
.panel-pagina-cuerpo { display: grid; gap: 1rem; padding: 1.25rem; }
.pasar-a { display: grid; gap: 1rem; }
/* Barra de estado de abajo (firmador, licencia, vencimiento, mensajes, IP, derechos de autor). */
.marco { padding-bottom: 3.25rem; }
.estado-barra {
position: fixed; left: 272px; right: 0; bottom: 0; z-index: 5;
background: var(--superficie); border-top: 1px solid var(--linea);
padding: .25rem .875rem .3rem; display: grid; gap: .125rem;
}
.estado-fila { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; font-size: .8125rem; color: var(--tinta-2); }
.estado-item { display: inline-flex; align-items: center; gap: .375rem; min-width: 0; white-space: nowrap; }
.estado-item .icono { width: 1.125rem; height: 1.125rem; flex: none; }
.estado-item strong { color: var(--tinta); font-weight: 600; }
.estado-bien .icono { color: #1f9d55; }
.estado-mal .icono { color: #d93025; }
.estado-ip { margin-left: auto; }
.estado-cuenta { background: #d93025; color: #fff; border-radius: 999px; font-size: .6875rem; font-weight: 700; padding: 0 .4rem; line-height: 1.25rem; }
.estado-autor { font-size: .6875rem; color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1023px) { .estado-barra { left: 0; } }
@media (max-width: 640px) {
.estado-fila { gap: .25rem .75rem; font-size: .75rem; }
.estado-ip { margin-left: 0; }
.marco { padding-bottom: 4.5rem; }
}
@media print { .estado-barra { display: none; } }
/* Bodegas */
.bodegas { display: grid; }
.bodega-fila { display: grid; gap: .5rem; padding: .75rem 0; border-bottom: 1px solid var(--linea); }
.bodega-fila:last-child { border-bottom: 0; }
.bodega-nombre input { width: 100%; }
.bodega-acciones { display: flex; align-items: center; flex-wrap: wrap; gap: .625rem; }
.bodega-activa { display: inline-flex; align-items: center; gap: .5rem; }
@media (min-width: 640px) {
.bodega-fila { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}
.prod-bodegas td small.tenue { font-size: .8125rem; }
.prod-existencia small { margin-left: .375rem; color: var(--tinta-2); font-weight: 400; }
/* Movimientos de inventario */
.mov-entra { color: #1f7a45; }
.mov-sale { color: #b3261e; }
.campo[hidden] { display: none; }
/* Producto flotante: precio abierto, sin inventario. Lo que no va se esconde. */
.producto:not([data-flotante]) [data-solo-flotante] { display: none; }
.producto[data-flotante] [data-no-flotante] { display: none; }
.prod-flotante { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; margin-bottom: .75rem; }
.prod-flotante-check { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; }
.prod-flotante .ayuda { flex-basis: 100%; margin: 0; }
.lat-pista { margin: .75rem 1rem; font-size: .8125rem; }
.camara-velo { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.75); display: grid; place-items: center; padding: 1rem; }
.camara-caja { background: var(--superficie, #fff); border-radius: .75rem; padding: 1rem; width: min(100%, 28rem); display: grid; gap: .75rem; }
.camara-caja video { width: 100%; max-height: 60vh; background: #000; border-radius: .5rem; }
.camara-caja p { margin: 0; font-weight: 600; }
/* ───────────── La caja (Facturar) ───────────── */
/*
Pantalla fija, como un programa de escritorio: en pantalla ancha nada cambia de tamaño ni se desplaza; solo corre la
tabla de líneas. El menú lateral queda en una tira angosta (ícono y tecla) y se abre por encima al pasar el ratón.
En teléfono y tablet angosta la pantalla fluye hacia abajo, como las demás.
*/
.pagina:has(> .caja) { max-width: none; padding: .5rem .75rem; gap: 0; align-content: start; grid-template-columns: minmax(0, 1fr); }
.caja { display: grid; gap: .375rem; align-content: start; }
.caja kbd, .caja-rotulo kbd, .buscap kbd { font: 600 .625rem/1 var(--fuente-codigo); padding: .125rem .3125rem; border: 1px solid var(--linea-fuerte); border-bottom-width: 2px; border-radius: 5px; color: var(--tinta-2); background: var(--fondo); text-transform: none; letter-spacing: 0; }
.caja .campo { gap: .125rem; }
.caja .campo > label, .caja-rotulo { display: flex; align-items: center; gap: .375rem; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-3); white-space: nowrap; }
/* Cabecera: una fila. */
.caja-cabeza { display: flex; align-items: center; gap: .25rem 1rem; min-height: 30px; }
.caja-cabeza h1 { display: flex; align-items: center; gap: .375rem; margin: 0; font-size: 1.125rem; flex: none; }
.caja-lugar { flex: 0 1 auto; min-width: 0; color: var(--tinta-2); font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.caja-cabeza .marca { flex: none; }
.caja-doc { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: .5rem; padding: .1875rem .75rem; border-radius: 999px; color: #fff; font-size: .8125rem; white-space: nowrap; }
.caja-doc b { letter-spacing: .08em; }
.caja-doc code { font-size: .875rem; font-weight: 600; color: inherit; background: none; padding: 0; }
.caja-doc.es-factura { background: var(--verde); }
.caja-doc.es-tiquete { background: var(--marino); }
.caja-datos { flex: none; display: flex; gap: 1rem; margin: 0; font-size: .8125rem; color: var(--tinta-2); }
.caja-datos div { display: flex; align-items: baseline; gap: .3125rem; white-space: nowrap; }
.caja-datos dt { font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-3); }
.caja-datos dd { margin: 0; font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }
/* Cliente: una fila. */
.caja-cliente {
display: grid; grid-template-columns: auto minmax(220px, 380px) minmax(0, 1fr) auto auto; gap: .25rem .75rem; align-items: center;
padding: .375rem 0 .375rem .75rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); overflow: hidden;
}
/* Cuántos artículos lleva la factura: grande y pegado al borde derecho, donde no estorba. Ancho fijo para que nada se mueva. */
.caja-articulos {
align-self: stretch; display: grid; align-content: center; justify-items: center; width: 84px; margin: -.375rem 0;
background: var(--marino); color: #fff; line-height: 1;
}
.caja-articulos b { font-family: var(--fuente-titulo); font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.caja-articulos small { margin-top: .1875rem; font-size: .625rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; opacity: .8; }
.caja-cliente-buscar { gap: .375rem; }
.caja-cliente-buscar input[type="text"] { min-height: 38px; }
.caja-cliente-buscar .boton { min-height: 38px; }
.caja-cliente-datos { display: grid; min-width: 0; line-height: 1.3; }
.caja-cliente-datos strong { display: flex; align-items: center; gap: .5rem; min-width: 0; font-size: 1rem; }
.caja-cliente-datos strong.tenue { color: var(--tinta-2); }
.caja-cliente-datos .corta { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.caja-cliente-datos .marca { flex: none; font-size: .6875rem; padding: .0625rem .4375rem; }
.caja-cliente-datos small { color: var(--tinta-2); font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.caja-motivo { color: var(--ambar); font-weight: 600; }
.caja-cliente-acciones { display: flex; gap: .125rem; }
/* El código y lo último que entró. */
.caja-entrada {
display: grid; grid-template-columns: minmax(200px, 1.1fr) minmax(0, 2fr) 118px 62px 84px 136px auto auto; gap: .375rem .5rem; align-items: end;
padding: .375rem .75rem .5rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie);
}
.caja-entrada.con-cajas { grid-template-columns: minmax(200px, 1.1fr) minmax(0, 2fr) 118px 62px 78px 78px 136px auto auto; }
.caja-codigo { position: relative; }
.caja-codigo input[type="text"] { min-height: 44px; font-size: 1.125rem; font-weight: 600; letter-spacing: .02em; border-color: var(--verde); background: #FFFBE6; }
.caja-codigo input[type="text"]:focus { background: #FFF6CC; }
/* Las teclas dibujadas que también responden al toque (F5 del código, F2 de la descripción). */
kbd[data-pulsar] { display: inline-flex; align-items: center; gap: .25rem; cursor: pointer; user-select: none; }
kbd[data-pulsar] .icono { width: .95em; height: .95em; }
kbd[data-pulsar]:hover { border-color: var(--verde); color: var(--verde-oscuro); }
.caja-ver-valor[data-pulsar] { cursor: pointer; }
/* En pantallas de tocar no hay teclas de función: ahí son botones, grandes y fuertes. */
@media (max-width: 1023px), (pointer: coarse) {
.caja kbd[data-pulsar], .caja-rotulo kbd[data-pulsar] { font-size: .8125rem; font-weight: 800; padding: .3125rem .625rem; border: 2px solid var(--verde); border-radius: 8px; color: #fff; background: var(--verde); }
.caja kbd[data-pulsar]:hover { color: #fff; }
}
/* La guía de lo que se puede escribir: chica y clara, para que no parezca un código ya puesto. */
.caja-codigo input[type="text"]::placeholder { font-size: .8125rem; font-weight: 400; letter-spacing: 0; color: #A9B2C0; }
.caja-cant input[type="text"] { min-height: 44px; font-size: 1.0625rem; text-align: right; font-variant-numeric: tabular-nums; }
.caja-ver-valor {
display: block; height: 44px; line-height: 42px; padding: 0 .625rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--fondo);
font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.caja-ver.num .caja-ver-valor { text-align: right; }
.caja-ver-monto .caja-ver-valor { font-size: 1.125rem; color: var(--verde-oscuro); }
.caja-entrada .boton { min-height: 44px; min-width: 44px; padding-inline: .75rem; }
/* Buscar producto (F2): una ventana grande. A la izquierda lo hallado; a la derecha, del producto marcado, existencias, listas y ofertas. */
.buscap { position: fixed; inset: 0; margin: auto; width: min(1180px, 96vw); height: min(720px, 92dvh); max-height: none; padding: 0; border: 0; border-radius: var(--radio-grande); background: var(--superficie); color: var(--tinta); box-shadow: 0 30px 80px -20px rgb(15 30 54 / .55); overflow: hidden; }
.buscap[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.buscap::backdrop { background: rgb(15 30 54 / .45); }
.buscap-cabeza { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--linea); }
.buscap-cabeza h2 { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1.125rem; flex: none; }
.buscap-cabeza h2 .icono { color: var(--verde); }
.buscap-cabeza input[type="text"] { flex: 1; min-width: 0; min-height: 46px; font-size: 1.125rem; font-weight: 600; border-color: var(--verde); background: #FFFBE6; }
.buscap-cabeza .ventana-cerrar { position: static; flex: none; border: 0; background: none; cursor: pointer; }
.buscap-cuerpo { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); min-height: 0; }
.buscap-lista { overflow: auto; overscroll-behavior: contain; border-right: 1px solid var(--linea); }
.buscap-tabla { table-layout: fixed; }
.buscap-tabla th, .buscap-tabla td { height: 34px; padding: 0 .625rem; font-size: .9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buscap-tabla th { position: sticky; top: 0; z-index: 1; background: #E6EBF1; font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; border-bottom: 0; box-shadow: inset 0 -1px 0 var(--linea-fuerte); }
.buscap-tabla td { font-variant-numeric: tabular-nums; cursor: pointer; }
.buscap-tabla .b-cod { width: 150px; color: var(--tinta-2); font-family: var(--fuente-codigo); font-size: .8125rem; }
.buscap-tabla th.b-cod { font-family: inherit; font-size: .75rem; }
.buscap-tabla .b-num { width: 112px; }
.buscap-tabla .b-img { width: 44px; padding: 0 .25rem 0 .5rem; }
.buscap-tabla td.b-img img { display: block; width: 30px; height: 30px; margin: auto; object-fit: cover; border-radius: 6px; border: 1px solid var(--linea); background: #fff; }
.buscap-menu { position: absolute; z-index: 5; margin: 0; padding: .3rem; list-style: none; min-width: 200px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); box-shadow: 0 12px 32px -8px rgb(15 30 54 / .35); }
.buscap-menu[hidden] { display: none; }
.caja-menu { position: fixed; z-index: 40; }
.buscap-menu button { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .5rem .75rem; border: 0; border-radius: 7px; background: none; color: var(--tinta); font: inherit; font-size: .9375rem; text-align: left; cursor: pointer; }
.buscap-menu button:hover, .buscap-menu button:focus-visible { background: var(--verde-claro); color: var(--verde-oscuro); outline: none; }
.buscap-menu .icono { width: 1rem; height: 1rem; }
.bd-imagen { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 .75rem; padding: 0; border: 1px solid var(--linea); border-radius: var(--radio); background: #fff; overflow: hidden; cursor: zoom-in; }
.bd-imagen[hidden] { display: none; }
.bd-imagen img { width: 100%; height: 100%; object-fit: contain; }
.bd-imagen-cuantas:not(:empty) { position: absolute; right: .4rem; bottom: .4rem; min-width: 1.375rem; padding: 0 .4rem; border-radius: 999px; background: rgb(15 30 54 / .8); color: #fff; font-size: .75rem; line-height: 1.375rem; text-align: center; }
/* El visor de imágenes: encima del buscador, oscuro, con flechas y tira de miniaturas */
.visor { position: fixed; inset: 0; margin: auto; width: min(960px, 94vw); height: min(760px, 92dvh); max-height: none; padding: 0; border: 0; border-radius: var(--radio-grande); background: #0F1E36; color: #fff; overflow: hidden; }
.visor[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.visor::backdrop { background: rgb(15 30 54 / .7); backdrop-filter: blur(3px); }
.visor-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; }
.visor-cabeza h3 { margin: 0; flex: 1; min-width: 0; font-size: 1rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visor-cuenta { flex: none; font-size: .8125rem; color: rgb(255 255 255 / .7); font-variant-numeric: tabular-nums; }
.visor-cabeza .ventana-cerrar { position: static; border: 0; background: none; color: #fff; cursor: pointer; }
.visor-cabeza .ventana-cerrar:hover { background: rgb(255 255 255 / .12); color: #fff; }
.visor-grande { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 1rem; }
.visor-grande[hidden] { display: none; }
.visor-grande img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radio); background: #fff; }
.visor-flecha { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: rgb(255 255 255 / .15); color: #fff; cursor: pointer; }
.visor-flecha:hover { background: rgb(255 255 255 / .3); }
.visor-flecha[hidden] { display: none; }
.visor-flecha:first-child { left: 1.25rem; } .visor-flecha:last-child { right: 1.25rem; }
.visor-flecha .icono { width: 1.25rem; height: 1.25rem; }
.visor-tira { display: flex; justify-content: center; gap: .5rem; padding: .75rem 1rem 1rem; overflow-x: auto; }
.visor-tira:empty { padding: .5rem; }
.visor-mini { flex: none; width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 8px; background: #fff; overflow: hidden; cursor: pointer; opacity: .7; }
.visor-mini.activa, .visor-mini:hover { border-color: var(--verde); opacity: 1; }
.visor-mini img { width: 100%; height: 100%; object-fit: cover; }
.visor-vacio { margin: 0; padding: 3rem 1rem; text-align: center; color: rgb(255 255 255 / .7); }
.visor-vacio[hidden] { display: none; }
.buscap-tabla tbody tr:hover { background: var(--fondo); }
.buscap-tabla tr.activa td { background: var(--verde-claro); font-weight: 600; }
.buscap-tabla tr:focus { outline: none; }
.buscap-tabla tr:focus-visible td { background: var(--verde-claro); }
.buscap-tabla tbody:focus-within tr.activa td:first-child { box-shadow: inset 3px 0 0 var(--verde-oscuro); }
.buscap-espera { display: none; width: 1.25rem; height: 1.25rem; flex: none; border: 3px solid var(--verde-claro); border-top-color: var(--verde); border-radius: 50%; animation: buscap-gira .8s linear infinite; }
.buscap.buscando .buscap-espera { display: block; }
@keyframes buscap-gira { to { transform: rotate(360deg); } }
.buscap-tabla tr.activa td:first-child { box-shadow: inset 3px 0 0 var(--verde); }
.buscap-tabla td.cero { color: var(--rojo); }
.buscap-vacio { margin: 0; padding: 2rem 1rem; text-align: center; color: var(--tinta-3); }
.buscap-vacio[hidden] { display: none; }
.buscap-detalle { overflow: auto; overscroll-behavior: contain; padding: .875rem 1rem 1rem; background: #FAFBFC; }
.buscap-detalle[hidden] { display: block; visibility: hidden; }
.buscap-detalle h3 { margin: 0; font-size: 1.0625rem; line-height: 1.25; }
.buscap-detalle > p { margin: .125rem 0 0; font-size: .8125rem; }
.buscap-detalle h4 { margin: .875rem 0 .25rem; font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-3); }
.bd-renglon { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem .5rem; border-radius: 6px; font-size: .9375rem; }
.bd-renglon:nth-child(odd) { background: var(--fondo); }
.bd-renglon span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-renglon strong { flex: none; font-variant-numeric: tabular-nums; }
.bd-renglon.aqui span { font-weight: 600; color: var(--verde-oscuro); }
.bd-renglon.cero strong { color: var(--rojo); }
.bd-renglon.total { border-top: 1px solid var(--linea-fuerte); border-radius: 0; background: none; font-weight: 600; }
.bd-oferta { margin: 0 0 .25rem; padding: .375rem .5rem; border-radius: 6px; background: var(--verde-claro); color: var(--verde-oscuro); font-weight: 600; font-size: .9375rem; }
.buscap-detalle .tenue { margin: 0; font-size: .875rem; color: var(--tinta-3); }
.buscap-pie { display: flex; align-items: center; gap: 1.125rem; padding: .5rem 1rem; border-top: 1px solid var(--linea); font-size: .75rem; color: var(--tinta-3); }
.buscap-pie span { display: inline-flex; align-items: center; gap: .25rem; }
@media (max-width: 860px) {
.buscap { width: 100vw; height: 100dvh; max-width: none; max-height: none; border-radius: 0; }
.buscap-cuerpo { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1.2fr) minmax(0, 1fr); }
.buscap-lista { border-right: 0; border-bottom: 1px solid var(--linea); }
.buscap-tabla .b-cod { display: none; }
.buscap-tabla .b-img { width: 40px; }
.buscap-cabeza h2 { display: none; }
}
/* Las líneas: una rejilla. Filas de un solo renglón y columnas de ancho fijo; la descripción toma lo que sobra. */
.caja-centro { position: relative; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); }
.caja-aviso { position: absolute; z-index: 10; top: 2.375rem; left: 50%; transform: translateX(-50%); width: min(94%, 660px); cursor: pointer; }
.caja-aviso .aviso { margin: 0; box-shadow: 0 16px 36px -12px rgb(15 30 54 / .5); }
.caja-aviso[hidden] { display: none; }
.caja-lineas { overflow: auto; overscroll-behavior: contain; outline: none; min-height: 132px; border-radius: var(--radio); }
.caja-lineas:focus { border-color: var(--verde); box-shadow: 0 0 0 2px color-mix(in srgb, var(--verde) 30%, transparent); }
.caja-tabla th, .caja-tabla td { height: 32px; padding: 0 .5rem; font-size: .9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-right: 1px solid var(--linea); }
.caja-tabla th:last-child, .caja-tabla td:last-child { border-right: 0; }
.caja-tabla th { position: sticky; top: 0; z-index: 1; height: 30px; background: #E6EBF1; color: var(--tinta-2); font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; border-bottom: 0; box-shadow: inset 0 -1px 0 var(--linea-fuerte); }
.caja-tabla td { font-variant-numeric: tabular-nums; }
.caja-tabla tbody tr { cursor: default; }
.caja-tabla tbody tr:hover { background: none; }
.caja-tabla .caja-cod { color: var(--tinta-2); font-family: var(--fuente-codigo); font-size: .8125rem; }
.caja-desc-in { display: flex; align-items: center; gap: .375rem; min-width: 0; }
.caja-desc-in > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.caja-desc-in .caja-nota { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta-3); font-style: italic; }
.comprobante-nota { display: block; font-style: italic; font-size: .85em; }
.comprobante-item-nota td { font-style: italic; }
.caja-desc-in .marca { flex: none; font-size: .6875rem; padding: .0625rem .375rem; }
.caja-tabla tr.activa td { background: var(--verde-claro); }
.caja-tabla tr.activa td:first-child { box-shadow: inset 3px 0 0 var(--verde); }
.caja-tabla tr.bonificada td { color: var(--ambar); }
.caja-tabla td[data-editar] { cursor: cell; }
.caja-tabla td.cursor { background: #fff; outline: 2px solid var(--verde); outline-offset: -2px; }
.caja-tabla td.editando { position: relative; padding: 0; }
.caja-tabla input.caja-celda {
position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0 .4375rem; border: 2px solid var(--verde); border-radius: 0; box-shadow: none;
background: #FFFBE6; font: inherit; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums;
}
.caja-tabla input.caja-celda.texto { text-align: left; font-weight: 500; }
.caja-vacia td { height: auto; text-align: center; color: var(--tinta-3); padding: 2rem 1rem; white-space: normal; border-right: 0; }
.caja-tabla .c-x { padding: 0; text-align: center; }
.caja-quitar { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 0; border-radius: 6px; background: none; color: var(--tinta-3); cursor: pointer; }
.caja-quitar:hover { background: var(--rojo-claro); color: var(--rojo); }
.caja-quitar .icono { width: .9375rem; height: .9375rem; }
/* La línea de ayuda. */
.caja-ayuda { display: flex; align-items: center; gap: 1.125rem; min-height: 20px; padding: 0 .25rem; font-size: .75rem; color: var(--tinta-3); white-space: nowrap; overflow: hidden; }
.caja-ayuda span { display: inline-flex; align-items: center; gap: .25rem; }
.caja-ayuda.editando { color: var(--verde-oscuro); font-weight: 600; }
/* Reimprimir la última: al final de la línea de ayuda, a la derecha. */
.caja-ayuda .caja-ayuda-boton { margin-left: auto; min-height: 0; padding: .125rem .5rem; font-size: .75rem; }
/* El código no existe: tapa toda la caja hasta la barra espaciadora (app.js, data-no-existe). */
.caja-no-existe { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 1rem; background: rgba(60, 8, 6, .82); }
.cne-marco { display: grid; justify-items: center; gap: .5rem; width: min(760px, 100%); padding: 2rem 2rem 1.75rem; border-radius: 18px; background: #fff; border: 6px solid var(--rojo); box-shadow: 0 24px 60px rgba(0,0,0,.45); text-align: center; animation: cne-entra .18s ease-out; }
.cne-imagen { width: 150px; height: auto; color: var(--rojo); }
.cne-producto { margin: 0; font-size: 1.5rem; font-weight: 600; color: var(--tinta-2, #333); text-transform: uppercase; letter-spacing: .04em; }
.cne-codigo { margin: 0; font-family: var(--fuente-mono, monospace); font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 700; color: var(--tinta, #111); word-break: break-all; }
.cne-titulo { margin: 0; font-family: var(--fuente-titulo); font-size: clamp(2.75rem, 9vw, 5.5rem); font-weight: 800; line-height: 1; color: var(--rojo); }
.cne-seguir { margin-top: 1rem; padding: .875rem 1.5rem; font-size: 1.125rem; background: var(--rojo); color: #fff; }
.cne-seguir:hover, .cne-seguir:focus-visible { background: var(--rojo-oscuro); }
.cne-seguir kbd { margin-right: .5rem; background: rgba(255,255,255,.2); color: #fff; border-color: rgba(255,255,255,.4); }
@keyframes cne-entra { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
/* El pie: ocho casillas iguales, el neto y el botón. */
.caja-pie {
display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .75rem; align-items: stretch;
padding: .5rem .75rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie);
}
.caja-totales { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .375rem; margin: 0; }
.caja-totales div { display: grid; align-content: center; min-width: 0; padding: .1875rem .625rem; border-radius: 8px; background: var(--fondo); line-height: 1.2; }
.caja-totales dt { font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.caja-totales dd { margin: 0; font-size: clamp(1.0625rem, .7rem + .5vw, 1.3125rem); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* IVA por tarifa: cada tarifa es una pieza que no se parte; si no caben en un renglón, bajan al siguiente (antes se cortaba con «…»). */
.caja-totales .caja-desglose dd { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 .75rem; font-size: .8125rem; font-weight: 600; color: var(--tinta-2); line-height: 1.3; white-space: normal; overflow: visible; }
.caja-totales .caja-desglose dd span { white-space: nowrap; }
.texto-verde { color: var(--verde-oscuro); }
.caja-neto { display: grid; align-content: center; justify-items: end; min-width: 250px; padding: .375rem 1rem; border-radius: var(--radio); background: var(--marino); color: #fff; line-height: 1.1; }
.caja-neto > span { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; opacity: .8; }
.caja-neto strong { font-family: var(--fuente-titulo); font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.caja-neto > small { font-size: .875rem; opacity: .85; }
/* El total en dólares: siempre está, debajo del neto en colones. */
.caja-neto > .caja-neto-usd { display: flex; align-items: baseline; gap: .375rem; opacity: 1; white-space: nowrap; }
.caja-neto-usd span { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; opacity: .8; }
.caja-neto-usd b { font-family: var(--fuente-titulo); font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.caja-neto-usd i { font-style: normal; font-size: .6875rem; opacity: .7; }
/* Las ventanas de la caja: dos botones por fila (abrir y eliminar) y la guía de teclas al pie. */
.tabla-accion-doble { white-space: nowrap; }
.tabla-accion-doble .boton { vertical-align: middle; }
.tabla-accion-doble a.boton-peligro-suave { color: var(--rojo); }
.tabla-accion-doble a.boton-peligro-suave:hover { background: var(--rojo-claro); color: var(--rojo); }
.caja-teclas-ventana { margin-left: auto; font-size: .8125rem; }
.caja-teclas-ventana kbd { font: 600 .625rem/1 var(--fuente-codigo); padding: .125rem .3125rem; border: 1px solid var(--linea-fuerte); border-bottom-width: 2px; border-radius: 5px; background: var(--fondo); }
.caja-pie-botones { display: grid; }
.boton-grande { min-height: 56px; height: 100%; padding-inline: 1.5rem; font-size: 1.0625rem; }
.boton-grande kbd { margin-left: .375rem; }
.boton:disabled { opacity: .5; pointer-events: none; }
.caja-toast { position: fixed; left: 50%; bottom: 5.5rem; transform: translateX(-50%); z-index: 50; padding: .5rem 1rem; border-radius: 999px; background: var(--marino); color: #fff; font-size: .875rem; box-shadow: var(--sombra); }
.caja-conexion { white-space: nowrap; font-size: .75rem; }
.caja-toast-largo { border-radius: 12px; max-width: min(90vw, 32rem); text-align: center; }
/* Los submenús del menú de la pantalla (Apartado, Cliente, Crédito…). */
.mp-sub > summary { list-style: none; }
.mp-sub > summary::-webkit-details-marker { display: none; }
.mp-abre { width: 1rem; height: 1rem; color: var(--tinta-3); transition: transform .15s; }
.mp-sub[open] > summary .mp-abre { transform: rotate(180deg); }
.mp-sub-opciones { display: grid; gap: 1px; margin: 0 0 .25rem 1.3125rem; padding-left: .375rem; border-left: 2px solid var(--linea); }
.mp-sub-opciones .mp-opcion { min-height: 34px; font-size: .9375rem; }
.mp-opcion.mp-pronto[title] { cursor: help; }
/* En las ventanas de la caja las filas se recorren con las flechas. */
dialog.ventana tr[data-clic]:focus-within td { background: var(--verde-claro); }
@media (min-width: 1500px) {
/* La última casilla (IVA por tarifa) va al doble de ancho: ahí caben dos o tres tarifas por renglón. */
.caja-totales { grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(0, 2fr); }
}
@media (min-width: 1024px) {
/* Nada se desplaza: la caja ocupa justo la ventana y la barra de estado queda abajo, en su sitio. */
html:has(form[data-caja]) { overflow: hidden; }
/* Recepción de compras (pasos 1 y 2): el mismo menú en tira que la caja, para que la tabla quepa (el dueño, 10/10/2026). */
.marco:has(.rc-tabla) { grid-template-columns: 72px minmax(0, 1fr); }
.marco:has(.rc-tabla) > .pagina { grid-column: 2; }
.marco:has(form[data-caja]) { grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; height: 100vh; height: 100dvh; min-height: 0; padding-bottom: 0; overflow: hidden; }
.marco:has(form[data-caja]) > .pagina { grid-column: 2; grid-row: 1; height: 100%; min-height: 0; overflow: hidden; align-content: stretch; grid-template-rows: minmax(0, 1fr); }
.marco:has(form[data-caja]) > .estado-barra { position: static; grid-column: 2; grid-row: 2; }
.caja { height: 100%; min-height: 0; grid-template-rows: auto auto auto minmax(0, 1fr) auto auto; }
.caja:has(> .caja-barra:not([hidden])) { grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto; }
.caja-tabla { table-layout: fixed; }
.caja-tabla .c-ln { width: 44px; }
.caja-tabla .c-cod { width: 132px; }
.caja-tabla .c-cant { width: 78px; }
.caja-tabla .c-precio { width: 112px; }
.caja-tabla .c-dm { width: 112px; }
.caja-tabla .c-dp { width: 74px; }
.caja-tabla .c-monto { width: 112px; }
.caja-tabla .c-iva { width: 58px; }
.caja-tabla .c-neto { width: 124px; }
.caja-tabla .c-ahorro { width: 96px; }
.caja-tabla .c-x { width: 38px; }
/*
El menú en tira: 72 px con el ícono y la tecla; al pasar el ratón se abre a su ancho normal por encima de la caja.
Por dentro siempre mide lo mismo (272 px): la tira solo lo recorta, así nada salta al abrirse.
*/
.marco:has(form[data-caja], .rc-tabla) > .lateral { position: fixed; inset: 0 auto 0 0; z-index: 20; width: 72px; height: auto; overflow: hidden; transition: width .12s ease, box-shadow .12s ease; }
.marco:has(form[data-caja], .rc-tabla) > .lateral:hover { width: 272px; box-shadow: 0 0 48px rgb(15 30 54 / .3); transition-delay: .1s; }
.marco:has(form[data-caja], .rc-tabla) > .lateral > * { min-width: 272px; }
.marco:has(form[data-caja], .rc-tabla) > .lateral > .lateral-lugar { min-width: 256px; margin-inline: .5rem; padding-inline: .9375rem; }
.marco:has(form[data-caja], .rc-tabla) > .lateral > .lat-interruptor { min-width: 0; }
.marco:has(form[data-caja], .rc-tabla) .lateral-cabeza { padding-left: .875rem; min-height: 60px; }
.marco:has(form[data-caja], .rc-tabla) .lateral-pie { padding-left: 1.125rem; }
.marco:has(form[data-caja], .rc-tabla) .menu-pantalla { padding-inline: .5rem; scrollbar-width: thin; overflow-x: hidden; }
.marco:has(form[data-caja], .rc-tabla) :is(.mp-opciones, .mp-sub-opciones) { grid-template-columns: minmax(0, 1fr); }
.marco:has(form[data-caja], .rc-tabla) .mp-volver { padding-inline: .8125rem; }
.marco:has(form[data-caja], .rc-tabla) .mp-titulo { padding: .5rem .875rem .25rem; }
.marco:has(form[data-caja], .rc-tabla) .mp-opcion { min-height: 36px; padding: 0 .5rem 0 .875rem; gap: .375rem; }
.marco:has(form[data-caja], .rc-tabla) .mp-sub-opciones .mp-opcion { min-height: 32px; padding-left: .5rem; }
/* La tecla va junto al ícono (F1 Facturar), para que se lea en la tira; las combinaciones largas quedan a la derecha. */
.marco:has(form[data-caja], .rc-tabla) .mp-opcion > kbd { order: 1; padding: .0625rem .25rem; font-weight: 700; color: var(--tinta-2); }
.marco:has(form[data-caja], .rc-tabla) .mp-opcion > span { order: 2; line-height: 1.2; }
.marco:has(form[data-caja], .rc-tabla) .mp-opcion > small, .marco:has(form[data-caja], .rc-tabla) .mp-opcion > .mp-abre, .marco:has(form[data-caja], .rc-tabla) .mp-opcion > kbd.largo { order: 3; }
.marco:has(form[data-caja], .rc-tabla) .mp-opcion > kbd.largo { font-weight: 500; color: var(--tinta-3); }
.marco:has(form[data-caja], .rc-tabla) .mp-opcion.mp-principal > kbd { color: #fff; }
.marco:has(form[data-caja], .rc-tabla) .mp-opcion.mp-pronto > span { opacity: .75; }
/* Cerrada: lo que quedaría cortado a medias se esconde. */
.marco:has(form[data-caja], .rc-tabla) > .lateral:not(:hover) :is(.lateral-lugar > span, .lateral-lugar-cambio, .mp-volver > span, .mp-titulo > span, .mp-opcion > span, .mp-opcion > small, .mp-abre, kbd.largo, .mp-sub-opciones, .lateral-usuario, .lateral-pie form, .lat-buscar, .lat-menu, .lateral-cerrar) { opacity: 0; }
.marco:has(form[data-caja], .rc-tabla) > .lateral:not(:hover) :is(.lateral-lugar, .mp-volver) { border-color: transparent; background: none; }
.marco:has(form[data-caja], .rc-tabla) > .lateral:not(:hover) .mp-opcion.mp-principal { clip-path: inset(0 calc(100% - 56px) 0 0 round 9px); }
.marco:has(form[data-caja], .rc-tabla) > .lateral:not(:hover) .menu-pantalla { scrollbar-width: none; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
.caja-tabla .c-ahorro, .caja-tabla .c-iva { display: none; }
.caja-datos div:nth-child(n+3) { display: none; }
.caja-neto { min-width: 210px; }
.caja-entrada { grid-template-columns: minmax(180px, 1fr) minmax(0, 1.4fr) 104px 56px 76px 120px auto auto; }
}
@media (max-width: 1023px) {
.caja-cabeza { flex-wrap: wrap; }
.caja-datos { display: none; }
.caja-cliente { grid-template-columns: minmax(0, 1fr) auto auto; }
.caja-cliente .caja-rotulo { display: none; }
.caja-articulos { grid-column: 3; grid-row: 1 / span 2; width: 64px; }
.caja-cliente-buscar { grid-column: 1 / 3; grid-row: 1; }
.caja-cliente-datos { grid-column: 1; grid-row: 2; }
.caja-cliente-acciones { grid-column: 2; grid-row: 2; }
/* En el teléfono: el código con sus botones; debajo descripción y precio; debajo descuento, cantidad y monto. */
.caja-entrada, .caja-entrada.con-cajas { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .5rem; padding: .625rem .75rem .75rem; }
.caja-codigo { grid-row: 1; grid-column: 1 / span 8; }
.caja-entrada #c-agregar { grid-row: 1; grid-column: 9 / span 2; padding-inline: 0; }
.caja-entrada #c-camara { grid-row: 1; grid-column: 11 / span 2; padding-inline: 0; }
.caja-entrada:has(#c-camara[hidden]) .caja-codigo { grid-column: 1 / span 10; }
.caja-entrada:has(#c-camara[hidden]) #c-agregar { grid-column: 11 / span 2; }
.caja-ver-desc { grid-column: span 8; }
.caja-ver-precio { grid-column: span 4; }
.caja-ver, .caja-cant { grid-column: span 3; }
.caja-ver-desc { grid-column: span 8; }
.caja-ver-precio { grid-column: span 4; }
.caja-ver-monto { grid-column: span 6; }
.caja-entrada.con-cajas .caja-ver-monto { grid-column: span 3; }
.caja-aviso { position: static; transform: none; width: auto; }
.caja-tabla th, .caja-tabla td { white-space: normal; }
.caja-ayuda { display: none; }
.caja-pie { grid-template-columns: minmax(0, 1fr); }
.caja-neto { justify-items: stretch; min-width: 0; order: -1; }
.caja-totales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.caja-tabla .c-ln, .caja-tabla .c-cod, .caja-tabla .c-dm, .caja-tabla .c-monto, .caja-tabla .c-iva, .caja-tabla .c-ahorro { display: none; }
}
/* Cobro. */
/* ── El cobro: la disposición de Beriozka (colones, dólares, comprobantes, lista de tarjetas, pagado y cambio), ──
── en una ventana de tres cuartos de pantalla. Todo se recorre con las flechas (app.js, iniciarCobro). ── */
/* El alto alcanza para los pagos, tres tarjetas a la vista en la lista, lo pagado y los botones, sin tener que correr la ventana. */
.ventana.cobro { width: min(96vw, max(76vw, 940px)); height: min(96dvh, max(84dvh, 700px)); max-height: none; }
.ventana.cobro .ventana-cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: .75rem 1.5rem 1rem; }
.ventana.cobro .ventana-cabeza { padding-block: .5rem; }
.caja-cobro { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .625rem; }
.caja-cobro kbd, .credito-datos + .acciones kbd { font: 600 .6875rem/1 var(--fuente-codigo); padding: .1875rem .375rem; border: 1px solid currentColor; border-radius: 5px; opacity: .8; }
/* La línea del título de Cobrar lleva, en pequeño, el cliente, el tipo de documento, los avisos y el tipo de cambio. */
.ventana-cabeza-extra { flex: 1; min-width: 0; display: flex; align-items: center; gap: .75rem; font-size: .875rem; }
.ventana-cabeza-extra .cobro-cliente { flex: 0 1 auto; min-width: 6rem; }
.cobro-aviso { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: .3125rem; padding: .1875rem .5rem; border: 1px solid #EBCB85; border-radius: 6px; background: var(--ambar-claro); color: var(--ambar); font-size: .8125rem; line-height: 1.2; }
.cobro-aviso > .icono { flex: none; width: .9375rem; height: .9375rem; }
.cobro-aviso > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cobro-aviso-error { flex-shrink: .35; border-color: #EDB9B4; background: var(--rojo-claro); color: var(--rojo-oscuro); font-weight: 600; }
.cobro-cliente { display: flex; align-items: center; gap: .5rem; margin: 0; color: var(--tinta-2); }
.cobro-cliente > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cobro-tc { margin-left: auto; flex: none; font-size: 1.0625rem; font-variant-numeric: tabular-nums; color: var(--rojo); }
.cobro-rejilla { display: grid; grid-template-columns: minmax(300px, 1.25fr) minmax(0, .85fr) minmax(0, .85fr); gap: .375rem 1.25rem; align-items: center; }
.cobro-col { text-align: center; font-family: var(--fuente-titulo); font-size: 1.0625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--marino); }
.cobro-rotulo { font-family: var(--fuente-titulo); font-size: clamp(1.125rem, .75rem + .9vw, 1.625rem); font-weight: 700; color: var(--marino); white-space: nowrap; }
.cobro-rejilla input, .cobro-caja {
width: 100%; height: clamp(38px, 5.2dvh, 54px); min-height: 0; padding: 0 .875rem; border-radius: 8px;
font-size: clamp(1.25rem, .85rem + 1vw, 1.875rem); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right;
}
.cobro-rejilla input:disabled { background: var(--fondo); font-size: .875rem; font-weight: 500; text-align: center; cursor: not-allowed; }
.cobro-rejilla input.cobro-ref { font-size: clamp(1rem, .8rem + .5vw, 1.25rem); font-weight: 600; text-align: left; }
.cobro-caja { display: flex; align-items: center; justify-content: flex-end; background: var(--marino); color: #fff; }
.cobro-subtitulo { align-self: end; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); }
/* Empresa en dólares: el tipo de cambio del cobro (compra o venta), a lo ancho de las dos columnas de montos. */
.cobro-tc-elegir { grid-column: 2 / -1; height: clamp(38px, 5.2dvh, 54px); min-height: 0; min-width: 0; font-size: 1.0625rem; font-weight: 700; color: var(--rojo); }
.cobro-banco { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .625rem; }
.cobro-banco label { font-family: var(--fuente-titulo); font-size: clamp(1.125rem, .75rem + .9vw, 1.625rem); font-weight: 700; color: var(--marino); }
.cobro-banco select { height: clamp(38px, 5.2dvh, 54px); min-height: 0; min-width: 0; font-size: 1.0625rem; font-weight: 700; color: var(--rojo); }
/* El comprobante de la tarjeta y, al lado, el logo del datáfono enlazado. */
.cobro-con-pinpad { display: flex; align-items: center; gap: .625rem; min-width: 0; }
.cobro-con-pinpad input { flex: 1; min-width: 0; }
.cobro-pinpad { flex: none; display: inline-flex; align-items: center; height: clamp(38px, 5.2dvh, 54px); }
.cobro-pinpad[hidden], .cobro-pinpad [hidden] { display: none; }
.cobro-pinpad img { display: block; height: 100%; width: auto; max-width: 150px; object-fit: contain; }
.cobro-pinpad [data-pinpad-texto] { display: inline-flex; align-items: center; gap: .375rem; padding: 0 .75rem; height: 100%; border-radius: 8px; background: var(--verde-claro); color: var(--verde-oscuro); font-size: .9375rem; white-space: nowrap; }
/* Transferencia a una cuenta y tarjeta en colones o dólares (cambio 0088). */
.cobro-con-cuenta { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.cobro-con-cuenta input { flex: 1; min-width: 0; }
.cobro-con-cuenta select { flex: 0 1 11rem; min-width: 0; height: clamp(38px, 5.2dvh, 54px); min-height: 0; font-size: .9375rem; font-weight: 700; }
.cobro-con-moneda { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.cobro-con-moneda input { flex: 1; min-width: 0; }
.cobro-con-moneda select { flex: none; width: 5rem; height: clamp(38px, 5.2dvh, 54px); min-height: 0; font-size: 1rem; font-weight: 700; color: var(--rojo); }
.cobro-con-moneda select[hidden] { display: none; }
.cobro-moneda { margin-left: .375rem; padding: .0625rem .375rem; border-radius: 6px; background: var(--verde-claro); color: var(--verde-oscuro); font-size: .8125rem; font-weight: 700; vertical-align: middle; }
.cobro-moneda[hidden] { display: none; }
/* Efectivo de NC: el monto de la nota (no se escribe), el botón Aplicar y, al pedir el código, una fila a lo ancho. */
.cobro-nc { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.cobro-nc input { flex: 1; min-width: 0; }
.cobro-nc input[readonly]:not(:disabled) { background: var(--fondo); cursor: default; }
.cobro-nc .boton { flex: none; height: clamp(38px, 5.2dvh, 54px); min-height: 0; padding-inline: .875rem; font-size: 1rem; font-weight: 700; }
.cobro-nc .boton[hidden], .cobro-nc-pide[hidden] { display: none; }
.cobro-nc-pide { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .375rem 1rem; padding: .625rem .875rem; border: 2px solid var(--marino); border-radius: 8px; background: var(--fondo); }
.cobro-nc-pide label { font-family: var(--fuente-titulo); font-size: 1.125rem; font-weight: 700; color: var(--marino); }
.cobro-rejilla .cobro-nc-pide input { text-align: left; letter-spacing: .08em; }
.cobro-nc-pide small { white-space: nowrap; }
.cobro-nc-estado { grid-column: 1 / -1; min-height: 1.25rem; font-weight: 600; color: var(--rojo); }
.cobro-nc-estado.ok { color: var(--verde-oscuro); }
.cobro-tarjetas { flex: 1; min-height: 140px; overflow-y: auto; border: 1px solid var(--linea); border-radius: 8px; background: var(--fondo); }
.cobro-tarjetas .tabla { width: 100%; }
.cobro-tarjetas th { position: sticky; top: 0; background: var(--superficie); padding-block: .375rem; }
.cobro-tarjetas td { padding-block: .3125rem; font-size: 1.0625rem; font-weight: 600; background: var(--superficie); }
.cobro-tarjetas tr[data-tarjeta]:focus { outline: none; }
.cobro-tarjetas tr[data-tarjeta]:focus td { background: var(--verde-claro); }
.cobro-pie { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); gap: .5rem 1.25rem; align-items: center; }
.cobro-pie .cobro-rotulo { text-transform: uppercase; }
.cobro-caja.cobro-grande { height: clamp(46px, 6.6dvh, 68px); font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); }
.cobro-caja[data-vuelto] { background: var(--verde); }
.cobro-caja[data-vuelto].falta { background: var(--rojo); }
.cobro-botones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
/* Cada botón: la tecla grande y fuerte, y al lado qué hace, en pocas palabras. */
.cobro-boton { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: clamp(44px, 6dvh, 60px); padding-inline: .5rem; font-size: clamp(.875rem, .55rem + .55vw, 1.1875rem); font-weight: 700; white-space: nowrap; }
.cobro-boton span { min-width: 0; }
.caja-cobro .cobro-boton kbd { flex: none; font: 800 clamp(1.0625rem, .8rem + .5vw, 1.5rem)/1 var(--fuente-codigo); padding: .3125rem .5rem; border: 2px solid currentColor; border-radius: 8px; opacity: 1; }
@media (max-width: 900px) {
.ventana.cobro { width: 100vw; height: 100dvh; inset: 0; border-radius: 0; }
.cobro-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cobro-rejilla > span:first-child { display: none; }
.cobro-rejilla > .cobro-rotulo, .cobro-rejilla > .cobro-banco { grid-column: 1 / -1; margin-top: .25rem; }
.cobro-subtitulo { display: none; }
.cobro-rejilla > #p-NC { grid-column: 1 / -1; }
.cobro-rejilla > .cobro-tc-elegir { grid-column: 1 / -1; }
.cobro-pie, .cobro-botones { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ventana.cobro .ventana-cuerpo { overflow-y: auto; }
.caja-cobro { flex: none; }
.ventana.cobro .ventana-cabeza { flex-wrap: wrap; row-gap: .25rem; }
.ventana.cobro .ventana-cabeza-extra { order: 3; flex-basis: 100%; flex-wrap: wrap; row-gap: .25rem; }
}
/* Facturar a crédito: lo que debe el cliente y su límite, antes de confirmar. */
.credito-datos { display: grid; gap: .375rem; margin: 0; }
.credito-datos div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .5rem .75rem; border-radius: 8px; background: var(--fondo); }
.credito-datos dt { color: var(--tinta-2); }
.credito-datos dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.credito-datos .credito-total dd { font-family: var(--fuente-titulo); font-size: 1.5rem; }
.texto-rojo { color: var(--rojo); }
/* «Su cambio»: recién facturado, tapa toda la pantalla y lo bloquea todo hasta que se digita o se lee algo (como en Beriozka). */
.caja-lineas:has(.caja-cambio) > table { display: none; }
.caja-cambio {
position: fixed; inset: 0; z-index: 5000; display: grid; grid-template-rows: auto auto minmax(0, auto) auto auto; justify-items: center; align-content: center; gap: .75rem;
padding: 1.5rem; background: var(--superficie); text-align: center; cursor: default; user-select: none;
}
.caja-cambio p { margin: 0; }
.caja-cambio-titulo { font-family: var(--fuente-titulo); font-size: clamp(2.75rem, 1rem + 10vh, 8rem); font-weight: 800; line-height: 1; letter-spacing: .02em; text-transform: uppercase; color: #1524D9; }
.caja-cambio-monto { font-family: var(--fuente-titulo); font-size: clamp(3rem, 1rem + 14vh, 11rem); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--rojo); }
.caja-cambio-marca { display: flex; align-items: center; justify-content: center; gap: clamp(1.5rem, 5vw, 5rem); min-height: 0; padding-block: .5rem; }
.caja-cambio-billetes { height: clamp(72px, 16vh, 161px); width: auto; }
.logo-imagen.cambio { height: clamp(56px, 12vh, 120px); }
.logo.cambio { font-size: 1.5rem; }
.caja-cambio-doc { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1rem; color: var(--tinta-2); font-size: .9375rem; }
.caja-cambio-doc code { font-weight: 700; color: var(--tinta); }
.caja-cambio-alerta { color: var(--ambar); font-weight: 600; }
.caja-cambio-pregunta { font-size: 1.25rem; font-weight: 700; color: var(--tinta); }
.caja-cambio-sigue { color: var(--tinta-2); font-size: 1rem; }
.caja-consulta { display: grid; gap: .25rem; padding: 1rem; border-radius: var(--radio); background: var(--fondo); }
.caja-consulta-precio { font-family: var(--fuente-titulo); font-size: 2rem; font-weight: 700; color: var(--verde-oscuro); }
.caja-consulta-imagenes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.caja-consulta-imagen { width: 84px; height: 84px; padding: 0; border: 1px solid var(--linea); border-radius: 10px; background: #fff; overflow: hidden; cursor: zoom-in; }
.caja-consulta-imagen img { width: 100%; height: 100%; object-fit: contain; display: block; }
.caja-consulta-imagen:first-child { width: 128px; height: 128px; }
/* Opciones › Alertas de sonido */
.sonido-fila { grid-template-columns: minmax(0, 1fr) 200px 110px auto; align-items: end; }
@media (max-width: 720px) { .sonido-fila { grid-template-columns: 1fr 1fr; } .sonido-titulo { grid-column: 1 / -1; } }
.sonido-titulo { display: grid; gap: .125rem; align-self: center; }
.sonido-titulo small { color: var(--tinta-3); }
.caja-cliente-listo { padding: 1.5rem; display: grid; gap: 1rem; justify-items: start; }
.mp-peligro { color: var(--rojo); }
/* ───────────── El comprobante impreso (tiquete 80 mm u hoja) ───────────── */
.imprimir-barra { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--linea); background: var(--fondo); }
.comprobante { margin: 0 auto; padding: 4mm; color: #000; background: #fff; font-family: var(--fuente-codigo); font-size: 9pt; line-height: 1.3; }
/* En pantalla el papel lleva 4 mm de margen por lado; al imprimir, ninguno. El ancho útil es el mismo en los dos (72 mm):
si no, en pantalla los renglones se parten antes que en el papel y el diseñador engaña. */
.comprobante.tiquete { box-sizing: content-box; width: 72mm; }
.comprobante.hoja { width: 190mm; font-family: var(--fuente); font-size: 10.5pt; padding: 10mm; }
.comprobante-logo { display: block; max-width: 60%; max-height: 28mm; margin: 0 auto 2mm; }
.comprobante-cabeza, .comprobante-pie { text-align: center; }
.comprobante-linea { white-space: pre-wrap; }
.comprobante-linea.negrita { font-weight: 700; }
.comprobante-datos { margin: 2mm 0; padding: 1.5mm 0; border-top: 1px dashed #000; border-bottom: 1px dashed #000; display: grid; gap: .2mm; }
.comprobante-datos span { color: #333; }
.comprobante-tipo { font-weight: 700; text-align: center; margin-bottom: 1mm; }
.comprobante-clave code { font-size: inherit; letter-spacing: 0; }
.comprobante-clave2 { padding-left: 5.5ch; }
.comprobante-lineas-tiquete th { font-size: inherit; }
.comprobante-lineas-tiquete td { padding-top: 0 !important; padding-bottom: 0 !important; white-space: nowrap; }
.comprobante-lineas-tiquete .comprobante-item td { white-space: normal; }
.comprobante-lineas-tiquete .comprobante-item-cod td { padding-top: 1mm !important; word-break: break-all; white-space: normal; }
.comprobante-lineas-tiquete .comprobante-item-fin td { padding-bottom: .6mm !important; border-bottom: 1px dashed #bbb; }
.comprobante-lineas-tiquete .iva { font-size: 75%; width: 1%; }
.comprobante-lineas { width: 100%; border-collapse: collapse; }
.comprobante-lineas th, .comprobante-lineas td { padding: .6mm .5mm; text-align: right; vertical-align: top; }
.comprobante-lineas th { border-bottom: 1px solid #000; font-size: 8pt; }
.comprobante-lineas .izq { text-align: left; }
.comprobante-lineas small { display: block; color: #333; font-size: 7.5pt; }
.comprobante-totales { margin-top: 2mm; padding-top: 1.5mm; border-top: 1px dashed #000; display: grid; gap: .3mm; }
.comprobante-totales div { display: flex; justify-content: space-between; gap: 2mm; }
.comprobante-total { font-size: 12pt; font-weight: 700; padding: 1mm 0; }
.comprobante-ahorro { font-weight: 700; }
.comprobante-pie { margin-top: 3mm; padding-top: 1.5mm; border-top: 1px dashed #000; }
.comprobante-marca { margin-top: 2mm; font-size: 7.5pt; color: #555; }
.comprobante.hoja .comprobante-lineas th { background: #eee; }
.comprobante.hoja .comprobante-lineas td { border-bottom: 1px solid #ddd; }
@media print {
.comprobante { margin: 0; }
.comprobante.tiquete { width: 72mm; padding: 0; }
}
/* ───────────── Apartados y proformas ───────────── */
.buscador-ventana { margin-bottom: .75rem; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.campo-buscar { display: flex; gap: .5rem; flex: 1 1 18rem; }
.campo-buscar input { flex: 1; }
.apartados { display: grid; grid-template-columns: minmax(20rem, 1fr) minmax(0, 1.4fr); gap: 1rem; align-items: start; }
.apartados-lista tr.activa td { background: var(--acento-suave, #eef5ff); }
.apartados-detalle h2 { margin: 0 0 .25rem; display: flex; gap: .6rem; align-items: baseline; }
.apartados-detalle h2 small { font-size: .8rem; font-weight: 600; color: var(--tinta-2); text-transform: uppercase; letter-spacing: .04em; }
.apartados-detalle h3 { margin: 1.25rem 0 .5rem; font-size: 1rem; }
.apartados-cabeza p { margin: .15rem 0; color: var(--tinta-2); }
.apartados-totales { display: flex; flex-wrap: wrap; gap: .75rem; margin: .75rem 0; }
.apartados-totales div { flex: 1 1 8rem; padding: .6rem .8rem; border: 1px solid var(--linea); border-radius: .6rem; display: grid; gap: .15rem; }
.apartados-totales span { font-size: .8rem; color: var(--tinta-2); }
.apartados-totales b { font-size: 1.25rem; }
.apartados-saldo b { color: var(--acento, #0b6b4f); font-size: 1.5rem; }
.apartados-acciones { margin: .5rem 0 0; }
@media (max-width: 900px) { .apartados { grid-template-columns: 1fr; } }
/* ── El cuerpo del tiquete por piezas (CuerpoDocumento.razor): cada pieza es un renglón o un bloque, en el orden y con la
letra del diseño de la sucursal. dato = rótulo y valor seguidos; monto = rótulo a la izquierda y monto a la derecha. ── */
.pz { margin: .2mm 0; }
.pz-c { display: contents; } /* el envoltorio de lo que dibuja la pieza: no cuenta para la disposición */
.pz .pz-rotulo { color: inherit; }
.pz-dato .pz-rotulo, .pz-dato .pz-dos, .pz-clave .pz-rotulo, .pz-clave .pz-dos, .pz-refactura .pz-rotulo, .pz-refactura .pz-dos { color: #333; }
.pz code { font-family: inherit; font-size: inherit; letter-spacing: 0; }
.pz-clave[style*="text-align: left"] .pz-clave2 { padding-left: 5.5ch; }
.pz-titulo { margin-bottom: 1mm; }
.pz-monto { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 2mm; }
.pz-monto .pz-fila { flex: 0 0 100%; display: flex; justify-content: space-between; gap: 2mm; margin: .15mm 0; }
.pz-monto b { font-weight: 700; }
.pz-subtitulo { font-weight: 700; margin-top: 1mm; }
.pz-total, .pz-saldo, .pz-recibo-monto { padding: 1mm 0; }
.pz-linea { height: 0; margin: 1.75mm 0; border-top: 1px dashed #000; }
.pz-espacio { line-height: 1.3; }
.pz-sin-enc thead { display: none; }
.pz-sin-iva .iva { display: none; }
.pz-nc-credito .comprobante-nota { margin-top: 1mm; }
.pz-firma { margin-top: 9mm; padding-top: .5mm; border-top: 1px solid #000; }
.pz-texto { white-space: pre-wrap; }
/* ── El diseñador de documentos (Opciones › Impresiones): piezas para agregar, el papel y la letra de la pieza marcada. ── */
.dz-documentos { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: .875rem; }
.dz-documentos a { padding: .375rem .875rem; border: 1px solid var(--linea-fuerte); border-radius: 999px; color: var(--tinta); font-weight: 600; font-size: .9375rem; text-decoration: none; }
.dz-documentos a:hover { border-color: var(--tinta-2); }
.dz-documentos a.activa { background: var(--marino); border-color: var(--marino); color: #fff; }
.dz-copiar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .875rem; font-size: .9375rem; }
.dz-copiar label { font-weight: 600; }
.dz-copiar select { min-width: 15rem; }
.disenador { display: grid; grid-template-columns: 15rem minmax(0, 1fr) 17.5rem; gap: 1.25rem; align-items: start; }
.dz-lado { position: sticky; top: 1rem; display: grid; gap: .625rem; padding: .875rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); }
.dz-lado h3 { margin: 0; font-size: .9375rem; }
.dz-lado .ayuda { margin: 0; }
.dz-chips { display: flex; flex-direction: column; gap: .3125rem; max-height: 62vh; overflow: auto; }
.dz-chip { padding: .375rem .625rem; border: 1px dashed var(--linea-fuerte); border-radius: 6px; background: var(--fondo); color: var(--tinta); font: inherit; font-size: .875rem; text-align: left; cursor: grab; }
.dz-chip:hover, .dz-chip:focus-visible { border-color: var(--verde); background: var(--verde-claro); }
.dz-chip-extra { border-style: solid; }
.dz-centro { display: flex; justify-content: center; padding: 1.25rem .5rem; border-radius: var(--radio); background: var(--fondo); overflow-x: auto; }
.dz-papel { flex: none; margin: 0; box-shadow: 0 8px 24px -12px rgb(15 30 54 / .45); }
.dz-fijo { margin: 0 0 1mm; padding: 2mm 1mm; border: 1px dashed #bbb; color: #777; font: 600 7.5pt/1.3 var(--fuente); text-align: center; }
.dz-cuerpo + .dz-fijo { margin: 1mm 0 0; }
.dz-cuerpo { min-height: 30mm; }
.dz-cuerpo > [data-pieza] { cursor: grab; outline: 1px dashed transparent; outline-offset: 1px; border-radius: 2px; }
.dz-cuerpo > [data-pieza]:hover { outline-color: #8fa3bf; background: #f3f7ff; }
.dz-cuerpo > [data-pieza]:focus { outline-color: var(--verde); }
.dz-cuerpo > .dz-marcada, .dz-cuerpo > .dz-marcada:hover { outline: 2px solid var(--verde); background: var(--verde-claro); }
.dz-cuerpo > .dz-arrastrando { opacity: .4; }
.dz-cuerpo > .dz-antes { box-shadow: 0 -3px 0 0 var(--rojo); }
.dz-cuerpo > .dz-despues { box-shadow: 0 3px 0 0 var(--rojo); }
/* En el papel del diseñador la línea y el renglón en blanco tienen cuerpo, para poder tocarlos y arrastrarlos. */
.dz-cuerpo > .pz-linea { height: 3.5mm; margin: 0; border-top: 0; background: repeating-linear-gradient(90deg, #000 0 1.2mm, transparent 1.2mm 2mm) center / 100% 1px no-repeat; }
.dz-cuerpo > .pz-espacio { background: repeating-linear-gradient(45deg, #f1f1f1 0 4px, #fff 4px 8px); }
.dz-campos { display: grid; gap: .625rem; }
.dz-campos[hidden], .dz-campos [hidden] { display: none; }
.dz-campos .campo { margin: 0; }
.dz-campos .campo input, .dz-campos .campo select { width: 100%; }
.dz-mover { display: flex; flex-wrap: wrap; gap: .375rem; }
@media (max-width: 1050px) { .disenador { grid-template-columns: 1fr; } .dz-lado { position: static; } .dz-chips { flex-direction: row; flex-wrap: wrap; max-height: none; } }
/* La boleta del apartado, una por paquete: cada una en su hoja (la tiquetera corta entre una y otra). */
.comprobante-paquete { text-align: center; font-weight: 700; font-size: 130%; padding: 1mm 0; margin-bottom: 1.5mm; border: 1.5px solid #000; }
.comprobante-subtitulo { font-weight: 700; margin-top: 1mm; }
/* La nota de crédito: en qué termina (dinero devuelto o crédito para refacturar) y el código de barras de un solo uso. */
.comprobante-nota { margin-top: 2mm; padding: 1.5mm 1mm; border: 1.5px solid #000; text-align: center; }
.comprobante-nota b { display: block; font-size: 120%; }
.comprobante-nota .comprobante-barras { margin: 1.5mm auto 0; width: 100%; max-width: 62mm; }
.comprobante-barras svg { display: block; width: 100%; height: 16mm; }
.comprobante-barras code { display: block; margin-top: .5mm; font-size: 110%; letter-spacing: .12em; }
/* Las piezas opcionales del diseñador: el código de barras y el QR. */
.pz-barras .comprobante-barras { display: inline-block; width: 100%; max-width: 62mm; text-align: center; }
.pz-barras.pz-sin-consecutivo .pz-op-consecutivo, .pz-barras.pz-sin-numero .pz-op-numero { display: none; }
.pz-qr .pz-qr-caja { display: block; }
.pz-qr svg { display: inline-block; width: 44mm; height: 44mm; vertical-align: top; }
.pz-qr.pz-sin-grande svg { width: 30mm; height: 30mm; }
.pz-qr-dato { display: block; font-size: 7pt; color: #555; overflow-wrap: anywhere; }
.pz-qr-dato span + span { margin-left: .25em; }
.comprobante-firma { margin-top: 9mm; border-top: 1px solid #000; padding-top: .5mm; text-align: center; }
.comprobante-ref { margin-top: 1mm; }
/* Buscar la factura para la nota de crédito: ventana amplia, los filtros arriba (fechas, caja, cajero, producto, número)
y la lista debajo, que es la que se desplaza. */
.ventana.nc-buscar { width: min(96vw, 1180px); height: min(94dvh, 860px); }
.ventana.nc-buscar .ventana-cuerpo { flex: 1; display: flex; flex-direction: column; gap: .75rem; min-height: 0; padding-block: 1rem; overflow: hidden; }
.ventana.nc-buscar .ventana-cuerpo > .formulario:last-child { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .625rem; }
.nc-filtros { display: grid; gap: .625rem; flex: none; }
.nc-filtros-fila { display: grid; grid-template-columns: 10.5rem 10.5rem minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; align-items: end; }
.nc-filtros-fila.nc-filtros-texto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.nc-filtros .campo { margin: 0; min-width: 0; }
.nc-filtros .campo input, .nc-filtros .campo select { width: 100%; height: 2.75rem; min-height: 0; padding-inline: .75rem; font-size: 1rem; }
.nc-filtros-fila > .boton { height: 2.75rem; min-height: 0; }
.nc-rangos { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .5rem; margin: 0; font-size: .875rem; }
.nc-rangos a { padding: .1875rem .625rem; border: 1px solid var(--linea-fuerte); border-radius: 999px; color: var(--tinta); text-decoration: none; }
.nc-rangos a:hover, .nc-rangos a:focus-visible { background: var(--verde-claro); border-color: var(--verde); color: var(--verde-oscuro); }
.nc-cuenta { margin: 0; flex: none; color: var(--tinta-2); font-size: .9375rem; }
.nc-facturas { flex: 1; min-height: 8rem; overflow: auto; }
.nc-facturas th { position: sticky; top: 0; z-index: 1; background: var(--superficie); }
.nc-facturas td { padding-block: .375rem; vertical-align: middle; }
.nc-facturas td small { display: block; white-space: nowrap; }
.nc-facturas td.sin-partir { white-space: nowrap; }
.nc-facturas code { font-size: .875rem; }
.nc-facturas .tabla-accion a.boton { display: inline-flex; width: auto; height: auto; min-height: 2.125rem; padding: .25rem .875rem; color: var(--tinta); }
.nc-facturas tr:focus-within td { background: var(--verde-claro); }
@media (max-width: 720px) {
.nc-filtros-fila, .nc-filtros-fila.nc-filtros-texto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nc-filtros-fila.nc-filtros-texto .boton { grid-column: 1 / -1; }
}
/* La ventana de la nota de crédito: la cantidad a devolver de cada línea y los dos botones grandes. */
.nc-lineas input.num { width: 6.5rem; min-height: 0; height: 2.125rem; text-align: right; font-weight: 700; }
.nc-lineas tr.nc-agotada td { color: var(--tinta-3); }
.nc-destinos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.nc-destinos .boton { display: flex; flex-direction: column; align-items: center; gap: .25rem; min-height: 4.25rem; padding: .625rem .75rem; white-space: normal; text-align: center; }
.nc-destinos .boton strong { font-size: 1.125rem; }
.nc-destinos .boton small { font-weight: 500; opacity: .9; }
.nc-resumen { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0; color: var(--tinta-2); }
.nc-resumen b { color: var(--tinta); }
.comprobante-corte { break-after: page; page-break-after: always; }
@media screen { .comprobante-corte { margin-bottom: 6mm; border-bottom: 2px dashed #999; } }
.apartados-imprimir { display: inline-flex; align-items: center; gap: .4rem; }
.apartados-imprimir input { width: 4.2rem; }
.apartados-imprimir label { font-size: .85rem; color: var(--tinta-2); }
/* ───────────── El menú rápido de la caja: una tira discreta arriba del cliente ───────────── */
.caja-barra { display: flex; flex-wrap: wrap; align-items: center; gap: .125rem .25rem; min-height: 26px; padding: 0 .25rem; font-size: .8125rem; }
.caja-barra[hidden] { display: none; }
/* Las opciones que ya están en el menú rápido no se muestran otra vez en el menú lateral (app.js las marca). */
.menu-pantalla .mp-en-barra { display: none; }
.caja-barra .barra-opcion {
display: inline-flex; align-items: center; gap: .3125rem; padding: .1875rem .5rem; border: 0; border-radius: 6px; background: none;
color: var(--tinta-2); font: inherit; line-height: 1.2; white-space: nowrap; cursor: pointer; list-style: none; text-decoration: none;
}
.caja-barra .barra-opcion::-webkit-details-marker { display: none; }
.caja-barra .barra-opcion:hover, .caja-barra details[open] > summary.barra-opcion { background: var(--fondo); color: var(--tinta); }
.caja-barra .barra-opcion > .icono { width: .9375rem; height: .9375rem; flex: none; color: var(--tinta-3); }
.caja-barra .barra-opcion > .barra-abre { width: .75rem; height: .75rem; }
.caja-barra .barra-opcion kbd { font-size: .5625rem; padding: .0625rem .25rem; border-bottom-width: 1px; color: var(--tinta-3); background: none; }
.caja-barra .barra-opcion small { color: var(--tinta-3); }
.caja-barra .barra-pronto { color: var(--tinta-3); cursor: default; }
.caja-barra .barra-peligro:hover { color: var(--rojo); }
.caja-barra .barra-principal { color: var(--verde-oscuro); font-weight: 600; }
.caja-barra .barra-sub { position: relative; }
.caja-barra .barra-sub-opciones {
position: absolute; top: calc(100% + 2px); left: 0; z-index: 40; display: grid; gap: 1px; min-width: 14rem; padding: .25rem;
border: 1px solid var(--linea); border-radius: 10px; background: var(--superficie); box-shadow: 0 12px 32px rgb(15 30 54 / .18);
}
.caja-barra .barra-sub-opciones .barra-opcion { display: flex; justify-content: space-between; padding: .375rem .625rem; font-size: .875rem; }
.caja-barra .barra-sub-opciones .barra-opcion > span { flex: 1; text-align: left; }
/* 0.99.43: un submenú dentro de otro (Datáfonos › el banco › sus opciones) se abre ahí mismo, con sangría. */
.caja-barra .barra-sub .barra-sub .barra-sub-opciones { position: static; min-width: 0; margin: 0 0 .25rem .75rem; padding: 0 0 0 .375rem; border: 0; border-left: 2px solid var(--linea); border-radius: 0; box-shadow: none; }
.caja-barra .barra-sub .barra-sub > summary { display: flex; width: 100%; }
.casillas-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .125rem 1rem; }
/* Las opciones sin submenú llevan su tecla a la vista (F7, F11, Ctrl+F11…); las que despliegan submenú no: sus teclas van adentro. */
.caja-barra > .barra-sub > summary kbd { display: none; }
.caja-barra > .barra-opcion kbd { font-size: .625rem; font-weight: 700; padding: .0625rem .3125rem; border: 1px solid var(--linea-fuerte); border-radius: 4px; color: var(--tinta-2); background: var(--superficie); white-space: nowrap; }
/* ───────────── Motor de la venta en este equipo (Configuración POS) ───────────── */
.motor { max-width: 62rem; }
.motor-cargando { margin: 1rem 0 .25rem; }
.motor-resultado { margin-top: 1rem; }
.motor-estado { padding: .6rem .8rem; border-radius: var(--radio); background: var(--fondo); }
.motor-ok .motor-estado { background: #e5f6ec; color: #0b5c2e; }
.motor-mal .motor-estado { background: #fdeaea; color: #8a1c1c; }
.motor-datos td { padding: .35rem .5rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
.motor-datos td:first-child { color: var(--tinta-2); width: 45%; }
.motor-renglones, .motor-error { margin-top: .75rem; padding: .6rem .8rem; background: var(--fondo); border-radius: var(--radio); font-size: .85rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.motor-error { background: #fdeaea; color: #8a1c1c; }
/* ───────────── Emigrar (Configuración, solo soporte) ───────────── */
/* ── Control de caja: la declaración del fondo (conteo de efectivo) ── */
.pagina:has(> .fondo-caja) { max-width: 980px; align-content: start; }
.fondo-caja { display: grid; gap: 1rem; }
.fondo-cabeza h2 { font-size: 1.5rem; }
.fondo-cabeza .entrada { margin: .25rem 0 0; }
.fondo-cuerpo { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(240px, 1fr); gap: 1.25rem; align-items: start; }
.conteo-tabla td, .conteo-tabla th { padding: .3125rem .875rem; }
.conteo-tabla label { font-weight: 400; margin: 0; }
.conteo-tabla th.derecha { text-align: right; }
.conteo-tabla .conteo-cantidad { width: 6.5rem; min-height: 38px; text-align: right; }
.conteo-tabla tfoot th { padding-block: .625rem; font-size: 1.0625rem; border-top: 2px solid var(--linea); }
.conteo-con-monto .conteo-tabla tbody { opacity: .45; }
.fondo-lado { display: grid; gap: .875rem; padding: 1rem; border: 1px solid var(--linea); border-radius: var(--radio-grande); background: var(--superficie); }
.fondo-total { display: grid; gap: .125rem; padding: .75rem 1rem; border-radius: var(--radio); background: var(--marino); color: #fff; text-align: right; }
.fondo-total span { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; opacity: .8; }
.fondo-total strong { font-family: var(--fuente-titulo); font-size: 1.875rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fondo-boton { min-height: 52px; font-size: 1.0625rem; justify-content: center; }
@media (max-width: 760px) {
.fondo-cuerpo { grid-template-columns: minmax(0, 1fr); }
}
/* ── Caja de tesorería ── */
.pagina:has(> .teso-cabeza) { max-width: 1280px; align-content: start; grid-template-columns: minmax(0, 1fr); }
.teso-cabeza { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem 1.25rem; align-items: center; }
.teso-cabeza .entrada { margin: 0; }
.teso-cabeza .acciones { grid-column: 1 / -1; margin: 0; }
.teso-saldo { min-width: 15rem; }
.teso-sistema { background: var(--fondo); color: var(--tinta); border: 1px solid var(--linea); }
.teso-sistema strong { font-size: 1.375rem; }
.teso-filtro { display: flex; flex-wrap: wrap; align-items: end; gap: .625rem; }
/* Cierres: la casilla del cierre sencillo, el margen del cierre (0.95.0) y Guardar, en una fila. */
.teso-sencillo { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.teso-sencillo-margen { display: inline-flex; align-items: center; gap: .5rem; }
.teso-sencillo-margen input { width: 8rem; }
.teso-sencillo-margen small { color: var(--tinta-3); }
.teso-filtro .campo { margin: 0; }
.teso-filtro #tf-ver { width: 5.5rem; }
.teso-filtro input[type="date"], form[data-teso] input[type="date"] { width: 100%; min-height: 46px; padding: .5rem .75rem; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: var(--superficie); color: var(--tinta); font: inherit; }
.teso-filtro input[type="date"] { width: 10.5rem; }
.teso-tabla th.derecha { text-align: right; }
.teso-tabla td { vertical-align: top; }
.teso-tabla .teso-arqueo td { background: var(--fondo); font-style: italic; }
dialog.ventana .fondo-caja .fondo-cuerpo { grid-template-columns: minmax(0, 1.3fr) minmax(220px, 1fr); }
@media (max-width: 760px) {
.teso-cabeza { grid-template-columns: minmax(0, 1fr); }
dialog.ventana .fondo-caja .fondo-cuerpo { grid-template-columns: minmax(0, 1fr); }
}
/* ── Listado de productos (pantalla completa) ── */
.pagina:has(> .listado) { max-width: none; gap: .75rem; align-content: start; grid-template-columns: minmax(0, 1fr); }
.listado-filtros { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .625rem .75rem; align-items: end; padding: .875rem 1rem; border: 1px solid var(--linea); border-radius: var(--radio-grande); background: var(--superficie); }
.listado-filtros .campo { min-width: 0; margin: 0; }
.listado-filtros .campo label { font-size: .8125rem; }
.listado-filtros input, .listado-filtros select { min-height: 40px; }
.listado-filtros .listado-ancho { grid-column: span 2; }
.listado-botones { display: flex; gap: .5rem; align-items: center; }
.listado-botones .boton { min-height: 40px; }
.listado-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.listado-barra p { margin: 0; color: var(--tinta-2); display: flex; flex-wrap: wrap; gap: 0 .375rem; }
.listado-acciones { display: flex; flex-wrap: wrap; gap: .5rem; }
.listado-tabla { overflow: auto; max-height: calc(100dvh - 8rem); }
.listado-tabla .tabla th { position: sticky; top: 0; z-index: 1; background: var(--superficie); box-shadow: inset 0 -1px 0 var(--linea); }
.listado-tabla .tabla td, .listado-tabla .tabla th { padding: .375rem .75rem; font-size: .9375rem; }
.listado-tabla .tabla th.derecha { text-align: right; }
.listado-tabla .tabla td:nth-child(2) { min-width: 16rem; }
.listado-tabla .marca { margin-left: .25rem; padding: .0625rem .4375rem; font-size: .6875rem; vertical-align: middle; }
.listado-codigo { font-variant-numeric: tabular-nums; color: inherit; text-decoration: none; }
.listado-codigo:hover, .listado-codigo:focus-visible { text-decoration: underline; }
.listado-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .25rem 1rem; }
.listado-atajos { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: 0 0 .5rem; }
.listado-registros { max-width: 260px; }
.prod-hallados td { padding-block: .4375rem; }
@media (max-width: 640px) {
.listado-filtros .listado-ancho { grid-column: auto; }
}
.lista-simple { margin: .75rem 0 0; padding-left: 1.2rem; display: grid; gap: .35rem; color: var(--tinta-2); }
.emigrar-columnas { display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin: .5rem 0 1rem; font-size: .85rem; overflow-wrap: anywhere; }
.emigrar-columnas .usada code { font-weight: 700; }
/* Reimprimir (Ctrl+F11): fechas, texto y Buscar en un renglón; el botón no se estira. */
.nc-filtros-fila.re-filtros { grid-template-columns: 10.5rem 10.5rem minmax(0, 1fr) auto; }
@media (max-width: 720px) {
.nc-filtros-fila.re-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nc-filtros-fila.re-filtros > .campo:nth-child(3), .nc-filtros-fila.re-filtros > .boton { grid-column: 1 / -1; }
}
/* (D) Lo que todavía no está disponible va apagado (disabled) y con la marca «Pronto» (Opciones › Sistema, Configuración POS):
que también se vea apagado. No usa clases nuevas: se guía por :disabled. */
fieldset:disabled .segmentos label,
fieldset:disabled .casilla,
.casilla:has(> input:disabled) { cursor: not-allowed; }
fieldset:disabled .segmentos,
fieldset:disabled .casilla > span,
fieldset:disabled .campo > label,
.casilla:has(> input:disabled) > span > small { opacity: .6; }
/* La barra de abajo: lo que todavía no hace nada (vencimiento de la licencia, mensajes) se ve apagado. */
.estado-item.estado-pronto { opacity: .55; }
/* Publicidad en la caja: encima de todo, en negro, la imagen o el video completos sin deformarse. */
.caja-publicidad { position: fixed; inset: 0; z-index: 9000; background: #000; cursor: none; }
.caja-publicidad-vista { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.caja-publicidad-vista img, .caja-publicidad-vista video { width: 100%; height: 100%; object-fit: contain; }
.caja-publicidad-pie { position: absolute; left: 0; right: 0; bottom: .75rem; text-align: center; color: rgba(255, 255, 255, .7); font-size: .875rem; text-shadow: 0 1px 2px #000; pointer-events: none; }
@media print { .caja-publicidad { display: none; } }
/* Menú ágil: venta táctil, botones grandes de departamentos, categorías y productos */
.ventana.tactil { width: min(98vw, 1280px); height: min(96dvh, 860px); max-height: none; }
.ventana.tactil .ventana-cuerpo { flex: 1; min-height: 0; display: flex; padding: .75rem 1rem 1rem; }
.agil { display: grid; grid-template-columns: 1fr 17rem; gap: 1rem; width: 100%; min-height: 0; }
.agil-productos { display: flex; flex-direction: column; gap: .6rem; min-height: 0; overflow: auto; }
.agil-fila { display: flex; flex-wrap: wrap; gap: .4rem; }
.agil-boton { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .4rem 1.1rem; border: 1px solid var(--borde, #cfd6e0); border-radius: var(--radio-grande, 10px); background: #fff; color: var(--tinta); font-weight: 600; text-decoration: none; }
.agil-fila-sub .agil-boton { min-height: 2.6rem; font-weight: 500; background: #f3f6fa; }
.agil-boton.activo { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.agil-buscar { display: flex; gap: .4rem; }
.agil-buscar input { flex: 1; min-height: 2.6rem; }
.agil-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .5rem; align-content: start; }
.agil-rejilla > p { grid-column: 1 / -1; }
.agil-producto { display: flex; flex-direction: column; justify-content: space-between; gap: .35rem; min-height: 5.5rem; padding: .6rem; text-align: left; border: 1px solid var(--borde, #cfd6e0); border-radius: var(--radio-grande, 10px); background: #fff; color: var(--tinta); cursor: pointer; }
.agil-producto:active { background: #e6eefb; }
.agil-nombre { font-weight: 600; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.agil-precio { font-variant-numeric: tabular-nums; color: var(--tinta-3); }
.agil-tiquete { display: flex; flex-direction: column; gap: .6rem; border-left: 1px solid var(--borde, #cfd6e0); padding-left: 1rem; min-height: 0; }
.agil-tiquete h3 { margin: 0; }
.agil-tiquete ul { list-style: none; margin: 0; padding: 0; flex: 1; overflow: auto; display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; }
.agil-total { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-size: 1.3rem; }
.agil-tiquete .boton { min-height: 3rem; justify-content: center; text-align: center; }
@media (max-width: 760px) { .agil { grid-template-columns: 1fr; overflow: auto; } .agil-tiquete { border-left: 0; padding-left: 0; } }
/* Imágenes de un producto: seis cuadros arriba (los del producto y los vacíos que reciben lo que se arrastra) y el buscador abajo */
.ventana.imagenes-producto { width: min(96vw, 1100px); height: min(94dvh, 900px); max-height: none; }
.ventana.imagenes-producto .ventana-cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: .75rem 1.25rem 1rem; }
.gal { display: flex; flex-direction: column; gap: .75rem; min-height: 0; flex: 1; }
.gal-ayuda { margin: 0; font-size: .875rem; color: var(--tinta-2); }
.gal-ranuras { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .625rem; }
.gal-ranura { position: relative; margin: 0; aspect-ratio: 1; border-radius: var(--radio-grande); overflow: hidden; display: grid; place-items: center; align-content: center; gap: .25rem; font-size: .75rem; font-weight: 600; transition: transform .12s, box-shadow .12s, border-color .12s; }
.gal-ranura.llena { border: 1px solid var(--linea); background: var(--superficie); cursor: grab; }
.gal-ranura.llena img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.gal-ranura.principal { border-color: var(--verde); box-shadow: 0 0 0 2px var(--verde-claro), 0 0 0 3px var(--verde); }
.gal-marca { position: absolute; top: .4rem; left: .4rem; padding: .1rem .5rem; border-radius: 999px; background: var(--verde); color: #fff; font-size: .6875rem; letter-spacing: .02em; text-transform: uppercase; }
.gal-acciones { position: absolute; inset: auto 0 0 0; display: flex; justify-content: center; gap: .25rem; padding: .35rem; background: linear-gradient(transparent, rgb(15 30 54 / .75)); opacity: 0; transition: opacity .15s; }
.gal-ranura.llena:hover .gal-acciones, .gal-ranura.llena:focus-within .gal-acciones { opacity: 1; }
@media (hover: none) { .gal-acciones { opacity: 1; } }
.gal-accion { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .5rem; border: 0; border-radius: 999px; background: rgb(255 255 255 / .92); color: var(--tinta); font: inherit; font-size: .6875rem; font-weight: 600; cursor: pointer; text-decoration: none; }
.gal-accion .icono { width: .875rem; height: .875rem; }
.gal-accion.peligro { color: var(--rojo, #B42318); }
.gal-ranura.vacia { border: 2px dashed var(--linea-fuerte); background: var(--fondo); color: var(--tinta-3); cursor: pointer; }
.gal-ranura.vacia:hover, .gal-ranura.vacia:focus-within { border-color: var(--verde); color: var(--verde-oscuro); }
.gal-ranura.vacia .icono { width: 1.5rem; height: 1.5rem; }
.gal-ranura.recibe { border-color: var(--verde); border-style: solid; background: var(--verde-claro); color: var(--verde-oscuro); transform: scale(1.04); box-shadow: 0 6px 18px rgb(11 122 92 / .25); }
.gal-ranura.llena.recibe { box-shadow: 0 0 0 3px var(--verde); }
.gal-ranura.espera { pointer-events: none; }
.gal-ranura.espera::after { content: ""; position: absolute; inset: 0; background: rgb(255 255 255 / .6) url("data:image/svg+xml;utf8,") center / 2rem no-repeat; }
.gal-subir { display: contents; }
.gal-barra { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.gal-subir input[type=file] { font-size: .8125rem; }
html.js .gal-subir input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
html.js .gal-subir .sin-js { display: none; }
.gal-barra .boton.apagado { opacity: .5; pointer-events: none; }
.gal-buscar { display: flex; flex-direction: column; gap: .5rem; min-height: 0; flex: 1; border-top: 1px solid var(--linea); padding-top: .75rem; }
.gal-buscador { display: flex; align-items: center; gap: .5rem; padding: .25rem .25rem .25rem .75rem; border: 1px solid var(--linea-fuerte); border-radius: 999px; background: var(--superficie); }
.gal-buscador:focus-within { border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-claro); }
.gal-buscador .icono { width: 1.125rem; height: 1.125rem; color: var(--tinta-3); flex: none; }
.gal-buscador input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; padding: .5rem 0; outline: none; }
.gal-buscador .boton { border-radius: 999px; }
.gal-resultados { display: flex; flex-direction: column; gap: .5rem; min-height: 0; overflow: auto; padding-right: .25rem; }
.gal-resultados h3 { margin: .25rem 0 0; font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-2); }
.gal-resultados h3 small { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--tinta-3); margin-left: .25rem; }
.gal-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .5rem; }
.gal-hallada { position: relative; aspect-ratio: 1; padding: 0; border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; background: #fff; cursor: grab; transition: transform .12s, box-shadow .12s; }
.gal-hallada:hover, .gal-hallada:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 20px rgb(15 30 54 / .15); border-color: var(--verde); }
.gal-hallada:active { cursor: grabbing; }
.gal-hallada:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.gal-hallada img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.gal-hallada.arrastrando { opacity: .5; }
.gal-origen { position: absolute; left: 0; right: 0; bottom: 0; padding: .2rem .4rem; background: rgb(15 30 54 / .65); color: #fff; font-size: .625rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.gal-mas { position: absolute; top: .3rem; right: .3rem; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--verde); color: #fff; opacity: 0; transition: opacity .15s; }
.gal-mas .icono { width: .875rem; height: .875rem; }
.gal-hallada:hover .gal-mas, .gal-hallada:focus-visible .gal-mas { opacity: 1; }
@media (hover: none) { .gal-mas { opacity: 1; } }
@media (max-width: 760px) { .gal-ranuras { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gal-rejilla { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); } .ventana.imagenes-producto { height: 96dvh; } }
/* En pantalla angosta (tablet vertical, celular) se desplaza toda la ventana, no solo la lista de abajo. */
@media (max-width: 760px) { .ventana.imagenes-producto .ventana-cuerpo { overflow: auto; display: block; } .gal, .gal-buscar { flex: none; } .gal-resultados { overflow: visible; } }
/* ── Recepción: los correos de compras y de gastos, y los documentos recibidos ── */
.correo-recepcion { max-width: 860px; }
.correo-proveedores { grid-template-columns: repeat(4, 1fr); display: grid; }
.correo-recepcion .ayuda .icono, .recep-buzon .icono { width: 1.1rem; height: 1.1rem; vertical-align: -.2rem; }
.correo-aviso { padding: .75rem 1rem; border: 1px solid #EBCB85; border-radius: var(--radio); background: var(--ambar-claro); color: var(--ambar); font-weight: 600; }
.correo-estado { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pestana .marca { font-size: .75rem; }
@media (max-width: 640px) { .correo-proveedores { grid-template-columns: repeat(2, 1fr); } }
.recep-buzones { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .75rem; margin: 1rem 0; align-items: stretch; }
.recep-buzon, .recep-descargar { display: grid; align-content: start; gap: .375rem; padding: .875rem 1rem; border: 1px solid var(--linea); border-radius: var(--radio-grande); background: var(--superficie); min-width: 0; }
.recep-buzon-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.recep-buzon-correo { font-weight: 600; overflow-wrap: anywhere; }
.recep-buzon .ayuda, .recep-descargar .ayuda { margin: 0; }
.recep-descargar { align-content: center; justify-items: start; }
.recep-filtro { margin-bottom: .75rem; }
.recep-filtro select { min-height: 46px; padding: .5rem .75rem; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: var(--superficie); font: inherit; }
.recep-filtro-texto { flex: 1 1 14rem; }
.recep-filtro-texto input { width: 100%; }
/* Documentos recibidos usa todo el ancho de la pantalla: la tabla trae muchas columnas y no debe quedar cortada. */
.pagina:has(.recep-ancha) { max-width: none; }
.recep-caja { overflow-x: auto; }
.recep-tabla td { font-size: .9375rem; }
.recep-tabla .recep-conse { white-space: nowrap; }
/* La clave de 50 dígitos va completa, en una sola línea, debajo del consecutivo. */
.recep-clave-lista { font-size: .75rem; letter-spacing: .01em; white-space: nowrap; }
.recep-conse, .recep-clave { font-family: var(--fuente-codigo, ui-monospace, Consolas, monospace); font-size: .875rem; overflow-wrap: anywhere; }
.recep-ver { display: grid; gap: 1rem; }
.recep-ver .datos-lectura dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.recep-ver .datos-lectura .tenue { font-weight: 400; }
.recep-lineas { overflow: auto; max-height: 46dvh; }
.recep-lineas .tabla td, .recep-lineas .tabla th { padding: .4rem .6rem; font-size: .875rem; }
.recep-totales { justify-self: end; min-width: min(100%, 22rem); }
.recep-totales div { grid-template-columns: 1fr auto; }
.recep-totales dd { text-align: right; }
.recep-total { padding-top: .5rem; border-top: 2px solid var(--linea-fuerte); font-size: 1.125rem; }
.ventana.recepcion { width: min(97vw, 1180px); }
/* ── Órdenes de compra (cambio 0046) ── */
.tabla th.derecha { text-align: right; }
.recep-filtro input[type="search"], .orden-form input[type="date"], .orden-nueva input[type="date"], .orden-nueva textarea, .orden-correo textarea {
width: 100%; min-height: 46px; padding: .5rem .75rem; border: 1px solid var(--linea-fuerte); border-radius: var(--radio);
background: var(--superficie); color: var(--tinta); font: inherit;
}
/* Lo que se arregló al leer los clientes de Beriozka: una lista corta, cada aviso con a cuántos les pasó. */
.lista-avisos { margin: .25rem 0 .75rem; padding-left: 1.25rem; display: grid; gap: .25rem; color: var(--tinta-2); }
.lista-avisos strong { color: var(--tinta); }
.orden-nueva textarea, .orden-correo textarea { resize: vertical; line-height: 1.4; }
.orden-nueva input[type="date"]:focus, .orden-form input[type="date"]:focus, .orden-nueva textarea:focus, .orden-correo textarea:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 22%, transparent); }
.orden-metodos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .625rem; }
.orden-metodo { padding: .75rem .875rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); }
.orden-metodo:has(input:checked) { border-color: var(--verde); background: var(--verde-claro); }
.orden-rotacion[hidden] { display: none; }
.orden-nueva-proveedor { flex: 3 1 18rem; }
.orden-lista td { font-size: .9375rem; }
.orden-lista tr.inactivo td { color: var(--tinta-3); }
.orden-lista small, .orden-historial-tabla small { display: block; }
/* Lo que en teléfono va debajo del nombre porque su columna se quita (la fecha, el total, la factura). */
.orden-lista small.solo-angosto, .orden-historial-tabla small.solo-angosto { display: none; }
@media (max-width: 640px) {
.orden-lista small.solo-angosto, .orden-historial-tabla small.solo-angosto { display: block; overflow-wrap: anywhere; }
.orden-lista td, .orden-lista th, .orden-historial-tabla .tabla td, .orden-historial-tabla .tabla th { padding-inline: .5rem; }
.orden-lista .marca { margin-bottom: .125rem; }
}
.orden-datos { margin: .75rem 0 1rem; }
.orden-datos dd { overflow-wrap: anywhere; }
.orden-datos .tenue { font-weight: 400; }
.orden-form { display: grid; gap: .875rem; }
.orden-cabeza { align-items: end; }
.orden-cabeza .campo { margin: 0; }
.orden-cabeza .campo:first-child { flex: 0 0 11rem; }
.orden-nota { flex: 3 1 18rem; }
.orden-costos { flex: 2 1 17rem; align-self: center; }
.orden-agregar { display: flex; flex-wrap: wrap; align-items: end; gap: .625rem; padding: .75rem; border: 1px dashed var(--linea-fuerte); border-radius: var(--radio); background: var(--fondo); }
.orden-agregar .campo { margin: 0; }
.orden-agregar-texto { flex: 1 1 16rem; }
.orden-agregar-cantidad { flex: 0 0 7rem; }
.orden-vacia { padding-block: 1.5rem; }
.orden-tabla-caja { overflow: auto; max-height: 64dvh; }
.orden-tabla thead th { position: sticky; top: 0; z-index: 1; white-space: nowrap; }
.orden-tabla td, .orden-tabla th { padding: .375rem .4375rem; font-size: .9375rem; }
.orden-tabla td:first-child, .orden-tabla th:first-child { padding-left: .75rem; }
.orden-tabla .tabla-accion { padding-right: .5rem; }
.orden-producto { min-width: 11rem; }
.orden-producto strong { display: block; font-weight: 600; }
.orden-producto small { display: block; }
.orden-tabla input.orden-num { width: 5.75rem; min-height: 38px; padding: .25rem .5rem; text-align: right; font-variant-numeric: tabular-nums; }
.orden-tabla input.orden-cant { width: 4.75rem; font-weight: 700; }
.orden-ultimo { padding: .25rem .375rem; border: 0; border-radius: 6px; background: none; color: var(--azul); font: inherit; font-variant-numeric: tabular-nums; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
.orden-ultimo:hover, .orden-ultimo:focus-visible { background: var(--azul-claro); }
.orden-sobre { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin-top: .25rem; }
.orden-sobre[hidden] { display: none; }
.orden-sobre input[type="text"] { flex: 1 1 9rem; width: auto; min-height: 32px; padding: .2rem .5rem; font-size: .875rem; }
.orden-negativa { color: var(--rojo); font-weight: 600; }
.orden-en-cero td { background: var(--fondo); }
.orden-en-cero .orden-producto strong { text-decoration: line-through; color: var(--tinta-3); }
.orden-pie { display: flex; flex-wrap: wrap; flex-direction: row-reverse; justify-content: space-between; align-items: end; gap: 1rem; }
.orden-totales { min-width: min(100%, 20rem); }
.orden-historial { display: grid; gap: .875rem; }
.orden-historial h3 { margin: .25rem 0 0; font-size: 1rem; }
.orden-historial-tabla { overflow: auto; max-height: 38dvh; }
.orden-historial-tabla .tabla td, .orden-historial-tabla .tabla th { padding: .4rem .625rem; font-size: .9375rem; }
.orden-meses { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .25rem; height: 170px; padding: .5rem .5rem 0; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); }
.orden-mes { display: grid; grid-template-rows: 1.1rem minmax(0, 1fr) auto; justify-items: center; min-width: 0; font-size: .75rem; font-variant-numeric: tabular-nums; }
.orden-mes-cantidad { font-weight: 600; white-space: nowrap; }
.orden-mes-caja { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 100%; }
.orden-mes-barra { display: block; width: 68%; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--verde); }
.orden-mes-nombre { padding: .125rem 0 .25rem; text-align: center; line-height: 1.15; color: var(--tinta-2); text-transform: capitalize; }
.orden-correo textarea { min-height: 11rem; }
/* En un teléfono cada producto es una tarjeta: arriba el nombre; debajo, con su rótulo, lo que hay, lo vendido y lo
sugerido; y al final lo que se escribe (costo y cantidad), el total y el basurero. */
@media (max-width: 760px) {
.orden-tabla-caja { max-height: none; overflow: visible; }
.orden-tabla, .orden-tabla tbody { display: block; }
.orden-tabla thead { display: none; }
.orden-tabla tbody tr {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: .375rem .625rem; align-items: end;
grid-template-areas: "prod prod prod prod" "exist min max ." "vend sug ult ult" "costo cant total quitar";
padding: .75rem; border-bottom: 1px solid var(--linea);
}
.orden-tabla tbody tr:last-child { border-bottom: 0; }
.orden-tabla tbody td { display: block; padding: 0; border: 0; text-align: left; font-size: .9375rem; min-width: 0; }
.orden-tabla tbody td[data-etiqueta]::before { content: attr(data-etiqueta); display: block; font-size: .75rem; font-weight: 400; color: var(--tinta-2); }
.orden-tabla .oc-numero { display: none; }
.orden-tabla .orden-producto { grid-area: prod; }
.orden-tabla .oc-exist { grid-area: exist; }
.orden-tabla .oc-min { grid-area: min; }
.orden-tabla .oc-max { grid-area: max; }
.orden-tabla .oc-vendido { grid-area: vend; }
.orden-tabla .oc-sugerido { grid-area: sug; }
.orden-tabla .oc-ultimo { grid-area: ult; }
.orden-tabla .oc-costo { grid-area: costo; }
.orden-tabla .oc-cant { grid-area: cant; }
.orden-tabla .oc-total { grid-area: total; align-self: center; font-weight: 600; }
.orden-tabla .oc-quitar { grid-area: quitar; align-self: end; }
.orden-tabla .oc-min:empty::after, .orden-tabla .oc-max:empty::after, .orden-tabla .oc-sugerido:empty::after, .orden-tabla .oc-vendido:empty::after { content: "—"; color: var(--tinta-3); }
.orden-tabla .orden-ultimo { padding-left: 0; }
.orden-tabla input.orden-num, .orden-tabla input.orden-cant { width: 100%; min-height: 44px; }
.orden-pie { flex-direction: column; align-items: stretch; }
.orden-pie .acciones .boton { flex: 1 1 45%; justify-content: center; }
.orden-cabeza .campo:first-child { flex: 1 1 100%; }
.orden-agregar-cantidad { flex: 1 1 5rem; }
.orden-meses { height: 140px; gap: .125rem; padding-inline: .25rem; }
.orden-mes-cantidad { font-size: .625rem; }
.orden-mes-nombre { font-size: .625rem; }
}
/* ── Venta sin conexión (caja-local.js): la caja del equipo encima de Facturar, y el aviso mientras suben las ventas ── */
.caja-local-marco { position: fixed; inset: 0; width: 100vw; height: 100vh; border: 0; z-index: 1000; background: #f4f6f9; }
.caja-local-marco[hidden] { display: none; }
.caja-local-subiendo { position: fixed; inset: 0; z-index: 1001; display: grid; place-items: center; background: rgba(15, 30, 54, .55); }
.caja-local-subiendo > div { background: #fff; border-radius: 14px; padding: 1.25rem 1.5rem; max-width: 28rem; box-shadow: 0 18px 50px rgba(0, 0, 0, .3); }
.caja-local-subiendo p { margin: .5rem 0; }
/* ── Recepción de compras, paso 1: enlazar (cambio 0051) ──
Igual que la pantalla de Beriozka para no confundir a quien viene de allá: el proveedor en un recuadro verde, el
documento y el tipo, los datos del comprobante y la tabla con sus mismas columnas. Las seis primeras columnas quedan
fijas al correr la tabla a la derecha (en Beriozka se perdía de vista cuál era la línea). */
.rc-proveedor { display: grid; grid-template-columns: auto auto 1fr; gap: .25rem 2rem; align-items: end; margin: .75rem 0; padding: .75rem 1rem; border: 1px solid color-mix(in srgb, var(--verde) 30%, var(--linea)); border-radius: var(--radio-grande); background: var(--verde-claro); }
.rc-proveedor div { display: grid; gap: .125rem; min-width: 0; }
.rc-proveedor span { color: var(--azul); font-size: .875rem; }
.rc-proveedor strong { color: var(--rojo); font-size: 1.125rem; overflow-wrap: anywhere; }
.rc-proveedor-nombre { grid-template-columns: 1fr; }
.rc-proveedor-nombre .marca { justify-self: start; }
.rc-documento { display: grid; grid-template-columns: auto auto 1fr; gap: .75rem 1rem; align-items: start; }
.rc-grupo { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin: 0; padding: .375rem 1rem .625rem; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: var(--superficie); }
.rc-grupo legend { padding: 0 .375rem; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-2); }
.rc-grupo .casilla { margin: 0; font-weight: 600; }
.rc-pasos { display: flex; gap: .5rem; justify-content: flex-end; align-self: center; }
.rc-pasos [aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.rc-paso { grid-column: 1 / -1; margin: .25rem 0 0; color: var(--rojo); font-size: 1.25rem; border-top: 1px solid var(--linea); padding-top: .5rem; }
.rc-datos { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .5rem 1.5rem; margin: 0; }
.rc-datos div { display: grid; gap: .125rem; min-width: 0; }
.rc-datos dt { color: var(--azul); font-size: .8125rem; }
.rc-datos dd { margin: 0; color: var(--rojo-oscuro); font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rc-datos .rc-clave { grid-column: span 2; }
.rc-datos .rc-clave dd { font-family: var(--fuente-codigo); font-size: .875rem; }
.rc-datos .rc-rojo { color: var(--rojo); }
.rc-obs input { width: 100%; min-height: 36px; padding: .25rem .5rem; border: 1px solid var(--linea-fuerte); border-radius: 6px; font: inherit; font-weight: 400; }
.rc-casillas { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.rc-casilla { display: inline-flex; align-items: center; gap: .5rem; min-height: 36px; padding: .25rem .75rem; border-radius: 6px; font-size: .875rem; font-weight: 600; color: var(--tinta); text-decoration: none; cursor: pointer; }
.rc-casilla:hover { text-decoration: none; filter: brightness(.97); }
.rc-casilla input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--verde); }
.rc-cuadro { display: inline-grid; place-items: center; width: 1rem; height: 1rem; border: 1.5px solid var(--tinta-2); border-radius: 3px; background: var(--superficie); font-size: .75rem; line-height: 1; color: var(--verde); }
a.rc-casilla:not(.rc-verde) { color: var(--rojo); }
.rc-verde { background: color-mix(in srgb, #7BE27B 40%, var(--superficie)); color: var(--verde-oscuro); }
.rc-amarillo { background: color-mix(in srgb, #FFF59A 70%, var(--superficie)); color: var(--rojo-oscuro); }
.rc-rosado { background: color-mix(in srgb, #F28B82 55%, var(--superficie)); color: var(--rojo-oscuro); }
.rc-extra { position: relative; margin-left: auto; }
.rc-extra summary { list-style: none; }
.rc-extra summary::-webkit-details-marker { display: none; }
.rc-extra-lista { position: absolute; right: 0; top: calc(100% + .25rem); z-index: 20; display: grid; min-width: 18rem; padding: .375rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra); }
.rc-extra-lista .boton { justify-content: flex-start; text-align: left; }
.rc-resumen { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .75rem 0 .5rem; }
.rc-caja { --f1: 3.25rem; --f2: 9.5rem; --f3: 8rem; --f4: 5.5rem; --f5: 5rem; --f6: 17rem;
overflow: auto; max-height: calc(100dvh - 12rem); min-height: 16rem; border: 1px solid var(--linea-fuerte); border-radius: 6px; background: var(--superficie); }
.rc-caja:has(button[form="rc-eliminar"]) { --f1: 5.75rem; }
.rc-tabla { border-collapse: separate; border-spacing: 0; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.rc-tabla th, .rc-tabla td { padding: .2rem .4rem; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); white-space: nowrap; background: var(--superficie); }
.rc-tabla th { position: sticky; top: 0; z-index: 2; background: #F3F5F8; color: var(--tinta); font-weight: 600; text-align: left; }
.rc-tabla th.derecha, .rc-tabla td.derecha { text-align: right; }
.rc-tabla th.rc-editable { color: var(--rojo); }
.rc-tabla tbody tr:hover td { background: #F6F9FD; }
/* Las seis primeras columnas, fijas. */
.rc-f1, .rc-f2, .rc-f3, .rc-f4, .rc-f5, .rc-f6 { position: sticky; z-index: 1; }
.rc-tabla th.rc-f1, .rc-tabla th.rc-f2, .rc-tabla th.rc-f3, .rc-tabla th.rc-f4, .rc-tabla th.rc-f5, .rc-tabla th.rc-f6 { z-index: 3; }
.rc-f1 { left: 0; width: var(--f1); min-width: var(--f1); }
.rc-f2 { left: var(--f1); width: var(--f2); min-width: var(--f2); }
.rc-f3 { left: calc(var(--f1) + var(--f2)); width: var(--f3); min-width: var(--f3); max-width: var(--f3); overflow: hidden; text-overflow: ellipsis; }
.rc-f4 { left: calc(var(--f1) + var(--f2) + var(--f3)); width: var(--f4); min-width: var(--f4); }
.rc-f5 { left: calc(var(--f1) + var(--f2) + var(--f3) + var(--f4)); width: var(--f5); min-width: var(--f5); }
.rc-f6 { left: calc(var(--f1) + var(--f2) + var(--f3) + var(--f4) + var(--f5)); width: var(--f6); min-width: var(--f6); max-width: var(--f6); overflow: hidden; text-overflow: ellipsis; box-shadow: 3px 0 0 -1px var(--linea-fuerte); }
.rc-tabla td.rc-f1 { display: table-cell; }
.rc-tabla td.rc-f1 > * { vertical-align: middle; }
.rc-tabla td.rc-f1 .boton-chico { min-height: 26px; padding: .125rem .375rem; margin-right: .25rem; }
.rc-celda { display: block; margin: -.2rem -.4rem; padding: .2rem .4rem; color: inherit; text-decoration: none; cursor: default; }
.rc-celda:hover { text-decoration: none; }
.rc-celda:focus-visible, .rc-celda:focus { outline: 2px solid var(--azul); outline-offset: -2px; background: var(--azul-claro); }
.rc-tabla td.rc-sin { background: var(--rojo-claro); color: var(--rojo); font-weight: 700; }
.rc-tabla tr.rc-eliminada td { color: var(--tinta-3); text-decoration: line-through; background: #F4F4F4; }
.rc-tabla tr.rc-eliminada td.rc-f1 { text-decoration: none; }
.rc-tabla tr.rc-bonificada td { color: var(--ambar); }
.rc-tabla td .marca { margin-left: .25rem; padding: 0 .375rem; font-size: .6875rem; }
.rc-texto { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; }
/* «Ver descripciones entre factura y sistema»: las dos descripciones juntas, una al lado de la otra. */
.rc-con-desc .rc-unida { background: color-mix(in srgb, #FFF59A 35%, var(--superficie)); }
.rc-con-desc td.rc-desc-sistema { min-width: 16rem; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; cursor: copy; border-left: 0; }
.rc-panel-xml { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.rc-panel-xml .rc-panel-desc { grid-column: span 2; }
.rc-panel-xml dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.rc-actual { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin: .5rem 0; padding: .5rem .75rem; border-radius: var(--radio); background: var(--verde-claro); }
.rc-panel-codigo .acciones kbd { font-size: .75rem; padding: 0 .25rem; border: 1px solid currentColor; border-radius: 4px; opacity: .8; }
.rc-panel-buscar { display: grid; gap: .25rem; margin-top: .5rem; }
.rc-panel-buscar .fila-buscar { display: flex; gap: .5rem; }
.rc-panel-buscar input[type="search"] { flex: 1; min-height: 46px; padding: .5rem .75rem; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); font: inherit; }
.rc-hallados { margin-top: .75rem; max-height: 40dvh; overflow: auto; }
.rc-hallados tr[data-doble-clic] { cursor: pointer; }
@media (max-width: 820px) {
.rc-documento { grid-template-columns: 1fr; }
.rc-proveedor { grid-template-columns: 1fr 1fr; }
.rc-proveedor-nombre { grid-column: 1 / -1; }
.rc-pasos { justify-content: flex-start; }
.rc-datos .rc-clave { grid-column: 1 / -1; }
.rc-extra { margin-left: 0; }
.rc-extra-lista { left: 0; right: auto; }
/* En pantalla angosta solo quedan fijos Ln y Cod-Sistema: si no, no se vería nada más. */
.rc-tabla td:is(.rc-f3, .rc-f4, .rc-f5, .rc-f6) { position: static; box-shadow: none; }
/* El título sigue fijo arriba (sticky) pero ya no a la izquierda: corre de lado con su columna. */
.rc-tabla th:is(.rc-f3, .rc-f4, .rc-f5, .rc-f6) { left: auto; box-shadow: none; }
}
/* Recepción de compras, más compacta (pedido del dueño, 09/10/2026): el encabezado, el proveedor, el documento y las
casillas ocupan lo menos posible, para que la tabla tenga más alto. */
.pagina:has(.rc-tabla) .encabezado { margin-bottom: .125rem; }
.pagina:has(.rc-tabla) .encabezado h1 { font-size: 1.25rem; }
.pagina:has(.rc-tabla) .camino { margin-bottom: 0; }
.rc-proveedor { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 1.5rem; margin: .25rem 0; padding: .25rem .75rem; border-radius: var(--radio); }
.rc-proveedor div { display: flex; align-items: baseline; gap: .375rem; }
.rc-proveedor span { font-size: .75rem; }
.rc-proveedor strong { font-size: .9375rem; }
.rc-proveedor-nombre { flex: 1 1 auto; }
.rc-documento { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; }
.rc-grupo { padding: 0 .625rem .125rem; gap: 0 1rem; }
.rc-grupo legend { font-size: .6875rem; }
.rc-grupo .casilla { min-height: 28px; font-size: .875rem; }
.rc-pasos { margin-left: auto; }
.rc-pasos .boton { min-height: 32px; padding: .25rem .75rem; font-size: .875rem; }
.rc-paso { flex: 0 0 auto; margin: 0; padding: 0; border: 0; font-size: 1rem; }
.rc-datos { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: .125rem 1.25rem; font-size: .8125rem; }
.rc-datos div { display: flex; align-items: baseline; gap: .375rem; }
.rc-datos dt { font-size: .75rem; }
.rc-datos .rc-clave dd { font-size: .75rem; }
.rc-obs input { min-height: 28px; width: 10rem; padding: .125rem .375rem; }
.rc-casillas { flex: 1 1 100%; gap: .375rem; }
.rc-casilla { min-height: 28px; padding: .125rem .5rem; font-size: .8125rem; }
.rc-extra summary.boton { min-height: 30px; padding: .125rem .625rem; font-size: .875rem; }
.rc-resumen { margin: .25rem 0; font-size: .8125rem; gap: .375rem; }
.rc-caja { max-height: calc(100dvh - 8.5rem); }
.rc-visto { display: grid; gap: .125rem; margin: .25rem 0 .5rem; padding: .5rem .75rem; border-radius: var(--radio); background: var(--azul-claro); }
.rc-visto-no { background: var(--rojo-claro); }
.rc-rojo { color: var(--rojo); font-weight: 600; }
.rc-menu-doc { display: grid; gap: .5rem; }
.rc-menu-doc .boton { justify-content: flex-start; min-height: 48px; font-size: 1rem; }
.rc-proveedor[data-doble-clic] { cursor: pointer; }
.rc-proveedor .boton-chico { min-height: 26px; padding: .125rem .5rem; font-size: .8125rem; }
.rc-datos { flex: 1 1 100%; }
.rc-datos .rc-paso { color: var(--rojo); font-weight: 700; font-size: 1rem; }
/* Sin estirar las filas de la página para llenar el alto (el espacio sobrante iba entre el proveedor, el documento y la
tabla): todo arriba y pegado; la tabla toma el resto del alto de la pantalla. */
.pagina:has(.rc-tabla) { align-content: start; gap: .375rem; padding-top: .5rem; padding-bottom: .5rem; }
.pagina:has(.rc-tabla) .encabezado { gap: 0; }
.pagina:has(.rc-tabla) .encabezado-fila { min-height: 0; }
.rc-regresar { display: inline-flex; align-items: center; gap: .25rem; font-weight: 600; font-size: .875rem; }
.rc-proveedor, .rc-resumen { margin: 0; }
.rc-caja { height: calc(100dvh - 15rem); min-height: 14rem; max-height: none; }
/* El dueño: 70 % del alto para la tabla, 30 % arriba para los datos. */
.rc-caja { height: calc(70dvh - .5rem); }
/* ── Recepción de compras, paso 2: cambio de precios (cambio 0052) ── */
.rp-barra { align-items: center; }
.rp-paso { color: var(--rojo); font-weight: 700; font-size: 1rem; }
.rp-seleccion, .rp-marcar { display: inline-flex; align-items: center; gap: .375rem; margin: 0; }
.rp-seleccion label { font-size: .875rem; color: var(--azul); }
.rp-seleccion select { min-height: 32px; padding: .125rem .5rem; border: 1px solid var(--linea-fuerte); border-radius: 6px; background: #FFFBC8; font: inherit; font-size: .875rem; }
.rp-barra .boton-chico { min-height: 32px; }
/* Compacta: en una pantalla de 1366 se ve completa hasta «Aplicar cambio» (el dueño, 10/10/2026); las listas siguen a la derecha. */
.rp-tabla { --p1: 2.25rem; --p2: 6.5rem; --lista: 6rem; font-size: .8125rem; table-layout: fixed;
width: calc(100% + var(--listas, 0) * var(--lista)); min-width: calc(87rem + var(--listas, 0) * var(--lista)); }
.rp-tabla .rp-c-ln { width: var(--p1); }
.rp-tabla .rp-c-cod { width: var(--p2); }
.rp-tabla .rp-c-costo { width: 6rem; }
.rp-tabla .rp-c-desc { width: 5.25rem; }
.rp-tabla .rp-c-pct { width: 4.25rem; }
.rp-tabla .rp-c-si { width: 3.5rem; }
.rp-tabla .rp-c-ajuste { width: 4.25rem; }
.rp-tabla .rp-c-imp { width: 4.25rem; }
.rp-tabla .rp-c-util { width: 8.5rem; }
.rp-tabla .rp-c-iva { width: 3.5rem; }
.rp-tabla .rp-c-precio { width: 6rem; }
.rp-tabla .rp-c-cambio { width: 4.5rem; }
.rp-tabla .rp-c-lista { width: var(--lista); }
.rp-tabla td { overflow: hidden; }
.rc-tabla.rp-tabla th { white-space: normal; line-height: 1.15; vertical-align: bottom; padding: .2rem .3rem; }
.rc-tabla.rp-tabla td { padding: .15rem .3rem; }
.rp-tabla td.rp-f2 { overflow: hidden; text-overflow: ellipsis; }
.rp-f1, .rp-f2, .rp-f3 { position: sticky; z-index: 1; }
.rc-tabla th.rp-f1, .rc-tabla th.rp-f2, .rc-tabla th.rp-f3 { z-index: 3; }
.rp-f1 { left: 0; width: var(--p1); min-width: var(--p1); }
.rp-f2 { left: var(--p1); width: var(--p2); min-width: var(--p2); }
.rp-f3 { left: calc(var(--p1) + var(--p2)); overflow: hidden; text-overflow: ellipsis; box-shadow: 3px 0 0 -1px var(--linea-fuerte); }
.rp-alternar { width: 100%; border: 0; background: transparent; font: inherit; font-weight: 700; text-align: center; cursor: default; }
.rc-tabla td.rp-si { color: var(--verde-oscuro); font-weight: 700; text-align: center; }
.rc-tabla td.rp-no { color: var(--rojo); font-weight: 700; text-align: center; }
.rc-tabla td.rp-sube { color: var(--rojo); font-weight: 700; }
.rc-tabla td.rp-baja { color: var(--azul); font-weight: 700; }
.rc-tabla td.rp-escrito { text-decoration: underline dotted; }
.rc-tabla td.rp-negativa { color: var(--rojo); }
.rc-tabla td.rp-real { font-weight: 700; }
.rc-tabla tr.rp-aplica td.rp-sube, .rc-tabla tr.rp-aplica td.rp-baja, .rc-tabla tr.rp-aplica td.rp-si { background: color-mix(in srgb, #7BE27B 30%, var(--superficie)); }
.rc-tabla tr.rp-bonif td { color: var(--ambar); }
/* La tabla editable (como Facturación): la casilla ocupa la celda; con el foco, fondo amarillo como en Beriozka. */
.rc-tabla td.rp-ed { padding: 0; }
.rp-dentro { display: flex; align-items: center; gap: .25rem; }
.rp-dentro .rp-marca:not([hidden]) { margin-left: .25rem; }
.rp-marca { font-size: .6875rem; white-space: nowrap; padding: 0 .3rem; background: #EEF1F5; color: #5A6573; }
.rc-tabla input.rp-in { width: 100%; min-width: 0; min-height: 0; height: auto; box-sizing: border-box; padding: .125rem .375rem; border: 1px solid transparent;
border-radius: 0; background: transparent; box-shadow: none; font: inherit; color: inherit; font-weight: inherit; text-align: right; font-variant-numeric: tabular-nums; }
.rc-tabla input.rp-in:hover { border-color: var(--linea); }
.rc-tabla input.rp-in:focus { outline: none; box-shadow: none; border-color: var(--verde); background: #FFFBC8; color: var(--tinta); }
.rp-alternar:focus { outline: 2px solid var(--verde); outline-offset: -2px; background: #FFFBC8; }
.rc-tabla td.rp-guardando { background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--verde) 18%, transparent), transparent); }
.rc-tabla td.rp-error { box-shadow: inset 0 0 0 2px var(--rojo); }
/* ── Recepción manual (cambio 0066) ── */
.rm-barra { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin: .25rem 0 .5rem; padding: .375rem .5rem; border: 1px solid var(--linea); border-radius: var(--radio-grande); background: var(--superficie); }
.rm-barra-titulo { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--azul); margin-right: .25rem; }
.rm-chip { display: inline-flex; align-items: baseline; gap: .375rem; padding: .25rem .625rem; border: 1px solid var(--linea); border-radius: 999px; background: var(--fondo); color: var(--tinta); text-decoration: none; font-size: .8125rem; white-space: nowrap; }
.rm-chip:hover { border-color: var(--verde); }
.rm-chip small { color: #5A6573; }
.rm-chip-actual { background: var(--verde-claro); border-color: var(--verde); box-shadow: inset 0 0 0 1px var(--verde); }
.rm-chip-nueva { color: var(--verde); font-weight: 600; }
.rm-subtitulo { font-size: 1rem; margin: 1rem 0 .375rem; }
.rm-nueva .rm-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem 1rem; }
.rm-datos input[type="text"], .rm-datos input[type="date"] { max-width: 11rem; }
.rm-condicion { display: flex; align-items: center; gap: .375rem; }
.rm-plazo { width: 4.5rem; }
.rm-incluir { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .25rem 0; padding: .25rem .5rem; border: 2px solid var(--verde); border-radius: var(--radio-grande); background: var(--verde-claro); }
.rm-incluir .boton { min-height: 32px; padding-block: .25rem; }
/* El encabezado de la manual en una sola línea, para que la tabla de trabajo quede arriba (el dueño, 11/10/2026). */
.rm-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem 1rem; margin: .25rem 0; padding: .375rem .625rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); }
.rm-doc { font-weight: 700; color: var(--rojo); }
.rm-paso { font-weight: 700; color: var(--rojo); font-size: .875rem; }
.rm-campo { display: inline-flex; align-items: center; gap: .375rem; margin: 0; white-space: nowrap; font-size: .8125rem; }
.rm-campo > span:first-child { color: var(--azul); }
.rm-cabeza input[type="text"], .rm-cabeza input[type="date"], .rm-cabeza input[type="number"], .rm-cabeza select {
min-height: 0; height: 30px; padding: .125rem .5rem; font-size: .875rem; width: auto; }
.rm-c-num { width: 9.5rem !important; }
.rm-c-corto { width: 4.5rem !important; }
.rm-c-papel { width: 8rem !important; }
.rm-iva { padding: .125rem .5rem; border-radius: var(--radio); background: var(--ambar-claro); }
.rm-iva input { width: auto; height: auto; }
.rm-extra summary { min-height: 30px; }
.rm-pasos { margin-left: auto; display: inline-flex; gap: .375rem; align-items: center; }
/* La tabla de trabajo ocupa el 75 % de la pantalla; los títulos quedan fijos al correr. */
.rc-caja.rm-caja { height: 75dvh; min-height: 16rem; max-height: none; overflow: auto; }
.rm-caja thead th { position: sticky; top: 0; z-index: 2; }
.rm-forma-nombre { color: var(--tinta); font-weight: 600; white-space: nowrap; }
.rm-lupa { min-height: 26px; padding: .125rem .375rem; }
.swal-elegir { width: min(94vw, 34rem); gap: .5rem; padding-top: 1.25rem; }
.swal-lista { list-style: none; margin: 0; padding: 0; width: 100%; max-height: 50dvh; overflow: auto; text-align: left; border: 1px solid var(--linea); border-radius: 6px; }
.swal-lista li { padding: .4rem .625rem; cursor: pointer; border-bottom: 1px solid var(--linea); }
.swal-lista li b { display: inline-block; min-width: 3rem; color: var(--azul); }
.swal-lista li:hover, .swal-lista li.activa { background: var(--verde-claro); }
.rm-incluir label { font-weight: 700; color: var(--verde); }
.rm-incluir input[type="search"] { flex: 1 1 18rem; min-width: 0; font-size: 1.0625rem; }
.rm-tabla tr.rm-info td { padding-top: 0; border-top: 0; background: color-mix(in srgb, var(--fondo) 60%, transparent); font-size: .8125rem; }
.rm-dato { display: inline-flex; align-items: center; gap: .375rem; margin-right: 1.25rem; }
.rm-dato[hidden] { display: none; }
.rm-dato label { color: var(--azul); font-weight: 600; }
.rc-tabla input.rm-in { width: 100%; min-width: 4.5rem; min-height: 0; height: auto; box-sizing: border-box; padding: .125rem .375rem; border: 1px solid var(--linea);
border-radius: 4px; background: var(--superficie); box-shadow: none; font: inherit; color: inherit; }
.rc-tabla input.rm-in.num { text-align: right; font-variant-numeric: tabular-nums; min-width: 6rem; }
.rc-tabla input.rm-corto { min-width: 3.5rem; max-width: 5rem; }
.rc-tabla input.rm-cabys { min-width: 9.5rem; max-width: 11rem; }
.rc-tabla .rm-info input.rm-in { width: auto; min-width: 8rem; }
.rc-tabla input.rm-in:focus { outline: none; border-color: var(--verde); background: #FFFBC8; color: var(--tinta); }
.rc-tabla td.rp-guardando, .rm-dato.rp-guardando { background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--verde) 18%, transparent), transparent); }
.rm-dato.rp-error { box-shadow: inset 0 0 0 2px var(--rojo); border-radius: 4px; }
.rm-totales { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem 1.5rem; margin: .75rem 0; }
.rm-totales div { display: grid; gap: .125rem; text-align: right; }
.rm-totales dt { font-size: .75rem; color: #5A6573; }
.rm-totales dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.rm-totales .rm-total dd { font-size: 1.25rem; color: var(--verde); }
.rm-cuadra dd { color: var(--verde); }
.rm-no-cuadra dd { color: var(--rojo); }
.rp-mensaje { margin: .25rem 0; padding: .375rem .75rem; border-radius: 6px; background: color-mix(in srgb, var(--rojo) 12%, var(--superficie)); color: var(--rojo); font-weight: 600; font-size: .875rem; }
.rp-ayuda { font-size: .8125rem; }
@media (max-width: 820px) { .rc-tabla td.rp-f2, .rc-tabla td.rp-f3 { position: static; box-shadow: none; } .rc-tabla th.rp-f2, .rc-tabla th.rp-f3 { left: auto; box-shadow: none; } }
/* Recepción de compras, paso 3 (procesar): lo que va a pasar, los mensajes a Hacienda y la factura como vino. */
.rp-resumen { margin: .5rem 0 1rem; padding: .75rem 1rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); }
.rp-resumen dl { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: 0 0 .5rem; }
.rp-resumen dl div { display: flex; flex-direction: column; }
.rp-resumen dt { font-size: .75rem; color: #6B7785; text-transform: uppercase; letter-spacing: .02em; }
.rp-resumen dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.rp-resumen p { margin: .25rem 0; }
.rp-mensajes { margin-top: .5rem; font-size: .875rem; }
.rp-factura { margin-bottom: 1rem; }
/* Recepción, paso 2: el borde del título se arrastra para cambiar el ancho de la columna (como Excel). */
.rp-tabla th { overflow: visible; }
.rp-asa { position: absolute; top: 0; right: -4px; bottom: 0; width: 8px; cursor: col-resize; z-index: 4; }
.rp-asa:hover, .rp-arrastrando .rp-asa:hover { background: color-mix(in srgb, var(--verde) 35%, transparent); }
.rp-arrastrando, .rp-arrastrando * { cursor: col-resize !important; user-select: none; }
/* ───────────── Pre-recepción (cambio 0056): pensada para el celular o la hand held ───────────── */
.pr-buscar { display: flex; gap: .5rem; margin: .5rem 0 1rem; }
.pr-buscar input { flex: 1; }
.pr-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pr-doc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .125rem .75rem; padding: .75rem 1rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); color: inherit; text-decoration: none; }
.pr-doc strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-doc .tenue { grid-column: 1; font-size: .875rem; }
.pr-doc-estado { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.pr-doc:hover, .pr-doc:focus-visible { border-color: var(--verde); }
.pr-doc-listo { opacity: .75; }
.pr-cabeza { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; margin-bottom: .375rem; }
.pr-cabeza div { display: grid; line-height: 1.25; min-width: 0; }
.pr-cabeza strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.0625rem; }
.pr-cabeza .tenue { font-size: .875rem; }
.pr-volver { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radio); color: var(--tinta); }
.pr-avance { height: 6px; border-radius: 3px; background: var(--linea); overflow: hidden; margin-bottom: .75rem; }
.pr-avance span { display: block; height: 100%; background: var(--verde); }
/* La casilla de la pistola queda fija arriba al bajar por las líneas. */
.pr-lector { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: .5rem; padding: .5rem 0; background: var(--fondo); }
.pr-lector input[name="codigo"] { flex: 1; min-width: 0; font-size: 1.125rem; }
.pr-lector .boton { min-width: 48px; min-height: 46px; }
.pr-lector-para { flex-basis: 100%; margin: 0; padding: .5rem .75rem; border-radius: var(--radio); background: var(--ambar-claro); font-size: .9375rem; }
.pr-vistas { display: flex; gap: .375rem; margin: .5rem 0 .75rem; overflow-x: auto; }
.pr-vistas a { flex: 1; padding: .5rem .625rem; border: 1px solid var(--linea); border-radius: 999px; text-align: center; white-space: nowrap; color: var(--tinta); text-decoration: none; font-size: .875rem; background: var(--superficie); }
.pr-vistas a.activa { border-color: var(--verde); background: var(--verde-claro); font-weight: 600; }
.pr-nada { text-align: center; padding: 1.5rem 0; }
.pr-lineas { display: grid; gap: .625rem; }
.pr-linea { padding: .75rem; border: 1px solid var(--linea); border-left: 5px solid var(--linea-fuerte); border-radius: var(--radio); background: var(--superficie); scroll-margin-top: 5.5rem; }
.pr-linea.pr-revisada { border-left-color: var(--verde); }
.pr-linea.pr-sin { border-left-color: var(--rojo); }
.pr-linea.pr-foco { box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 45%, transparent); }
.pr-linea-cabeza { display: flex; gap: .5rem; align-items: baseline; }
.pr-linea-cabeza strong { font-size: 1.0625rem; line-height: 1.3; }
.pr-n { flex: none; min-width: 1.75rem; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.pr-datos { display: flex; flex-wrap: wrap; gap: .25rem .875rem; margin: .25rem 0 .5rem 2.25rem; font-size: .875rem; color: var(--tinta-2); }
.pr-datos b { color: var(--tinta); }
.pr-rojo { color: var(--rojo); font-weight: 700; }
.pr-cantidades { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin-left: 2.25rem; }
.pr-cantidades div { display: grid; line-height: 1.15; }
.pr-cantidades small { color: var(--tinta-2); font-size: .75rem; }
.pr-cantidades b { font-size: 1.375rem; font-variant-numeric: tabular-nums; }
.pr-dif { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin: .375rem 0 0 2.25rem; padding: .25rem .5rem; border-radius: 6px; background: var(--ambar-claro); font-size: .9375rem; }
.pr-acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .625rem; }
.pr-acciones .boton { min-height: 46px; }
.pr-contar { display: flex; gap: .5rem; flex-basis: 100%; }
.pr-ok { min-width: 6.5rem; font-size: 1.0625rem; }
.pr-contar input.pr-llego { flex: 1; width: 0; min-width: 0; font-size: 1.125rem; text-align: right; }
/* En el celular la página no debe salirse de lado: la columna de la página no crece con lo que tiene adentro. */
.pagina:has(.pr-lineas) { grid-template-columns: minmax(0, 1fr); }
.pr-final { display: flex; justify-content: center; margin: 1.25rem 0 2rem; }
.pr-final .boton { min-height: 48px; padding-inline: 1.5rem; }
.pr-causas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.pr-causa { display: flex; align-items: center; gap: .5rem; min-height: 46px; padding: 0 .75rem; border: 1px solid var(--linea); border-radius: var(--radio); }
.pr-causa:has(input:checked) { border-color: var(--verde); background: var(--verde-claro); }
/* Orden de compra y solicitud de nota de crédito amarradas (cambio 0057): paso 3 y pre-recepción. */
.rp-orden { margin: 0 0 1rem; padding: .75rem 1rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); }
.rp-orden h2 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; font-size: 1rem; }
.rp-orden p { margin: .5rem 0; }
.rp-orden-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .25rem 0 .5rem; }
.rp-orden-form select { min-width: 0; flex: 1 1 16rem; max-width: 36rem; }
.rp-orden-form input[type=text] { min-width: 0; flex: 1 1 16rem; max-width: 36rem; }
.rp-orden .tabla-envoltura { overflow-x: auto; }
.rp-comparacion td.num, .rp-comparacion th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-comparacion tr.rp-dif td { background: var(--ambar-claro); }
.pr-orden { margin: .5rem 0; padding: .5rem .75rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); }
.pr-orden summary { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; cursor: pointer; font-weight: 600; }
.pr-orden-form { display: flex; gap: .5rem; margin: .5rem 0 0; }
.pr-orden-form select { flex: 1 1 auto; min-width: 0; width: 0; font-size: 1rem; min-height: 2.75rem; }
.pr-orden-faltan { margin: .5rem 0 0; padding-left: 1.25rem; font-size: .9375rem; }
.pr-orden-faltan li { margin: .25rem 0; }
/* La cámara sin conexión segura: el aviso y el botón para abrir con https (0.65.4). */
.camara-sin .acciones { display: flex; flex-wrap: wrap; gap: .5rem; }
.camara-sin .acciones .boton { flex: 1 1 auto; }
.camara-sin h2 { margin: 0; font-size: 1.125rem; }
.camara-sin p { font-weight: 400; }
.camara-sin ol { margin: 0; padding-left: 1.25rem; display: grid; gap: .375rem; font-size: .9375rem; }
.camara-sin .acciones { flex-direction: column; }
.camara-sin .acciones .boton { width: 100%; min-height: 2.75rem; }
/* ───────────── Etiquetas (cambio 0063) ─────────────
Una etiqueta (.et) mide lo que dice su plantilla, en mm; cada pieza (.et-p) va en su cuadro. Lo usan la hoja que se
imprime (EtiquetaDibujo.razor) y el diseñador (app.js), así lo que se diseña es lo que sale. Todo en negro sobre
blanco: las impresoras de etiquetas son de un solo color. app.js (ajustarEtiquetas) achica la letra que no cabe. */
.et { position: relative; flex: none; overflow: hidden; background: #fff; color: #000; box-sizing: border-box; }
.et-p { position: absolute; box-sizing: border-box; overflow: hidden; }
.et-texto { display: flex; align-items: center; line-height: 1.08; }
.et-t { display: block; width: 100%; overflow-wrap: anywhere; }
.et-a-i .et-t { text-align: left; }
.et-a-c .et-t { text-align: center; }
.et-a-d .et-t { text-align: right; }
.et-neg { font-weight: 700; }
/* Fondo negro como en Beriozka: solo detrás del texto (no todo el cuadro). */
.et-inv .et-t { width: fit-content; max-width: 100%; background: #000; color: #fff; padding: 0 .8mm; box-sizing: border-box; }
.et-inv.et-a-c .et-t { margin: 0 auto; }
.et-inv.et-a-d .et-t { margin-left: auto; }
/* Una sola línea: el precio, el código, la fecha… no se parten; si no caben, se achican. */
.et-precio .et-t, .et-codigo .et-t, .et-fecha .et-t, .et-gramaje .et-t, .et-unidad .et-t, .et-oferta .et-t { white-space: nowrap; overflow-wrap: normal; }
.et-linea { border-top: .3mm solid #000; height: auto; }
.et-recuadro { border: .3mm solid #000; border-radius: .6mm; }
.et-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.et-guia { max-width: 46rem; margin: .5rem auto 0; padding: .6rem .9rem; border: 1px solid var(--borde, #d0d7e2); border-radius: .5rem; background: var(--fondo-suave, #f6f8fb); font-size: .92rem; }
.et-guia summary { cursor: pointer; font-weight: 600; }
.et-guia ol { margin: .5rem 0 .6rem 1.2rem; padding: 0; display: grid; gap: .25rem; }
/* El código de barras de su ancho natural (style width en mm), pegado a la izquierda; si no cabe, se angosta. */
.et-barras { display: flex; align-items: stretch; justify-content: flex-start; }
.et-bz { display: flex; flex-direction: column; max-width: 100%; height: 100%; }
.et-bz svg { flex: 1; width: 100%; min-height: 0; display: block; }
.et-num { flex: none; font: 2.2mm/1 Consolas, monospace; text-align: center; padding-top: .2mm; white-space: nowrap; overflow: hidden; }
/* ── El diseñador (Opciones › Etiquetas) ── */
.etd { display: grid; grid-template-columns: 220px minmax(0, 1fr) 260px; gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .etd { grid-template-columns: 1fr; } }
.etd-panel { display: grid; gap: .75rem; padding: .875rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie, #fff); }
.etd-panel h3 { margin: 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-3); }
.etd-plantillas { display: grid; gap: .375rem; }
.etd-plantilla { display: grid; gap: .125rem; padding: .5rem .625rem; border: 1px solid var(--linea); border-radius: 10px; text-decoration: none; color: inherit; }
.etd-plantilla small { color: var(--tinta-3); }
.etd-plantilla.actual { border-color: var(--verde-oscuro); box-shadow: inset 3px 0 0 var(--verde-oscuro); background: var(--fondo); }
.etd-piezas { display: grid; grid-template-columns: 1fr 1fr; gap: .375rem; }
.etd-pieza { display: flex; align-items: center; gap: .375rem; padding: .375rem .5rem; border: 1px dashed var(--linea); border-radius: 8px; background: #fff; font: inherit; font-size: .8rem; cursor: grab; text-align: left; }
.etd-pieza:hover { border-color: var(--verde-oscuro); border-style: solid; }
.etd-mesa { position: relative; overflow: auto; min-height: 340px; padding: 28px; border-radius: var(--radio);
background-color: #e9edf2; background-image: radial-gradient(rgba(15, 30, 54, .12) 1px, transparent 1px); background-size: 14px 14px; }
.etd-herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.etd-herramientas .tenue { font-size: .8rem; }
.etd-fila { display: flex; width: max-content; margin: 0; box-shadow: 0 10px 30px rgba(15, 30, 54, .18); }
.etd-fila .et { outline: 1px solid #c9d1dc; }
.etd-fila .et.etd-papel { overflow: visible; }
.etd-fila .et.etd-copia { opacity: .45; pointer-events: none; }
.etd-fila .et.etd-papel { background-image: linear-gradient(rgba(0, 120, 90, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 120, 90, .07) 1px, transparent 1px); background-size: var(--etd-mm) var(--etd-mm); }
.etd-papel .et-p { cursor: move; outline: 1px dashed rgba(0, 0, 0, .18); }
.etd-papel .et-p:hover { outline-color: rgba(0, 120, 90, .7); }
.etd-papel .et-p.sel { outline: 2px solid #0a7d5a; z-index: 5; }
.etd-papel .et-p.muy-bajo { outline: 2px solid var(--rojo); }
/* Las asas van sobre el papel en la esquina y los bordes de la pieza; --etd-inv deshace el acercamiento: siempre miden 10 px. */
.etd-asa { position: absolute; width: 10px; height: 10px; box-sizing: border-box; background: #fff; border: 2px solid #0a7d5a; border-radius: 2px; z-index: 6; transform: translate(-50%, -50%) scale(var(--etd-inv, 1)); }
.etd-asa[data-asa="se"] { cursor: nwse-resize; }
.etd-asa[data-asa="e"] { cursor: ew-resize; }
.etd-asa[data-asa="s"] { cursor: ns-resize; }
.etd-regla { display: flex; justify-content: center; gap: 1rem; margin-top: .75rem; font-size: .75rem; color: var(--tinta-3); }
.etd-props { display: grid; gap: .5rem; }
.etd-props .fila { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.etd-props .campo input, .etd-props .campo select { width: 100%; }
.etd-props[hidden] { display: none; }
.etd-alinea { display: flex; gap: .25rem; }
.etd-alinea button { flex: 1; }
.etd-alinea button.activo { background: var(--verde-oscuro); color: #fff; border-color: var(--verde-oscuro); }
.etd-aviso { font-size: .8rem; color: var(--rojo); }
/* ── Imprimir etiquetas (Archivo › Etiquetas) ── */
.eti { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1rem; align-items: start; }
@media (max-width: 960px) { .eti { grid-template-columns: 1fr; } }
.eti-plantillas { display: flex; flex-wrap: wrap; gap: .5rem; }
.eti-plantilla { display: grid; gap: .125rem; min-width: 150px; padding: .625rem .75rem; border: 1px solid var(--linea); border-radius: 12px; background: #fff; cursor: pointer; }
.eti-plantilla input { position: absolute; opacity: 0; pointer-events: none; }
.eti-plantilla small { color: var(--tinta-3); }
.eti-plantilla:has(input:checked) { border-color: var(--verde-oscuro); box-shadow: 0 0 0 2px var(--verde-oscuro) inset; }
.eti-producto { display: grid; gap: .25rem; padding: 1rem; border-radius: var(--radio); background: var(--fondo); min-height: 96px; }
.eti-producto strong { font-size: 1.05rem; }
.eti-precio { font-family: var(--fuente-titulo); font-size: 1.8rem; font-weight: 700; color: var(--verde-oscuro); }
.eti-vista { display: flex; justify-content: center; padding: 1rem; border-radius: var(--radio); background: #e9edf2; overflow: auto; }
.eti-vista .et-fila-vista { display: flex; box-shadow: 0 6px 18px rgba(15, 30, 54, .15); }
.eti-casillas { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; }
.eti-aviso { font-weight: 600; }
.eti-aviso.mal { color: var(--rojo); }
.eti-aviso.bien { color: var(--verde-oscuro); }
.fila-en-linea { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin-left: .375rem; }
/* Pre-NC (cambio 0067): la lista dentro del diálogo y la columna de la recepción de compras. */
.rc-prenc-lista { list-style: none; margin: 0 0 .75rem; padding: 0; }
.rc-prenc-lista li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .2rem 0; }
.rc-prenc .marca { margin-right: .25rem; white-space: nowrap; }
/* Facturar a crédito: el texto largo del cliente («Sale tiquete: el cliente no está inscrito…») se parte en líneas en vez de
ensanchar la ventana y esconder los montos a la derecha. */
.formulario { min-width: 0; }
.formulario > .cobro-cliente { min-width: 0; align-items: flex-start; }
.formulario > .cobro-cliente > span { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.credito-datos { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.credito-datos div { min-width: 0; }
/* ───────── Reportes de ventas (0.97.0): tablero, horas, ABC, sin movimiento ───────── */
.pagina:has(.bi) { max-width: none; align-content: start; grid-template-columns: minmax(0, 1fr); }
.bi { display: grid; gap: 1rem; min-width: 0; }
.bi-filtro { display: grid; gap: .5rem; }
.bi-atajos { display: flex; flex-wrap: wrap; gap: .375rem; }
.bi-atajo { padding: .3rem .75rem; border: 1px solid var(--linea); border-radius: 999px; background: var(--superficie); color: var(--tinta-2); text-decoration: none; font-size: .875rem; }
.bi-atajo:hover { border-color: var(--tinta-2); color: var(--tinta); }
.bi-atajo.activo { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.bi-comparado { font-size: .8125rem; color: var(--tinta-3); }
.bi-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: .75rem; }
.bi-kpi { border: 1px solid var(--linea); border-radius: var(--radio-grande); background: var(--superficie); padding: .875rem 1rem; display: grid; gap: .2rem; min-width: 0; }
.bi-kpi > span { font-size: .8125rem; color: var(--tinta-2); }
.bi-kpi > strong { font-size: 1.5rem; line-height: 1.2; color: var(--tinta); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bi-kpi > small { font-size: .8125rem; color: var(--tinta-3); }
.bi-sube { color: #0b7a3b; font-weight: 600; }
.bi-baja { color: #b42318; font-weight: 600; }
.bi-cuadros { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); gap: 1rem; }
.bi-grafico { border: 1px solid var(--linea); border-radius: var(--radio-grande); background: var(--superficie); padding: 1rem 1.125rem .75rem; min-width: 0; display: grid; gap: .5rem; align-content: start; }
.bi-grafico > h3 { margin: 0; font-size: 1rem; }
.bi-grafico > p { margin: 0; font-size: .8125rem; color: var(--tinta-3); }
.bi-grafico .graf { width: 100%; height: auto; display: block; }
.bi-grafico .graf .graf-barra:hover rect[rx] { filter: brightness(.88); }
.bi-grafico .graf .graf-zona:hover { fill: rgb(15 30 54 / .05); }
.bi-mapa { overflow-x: auto; }
.bi-mapa .graf { min-width: 44rem; }
.bi-leyenda { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .8125rem; color: var(--tinta-2); }
.bi-leyenda i { display: inline-block; width: 1.25rem; height: 0; border-top: 2px solid; vertical-align: middle; margin-right: .375rem; }
.bi-leyenda i.punteada { border-top-style: dashed; }
.bi-datos > summary { cursor: pointer; font-size: .8125rem; color: var(--azul); }
.bi-datos .tabla-caja { margin-top: .5rem; overflow-x: auto; }
.bi-datos table { font-size: .8125rem; }
.bi-tabla { overflow-x: auto; }
.bi-tabla table { font-size: .8125rem; }
.bi-tabla th, .bi-tabla td { white-space: nowrap; padding: .35rem .55rem; }
.bi-tabla td.bi-largo { white-space: normal; min-width: 14rem; }
.bi-total td { font-weight: 700; border-top: 2px solid var(--tinta); }
.bi-clase { display: inline-block; min-width: 1.6rem; text-align: center; border-radius: 6px; font-weight: 700; padding: 0 .35rem; }
.bi-clase-A { background: #cde2fb; color: #0d366b; }
.bi-clase-B { background: #e9eef6; color: #184f95; }
.bi-clase-C { background: #f3f4f6; color: var(--tinta-2); }
.bi-hallazgos { display: grid; gap: .25rem; margin: 0; padding-left: 1.1rem; color: var(--tinta-2); font-size: .9rem; }
@media print {
.bi-grafico, .bi-kpi { break-inside: avoid; }
.bi-cuadros { grid-template-columns: 1fr 1fr; }
}
/* Reporte general (0.98.3): la tabla a la vista; indicadores y gráficas detrás del botón «Ver gráficos». */
.bi-ver-graficos > summary { list-style: none; display: inline-flex; width: fit-content; cursor: pointer; }
.bi-ver-graficos > summary::-webkit-details-marker { display: none; }
.bi-ver-graficos[open] > summary { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.bi-ver-graficos-cuerpo { display: grid; gap: 1rem; margin-top: .75rem; }
/* Reporte dinámico (0.99.0): la primera columna queda fija al moverse a lo ancho. */
.bi-dinamico th:first-child, .bi-dinamico td:first-child { position: sticky; left: 0; background: var(--superficie); z-index: 1; }
.bi-dinamico .bi-total td:first-child { background: var(--superficie); }
/* Cubo dinámico (0.99.3): campos, las cuatro zonas (filtros, columnas, filas, valores) y la tabla con grupos que se abren y cierran. */
.cubo-raiz { position: relative; display: grid; gap: .75rem; margin-top: .5rem; }
.cubo-estado { margin: 0; font-size: .85rem; color: var(--tinta-2); }
.cubo-campos { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); padding: .6rem .75rem; display: grid; gap: .45rem; }
.cubo-lista { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.cubo-titulo { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-3); min-width: 6.5rem; }
.cubo-ayuda { margin: 0; font-size: .78rem; color: var(--tinta-3); }
.cubo-chips { display: flex; flex-wrap: wrap; gap: .35rem; min-height: 1.9rem; align-items: center; }
.cubo-chip { font: inherit; font-size: .8rem; padding: .25rem .6rem; border-radius: 999px; border: 1px solid var(--linea-fuerte); background: var(--superficie); color: var(--tinta); cursor: grab; }
.cubo-chip:hover { border-color: var(--tinta-2); }
.cubo-chip-medida { background: var(--verde-claro); border-color: var(--verde); }
.cubo-chip.cubo-usado { opacity: .45; }
.cubo-chip.cubo-filtrado { border-color: var(--ambar); background: var(--ambar-claro); }
.cubo-zonas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
@media (max-width: 900px) { .cubo-zonas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cubo-zona { border: 1px dashed var(--linea-fuerte); border-radius: var(--radio); padding: .45rem .55rem; display: grid; gap: .3rem; align-content: start; background: var(--fondo); }
.cubo-zona.cubo-sobre, .cubo-campos.cubo-sobre { border-color: var(--verde); background: var(--verde-claro); }
.cubo-vacio { font-size: .75rem; color: var(--tinta-3); }
.cubo-nota { font-size: .8rem; color: var(--tinta-2); }
.cubo-aviso { padding: .75rem; color: var(--tinta-2); }
.cubo-tabla { max-height: 75vh; overflow: auto; }
.cubo-tabla table.cubo { font-size: .8125rem; border-collapse: separate; border-spacing: 0; }
.cubo-tabla thead th { position: sticky; top: 0; background: var(--fondo); z-index: 2; }
.cubo-tabla thead tr:nth-child(2) th { top: 2rem; }
.cubo-tabla thead tr:nth-child(3) th { top: 4rem; }
.cubo-tabla th, .cubo-tabla td { white-space: nowrap; padding: .3rem .55rem; }
.cubo-tabla td.cubo-etiqueta, .cubo-tabla th.cubo-esquina { position: sticky; left: 0; background: var(--superficie); z-index: 1; min-width: 14rem; white-space: normal; }
.cubo-tabla th.cubo-esquina { z-index: 3; background: var(--fondo); vertical-align: bottom; }
.cubo-sub { display: block; font-weight: 400; font-size: .72rem; color: var(--tinta-3); }
.cubo-th-grupo { text-align: center; border-bottom: 1px solid var(--linea); }
.cubo-th-total, .cubo-td-total { background: var(--fondo); font-weight: 700; }
.cubo-orden { font: inherit; font-weight: 700; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; text-align: inherit; }
.cubo-grupo td { font-weight: 700; }
.cubo-grupo.cubo-n1 td { background: var(--azul-claro); }
.cubo-grupo.cubo-n1 td.cubo-etiqueta { background: var(--azul-claro); }
.cubo-tg { font: inherit; width: 1.35rem; height: 1.35rem; line-height: 1; padding: 0; border: 1px solid var(--linea-fuerte); border-radius: 4px; background: var(--superficie); cursor: pointer; }
.cubo-total td { font-weight: 700; border-top: 2px solid var(--tinta); background: var(--superficie); }
.cubo-menu { position: absolute; z-index: 20; width: 270px; max-height: 60vh; overflow: auto; background: var(--superficie); border: 1px solid var(--linea-fuerte); border-radius: var(--radio); box-shadow: var(--sombra); padding: .4rem; display: grid; gap: .2rem; }
.cubo-menu[hidden] { display: none; }
.cubo-menu > button { font: inherit; font-size: .85rem; text-align: left; background: none; border: 0; padding: .4rem .5rem; border-radius: 4px; cursor: pointer; color: var(--tinta); }
.cubo-menu > button:hover { background: var(--fondo); }
.cubo-menu-titulo { font-weight: 700; font-size: .85rem; padding: .25rem .5rem; border-bottom: 1px solid var(--linea); margin-bottom: .2rem; }
.cubo-menu-fila { display: flex; gap: .4rem; padding: .25rem .3rem; }
.cubo-menu-fila button:not(.boton) { font: inherit; font-size: .8rem; background: none; border: 0; color: var(--azul); cursor: pointer; padding: 0; }
.cubo-buscar { margin: .2rem .3rem; }
.cubo-valores { display: grid; gap: .15rem; max-height: 16rem; overflow: auto; padding: .2rem .4rem; font-size: .82rem; }
.cubo-valores label[hidden] { display: none; }
@media (max-width: 600px) { .cubo-tabla td.cubo-etiqueta, .cubo-tabla th.cubo-esquina { min-width: 9rem; max-width: 11rem; } }
@media print { .cubo-tabla { max-height: none; overflow: visible; } .cubo-tg { display: none; } }
/* Factura electrónica de compra (0.99.7): la casilla de una línea, en una fila que se acomoda en el celular. */
.fec-linea { margin: .75rem 0; }
.fec-campos { display: grid; grid-template-columns: minmax(7rem, 1fr) minmax(14rem, 3fr) minmax(9rem, 1.2fr) minmax(6rem, .8fr) minmax(7rem, 1fr) auto; gap: .5rem .75rem; align-items: end; }
.fec-campos .acciones { margin: 0; }
@media (max-width: 900px) { .fec-campos { grid-template-columns: 1fr 1fr; } .fec-campos .fec-desc { grid-column: 1 / -1; } }
.tabla tr.fila-actual td { background: var(--resalte, rgba(255, 200, 0, .15)); }
/* La pantalla de la FEC: a la izquierda (25 %) elegir el proveedor y empezar; a la derecha (75 %) las listas. */
.fec-pantalla { display: grid; grid-template-columns: minmax(16rem, 25%) minmax(0, 1fr); gap: 1.5rem; align-items: start; align-content: start; }
.fec-izquierda, .fec-derecha { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.fec-izquierda .rm-subtitulo, .fec-derecha .rm-subtitulo { margin: 0; }
.fec-izquierda .entrada, .fec-izquierda .buscador, .fec-izquierda .rc-proveedor, .fec-izquierda form { margin: 0; }
.fec-izquierda .rm-nueva .rm-campos { grid-template-columns: 1fr; }
.fec-izquierda .rc-proveedor { display: grid; grid-template-columns: 1fr; gap: .4rem; }
.fec-izquierda .fila-buscar { display: flex; gap: .5rem; }
.fec-izquierda .fila-buscar input { flex: 1; min-width: 0; }
@media (max-width: 800px) { .fec-pantalla { grid-template-columns: 1fr; } }
.pagina:has(.fec-pantalla) { max-width: 1600px; align-content: start; }
.pagina:has(.fec-doc) { max-width: 1600px; align-content: start; }
/* Reportes › Reporte de ventas (0.99.9): filtros arriba, la lista de usuarios con casillas y las pestañas de las vistas. */
.pagina:has(.rvc) { max-width: 1800px; align-content: start; }
.rvc-filtros { display: grid; gap: .75rem; }
.rvc-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .5rem 1rem; align-items: end; }
.rvc-lista { border: 1px solid var(--linea); border-radius: 8px; padding: .5rem .75rem; margin: 0; min-width: 0; }
.rvc-lista legend { font-weight: 600; padding: 0 .25rem; }
.rvc-botones { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .4rem; }
.rvc-casillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .15rem .75rem; max-height: 11rem; overflow-y: auto; }
.rvc-filtros .acciones { margin: 0; }
.rvc-pestanas { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 2px solid var(--linea); }
.rvc-pestana { padding: .45rem .9rem; border-radius: 8px 8px 0 0; text-decoration: none; color: var(--tinta-2, inherit); font-weight: 600; }
.rvc-pestana:hover { background: var(--fondo); }
.rvc-pestana.rvc-actual { background: var(--acento, #2563eb); color: #fff; }
.rvc-tabla td, .rvc-tabla th { font-size: .875rem; }
/* Gráfico de los reportes (0.99.12): el botón del encabezado y la ventana con los controles y el lienzo. */
.rep-grafico { margin-left: auto; }
dialog.graf { width: min(1100px, 96vw); max-height: 94vh; border: 0; border-radius: 12px; padding: 1rem 1.25rem; box-shadow: 0 20px 60px rgba(0,0,0,.35); background: var(--superficie, #fff); color: inherit; }
dialog.graf::backdrop { background: rgba(15, 23, 42, .45); }
.graf-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.graf-cabeza h2 { margin: 0; font-size: 1.15rem; }
.graf-controles { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .5rem .75rem; margin: .75rem 0 .5rem; }
.graf-campo { display: grid; gap: .2rem; font-size: .85rem; }
.graf-campo span { font-weight: 600; }
.graf-campo-valores { border: 1px solid var(--linea, #e2e8f0); border-radius: 8px; padding: .35rem .75rem; margin: 0 0 .5rem; }
.graf-campo-valores legend { font-size: .85rem; font-weight: 600; padding: 0 .25rem; }
.graf-valores { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .9rem; }
.graf-aviso { min-height: 1.2em; margin: .25rem 0; }
.graf-lienzo { position: relative; height: 420px; }
.graf-lienzo.graf-grande { height: 68vh; }
.graf-acciones { margin-top: .5rem; }
@media (max-width: 600px) { .graf-lienzo { height: 320px; } }
/* Reportes › Bitácora de costos y precios (0.99.14): los colores de Beriozka. */
.cp-costo-baja { background: #c6f6c6 !important; }
.cp-costo-sube { background: #ffa3a3 !important; }
.cp-precio-baja { background: #ffdcbe !important; }
.cp-precio-sube { background: #c8c8ff !important; }
.cp-colores { display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: center; border: 0; padding: 0; margin: 0; }
.cp-colores legend { font-size: .85rem; font-weight: 600; }
.cp-color { padding: .15rem .5rem; border-radius: 6px; color: #1f2937; }
.cp-tabla td, .cp-tabla th { font-size: .85rem; }
@media print { .cp-costo-baja, .cp-costo-sube, .cp-precio-baja, .cp-precio-sube { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
/* Permisos del usuario (0.99.15): copiar de otro usuario y marcar o desmarcar todo. */
.perm-copiar { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; margin-bottom: 1rem; }
.perm-copiar select { min-width: 14rem; }
.perm-todos { margin: 0 0 .75rem; }
/* 0.99.17: fecha y hora en casillas aparte en los reportes (el calendario se cierra al elegir el día). */
.fecha-hora { display: flex; gap: .35rem; }
.fecha-hora input[type=date] { min-width: 9.5rem; }
.fecha-hora input[type=time] { width: 6.5rem; }
/* 0.99.19: Reporte de productos, listas de filtros (IN). */
.rp-listas { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .6rem; margin: .6rem 0; }
.rp-lista { border: 1px solid var(--borde, #d6dbe1); border-radius: .5rem; padding: .4rem .6rem .6rem; min-width: 0; }
.rp-lista input[type=text] { width: 100%; }
.rp-elegidos { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; max-height: 8rem; overflow: auto; }
.rp-chip { background: var(--fondo-suave, #eef4ff); border-radius: 1rem; padding: .1rem .55rem; font-size: .85rem; }
.rp-ordenar { color: inherit; text-decoration: none; }
.rp-ordenar:hover { text-decoration: underline; }
/* 0.99.21: datáfono enlazado — el botón del cobro, la espera y la tarjeta ya cobrada. */
.cobro-datafono { white-space: nowrap; flex: none; }
.cobro-datafono[hidden], .cobro-pinpad [data-pinpad-texto][hidden] { display: none; }
.cobro-datafono-ok td:first-child::after { content: " ✓"; color: var(--ok, #1a7f37); font-weight: 700; }
/* 0.99.28: la espera es un