/* ============================================================
   IKURA Resto Bar — identidad propia del panel: «Izakaya Neón Digital».
   Bar japonés de noche: fondo grafito, naranja IKURA que brilla como neón,
   tarjetas angulares con «corte sashimi» (franja de color por estado),
   olas seigaiha muy tenues y rombos para las mesas.
   Se carga al FINAL de index.html (reemplaza a panel-claro.css). Solo pantalla:
   la impresión térmica (thermal.css / @media print de styles.css) no se toca.
   ============================================================ */

:root {
  color-scheme: dark;

  /* Superficies */
  --bg: #111114;
  --panel: #1C1C21;
  --panel-2: #26262D;
  --card: #1C1C21;
  --card-hi: #26262D;
  --campo: #16161A;
  --borde: #2A2A32;
  --borde-hi: #3A3A44;

  /* Texto (AA ≥ 4.5:1 sobre #1C1C21 y #26262D) */
  --texto: #F0EDE8;
  --texto-2: #A3A1A9;
  --texto-3: #8E8C95;

  /* Acento IKURA */
  --oro: #F26B1D;
  --oro-suave: #FF8A45;
  --oro-oscuro: #C2510F;
  --oro-trans: rgba(242, 107, 29, 0.14);
  --neon: 0 0 20px rgba(242, 107, 29, 0.25);

  /* Estados: color de franja / color de texto legible sobre oscuro */
  --st-nuevo: #3B82F6;      --st-nuevo-txt: #8AB4FB;
  --st-cocina: #F59E0B;     --st-cocina-txt: #FBBF24;
  --st-listo: #22C55E;      --st-listo-txt: #4ADE80;
  --st-pagado: #6B7280;     --st-pagado-txt: #A3A1A9;
  --st-alerta: #EF4444;     --st-alerta-txt: #F87171;
  /* Insignia con texto blanco (pedidos activos en el riel y el dock): #fff sobre #2563EB = 5,17:1 (sobre --st-nuevo, 3,68:1) */
  --st-nuevo-fondo: #2563EB;

  --verde: #4ADE80;
  --verde-suave: rgba(34, 197, 94, 0.14);
  --rojo: #F87171;
  --rojo-suave: rgba(239, 68, 68, 0.14);
  --dorado: #F7B267;
  --dorado-suave: rgba(247, 178, 103, 0.14);
  --dorado-trans: rgba(247, 178, 103, 0.12);

  --radio: 8px;
  --radio-ch: 8px;
  --sombra: 0 12px 32px rgba(0, 0, 0, 0.5);
  --rail: 64px;
  --rail-abierto: 212px;

  --f-titulo: 'Rajdhani', 'DM Sans', system-ui, sans-serif;
  --f-texto: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-num: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Olas seigaiha (SVG en línea, sin imágenes externas) */
  --seigaiha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' viewBox='0 0 32 16'%3E%3Cg fill='none' stroke='%23F26B1D' stroke-width='1.2'%3E%3Cpath d='M-16 8a16 16 0 0 1 32 0M-12 8a12 12 0 0 1 24 0M-8 8a8 8 0 0 1 16 0M16 8a16 16 0 0 1 32 0M20 8a12 12 0 0 1 24 0M24 8a8 8 0 0 1 16 0'/%3E%3Cpath d='M0 16a16 16 0 0 1 32 0M4 16a12 12 0 0 1 24 0M8 16a8 8 0 0 1 16 0M12 16a4 4 0 0 1 8 0'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
html, body { background: var(--bg); }
body { background-image: none; color: var(--texto); font-family: var(--f-texto); font-size: 15.5px; }
h1, h2, h3, h4,
.encabezado .saludo h2, .modal-cab h3, .ik-mesas-cab h2, .report-heading h2, .puerta h1 {
  font-family: var(--f-titulo); font-weight: 700; letter-spacing: 0.02em;
}
:focus-visible { outline: 2px solid #FF9A5C; outline-offset: 2px; }
::selection { background: rgba(242, 107, 29, 0.35); color: #fff; }
::-webkit-scrollbar-thumb { background: var(--borde-hi); border-radius: 4px; }

/* Números, precios y totales: Space Mono con cifras tabulares */
.num, .pedido .num, .pedido .total, .kpi .valor, .caja-monto .valor, .prod .precio, .mov .monto,
.item-menu-fila .precio, .cat-monto, .cat-pct, .comp-val, .fila-info b, .pin-dots, .ik-mesa-card .tot,
.ik-cuenta b, .ik-cobro-total b, .ik-ronda li > b, .input-monto input, .input-monto .peso, .ped-tab .n,
.kanban-col-header .badge, .nav-item .badge, .barra-tabs a .badge, .edad.reloj, .ik-rombo b {
  font-family: var(--f-num); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}

/* ---------- Campos ---------- */
input, textarea, select {
  background: var(--campo); border: 1px solid var(--borde); border-radius: var(--radio-ch); color: var(--texto);
}
input:hover, textarea:hover, select:hover { border-color: var(--borde-hi); }
input:focus, textarea:focus, select:focus { border-color: var(--oro); box-shadow: 0 0 0 3px rgba(242, 107, 29, 0.2); }
input::placeholder, textarea::placeholder { color: var(--texto-3); } /* 5,44:1 sobre --campo */
input[type="checkbox"], input[type="radio"] { accent-color: var(--oro); }
.campo label { color: var(--texto-2); letter-spacing: 0.08em; }

/* ---------- Botones ---------- */
.btn {
  border-radius: var(--radio-ch); background: transparent; color: var(--texto);
  border: 1px solid var(--borde-hi); font-family: var(--f-texto); font-weight: 700;
  transition: border-color .15s, box-shadow .15s, background .15s, transform .1s;
}
.btn:hover { border-color: var(--oro); }
.btn:focus-visible { border-color: var(--oro); box-shadow: var(--neon); }
.btn.primario, .fab {
  background: var(--oro); color: #111114; border: 1px solid var(--oro); box-shadow: none;
}
.btn.primario:hover, .btn.primario:focus-visible, .fab:hover, .fab:focus-visible {
  background: #FF7A2E; border-color: #FF7A2E; box-shadow: var(--neon);
}
.btn.peligro { background: var(--rojo-suave); color: var(--rojo); border-color: rgba(239, 68, 68, 0.45); }
.btn.fantasma { background: transparent; border-color: transparent; }
.btn.fantasma:hover { border-color: var(--borde-hi); }
.fab { border-radius: 14px; font-weight: 700; }
.icon-btn { border-radius: var(--radio-ch); background: var(--panel-2); border-color: var(--borde); color: var(--texto-2); }
.icon-btn:not(:disabled):hover { color: var(--texto); border-color: var(--borde-hi); }
/* Deshabilitado (p. ej. ◀ en la primera foto o mientras se sube una): que no parezca activo.
   Sin pointer-events:none para que el title siga explicando por qué (un botón deshabilitado ya ignora el clic);
   por eso tampoco se ilumina al pasar el mouse, ni en rojo (.icon-btn.rojo:hover de styles.css). */
.icon-btn:disabled { opacity: 0.35; cursor: default; }
.icon-btn.rojo:disabled:hover { color: var(--texto-2); border-color: var(--borde); }
.modal-cerrar { border-radius: var(--radio-ch); background: var(--panel-2); border-color: var(--borde); color: var(--texto-2); }

/* Chips y pestañas */
.chip, .chip-sel, .ped-tab, .mg-cat, .sug-prod, .chips-ped .edad, .tag {
  background: var(--panel-2); border-color: var(--borde); color: var(--texto-2);
}
.chip, .chip-sel { border-width: 1px; }
.chip.activo, .chip-sel.activo, .ped-tab.activo {
  background: var(--oro-trans); border-color: var(--oro); color: #FF9A5C;
}
.ped-tab { border-radius: var(--radio-ch) !important; border-width: 1px; }
.ped-tab .n { background: rgba(255, 255, 255, 0.06); }
.ped-tab.activo .n { background: rgba(242, 107, 29, 0.22); color: #FFB27D; }
.segmentado { background: var(--campo); border: 1px solid var(--borde); border-radius: var(--radio-ch); }
.segmentado button { border-radius: 6px; }
.segmentado button.activo.neutro { background: var(--oro-trans); color: #FF9A5C; }
.tag { border-radius: 6px; }
.tag.persona { color: #111114; }
.chip-tog:active, .chip-del:active { background: rgba(255, 255, 255, 0.08); }
/* Texto blanco sobre rojo: el --rojo del tema (#F87171) es claro para texto blanco (2,77:1); #DC2626 da 4,83:1 */
.chip-del.confirmando, .btn.confirmando, .stk-reponer h3 span, .nav-item .stk-badge, .barra-tabs a .stk-badge {
  background: #DC2626 !important; color: #fff !important;
}
.interruptor { background: var(--borde-hi); }
.interruptor.on { background: rgba(242, 107, 29, 0.45); }
.interruptor.on::after { background: var(--oro); box-shadow: 0 0 10px rgba(242, 107, 29, 0.5); }

/* ---------- Tarjetas: angulares, borde fino, sin sombras difusas ---------- */
.tarjeta, .kpi, .prod, .mov, .cli-card, .item-menu-fila, .linea-reg, .orders-search, .ik-cat, .cp-fila,
.ik-mesa, .print-details, .extra-detail, .avp, .opc-fila, .stk-reponer {
  background: var(--card); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: none;
}
.mov, .item-menu-fila, .prod { background: var(--panel-2); }
.tarjeta h3 { font-family: var(--f-titulo); font-size: 0.86rem; letter-spacing: 0.14em; color: var(--texto-2); }
.tarjeta h3 svg { color: var(--oro); }
.kpi .icono { border-radius: 6px; }
.kpi.oro .valor { color: var(--dorado); }
.meta-barra { background: rgba(255, 255, 255, 0.07); border-radius: 2px; }
.meta-barra > div, .comp-bar, .cat-barra i { border-radius: 2px; }
.cat-barra { background: var(--campo); border-color: var(--borde); border-radius: 3px; }
.comp-antes { border-top-color: var(--borde); }
.grafico-svg { background: transparent; }
.cli-card.fav { border-color: var(--oro); background: var(--oro-trans); }
.pill { border-radius: 6px; font-family: var(--f-titulo); letter-spacing: 0.12em; font-size: 0.78rem; }
.pill.linea { border-color: rgba(34, 197, 94, 0.4); }
.pill.fuera { border-color: rgba(239, 68, 68, 0.45); }
.foto-prod { border-radius: 6px !important; background: var(--campo); border-color: var(--borde); }
.vacio .emoji { filter: grayscale(0.2); }

/* ---------- Encabezado de cada vista con olas seigaiha ---------- */
.encabezado, .ik-mesas-cab, .report-heading { position: relative; padding-bottom: 16px; }
.encabezado::after, .ik-mesas-cab::after, .report-heading::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 16px;
  background-image: var(--seigaiha); background-size: 32px 16px; opacity: 0.1; pointer-events: none;
}
.encabezado .saludo h2 { font-size: 1.85rem; text-transform: none; }
.encabezado .saludo h2 em { color: var(--oro); text-shadow: 0 0 16px rgba(242, 107, 29, 0.35); }
.encabezado .saludo p { font-family: var(--f-titulo); letter-spacing: 0.2em; color: var(--texto-3); }

/* ---------- Pedidos ---------- */
.pedido {
  position: relative; background: var(--card); border: 1px solid var(--borde);
  border-left: 3px solid var(--st, var(--borde-hi)); border-radius: var(--radio); box-shadow: none;
}
.pedido[data-estado="Recibido"], .pedido[data-estado="Confirmado"] { --st: var(--st-nuevo); }
.pedido[data-estado="Preparando"] { --st: var(--st-cocina); }
.pedido[data-estado="Listo"], .pedido[data-estado="En-reparto"] { --st: var(--st-listo); }
.pedido[data-estado="Entregado"] { --st: var(--st-pagado); }
.pedido[data-estado="Cancelado"] { --st: var(--st-alerta); }
.pedido .cab { align-items: center; }
.pedido .num {
  font-size: 2.1rem; line-height: 1; color: var(--oro); letter-spacing: -0.03em;
  text-shadow: 0 0 18px rgba(242, 107, 29, 0.35); margin-right: 2px;
}
.pedido .items { color: var(--texto); opacity: 0.88; }
.pedido .total { color: var(--texto); font-size: 1.15rem; }
.pedido.nuevo { border-color: rgba(59, 130, 246, 0.55); border-left-color: var(--st-nuevo); animation: pulso-azul 1.8s ease-out infinite; }
@keyframes pulso-azul { 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, .45); } 70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); } 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); } }
.acciones-pedido .btn { min-height: 44px; }

/* Etiquetas de estado */
.estado-p { border-radius: 4px; font-family: var(--f-titulo); font-size: 0.74rem; letter-spacing: 0.1em; }
.estado-Recibido, .estado-Confirmado { background: rgba(59, 130, 246, 0.16); color: var(--st-nuevo-txt); }
.estado-Preparando { background: rgba(245, 158, 11, 0.16); color: var(--st-cocina-txt); }
.estado-Listo, .estado-En-reparto, .estado-Confirmada { background: rgba(34, 197, 94, 0.15); color: var(--st-listo-txt); }
.estado-Entregado, .estado-Completada { background: rgba(107, 114, 128, 0.2); color: var(--st-pagado-txt); }
.estado-Cancelado, .estado-Rechazada, .estado-Cancelada { background: rgba(239, 68, 68, 0.15); color: var(--st-alerta-txt); }
.estado-Pendiente { background: var(--dorado-trans); color: var(--dorado); }

/* Reloj del pedido (⏱ 12 min): verde → ámbar (15 min) → rojo (25 min) */
.chips-ped .edad { border-radius: 6px; }
.chips-ped .edad.verde { color: var(--st-listo-txt); border-color: rgba(34, 197, 94, 0.4); }
.chips-ped .edad.oro { color: var(--st-cocina-txt); border-color: rgba(245, 158, 11, 0.55); background: rgba(245, 158, 11, 0.1); }
.chips-ped .edad.rojo { color: #FFD1D1; border-color: rgba(239, 68, 68, 0.7); background: rgba(239, 68, 68, 0.2); }

/* Tablero de pedidos (Nuevos / Cocinando / Listos) */
.kanban-col { background: rgba(255, 255, 255, 0.015); border: 1px solid var(--borde); border-radius: var(--radio); border-top: 3px solid var(--col, var(--borde-hi)); }
.kanban-col:nth-child(1) { --col: var(--st-nuevo); }
.kanban-col:nth-child(2) { --col: var(--st-cocina); }
.kanban-col:nth-child(3) { --col: var(--st-listo); }
.kanban-col-header { font-family: var(--f-titulo); text-transform: uppercase; letter-spacing: 0.14em; font-size: 1.05rem; border-bottom: 1px solid var(--borde); }
.kanban-col-header span.badge { background: rgba(255, 255, 255, 0.06); color: var(--texto); border-radius: 4px; }

/* Etiqueta de mesa en la tarjeta del pedido */
.tag.tag-mesa { display: inline-flex; align-items: center; gap: 10px; padding: 3px 10px 3px 6px; color: var(--texto); border-color: rgba(242, 107, 29, 0.4); }

/* ---------- Rombo de mesa ---------- */
.ik-rombo {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin: 5px; transform: rotate(45deg);
  border: 2px solid var(--oro); border-radius: 3px; background: rgba(242, 107, 29, 0.08);
  box-shadow: 0 0 12px rgba(242, 107, 29, 0.25); font-style: normal;
}
.ik-rombo b { transform: rotate(-45deg); font-size: 0.82rem; color: var(--texto); line-height: 1; }
.ik-rombo.ik-rombo-sm { width: 18px; height: 18px; margin: 3px; border-width: 1.5px; box-shadow: none; }
.ik-rombo.ik-rombo-sm b { font-size: 0.62rem; }

/* ---------- Mesas (tablero) ---------- */
.ik-mesa-card {
  background: var(--card); border: 1px solid var(--borde); border-left: 3px solid var(--st, var(--borde-hi));
  border-radius: var(--radio); box-shadow: none; transition: border-color .15s, box-shadow .15s, transform .1s;
}
.ik-mesa-card:hover { border-color: var(--borde-hi); border-left-color: var(--st, var(--borde-hi)); }
.ik-mesa-card:focus-visible { box-shadow: var(--neon); }
.ik-mesa-top { display: flex; align-items: center; gap: 10px; }
.ik-mesa-card .nom { font-family: var(--f-titulo); font-size: 1.35rem; color: var(--texto); }
.ik-mesa-card .tot { color: var(--texto); font-size: 1.2rem; }
.ik-mesa-card .det { color: var(--texto-2); }
.ik-mesa-card .est { border-radius: 4px; font-family: var(--f-titulo); letter-spacing: 0.08em; font-size: 0.8rem; background: rgba(255, 255, 255, 0.06); color: var(--texto-2); }
/* ikura.css pinta todo el borde por estado: aquí solo la franja izquierda lleva el color */
.ik-mesa-card.libre, .ik-mesa-card.cocina, .ik-mesa-card.lista, .ik-mesa-card.cobrar, .ik-mesa-card.pagada {
  border-color: var(--borde); border-left-color: var(--st);
}
.ik-mesa-card.libre { --st: var(--borde-hi); }
.ik-mesa-card.libre .est { background: rgba(255, 255, 255, 0.05); color: var(--texto-2); }
.ik-mesa-card.libre .ik-rombo { border-color: var(--borde-hi); background: transparent; box-shadow: none; }
.ik-mesa-card.nuevo { --st: var(--st-nuevo); border-color: rgba(59, 130, 246, 0.5); background: var(--card); animation: pulso-azul 1.6s ease-out infinite; }
.ik-mesa-card.nuevo .est { background: rgba(59, 130, 246, 0.18); color: var(--st-nuevo-txt); }
.ik-mesa-card.cocina { --st: var(--st-cocina); background: var(--card); }
.ik-mesa-card.cocina .est { background: rgba(245, 158, 11, 0.16); color: var(--st-cocina-txt); }
.ik-mesa-card.lista { --st: var(--st-listo); background: var(--card); }
.ik-mesa-card.lista .est { background: rgba(34, 197, 94, 0.15); color: var(--st-listo-txt); }
.ik-mesa-card.cobrar { --st: var(--oro); background: var(--card); }
.ik-mesa-card.cobrar .est { background: var(--oro-trans); color: #FF9A5C; }
.ik-mesa-card.pagada { --st: var(--st-pagado); }
.ik-mesa-card.pagada .est { background: rgba(107, 114, 128, 0.2); color: var(--st-pagado-txt); }
.ik-config-mesas > summary { color: var(--texto-2); }
.ik-mesa { background: var(--card); }

/* Detalle y cobro de una mesa */
.ik-ronda { background: var(--panel-2); border-color: var(--borde); border-radius: var(--radio); }
.ik-ronda li { border-bottom-color: var(--borde); }
.ik-origen, .ik-grupo-menu { color: #FF9A5C; }
.ik-cuenta, .ik-cobro-total { background: rgba(242, 107, 29, 0.07); border: 1px solid rgba(242, 107, 29, 0.32); border-radius: var(--radio); }
.ik-cuenta .pend b, .ik-cobro-total b { color: var(--oro); text-shadow: 0 0 14px rgba(242, 107, 29, 0.3); }
.ik-metodos button { background: var(--panel-2); color: var(--texto); border: 1px solid var(--borde); border-radius: var(--radio); }
.ik-metodos button.activo { background: var(--oro-trans); border-color: var(--oro); color: #FF9A5C; box-shadow: var(--neon); }
.ik-flechas button, .ik-orden-prod button { background: var(--panel-2); border-color: var(--borde); border-radius: 6px; }
.ik-flechas button:not(:disabled):active, .ik-orden-prod button:not(:disabled):active { color: #111114; }

/* ---------- Modales y hojas ---------- */
.modal-fondo { background: rgba(8, 8, 10, 0.74); }
.modal {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 12px 12px 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5);
}
.modal-cab { position: relative; padding-bottom: 12px; border-bottom: 1px solid var(--borde); }
.modal-cab h3 { font-size: 1.35rem; }
.fila-info, .ajuste-fila { border-bottom-color: var(--borde); }
.order-save-bar { background: var(--panel); }
/* Armador de productos (opciones) dentro del panel: superficies del tema en vez del café */
.modal:has(.duo-builder) { background: var(--panel); color: var(--texto); }
.modal:has(.duo-builder) .campo input { background: var(--campo); color: var(--texto); }
.modal .duo-builder { color: var(--texto); }
.modal .duo-option { background: var(--panel-2); border-color: var(--borde); border-radius: var(--radio-ch); }
.modal .duo-option.selected { background: var(--oro-trans); border-color: var(--oro); }
.modal .duo-option small, .modal .duo-section > p, .modal .duo-section h4 small, .modal .duo-breakdown small { color: var(--texto-2); }
.modal .duo-quantity button, .modal .duo-builder-close { background: var(--panel-2); border-color: var(--borde-hi); color: #FF9A5C; }
.modal .duo-breakdown { background: var(--panel); border-color: var(--borde); }
.modal .duo-extras { background: var(--panel-2); border-color: var(--borde); }

/* ---------- Toast y avisos ---------- */
#toast {
  background: var(--panel-2); color: var(--texto); border: 1px solid var(--borde-hi);
  border-left: 3px solid var(--st-listo); border-radius: var(--radio); box-shadow: var(--sombra);
  z-index: 450; /* sobre el fondo de los modales (400): los errores de un modal se leen; bajo #bannerConexion (500) */
}
#toast.error { border-color: rgba(239, 68, 68, 0.55); border-left-color: var(--st-alerta); }
#bannerConexion { background: #2A1416; color: #FFD7D7; border-bottom: 2px solid var(--st-alerta); }
/* Centrado con left:50% solo dispone de medio ancho: sin esto el texto se parte en 4 líneas en el celular */
#bannerNuevos { width: max-content; }
#bannerNuevos .bn-main { background: var(--oro); color: #111114; border-radius: 10px; box-shadow: 0 0 24px rgba(242, 107, 29, 0.45), 0 8px 24px rgba(0, 0, 0, 0.5); }
#bannerNuevos .bn-mute { background: var(--panel-2); border-color: var(--borde-hi); border-radius: 10px; }
html body .prn-aviso { background: #2A1416; color: #FFD7D7; border: 1px solid var(--st-alerta); border-radius: 10px; box-shadow: 0 0 18px rgba(239, 68, 68, 0.3); }
.stock-warning { border-color: var(--st-cocina); background: rgba(245, 158, 11, 0.08); }
.print-preview { background: #2A2A32; border-radius: var(--radio); } /* el ticket adentro sigue blanco */

/* ---------- Puerta (¿quién soy?) y PIN ---------- */
.puerta {
  background: var(--bg);
  background-image: radial-gradient(600px 360px at 50% -6%, rgba(242, 107, 29, 0.16), transparent 65%);
}
.puerta::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; pointer-events: none;
  background-image: var(--seigaiha); background-size: 32px 16px; opacity: 0.08;
  -webkit-mask-image: linear-gradient(transparent, #000); mask-image: linear-gradient(transparent, #000);
}
.puerta h1 { font-size: 2.2rem; text-transform: uppercase; letter-spacing: 0.08em; }
.puerta h1 em { color: var(--oro); text-shadow: 0 0 22px rgba(242, 107, 29, 0.55); }
.logo-marca { border-radius: 10px; background: #0B0B0D; border: 1.5px solid var(--oro); box-shadow: 0 0 16px rgba(242, 107, 29, 0.25); }
.puerta .logo-marca { border-radius: 16px; }
.btn-persona { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); }
.btn-persona:hover, .btn-persona:focus-visible { border-color: var(--oro); box-shadow: var(--neon); }
.btn-persona span { font-family: var(--f-titulo); letter-spacing: 0.14em; }
.avatar { border-radius: 8px; color: #111114; }
.pin-dots { color: var(--oro); text-shadow: 0 0 14px rgba(242, 107, 29, 0.5); }
.pin-teclado button {
  background: var(--panel-2); border: 1px solid var(--borde); border-radius: var(--radio);
  color: var(--texto); font-family: var(--f-num); box-shadow: none;
}
.pin-teclado button:hover { border-color: var(--borde-hi); }
.pin-teclado button:active { background: var(--oro); color: #111114; box-shadow: var(--neon); }
.pin-teclado #pinOK { color: var(--oro); }

/* ---------- Varios módulos ---------- */
.order-extras { background: rgba(34, 197, 94, 0.07); }
.qr-marco { border-color: var(--oro); border-radius: 10px; }
.cp-vista, .cp-mini { border-radius: var(--radio); }
/* Carta pública: fotos de la galería que no subieron (6,1:1 sobre la tarjeta) */
.cp-aviso { margin-top: 10px; font-size: 0.84rem; line-height: 1.45; color: var(--st-alerta-txt); }
.sug-prod:hover { border-color: var(--oro); }
.chip-mg.medio { color: var(--dorado); border-color: rgba(247, 178, 103, 0.4); background: var(--dorado-suave); }

/* ============================================================
   NAVEGACIÓN
   ============================================================ */

/* Botón para mostrar los nombres del riel (iPad no tiene «hover») */
.rail-toggle { display: none; }

/* ---------- iPad y escritorio (≥ 768 px): riel lateral de íconos ----------
   Un iPhone horizontal también llega a 768 px y, con viewport-fit=cover, deja la muesca a un costado:
   el riel, el contenido y el botón + suman los márgenes seguros (env(safe-area-inset-*)). */
@media (min-width: 768px) {
  .layout { padding-left: calc(var(--rail) + env(safe-area-inset-left)); }
  .lateral {
    display: flex; position: fixed; left: 0; top: 0; bottom: 0; z-index: 90;
    width: calc(var(--rail) + env(safe-area-inset-left)); height: 100vh; height: 100dvh;
    padding: 12px 0 calc(10px + env(safe-area-inset-bottom)) env(safe-area-inset-left);
    background: var(--panel); border-right: 1px solid var(--borde);
    overflow: hidden; transition: width .18s ease, box-shadow .18s ease;
  }
  /* Fijado con el botón ›/‹: empuja el contenido en vez de taparlo */
  body.rail-abierto .lateral { width: calc(var(--rail-abierto) + env(safe-area-inset-left)); box-shadow: none; }
  body.rail-abierto .layout { padding-left: calc(var(--rail-abierto) + env(safe-area-inset-left)); }
  .barra-tabs, .top-movil { display: none !important; }
  /* Abajo queda libre el botón + (60 px a 28 px del borde) y un margen: no tapa el final de la lista */
  .contenido { padding: 24px max(28px, env(safe-area-inset-right)) calc(104px + env(safe-area-inset-bottom)) 28px; }
  .fab { right: calc(28px + env(safe-area-inset-right)); bottom: calc(28px + env(safe-area-inset-bottom)); width: 60px; height: 60px; }
  #toast { bottom: 40px; }

  .logo-bloque { padding: 0 12px 10px; gap: 12px; min-height: 52px; }
  .lateral .logo-marca { width: 40px; height: 40px; font-size: 0.72rem; }
  .logo-texto { min-width: 0; overflow: hidden; }
  .logo-texto h1 { font-family: var(--f-titulo); font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .logo-texto p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .rail-toggle {
    display: flex; align-items: center; justify-content: center; flex: none;
    width: 40px; height: 32px; margin: 0 12px 6px; border-radius: 6px;
    color: var(--texto-2); border: 1px solid var(--borde); background: transparent;
  }
  .rail-toggle:hover { color: var(--texto); border-color: var(--borde-hi); }
  .rail-toggle svg { width: 18px; height: 18px; transition: transform .18s; }
  body.rail-abierto .rail-toggle svg { transform: rotate(180deg); }

  .nav { gap: 2px; scrollbar-width: none; overflow-x: hidden; }
  .nav::-webkit-scrollbar { display: none; }
  .nav-etiqueta {
    font-family: var(--f-titulo); font-size: 0.72rem; letter-spacing: 0.2em; color: var(--texto-3);
    padding: 12px 18px 4px; white-space: nowrap;
  }
  .nav-item {
    position: relative; gap: 14px; padding: 11px 0 11px 18px; min-height: 46px;
    border-radius: 0; border-left: 3px solid transparent; color: var(--texto-2); white-space: nowrap;
  }
  .nav-item svg { width: 22px; height: 22px; stroke-width: 1.8; }
  .nav-item:hover { background: rgba(255, 255, 255, 0.04); color: var(--texto); }
  .nav-item.activo {
    background: linear-gradient(90deg, rgba(242, 107, 29, 0.16), transparent 85%);
    border-left-color: var(--oro); color: var(--texto);
    box-shadow: inset 8px 0 14px -10px rgba(242, 107, 29, 0.9);
  }
  .nav-item.activo svg { color: var(--oro); filter: drop-shadow(0 0 6px rgba(242, 107, 29, 0.6)); }
  .nav-item .badge {
    background: var(--st-nuevo-fondo); color: #fff; border-radius: 4px; min-width: 20px; height: 20px; font-size: 0.68rem;
    margin-left: auto; margin-right: 12px;
  }
  .lateral-pie { border-top-color: var(--borde); padding: 10px 8px 0; margin-top: 8px; }
  .usuario-chip { background: transparent; border-color: transparent; padding: 6px; gap: 10px; border-radius: var(--radio-ch); }
  .usuario-chip:hover { border-color: var(--borde-hi); }
  .usuario-chip .info b, .usuario-chip .info span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Plegado (lo normal): solo íconos; lo que sobra se oculta, no se aprieta.
     Estas reglas no usan :hover ni :has(): en pantalla táctil el :hover queda pegado tras un toque, y un
     navegador sin :has() descartaría la regla entera (rótulos cortados, insignias fuera de vista).
     El riel se abre con las reglas «abierto» de más abajo. */
  .lateral .logo-texto, .lateral .nav-item > span:not(.badge),
  .lateral .usuario-chip .info, .lateral .usuario-chip .cambiar { display: none; }
  .lateral .nav-etiqueta { font-size: 0; padding: 0; height: 1px; margin: 8px 14px; background: var(--borde); }
  .lateral .nav-item .badge {
    position: absolute; top: 4px; left: 34px; margin: 0; min-width: 18px; height: 18px; padding: 0 4px; font-size: 0.62rem;
  }
  /* Abierto con el botón ›/‹ (en toda pantalla, también táctil) */
  body.rail-abierto .lateral .logo-texto, body.rail-abierto .lateral .usuario-chip .info { display: block; }
  body.rail-abierto .lateral .nav-item > span:not(.badge), body.rail-abierto .lateral .usuario-chip .cambiar { display: inline; }
  body.rail-abierto .lateral .nav-etiqueta { font-size: 0.72rem; padding: 12px 18px 4px; height: auto; margin: 0; background: none; }
  body.rail-abierto .lateral .nav-item .badge { position: static; margin: 0 12px 0 auto; min-width: 20px; height: 20px; padding: 0 7px; font-size: 0.68rem; }

  .modal-fondo { align-items: center; padding: 20px; }
  .modal { border-radius: 12px; }
}

/* Abierto al pasar el mouse: solo con mouse o trackpad. En iPad y tablets el :hover queda pegado tras tocar
   un ícono (o el mismo ›/‹) y el riel seguiría ancho sobre el contenido: ahí lo abre solo el botón ›/‹. */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .lateral:hover { width: calc(var(--rail-abierto) + env(safe-area-inset-left)); box-shadow: 16px 0 40px rgba(0, 0, 0, 0.55); }
  .lateral:hover .logo-texto, .lateral:hover .usuario-chip .info { display: block; }
  .lateral:hover .nav-item > span:not(.badge), .lateral:hover .usuario-chip .cambiar { display: inline; }
  .lateral:hover .nav-etiqueta { font-size: 0.72rem; padding: 12px 18px 4px; height: auto; margin: 0; background: none; }
  .lateral:hover .nav-item .badge { position: static; margin: 0 12px 0 auto; min-width: 20px; height: 20px; padding: 0 7px; font-size: 0.68rem; }
}

/* Abierto mientras el teclado (Tab) recorre el riel. Va dentro de @supports: un navegador sin :has() ignora
   solo este bloque y el riel se sigue viendo plegado y ordenado. */
@supports selector(:has(a)) {
  @media (min-width: 768px) {
    .lateral:has(:focus-visible) { width: calc(var(--rail-abierto) + env(safe-area-inset-left)); box-shadow: 16px 0 40px rgba(0, 0, 0, 0.55); }
    .lateral:has(:focus-visible) .logo-texto, .lateral:has(:focus-visible) .usuario-chip .info { display: block; }
    .lateral:has(:focus-visible) .nav-item > span:not(.badge), .lateral:has(:focus-visible) .usuario-chip .cambiar { display: inline; }
    .lateral:has(:focus-visible) .nav-etiqueta { font-size: 0.72rem; padding: 12px 18px 4px; height: auto; margin: 0; background: none; }
    .lateral:has(:focus-visible) .nav-item .badge { position: static; margin: 0 12px 0 auto; min-width: 20px; height: 20px; padding: 0 7px; font-size: 0.68rem; }
  }
}

/* ---------- Celular (< 768 px): dock flotante ---------- */
@media (max-width: 767px) {
  .top-movil {
    background: rgba(17, 17, 20, 0.92); border-bottom-color: var(--borde);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  }
  .top-movil b { font-family: var(--f-titulo); font-size: 1.1rem; letter-spacing: 0.08em; text-transform: uppercase; }
  .barra-tabs {
    display: flex; left: 50%; right: auto; bottom: calc(16px + env(safe-area-inset-bottom));
    transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px);
    justify-content: flex-start; gap: 2px; padding: 6px;
    background: rgba(28, 28, 33, 0.92); border: 1px solid var(--borde); border-radius: 28px;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6); overflow-x: auto; scrollbar-width: none;
    overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  }
  .barra-tabs::-webkit-scrollbar { display: none; }
  .barra-tabs a {
    flex: 0 0 auto; min-width: 58px; min-height: 52px; padding: 7px 10px; justify-content: center;
    border-radius: 22px; color: var(--texto-2); font-size: 0.75rem; letter-spacing: 0.02em; scroll-snap-align: center;
  }
  .barra-tabs a svg { width: 21px; height: 21px; stroke-width: 1.8; }
  .barra-tabs a > span:not(.badge) { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .barra-tabs a.activo { background: rgba(242, 107, 29, 0.16); color: #FF9A5C; box-shadow: inset 0 0 0 1px rgba(242, 107, 29, 0.35); }
  .barra-tabs a.activo svg { filter: drop-shadow(0 0 6px rgba(242, 107, 29, 0.6)); }
  .barra-tabs a.activo::before { display: none; }
  .barra-tabs a .badge { top: 2px; right: 6px; background: var(--st-nuevo-fondo); color: #fff; border-radius: 4px; }

  .contenido { padding-bottom: calc(176px + env(safe-area-inset-bottom)); }
  .fab { right: 16px; bottom: calc(94px + env(safe-area-inset-bottom)); width: 56px; height: 56px; }
  #toast { bottom: calc(164px + env(safe-area-inset-bottom)); }
  .modal { border-radius: 12px 12px 0 0; padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
  .pedido .num { font-size: 1.8rem; }
}

/* ---------- Movimiento reducido ---------- */
/* El aviso fijo de impresora (print-options.js, #prnAviso) va arriba sobre la pantalla:
   se le deja espacio para que no tape el saludo ni el primer título */
@media (max-width: 767px) {
  /* Celular: el aviso queda a 70 px, justo bajo la barra superior fija; el saludo baja bajo el aviso */
  body:has(#prnAviso) .top-movil { margin-bottom: 70px; }
}
@media (min-width: 768px) and (max-width: 899px) {
  body:has(#prnAviso) .contenido { padding-top: 128px; }
}
@media (min-width: 900px) {
  body:has(#prnAviso) .contenido { padding-top: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .pedido.nuevo, .ik-mesa-card.nuevo, #bannerNuevos .bn-main, .pill.linea .punto { animation: none !important; }
  .lateral, .rail-toggle svg, .btn, .ik-mesa-card { transition: none !important; }
  .modal, .modal-fondo { animation: none !important; }
}