/* Óptica Liliana: programa de escritorio con el oficio del sistema de repuestos (Windows 11): barra clara arriba con las
   secciones subrayadas (sin menú lateral), contenido gris claro, tarjetas blancas con borde fino, tablas densas y barras de comandos. La cara propia: el
   azul del logo en lo que se toca o está elegido, el rojo del logo solo en la marca y en lo atrasado, el arco de grados del
   TABO como gesto, la receta con OD en azul y OI en violeta, y las fotos de las monturas, grandes y sobre blanco. */
@font-face { font-family: "Hanken Grotesk"; src: url("fuentes/hanken-grotesk-400-700.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Red Hat Display"; src: url("fuentes/red-hat-display-500-800.woff2") format("woff2"); font-weight: 500 800; font-display: swap; }
:root {
  --fondo: #f0f0f0; --capa: #ffffff; --capa-2: #f5f5f5; --linea: #e5e5e5; --linea-2: #d1d1d1;
  --tinta: #1b1b1b; --tinta-2: #5d5d5d; --tinta-3: #707070;
  --acento: #1f4bd8; --acento-hondo: #173aa8; --acento-suave: #eaf0fd; --acento-texto: #1a42c0; --sobre-acento: #ffffff;
  --marca: #d6323a; --alerta: #c42b1c; --alerta-suave: #fde7e9; --bien: #0f7b0f; --bien-suave: #dff6dd; --ambar: #8a5a00; --ambar-suave: #fff4ce;
  --ojo-d: #1f4bd8; --ojo-i: #8a3fb0;
  --marco: #0e0e10; --marco-2: #1c1c20; --marco-linea: #2a2d35; --marco-tinta: #e9eaee; --marco-tinta-2: #9da2ad; --marco-acento: #7d9bff;
  --sobre-foto: #3a3a3a; --sobre-foto-fondo: rgb(0 0 0 / .06);
  --papel: #ffffff; --blanco: #ffffff; --fondo-foto: #ececec;   /* gris de la foto en las tarjetas: la montura (sobre blanco) se mezcla con él y la foto se distingue de los datos */ --velo: rgb(0 0 0 / .4);
  --sombra: none; --sombra-menu: 0 8px 24px rgb(0 0 0 / .14); --sombra-tarjeta: 0 2px 8px rgb(0 0 0 / .06);
  --cobro-verde: #0f7b0f; --cobro-azul: #1f4bd8; --sube-claro: #4ade80; --baja-claro: #fca5a5;
  --boton-grande: #ffffff; --velo-entrada: linear-gradient(180deg, rgb(14 14 16 / .82), rgb(14 14 16 / .45) 38%, rgb(14 14 16 / .2));
  --cortina-fondo: #0e0e10; --cortina-acento: #7d9bff; --destello: rgb(255 255 255 / .95); --destello-halo: rgb(125 155 255 / .45); --cristal-brillo: rgb(235 242 255); --cristal-claro: #7d9bff; --cortina-tinta-2: #d4d7dd; --sombra-marca: drop-shadow(0 10px 28px rgb(0 0 0 / .6));
  --c-azul: #1f4bd8; --c-azul-s: #eaf0fd; --c-verde: #0f7b0f; --c-verde-s: #dff6dd; --c-violeta: #7a3fc4; --c-violeta-s: #f0e8fb;
  --c-naranja: #b8560b; --c-naranja-s: #fdeedf; --c-cian: #0b7f95; --c-cian-s: #def3f6; --c-rosa: #c2306b; --c-rosa-s: #fbe6ee; --c-oro: #8a6200; --c-oro-s: #fbf0d2;
  --r: 4px; --r2: 8px; --t: 167ms cubic-bezier(.33, 0, .67, 1);
  --letra: "Hanken Grotesk", system-ui, sans-serif; --cifra: "Red Hat Display", "Hanken Grotesk", system-ui, sans-serif;
  --aviso-izq: 24px; --caja-margen: 16px; --caja-busca: 52px;
  --barra: #1f4bd8; --barra-linea: #173aa8; --barra-tinta: #ffffff; --barra-tinta-2: #d5defb; --barra-hover: rgb(255 255 255 / .12); --barra-activa: rgb(255 255 255 / .18); --pasos-fondo: #f2f5fe;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --fondo: #202020; --capa: #2b2b2b; --capa-2: #323232; --linea: #3a3a3a; --linea-2: #4a4a4a;
  --tinta: #ffffff; --tinta-2: #c5c5c5; --tinta-3: #a0a0a0;
  --acento: #7d9bff; --acento-hondo: #a3b8ff; --acento-suave: #232c4a; --acento-texto: #a3b8ff; --sobre-acento: #10142a;
  --alerta: #ff99a4; --alerta-suave: #442726; --bien: #6ccb5f; --bien-suave: #2a3d29; --ambar: #f5c451; --ambar-suave: #3d3219;
  --ojo-d: #7d9bff; --ojo-i: #c98bea; --papel: #2b2b2b; --velo: rgb(0 0 0 / .6); --cobro-azul: #3b63e6;
  --c-azul: #8ea2ff; --c-azul-s: #262d4d; --c-verde: #6ccb5f; --c-verde-s: #2a3d29; --c-violeta: #c39bff; --c-violeta-s: #33264d;
  --c-naranja: #ffa463; --c-naranja-s: #452b17; --c-cian: #5fd0e4; --c-cian-s: #173a41; --c-rosa: #ff8ab8; --c-rosa-s: #47212f; --c-oro: #f2c75c; --c-oro-s: #3f3317;
} }
:root[data-theme="dark"] {
  --barra: #17327f; --barra-linea: #10255e; --barra-tinta-2: #b9c6f0; --pasos-fondo: #1d2433;
  --fondo: #202020; --capa: #2b2b2b; --capa-2: #323232; --linea: #3a3a3a; --linea-2: #4a4a4a;
  --tinta: #ffffff; --tinta-2: #c5c5c5; --tinta-3: #a0a0a0;
  --acento: #7d9bff; --acento-hondo: #a3b8ff; --acento-suave: #232c4a; --acento-texto: #a3b8ff; --sobre-acento: #10142a;
  --alerta: #ff99a4; --alerta-suave: #442726; --bien: #6ccb5f; --bien-suave: #2a3d29; --ambar: #f5c451; --ambar-suave: #3d3219;
  --ojo-d: #7d9bff; --ojo-i: #c98bea; --papel: #2b2b2b; --velo: rgb(0 0 0 / .6); --cobro-azul: #3b63e6;
  --c-azul: #8ea2ff; --c-azul-s: #262d4d; --c-verde: #6ccb5f; --c-verde-s: #2a3d29; --c-violeta: #c39bff; --c-violeta-s: #33264d;
  --c-naranja: #ffa463; --c-naranja-s: #452b17; --c-cian: #5fd0e4; --c-cian-s: #173a41; --c-rosa: #ff8ab8; --c-rosa-s: #47212f; --c-oro: #f2c75c; --c-oro-s: #3f3317;
}
html, body { background: var(--marco); }
body { font-size: 14px; line-height: 20px; overflow: hidden; font-variant-numeric: tabular-nums; }
h1, h2, .cifra { font-family: var(--cifra); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.bajo { color: var(--alerta); font-weight: 600; }
.nada { color: var(--tinta-3); padding: 8px 0; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Ventana: barra clara arriba (marca y secciones subrayadas), contenido gris claro y barra de estado ---------- */
.ventana { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 56px minmax(0, 1fr) 28px; height: 100vh; background: var(--fondo); }
.ventana[hidden] { display: none; }
/* La barra con el azul de la marca (Willian: «dale color, todo se ve en blanco») */
.nav { display: flex; align-items: stretch; gap: 8px; min-width: 0; padding: 0 12px 0 16px; background: var(--barra); border-bottom: 1px solid var(--barra-linea); color: var(--barra-tinta-2); }
.nav .tienda { position: relative; display: flex; align-items: center; gap: 10px; flex: none; padding-right: 16px; margin-right: 4px; border-right: 1px solid rgb(255 255 255 / .2); white-space: nowrap; }
.nav .logo { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--r2); background: var(--barra-tinta); color: var(--barra); }
.nav .logo .ico { width: 21px; height: 21px; }
.nav .tienda b { position: relative; z-index: 1; color: var(--barra-tinta); font: 700 16px/1 var(--cifra); letter-spacing: -.01em; }
.nav .secciones { display: flex; align-items: stretch; gap: 2px; flex: 1; min-width: 0; overflow: hidden; }
.nav button { position: relative; display: flex; align-items: center; gap: 6px; flex: none; padding: 0 9px; border: 0; background: none; color: inherit; font-weight: 600; white-space: nowrap; transition: color var(--t), background var(--t); }
.nav button .ico { flex: none; width: 18px; height: 18px; }
.nav .secciones button { flex: 1 1 0; justify-content: center; min-width: 0; }   /* las secciones se reparten todo el ancho: sin hueco a la derecha */
.nav .secciones button:hover { color: var(--barra-tinta); background: var(--barra-hover); }
.nav button[aria-current] { color: var(--barra-tinta); background: var(--barra-activa); }
.nav button[aria-current]::after { content: ""; position: absolute; left: 7px; right: 7px; bottom: 0; height: 3px; border-radius: 2px 2px 0 0; background: var(--barra-tinta); }
.nav-pie { display: flex; align-items: center; gap: 4px; flex: none; padding-left: 12px; border-left: 1px solid rgb(255 255 255 / .2); white-space: nowrap; }
.nav .tema-b, .nav .salir-b { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: var(--r); }
.nav .tema-b:hover, .nav .salir-b:hover { background: var(--barra-hover); color: var(--barra-tinta); }
.nav .yo { display: flex; align-items: center; gap: 8px; padding: 0 8px; color: var(--barra-tinta); font-weight: 600; }
.avatar { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--acento); color: var(--sobre-acento); font-size: 12px; font-weight: 700; }
.nav .avatar { background: var(--barra-tinta); color: var(--barra); }
.contenido { min-width: 0; overflow: auto; padding: 20px 24px 24px; background: var(--fondo); }
.estado { gap: 18px; padding: 0 16px; font-size: 12px; }
.estado kbd { font-size: 12px; }

/* ---------- Piezas de programa ---------- */
.cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 14px; }
.cab h1 { font: 700 28px/36px var(--cifra); letter-spacing: -.02em; } .cab p { color: var(--tinta-2); font-size: 13px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 32px; padding: 0 12px; border: 1px solid var(--linea); border-bottom-color: var(--linea-2); border-radius: var(--r); background: var(--capa); color: var(--tinta); white-space: nowrap; transition: background var(--t); }
.btn:hover:not(:disabled) { background: var(--capa-2); } .btn:active { opacity: .85; } .btn:disabled { opacity: .4; }
.btn.prin { border-color: var(--acento); background: var(--acento); color: var(--sobre-acento); font-weight: 600; }
.btn.prin:hover:not(:disabled) { background: var(--acento-hondo); border-color: var(--acento-hondo); }
.btn.grande { height: 40px; padding: 0 18px; font-size: 14.5px; }
.btn .ico { width: 16px; height: 16px; } .btn kbd { font-size: 12px; opacity: .7; border-color: currentColor; }
.icono-btn { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: var(--r); background: none; color: var(--tinta); }
.icono-btn:hover { background: var(--capa-2); } .icono-btn .ico { width: 20px; height: 20px; }
.panel { background: var(--capa); border: 1px solid var(--linea); border-radius: var(--r2); }
.tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.tabla th { position: sticky; top: 0; z-index: 1; height: 34px; padding: 0 12px; text-align: left; font-weight: 600; color: var(--tinta-2); background: var(--capa); border-bottom: 1px solid var(--linea); }
.tabla td { height: 40px; padding: 0 12px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tabla tr.renglon { cursor: pointer; } .tabla tr.renglon:hover td { background: var(--capa-2); }
.tabla tr.renglon[aria-selected="true"] td { background: var(--acento-suave); }
.tabla tr.renglon[aria-selected="true"] td:first-child { box-shadow: inset 3px 0 0 var(--acento); }
.tabla .num { text-align: right; }
.segm { display: grid; grid-auto-flow: column; gap: 2px; padding: 3px; border: 1px solid var(--linea); border-radius: var(--r2); background: var(--capa); }
.segm button { height: 30px; border: 0; border-radius: var(--r); background: none; color: var(--tinta-2); font-weight: 600; }
.segm button:hover { background: var(--capa-2); } .segm button[aria-pressed="true"] { background: var(--acento); color: var(--sobre-acento); }
.ln { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 3px 0; }
.ln .cifra { flex: none; white-space: nowrap; }
.pie-modal { display: flex; justify-content: flex-end; gap: 8px; }
.error-form { color: var(--alerta); font-size: 13px; min-height: 18px; }
.link-v { border: 0; background: none; padding: 2px; color: var(--acento-texto); font-size: 12.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.vacio-v { padding: 28px 8px; color: var(--tinta-3); text-align: center; }

/* Barra de comandos sobre cada lista (antes «accesos grandes»): botones planos con su ícono y su cuenta */
.atajos-grandes { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin-bottom: 12px; border: 1px solid var(--linea); border-radius: var(--r2); background: var(--capa); }
.atajos-grandes button { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 0; border-radius: var(--r); background: none; color: var(--tinta); font-weight: 600; white-space: nowrap; transition: background var(--t); }
.atajos-grandes button:hover:not(:disabled) { background: var(--capa-2); } .atajos-grandes button:disabled { opacity: .4; }
.atajos-grandes .ico { width: 18px; height: 18px; color: var(--acento); }
.atajos-grandes .cifra { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--capa-2); color: var(--tinta-2); font: 700 12px/20px var(--letra); text-align: center; }
.atajos-grandes button[aria-pressed="true"] { background: var(--acento-suave); color: var(--acento-texto); box-shadow: inset 0 -2px 0 var(--acento); }
.atajos-grandes .t-rosa .ico { color: var(--alerta); } .atajos-grandes .cifra.rojo { background: var(--alerta); color: var(--blanco); }

/* Buscador y filtros de cada lista */
.filtros-v { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.busca-v { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 200px; height: 38px; padding: 0 12px; border: 1px solid var(--linea); border-bottom-color: var(--linea-2); border-radius: var(--r); background: var(--capa); color: var(--tinta-3); }
.busca-v:focus-within { border-bottom: 2px solid var(--acento); }
.busca-v input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 14px; color: var(--tinta); }
.busca-v .ico { width: 18px; height: 18px; }
.grupo-filtros { display: flex; gap: 8px; }
.filtro select { height: 38px; padding: 0 28px 0 12px; border: 1px solid var(--linea); border-bottom-color: var(--linea-2); border-radius: var(--r); background: var(--capa); color: var(--tinta); font-size: 13.5px; }

/* ---------- La orden como hoja y la receta en papel ---------- */
.papel { display: flex; flex-direction: column; padding: 16px 18px; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r2); overflow: auto; }
.papel header { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; border-bottom: 1px dashed var(--linea-2); }
.papel header h2 { font-size: 20px; } .papel header span { color: var(--tinta-3); font-size: 13px; }
.papel .quien { padding: 10px 0 6px; font-weight: 700; color: var(--acento-texto); }
.foto-orden { width: 100%; object-fit: contain; border-radius: var(--r); margin-bottom: 8px; background: var(--blanco); }
.rx-papel { width: 100%; border-collapse: collapse; font-size: 13px; }
.rx-papel th, .rx-papel td { padding: 3px 6px; text-align: right; }
.rx-papel thead th { color: var(--tinta-3); font-weight: 600; font-size: 12px; }
.rx-papel tbody th { text-align: left; font-weight: 800; } .rx-papel tbody tr:first-child th { color: var(--ojo-d); } .rx-papel tbody tr:last-child th { color: var(--ojo-i); }
.rx-papel td { font-weight: 700; font-variant-numeric: tabular-nums; }
.dip { color: var(--tinta-3); font-size: 12px; padding: 4px 0 8px; border-bottom: 1px dashed var(--linea-2); }
.lineas { padding: 8px 0; }
.recorrido { margin: 10px 0 0; padding: 10px 0 0 16px; border-top: 1px dashed var(--linea-2); font-size: 12.5px; }
.recorrido li { padding: 2px 0; } .recorrido span { display: block; color: var(--tinta-3); }
.ojo-t.od { color: var(--ojo-d); font-weight: 800; } .ojo-t.oi { color: var(--ojo-i); font-weight: 800; }
@media print { .nav, .col-venta, .cab-atencion, .estado, .atajos-grandes, .filtros-v { display: none !important; } }
/* Simetría: los botones de una cabecera llevan todos la misma altura y el mismo relleno, sean principales o no */
.cab .btn, .cab-btns .btn { height: 40px; padding: 0 16px; font-size: 14px; }

/* Celular, solo en la pantalla de entrada (vista-celular.js): sin el ancho mínimo de computadora y con campos de 16 px,
   para que el iPhone no acerque la pantalla al tocarlos */
html.entrada-celular body { min-width: 0; }
/* El sistema que queda detrás de la cortina no estira la página a lo ancho (solo horizontal y solo en la entrada) */
html.entrada-celular { overflow-x: hidden; }
html.entrada-celular .cortina input { font-size: 16px; }