/* Estilo tipo iPhone, compartido por gestión, la caja de venta y el anotador. Cada página lo enlaza DESPUÉS de su
   propio <style>, así estos colores, letras y formas mandan; lo propio de cada pantalla (tamaños, grillas) se mantiene.
   Paleta de Gastro Tecnology: azul marino #09192D (letras), naranja #E16004 (acento; #C2540A cuando lleva letras
   blancas encima, para que se lea bien) y crema #FEF7F0 (fondo). Un cliente puede cambiar el acento (MARCA_COLOR). */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root{
  --bg:#FEF7F0; --surface:#FFFFFF; --surface2:#F8EFE5; --fill:#F1E6DA; --ink:#09192D; --muted:#5C6577; --line:#EADFD2;
  --brand:#C2540A; --brand-ink:#FFFFFF; --brand-deep:#09192D; --yellow:#FFCC00;
  --good:#248A3D; --good-bg:#E3F5E8; --bad:#D70015; --bad-bg:#FDE7E9; --warn:#A05A00; --warn-bg:#FFF3D6;
  --barra:#FFFFFF; --barra-ink:#09192D;
  --vidrio:rgba(254,247,240,.82); --sombra:0 1px 2px rgba(9,25,45,.05),0 4px 16px rgba(9,25,45,.06);
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",Roboto,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,sans-serif;
  --r:14px; --fila-par:#FBF4EC;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#07111F; --surface:#0F1E33; --surface2:#172A44; --fill:#172A44; --ink:#F5EFE8; --muted:#9AA6B8; --line:#22385A;
  --brand:#F28A2E; --brand-ink:#09192D; --brand-deep:#E16004; --yellow:#FFD60A;
  --good:#30D158; --good-bg:#0F2E18; --bad:#FF6961; --bad-bg:#3A1513; --warn:#FFD60A; --warn-bg:#332A07;
  --barra:#0F1E33; --barra-ink:#F5EFE8;
  --vidrio:rgba(7,17,31,.78); --sombra:none; --fila-par:#12233A;
}}

body{background:var(--bg);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;letter-spacing:-.01em}

/* Títulos grandes, como en las apps del iPhone */
h1{font-family:var(--display);font-weight:800;font-size:32px;letter-spacing:-.025em;line-height:1.1}
h2{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.02em}
h3{letter-spacing:-.01em}
.sub{color:var(--muted)}

/* Encabezado translúcido (vidrio esmerilado) en vez del bloque rojo */
header.top,body>header{background:var(--vidrio);color:var(--ink);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 .5px 0 var(--line);border:0}
.logo small,.donde small{opacity:1;color:var(--muted)}
.top button,.top button.b,body>header button{background:var(--fill);border:0;color:var(--ink);border-radius:999px;font-weight:600}
.top a#instalar-caja{background:var(--brand);color:#fff;border-radius:999px;font-weight:600}
.estado{background:var(--fill);color:var(--ink)}
.estado.bad{background:var(--yellow);color:#1C1C1E}

/* Pestañas: los grupos como texto con ícono y las secciones como "pastillas" */
.top .tab,.tab{background:transparent;color:var(--muted);opacity:1;text-transform:none;letter-spacing:-.01em;font-weight:600;font-size:14px;border-bottom:0;border-radius:10px;padding:8px 12px}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--brand);border-bottom-color:transparent}
.top .subtab{background:var(--fill);border:0;color:var(--ink);font-weight:600}
.top .subtab[aria-selected="true"]{background:var(--ink);color:var(--bg)}

/* Tarjetas: blancas, sin borde, esquinas redondeadas (como los grupos de Ajustes del iPhone) */
.card,.panel,.kpi{background:var(--surface);border:0;border-radius:var(--r);box-shadow:var(--sombra)}
.empty{border:0;background:var(--surface);border-radius:var(--r);color:var(--muted)}
.var-box{border:0;background:var(--surface2)}
.resumen{background:var(--surface2);border-radius:12px}
.resumen .tot,.kpi .v{font-family:var(--display);font-weight:800;letter-spacing:-.02em}
.resumen .tot{font-size:clamp(19px,5.6vw,26px);white-space:nowrap}
.kpi .k,label{text-transform:none;letter-spacing:0;font-weight:600}

/* Campos de texto: relleno gris suave, sin borde */
input,select,textarea{background:var(--fill);border:0;border-radius:10px;color:var(--ink);font-family:var(--body)}
input:focus,select:focus,textarea:focus{outline:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 35%,transparent)}
:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 45%,transparent);outline-offset:2px}

/* Botones: redondeados, el principal rojo; los demás gris suave con letra roja */
.btn{border:0;border-radius:12px;background:var(--fill);color:var(--brand);font-weight:600}
.btn.primary{background:var(--brand);color:#fff}
.btn.small{border-radius:999px}
.btn:hover{filter:brightness(.97)}

/* Control segmentado del iPhone */
.seg{background:var(--fill);padding:3px;border-radius:11px;gap:2px}
.seg button{border:0;background:transparent;color:var(--ink);border-radius:9px;font-weight:600;box-shadow:none}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 1px rgba(0,0,0,.04)}
@media (prefers-color-scheme: dark){.seg button[aria-pressed="true"]{background:#636366}}

/* Tablas: separadores finos, encabezados sin mayúsculas */
th{text-transform:none;letter-spacing:0;font-size:12px;font-weight:600;border-bottom:.5px solid var(--line)}
td{border-bottom:.5px solid var(--line)}
tr.total td{border-top:1px solid var(--ink)}

/* Etiquetas y avisos */
.pill{font-weight:600;padding:3px 10px}
.msg{border-radius:12px;font-weight:500}

/* Interruptores tipo iPhone para las casillas de sí/no (las listas de tildar quedan como círculos) */
input[type=checkbox]{-webkit-appearance:none;appearance:none;width:44px!important;height:26px!important;min-width:44px;border-radius:999px;background:var(--fill);position:relative;cursor:pointer;flex:none;padding:0;margin:0;transition:background .2s;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
input[type=checkbox]::after{content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:transform .22s cubic-bezier(.3,.9,.4,1.2)}
input[type=checkbox]:checked{background:var(--good)}
input[type=checkbox]:checked::after{transform:translateX(18px)}
.tareas input[type=checkbox],.lc-item input[type=checkbox]{width:24px!important;height:24px!important;min-width:24px;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 2px var(--muted)}
.tareas input[type=checkbox]::after,.lc-item input[type=checkbox]::after{display:none}
.tareas input[type=checkbox]:checked,.lc-item input[type=checkbox]:checked{background:var(--good) 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='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/16px no-repeat;box-shadow:none}

/* Aviso flotante y ventanas: vidrio oscuro y esquinas grandes */
.toast{border-radius:14px;background:rgba(28,28,30,.92);color:#fff;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);font-weight:500}
.modal{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal .caja{border-radius:18px;border:0}

/* Celular: el menú de grupos va abajo, fijo, con íconos (barra de pestañas del iPhone) */
@media (max-width:700px){
  /* El vidrio del encabezado haría que la barra fija se quede pegada a él: en el celular el encabezado va liso. */
  header.top{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg)}
  body:has(nav.tabs:not([hidden])){padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  nav.tabs.agrupado .grupos,nav.tabs:not(.agrupado){position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:space-around;gap:0;overflow-x:auto;
    background:var(--vidrio);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 -.5px 0 var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
  nav.tabs.agrupado .grupos .tab,nav.tabs:not(.agrupado) .tab,.top nav.tabs.agrupado .grupos .tab{flex:1 0 auto;min-width:58px;flex-direction:column;gap:3px;padding:4px 6px;font-size:10.5px;font-weight:600;letter-spacing:0;border-radius:10px}
  .top nav.tabs.agrupado .grupos .ico,nav.tabs .tab .ico{display:block;width:24px;height:24px}
  .grupos .largo{display:none}.grupos .corto{display:inline}
  .subtabs{padding-top:0}
  .toast{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .guardar-fijo{bottom:calc(64px + env(safe-area-inset-bottom,0px))}
}

/* Encabezado en el celular: logo más chico y botones compactos, todo en una fila */
@media (max-width:700px){.logo img{height:46px}.logo small{font-size:10.5px;letter-spacing:.06em}.top .tools{flex-wrap:nowrap;gap:6px}.top button,.top a#instalar-caja{padding:7px 10px}.top .wrap{gap:8px}}

/* Caja de venta: botones de productos y totales con la letra del iPhone */
.tile{border:0;box-shadow:var(--sombra);border-radius:16px}
.tile .ini{font-weight:800;letter-spacing:-.03em}
.tile.cat .ini{font-size:18px;overflow-wrap:anywhere;padding:0 2px}
.tile .n{text-transform:none;font-weight:700;font-size:12px}
.tile.volver{border:2px dashed var(--line);box-shadow:none}
.cats{background:var(--vidrio);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 4px 20px rgba(0,0,0,.12),0 0 0 .5px var(--line)}
.cats button{letter-spacing:0;font-weight:700}
.cobrar{font-weight:800;font-size:26px;letter-spacing:-.02em;box-shadow:none;border-radius:16px}
.total-grande{font-weight:800;font-size:38px;letter-spacing:-.03em}
.vuelto strong,.pie-movil .t strong{font-weight:800;letter-spacing:-.02em}
.teclado button{border:0;background:var(--fill);border-radius:50%;aspect-ratio:1/1;max-width:84px;justify-self:center;width:100%;font-weight:500;font-size:28px}
.puntos i{border-width:1.5px}
/* Para llevar / Mesa / Delivery: control segmentado */
.tipos{border-bottom:.5px solid var(--line)}
.tipos button{border:0;background:var(--fill);border-radius:10px;font-weight:700}
.tipos button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.tipos.falta button{box-shadow:inset 0 0 0 2px var(--warn)}
/* Cobro: medios de pago, montos rápidos, cantidades y cajeros */
.medios button,.cajeros button{border:0;background:var(--surface);box-shadow:var(--sombra);border-radius:16px}
.medios button[aria-pressed="true"]{box-shadow:0 0 0 2.5px var(--brand)}
.rapidos button,.cant button{border:0;background:var(--fill);border-radius:999px}
/* Nombres de categorías: no cortar las palabras por la mitad; en pantallas chicas, letra un poco menor */
.tile.cat .ini{overflow-wrap:normal;word-break:normal;font-size:clamp(13px,3.7vw,18px)}
/* Pantalla de ingreso: secciones y locales como filas de una lista del iPhone, con flechita */
.locales{gap:8px}
.locales button,.locales button.admin{border:0;border-style:solid;background:var(--surface2);color:var(--ink);display:flex;align-items:center;gap:12px;padding:15px 16px;font-weight:600;border-radius:14px}
.locales button .ico{margin:0;width:22px;height:22px}
.locales button::after{content:"›";margin-left:auto;color:var(--muted);font-size:24px;line-height:1;font-weight:400}

/* iPhone: una barra fija adentro de un encabezado "pegajoso" se desplaza al bajar la pantalla (falla de Safari).
   En el celular el encabezado ya no se queda pegado arriba, así la barra de abajo queda siempre fija en su lugar. */
@media (max-width:700px){
  header.top{position:relative}
  .inv-cat{top:0}
  .inv-row{scroll-margin-top:60px}
}

/* Reporte de productos: cada producto con sus variantes debajo */
table.prod-var tbody tr.grupo > td{border-top:1px solid var(--line);background:var(--surface)!important}
table.prod-var tbody tr.variante > td{background:var(--surface)!important;font-size:.92em}
table.prod-var tbody tr.variante > td:first-child{padding-left:28px}
table.prod-var tbody tr.variante > td:first-child::before{content:"↳ ";color:var(--muted)}