/* ============================================================
   COTA · El panel del dueño (panel/)
   El mismo COTA en modo trastienda: más denso, números en mono,
   filas de 52 px. Hoja propia: no carga styles.css de la portada.
   Tokens copiados de styles.css: si cambias uno, cambia el otro.
   ============================================================ */

@font-face{font-family:'Bricolage Grotesque';src:url('fonts/bricolage-grotesque-v9-latin-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Bricolage Grotesque';src:url('fonts/bricolage-grotesque-v9-latin-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('fonts/newsreader-v26-latin-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('fonts/newsreader-v26-latin-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Martian Mono';src:url('fonts/martian-mono-v6-latin-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --canvas:       #E3E7E5;
  --canvas-deep:  #D0D7D5;
  --panel:        #F1F3F1;
  --ink:          #131817;
  --ink-soft:     #2C3534;
  --ink-mute:     #5D6660;
  --accent:       #A31E33;
  --accent-hover: #7E1527;
  --accent-mute:  rgba(163,30,51,.16);
  --altitude:     #3E574A;
  --line:         rgba(19,24,23,.14);
  --ease:cubic-bezier(.33,.02,.2,1);
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Newsreader',Georgia,serif;
  --mono:'Martian Mono',ui-monospace,monospace;
  --franja:0px;          /* la franja de Volora la fija demo.css */
  --gutter:clamp(16px,4vw,40px);
  /* Columnas de cada fila: nombre · «Guardado» · precio · hoy */
  --col-precio:8.75rem;
  --col-hoy:8.5rem;
}

/* ----- Base ----- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-padding-top:calc(var(--franja) + 16px);-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{
  min-height:100vh;display:flex;flex-direction:column;padding-top:var(--franja);
  background:var(--canvas);color:var(--ink);
  font-family:var(--body);font-weight:400;font-size:1.0625rem;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
main{flex:1 0 auto}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
button,input{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--display);line-height:1.08;letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
::selection{background:var(--accent-mute);color:var(--ink)}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.p-envoltura{width:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--gutter)}

/* Escondido por su propia altura: crezca lo que crezca el texto, no asoma */
.skip{position:fixed;top:calc(var(--franja) + 12px);left:16px;z-index:300;transform:translateY(calc(-100% - var(--franja) - 40px));background:var(--ink);color:var(--panel);padding:10px 18px;border-radius:6px;font-family:var(--display);font-weight:700;text-decoration:none}
.skip:focus-visible{transform:none;outline-color:var(--panel)}

/* ----- Curvas de nivel, quietas ----- */
.contours{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.contours svg{position:absolute;top:-5%;left:-5%;width:110%;height:110%}
.ct{stroke:var(--altitude);stroke-width:1.1;opacity:.16;fill:none}

/* ============================================================
   Cabecera: marca, «Panel», en directo y el sello
   ============================================================ */
.p-cabecera{padding-top:14px}
.p-cabecera-fila{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;min-height:64px}
.p-brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;color:var(--ink)}
.p-brand-mark{width:34px;height:34px}
.p-brand-word{font-family:var(--display);font-weight:800;font-size:1.2rem;letter-spacing:.14em}
.p-cabecera-titulo{
  padding-left:14px;border-left:1px solid var(--line);line-height:2;
  font-family:var(--mono);font-weight:600;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
}
.p-directo{
  margin-left:auto;display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-weight:600;font-size:.68rem;letter-spacing:.06em;color:var(--ink-soft);
}
.p-directo-punto{flex:none;width:8px;height:8px;border-radius:50%;background:var(--ink-mute)}
.p-directo[data-estado="conectado"] .p-directo-punto{background:var(--altitude);box-shadow:0 0 0 3px rgba(62,87,74,.18)}
.p-directo[data-estado="sin-conexion"]{color:var(--accent)}
.p-directo[data-estado="sin-conexion"] .p-directo-punto{background:var(--accent)}
html:not(.dentro) .p-directo{visibility:hidden}
.p-sello{flex:none}
@media (max-width:599px){
  .p-sello{margin-left:auto}
  .p-directo{order:5;flex-basis:100%;margin-left:0}
  html:not(.dentro) .p-directo{display:none}
}

/* ============================================================
   Botones
   ============================================================ */
.p-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 22px;
  border:1.5px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:.95rem;line-height:1.2;text-align:center;text-decoration:none;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.p-btn-tinta{background:var(--ink);color:var(--panel)}
.p-btn-tinta:hover{background:var(--ink-soft);border-color:var(--ink-soft)}
.p-btn-borde:hover{background:rgba(19,24,23,.07)}
.p-btn-texto{border-color:transparent;padding:0 10px;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:5px}
.p-btn-texto:hover{color:var(--accent)}
/* Desactivado (sin conexión): que no parezca pulsable */
.p-btn:disabled,.p-btn:disabled:hover{color:var(--ink-mute);border-color:var(--line);background:transparent;cursor:not-allowed}
.p-btn-texto:disabled,.p-btn-texto:disabled:hover{border-color:transparent;text-decoration-color:var(--ink-mute)}

/* ============================================================
   Entrada: «Entrar como dueño»
   ============================================================ */
.p-entrada{max-width:560px;padding-block:clamp(48px,12vh,120px) clamp(64px,14vh,140px)}
.p-kicker{font-family:var(--mono);font-weight:600;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.p-entrada h1{font-weight:800;font-size:clamp(2.8rem,11vw,4.4rem);letter-spacing:-.02em;margin-top:14px}
.p-lede{color:var(--ink-soft);font-size:1.12rem;margin-top:12px;max-width:46ch;text-wrap:pretty}
.p-entrar{margin-top:30px;padding-inline:28px}
.p-entrada-nota{margin-top:14px;font-style:italic;color:var(--ink-soft);font-size:.98rem}
.p-aviso-sin{
  margin-top:18px;padding:12px 16px;border:1.5px solid var(--accent);border-radius:8px;background:var(--panel);
  color:var(--ink);font-size:.98rem;max-width:60ch;
}
.p-aviso-sin[hidden]{display:none}

.p-dentro{display:none}
.dentro .p-entrada{display:none}
.dentro .p-dentro{display:block;padding-bottom:clamp(56px,10vh,96px)}

/* ============================================================
   Dentro: intro, la línea de Volora y las acciones
   ============================================================ */
.p-intro h1{font-weight:800;font-size:clamp(2.3rem,7vw,3.3rem);letter-spacing:-.02em;margin-top:clamp(20px,4vh,40px)}
.p-intro h1:focus{outline:none}
.p-intro h1:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* Lo que pone Volora: blanco, tinta, el símbolo en mandarina */
.p-volora{
  display:flex;align-items:flex-start;gap:12px;margin-top:22px;padding:14px 16px;max-width:62ch;
  background:var(--v-blanco,#fff);color:var(--v-tinta,#16161A);border:1px solid var(--v-tinta,#16161A);
  font-family:var(--v-sans,system-ui,sans-serif);font-weight:600;font-size:.98rem;line-height:1.45;
}
.p-volora span{text-wrap:pretty}
.p-volora-simbolo{flex:none;width:19px;height:16px;margin-top:3px;color:var(--v-mandarina,#FF6B1A)}

.p-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:22px}

/* ============================================================
   La lista: una tarjeta por categoría, una fila por producto
   ============================================================ */
.p-cabeza-lista{
  display:grid;grid-template-columns:minmax(0,1fr) var(--col-precio) var(--col-hoy);column-gap:16px;
  margin-top:34px;padding-inline:19px;
  font-family:var(--mono);font-weight:600;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);
}
.p-cabeza-lista span:nth-child(2){text-align:right;padding-right:24px}
.p-cabeza-lista span:nth-child(3){padding-left:2px}
@media (max-width:599px){.p-cabeza-lista{display:none}}

.p-lista{margin-top:10px}
.p-cat{margin-top:16px;padding:16px 18px 4px;background:var(--panel);border:1px solid var(--line);border-radius:10px}
.p-cat:first-child{margin-top:0}
.p-cat-titulo{
  padding-bottom:10px;border-bottom:1.5px solid var(--ink);
  font-family:var(--mono);font-weight:600;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);line-height:1.4;
}
.p-filas{list-style:none}

.p-fila{
  display:grid;align-items:center;column-gap:16px;
  grid-template-columns:minmax(0,1fr) auto var(--col-precio) var(--col-hoy);
  grid-template-areas:
    "nombre guardado precio hoy"
    "nota nota nota nota"
    "error error error error";
  min-height:52px;padding:4px 0;border-bottom:1px solid var(--line);
}
.p-fila:last-child{border-bottom:none}
.p-nombre{grid-area:nombre;font-family:var(--display);font-weight:700;font-size:1rem;line-height:1.3;overflow-wrap:anywhere;text-wrap:pretty}
.es-agotado .p-nombre{color:var(--ink-mute)}

.p-guardado{
  grid-area:guardado;justify-self:end;
  font-family:var(--mono);font-weight:600;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--altitude);
  opacity:0;transition:opacity .2s var(--ease);
}
.p-fila.visto .p-guardado{opacity:1}

.p-precio{grid-area:precio;display:flex;align-items:center;justify-content:flex-end;gap:7px}
.p-campo{
  width:5.4rem;height:44px;padding:0 10px;text-align:right;
  /* 16 px: con menos, Safari en iOS amplía la página al tocar el campo */
  font-family:var(--mono);font-weight:600;font-size:1rem;font-variant-numeric:tabular-nums;color:var(--ink);
  background:var(--canvas);border:1.5px solid var(--ink-mute);border-radius:6px;
}
.p-campo:hover{border-color:var(--ink)}
.p-campo:focus-visible{outline-offset:2px;border-color:var(--ink)}
.p-campo[aria-invalid="true"]{border-color:var(--accent);background:var(--panel)}
.p-campo:disabled{color:var(--ink-mute);border-color:var(--line);cursor:not-allowed}
.p-euro{font-family:var(--mono);font-weight:600;font-size:.95rem;color:var(--ink-soft)}
.p-precio-fijo{font-family:var(--mono);font-weight:600;font-size:.95rem;font-variant-numeric:tabular-nums;color:var(--ink);padding-right:2px;white-space:nowrap}

/* El interruptor de agotado dice siempre su estado */
.p-agotado{
  grid-area:hoy;justify-self:start;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 6px 0 2px;
  background:none;border:0;border-radius:6px;cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:.92rem;color:var(--ink);
}
.p-agotado-pista{
  position:relative;flex:none;width:42px;height:24px;border-radius:999px;
  border:1.5px solid var(--ink);background:var(--panel);transition:background .2s var(--ease),border-color .2s var(--ease);
}
.p-agotado-pista::after{
  content:"";position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;
  background:var(--ink);transition:transform .2s var(--ease),background .2s var(--ease);
}
.p-agotado[aria-checked="true"]{color:var(--accent)}
.p-agotado[aria-checked="true"] .p-agotado-pista{background:var(--accent);border-color:var(--accent)}
.p-agotado[aria-checked="true"] .p-agotado-pista::after{background:var(--panel);transform:translateX(18px)}
.p-agotado:hover .p-agotado-pista{border-color:var(--accent)}
.p-agotado:disabled{color:var(--ink-mute);cursor:not-allowed}
.p-agotado:disabled .p-agotado-pista{border-color:var(--ink-mute)}
.p-agotado:disabled .p-agotado-pista::after{background:var(--ink-mute)}
.guardando .p-agotado{cursor:progress}

.p-nota-fija{grid-area:nota;margin:-2px 0 10px;font-style:italic;font-size:.95rem;line-height:1.45;color:var(--ink-soft);max-width:60ch;text-wrap:pretty}
.p-error{grid-area:error;margin:0 0 10px;font-size:.95rem;line-height:1.4;color:var(--accent)}
.p-error[hidden]{display:none}

/* Móvil: el nombre arriba, el precio debajo y el interruptor a la derecha de los dos */
@media (max-width:599px){
  .p-cat{padding:14px 14px 2px}
  .p-fila{
    grid-template-columns:auto minmax(0,1fr) auto;column-gap:10px;row-gap:4px;
    grid-template-areas:
      "nombre nombre hoy"
      "precio guardado hoy"
      "nota nota nota"
      "error error error";
    padding:10px 0;
  }
  .p-precio{justify-content:flex-start}
  .p-guardado{justify-self:start;letter-spacing:.04em}
  .p-agotado{justify-self:end}
  .p-nota-fija{margin-top:4px}
}

/* ============================================================
   «Así lo ve tu cliente»: la carta de la mesa 3 en un móvil
   ============================================================ */
.p-vista{display:none}
@media (min-width:1100px){
  .dentro .p-dentro{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:56px;align-items:start}
  .p-vista{display:block;position:sticky;top:calc(var(--franja) + 20px);margin-top:clamp(20px,4vh,40px)}
}
.p-vista-titulo{font-family:var(--mono);font-weight:600;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);line-height:1.4}
.p-movil{
  width:395px;height:min(800px,calc(100vh - var(--franja) - 130px));min-height:480px;margin-top:12px;
  border:10px solid var(--ink);border-radius:34px;overflow:hidden;background:var(--canvas);
}
.p-movil-pantalla{display:block;width:100%;height:100%;border:0;background:var(--canvas)}
.p-vista-nota{margin-top:12px;font-style:italic;font-size:.95rem;color:var(--ink-soft);max-width:36ch}

/* ============================================================
   El QR de la mesa 3, a pantalla completa
   ============================================================ */
.p-qr{
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;
  border:0;background:var(--panel);color:var(--ink);
}
.p-qr[open]{display:grid;place-items:center;overflow:auto}
.p-qr::backdrop{background:var(--panel)}
.p-qr-cerrar{position:absolute;top:16px;right:16px;background:var(--panel)}
.p-qr-caja{display:flex;flex-direction:column;align-items:center;text-align:center;padding:72px 24px 32px}
.p-qr-sello{position:absolute;top:24px;left:24px}
.p-qr-marca{width:46px;height:46px;color:var(--ink)}
.p-qr-mesa{font-weight:800;font-size:clamp(2.4rem,7vh,4.2rem);letter-spacing:-.02em;margin-top:10px}
.p-qr-lema{margin-top:6px;font-family:var(--mono);font-weight:600;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.p-qr-codigo{width:min(56vh,82vw);height:auto;margin-top:20px}
.p-qr-url{margin-top:14px;font-family:var(--mono);font-weight:600;font-size:.9rem;letter-spacing:.02em}
/* Móvil apaisado: el código entero en la primera pantalla; la URL puede quedar debajo */
@media (orientation:landscape) and (max-height:500px){
  .p-qr-caja{padding-top:24px}
  .p-qr-codigo{width:min(56vh,82vw,calc(100vh - 180px))}
}

/* ============================================================
   Confirmar «Reiniciar demo»
   ============================================================ */
.p-dialogo{
  width:min(440px,calc(100% - 32px));margin:auto;padding:26px 24px 22px;
  border:1.5px solid var(--ink);border-radius:12px;background:var(--panel);color:var(--ink);
}
.p-dialogo::backdrop{background:rgba(19,24,23,.5)}
.p-dialogo h2{font-weight:800;font-size:1.55rem}
.p-dialogo p{margin-top:10px;color:var(--ink-soft)}
.p-dialogo-botones{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}

/* ============================================================
   Pie
   ============================================================ */
.p-pie{background:var(--ink);color:var(--panel);padding:40px 0 36px}
/* Sobre la tinta, la cereza no llega a 3:1: el anillo de foco va en claro */
.p-pie :focus-visible{outline-color:var(--panel)}
.p-pie-datos{font-size:.98rem;color:rgba(240,242,241,.85);max-width:56ch}
.p-pie-enlaces{display:flex;flex-wrap:wrap;gap:0 22px;margin-top:20px}
.p-pie-enlaces a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--display);font-weight:700;font-size:.92rem;text-decoration:none;border-bottom:1px solid transparent}
.p-pie-enlaces a:hover{border-color:var(--accent)}
.p-pie-aviso{margin-top:22px;padding-top:18px;border-top:1px solid rgba(240,242,241,.14);font-size:.85rem;color:rgba(240,242,241,.7)}

/* ============================================================
   Movimiento reducido: sin transiciones, todo en su estado final
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}