/* =========================================================================
   PMS Arco Iris · estilos de la operación diaria

   Caja, punto de venta, cocina, existencias y limpieza. Va aparte de
   estilos.css porque son pantallas de otro tipo: se usan de pie, con prisa
   y muchas veces en tablet, así que tienen sus propias reglas de tamaño y
   contraste.
   ========================================================================= */

:root{
  /* Los tres estados de una habitación. Van aquí arriba y no repartidos
     por el archivo para que cambiar un color sea cambiar una línea. */
  --verde-hab:   #14805E;
  --naranja-hab: #E07B22;
  --negro-hab:   #1C1C1C;
}

/* -------------------------------------------------------------------------
   Turno en la barra superior

   LobbyPMS y Frambuesa lo tienen siempre a la vista, y con razón: si no se
   ve, la gente vende sin haber abierto caja y al cierre no cuadra nada.
   ------------------------------------------------------------------------- */
.turno-chip{
  display:inline-flex; align-items:center; gap:8px; padding:5px 12px;
  border-radius:999px; font-size:12.5px; font-weight:600;
  border:1px solid var(--menta-linea); background:var(--menta); color:var(--acento);
  cursor:pointer;
}
.turno-chip.cerrado{ background:var(--alerta-suave); border-color:#F0D3B8; color:var(--alerta); }
.turno-chip .punto{ width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.turno-chip.abierto .punto{ animation:latir 2s ease-in-out infinite; }
@keyframes latir{ 0%,100%{opacity:1} 50%{opacity:.35} }

/* -------------------------------------------------------------------------
   Punto de venta
   ------------------------------------------------------------------------- */
.pos{ display:grid; grid-template-columns:1fr 340px; gap:16px; align-items:start; }
@media (max-width:1000px){ .pos{ grid-template-columns:1fr; } }

.pos-cats{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px; }
.pos-cat{
  padding:7px 13px; border-radius:999px; border:1px solid var(--linea-fuerte);
  background:var(--panel); font-size:13.5px; font-weight:550; cursor:pointer; white-space:nowrap;
}
.pos-cat:hover{ background:var(--panel-2); }
.pos-cat.activa{ background:var(--acento); border-color:var(--acento); color:#fff; }

.pos-rejilla{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:10px;
  max-height:62vh; overflow-y:auto; padding:2px;
}
.pos-prod{
  border:1px solid var(--linea); border-radius:10px; background:var(--panel);
  padding:11px 12px; text-align:left; cursor:pointer; min-height:82px;
  display:flex; flex-direction:column; justify-content:space-between;
  transition:border-color .12s, transform .06s;
}
.pos-prod:hover{ border-color:var(--acento); background:var(--menta); }
.pos-prod:active{ transform:scale(.98); }
.pos-prod b{ font-size:13px; font-weight:580; line-height:1.3; }
.pos-prod .precio{ font-size:14.5px; font-weight:680; margin-top:6px; }
.pos-prod .agotado{ font-size:10.5px; color:var(--peligro); font-weight:650; }

.carrito{ position:sticky; top:78px; }
.carrito-lineas{ max-height:42vh; overflow-y:auto; }
.linea{
  display:grid; grid-template-columns:1fr auto; gap:6px 10px;
  padding:9px 0; border-bottom:1px solid var(--linea); align-items:center;
}
.linea:last-child{ border-bottom:0; }
.linea b{ font-size:13.5px; font-weight:560; }
.linea .sub{ font-size:12px; color:var(--tinta-2); }
.linea .mando{ display:flex; align-items:center; gap:5px; }
.linea .mando button{
  width:25px; height:25px; border-radius:6px; border:1px solid var(--linea-fuerte);
  background:var(--panel); cursor:pointer; font-size:14px; line-height:1;
  display:grid; place-items:center; padding:0;
}
.linea .mando button:hover{ background:var(--panel-2); }
.linea .cant{ min-width:26px; text-align:center; font-weight:650; font-size:14px; }
.linea .quitar{ color:var(--peligro); border:0; background:transparent; cursor:pointer; font-size:15px; }

.totales{ padding-top:12px; border-top:2px solid var(--linea-fuerte); margin-top:10px; }
.total-linea{ display:flex; justify-content:space-between; font-size:13.5px; padding:3px 0; }
.total-linea.grande{ font-size:19px; font-weight:700; padding-top:8px; }

.pagos-rejilla{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:12px; }
.forma-btn{
  padding:11px; border-radius:9px; border:1px solid var(--linea-fuerte);
  background:var(--panel); cursor:pointer; font-size:13.5px; font-weight:560;
}
.forma-btn.activa{ background:var(--acento); border-color:var(--acento); color:#fff; }

/* -------------------------------------------------------------------------
   Pantalla de cocina

   Es un aparato, no una página: siempre oscura, letra grande y contraste
   alto, porque se mira de lejos, con vapor y con las manos ocupadas.
   ------------------------------------------------------------------------- */
.cocina{
  background:#0C1416; border-radius:12px; padding:16px; min-height:74vh;
  --k-linea:#24383D; --k-tinta:#EAF3F2; --k-tinta-2:#8FA9A7;
}
.cocina-barra{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding-bottom:14px; border-bottom:1px solid var(--k-linea); margin-bottom:16px;
  color:var(--k-tinta);
}
.cocina-barra h2{ color:var(--k-tinta); font-size:17px; }
.cocina-reloj{
  font-variant-numeric:tabular-nums; font-size:24px; font-weight:700;
  color:var(--k-tinta); margin-left:auto;
}
.cocina-rejilla{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:13px;
}
.ticket{
  background:#17272B; border:1px solid var(--k-linea); border-radius:11px;
  padding:14px; color:var(--k-tinta); display:flex; flex-direction:column; gap:9px;
}
.ticket.urgente{ border-color:#C9642B; box-shadow:0 0 0 1px #C9642B inset; }
.ticket .cab{ display:flex; align-items:baseline; gap:9px; }
.ticket .cab b{ font-size:17px; font-weight:700; }
.ticket .cab .espera{
  margin-left:auto; font-size:13px; color:var(--k-tinta-2); font-variant-numeric:tabular-nums;
}
.ticket.urgente .cab .espera{ color:#F0A55E; font-weight:650; }
.ticket .donde{ font-size:13px; color:var(--k-tinta-2); }
.ticket ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.ticket li{ display:flex; gap:9px; align-items:flex-start; font-size:15px; cursor:pointer; }
.ticket li .n{ font-weight:800; min-width:22px; color:#F6B33D; }
.ticket li .nota{ display:block; font-size:12.5px; color:#F0A55E; font-style:italic; }
.ticket li.hecho{ opacity:.4; text-decoration:line-through; }
.ticket .acciones{ display:flex; gap:7px; margin-top:3px; }
.ticket .acciones button{
  flex:1; padding:9px; border-radius:8px; border:1px solid var(--k-linea);
  background:#1F343A; color:var(--k-tinta); font-size:13.5px; font-weight:600; cursor:pointer;
}
.ticket .acciones button.listo{ background:#14805E; border-color:#14805E; color:#fff; }
.ticket .acciones button:hover{ filter:brightness(1.15); }
.cocina-vacio{ color:var(--k-tinta-2); text-align:center; padding:56px 20px; font-size:15px; }
.cocina-voz{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:12px 0 0; margin-top:16px; border-top:1px solid var(--k-linea);
  color:var(--k-tinta-2); font-size:12.5px;
}
.cocina-voz select, .cocina-voz input{
  background:#17272B; color:var(--k-tinta); border:1px solid var(--k-linea);
  border-radius:7px; padding:6px 9px; font-size:12.5px;
}
.cocina-voz button{
  background:#1F343A; color:var(--k-tinta); border:1px solid var(--k-linea);
  border-radius:7px; padding:6px 11px; font-size:12.5px; cursor:pointer;
}
/* Los pedidos ya listos. Filas flacas a propósito: no son trabajo, son
   gente esperando. No deben competir con los pendientes por la mirada. */
.cocina-listos{
  margin-top:16px; padding-top:12px; border-top:1px solid var(--k-linea);
  display:flex; flex-direction:column; gap:7px;
}
.listos-cab{ color:var(--k-tinta-2); font-size:12.5px; }
.listo-fila{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  background:#17272B; border:1px solid var(--k-linea); border-radius:9px;
  padding:9px 12px; color:var(--k-tinta); font-size:14px;
}
.listo-fila .hace{ color:var(--k-tinta-2); font-size:12px; margin-left:8px; }
.listo-fila button{
  background:#1F343A; color:var(--k-tinta); border:1px solid var(--k-linea);
  border-radius:7px; padding:7px 12px; font-size:13px; cursor:pointer;
}
.listo-fila button:hover{ background:#26424A; }

/* En la pantalla oscura el rojo de la marca no se lee: se aclaran los dos. */
.cocina-voz .mal{ color:#F0A093; }
.cocina-voz .bien{ color:#5FD3AC; }
.hablando{
  background:#14805E; color:#fff; border-radius:9px; padding:11px 15px;
  font-size:15px; font-weight:600; margin-bottom:14px;
  display:flex; align-items:center; gap:10px;
}

/* -------------------------------------------------------------------------
   Existencias
   ------------------------------------------------------------------------- */
.stock-bajo td{ background:var(--alerta-suave); }
.stock-negativo td{ background:var(--peligro-suave); }
.barra-stock{ height:5px; border-radius:3px; background:var(--linea); overflow:hidden; margin-top:4px; }
.barra-stock i{ display:block; height:100%; background:var(--exito); }
.barra-stock i.poco{ background:var(--alerta); }
.barra-stock i.nada{ background:var(--peligro); }

/* -------------------------------------------------------------------------
   Limpieza
   ------------------------------------------------------------------------- */
.limpieza-rejilla{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:10px;
}
.hab-tarjeta{
  border:1px solid var(--linea); border-radius:10px; padding:12px; background:var(--panel);
  cursor:pointer; transition:border-color .12s; text-align:left;
}
.hab-tarjeta:hover{ border-color:var(--acento); }
.hab-tarjeta b{ display:block; font-size:14px; font-weight:600; }
.hab-tarjeta small{ display:block; font-size:11.5px; color:var(--tinta-2); margin-top:2px; }

/* La franja de estado es gruesa a propósito: el tablero se mira de lejos y
   de reojo, así que el color tiene que leerse antes que el texto. */
.hab-tarjeta .marca{ display:block; height:9px; border-radius:5px; margin-bottom:10px; }
.hab-tarjeta.disponible  .marca{ background:var(--verde-hab); }
.hab-tarjeta.en_limpieza .marca{ background:var(--naranja-hab); }
.hab-tarjeta.bloqueado   .marca{ background:var(--negro-hab); }

.hab-tarjeta.disponible  { border-color:color-mix(in srgb, var(--verde-hab) 35%, var(--linea)); }
.hab-tarjeta.en_limpieza { border-color:color-mix(in srgb, var(--naranja-hab) 40%, var(--linea)); }
.hab-tarjeta.bloqueado   { border-color:color-mix(in srgb, var(--negro-hab) 30%, var(--linea)); }

/* La misma franja en las tarjetas de cifras del tablero, para que el
   resumen de arriba y las habitaciones de abajo hablen el mismo idioma. */
.cifra.estado-hab{ border-top:6px solid var(--linea); border-radius:var(--r); }
.cifra.estado-hab.disponible  { border-top-color:var(--verde-hab); }
.cifra.estado-hab.en_limpieza { border-top-color:var(--naranja-hab); }
.cifra.estado-hab.bloqueado   { border-top-color:var(--negro-hab); }

.punto-estado{
  display:inline-block; width:11px; height:11px; border-radius:3px; flex:none;
}
.punto-estado.disponible  { background:var(--verde-hab); }
.punto-estado.en_limpieza { background:var(--naranja-hab); }
.punto-estado.bloqueado   { background:var(--negro-hab); }

/* -------------------------------------------------------------------------
   Vueltas

   Es el número que el cajero mira con el cliente enfrente esperando su
   plata, así que va grande y separado de todo lo demás.
   ------------------------------------------------------------------------- */
.vueltas{
  margin-top:12px; padding:14px 16px; border-radius:10px;
  background:var(--exito-suave); border:2px solid #BEE5D7;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.vueltas small{
  display:block; font-size:11.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--exito);
}
.vueltas b{ font-size:30px; font-weight:760; color:var(--exito); line-height:1.1; }
.vueltas.falta{ background:var(--peligro-suave); border-color:#EBC4BF; }
.vueltas.falta small, .vueltas.falta b{ color:var(--peligro); }

/* -------------------------------------------------------------------------
   Cantidad editable en el punto de venta

   Cuando piden 20 unidades de algo, nadie va a tocar el "+" veinte veces.
   ------------------------------------------------------------------------- */
.linea .cant-editable{
  width:46px; text-align:center; font-weight:650; font-size:14px;
  border:1px solid var(--linea-fuerte); border-radius:6px; padding:3px 4px;
  font-variant-numeric:tabular-nums;
}
.linea .cant-editable:focus{
  outline:none; border-color:var(--acento); box-shadow:0 0 0 3px rgba(29,141,171,.14);
}

/* -------------------------------------------------------------------------
   Grupos de reserva

   Una familia que toma varias habitaciones se pinta del mismo color en el
   calendario, para reconocer de un vistazo que van juntos.
   ------------------------------------------------------------------------- */
.bloque.grupo-1{ background:#7C4DA0 !important; }
.bloque.grupo-2{ background:#B0562F !important; }
.bloque.grupo-3{ background:#2F6DB0 !important; }
.bloque.grupo-4{ background:#8A6D1F !important; }
.bloque.grupo-5{ background:#A03C63 !important; }
.bloque.grupo-6{ background:#3C7A5E !important; }
.bloque .marca-grupo{
  display:inline-block; margin-right:5px; font-size:10px; font-weight:800;
  background:rgba(255,255,255,.28); border-radius:4px; padding:0 4px;
}

/* -------------------------------------------------------------------------
   Lo que va a la cocina, al cobrar en la caja

   El cajero tiene que ver de un vistazo qué parte de la venta se va a
   imprimir allá y qué parte no. Por eso esta lista muestra solo las líneas
   de preparación, separadas del resto del carrito.
   ------------------------------------------------------------------------- */
.preparacion{
  list-style:none; margin:0 0 16px; padding:0;
  border:1px solid var(--linea); border-radius:10px; overflow:hidden;
}
.preparacion li{ padding:10px 12px; border-bottom:1px solid var(--linea); }
.preparacion li:last-child{ border-bottom:0; }

.preparacion-linea{ display:flex; align-items:center; gap:10px; }
.preparacion-linea .mono{ min-width:2ch; text-align:right; color:var(--tinta); }

/* Es un area de dos renglones y no un input de uno: la nota es lo que
   hace que un plato vuelva a la cocina, y en una linea fina no se veia. */
.preparacion-nota{ min-height:46px; resize:vertical; font-family:inherit; line-height:1.35; 
  width:100%; margin-top:6px; padding:6px 8px;
  border:1px dashed var(--linea); border-radius:8px;
  background:var(--panel-2); font-size:13px; color:var(--tinta);
}
.preparacion-nota:focus{
  outline:none; border-style:solid; border-color:var(--acento);
  background:var(--panel);
}

/* -------------------------------------------------------------------------
   ¿Este pedido va a la cocina?

   Tiene que verse SIEMPRE, no esconderse en un menú: el error que hay que
   evitar es que salga papel en la cocina cada vez que alguien compra una
   cerveza en el billar. Si el cajero lo ve, lo corrige antes de cobrar.
   ------------------------------------------------------------------------- */
.a-cocina{
  margin-bottom:14px; padding:12px;
  border:1px solid var(--linea); border-radius:10px;
  background:var(--panel-2);
}
.a-cocina.si{ border-color:var(--menta-linea); background:var(--menta); }

.a-cocina-titulo{
  display:block; font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em;
  color:var(--tinta-2); margin-bottom:8px;
}

.a-cocina-botones{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.a-cocina-botones button{
  padding:8px 6px; font-size:13px; font-weight:600;
  border:1px solid var(--linea); border-radius:8px;
  background:var(--panel); color:var(--tinta-2); cursor:pointer;
}
.a-cocina-botones button:hover{ border-color:var(--acento); }
.a-cocina-botones button.activo{
  background:var(--acento); border-color:var(--acento); color:#fff;
}

.a-cocina-pista{ margin:8px 0 0; font-size:12px; color:var(--tinta-2); }

/* Con comida no hay elección: la cocina tiene que enterarse. Se enseña
   como un hecho, no como un botón apagado, para no invitar a pelearse
   con algo que no va a ceder. */
.a-cocina-fijo{
  padding:8px 10px; border-radius:8px; text-align:center;
  background:var(--acento); color:#fff; font-size:13px; font-weight:600;
}

/* -------------------------------------------------------------------------
   El aviso para activar la bocina

   Solo aparece si el navegador se niega a sonar sin que nadie toque nada, y
   desaparece con el primer toque. Es grande a proposito: se mira desde el
   otro lado de una cocina, con las manos ocupadas, y si no se ve la
   pantalla se queda muda sin que nadie sepa por que.
   ------------------------------------------------------------------------- */
#aviso-bocina{
  display:block; width:100%; margin:0 0 16px; padding:22px 20px;
  border:none; border-radius:12px; cursor:pointer; text-align:center;
  background:var(--acento, #1D8DAB); color:#fff;
  font:inherit; box-shadow:0 8px 24px rgba(0,0,0,.18);
  animation:latido 1.6s ease-in-out infinite;
}
#aviso-bocina b{ display:block; font-size:26px; font-weight:700; }
#aviso-bocina span{ display:block; margin-top:6px; font-size:15px; opacity:.9; }
#aviso-bocina:active{ transform:scale(.99); }

@keyframes latido{
  0%, 100% { box-shadow:0 8px 24px rgba(0,0,0,.18); }
  50%      { box-shadow:0 8px 30px rgba(29,141,171,.55); }
}

/* Quien prefiera pantallas quietas no ve el latido. */
@media (prefers-reduced-motion: reduce){
  #aviso-bocina{ animation:none; }
}