:root {
    --bg: #131519;
    --panel: #1b1e24;
    --panel-2: #23272f;
    --field: #1f232b;
    --ink: #f1f3f6;
    --muted: #9aa0ad;
    --faint: #6c7280;
    --line: #2c313b;
    --gold: #d4af37;
    --gold-2: #e6c65c;
    --gold-soft: rgba(212,175,55,.13);
    --ok: #46d39a;
    --danger: #f0788a;
    --radius: 12px;
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg); }
body {
    background: var(--bg); color: var(--ink); font-size: 15px; -webkit-font-smoothing: antialiased;
    touch-action: manipulation; overscroll-behavior: none;
    -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
input, textarea { -webkit-user-select: text; user-select: text; }

/* Aviso de instalar como app */
#lf-instalar {
    position: fixed; left: 12px; right: 12px; bottom: 14px; z-index: 40;
    display: flex; align-items: center; gap: 10px;
    background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
    padding: 10px 12px; box-shadow: 0 10px 34px rgba(0,0,0,.5);
}
#lf-instalar span { flex: 1; font-size: 13.5px; }
#lf-instalar .btn { padding: 8px 14px; }
@media (max-width: 760px) { #lf-instalar { bottom: 80px; } }
.oculto { display: none !important; }
a { color: var(--gold); }
code { background: var(--panel-2); padding: 1px 6px; border-radius: 5px; font-size: 13px; color: var(--gold-2); }

/* ---------- LOGO / MARCA ---------- */
.brand { display: flex; align-items: center; gap: 11px; font-weight: 600; letter-spacing: .14em; font-size: 15px; color: var(--ink); white-space: nowrap; }
.brand .gold { color: var(--gold); }
.brand svg { flex: none; }

/* ---------- LOGIN PIN ---------- */
.login-body {
    position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px;
    overflow: auto; overscroll-behavior: none;
    background: var(--bg);
}
/* Pantallas BAJAS (tablet/móvil en horizontal): el login se compacta y las
   teclas pasan a alto controlado (en vez de aspect-ratio) para que TODO quepa
   sin cortarse el teclado. */
/* Pantallas BAJAS (tablet/móvil en horizontal): tarjeta estrecha y centrada, con
   teclas CUADRADAS más pequeñas, para que quepa todo alineado y sin cortarse. */
@media (max-height: 780px) {
    .login-body { padding: 14px 20px; }
    .pin-card { max-width: 236px; }
    .brand-lg { font-size: 18px; margin-bottom: 3px; }
    .neg-sub { margin-bottom: 3px; }
    .neg-sel { margin-bottom: 8px; }
    .neg-opt { padding: 8px 10px; font-size: 13px; }
    .pin-sub { margin-bottom: 6px; }
    .pin-dots { margin-bottom: 8px; min-height: 10px; }
    .keypad { gap: 8px; }
    .key { min-height: 40px; font-size: 18px; }
}
@media (max-height: 560px) {
    .login-body { padding: 10px 20px; }
    .pin-card { max-width: 206px; }
    .brand-lg { font-size: 16px; margin-bottom: 1px; }
    .neg-sub, .pin-sub { font-size: 10.5px; margin-bottom: 2px; }
    .neg-sel { margin-bottom: 5px; }
    .neg-opt { padding: 6px 8px; font-size: 12px; }
    .pin-dots { margin-bottom: 5px; min-height: 8px; }
    .keypad { gap: 6px; }
    .key { min-height: 34px; font-size: 15px; }
}
/* margin:auto (y no solo align-items) para que, si el contenido es más alto
   que la pantalla, se pueda hacer scroll sin que se corte la parte de arriba */
.pin-card { width: 100%; max-width: 272px; text-align: center; margin: auto; }
.brand-lg { justify-content: center; font-size: 21px; letter-spacing: .16em; margin-bottom: 4px; }
.pin-sub { color: var(--muted); font-size: 12.5px; margin-bottom: 8px; }
.pin-dots { display: flex; justify-content: center; gap: 10px; min-height: 12px; margin-bottom: 10px; }
.dot { width: 11px; height: 11px; border-radius: 50%; }
.dot.on { background: var(--gold); }
.dot.ph { background: transparent; border: 1.5px solid var(--line); }
.login-error { color: var(--danger); font-size: 13px; margin-bottom: 12px; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.key {
    background: var(--panel-2); border: 1px solid var(--line); border-radius: 50%; aspect-ratio: 1; min-height: 46px;
    font-size: 20px; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center;
    user-select: none; -webkit-user-select: none; transition: background .12s, transform .05s;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.key svg { pointer-events: none; }
.key:active { transform: scale(.92); background: #2b303a; }
.key.ok { background: var(--gold); color: #15171c; border: 0; }
.key.ok:active { background: var(--gold-2); }
.key.del { background: transparent; border: 0; color: var(--muted); font-size: 19px; }

/* Login PROPORCIONAL: cuando hay poco ALTO disponible (tablet o móvil en
   HORIZONTAL, o pantallas bajas) se encoge la tarjeta ENTERA. Las teclas siguen
   CUADRADAS (aspect-ratio), solo más pequeñas — nada se deforma ni se aplasta.
   Va DESPUÉS de la base a propósito: las reglas "por alto" de más arriba quedaban
   anuladas por el orden y no aplicaban. */
@media (max-height: 860px) {
    .pin-card { max-width: 246px; }
    .brand-lg { font-size: 19px; margin-bottom: 4px; }
    .login-sel { padding: 10px 40px 10px 14px; font-size: 15px; margin-bottom: 9px; }
    .keypad { gap: 8px; }
    .key { min-height: 38px; }
    .neg-sub { margin-bottom: 3px; }
    .pin-dots { margin-bottom: 8px; }
    .pin-sub { margin-bottom: 6px; }
}
@media (max-height: 700px) {
    .pin-card { max-width: 214px; }
    .brand-lg { font-size: 17px; margin-bottom: 2px; }
    .login-sel { padding: 8px 36px 8px 12px; font-size: 14px; margin-bottom: 7px; }
    .keypad { gap: 7px; }
    .key { min-height: 32px; }
    .neg-sub { margin-bottom: 2px; }
    .pin-dots { margin-bottom: 6px; }
    .pin-sub { margin-bottom: 5px; }
}
@media (max-height: 540px) {
    .pin-card { max-width: 184px; }
    .brand-lg { font-size: 15px; }
    .login-sel { padding: 7px 34px 7px 11px; font-size: 13px; margin-bottom: 6px; }
    .keypad { gap: 6px; }
    .key { min-height: 28px; font-size: 16px; }
}
/* Móvil en VERTICAL (pantalla estrecha): tarjeta algo más pequeña, también
   proporcional (teclas cuadradas). No afecta a tablets (>440). */
@media (max-width: 440px) {
    .pin-card { max-width: 232px; }
}

/* ---------- NAVEGACIÓN ---------- */
.topbar {
    display: flex; align-items: center; padding: 0 20px; gap: 16px;
    position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--line);
    background: rgba(19,21,25,.9); backdrop-filter: blur(10px);
    /* En iOS (PWA a pantalla completa) baja el contenido por debajo de la
       barra de estado / hora, en vez de quedar tapado por ella. */
    padding-top: env(safe-area-inset-top, 0px);
    /* El alto útil (62px) se suma al hueco de la barra de estado: con
       box-sizing:border-box, si no, la muesca se comía el alto y la
       cabecera salía aplastada en el móvil. */
    min-height: calc(62px + env(safe-area-inset-top, 0px));
}
.topbar .brand { flex: none; }
.tabs { display: flex; gap: 6px; }
.topbar .tabs { flex: 1; min-width: 0; justify-content: center; overflow-x: auto; scrollbar-width: none; }
.topbar .tabs::-webkit-scrollbar { display: none; }
.topbar .tab { flex: none; }
.tab {
    display: flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--muted);
    padding: 9px 16px; border-radius: 50px; font-size: 14px; font-weight: 500; cursor: pointer; transition: .12s;
}
.tab { position: relative; }
.tab svg { width: 18px; height: 18px; flex: none; }
.tab:hover { color: var(--ink); background: var(--panel); }
.tab.active { color: var(--gold); background: var(--gold-soft); }
/* El admin tiene 4 pestañas + selector de negocio: en la barra SUPERIOR van
   siempre solo-icono (la activa muestra su nombre) para que nunca se corten,
   ni siquiera en tablet horizontal (>1080px). El menú inferior no se toca. */
.rol-admin .topbar .tab .lbl { display: none; }
.rol-admin .topbar .tab.active .lbl { display: inline; }
/* Aviso de pedidos nuevos sin imprimir */
.tab-badge { position: absolute; top: 1px; right: 8px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
    background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 760px) { .bottomnav .tab-badge { top: 3px; right: calc(50% - 22px); } }
.appver { flex: none; background: transparent; border: 1px solid var(--line); color: var(--faint); font-size: 11px; padding: 3px 8px; border-radius: 40px; cursor: pointer; }
.appver:hover { color: var(--gold-2); border-color: var(--gold-2); }
.logout { flex: none; display: flex; align-items: center; gap: 8px; color: var(--faint); text-decoration: none; font-size: 14px; }
.logout svg { width: 18px; height: 18px; }
.logout:hover { color: var(--danger); }

.negocio { flex: none; text-decoration: none; color: var(--gold-2); background: var(--gold-soft); border: 1px solid var(--line); border-radius: 50px; padding: 5px 12px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.negocio:hover { border-color: var(--gold); }

/* Chip del selector de negocio (solo admin): no se recorta y el select va a juego. */
.admin-negchip { flex: none; display: inline-flex; align-items: center; gap: 7px; background: var(--gold-soft); border: 1px solid var(--line); border-radius: 50px; padding: 3px 4px 3px 12px; }
.admin-negchip-lbl { color: var(--gold-2); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }
.admin-negchip select {
    appearance: none; -webkit-appearance: none;
    background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 40px;
    padding: 6px 30px 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; max-width: 160px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat; background-position: right 11px center;
}
.admin-negchip select:hover { border-color: var(--gold-2); }
.admin-negchip option { background: var(--panel); color: var(--ink); }

/* Selector de negocio en el login */
.neg-sub { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 5px; }
.neg-sel { display: flex; flex-flow: row wrap; gap: 6px; margin-bottom: 11px; }
.neg-opt { flex: 1 1 auto; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 10px; padding: 9px 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .12s, background .12s; }
.neg-opt:hover { border-color: var(--gold-2); }
.neg-opt.sel { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-2); }

/* Login: "Administración" e "Instalar app" FIJOS en esquinas, fuera del flujo de
   la tarjeta, para que no se corten nunca (sobre todo en tablet horizontal, donde
   el teclado ocupa casi todo el alto). */
.login-body #btnAdmin {
    position: fixed; top: max(12px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right));
    margin: 0 !important; z-index: 6; padding: 9px 15px; border-radius: 40px;
    border: 1px solid var(--line) !important; background: var(--panel-2) !important;
    text-decoration: none !important; font-weight: 600;
}
.login-body #btnAdmin:hover { border-color: var(--gold) !important; }

/* Desplegables del login (negocio / rol / dependienta) con la temática Labelflow. */
.login-sel {
    display: block; width: 100%; box-sizing: border-box;
    -webkit-appearance: none; appearance: none;
    background-color: rgba(255, 255, 255, .05);
    color: var(--ink, #f4f4f5);
    border: 1px solid var(--line, #34363d);
    border-radius: 12px;
    padding: 13px 42px 13px 15px;
    font-size: 16px; font-weight: 600; line-height: 1.15;
    cursor: pointer; margin: 0 0 12px; text-align: left;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 15px center;
    transition: border-color .15s, box-shadow .15s;
}
.login-sel:focus { outline: none; border-color: var(--gold, #d4af37); box-shadow: 0 0 0 3px rgba(212, 175, 55, .25); }
.login-sel option { background: #1b1d22; color: var(--ink, #f4f4f5); font-weight: 600; }

.bottomnav { display: none; }

main { max-width: 960px; margin: 0 auto; padding: 26px 22px 64px; }

/* Tablet en horizontal / escritorio: aprovecha TODO el ancho de la pantalla
   (con un margen cómodo a los lados y un tope solo en monitores muy grandes). */
@media (min-width: 1000px) { main { max-width: min(1800px, 100%); padding: 30px clamp(28px, 3.5vw, 72px) 72px; } }

/* Márgenes seguros para el "notch" cuando la tablet/móvil está en horizontal */
@supports (padding: max(0px)) {
    .topbar { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
    .bottomnav { padding-left: max(6px, env(safe-area-inset-left)); padding-right: max(6px, env(safe-area-inset-right)); }
}

/* Tablet vertical / ventana estrecha: pestañas solo-icono (la activa muestra
   su nombre) para que la cabecera nunca se desborde con 5-6 pestañas. */
@media (min-width: 761px) and (max-width: 1080px) {
    .topbar { gap: 10px; }
    .topbar .tab { padding: 9px 11px; }
    .topbar .tab .lbl { display: none; }
    .topbar .tab.active .lbl { display: inline; }
    .negocio { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
    .admin-negchip select { max-width: 130px; }
}

@media (max-width: 760px) {
    .topbar .tabs { display: none; }
    .bottomnav {
        display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
        border-top: 1px solid var(--line); background: rgba(19,21,25,.95); backdrop-filter: blur(10px);
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    }
    .bottomnav .tab { flex: 1; min-width: 0; flex-direction: column; gap: 3px; font-size: 10.5px; padding: 8px 2px; border-radius: 12px; }
    .bottomnav .tab svg { width: 22px; height: 22px; }
    .bottomnav .tab .lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    main { padding: 20px 16px 96px; }
    /* Cabecera compacta: solo icono en "Salir", marca más pequeña y el chip de
       negocio puede encogerse (min-width:0 + flex) para que marca + chip + salir
       quepan SIEMPRE sin desbordar, aunque el nombre del negocio sea largo. */
    /* CABECERA MÓVIL EN REJILLA de 4 columnas:
       [ marca | negocio (columna flexible, junto a la marca) | versión | salir ]
       El chip del negocio va PEGADO al nombre de la app y el espacio sobrante
       queda en medio, empujando versión y salir a la derecha. Si el nombre
       crece (futuras tiendas, nombres largos), se recorta con puntos
       suspensivos dentro de su columna sin descolocar nada más. */
    .topbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: 10px; align-items: center; }
    .topbar .brand { grid-column: 1; font-size: 13px; letter-spacing: .1em; gap: 8px; }
    .topbar .negocio, .topbar .admin-negchip { grid-column: 2; justify-self: start; min-width: 0; max-width: 100%; }
    .topbar .appver { grid-column: 3; }
    .topbar .logout { grid-column: 4; }
    .topbar .logout .lbl { display: none; }
    .negocio { overflow: hidden; text-overflow: ellipsis; }
    .admin-negchip { padding-left: 10px; gap: 5px; }
    .admin-negchip-lbl { display: none; }
    .admin-negchip select { min-width: 0; max-width: 100%; font-size: 14px; }
    input[type=text], input[type=password], input[type=number], input[type=date], select, textarea { font-size: 16px; }
    /* iOS: evita que el campo de fecha se salga por el lado */
    input[type=date] { -webkit-appearance: none; appearance: none; }
}

/* ---------- COMPONENTES ---------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 22px; margin-bottom: 18px; }
.panel h2 { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.panel .hint { color: var(--muted); font-size: 13px; margin: 0 0 18px; line-height: 1.5; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
/* Los hijos de la rejilla pueden encogerse (si no, campos como la fecha
   se salen por el lado en el móvil). */
.grid2 > *, .grid3 > * { min-width: 0; }
@media (max-width: 720px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

label.field { display: block; margin-bottom: 15px; }
label.field > span { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; font-weight: 500; }
input[type=text], input[type=password], input[type=number], input[type=date], select, textarea {
    width: 100%; min-width: 0; max-width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px;
    font-size: 14px; font-family: inherit; background: var(--field); color: var(--ink);
}
input[type=date]::-webkit-date-and-time-value { text-align: left; }
input::placeholder, textarea::placeholder { color: var(--faint); }
textarea { resize: vertical; min-height: 72px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa0ad' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 11px center; padding-right: 30px; }

.btn { border: 0; border-radius: 50px; padding: 10px 20px; font-size: 14px; font-weight: 600; cursor: pointer; background: var(--gold); color: #15171c; transition: background .15s, transform .05s; }
.btn:hover { background: var(--gold-2); }
.btn:active { transform: translateY(1px); }
.btn.sec { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); }
.btn.sec:hover { background: #2b303a; }
.btn.ghost { background: transparent; color: var(--gold); padding: 6px 12px; }
.btn.ghost:hover { background: var(--gold-soft); }
.btn.danger { background: transparent; color: var(--danger); padding: 6px 12px; }
.btn.danger:hover { background: rgba(240,120,138,.12); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.row-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
/* Cabecera de panel (título + botón de acción): separa de la tabla siguiente
   y alinea el botón arriba, a la altura del título. */
.panel-head { margin-bottom: 22px; align-items: flex-start; }
.panel-head .hint { margin-bottom: 0; }

.tabla { width: 100%; border-collapse: collapse; }
.tabla-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla th, .tabla td { text-align: left; padding: 11px 8px; border-bottom: 1px solid var(--line); font-size: 14px; }
.tabla th { color: var(--faint); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
.tabla tr:hover td { background: rgba(255,255,255,.02); }
.pill { display: inline-block; background: var(--gold-soft); color: var(--gold-2); border-radius: 20px; padding: 2px 10px; font-size: 12px; margin: 2px; }

.aler-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 12px; }
.aler-grid label { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; color: var(--ink); }
.aler-grid input { width: auto; accent-color: var(--gold); }

/* ---------- LAYOUT IMPRIMIR (una columna en móvil, dos en pantallas anchas) ---------- */
.imprimir-cols { display: grid; grid-template-columns: 1fr; gap: 22px; }
.print-col { flex: 1; min-width: 220px; }

/* Solo en ESCRITORIO ancho (≥1200) partimos en dos columnas: datos a la
   izquierda y previsualización fija a la derecha. En tablet horizontal (1024)
   el formulario ocupa TODO el ancho, para que los campos no se estrechen ni se
   choquen al quedar la columna en ~340px. */
@media (min-width: 1200px) {
    .imprimir-cols { grid-template-columns: minmax(0, 1fr) minmax(340px, 520px); gap: 32px; align-items: start; }
    .imprimir-preview { position: sticky; top: calc(78px + env(safe-area-inset-top)); }
    .imprimir-preview .preview-wrap { flex-direction: column; gap: 18px; }
    .imprimir-preview .print-col { width: 100%; flex: none; }
    .imprimir-preview .preview-stage { width: 100%; }
}
/* El formulario de imprimir reacciona a SU propio ancho (no al de la pantalla):
   cuando su columna se estrecha (p. ej. al lado de la previsualización en
   escritorio), los campos se APILAN en vez de encogerse y solaparse. */
.imprimir-campos { container-type: inline-size; }
@container (max-width: 620px) { .imprimir-campos .grid3 { grid-template-columns: 1fr 1fr; } }
@container (max-width: 380px) { .imprimir-campos .grid2, .imprimir-campos .grid3 { grid-template-columns: 1fr; } }
/* Red de seguridad para navegadores SIN soporte de container queries: en el
   rango donde el formulario va al lado de la previsualización y su columna
   queda estrecha, la fila de 3 campos pasa a 2 para que no se estruje. */
@media (min-width: 1200px) and (max-width: 1400px) {
    .imprimir-campos .grid3 { grid-template-columns: 1fr 1fr; }
}

/* Configuración: reparte los paneles en columnas para no dejar hueco en pantallas anchas */
@media (min-width: 1100px) {
    .cfg-cols { column-count: 2; column-gap: 20px; }
    .cfg-cols > .panel { break-inside: avoid; }
}
@media (min-width: 1650px) {
    .cfg-cols { column-count: 3; }
}

/* ---------- PREVISUALIZACIÓN ---------- */
.preview-wrap { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.preview-stage {
    background: #0c0e12; border: 1px solid var(--line); border-radius: 14px; padding: 26px;
    display: flex; align-items: center; justify-content: center; min-width: 0; max-width: 100%; overflow: auto;
}
.preview-stage canvas { max-width: 100%; }
.etiqueta { background: #fff; color: #111; position: relative; box-shadow: 0 4px 18px rgba(0,0,0,.45); overflow: hidden; border-radius: 2px; }
.etiqueta .el { position: absolute; white-space: pre-wrap; line-height: 1.12; overflow: hidden; }
.editor .etiqueta .el { cursor: move; border: 1px dashed transparent; touch-action: none; }
.editor .etiqueta .el:hover { border-color: var(--gold-2); }
.editor .etiqueta .el.sel { border: 1px solid var(--gold); background: rgba(212,175,55,.10); }

.muted { color: var(--muted); font-size: 13px; }
.sep { height: 1px; background: var(--line); margin: 18px 0; }

/* ---------- TOAST ---------- */
.toast {
    position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
    background: #20242e; color: #fff; padding: 12px 22px; border-radius: 12px;
    border: 1px solid var(--line); box-shadow: 0 10px 36px rgba(0,0,0,.5); z-index: 100; font-size: 14px;
}
.toast.ok { background: #122a22; border-color: #1f5a45; color: #8ff0c8; }
.toast.err { background: #2c1620; border-color: #7a3040; color: #ffb3c0; }
@media (max-width: 760px) { .toast { bottom: 92px; } }

/* ---------- FORMATO POR PALABRA (editor de texto) ---------- */
.wordchips { display: flex; flex-wrap: wrap; gap: 6px; }
.wchip { border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); border-radius: 8px; padding: 6px 10px; font-size: 13.5px; cursor: pointer; line-height: 1.1; }
.wchip:hover { border-color: var(--gold-2); }
.wchip.sel { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-2); }

/* Vista con formato de los ingredientes (editor de producto) */
.ing-prev { background: #fff; color: #111; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; min-height: 20px; }

/* ---------- MODAL DE CONFIRMACIÓN ---------- */
.modal-fondo { position: fixed; inset: 0; z-index: 1000; padding: 20px; background: rgba(10,12,16,.72); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; }
.modal-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 24px; width: 100%; max-width: 380px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.modal-titulo { font-size: 17px; font-weight: 600; margin-bottom: 8px; color: var(--ink); }
.modal-texto { color: var(--muted); font-size: 14.5px; line-height: 1.5; margin: 0 0 20px; }
.modal-acciones { display: flex; gap: 10px; justify-content: flex-end; }
.btn.rojo { background: var(--danger); color: #2a0e12; }
.btn.rojo:hover { filter: brightness(1.08); background: var(--danger); }

/* ---------- BLOQUEO INSTANCIA ÚNICA ---------- */
#bloqueo-instancia { position: fixed; inset: 0; z-index: 1000; padding: 20px; background: rgba(10,12,16,.9); display: flex; align-items: center; justify-content: center; }
.bloqueo-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 30px 28px; width: 100%; max-width: 380px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.bloqueo-titulo { font-size: 18px; font-weight: 600; margin-bottom: 8px; color: var(--ink); }
.bloqueo-texto { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0 0 20px; }

/* ============ MÓVIL: refinado ============ */
@media (max-width: 760px) {
    /* Paneles con padding cómodo en móvil (esta regla va DESPUÉS de la base
       ".panel{padding:22px}" para que gane; si no, quedaban apretados a 22px). */
    .panel { padding: 16px; }
    /* Previsualización más grande: menos margen oscuro alrededor de la etiqueta */
    .preview-stage { padding: 14px; border-radius: 12px; }
    /* Pedido (tienda) y Crear pedido (obrador): la previsualización ocupa todo el
       ancho y la etiqueta se centra, en vez de quedar pequeña y pegada a la
       izquierda dejando hueco muerto a la derecha. */
    #vista-pedido .preview-wrap, #vista-pedidos .preview-wrap { flex-direction: column; gap: 14px; }
    #vista-pedido .preview-wrap > *, #vista-pedidos .preview-wrap > * { width: 100%; min-width: 0; }
    #vista-pedido .preview-stage, #vista-pedidos .preview-stage { width: 100%; }
    /* Previsualización arriba a lo ancho y botones de imprimir debajo */
    .imprimir-preview .preview-wrap { flex-direction: column; gap: 14px; }
    .imprimir-preview .preview-wrap > div:first-child { width: 100%; }
    .imprimir-preview .print-col { width: 100%; min-width: 0; }
    .imprimir-preview .btn { padding: 13px 20px; font-size: 15px; }
    .imprimir-cols { gap: 18px; }
    /* Cabeceras de sección (título + botón) con separación al envolver */
    .panel > .row-actions { row-gap: 12px; }
    /* Selector de alérgenos en dos columnas cómodas */
    .aler-grid { grid-template-columns: 1fr 1fr; gap: 10px 14px; }
    .aler-grid label { font-size: 15px; }
}

/* Teléfonos: las tablas se muestran como TARJETAS (sin scroll horizontal).
   Excepción: las tablas-FORMULARIO (.tabla-form, con campos por columna)
   conservan su cabecera y se desplazan en horizontal. */
@media (max-width: 600px) {
    .tabla:not(.tabla-form) { min-width: 0 !important; }
    .tabla:not(.tabla-form) thead { display: none; }
    .tabla:not(.tabla-form), .tabla:not(.tabla-form) tbody { display: block; }
    .tabla:not(.tabla-form) tr { display: block; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
    .tabla:not(.tabla-form) tr:hover td { background: transparent; }
    .tabla:not(.tabla-form) td { display: block; border: 0; padding: 2px 0; font-size: 14px; }
    .tabla:not(.tabla-form) td:first-child { font-size: 15.5px; margin-bottom: 2px; }
    .tabla:not(.tabla-form) td:empty { display: none; }
    .tabla:not(.tabla-form) td:last-child { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; text-align: left !important; white-space: normal !important; }
    /* Botones de acción como tarjetas que se envuelven (2 por fila). El botón
       primario mantiene su fondo dorado (texto oscuro legible); los demás,
       fondo de panel con su color de texto de marca. */
    .tabla:not(.tabla-form) td:last-child .btn { flex: 1 1 auto; min-width: calc(50% - 4px); text-align: center; padding: 11px 12px; border: 1px solid transparent; border-radius: 10px; }
    .tabla:not(.tabla-form) td:last-child .btn.sec,
    .tabla:not(.tabla-form) td:last-child .btn.ghost,
    .tabla:not(.tabla-form) td:last-child .btn.danger { background: var(--panel); border-color: var(--line); }
    /* Editor de plantilla: lienzo arriba y controles debajo, a lo ancho */
    .editor .preview-wrap { flex-direction: column; }
    .editor .preview-wrap > div { width: 100%; min-width: 0; }
}

/* ============ TABLET: TODO MÁS COMPACTO ============
   Entre el móvil (≤760) y el escritorio (≥1200), el diseño se veía demasiado
   grande. Aquí se reduce tipografía, paddings y controles SOLO en ese rango
   (va después de las reglas base para que gane). No afecta a móvil ni a escritorio. */
@media (min-width: 761px) and (max-width: 1199px) {
    body { font-size: 13px; }
    main { padding: 16px 18px 44px; }
    .panel { padding: 13px 14px; margin-bottom: 12px; border-radius: 12px; }
    .panel h2, h2 { font-size: 14.5px; }
    .panel .hint, .hint { font-size: 11.5px; }
    .panel .hint { margin-bottom: 12px; }
    label.field { margin-bottom: 11px; }
    label.field > span { font-size: 11px; margin-bottom: 4px; }
    input[type=text], input[type=password], input[type=number], input[type=date], select, textarea {
        padding: 7px 9px; font-size: 13px; border-radius: 8px;
    }
    textarea { min-height: 54px; }
    .btn { padding: 7px 13px; font-size: 12.5px; }
    .btn.ghost, .btn.danger { padding: 4px 9px; }
    .tabla th, .tabla td { padding: 7px 6px; font-size: 12.5px; }
    .tabla th { font-size: 10px; }
    /* En iPad, los inputs de FECHA nativos tienen un ancho mínimo y se desbordaban
       de su columna, montándose sobre el campo de al lado. Con appearance:none se
       comportan como un campo normal (se encogen a su columna) y ya no se solapan.
       Se mantienen las 3 columnas (como estaba antes). */
    input[type=date] { -webkit-appearance: none; appearance: none; }
    .grid3 { gap: 10px; }
    .grid2 { gap: 11px; }
    .sep { margin: 12px 0; }
    .muted { font-size: 11.5px; }
    .pill { font-size: 10.5px; padding: 2px 8px; }
    .topbar { min-height: calc(50px + env(safe-area-inset-top, 0px)); }
    .topbar .brand { font-size: 13.5px; }
    .topbar .tab { padding: 6px 10px; font-size: 12.5px; }
    .tab svg { width: 16px; height: 16px; }
    .appver { font-size: 10px; padding: 2px 7px; }
    .modal-card { padding: 16px; }
    .modal-titulo { font-size: 15.5px; }
    .modal-texto { font-size: 12.5px; }
    .preview-stage { padding: 14px; }
    .imprimir-cols { gap: 14px; }
    .aler-grid label { font-size: 12.5px; }
    .wchip { font-size: 12px; padding: 5px 9px; }
}

/* ---------- IMPRESIÓN LOCAL ---------- */
#area-impresion { display: none; }
@media print {
    /* Oculta TODO menos la zona de impresión. display:none (no visibility) para
       que la app NO ocupe sitio y no salgan páginas en blanco. */
    body > *:not(#area-impresion) { display: none !important; }
    html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
    #area-impresion { display: block !important; position: static; margin: 0; padding: 0; }
    #area-impresion canvas,
    #area-impresion .etiqueta { display: block; margin: 0; box-shadow: none !important; border-radius: 0 !important; }
    /* Salto de página SOLO entre etiquetas, nunca después de la última
       (si no, sale una página en blanco al final). */
    #area-impresion canvas:not(:last-child),
    #area-impresion .etiqueta:not(:last-child) { page-break-after: always; break-after: page; }
}

/* ---- Pestaña Inicio (panel de resumen) ---- */
.ini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.ini-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.ini-card.ini-link { cursor: pointer; transition: border-color .15s; }
.ini-card.ini-link:hover { border-color: var(--gold); }
.ini-num { font-size: 30px; font-weight: 700; color: var(--gold); line-height: 1.1; }
.ini-lbl { font-size: 12.5px; color: var(--muted); margin-top: 4px; }

/* Botón de ayuda del login */
.login-ayuda { display: block; margin: 16px auto 0; background: none; border: none; color: var(--muted); font-size: 12.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.login-ayuda:hover { color: var(--gold); }

/* ---- Tutorial guiado (tienda) ---- */
.tut-overlay { position: fixed; inset: 0; z-index: 3000; }
.tut-fondo { position: absolute; inset: 0; background: rgba(0, 0, 0, .68); }
.tut-hole { position: fixed; border: 2px solid var(--gold); border-radius: 12px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .68); pointer-events: none; animation: tut-pulso 1.6s ease-in-out infinite; }
@keyframes tut-pulso { 0%, 100% { outline: 4px solid rgba(212, 175, 55, 0); } 50% { outline: 4px solid rgba(212, 175, 55, .5); } }
.tut-card { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--panel); border: 1px solid var(--gold); border-radius: 14px; padding: 18px 20px; width: min(370px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; box-shadow: 0 18px 50px rgba(0, 0, 0, .6); }
/* En MÓVIL la tarjeta es una HOJA fija anclada abajo: siempre visible y con
   los botones siempre alcanzables, pase lo que pase con el elemento iluminado. */
.tut-card.abajo { left: 10px; right: 10px; top: auto; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); transform: none; width: auto; max-height: 45vh; }
.tut-card h3 { margin: 0 0 8px; font-size: 17px; }
.tut-card p { margin: 0 0 14px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.tut-num { font-size: 11px; color: var(--gold); font-weight: 700; letter-spacing: .5px; margin-bottom: 6px; }

/* Gráfico de barras por día (Inicio) — interactivo, con burbuja de detalle */
.ini-chart2 { position: relative; padding-top: 36px; }
.ini-chart2-tip {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    background: var(--panel-2); border: 1px solid var(--gold); border-radius: 8px;
    padding: 5px 11px; font-size: 12px; white-space: nowrap; pointer-events: none;
    z-index: 2; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); transition: left .15s ease;
}
.ini-chart { display: flex; align-items: flex-end; gap: 5px; height: 110px; }
.ini-chart .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; cursor: pointer; }
.ini-chart .bar {
    background: linear-gradient(180deg, var(--gold-2), var(--gold));
    opacity: .45; border-radius: 5px 5px 0 0;
    transform-origin: bottom; animation: ini-crecer .55s cubic-bezier(.2, .8, .25, 1) both;
    transition: opacity .15s, box-shadow .15s;
}
.ini-chart .col.hoy .bar { opacity: .85; }
.ini-chart .col:hover .bar, .ini-chart .col.activo .bar { opacity: 1; box-shadow: 0 0 14px rgba(212, 175, 55, .45); }
@keyframes ini-crecer { from { transform: scaleY(0); } }
.ini-chart-labels { display: flex; gap: 5px; margin-top: 6px; }
.ini-chart-labels span { flex: 1; text-align: center; font-size: 10px; color: var(--muted); min-width: 0; }

/* ============ ANIMACIONES GLOBALES ============
   Todo con transform/opacity (fluido en tablets). Las vistas que se repintan
   solas por el sondeo NO llevan animación de entrada (evita parpadeos). */

/* 1) Cambio de pestaña: la vista entra con fundido + subida sutil. */
.vista { animation: vista-entrar .22s ease both; }
@keyframes vista-entrar { from { opacity: 0; transform: translateY(8px); } }

/* 2) Paneles del Inicio en cascada (se repinta solo al abrir, es seguro). */
#ini-cuerpo > .panel { animation: panel-entrar .38s cubic-bezier(.2, .8, .25, 1) both; }
#ini-cuerpo > .panel:nth-child(1) { animation-delay: .04s; }
#ini-cuerpo > .panel:nth-child(2) { animation-delay: .1s; }
#ini-cuerpo > .panel:nth-child(3) { animation-delay: .16s; }
#ini-cuerpo > .panel:nth-child(4) { animation-delay: .22s; }
#ini-cuerpo > .panel:nth-child(5) { animation-delay: .28s; }
#ini-cuerpo > .panel:nth-child(6) { animation-delay: .34s; }
@keyframes panel-entrar { from { opacity: 0; transform: translateY(12px); } }

/* 3) Esqueletos de carga (shimmer) */
.skel { border-radius: 8px; height: 13px; margin: 10px 0; background: linear-gradient(90deg, var(--panel-2) 25%, #2c313c 45%, var(--panel-2) 65%); background-size: 220% 100%; animation: skel-brillo 1.1s linear infinite; }
.skel.t { width: 38%; height: 17px; }
.skel.g { height: 96px; }
@keyframes skel-brillo { to { background-position: -120% 0; } }

/* 4) Botones: hundimiento al pulsar y brillo en los dorados. */
.btn { transition: transform .09s ease, box-shadow .18s ease, background .15s, border-color .15s, color .15s, opacity .15s; }
.btn:active { transform: scale(.96); }
.btn:not(.sec):not(.ghost):not(.danger):hover { box-shadow: 0 0 16px rgba(212, 175, 55, .35); }

/* 5) Toast: entra deslizándose y con barra de tiempo. */
.toast { animation: toast-entrar .3s cubic-bezier(.2, .9, .3, 1.15) both; overflow: hidden; }
.toast::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: currentColor; opacity: .4; transform-origin: left; animation: toast-tiempo 2.8s linear both; }
@keyframes toast-entrar { from { opacity: 0; transform: translateX(-50%) translateY(16px) scale(.95); } to { transform: translateX(-50%); } }
@keyframes toast-tiempo { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* 6) Modales: fondo con fundido + tarjeta con escala. */
.modal-fondo { animation: fade-suave .18s ease both; backdrop-filter: blur(6px); }
.modal-card { animation: modal-entrar .22s cubic-bezier(.2, .9, .3, 1.15) both; }
@keyframes modal-entrar { from { opacity: 0; transform: scale(.94) translateY(10px); } }
@keyframes fade-suave { from { opacity: 0; } }
/* Cierre suave del modal (cerrarModalAnim añade .saliendo y espera 180 ms). */
.modal-fondo.saliendo { animation: fade-salir .18s ease both; pointer-events: none; }
.modal-fondo.saliendo .modal-card { animation: modal-salir .18s ease both; }
@keyframes fade-salir { to { opacity: 0; } }
@keyframes modal-salir { to { opacity: 0; transform: scale(.95) translateY(8px); } }

/* 8) Donut del Inicio: el anillo se dibuja hasta su valor. */
.donut-arc { transition: stroke-dasharray .9s cubic-bezier(.3, .7, .3, 1); }

/* 9) Barras horizontales (top productos, reparto por tienda): crecen en cascada. */
.barh { height: 8px; border-radius: 4px; background: var(--panel-2); border: 1px solid var(--line); overflow: hidden; }
.barh > div { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-2)); transform-origin: left; animation: barh-crecer .6s cubic-bezier(.2, .8, .25, 1) both; }
@keyframes barh-crecer { from { transform: scaleX(0); } }

/* 10-12) Pedidos "vivos": fila nueva con destello, pendientes con pulso,
   badge que salta al subir, fila que se despide al confirmarse/borrarse. */
tr.fila-nueva > td { animation: fila-flash 2.2s ease both; }
@keyframes fila-flash { 0% { background: var(--gold-soft); } 100% { background: transparent; } }
tr.fila-sale { transition: opacity .28s ease; opacity: 0; }
.pill-pend { animation: pend-pulso 1.8s ease-in-out infinite; }
@keyframes pend-pulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(194, 65, 12, .0); } 50% { box-shadow: 0 0 10px 2px rgba(194, 65, 12, .55); } }
.tab-badge.salta { animation: badge-salta .5s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes badge-salta { 35% { transform: scale(1.4); } }

/* 13) Login: puntos del PIN con rebote y sacudida si el PIN falla. */
.dot.on { animation: dot-pop .18s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes dot-pop { from { transform: scale(.4); } }
.error-shake { animation: card-shake .4s ease; }
@keyframes card-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-9px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(4px); } }

/* 14) Tutorial: el foco y la tarjeta VIAJAN de un paso al siguiente. */
.tut-hole { transition: left .32s cubic-bezier(.3, .8, .3, 1), top .32s cubic-bezier(.3, .8, .3, 1), width .32s ease, height .32s ease; }
.tut-card:not(.abajo) { transition: top .32s ease, left .32s ease; }
.tut-card .tut-cuerpo { animation: fade-suave .22s ease both; }

/* 15) Barra inferior del móvil: el icono activo sube con un pequeño rebote. */
.bottomnav .tab svg { transition: transform .22s cubic-bezier(.3, 1.8, .5, 1); }
.bottomnav .tab.active svg { transform: translateY(-2px); }

/* 16) Previsualizaciones: la imagen nueva entra con fundido (sin parpadeo). */
.preview-stage canvas, #prev-modal-stage canvas, #alb-cr-stage canvas { animation: fade-suave .22s ease both; }

/* 17) Historial: fundido al cambiar de mes. */
.hist-fade { animation: fade-suave .25s ease both; }

/* Accesibilidad: si el sistema pide reducir el movimiento, se apaga todo. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
}