/* ==========================================================================
   PIDE A CASA (19 de octubre de 2026)

   Regla de la casa: lo elegante va donde se impresiona (la portada y las
   sucursales, en tinta y oro); lo claro va donde se decide (la carta y la
   comanda, en marfil). Colores SOLO de tokens.css; sistema en
   DON CAMARON/design-system/don-camaron/MASTER.md.

   La idea: la comanda de papel de la marisquería. La sucursal va arriba como
   el sello de la casa, los renglones en monoespaciada como la comanda que
   llega a la cocina, y los cortes con línea punteada.

   REUTILIZABLE: sirve para cualquier restaurante con sucursales cambiando
   CONFIG.SUCURSALES y sus tokens.
   ========================================================================== */

.globo {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; margin-left: var(--space-2);
  border-radius: var(--radius-pill); background: var(--marfil); color: var(--tinta);
  font-size: var(--text-xs); letter-spacing: 0;
}

/* ── Portada en tinta ────────────────────────────────────────────────── */
/* Arriba, el alto de la barra fija (~80 px) + aire: si no, la barra tapa el título. */
.pc-portada { padding: calc(80px + clamp(2rem, 6vw, 5rem)) 0 clamp(3rem, 6vw, 5rem); color: var(--marfil); }
/* Las columnas de grid no deben crecer por lo que traen dentro (la fila de categorías). */
.pc-carta, .pc-pedido, .pc-portada__texto, .pc-cercana { min-width: 0; }
.pc-portada__interior { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.pc-titulo {
  font-family: var(--font-display); font-weight: 300; font-size: var(--text-4xl);
  line-height: var(--leading-tight); letter-spacing: -0.01em; color: var(--marfil); margin: 0;
}
.pc-bajada { margin-top: var(--space-6); font-size: var(--text-lg); line-height: var(--leading-body); color: var(--marfil); max-width: 34ch; }

.pc-cercana { display: grid; gap: var(--space-4); padding: var(--space-8) 0 0; border-top: 1px solid var(--oro-linea); }
.pc-cercana__titulo { font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl); color: var(--oro); margin: 0; }
.pc-buscar { display: grid; gap: var(--space-2); }
.pc-buscar label { font-size: var(--text-sm); color: var(--texto-2-oscuro); }
.pc-campo-boton { display: flex; gap: var(--space-2); }
.pc-campo-boton input { flex: 1; min-width: 0; }
.pc-cercana > *, .pc-buscar > * { min-width: 0; }
.pc-campo-boton .boton { flex: none; padding-inline: var(--space-5); }
.pc-portada input {
  min-height: 48px; padding: var(--space-3) var(--space-4); background: var(--tinta-2); color: var(--marfil);
  border: 1px solid var(--oro-linea); border-radius: var(--radius); font: inherit; font-size: 16px;
}
.pc-portada input::placeholder { color: var(--texto-2-oscuro); }
.pc-portada input:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
.pc-portada .boton--linea { border-color: var(--oro-linea); color: var(--marfil); }
.pc-portada .boton--linea:hover:not(:disabled) { border-color: var(--oro); color: var(--oro); }

.pc-resultado:empty { display: none; }
.pc-resultado { display: grid; gap: var(--space-4); }
.pc-resultado__desde { font-size: var(--text-sm); color: var(--texto-2-oscuro); }
.pc-resultado__lista { list-style: none; margin: 0; padding: 0; display: grid; }
.pc-resultado__lista li {
  display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-4); padding: var(--space-3) 0;
  border-bottom: 1px solid var(--oro-linea);
}
.pc-resultado__nombre { font-family: var(--font-display); font-size: var(--text-xl); }
.pc-resultado__gana .pc-resultado__nombre { color: var(--oro); }
.pc-resultado__km { font-variant-numeric: tabular-nums; align-self: center; color: var(--marfil); }
.pc-resultado__dice { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--texto-2-oscuro); }

/* Las dos sucursales: placas de oro de 1 px, no tarjetas con sombra. */
.pc-sucursales { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0; margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--oro-linea); }
.pc-placa {
  display: grid; gap: var(--space-2); text-align: left; padding: var(--space-6) var(--space-6) var(--space-6) 0;
  background: none; border: 0; color: var(--marfil); cursor: pointer; position: relative; font: inherit;
}
.pc-placa + .pc-placa { padding-left: var(--space-6); border-left: 1px solid var(--oro-linea); }
.pc-placa::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--oro);
  transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease-out);
}
.pc-placa--elegida::before { transform: none; }
.pc-placa__nombre { font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl); line-height: 1.1; }
.pc-placa--elegida .pc-placa__nombre { color: var(--oro); }
.pc-placa__dato { font-size: var(--text-sm); color: var(--texto-2-oscuro); }
.pc-placa:hover .pc-placa__nombre { color: var(--oro-brillo); }
.pc-placa:focus-visible { outline: 2px solid var(--oro); outline-offset: 4px; }

/* ── La tienda en marfil ─────────────────────────────────────────────── */
.pc-tienda { background: var(--marfil); color: var(--tinta); padding: clamp(3.5rem, 7vw, 6rem) 0; }
.pc-tienda__interior { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.pc-seccion { font-family: var(--font-display); font-weight: 300; font-size: var(--text-2xl); line-height: 1.1; margin: 0; color: var(--tinta); }
.pc-categorias {
  position: sticky; top: 72px; z-index: 5; display: flex; gap: var(--space-2); overflow-x: auto; margin: var(--space-6) 0 0;
  padding: var(--space-3) 0; background: var(--marfil); border-bottom: 1px solid var(--marfil-linea); scrollbar-width: thin;
}
.pc-categorias a {
  flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4);
  border: 1px solid var(--linea-control); border-radius: var(--radius); color: var(--tinta); text-decoration: none; font-size: var(--text-sm); font-weight: 500;
}
.pc-categorias a:hover { background: var(--marfil-2); }
.pc-categoria { padding-top: var(--space-8); scroll-margin-top: 140px; }
.pc-categoria__titulo { font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl); color: var(--oro-hondo); margin: 0 0 var(--space-2); }
.pc-platillos { list-style: none; margin: 0; padding: 0; }
.pc-platillo { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: var(--space-4) 0; border-bottom: 1px solid var(--marfil-linea); }
.pc-platillo img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); background: var(--marfil-2); }
.pc-platillo img.sin-foto { visibility: hidden; }
.pc-platillo__nombre { font-weight: 600; font-size: var(--text-base); margin: 0; }
.pc-platillo__desc { font-size: var(--text-sm); line-height: 1.5; color: var(--texto-2-claro); margin: 2px 0 0; max-width: 56ch; }
.pc-opcion-select { margin-top: var(--space-2); min-height: 40px; padding: 0 var(--space-3); border: 1px solid var(--linea-control); border-radius: var(--radius); background: var(--marfil); font: inherit; font-size: var(--text-sm); color: var(--tinta); max-width: 100%; }
.pc-platillo__lado { display: grid; justify-items: end; gap: var(--space-2); }
.pc-precio { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); color: var(--oro-hondo); font-variant-numeric: tabular-nums; }
.pc-tienda .boton--linea { border-color: var(--linea-control); color: var(--tinta); }
.pc-tienda .boton--linea:hover:not(:disabled) { border-color: var(--tinta); color: var(--tinta); background: var(--marfil-2); }
.pc-agregar { min-height: 44px; padding: 0 var(--space-5); }

/* ── La comanda ──────────────────────────────────────────────────────── */
.pc-pedido { position: sticky; top: 88px; }
.pc-comanda {
  display: grid; gap: var(--space-5); padding: var(--space-6); max-height: calc(100vh - 104px); overflow-y: auto;
  background: var(--marfil); border: 1px solid var(--linea-control); border-radius: var(--radius-sm);
}
.pc-comanda__cabeza { display: flex; justify-content: space-between; align-items: center; }
.pc-cerrar { display: none; width: 44px; height: 44px; border: 1px solid var(--linea-control); border-radius: var(--radius); background: none; cursor: pointer; }
.pc-cerrar svg { width: 20px; height: 20px; stroke: var(--tinta); stroke-width: 2; fill: none; }
[data-vista-pedido] { display: grid; gap: var(--space-5); }
.pc-sello {
  justify-self: start; margin: 0; padding: var(--space-2) var(--space-4); border: 1px solid var(--oro-hondo); border-radius: var(--radius-sm);
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--oro-hondo); transform: rotate(-1deg);
}
fieldset.pc-modos, fieldset.pc-pago { border: 0; margin: 0; padding: 0; min-width: 0; }
.pc-modos legend, .pc-pago legend { font-weight: 600; font-size: var(--text-sm); margin-bottom: var(--space-2); padding: 0; }
.pc-segmentos { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--linea-control); border-radius: var(--radius); overflow: hidden; }
.pc-segmento {
  min-height: 52px; padding: var(--space-2); border: 0; background: var(--marfil); color: var(--tinta); cursor: pointer;
  font: inherit; font-size: var(--text-sm); font-weight: 600; line-height: 1.2;
}
.pc-segmento + .pc-segmento { border-left: 1px solid var(--linea-control); }
.pc-segmento[aria-pressed="true"] { background: var(--tinta); color: var(--marfil); }
.pc-segmento:disabled { color: var(--texto-2-claro); text-decoration: line-through; cursor: not-allowed; }
.pc-segmento:focus-visible { outline: 2px solid var(--rojo); outline-offset: -2px; }
.pc-nota { font-size: var(--text-sm); color: var(--texto-2-claro); margin: var(--space-2) 0 0; }
.pc-nota:empty { display: none; }

.pc-lineas { list-style: none; margin: 0; padding: var(--space-4) 0 0; border-top: 1px dashed var(--linea-control); display: grid; gap: var(--space-3); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: var(--text-sm); }
.pc-lineas:empty { display: none; }
.pc-linea { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); align-items: center; }
.pc-linea__nombre { font-weight: 600; }
.pc-linea__importe { font-variant-numeric: tabular-nums; }
.pc-contador { grid-column: 1 / -1; justify-self: end; display: inline-flex; align-items: center; border: 1px solid var(--linea-control); border-radius: var(--radius); }
.pc-contador button { width: 40px; height: 40px; border: 0; background: none; cursor: pointer; font-size: 20px; color: var(--tinta); }
.pc-contador button:hover { background: var(--marfil-2); }
.pc-contador output { min-width: 28px; text-align: center; font-family: var(--font-body); font-weight: 600; }
.pc-vacio { margin: 0; padding-top: var(--space-4); border-top: 1px dashed var(--linea-control); font-size: var(--text-sm); color: var(--texto-2-claro); }

.pc-forma { display: grid; gap: var(--space-2); }
.pc-forma > label, .pc-bloque > label { font-weight: 600; font-size: var(--text-sm); margin-top: var(--space-2); }
.pc-bloque { display: grid; gap: var(--space-2); }
.pc-opcional { font-weight: 400; color: var(--texto-2-claro); }
.pc-forma input[type="text"], .pc-forma input[type="tel"], .pc-forma input[type="number"], .pc-forma select {
  width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4); border: 1px solid var(--linea-control);
  border-radius: var(--radius); background: var(--marfil); color: var(--tinta); font: inherit; font-size: 16px;
}
.pc-forma input:focus-visible, .pc-forma select:focus-visible { outline: 2px solid var(--tinta); outline-offset: 1px; }
.pc-forma input[aria-invalid="true"] { border-color: var(--rojo); }
.pc-botones { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pc-chico { min-height: 44px; padding: 0 var(--space-4); font-size: var(--text-xs); }
.pc-cotizacion { margin: 0; font-size: var(--text-sm); font-weight: 600; }
.pc-cotizacion:empty { display: none; }
.pc-cotizacion--si { color: var(--color-success); }
.pc-cotizacion--no { color: var(--rojo); }
.pc-pago { margin-top: var(--space-3); }
.pc-opcion { display: flex; gap: var(--space-3); align-items: center; min-height: 44px; cursor: pointer; font-size: var(--text-sm); }
.pc-opcion input { width: 20px; height: 20px; accent-color: var(--rojo); }
.pc-totales { margin: var(--space-3) 0 0; padding-top: var(--space-4); border-top: 1px dashed var(--linea-control); display: grid; gap: var(--space-1); font-variant-numeric: tabular-nums; }
.pc-totales div { display: flex; justify-content: space-between; }
.pc-totales dt, .pc-totales dd { margin: 0; }
.pc-totales__total { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); padding-top: var(--space-2); }
.pc-error { color: var(--rojo); font-weight: 600; font-size: var(--text-sm); margin: 0; }
.pc-error:empty { display: none; }
.pc-letra-chica { font-size: var(--text-xs); color: var(--texto-2-claro); text-align: center; margin: 0; }
.pc-ancho { width: 100%; }

/* La confirmación: la comanda como llega a la cocina. */
[data-vista-confirmacion] { display: grid; gap: var(--space-4); }
.pc-confirma__titulo { font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl); line-height: 1.1; margin: 0; }
.pc-confirma__bajada { margin: 0; }
.pc-ticket { display: grid; gap: var(--space-2); padding: var(--space-4) 0; border-top: 1px dashed var(--linea-control); border-bottom: 1px dashed var(--linea-control); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: var(--text-sm); }
.pc-ticket__sucursal { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); color: var(--oro-hondo); margin: 0; }
.pc-ticket__fila { display: flex; justify-content: space-between; gap: var(--space-4); margin: 0; }
.pc-ticket__total { font-weight: 700; font-size: var(--text-base); }
.pc-ticket__folio { margin: 0; color: var(--texto-2-claro); font-size: var(--text-xs); }

.pc-barra-movil { display: none; }

/* ── Celular ─────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .pc-portada__interior { grid-template-columns: minmax(0, 1fr); }
  .pc-tienda__interior { grid-template-columns: minmax(0, 1fr); }
  .pc-pedido {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 60; transform: translateY(105%);
    transition: transform 260ms var(--ease-out);
  }
  .pc-pedido.abierto { transform: none; }
  .pc-comanda { max-height: 90vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0; }
  .pc-cerrar { display: inline-grid; place-items: center; }
  .pc-barra-movil:not([hidden]) {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom)); background: var(--tinta); border-top: 1px solid var(--oro-linea);
  }
  body.pc-con-pedido { overflow: hidden; }
  .pie { padding-bottom: 96px; }
}
@media (max-width: 640px) {
  .pc-placa, .pc-placa + .pc-placa { padding: var(--space-5) 0; border-left: 0; }
  .pc-placa + .pc-placa { border-top: 1px solid var(--oro-linea); }
  .pc-platillo { grid-template-columns: 60px minmax(0, 1fr); }
  .pc-platillo img { width: 60px; height: 60px; }
  .pc-platillo__lado { grid-column: 2; grid-auto-flow: column; justify-content: space-between; align-items: center; justify-items: start; }
  .nav__acciones [data-abrir-pedido] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-pedido, .pc-placa::before { transition: none; }
}

/* El fondo de la página es tinta: si la barra se esconde al bajar, no asoma el rosa de base.css. */
body { background: var(--tinta); }