/* Diseño de marca del Restaurante Juan Moreno (spec 021; documento «Master Prompt Programa de Reservas»).
   Paleta: blanco, crema y negro cálido como fondos; naranja solo como acento. Siempre en claro (RF-3). */
:root {
  --jm-blanco: #FFFFFF; --jm-crema: #F6EFE3; --jm-crema-profunda: #EDE2D1;
  --jm-negro: #14110F; --jm-carbon: #2B2724; --jm-gris-humo: #4A443E;
  --jm-gris-piedra: #8C8578; --jm-gris-cal: #C9C2B7; --jm-linea: #E2D9CC;
  --jm-naranja: #F5A340; --jm-naranja-hover: #E08F2C; --jm-naranja-suave: #FCE7CB; --jm-naranja-intenso: #FF8C00;
  --jm-tierra: #A56B42; --jm-ceramica: #8C4B35;
  --state-ok: #5E7248; --state-warn: #FF8C00; --state-error: #9B3B2B;

  /* Nombres de siempre del panel, apuntando a la paleta. */
  --ground: var(--jm-blanco);
  --paper: var(--jm-blanco);
  --paper-2: var(--jm-crema);
  --ink: var(--jm-carbon);
  --ink-strong: var(--jm-negro);
  --ink-2: var(--jm-gris-humo);
  --muted: var(--jm-gris-piedra);
  --line: var(--jm-linea);
  --line-strong: var(--jm-gris-cal);
  /* La barra y la entrada van en #000, el fondo de los JPG del logotipo, para que no se vea su caja (apartado 9). */
  --brand: #000000;
  --brand-ink: var(--jm-blanco);
  --accent: var(--jm-naranja);
  --accent-hover: var(--jm-naranja-hover);
  --accent-soft: var(--jm-crema);
  --link: var(--jm-tierra);
  --danger: var(--state-error);
  --warn-bg: var(--jm-naranja-suave);
  --warn-ink: var(--jm-carbon);
  --amber: var(--state-warn);

  /* Estados de la reserva (RF-9). */
  --st-pendiente: var(--jm-tierra);
  --st-confirmada: var(--state-ok);
  --st-sentada: #14110F;
  --st-cuenta: var(--jm-gris-humo);
  --st-liberada: var(--jm-gris-piedra);
  --st-no_show: var(--state-error);
  --st-cancelada: var(--state-error);
  /* «Menú Degustación» en negro cálido con letra crema (RF-10; antes azul marino). */
  --tasting: #14110F;
  --ocasion: var(--jm-tierra);

  --radius: 4px;
  --radius-control: 2px;
  --shadow-xs: 0 1px 2px rgba(20,17,15,.06);
  --shadow-md: 0 10px 28px -14px rgba(20,17,15,.22);
  --shadow-lg: 0 24px 60px -28px rgba(20,17,15,.30);
  --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #F5A340;
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --font: "Montserrat", system-ui, Arial, sans-serif;
  --font-script: "Italianno", cursive;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
#app { height: 100%; display: flex; flex-direction: column; overflow-y: auto; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 15px/1.55 var(--font); -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--link); }
/* Foco de teclado: anillo naranja de 2 px con halo del fondo, siempre visible (RF-15). */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-control); }
.boot { padding: 40px; color: var(--muted); }
/* Carga: barra fina naranja de 2 px arriba, sin spinners (RF-15). */
.boot::before { content: ""; position: fixed; top: 0; left: 0; height: 2px; width: 40%; background: var(--accent); animation: cargando 1.2s var(--ease-out) infinite; }
@keyframes cargando { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.icon { flex: none; vertical-align: -4px; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
h1, h2, h3 { margin: 0; line-height: 1.25; text-wrap: balance; color: var(--ink-strong); }
h1 { font-size: 28px; font-weight: 400; letter-spacing: -.02em; }
h2 { font-size: 19px; font-weight: 600; }
h3 { font-size: 16px; font-weight: 600; }

/* ---------- Botones (RF-7) ---------- */
/* .btn es el secundario: transparente con borde gris cal; hover con borde naranja. */
.btn {
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink-strong); border-radius: var(--radius-control);
  padding: 8px 16px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  transition: border-color 140ms var(--ease-out), background-color 140ms var(--ease-out), color 140ms var(--ease-out);
}
.btn:hover { border-color: var(--accent); }
.btn:active:not([disabled]) { transform: translateY(1px); }
/* Primario: fondo naranja y texto negro. Uno por pantalla. */
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--jm-negro); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
/* Destructivo: secundario con texto y borde granate. */
.btn.danger { color: var(--danger); border-color: var(--danger); }
.btn.danger:hover { background: color-mix(in srgb, var(--danger) 6%, transparent); }
/* Confirmación final de un borrado: rojo relleno con letra blanca. */
.btn.primary.danger { background: var(--danger); border-color: var(--danger); color: #FFFFFF; }
.btn.small { min-height: 32px; padding: 4px 10px; font-size: 12px; letter-spacing: .08em; }
.btn[disabled] { opacity: .45; cursor: default; }
/* Fantasma: sin caja; hover con texto naranja. */
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { color: var(--jm-naranja-hover); border-color: transparent; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ---------- Campos (RF-8) ---------- */
label.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink); }
label.field > span { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
input[type=text], input[type=tel], input[type=email], input[type=date], input[type=time], input[type=number], input[type=password], input[type=search], select, textarea {
  border: 1px solid var(--line-strong); background: var(--jm-blanco); border-radius: var(--radius-control); padding: 9px 12px; min-height: 44px;
  color: var(--ink-strong); font-size: 16px; width: 100%; transition: border-color 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
input[aria-invalid=true], select[aria-invalid=true], textarea[aria-invalid=true], input:user-invalid { border-color: var(--danger); }
::placeholder { color: var(--muted); opacity: 1; }
textarea { min-height: 72px; resize: vertical; }
input[type=number] { max-width: 110px; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); min-height: 32px; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.row > .grow { flex: 1 1 180px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.hint { font-size: 13px; color: var(--muted); }
/* Avisos: fondo naranja suave con filete de 3 px del color del estado (RF-13). */
.warn { background: var(--warn-bg); color: var(--warn-ink); border-left: 3px solid var(--state-warn); border-radius: var(--radius); padding: 10px 12px; font-size: 14px; }
.day-aviso { margin: 8px 12px 0; flex: none; }
.day-aviso a { color: inherit; font-weight: 600; }
.error { color: var(--danger); font-size: 14px; }

/* ---------- Estructura ---------- */
/* Barra negra con el logotipo horizontal blanco (RF-5). */
.topbar {
  position: sticky; top: 0; z-index: 20; background: var(--brand); color: var(--brand-ink);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px;
}
.topbar .logo { display: inline-flex; align-items: center; margin-right: 8px; padding: 4px 0; }
.topbar .logo img { display: block; height: 36px; width: auto; }
.topbar .btn { background: transparent; border-color: rgba(255,255,255,.35); color: #FFFFFF; }
.topbar .btn:hover { border-color: var(--accent); }
.topbar .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--jm-negro); }
.topbar .btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.topbar input[type=date] { width: auto; min-height: 40px; background: transparent; border-color: rgba(255,255,255,.35); color: #FFFFFF; color-scheme: dark; font-size: 15px; }
.topbar .spacer { flex: 1; }
/* La fecha es un botón que abre el calendario del mes (spec 023, RF-1). */
.topbar .datebox { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; background: transparent; color: #FFFFFF; border: 1px solid rgba(255,255,255,.35); border-radius: var(--radius-control); cursor: pointer; font-size: 15px; transition: border-color 140ms var(--ease-out); }
.topbar .datebox:hover { border-color: var(--accent); }
.topbar .datebox svg { width: 18px; height: 18px; }
.topbar .datebox input[type=date] { background: transparent; border: 0; min-height: 38px; }
.topbar .weekday { color: #FFFFFF; font-weight: 600; min-width: 5.5em; }
.env-badge { background: var(--state-warn); color: var(--jm-negro); font-weight: 700; font-size: 12px; letter-spacing: .12em; padding: 3px 8px; border-radius: var(--radius-control); }
/* Pestañas: subrayado naranja (RF-13). En la barra negra, texto blanco. */
.tabs { display: inline-flex; gap: 4px; }
.tabs button { border: 0; border-bottom: 2px solid transparent; background: transparent; color: rgba(255,255,255,.75); padding: 6px 10px; min-height: 36px;
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; transition: color 140ms var(--ease-out); }
.tabs button:hover { color: #FFFFFF; }
.tabs button[aria-pressed=true] { color: var(--accent); border-bottom-color: var(--accent); }
/* Navegación en mayúsculas pequeñas; la activa en naranja con subrayado de 2 px (RF-5). */
.nav { display: flex; gap: 2px 14px; flex-wrap: wrap; }
.nav a { color: #FFFFFF; text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; transition: color 140ms var(--ease-out); }
.nav a:hover { color: var(--accent); }
.nav a[aria-current=page] { color: var(--accent); border-bottom-color: var(--accent); }

.page { padding: 16px; max-width: 1100px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-xs); }

/* ---------- Día ---------- */
.day { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 0; flex: 1; min-height: 0; }
.day-list { border-right: 1px solid var(--line); background: var(--paper); overflow-y: auto; }
.day-plan { overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.summary { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 14px; position: sticky; top: 0; background: var(--paper); z-index: 2; }
.summary b { font-variant-numeric: tabular-nums; }
.closed-note { padding: 12px 16px; }
.slot-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px 6px; font-size: 13px; color: var(--ink-2); }
.slot-head .time { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 46px; font-size: 15px; }
.slot-head .bar { flex: 1; height: 6px; border-radius: 3px; background: var(--paper-2); border: 1px solid var(--line); overflow: hidden; }
.slot-head .bar i { display: block; height: 100%; background: var(--accent); }
.slot-head.full .bar i { background: var(--amber); }
.slot-head.over .bar i { background: var(--danger); }
.slot-head.over .load { color: var(--danger); font-weight: 600; }
.slot-head.now .time::after { content: " ahora"; font-size: 11px; font-weight: 600; color: var(--link); text-transform: uppercase; letter-spacing: .1em; }
.res {
  display: grid; grid-template-columns: 6px 1fr auto; gap: 0 12px; align-items: start; width: 100%; text-align: left;
  background: transparent; border: 0; border-top: 1px solid var(--line); padding: 10px 16px 10px 0;
}
/* Filas: hover en crema; la seleccionada, en crema con filete naranja de 3 px a la izquierda (RF-11). */
.res { transition: background-color 140ms var(--ease-out); }
.res:hover, .res[aria-current=true] { background: var(--paper-2); }
.res[aria-current=true] { box-shadow: inset 3px 0 0 var(--accent); }
.res .stripe { align-self: stretch; background: var(--c); border-radius: 0 3px 3px 0; }
.res .who { font-weight: 600; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.res .meta { font-size: 13px; color: var(--ink-2); display: flex; gap: 4px 10px; flex-wrap: wrap; }
.res .side { text-align: right; font-size: 13px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.res .pax { font-weight: 500; font-size: 16px; font-variant-numeric: tabular-nums; color: var(--ink-strong); }
.res.inactive { opacity: .55; }
/* Estados de la reserva: etiquetas de 12 px en mayúsculas, radio 2 px (RF-9). Por defecto, borde y texto del color del estado. */
.pill { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--radius-control); border: 1px solid var(--c); background: transparent; color: var(--c); white-space: nowrap; }
.pill.st-pendiente { background: var(--jm-naranja-suave); border-color: var(--jm-naranja-suave); color: var(--jm-tierra); }
.pill.st-sentada { background: var(--jm-negro); border-color: var(--jm-negro); color: #FFFFFF; }
.pill.st-liberada { border-color: var(--line); color: var(--muted); }
.pill.tasting { background: var(--tasting); border-color: var(--tasting); color: var(--jm-crema); }
/* Marcas de la reserva («Repetida», «Fuera de horario», «Garantía»…): fondo naranja suave, filete naranja de aviso. */
.tag { font-size: 11px; font-weight: 600; letter-spacing: .06em; padding: 2px 7px; border-radius: var(--radius-control); background: var(--warn-bg); color: var(--warn-ink); border-left: 2px solid var(--state-warn); white-space: nowrap; }
.tag.plain { background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--line); }
.mark { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; }
.mark.black { background: var(--danger); }
.mark.problem { background: transparent; border: 3px solid var(--jm-ceramica); width: 13px; height: 13px; }
.res.approval { background: color-mix(in srgb, var(--jm-naranja-suave) 70%, transparent); }
.tag.custom { background: color-mix(in srgb, var(--c) 12%, transparent); color: color-mix(in srgb, var(--c) 75%, var(--ink-strong)); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.tag-toggles { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-toggles button { border: 1px solid var(--line); background: var(--paper); border-radius: 99px; padding: 5px 12px; min-height: 36px; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.tag-toggles button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.tag-toggles button[aria-pressed=true] { border-color: var(--c); background: color-mix(in srgb, var(--c) 16%, var(--paper)); font-weight: 600; }
.swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.swatches button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; background: var(--c); }
.swatches button[aria-pressed=true] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--paper) inset; }
/* «Menú Degustación» en negro con letra crema y «Cumpleaños»/«Aniversario» con borde y texto tierra (RF-10). */
.tag.tasting { background: var(--tasting); color: var(--jm-crema); border: 1px solid var(--tasting); }
.tag.ocasion { background: transparent; color: var(--ocasion); border: 1px solid var(--ocasion); }
.annual-row { display: grid; grid-template-columns: 1fr 1.6fr 1.2fr; gap: 6px; }
.tag.red { background: transparent; color: var(--danger); border: 1px solid var(--danger); }

.wait { border-top: 1px solid var(--line); padding: 10px 16px; display: flex; flex-direction: column; gap: 6px; }
.wait .head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.wait .who { font-weight: 600; }
.wait .acts { display: flex; gap: 6px; flex-wrap: wrap; }
.wait.avisado { background: color-mix(in srgb, var(--jm-naranja-suave) 70%, transparent); }
.wait.inactive { opacity: .55; }
.floor-tabs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.floor-tabs .btn[aria-pressed=true] { background: var(--paper-2); border-color: var(--accent); }
.plan { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); width: 100%; max-width: 100%; }
.plan-inner { position: absolute; inset: 12px; }
/* Plano: libre en blanco, reservada en crema profunda, ocupada en negro, seleccionada con borde naranja (RF-12). */
.table {
  position: absolute; border: 1px solid var(--line-strong); background: var(--jm-blanco);
  border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden;
  padding: 2px; font-size: 11px; line-height: 1.15; text-align: center; color: var(--ink);
}
.table.round { border-radius: 50%; }
.table.st-pendiente, .table.st-confirmada { background: var(--jm-crema-profunda); border: 2px solid var(--c); }
.table.st-sentada, .table.st-cuenta { background: var(--jm-negro); border: 2px solid var(--jm-negro); color: #FFFFFF; }
.table.st-sentada .muted, .table.st-cuenta .muted { color: var(--jm-gris-cal); }
/* Marca de «Menú Degustación» en la mesa: punto naranja (sobre la mesa negra se ve; el negro no se vería). */
.table.tasting::after { content: ""; position: absolute; top: 3px; right: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--paper); }
.table b { font-size: 14px; }
.table .tname { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.table.off { opacity: .35; border-style: dashed; }
.table.blocked { background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--ink) 10%, transparent) 6px 8px); }
.table.late { border-color: var(--danger); animation: late-blink 1.1s ease-in-out infinite; }
@keyframes late-blink {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 55%, transparent); background: color-mix(in srgb, var(--danger) 18%, var(--paper)); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--danger) 25%, transparent); background: color-mix(in srgb, var(--danger) 4%, var(--paper)); }
}
@media (prefers-reduced-motion: reduce) { .table.late { animation: none; outline: 3px solid var(--danger); outline-offset: 1px; } }
.res.late { background: color-mix(in srgb, var(--danger) 7%, transparent); }
.table.selected { border: 2px solid var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }
.table.private { border-style: double; border-width: 3px; }
.table.seats-changed .muted { color: var(--link); font-weight: 600; }
.table.zoneclosed { opacity: .55; background-image: repeating-linear-gradient(45deg, transparent 0 5px, color-mix(in srgb, var(--brand) 18%, transparent) 5px 7px); }
.groupchips { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.table.target { cursor: copy; }
.legend { display: flex; flex-wrap: wrap; gap: 6px; }

.assignbar { position: sticky; bottom: 0; background: var(--brand); color: #fff; border-radius: var(--radius); padding: 10px 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.assignbar .btn { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,.35); }
.assignbar .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--jm-negro); }
.assignbar .btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }

/* ---------- Paneles y diálogos ---------- */
/* Velo de ventanas y paneles: negro cálido al 72 % (RF-13); aparecen fundiéndose y con 8 px de desplazamiento (RF-15). */
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes velo { from { opacity: 0; } to { opacity: 1; } }
@keyframes deslizar { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
.drawer-back { position: fixed; inset: 0; background: rgba(20,17,15,.72); z-index: 40; animation: velo 220ms var(--ease-out); }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100%); background: var(--paper); z-index: 41;
  overflow-y: auto; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; animation: deslizar 280ms var(--ease-out);
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
.drawer.wide { width: min(640px, 100%); }
.drawer header { display: flex; align-items: flex-start; gap: 10px; padding: 16px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--paper); z-index: 1; }
.drawer header .grow { flex: 1; }
.drawer .body { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.drawer section { display: flex; flex-direction: column; gap: 8px; }
.drawer section > h3 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.status-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 6px; }
.status-grid button { border: 2px solid var(--c); background: var(--paper); color: var(--ink); border-radius: var(--radius); padding: 8px; min-height: 44px; font-weight: 600; font-size: 14px; }
.status-grid button[aria-pressed=true] { background: var(--c); color: #FFFFFF; }
.status-grid button.st-pendiente[aria-pressed=true] { background: var(--jm-naranja-suave); border-color: var(--jm-tierra); color: var(--jm-tierra); }
.allergy { background: var(--warn-bg); color: var(--warn-ink); border-left: 3px solid var(--danger); border-radius: var(--radius); padding: 8px 12px; font-weight: 600; }
.log { font-size: 13px; color: var(--ink-2); display: flex; flex-direction: column; gap: 3px; }
.slots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.slots-grid button { border: 1px solid var(--line); background: var(--paper); border-radius: 6px; padding: 6px 4px; font-size: 13px; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; align-items: center; min-height: 48px; }
.slots-grid button b { font-size: 14px; }
.slots-grid button.no { color: var(--ink-2); background: var(--paper-2); }
.slots-grid button.no small { color: var(--danger); }
.slots-grid button[aria-pressed=true] { border-color: var(--accent); background: var(--accent-soft); outline: 2px solid var(--accent); }
.svc-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-top: 4px; }
/* Plano para elegir mesa (spec 003, RF-15): se mueve en el móvil y las mesas se tocan bien. */
.pick-scroll { overflow: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); }
.pick-scroll .plan { min-width: 560px; }
.pick-plan .table { cursor: pointer; }
.pick-plan .table.free { background: var(--paper); }
.pick-plan .table.pick-busy { background: var(--paper-2); color: var(--ink-2); opacity: .75; border-style: dashed; }
.pick-plan .table.pick-web { background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--ink) 12%, transparent) 6px 8px); }
.pick-plan .table.selected { background: var(--accent); color: #000000; opacity: 1; }
.pick-plan .table.selected .muted { color: #000000; }
.pick-sum { margin: 0; }
.tbl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.tbl-pick { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 52px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font: inherit; cursor: pointer; padding: 6px; }
.tbl-pick small { color: var(--ink-2); font-size: 12px; text-align: center; }
.tbl-pick[aria-pressed="true"] { background: var(--paper-2); border: 2px solid var(--accent); color: var(--ink-strong); font-weight: 600; }
.tbl-pick[aria-pressed="true"] small { color: var(--ink-2); }
.tbl-pick.busy { opacity: .7; border-style: dashed; }
.sugs { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.sugs .sug { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; text-align: left; background: var(--paper); color: var(--ink); border: 0; border-bottom: 1px solid var(--line); padding: 10px 12px; min-height: 44px; font: inherit; cursor: pointer; }
.sugs .sug:last-child { border-bottom: 0; }
.sugs .sug:hover, .sugs .sug:focus-visible { background: var(--accent-soft); }
.who-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 8px 0 16px; }
.who-list .btn { min-height: 48px; }
.found { border: 1px solid var(--line); border-left: 3px solid var(--state-ok); background: var(--paper-2); border-radius: var(--radius); padding: 8px 10px; font-size: 14px; }

dialog { border: 0; border-radius: var(--radius); padding: 32px; width: min(520px, calc(100% - 32px)); max-width: min(560px, calc(100% - 32px)); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-lg); }
dialog[open] { animation: aparecer 280ms var(--ease-out); }
dialog::backdrop { background: rgba(20,17,15,.72); }
/* Título de la ventana con el filete de marca de 56×3 px en naranja debajo. */
dialog h2 { font-size: 21px; padding-bottom: 12px; margin-bottom: 8px; background: linear-gradient(var(--accent), var(--accent)) left bottom / 56px 3px no-repeat; }
@media (max-width: 480px) { dialog { padding: 24px 20px; } }
dialog ul { padding-left: 18px; margin: 8px 0 16px; display: flex; flex-direction: column; gap: 6px; }
dialog .row { justify-content: flex-end; }

#toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--jm-negro); color: #FFFFFF; padding: 12px 18px; border-radius: var(--radius); border-left: 3px solid var(--state-ok); box-shadow: var(--shadow-md); z-index: 100; max-width: calc(100% - 32px); font-size: 14px; }
#toast.bad { border-left-color: var(--danger); }

/* ---------- Calendario del mes (spec 023) ---------- */
dialog.cal { width: min(560px, calc(100% - 16px)); max-width: min(560px, calc(100% - 16px)); padding: 20px; }
.cal-head { display: flex; align-items: center; gap: 4px; margin-bottom: 12px; }
.cal-head h2 { flex: 1; text-align: center; font-size: 19px; padding: 0; margin: 0; background: none; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.cal-wd { text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--muted); padding: 6px 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line-strong); }
.cal-loading { grid-column: 1 / -1; padding: 24px; text-align: center; color: var(--muted); margin: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cal-day { display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-height: 76px; padding: 4px 4px 6px; background: var(--jm-blanco); color: var(--ink-strong);
  border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; font: inherit; cursor: pointer; transition: background-color 140ms var(--ease-out); }
.cal-day:hover { background: var(--paper-2); }
.cal-num { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; align-self: center; padding: 0 4px 2px; border-bottom: 2px solid transparent; }
.cal-day.today .cal-num { border-bottom-color: var(--accent); }
.cal-day.sel { background: var(--jm-negro); color: #FFFFFF; }
.cal-day.sel .cal-svc { color: #FFFFFF; }
.cal-day.closed { background: var(--paper-2); color: var(--muted); }
.cal-day.out, .cal-day.past:not(.sel) { opacity: .5; }
.cal-svc { display: flex; align-items: center; justify-content: center; gap: 3px; font-size: 12px; color: var(--ink); white-space: nowrap; }
.cal-svc svg { width: 13px; height: 13px; flex: none; }
.cal-svc.shut { color: var(--muted); }
.cal-svc.full .num { color: var(--state-warn); font-weight: 700; }
.cal-day.sel .cal-svc.full .num { color: var(--accent); }
.cal-ini { font-size: 11px; }
.cal-leyenda { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.cal-leyenda svg { width: 13px; height: 13px; }
@media (max-width: 480px) {
  dialog.cal { padding: 12px 8px; }
  .cal-head h2 { font-size: 16px; white-space: nowrap; }
  .cal-head .btn { padding: 4px 8px; }
  .cal-day { min-height: 68px; padding: 3px 1px 5px; }
  .cal-svc { font-size: 11px; gap: 2px; }
  .cal-svc svg { width: 11px; height: 11px; }
}

/* ---------- Tablas de configuración ---------- */
.tbl { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-xs); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color 140ms var(--ease-out); }
tbody tr:hover { background: var(--paper-2); }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); background: none; font-weight: 600; border-bottom-color: var(--line-strong); }
td input[type=time] { width: 110px; }
td input[type=number] { width: 80px; }
.subtabs { display: flex; gap: 6px; flex-wrap: wrap; }
/* Pestañas sobre blanco: subrayado naranja (RF-13). */
.subtabs { border-bottom: 1px solid var(--line); gap: 2px 18px; }
.subtabs .btn { border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 8px 0; min-height: 40px; color: var(--ink-2); }
.subtabs .btn:hover { color: var(--ink-strong); }
.subtabs .btn[aria-pressed=true] { color: var(--ink-strong); border-bottom-color: var(--accent); }
.caps { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.caps label { display: flex; flex-direction: column; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.caps input { max-width: none; min-height: 34px; padding: 4px 6px; }
.table-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; }
.table-picks label { border: 1px solid var(--line); border-radius: 6px; padding: 6px; display: flex; gap: 6px; align-items: center; font-size: 13px; }
.list-item { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.list-item:first-child { border-top: 0; }
.wait:hover { background: var(--paper-2); }
.list-item .grow { flex: 1 1 200px; }

/* ---------- Estadísticas ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.kpi { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; display: flex; flex-direction: column; gap: 2px; }
.kpi b { font-size: 28px; font-weight: 400; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--ink-strong); }
.kpi span { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.kpi small { font-size: 12px; color: var(--ink-2); }
.bars { display: flex; flex-direction: column; gap: 6px; }
.bars .barrow { display: grid; grid-template-columns: minmax(80px, 150px) 1fr auto; gap: 10px; align-items: center; font-size: 14px; }
.bars .track { display: block; background: var(--paper-2); border: 1px solid var(--line); border-radius: 4px; height: 18px; overflow: hidden; }
.bars .fill { display: block; height: 100%; background: var(--accent); min-width: 2px; }
.bars .val { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 56px; text-align: right; }
.chart { width: 100%; height: auto; }
.chart .axis { stroke: var(--line); }
.chart .lbl { fill: var(--ink-2); font-size: 10px; }
.chart .bar { fill: var(--accent); }
/* Entrada: fondo negro, logotipo vertical blanco y el lema en Italianno (RF-6). Italianno solo aquí (RF-4). */
#app:has(> .login) { background: var(--brand); }
.login { max-width: 380px; width: 100%; margin: 0 auto; padding: 8vh 16px 32px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.login-logo { display: block; width: 220px; max-width: 70%; height: auto; }
.login .lema { font-family: var(--font-script); font-size: 40px; line-height: 1.1; color: var(--jm-crema); text-align: center; margin: 4px 0 20px; }
.login .card { display: flex; flex-direction: column; gap: 16px; padding: 24px; width: 100%; }
.login h1 { font-size: 21px; font-weight: 600; letter-spacing: 0; }

.mobile-switch { display: none; }
@media (max-width: 820px) {
  .day { grid-template-columns: 1fr; flex: none; }
  .day-list { border-right: 0; }
  .day[data-view=list] .day-plan, .day[data-view=plan] .day-list { display: none; }
  .mobile-switch { display: inline-flex; }
  .topbar .nav { order: 10; width: 100%; gap: 0 12px; }
  /* En el móvil la barra se compacta para no comerse la pantalla del día (RNF-3). */
  .topbar { gap: 8px; padding-bottom: 4px; }
  .topbar .logo img { height: 32px; }
  .topbar .btn { padding: 6px 10px; letter-spacing: .06em; }
  .tabs button { padding: 6px 6px; letter-spacing: .08em; }
  .nav a { font-size: 11px; letter-spacing: .08em; padding: 4px 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Tablas de revisión (importación de CoverManager) */
.table-wrap { overflow-x: auto; }
.table-wrap table { border-collapse: collapse; font-size: 13px; }
.table-wrap th, .table-wrap td { padding: 4px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }

/* Configuración → Mesas: zonas y grupos */
.zone-row, .group-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.zone-row > input[type="text"] { width: auto; min-width: 0; flex: 1 1 180px; }
.zone-row > select { width: auto; flex: 0 1 160px; }
.zone-row .zone-min { flex: 0 1 190px; margin: 0; }
.zone-row .zone-min input { width: 100%; }
.group-picks { display: grid; gap: 10px; }
.group-picks fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin: 0; }
.group-picks .table-picks { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.group-picks legend { font-size: 13px; font-weight: 600; padding: 0 4px; }

/* Listado de reservas para imprimir (con `/feature`, 18/10/2026): solo se ve al imprimir. */
.print-sheet { display: none; }
@media print {
  /* A4 vertical, letra de 9 puntos y filas ajustadas: unas 20-25 reservas por hoja (con `/feature`, 19/10/2026). */
  @page { size: A4 portrait; margin: 10mm; }
  body.printing { background: #FFFFFF; color: #000; }
  body.printing > *:not(.print-sheet) { display: none !important; }
  body.printing .print-sheet { display: block; font: 9pt/1.3 var(--font); color: #000; }
  .print-sheet .print-head { display: flex; align-items: center; gap: 5mm; margin: 0 0 3mm; }
  .print-sheet .print-logo { display: block; height: 13mm; width: auto; }
  .print-sheet h1 { font-size: 12pt; font-weight: 600; margin: 0 0 1mm; }
  .print-sheet p { margin: 0; }
  .print-sheet table { width: 100%; border-collapse: collapse; }
  .print-sheet th, .print-sheet td { border: 1px solid #8C8578; padding: 1mm 1.4mm; text-align: left; vertical-align: top; }
  .print-sheet th { background: none; font-size: 7.5pt; text-transform: uppercase; letter-spacing: .06em; }
  .print-sheet tr { break-inside: avoid; }
  .print-sheet thead { display: table-header-group; }
  .print-sheet .hora { font-weight: 700; white-space: nowrap; width: 11mm; }
  .print-sheet .num, .print-sheet .check { text-align: center; white-space: nowrap; }
  .print-sheet .num { width: 9mm; }
  .print-sheet .mesa { width: 12mm; }
  .print-sheet .check { width: 7mm; }
  /* Columnas: nombre, menú y ocasión con ancho fijo; alergias y notas se reparten el resto. */
  .print-sheet th:nth-child(2) { width: 36mm; }
  .print-sheet th:nth-child(5) { width: 28mm; }
  .print-sheet th:nth-child(7) { width: 17mm; }
  .print-sheet .icon { width: 12px; height: 12px; }
  .print-sheet .notas { font-size: 8.5pt; }
  .print-ficha { font-size: 11pt !important; }
  .print-ficha h2 { font-size: 9pt; text-transform: uppercase; letter-spacing: .06em; margin: 4mm 0 1mm; }
  .print-ficha .print-pie { margin-top: 6mm; font-size: 8pt; color: #8C8578; }
}

/* Teléfono con selector de país (spec 013, RF-17). */
.phone-row { display: flex; gap: 6px; }
.phone-row .phone-cc { flex: 0 0 8.5em; width: 8.5em; }
.phone-row input { flex: 1; min-width: 0; }

/* ---------- Preguntar: asistente interno (spec 024) ---------- */
.chat-card { padding: 0; display: flex; flex-direction: column; }
.chat { display: flex; flex-direction: column; gap: 10px; padding: 20px; min-height: 160px; }
.chat .msg { max-width: 85%; padding: 10px 14px; border-radius: var(--radius); display: flex; flex-direction: column; gap: 6px; }
.chat .msg p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.chat .msg.q { align-self: flex-end; background: var(--paper-2); }
.chat .msg.a { align-self: flex-start; background: var(--paper); border: 1px solid var(--line); }
.chat .msg.a.sys { border-left: 2px solid var(--state-warn); }
.chat .msg.pending { color: var(--muted); }
.chat .msg .time { font-size: 11px; color: var(--muted); align-self: flex-end; }
.chat .msg .btn { align-self: flex-start; }
.chat-compose { position: sticky; bottom: 0; background: var(--paper); border-top: 1px solid var(--line); padding: 12px 20px; display: flex; flex-direction: column; gap: 8px; border-radius: 0 0 var(--radius) var(--radius); }
.chat-compose .row { align-items: center; flex-wrap: nowrap; }
.chat-compose .chat-actions { justify-content: flex-end; flex-wrap: wrap; }
.chat-compose input { width: 100%; }
.suggest { display: flex; flex-direction: column; max-height: 40vh; overflow-y: auto; }
.suggest:empty { display: none; }
.suggest-item { display: flex; gap: 8px; align-items: center; text-align: left; padding: 8px 4px; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; cursor: pointer; min-height: 40px; }
.suggest-item:first-child { border-top: 0; }
.suggest-item:hover, .suggest-item:focus-visible { background: var(--paper-2); }
.suggest-item .icon { flex: none; color: var(--muted); }
.place-item .btn { flex: none; }
@media (max-width: 480px) {
  .chat { padding: 14px; }
  .chat .msg { max-width: 92%; }
  .chat-compose { padding: 10px 14px; }
  .chat-compose .btn.primary { padding-inline: 12px; }
}

/* CRM, cliente único (spec 027): consentimientos, lo que más pide, duplicados y fusión. */
.tag.green { background: transparent; color: var(--st-confirmada); border: 1px solid var(--st-confirmada); }
.consent-row .btn { min-width: 96px; }
.consent-history { margin-top: 8px; }
.top-row { align-items: flex-start; gap: 24px; }
.top-list { margin: 6px 0 0; padding-left: 20px; }
.top-list li { display: flex; gap: 8px; padding: 2px 0; font-size: 14px; }
.dup-block summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
/* Ficha 360 por bloques (spec 030, RF-10). */
.ficha-bloque { border-top: 1px solid var(--line); }
.ficha-bloque > summary { cursor: pointer; font-weight: 600; padding: 12px 0; min-height: 44px; }
.ficha-bloque > section { padding-bottom: 12px; }
.ficha-pastillas, .ficha-acciones { flex-wrap: wrap; }
.ficha-explica { flex-basis: 100%; margin: 0; }
.seg-pill { cursor: pointer; }
.ident-row { flex-wrap: wrap; }
.res .short-view { color: var(--ink-3, var(--ink-2)); }
.dup-block { margin-top: 24px; }
.dup-block > .row { align-items: center; }
.dup-pair { padding: 12px 16px; margin-top: 8px; }
.merge-option { display: flex; width: 100%; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); }
.dup-who { overflow-wrap: anywhere; }

/* Segmentos de clientes (spec 028). */
.tag.seg-habitual { background: transparent; color: var(--ink-2); border: 1px solid var(--accent); }
.seg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.seg-card { display: flex; flex-direction: column; align-items: stretch; gap: 6px; text-align: left; padding: 16px; cursor: pointer; font: inherit; color: inherit; }
.seg-card:hover { border-color: var(--accent); }
.seg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.seg-total { font-size: 28px; font-weight: 600; }
.seg-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.spark { width: 120px; height: 32px; }
.spark polyline { fill: none; stroke: var(--accent); stroke-width: 2; }

/* Acciones del CRM (spec 029). */
.action-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; }
.action-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 4px 0; }
button.link { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; cursor: pointer; }

/* ---------- Mejoras de sala (05/11/2026) ---------- */
/* Notas de la ficha del cliente dentro de la reserva, solo para leer (spec 030, RF-21). */
.ficha-nota { font-size: 14px; color: var(--ink-2); border-left: 2px solid var(--line-strong); padding-left: 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Lista de clientes: la fila abre la ficha y «Reservar» va aparte (spec 030, RF-20). */
.cliente-fila { flex-wrap: nowrap; gap: 8px; }
.cliente-fila > .btn.ghost { flex: 1 1 auto; min-width: 0; text-align: left; flex-wrap: wrap; white-space: normal; letter-spacing: normal; padding-left: 0; padding-right: 0; }
.cliente-fila > .btn.ghost > .grow { min-width: 0; overflow-wrap: anywhere; }
.cliente-fila > .btn.small { flex: none; }
/* Lista negra a la vista (spec 021, RF-19): fila con filete y fondo granate suave, nombre subrayado; en el plano, filete en la mesa. */
.res.lista-negra { background: color-mix(in srgb, var(--state-error) 7%, var(--paper)); box-shadow: inset 3px 0 0 var(--state-error); }
.res.lista-negra .who .nombre { text-decoration: underline; text-decoration-color: var(--state-error); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.res.lista-negra[aria-current=true] { box-shadow: inset 3px 0 0 var(--state-error); }
.table.lista-negra { outline: 2px solid var(--state-error); outline-offset: 1px; }
@media print {
  .lista-negra { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
  .ficha-nota { font-style: italic; border: 0; padding: 0; font-size: inherit; color: inherit; }
}