/* =====================================================================
   Comandero Las Indianas
   Mobile-first: clientes y camareros entran desde su propio movil.
   ===================================================================== */

:root {
  --tinta:        #23201c;
  --tinta-suave:  #6b635a;
  --papel:        #f7f3ec;
  --papel-alto:   #fffdf9;
  --linea:        #e3dbcd;
  --marca:        #a8571f;
  --marca-oscura: #7d3f14;
  --ok:           #2f6b3f;
  --ok-fondo:     #e8f3ea;
  --alerta:       #a32b1c;
  --alerta-fondo: #fbeae7;
  --aviso:        #8a6414;
  --aviso-fondo:  #fdf3dd;
  --radio:        10px;
  --sombra:       0 1px 3px rgba(35, 32, 28, .10), 0 6px 18px rgba(35, 32, 28, .06);
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; font-weight: 700; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p  { margin: 0 0 .75rem; }
a  { color: var(--marca-oscura); }

.envoltorio { max-width: 900px; margin: 0 auto; padding: 0 1rem 4rem; }
.envoltorio--ancho { max-width: 1200px; }

/* --- Cabecera -------------------------------------------------------- */
.cabecera {
  background: var(--papel-alto);
  border-bottom: 1px solid var(--linea);
  padding: .85rem 1rem;
  position: sticky; top: 0; z-index: 20;
}
.cabecera__interior {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
}
.cabecera__marca { font-weight: 800; letter-spacing: .02em; text-decoration: none; color: var(--tinta); }
.cabecera__sub { color: var(--tinta-suave); font-size: .85rem; }
.cabecera__hueco { flex: 1 1 auto; }

/* --- Navegacion del admin -------------------------------------------- */
.nav { display: flex; gap: .25rem; flex-wrap: wrap; }
.nav a {
  display: inline-block; padding: .4rem .7rem; border-radius: 999px;
  text-decoration: none; color: var(--tinta-suave); font-size: .92rem; font-weight: 600;
}
.nav a:hover { background: var(--papel); color: var(--tinta); }
.nav a.activo { background: var(--marca); color: #fff; }

/* --- Tarjetas -------------------------------------------------------- */
.tarjeta {
  background: var(--papel-alto);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: var(--sombra);
}
.tarjeta__titulo { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
/* Titulo a la izquierda y su boton a la derecha. Es el patron mas repetido
   de la aplicacion y estaba escrito a mano —el mismo style en linea— en 24
   vistas. Las que se vayan tocando cambian el style por esta clase; barrer
   las 24 de golpe es el cambio con mas papeletas de chocar con otra sesion. */
.tarjeta__titulo--separado { justify-content: space-between; }
/* Un titulo dentro de esta barra no lleva margen propio: lo pone la barra.
   Tambien iba a mano en las mismas vistas. Como ahi el style en linea gana,
   esto no cambia nada de lo que ya hay: solo evita repetirlo de aqui en
   adelante. */
.tarjeta__titulo > h1,
.tarjeta__titulo > h2,
.tarjeta__titulo > h3 { margin: 0; }

.rejilla { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.dato { text-align: center; }
.dato__num { font-size: 2rem; font-weight: 800; line-height: 1; }
.dato__eti { color: var(--tinta-suave); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }

/* --- Botones --------------------------------------------------------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .62rem 1rem; border-radius: var(--radio);
  border: 1px solid var(--marca); background: var(--marca); color: #fff;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  min-height: 44px;                    /* objetivo tactil comodo */
}
.boton:hover { background: var(--marca-oscura); border-color: var(--marca-oscura); }
.boton:disabled { opacity: .5; cursor: not-allowed; }
.boton--suave { background: var(--papel-alto); color: var(--tinta); border-color: var(--linea); }
.boton--suave:hover { background: var(--papel); border-color: var(--tinta-suave); }
.boton--peligro { background: var(--alerta); border-color: var(--alerta); }
.boton--peligro:hover { background: #7d2015; border-color: #7d2015; }
.boton--pequeno { padding: .35rem .6rem; min-height: 34px; font-size: .85rem; }
.boton--bloque { width: 100%; }

.acciones { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* --- Formularios ----------------------------------------------------- */
.campo { margin-bottom: .9rem; }
.campo > label { display: block; font-weight: 600; margin-bottom: .25rem; font-size: .92rem; }
.campo__ayuda { color: var(--tinta-suave); font-size: .82rem; margin-top: .2rem; }

input[type=text], input[type=number], input[type=password], input[type=email],
input[type=tel], input[type=date], input[type=time], input[type=search],
select, textarea {
  width: 100%; padding: .6rem .7rem;
  border: 1px solid var(--linea); border-radius: var(--radio);
  background: #fff; font: inherit; color: var(--tinta);
  min-height: 44px;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--marca); outline-offset: 1px; border-color: var(--marca);
}
textarea { min-height: 80px; resize: vertical; }

.fila { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.casillas { display: grid; gap: .4rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.casilla { display: flex; align-items: center; gap: .5rem; font-size: .92rem; }
.casilla input { width: 20px; height: 20px; min-height: 0; flex: 0 0 auto; }
/* Casilla con objetivo tactil de verdad, para lo que se pulsa con prisa.
   `.casilla` a secas mide 23 px de alto: vale para una lista de alergenos
   o de habitaciones, que se rellenan sentado, pero no para elegir efectivo
   o tarjeta de pie y con el cliente delante. No se sube `.casilla` entera
   porque la usan las 22 habitaciones y los 14 alergenos, y ahi solo
   alargaria el formulario. Regla de DISENO.md: 44 px minimo. */
.casilla--toque { min-height: 44px; padding: .35rem .6rem; border: 1px solid var(--linea);
  border-radius: var(--radio); background: var(--papel-alto); }
.casilla--toque:has(input:checked) { border-color: var(--marca); }

/* --- Avisos ---------------------------------------------------------- */
.aviso {
  border-radius: var(--radio); padding: .8rem 1rem; margin-bottom: 1rem;
  border: 1px solid; font-size: .95rem;
}
.aviso--ok     { background: var(--ok-fondo);     border-color: #bcd9c4; color: var(--ok); }
.aviso--error  { background: var(--alerta-fondo); border-color: #eec4bd; color: var(--alerta); }
.aviso--alerta { background: var(--alerta-fondo); border-color: #eec4bd; color: var(--alerta); }
.aviso--info   { background: var(--aviso-fondo);  border-color: #ecd9a8; color: var(--aviso); }
.aviso a { color: inherit; font-weight: 700; }

/* --- Etiquetas ------------------------------------------------------- */
.etiqueta {
  display: inline-block; padding: .12rem .5rem; border-radius: 999px;
  font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  border: 1px solid;
}
.etiqueta--agotado { background: var(--alerta-fondo); border-color: #eec4bd; color: var(--alerta); }
.etiqueta--oculto  { background: #eee9e0; border-color: var(--linea); color: var(--tinta-suave); }
.etiqueta--revisar { background: var(--aviso-fondo); border-color: #ecd9a8; color: var(--aviso); }
.etiqueta--ok      { background: var(--ok-fondo); border-color: #bcd9c4; color: var(--ok); }

/* --- Tablas ---------------------------------------------------------- */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th, td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--linea); vertical-align: middle; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-suave); white-space: nowrap; }
td.num, th.num { text-align: right; white-space: nowrap; }
tr.atenuada td { opacity: .55; }

/* --- Carta del cliente ----------------------------------------------- */
.carta__mesa {
  background: var(--marca); color: #fff; text-align: center;
  padding: .6rem 1rem; font-weight: 700;
}
.carta__cat { margin: 1.75rem 0 .75rem; padding-bottom: .3rem; border-bottom: 2px solid var(--marca); }

.plato {
  display: flex; gap: 1rem; align-items: baseline;
  padding: .7rem 0; border-bottom: 1px dashed var(--linea);
}
.plato:last-child { border-bottom: 0; }
.plato__cuerpo { flex: 1 1 auto; min-width: 0; }
.plato__nombre { font-weight: 600; }
.plato__desc { color: var(--tinta-suave); font-size: .88rem; }
.plato__precio { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.plato--agotado .plato__nombre { text-decoration: line-through; color: var(--tinta-suave); }

.alergenos { margin-top: .3rem; display: flex; gap: .3rem; flex-wrap: wrap; }
.alergeno {
  font-size: .72rem; padding: .08rem .45rem; border-radius: 999px;
  background: #efe8dc; color: var(--tinta-suave); border: 1px solid var(--linea);
}
.alergeno--consulta { background: var(--aviso-fondo); border-color: #ecd9a8; color: var(--aviso); }

/* --- Acceso por PIN --------------------------------------------------- */
.pin-caja { max-width: 340px; margin: 3rem auto; text-align: center; }
.pin-puntos {
  display: flex; justify-content: center; gap: .6rem; margin: 1.25rem 0;
}
.pin-punto {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--tinta-suave); background: transparent;
}
.pin-punto.lleno { background: var(--marca); border-color: var(--marca); }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: 1rem; }
.tecla {
  padding: 1rem; font-size: 1.4rem; font-weight: 700;
  border: 1px solid var(--linea); border-radius: var(--radio);
  background: var(--papel-alto); color: var(--tinta); cursor: pointer;
  min-height: 60px;
}
.tecla:active { background: var(--marca); color: #fff; }
.tecla--accion { font-size: 1rem; font-weight: 600; }

/* --- Hoja de QR imprimible ------------------------------------------- */
.qr-hoja { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.qr-carta {
  border: 2px dashed var(--linea); border-radius: var(--radio);
  padding: 1.1rem; text-align: center; background: #fff;
  break-inside: avoid; page-break-inside: avoid;
}
.qr-carta__mesa { font-size: 2rem; font-weight: 800; margin-bottom: .1rem; }
.qr-carta__cod { margin: .7rem auto; width: 180px; height: 180px; }
.qr-carta__cod img, .qr-carta__cod canvas { width: 100%; height: 100%; display: block; }
.qr-carta__pie { font-size: .78rem; color: var(--tinta-suave); }

@media print {
  .no-imprimir { display: none !important; }
  body { background: #fff; }
  .envoltorio { max-width: none; padding: 0; }
  .qr-carta { border-style: solid; border-color: #ccc; }
}

/* --- Utilidades ------------------------------------------------------ */
.suave { color: var(--tinta-suave); }
.pequeno { font-size: .85rem; }
.centro { text-align: center; }
.mt { margin-top: 1rem; }
.mb { margin-bottom: 1rem; }
.nada { text-align: center; color: var(--tinta-suave); padding: 2.5rem 1rem; }

.solo-lectura {
  background: var(--aviso-fondo); border: 1px solid #ecd9a8; color: var(--aviso);
  border-radius: var(--radio); padding: .7rem 1rem; margin-bottom: 1rem; font-size: .9rem;
}

/* =====================================================================
   Fases 2-4: sala, cocina, cobro y tique
   ===================================================================== */

/* --- Tablero de sala ------------------------------------------------- */
.mesas-grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.mesa-card {
  display: flex; flex-direction: column; gap: .2rem; min-height: 110px;
  border: 1px solid var(--linea); border-radius: var(--radio); padding: .8rem;
  text-decoration: none; color: var(--tinta); background: var(--papel-alto);
  box-shadow: var(--sombra);
}
.mesa-card--libre { opacity: .8; }
.mesa-card--ocupada { border-color: var(--marca); border-left: 4px solid var(--marca); }
.mesa-card__num { font-weight: 800; font-size: 1.1rem; }
.mesa-card__nombre { font-size: .82rem; color: var(--tinta-suave); }
.mesa-card__total { margin-top: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.mesa-card__badges { display: flex; flex-wrap: wrap; gap: .25rem; }

.badge {
  display: inline-block; padding: .1rem .45rem; border-radius: 999px;
  font-size: .7rem; font-weight: 700; border: 1px solid;
}
.badge--validar, .badge--pendiente_validar { background: var(--aviso-fondo); border-color: #ecd9a8; color: var(--aviso); }
.badge--lista, .badge--servida { background: var(--ok-fondo); border-color: #bcd9c4; color: var(--ok); }
.badge--cocina, .badge--enviada, .badge--prep, .badge--en_preparacion { background: #eaf0f6; border-color: #c7d6e6; color: #33526f; }
.badge--anulada { background: var(--alerta-fondo); border-color: #eec4bd; color: var(--alerta); }

/* --- Cuenta de mesa -------------------------------------------------- */
.cuenta-cab {
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  background: var(--papel-alto); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: .8rem 1rem; margin-bottom: 1rem; box-shadow: var(--sombra);
}
.cuenta-cab__total { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.cuenta-cab .boton { margin-left: auto; }

.comanda { padding: .8rem; }
.comanda__cab { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.comanda__acciones { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; }

.linea { display: flex; align-items: flex-start; gap: .6rem; padding: .35rem 0; border-bottom: 1px dashed var(--linea); }
.linea:last-child { border-bottom: 0; }
.linea__txt { flex: 1 1 auto; min-width: 0; }
.linea__precio { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.linea__accion { margin: 0; }
.linea__mod { font-size: .82rem; color: var(--tinta-suave); padding-left: .8rem; }
.linea__nota { font-size: .82rem; color: var(--marca-oscura); }
.linea--anulada .linea__txt { text-decoration: line-through; color: var(--tinta-suave); }

/* --- Picker + carrito ------------------------------------------------ */
.pedido-cols { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 780px) { .pedido-cols { grid-template-columns: 1fr 1fr; align-items: start; } }
.picker__cat { border: 1px solid var(--linea); border-radius: var(--radio); margin-bottom: .5rem; background: var(--papel-alto); }
.picker__cat > summary { padding: .6rem .8rem; font-weight: 700; cursor: pointer; }
.picker__item {
  display: flex; justify-content: space-between; gap: .5rem; width: 100%;
  padding: .55rem .8rem; border: 0; border-top: 1px solid var(--linea);
  background: transparent; font: inherit; color: var(--tinta); text-align: left; cursor: pointer;
}
.picker__item:hover { background: var(--papel); }
.carrito { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel-alto); padding: 1rem; position: sticky; top: 70px; }
.carrito__it { display: flex; gap: .5rem; align-items: center; padding: .4rem 0; border-bottom: 1px dashed var(--linea); }
.carrito__it-txt { flex: 1 1 auto; min-width: 0; }
.carrito__it-ctrl { display: flex; align-items: center; gap: .3rem; }
.carrito__it-ctrl button { min-width: 32px; min-height: 32px; border: 1px solid var(--linea); border-radius: 8px; background: var(--papel); font: inherit; cursor: pointer; }
.carrito__pie { margin-top: .8rem; }
.carrito__total { margin-bottom: .5rem; font-size: 1.1rem; }

/* --- Cocina ---------------------------------------------------------- */
.cocina-grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ticket-coc {
  border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel-alto);
  padding: .8rem; box-shadow: var(--sombra); border-left: 5px solid var(--tinta-suave);
}
.ticket-coc--enviada { border-left-color: #33526f; }
.ticket-coc--en_preparacion { border-left-color: var(--aviso); }
.ticket-coc--lista { border-left-color: var(--ok); opacity: .85; }
.ticket-coc__cab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .4rem; }
.ticket-coc__mesa { font-weight: 800; font-size: 1.1rem; }
.ticket-coc__lineas { list-style: none; margin: 0 0 .6rem; padding: 0; }
.ticket-coc__lineas li { padding: .25rem 0; border-bottom: 1px dashed var(--linea); }
.tag-destino { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; background: #eaf0f6; color: #33526f; padding: .05rem .35rem; border-radius: 999px; }

/* --- Modal ----------------------------------------------------------- */
.modal-fondo {
  position: fixed; inset: 0; background: rgba(35,32,28,.5); z-index: 100;
  display: flex; align-items: flex-end; justify-content: center; padding: 0;
}
/* Un `display` puesto por nosotros GANA al atributo `hidden` del navegador.
   Sin esta linea, un <div class="modal-fondo" hidden> sigue ocupando la
   pantalla entera: se ve el velo oscuro y se traga todos los clics. */
.modal-fondo[hidden] { display: none; }
@media (min-width: 620px) { .modal-fondo { align-items: center; padding: 1rem; } }
.modal {
  background: var(--papel-alto); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto;
  border-radius: var(--radio) var(--radio) 0 0; padding: 1.2rem; box-shadow: var(--sombra);
}
@media (min-width: 620px) { .modal { border-radius: var(--radio); } }

/* --- Barra flotante del pedido del cliente --------------------------- */
.pedido-barra { position: fixed; left: 0; right: 0; bottom: 0; padding: .7rem 1rem; background: var(--papel-alto); border-top: 1px solid var(--linea); box-shadow: 0 -4px 16px rgba(35,32,28,.1); z-index: 40; }
.pedido-barra .boton { max-width: 900px; margin: 0 auto; }
.plato__add { margin-left: .5rem; min-width: 44px; min-height: 44px; border-radius: 999px; border: 1px solid var(--marca); background: var(--marca); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.plato__add--ok { background: var(--ok); border-color: var(--ok); }
.plato__precio { display: flex; align-items: center; }

/* --- Tique / justificante ------------------------------------------- */
.tique {
  max-width: 340px; margin: 0 auto; background: #fff; border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 1.2rem; font-variant-numeric: tabular-nums;
}
.tique__cab { text-align: center; margin-bottom: .6rem; }
.tique__local { font-weight: 800; font-size: 1.1rem; }
.tique__tit { text-align: center; font-weight: 800; letter-spacing: .04em; margin-top: .4rem; }
.tique__meta { border-top: 1px dashed var(--linea); border-bottom: 1px dashed var(--linea); padding: .5rem 0; margin-bottom: .5rem; }
.tique__meta div { display: flex; justify-content: space-between; }
.tique__ln { display: flex; justify-content: space-between; gap: 1rem; padding: .15rem 0; }
.tique__mod { font-size: .8rem; color: var(--tinta-suave); padding-left: 1rem; }
.tique__total { display: flex; justify-content: space-between; font-weight: 800; font-size: 1.15rem; border-top: 2px solid var(--tinta); margin-top: .5rem; padding-top: .5rem; }
.tique__iva { border-top: 1px dashed var(--linea); margin-top: .6rem; padding-top: .5rem; }
.tique__pie { margin-top: .8rem; }

@media print {
  .tique { border: 0; max-width: none; }
}

/* --- Fotos de producto ---------------------------------------------- */
.foto-plato-admin { max-width: 220px; max-height: 220px; border-radius: var(--radio); border: 1px solid var(--linea); display: block; }
.prod-fila { display: flex; gap: .6rem; align-items: center; }
.foto-miniatura { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; border: 1px solid var(--linea); flex: 0 0 auto; }
.plato__foto { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--linea); flex: 0 0 auto; align-self: center; }

/* --- Historial de cocina -------------------------------------------- */
.cocina-hist .ticket-coc { opacity: .72; }
.cocina-hist .ticket-coc:hover { opacity: 1; }
.ticket-coc--validar { border-left-color: var(--aviso); background: var(--aviso-fondo); }
.tique--anulado { opacity: .6; border-color: var(--alerta); }

/* --- Carta del cliente: pensada para el movil -----------------------
   Es una carta que se abre con el QR desde el telefono. En pantallas
   grandes se muestra igualmente como una columna estrecha tipo movil,
   para que se vea y se pruebe como lo vera el cliente. */
body.cliente .cabecera__interior,
body.cliente main.envoltorio,
body.cliente footer.envoltorio { max-width: 500px; }
body.cliente .carta__mesa { max-width: 500px; margin: 0 auto; border-radius: 0 0 var(--radio) var(--radio); }
body.cliente .pedido-barra .boton { max-width: 500px; }
body.cliente { background: var(--papel); }
@media (min-width: 520px) {
  body.cliente { background: #efe7d8; }           /* marco alrededor del "movil" */
  body.cliente main.envoltorio { background: var(--papel); }
}

/* =====================================================================
   Alojamiento / recepcion
   ===================================================================== */
.res-grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.res-card {
  border: 1px solid var(--linea); border-left: 5px solid var(--tinta-suave);
  border-radius: var(--radio); background: var(--papel-alto);
  padding: .8rem; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: .3rem;
}
.res-card--debe   { border-left-color: var(--alerta); }
.res-card--pagado { border-left-color: var(--ok); }
/* Ha entrado sola del canal y no la ha visto nadie. El borde izquierdo ya
   dice si debe o no, asi que lo nuevo se marca rodeando la tarjeta entera
   — que es lo que hace que salte a la vista entre las demas. */
.res-card--nueva  { border-color: var(--aviso); background: var(--aviso-fondo); }

/* Cuanta gente duerme esta noche, al otro extremo de la fila de la fecha. */
.ocupacion {
  white-space: nowrap; padding: .25rem .6rem; border-radius: var(--radio);
  background: var(--papel-alto); border: 1px solid var(--linea);
}
.ocupacion strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.res-card__cab { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.res-card__nombre { font-weight: 700; text-decoration: none; color: var(--tinta); }
.res-card__hab { font-weight: 800; white-space: nowrap; }
.res-card__avisos { display: flex; gap: .25rem; flex-wrap: wrap; }
.res-card__pie {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  flex-wrap: wrap; margin-top: auto; padding-top: .4rem; border-top: 1px dashed var(--linea);
}
.res-card__saldo { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Barra proporcional de los informes */
.barra { background: var(--papel); border: 1px solid var(--linea); border-radius: 999px; height: 12px; overflow: hidden; }
.barra span { display: block; height: 100%; background: var(--marca); }

/* --- Campos de fecha -------------------------------------------------
   Los `input[type=date]` nativos son incomodos en el ordenador: el campo
   es estrecho y solo abre el calendario si aciertas con el iconito. Aqui
   se les da el mismo aspecto que al resto de campos, se agranda el icono
   y (con fechas.js) se abre el selector pulsando en cualquier parte. */
input[type=date], input[type=time] {
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  min-width: 9.5rem;
}
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  padding: .25rem;
  margin-left: .25rem;
  border-radius: 6px;
  opacity: .75;
  filter: invert(31%) sepia(46%) saturate(1478%) hue-rotate(348deg) brightness(94%) contrast(88%);
}
input[type=date]::-webkit-calendar-picker-indicator:hover,
input[type=time]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background: var(--papel);
}
input[type=date]:focus, input[type=time]:focus { cursor: text; }

/* Fila de atajos («Hoy», «Este mes»…) pegada a su campo de fecha. */
.atajos { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; margin-top: .35rem; }
.atajos button, .atajos a {
  border: 1px solid var(--linea); background: var(--papel-alto); color: var(--tinta-suave);
  border-radius: 999px; padding: .2rem .6rem; font: inherit; font-size: .8rem;
  cursor: pointer; text-decoration: none; min-height: 0;
}
.atajos button:hover, .atajos a:hover { background: var(--marca); border-color: var(--marca); color: #fff; }
.atajos .atajo--activo { background: var(--marca); border-color: var(--marca); color: #fff; }

/* --- Planing de personal y control horario ---------------------------
   El cuadrante es una tabla ancha de verdad (7 dias x N funciones), asi
   que en el movil se desliza en horizontal con la columna de la funcion
   pegada a la izquierda; sin eso no se sabe que fila se esta mirando. */
.plan-nav {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  margin-bottom: .9rem;
}
.plan-nav strong { font-variant-numeric: tabular-nums; }

.plan-tabla { font-size: .88rem; }
.plan-tabla td { vertical-align: top; min-width: 8.5rem; }
.plan-tabla__eti {
  position: sticky; left: 0; z-index: 1;
  background: var(--papel-alto);
  border-right: 1px solid var(--linea);
  white-space: normal; min-width: 7rem; max-width: 9rem;
  font-weight: 600; text-transform: none; font-size: .85rem; color: var(--tinta);
}
thead .plan-tabla__eti { color: var(--tinta-suave); }
.plan-tabla th a { color: inherit; }
.plan-hoy { background: color-mix(in srgb, var(--marca) 8%, transparent); }

.plan-chip {
  display: block; text-decoration: none; color: inherit;
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: 8px; padding: .25rem .4rem; margin-bottom: .25rem;
  line-height: 1.25;
}
.plan-chip:hover { border-color: var(--marca); }
.plan-chip__quien { font-weight: 600; display: block; }
.plan-chip__hora { color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.plan-chip__dur  { font-variant-numeric: tabular-nums; }
.plan-chip__hora + .plan-chip__dur::before { content: ' · '; color: var(--tinta-suave); }

/* El «+» de cada celda. 44px de alto para poder darle con el dedo. */
.plan-mas {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; border: 1px dashed var(--linea); border-radius: 8px;
  color: var(--tinta-suave); text-decoration: none; font-size: 1.2rem;
}
.plan-mas:hover { border-color: var(--marca); color: var(--marca); }

.plan-libres td { background: var(--papel); }
.plan-libre {
  display: inline-block; background: var(--papel-alto); border: 1px solid var(--linea);
  border-radius: 999px; padding: .1rem .5rem; margin: .1rem .15rem 0 0; font-size: .82rem;
}

/* Un turno en la pantalla del dia */
.plan-fila {
  display: flex; justify-content: space-between; align-items: center; gap: .6rem;
  flex-wrap: wrap; padding: .45rem 0; border-bottom: 1px solid var(--linea);
}
.plan-fila:last-child { border-bottom: 0; }
.plan-fila__txt { flex: 1 1 12rem; }

/* Formulario de alta rapida: en el movil una columna, en el ordenador cuatro. */
.plan-form { display: grid; gap: 0 .8rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.plan-libres-botones { display: flex; flex-wrap: wrap; gap: .4rem; }

/* Casillas de personas al anadir un turno. Etiqueta entera pulsable y
   44px de alto: se usa con el dedo y muchas veces con prisa. */
.plan-quienes { display: flex; flex-wrap: wrap; gap: .4rem; }
.plan-quien {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1px solid var(--linea); border-radius: 999px;
  padding: .35rem .8rem; min-height: 44px; cursor: pointer;
  background: var(--papel-alto); user-select: none;
}
.plan-quien input { width: auto; min-height: 0; min-width: 1.1rem; margin: 0; }
.plan-quien:has(input:checked) { border-color: var(--marca); background: var(--papel); font-weight: 600; }
.plan-quien--libra span { color: var(--tinta-suave); }

/* Horario de una persona y cierre mensual */
.plan-hora { display: inline-block; min-width: 3.2rem; font-variant-numeric: tabular-nums; }
.plan-dia--hoy { border-color: var(--marca); }
.plan-cierre__total td { border-top: 1px solid var(--linea); background: var(--papel); }

/* --- Fichar ----------------------------------------------------------
   Se usa de pie y con prisa: lo importante cabe sin desplazar y el boton
   es lo mas grande de la pantalla, imposible de fallar con el dedo. */
.fichar { max-width: 26rem; margin: 0 auto; }
.fichar__saludo { text-align: center; font-size: 1.05rem; margin: 0 0 .8rem; }
.fichar__estado {
  text-align: center; background: var(--papel-alto);
  border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 1.1rem 1rem; margin-bottom: 1rem;
}
.fichar__estado--dentro { border-color: var(--marca); }
.fichar__eti  { margin: 0; color: var(--tinta-suave); font-size: .85rem;
                text-transform: uppercase; letter-spacing: .04em; }
.fichar__hora { margin: .1rem 0; font-size: 3rem; font-weight: 800; line-height: 1;
                font-variant-numeric: tabular-nums; }
.fichar__fun  { margin: 0; color: var(--tinta-suave); }
.fichar__lleva{ margin: .5rem 0 0; }

.fichar__boton { font-size: 1.25rem; padding: 1.1rem; min-height: 4rem; }
.fichar__boton--entrar { background: #2e7d32; border-color: #2e7d32; }
.fichar__boton--salir  { background: #b3261e; border-color: #b3261e; }

.fichar__funciones { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.plan-quien--otra span { color: var(--tinta-suave); }

/* Corregir un fichaje: se despliega dentro de su fila */
.plan-corregir { display: grid; gap: .4rem; padding: .6rem 0; min-width: 15rem; }
.plan-corregir label { display: block; }
.plan-desv--mas   { color: #b3261e; font-weight: 600; }
.plan-desv--menos { color: var(--tinta-suave); }

/* Desplegables del menu de cabecera («Gestión», «Otros»). Van con
   <details>, sin libreria: el triangulito por defecto se quita y la caja
   se coloca debajo, flotando sobre la pagina. */
.nav-grupo { position: relative; display: inline-block; }
.nav-grupo > summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: .35rem .6rem; border-radius: 6px; white-space: nowrap;
}
.nav-grupo > summary::-webkit-details-marker { display: none; }
.nav-grupo > summary::after { content: ' ▾'; opacity: .6; font-size: .8em; }
.nav-grupo__caja {
  position: absolute; top: 100%; left: 0; z-index: 20; min-width: 10rem;
  background: var(--papel-alto); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra); padding: .3rem;
  display: flex; flex-direction: column;
}
.nav-grupo__caja a { display: block; padding: .55rem .6rem; border-radius: 6px; white-space: nowrap; }

/* En el movil el menu se desliza en horizontal, y una caja flotante
   quedaria cortada por el borde: alli se despliega en su sitio. */
@media (max-width: 640px) {
  .nav-grupo__caja { position: static; box-shadow: none; margin-top: .25rem; }
}

/* Navegador del planing: el paso a paso a la izquierda y los
   desplegables de mes y ano pequenos, al otro extremo de la fila. */
.plan-nav__hueco { flex: 1 1 auto; }
.plan-nav__ir { display: flex; gap: .3rem; margin: 0; }
.plan-nav__ir select {
  width: auto; min-width: 0; font-size: .82rem;
  padding: .25rem 1.4rem .25rem .5rem; min-height: 0;
}
.plan-semanas { margin: -.4rem 0 .9rem; }

/* Campos de hora del planing. Son de texto —no `type=time`— para poder
   escribir del tiron: el selector nativo obliga a saltar de casilla y
   metiendo cuarenta turnos seguidos es un suplicio. */
.campo-hora {
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  max-width: 7rem;
}

/* --- Arrastrar turnos por el cuadrante -------------------------------
   El turno que se coge se queda medio borrado en su sitio y lo que sigue
   al dedo es una copia; asi se ve de donde sale y adonde va. */
.plan-celda { transition: background .12s; }
.plan-celda--destino {
  background: color-mix(in srgb, var(--marca) 18%, transparent);
  outline: 2px dashed var(--marca); outline-offset: -2px;
}
.plan-chip--cogido { opacity: .35; }
.plan-chip--fantasma {
  position: fixed; z-index: 200; pointer-events: none;
  transform: translate(-50%, -50%) rotate(-2deg);
  box-shadow: 0 8px 20px rgba(35,32,28,.28);
  border-color: var(--marca); background: var(--papel-alto);
  opacity: .95;
}
/* Mientras se arrastra no se selecciona texto ni se desplaza la pagina. */
.plan-arrastrando { user-select: none; -webkit-user-select: none; overflow: hidden; }
.plan-arrastrando .plan-chip { cursor: grabbing; }
.plan-celda .plan-chip { cursor: grab; }

.plan-pista { margin: -.3rem 0 .9rem; }
@media (hover: hover) { .plan-pista__movil { display: none; } }

/* --- Mantenimiento ---------------------------------------------------
   La miniatura de la lista: cuadrada y pequena para que la fila siga
   leyendose de un vistazo en el movil. Sin foto se pone un icono en su
   hueco, para que las filas no bailen. */
.mant-mini {
  width: 44px; height: 44px; object-fit: cover; display: block;
  border-radius: var(--radio); border: 1px solid var(--linea); background: var(--papel);
}
.mant-mini--vacia {
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
/* La foto del parte, a lo ancho pero sin comerse la pantalla: se mira
   para saber que pieza hace falta, no para admirarla. */
.mant-foto {
  max-width: 100%; max-height: 420px; border-radius: var(--radio);
  border: 1px solid var(--linea); display: block;
}

/* --- Selector de albergue --- */
/* Solo aparece cuando la persona tiene mas de uno. Va pegado a la marca y
   no dentro del menu a proposito: no es «una pantalla mas» sino el
   contexto de TODO lo demas, y trabajar sin saber en que albergue estas
   es como se le cobra a la habitacion de otro sitio. */
.nav-sede > summary {
  font-weight: 600;
  white-space: nowrap;
}
/* Las opciones son <button> porque cambiar de sede es un POST (lleva
   CSRF), pero tienen que parecer los enlaces del menu de al lado. */
.nav-sede__opcion {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer;
  font: inherit; color: var(--tinta);
  padding: .6rem .9rem; min-height: 44px; border-radius: var(--radio);
}
.nav-sede__opcion:hover { background: var(--papel); }
.nav-sede__opcion.activo { color: var(--marca); font-weight: 600; }
/* Cuando hay varios albergues el selector hace de marca: es lo primero
   que se lee y lo que dice donde estas trabajando. */
.nav-sede--marca > summary {
  font-size: 1.05rem; font-weight: 700; color: var(--marca);
  padding-left: 0;
}

/* --- Calendario de ocupacion --- */
/* Una fila por unidad y una columna por dia. El color hace el trabajo: una
   parrilla de 682 celdas con texto dentro no la lee nadie, y lo que se
   necesita de un vistazo es «que dias estan pillados». El detalle sale al
   pasar por encima (title). */
.cal { border-collapse: collapse; font-size: .8rem; }
.cal__eti {
  position: sticky; left: 0; z-index: 1;
  background: var(--papel-alto); white-space: nowrap;
  padding: .25rem .6rem; border-right: 1px solid var(--linea);
}
.cal__dia {
  width: 22px; min-width: 22px; text-align: center;
  padding: .25rem 0; color: var(--tinta-suave); font-weight: 500;
}
.cal__dia--hoy { color: var(--marca); font-weight: 700; }
.cal__zona td {
  background: var(--papel); font-weight: 600;
  padding: .3rem .6rem; border-top: 1px solid var(--linea);
}
.cal-c {
  width: 22px; height: 26px; padding: 0;
  border: 1px solid var(--papel-alto);
}
.cal-c--libre   { background: var(--papel); }
.cal-c--reserva { background: var(--marca); }
.cal-c--grupo   { background: var(--marca-oscura); }
.cal-c--lh      { background: var(--aviso); }
.cal-c--bloqueo { background: var(--linea); }
/* El choque tiene que cantar: es una reserva viva sobre fechas cedidas o
   cerradas, y si no se ve llegan dos grupos a la misma habitacion. */
.cal-c--choque  { background: var(--alerta); }

.cal-leyenda { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .85rem; }
.cal-leyenda span { display: inline-flex; align-items: center; gap: .35rem; }
.cal-m {
  display: inline-block; width: 14px; height: 14px;
  border-radius: 3px; border: 1px solid var(--linea);
}
.cal-m--libre   { background: var(--papel); }
.cal-m--reserva { background: var(--marca); }
.cal-m--grupo   { background: var(--marca-oscura); }
.cal-m--lh      { background: var(--aviso); }
.cal-m--bloqueo { background: var(--linea); }
.cal-m--choque  { background: var(--alerta); }

/* --- Seleccionar en el calendario --- */
/* Se pincha y se arrastra para abrir una reserva. Ver
   assets/js/calendario-seleccion.js. */
.cal-c--sel {
  background: var(--ok) !important;
  outline: 1px solid var(--ok);
}
/* Lo que ya esta pillado dentro de la seleccion: se ve en el acto, sin
   preguntar al servidor, y el panel se niega a abrirse. */
.cal-c--sel-mal {
  background: var(--alerta) !important;
  outline: 1px solid var(--alerta);
}
/* Mientras se arrastra no se selecciona texto ni se desplaza la pagina:
   con el dedo, cualquiera de las dos cosas rompe el gesto. */
body.cal-seleccionando {
  user-select: none; -webkit-user-select: none;
  touch-action: none;
}
body.cal-seleccionando .cal-c { cursor: crosshair; }
/* Las celdas libres invitan a pinchar; las ocupadas, no. */
.cal-c--libre { cursor: cell; }
/* La reserva que se esta mirando, marcada entera y no solo la celda que se
   pulso: lo que se quiere saber es hasta donde llega. */
.cal-c--mirando {
  outline: 2px solid var(--tinta);
  outline-offset: -2px;
}

/* --- Mantenimiento: varias fotos por parte ---------------------------
   Rejilla que se adapta sola: una columna en el movil, las que quepan en
   pantalla grande. Sin anchos fijos, para que no desborde a 375 px. */
.mant-galeria {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.mant-foto-caja { margin: 0; }
.mant-foto-caja figcaption { margin-top: .35rem; }
/* Las que aun no se han subido: la miniatura con su boton de quitar al
   lado, para poder descartar una foto movida antes de mandarla. */
.mant-nueva { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }