/* Panel de Bonprofit — hoja de estilos.
   Móvil y vertical primero: esto se usa de pie, en la barra, con una mano.
   Legibilidad por delante; el color de marca, en el marco, no en el contenido. */

:root {
  --pizarra: #141311;
  --pizarra2: #1c1a16;
  --superficie: #242119;
  --superficie2: #2b2720;
  --borde: #3a352b;
  --tiza: #f2e7d8;
  --tiza2: #cfbfa8;
  --dorado: #c78c39;
  --dorado-claro: #e0a95a;
  --verde: #4fd47a;
  --terracota: #d4645a;
  --terracota-claro: #eaa096;
  --aviso: #e8b44a;
  --radio: 12px;
  --toque: 48px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  background: var(--pizarra);
  color: var(--tiza);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------------------------------------------------------------- estructura */
.app { max-width: 640px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }

header.barra {
  position: sticky; top: 0; z-index: 30;
  background: var(--pizarra2); border-bottom: 1px solid var(--borde);
  padding: 10px 12px 0;
}
.barra .linea-sup { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.barra h1 { margin: 0; font-size: 1.02rem; font-weight: 600; }
.barra h1 .marca { color: var(--dorado); }
.barra .quien { font-size: .76rem; color: var(--tiza2); text-align: right; }
.barra .quien b { color: var(--tiza); font-weight: 600; display: block; }

nav.principal, nav.apartados { display: flex; gap: 4px; margin-top: 10px; overflow-x: auto; }
nav.principal button, nav.apartados button {
  flex: 1 0 auto; min-height: var(--toque);
  background: none; border: 0; border-bottom: 3px solid transparent;
  color: var(--tiza2); font-size: .84rem; font-weight: 600; padding: 10px 8px 11px;
  cursor: pointer; white-space: nowrap;
}
nav.principal button.on, nav.apartados button.on { color: var(--tiza); border-bottom-color: var(--dorado); }
nav .n { display: inline-block; min-width: 20px; padding: 1px 6px; margin-left: 5px;
  background: var(--borde); border-radius: 99px; font-size: .72rem; color: var(--tiza); }
nav button.on .n { background: var(--dorado); color: var(--pizarra); }
nav.apartados { margin-top: 0; background: var(--superficie); border-radius: 10px 10px 0 0; padding: 0 2px; }
nav.apartados button { font-size: .78rem; }

main { flex: 1; padding: 12px 12px 48px; }

/* ------------------------------------------------------------------ tarjetas */
.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 13px; margin-bottom: 11px; cursor: pointer;
}
.tarjeta:active { background: var(--superficie2); }
.t-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.t-cab .cod { font-weight: 700; font-size: 1.04rem; color: var(--dorado); }
.t-cab .hora { font-size: .8rem; color: var(--tiza2); }
.cli { font-size: .98rem; font-weight: 600; }
.tel { font-size: .86rem; color: var(--dorado-claro); text-decoration: none; display: inline-block; padding: 6px 0; min-height: 34px; }
.dir { font-size: .82rem; color: var(--tiza2); margin-top: 2px; }
.linea { display: flex; gap: 8px; align-items: baseline; font-size: .92rem; padding: 3px 0; }
.linea .c { color: var(--tiza2); min-width: 24px; font-variant-numeric: tabular-nums; }
.linea .hecha { text-decoration: line-through; color: var(--tiza2); }
.matices { font-size: .79rem; color: var(--tiza2); padding-left: 32px; }
.matices b { color: var(--terracota-claro); font-weight: 600; }
.matices .pon { color: var(--verde); }

.bebidas { margin-top: 9px; border-top: 1px dashed var(--borde); padding-top: 9px; }
.bebidas summary { cursor: pointer; font-size: .86rem; color: var(--dorado-claro); font-weight: 600;
  list-style: none; min-height: 40px; display: flex; align-items: center; gap: 6px; }
.bebidas summary::-webkit-details-marker { display: none; }
.bebidas summary::before { content: "🍾"; }
.bebidas ul { margin: 6px 0 0; padding: 0 0 0 4px; list-style: none; font-size: .88rem; }
.bebidas li { padding: 4px 0; }

/* ------------------------------------------------------------------- estados */
.etiqueta { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: .68rem;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.etiqueta.cancelado { background: #3a1f1c; color: var(--terracota-claro); border: 1px solid var(--terracota); }
.etiqueta.entregado { background: #1c3324; color: var(--verde); border: 1px solid #2f5c3f; }
.etiqueta.agotado { background: #3a2a1c; color: var(--aviso); border: 1px solid #6b4d21; }
.etiqueta.oferta { background: #3a1f1c; color: var(--terracota-claro); border: 1px solid var(--terracota); }
.cancelado-tarjeta { border-color: var(--terracota); opacity: .92; }
.motivo-caja { background: #2c1d1b; border-radius: 8px; padding: 8px 10px; margin-top: 9px; font-size: .82rem; }
.motivo-caja .m { color: var(--terracota-claro); font-weight: 600; }
.motivo-caja .t { color: var(--tiza); }
.motivo-caja .q { color: var(--tiza2); font-size: .76rem; margin-top: 3px; }

/* --------------------------------------------------- avisos del comandero (US-206) */
/* Verde: el pedido lleva menos de 5 min. Rojo parpadeante: hay una cancelacion pedida.
 * Ambos se calculan en JS desde datos del dominio. El parpadeo se respeta si el usuario
 * pidio menos movimiento (prefers-reduced-motion): se ve fijo, no parpadeando. */
.tarjeta.verde-nuevo { border-color: var(--verde); box-shadow: 0 0 0 2px rgba(79,212,122,.35); }
.tarjeta.rojo-cancelacion {
  border-color: var(--terracota);
  background: #2e1816;
  animation: parpadeo-rojo 1s steps(1, end) infinite;
}
@keyframes parpadeo-rojo {
  0%, 100% { background: #2e1816; }
  50% { background: #4a1f1b; }
}
.tarjeta.rojo-cancelacion .prohibido {
  display: flex; align-items: center; gap: 6px;
  color: var(--terracota-claro); font-weight: 700; font-size: .82rem;
  margin-bottom: 8px;
}
/* --------------------------------------------------------- chip de canal (US-A1)
 * Etiqueta pequeña y legible en la cabecera de cada tarjeta del comandero, sin abrir
 * el pedido. Imita el .chip de la web pública (web.css) pero en la paleta del panel. */
.chip.canal {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--superficie2); color: var(--tiza);
  border: 1px solid var(--borde);
  border-radius: 99px; padding: 1px 9px; font-size: .74rem; font-weight: 700;
  line-height: 1.5; white-space: nowrap;
}
.chip.canal.mostrador { background: #15303a; color: #8fd6ef; border-color: #2f6b86; }
.chip.canal.telefono  { background: #33240f; color: var(--dorado-claro); border-color: #6b4d21; }
.chip.canal.web       { background: #2c2418; color: var(--aviso); border-color: #6b4d21; }
.chip.canal.panel     { background: var(--superficie2); color: var(--tiza2); border-color: var(--borde); }
.chip.canal.otro      { background: var(--superficie2); color: var(--tiza2); border-color: var(--borde); }
@media (prefers-reduced-motion: reduce) {
  .tarjeta.rojo-cancelacion { animation: none; background: #3a1f1c; }
}
/* Barra de sonido: el boton de activar y el estado a la vista. Que se vea si el sonido
 * esta puesto o no es parte del requisito: un aviso que se cree encendido y no suena es peor. */
.barra-sonido { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.estado-sonido { font-size: .78rem; font-weight: 600; padding: 4px 9px; border-radius: 99px; }
.estado-sonido.on { background: #1c3324; color: var(--verde); border: 1px solid #2f5c3f; }
.estado-sonido.off { background: #3a1f1c; color: var(--terracota-claro); border: 1px solid var(--terracota); }

/* ------------------------------------------------------------------- botones */
.acciones { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
button.b {
  flex: 1 1 auto; min-height: var(--toque); border: 0; border-radius: 10px;
  font-size: .92rem; font-weight: 700; cursor: pointer; padding: 0 14px;
  background: var(--dorado); color: var(--pizarra);
}
button.b:disabled { opacity: .5; cursor: default; }
button.b.sec { background: transparent; color: var(--tiza); border: 1px solid var(--borde); }
button.b.ok { background: var(--verde); }
button.b.peligro { background: transparent; color: var(--terracota-claro); border: 1px solid var(--terracota); }
button.b.pequeno { flex: 0 0 auto; min-height: 40px; font-size: .8rem; padding: 0 12px; }
button.enlace { background: none; border: 0; color: var(--dorado-claro); font-size: .86rem;
  font-weight: 600; cursor: pointer; min-height: var(--toque); padding: 0 6px; }

/* ------------------------------------------------------------------- avisos */
.aviso { border-radius: 10px; padding: 10px 12px; font-size: .82rem; margin-bottom: 12px; line-height: 1.45; }
.aviso.info { background: #2c2418; border: 1px solid var(--aviso); color: var(--aviso); }
.aviso.malo { background: #3a1f1c; border: 1px solid var(--terracota); color: var(--terracota-claro); }
.aviso.bueno { background: #1c3324; border: 1px solid var(--verde); color: var(--verde); }
.vacio { text-align: center; color: var(--tiza2); padding: 46px 16px; font-size: .9rem; }
.vacio .g { display: block; font-size: 2rem; margin-bottom: 8px; opacity: .5; }

/* -------------------------------------------------------------------- carta */
.cat-tit { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 20px 0 8px; }
.cat-tit h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--dorado); margin: 0; font-weight: 700; }
.cat-tit .ops { display: flex; gap: 2px; }
.fila-p { display: flex; align-items: center; gap: 9px; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 10px; padding: 9px 11px; margin-bottom: 7px; }
.fila-p.inactivo { opacity: .55; }
.fila-p .np { flex: 1; min-width: 0; }
.fila-p .nm { font-size: .94rem; font-weight: 600; }
.fila-p .sb { font-size: .75rem; color: var(--tiza2); }
.precio-caja { display: flex; align-items: center; gap: 3px; background: var(--pizarra);
  border: 1px solid var(--borde); border-radius: 8px; padding: 0 8px; }
.precio-caja input { width: 64px; background: none; border: 0; color: var(--tiza);
  font-size: .95rem; font-weight: 600; text-align: right; padding: 12px 0;
  font-variant-numeric: tabular-nums; }
.precio-caja input:focus { outline: 2px solid var(--dorado); border-radius: 6px; }
.precio-caja span { color: var(--tiza2); font-size: .84rem; }

/* -------------------------------------------------------------------- modales */
.velo { position: fixed; inset: 0; background: rgba(10, 9, 8, .78); z-index: 50;
  display: none; align-items: flex-end; justify-content: center; }
.velo.abierto { display: flex; }
.modal { background: var(--pizarra2); border: 1px solid var(--borde); border-radius: 16px 16px 0 0;
  width: 100%; max-width: 640px; max-height: 92vh; overflow-y: auto; padding: 16px 14px 22px; }
.modal h2 { margin: 0 0 4px; font-size: 1.06rem; }
.modal .sub { font-size: .84rem; color: var(--tiza2); margin-bottom: 14px; }
.campo { margin-bottom: 13px; }
.campo label { display: block; font-size: .8rem; color: var(--tiza2); margin-bottom: 5px; font-weight: 600; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: var(--toque); background: var(--superficie); color: var(--tiza);
  border: 1px solid var(--borde); border-radius: 10px; padding: 11px 12px; font-size: 1rem;
  font-family: inherit;
}
.campo textarea { min-height: 84px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--dorado); outline-offset: -1px; }
.campo .pista { font-size: .75rem; color: var(--tiza2); margin-top: 4px; }
.item { background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px;
  padding: 11px; margin-bottom: 8px; }
.item.h { opacity: .55; }
.item label { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; }
.item input[type=checkbox] { width: 26px; height: 26px; flex: 0 0 auto; margin: 1px 0 0;
  accent-color: var(--verde); cursor: pointer; }
.item .nom { font-weight: 600; font-size: .95rem; }
h2.sec { font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: var(--tiza2);
  margin: 18px 0 8px; font-weight: 700; }

/* ---------------------------------------------------------------- apartados */
.bloque { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 13px; margin-bottom: 12px; }
.bloque h2 { margin: 0 0 4px; font-size: .95rem; }
.bloque .desc { font-size: .8rem; color: var(--tiza2); margin-bottom: 10px; }
.motivo { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--borde); }
.motivo:last-child { border-bottom: 0; }
.motivo .tx { flex: 1; min-width: 0; font-size: .92rem; }
.motivo .tx .int { color: var(--tiza2); font-size: .74rem; }
.motivo.apagado .tx { color: var(--tiza2); text-decoration: line-through; }
.motivo .ops { display: flex; gap: 2px; }
.motivo button { background: none; border: 0; color: var(--dorado-claro); cursor: pointer;
  font-size: .8rem; font-weight: 600; padding: 8px 6px; min-height: 40px; }
.motivo button.qui { color: var(--terracota-claro); }
.fila-ajuste { padding: 11px 0; border-bottom: 1px solid var(--borde); }
.fila-ajuste:last-child { border-bottom: 0; }
.fila-ajuste .et { font-size: .9rem; font-weight: 600; margin-bottom: 3px; }
.fila-ajuste .de { font-size: .78rem; color: var(--tiza2); margin-bottom: 7px; }
.fila-ajuste .meta { font-size: .72rem; color: var(--tiza2); margin-top: 5px; }
.pie { font-size: .72rem; color: var(--tiza2); text-align: center; padding: 20px 8px 8px; }

/* --------------------------------------------------------------------- login */
.acceso { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.acceso .caja { width: 100%; max-width: 380px; }
.acceso h1 { margin: 0 0 4px; font-size: 1.3rem; }
.acceso .lema { color: var(--tiza2); font-size: .86rem; margin-bottom: 22px; }
.acceso .pie-acceso { margin-top: 18px; border-top: 1px solid var(--borde); padding-top: 12px; }

@media (min-width: 700px) {
  .velo { align-items: center; }
  .modal { border-radius: 16px; max-height: 86vh; }
}

/* ----------------------------------------------------- interruptores del servicio */
/* Interruptor real: dos estados claros, se ve cual esta puesto. */
.sw { display: inline-flex; align-items: center; gap: 9px; background: var(--superficie2);
  border: 1px solid var(--borde); border-radius: 99px; padding: 7px 14px; min-height: 44px;
  cursor: pointer; font-weight: 700; font-size: .84rem; color: var(--tiza2); }
.sw .sw-c { width: 38px; height: 22px; border-radius: 99px; background: var(--borde);
  position: relative; transition: background .15s; flex: 0 0 auto; }
.sw .sw-c::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--tiza2); transition: transform .15s, background .15s; }
.sw.on { color: var(--pizarra); background: var(--verde); border-color: var(--verde); }
.sw.on .sw-c { background: rgba(0,0,0,.28); }
.sw.on .sw-c::after { transform: translateX(16px); background: var(--pizarra); }

/* Cabecera del comandero: estado del dia. Discreto cuando todo abierto, claro si no. */
.estado-dia { border-radius: 99px; padding: 6px 12px; font-size: .76rem; font-weight: 700;
  letter-spacing: .04em; margin-bottom: 10px; display: inline-block; }
.estado-dia.abierto { background: #1c3324; color: var(--verde); border: 1px solid #2f5c3f; }
.estado-dia.cerrado { background: #3a1f1c; color: var(--terracota-claro); border: 1px solid var(--terracota); }

/* Bloque «Servicio» de configuracion: cada interruptor con su estado y quien lo movio. */
.bloque.servicio .interruptor-fila { display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--borde); }
.bloque.servicio .interruptor-fila:last-of-type { border-bottom: 0; }
.int-cuerpo { flex: 1; min-width: 0; }
.int-tit { font-size: .92rem; font-weight: 600; }
.int-estado { font-size: .8rem; font-weight: 700; margin: 1px 0 2px; }
.int-estado.abierto { color: var(--verde); }
.int-estado.cerrado { color: var(--terracota-claro); }
.int-meta { font-size: .72rem; color: var(--tiza2); }
.bloque.servicio .aviso.suave { background: #2c2418; border: 1px solid var(--aviso);
  color: var(--aviso); margin: 12px 0 0; }

/* ---------------------------------------------------- marcat per pizza (comandero)
 * Un gest per marca: botons grans de polze, amb l'estat de cada línia a la vista i el
 * progrés del pedido («4 de 10 pizzes»). Pensat per a tablet, amb la mà a la feina. */
.progres-pizzes { font-size: .82rem; font-weight: 700; color: var(--dorado-claro);
  margin: 4px 0 10px; }
.item .nom-linia { display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; }
.item .estat-linia { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 99px;
  background: var(--superficie2); color: var(--tiza2); white-space: nowrap; }
.item.prep .estat-linia { background: #33240f; color: var(--dorado-claro); }
.item.forn .estat-linia { background: #3a1f1c; color: var(--terracota-claro); }
.item.h .estat-linia { background: #1c3324; color: var(--verde); }
.accions-linia { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
button.b.mini { flex: 0 1 auto; min-height: 46px; font-size: .84rem; padding: 0 12px;
  border-radius: 9px; line-height: 1.1; }