/* --- Tipografías locales -------------------------------------------------
   Se incluyen en el paquete, no se cargan desde internet: recepción tiene que
   poder operar con el módem apagado y ver exactamente lo mismo. */

@font-face { font-family: "Fraunces"; src: url("/static/fuentes/fraunces-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/static/fuentes/fraunces-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/static/fuentes/figtree-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/static/fuentes/figtree-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/static/fuentes/figtree-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/static/fuentes/figtree-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/static/fuentes/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/static/fuentes/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/static/fuentes/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  /* Superficies: verde de postigo pintado y papel marfil. */
  /* Verde y dorado tomados del logo del hotel. */
  --tinta:      #013d2d;
  --tinta-2:    #0a5240;
  --tinta-3:    #176b55;
  --papel:      #f5f1e8;
  --superficie: #ffffff;
  --linea:      #e5ddcf;
  --linea-2:    #efe9dd;

  /* Texto en negro cálido, no en gris azulado. */
  --texto:      #221f1a;
  --texto-2:    #6b6459;
  --texto-3:    #9c9488;
  --texto-inv:  #f4f1ea;

  /* Latón del llavero de recepción. */
  --laton:      #b58a35;
  --laton-claro:#c69b49;
  --laton-suave:#fbf5e7;

  /* Estados operativos */
  --vendible:   #2f7d57;
  --vendible-f: #e6f2ea;
  --ocupada:    #2b5fa4;
  --ocupada-f:  #e6ecf6;
  --bloqueada:  #b4442f;
  --bloqueada-f:#fbeae5;

  --radio:      9px;
  --radio-chico:6px;

  /* Sombras cálidas y en capas: las tarjetas se sienten como objetos
     apoyados sobre el papel, no como rectángulos dibujados encima. */
  --sombra:     0 1px 2px rgba(60, 45, 25, .05), 0 3px 10px rgba(60, 45, 25, .05);
  --sombra-alta:0 2px 4px rgba(60, 45, 25, .06), 0 10px 28px rgba(60, 45, 25, .09);

  --fuente: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --titular: "Fraunces", Georgia, serif;
  --mono: "Plex Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--fuente);
  background: var(--papel);
  color: var(--texto);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* --- Estructura ---------------------------------------------------------- */

.marco {
  display: grid;
  grid-template-columns: 208px 1fr;
  min-height: 100vh;
}

.barra {
  background: var(--tinta);
  color: var(--texto-inv);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.marca {
  flex-shrink: 0;
  padding: 18px 18px 15px;
  border-bottom: 1px solid var(--tinta-3);
}

.marca__nombre {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.25;
}

.marca__lugar {
  margin-top: 3px;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--laton-claro);
}

/* Motivo de llavero: la marca del hotel colgando de una anilla de latón. */
.marca::before {
  content: "";
  display: block;
  width: 13px;
  height: 13px;
  border: 2px solid var(--laton);
  border-radius: 50%;
  margin-bottom: 12px;
}

.menu { padding: 8px 10px; flex: 1; overflow-y: auto; min-height: 0; }
.menu::-webkit-scrollbar { width: 5px; }
.menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 3px; }

.menu__grupo {
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-3);
  padding: 14px 8px 6px;
}

.menu a {
  display: block;
  padding: 7px 10px;
  color: #b9c3ce;
  text-decoration: none;
  border-radius: var(--radio);
  font-size: 13.5px;
  border-left: 2px solid transparent;
}

.menu a:hover { background: var(--tinta-2); color: var(--texto-inv); }

.menu a.activo {
  background: var(--tinta-2);
  color: #fff;
  border-left-color: var(--laton);
  font-weight: 500;
}

.menu a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--laton-claro);
  outline-offset: 1px;
}

.pie-barra {
  flex-shrink: 0;
  padding: 12px 18px;
  border-top: 1px solid var(--tinta-3);
  font-size: 10.5px;
  color: var(--texto-3);
  line-height: 1.6;
}

.lienzo { padding: 26px 30px 60px; max-width: 1180px; }

/* --- Encabezados --------------------------------------------------------- */

.cabecera {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 16px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--linea);
}

h1 {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.015em;
  margin: 0;
}

.cabecera__nota { color: var(--texto-2); font-size: 13px; margin-top: 3px; }

h2 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--texto-2);
  margin: 30px 0 12px;
}

/* --- Tarjetas y métricas -------------------------------------------------- */

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 18px 20px;
}

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

.metrica { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px 16px; }
.metrica__etiqueta { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); }
.metrica__valor { font-family: var(--mono); font-size: 25px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin-top: 5px; }
.metrica__pie { font-size: 11.5px; color: var(--texto-3); margin-top: 2px; }

/* --- Tablero de habitaciones (elemento distintivo) ------------------------ */

.tablero {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}

.celda {
  position: relative;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-top: 3px solid var(--vendible);
  border-radius: var(--radio);
  padding: 10px 11px 11px;
  overflow: hidden;
}

.celda__numero {
  font-family: var(--mono);
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1;
}

.celda__tipo { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); margin-top: 5px; }
.celda__estado { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .06em; margin-top: 7px; }

/* Color = si se puede vender */
.celda[data-venta="ocupada"]  { border-top-color: var(--ocupada); }
.celda[data-venta="bloqueada"]{ border-top-color: var(--bloqueada); }

.celda[data-venta="vendible"]  .celda__estado { color: var(--vendible); }
.celda[data-venta="ocupada"]   .celda__estado { color: var(--ocupada); }
.celda[data-venta="bloqueada"] .celda__estado { color: var(--bloqueada); }

/* Textura = si está lista. Franjas diagonales sobre lo que falta limpiar. */
.celda[data-limpia="no"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    -45deg,
    rgba(20, 26, 33, .055) 0 4px,
    transparent 4px 9px
  );
}

.leyenda { display: flex; flex-wrap: wrap; gap: 16px; margin: 12px 0 4px; font-size: 12px; color: var(--texto-2); }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.marca-color { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.marca-textura { width: 14px; height: 12px; border: 1px solid var(--linea); background: repeating-linear-gradient(-45deg, rgba(20,26,33,.12) 0 3px, transparent 3px 7px); }

/* --- Tablas -------------------------------------------------------------- */

table { width: 100%; border-collapse: collapse; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); }
thead th {
  text-align: left;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-2);
  font-weight: 600;
  padding: 10px 12px;
  border-bottom: 1px solid var(--linea);
  background: #f7f8f9;
  white-space: nowrap;
}
tbody td { padding: 9px 12px; border-bottom: 1px solid var(--linea-2); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #fafbfb; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* Cuadrícula de disponibilidad */
.rejilla-disp { overflow-x: auto; }
.rejilla-disp table { min-width: 640px; }
.rejilla-disp .fin-semana { background: #f4f6f8; }
.libre-alto { color: var(--vendible); font-weight: 600; }
.libre-bajo { color: var(--laton); font-weight: 600; }
.libre-nulo { color: var(--bloqueada); font-weight: 600; }

/* --- Formularios --------------------------------------------------------- */

.formulario { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 18px; }
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo label { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); font-weight: 600; }
.campo input, .campo select {
  font-family: var(--fuente);
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--texto);
}
.campo input[type="number"] { font-family: var(--mono); }
.campo .ayuda { font-size: 11.5px; color: var(--texto-3); }
.campo--casilla { flex-direction: row; align-items: center; gap: 8px; }
.campo--casilla label { text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 400; color: var(--texto); }

.acciones { display: flex; gap: 10px; align-items: center; margin-top: 18px; }

button {
  font-family: var(--fuente);
  font-size: 13.5px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: var(--radio);
  border: 1px solid var(--tinta);
  background: var(--tinta);
  color: #fff;
  cursor: pointer;
}
button:hover { background: var(--tinta-2); }
button.secundario { background: transparent; color: var(--texto); border-color: var(--linea); }
button.secundario:hover { background: #f2f4f5; }

.aviso { font-size: 13px; color: var(--vendible); }
.aviso--error { color: var(--bloqueada); }

/* --- Nota normativa ------------------------------------------------------ */

.nota {
  border-left: 3px solid var(--laton);
  background: #fdfaf3;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--texto-2);
  border-radius: 0 var(--radio) var(--radio) 0;
}
.nota strong { color: var(--texto); font-weight: 600; }

.vacio { padding: 34px; text-align: center; color: var(--texto-2); background: var(--superficie); border: 1px dashed var(--linea); border-radius: var(--radio); }

/* --- Responsivo ---------------------------------------------------------- */

@media (max-width: 860px) {
  .marco { grid-template-columns: 1fr; }
  .barra { position: static; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .marca { border-bottom: none; border-right: 1px solid var(--tinta-3); padding: 12px 16px; }
  .marca::before { display: none; }
  .menu { display: flex; gap: 4px; padding: 8px; overflow-x: auto; }
  .menu__grupo { display: none; }
  .menu a { white-space: nowrap; border-left: none; border-bottom: 2px solid transparent; }
  .menu a.activo { border-left: none; border-bottom-color: var(--laton); }
  .pie-barra { display: none; }
  .lienzo { padding: 18px 16px 50px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media print {
  .barra { display: none; }
  .marco { display: block; }
  body { background: #fff; }
  .lienzo { padding: 0; max-width: none; }
}

/* ==========================================================================
   Fase 1 · Planilla, estancia y folio
   ========================================================================== */

:root {
  --reservada:   #6b74b5;   /* vendida pero sin llegar: ni libre ni en casa */
  --reservada-f: #eaebf5;
}

/* --- Enlaces con forma de botón ------------------------------------------ */

.boton-enlace {
  display: inline-block;
  font-size: 13.5px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: var(--radio);
  border: 1px solid var(--tinta);
  background: var(--tinta);
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.boton-enlace:hover { background: var(--tinta-2); }
.boton-enlace.secundario { background: var(--superficie); color: var(--texto); border-color: var(--linea); }
.boton-enlace.secundario:hover { background: #f2f4f5; }

/* --- Reservas sin habitación asignada ------------------------------------ */

.pendientes { display: flex; flex-wrap: wrap; gap: 8px; }

.pendiente {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 14px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--reservada);
  border-radius: var(--radio);
  text-decoration: none;
  color: var(--texto);
  min-width: 190px;
}
.pendiente:hover { border-color: var(--tinta-3); border-left-color: var(--reservada); }
.pendiente--hoy { border-left-color: var(--laton); background: #fdfaf3; }
.pendiente__nombre { font-weight: 600; font-size: 13.5px; }
.pendiente__datos { font-size: 11.5px; color: var(--texto-2); }
.pendiente__hoy { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--laton); font-weight: 600; margin-top: 2px; }

/* --- Planilla (tape chart) ------------------------------------------------ */

.planilla-marco {
  overflow-x: auto;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--superficie);
}

.planilla { border-collapse: collapse; border: none; width: auto; min-width: 100%; }

.planilla__esquina,
.planilla__hab {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--superficie);
  border-right: 1px solid var(--linea);
  min-width: 68px;
  text-align: left;
  padding: 0 10px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.planilla__esquina { z-index: 3; background: #f7f8f9; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); }
.planilla__estado { display: block; font-size: 9.5px; font-weight: 500; color: var(--texto-3); letter-spacing: .05em; }

.planilla thead th {
  background: #f7f8f9;
  border-bottom: 1px solid var(--linea);
  padding: 6px 0;
  min-width: 40px;
}
.planilla thead th.planilla__dia { text-align: center; font-weight: 500; }
.planilla thead th.planilla__dia--finde { background: #e7ebef; }
.planilla thead th.planilla__dia--hoy { background: var(--tinta); }
.planilla thead th.planilla__dia--hoy .planilla__letra { color: var(--laton-claro); }
.planilla thead th.planilla__dia--hoy .planilla__numero { color: #fff; }
.planilla__letra { display: block; font-size: 9px; letter-spacing: .1em; color: var(--texto-3); text-transform: uppercase; }
.planilla__numero { display: block; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--texto); }

.planilla tbody tr { height: 34px; }
.planilla tbody tr:hover { background: transparent; }
.planilla tbody tr:nth-child(even) .planilla__celda { background: #fbfcfc; }

.planilla__celda {
  border-bottom: 1px solid var(--linea-2);
  border-right: 1px solid var(--linea-2);
  padding: 0;
  min-width: 40px;
  position: relative;
}

/* Las franjas se solapan al día siguiente para que una estancia se lea como
   una pieza continua y no como celdas sueltas. */
.franja {
  position: absolute;
  inset: 4px 3px;
  display: flex;
  border-radius: 12px;
  align-items: center;
  background: var(--reservada);
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  z-index: 1;
}
.franja--en-casa  { background: var(--ocupada); }
.franja--reservada{ background: var(--reservada); }
.franja--bloqueo  {
  background: repeating-linear-gradient(-45deg, var(--bloqueada) 0 5px, #8f2830 5px 10px);
}
a.franja:hover { filter: brightness(1.15); z-index: 4; }

.franja__texto {
  flex: 1;
  min-width: 0;
  padding: 0 4px 0 11px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.marca-barra { width: 16px; height: 8px; border-radius: 4px; display: inline-block; }

/* --- Ficha de estancia ---------------------------------------------------- */

.columnas { display: grid; grid-template-columns: 1fr 400px; gap: 22px; align-items: start; }
@media (max-width: 1000px) { .columnas { grid-template-columns: 1fr; } }

.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px 20px; }
.dato__etiqueta { font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--texto-2); font-weight: 600; }
.dato__valor { font-size: 14.5px; margin-top: 2px; }
.dato__valor--num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.insignia {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 10px;
}
.insignia--CONFIRMADA { background: var(--reservada-f); color: var(--reservada); }
.insignia--EN_CASA    { background: var(--ocupada-f);   color: var(--ocupada); }
.insignia--SALIDA     { background: var(--vendible-f);  color: var(--vendible); }
.insignia--CANCELADA,
.insignia--NO_SHOW    { background: var(--bloqueada-f); color: var(--bloqueada); }
.insignia--PENDIENTE  { background: #f0f2f4; color: var(--texto-2); }

/* --- Folio ---------------------------------------------------------------- */

.folio__totales {
  border-top: 2px solid var(--tinta);
  margin-top: 14px;
  padding-top: 12px;
  display: grid;
  gap: 6px;
}
.folio__linea { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; }
.folio__linea span:last-child { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.folio__linea--saldo { font-size: 19px; font-weight: 600; padding-top: 8px; border-top: 1px solid var(--linea); }
.folio__linea--saldo.pendiente-pago span:last-child { color: var(--bloqueada); }
.folio__linea--saldo.saldado span:last-child { color: var(--vendible); }
.anulado { text-decoration: line-through; color: var(--texto-3); }

.bloque { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px 20px; margin-bottom: 16px; }
.bloque h3 { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--texto-2); margin: 0 0 14px; font-weight: 600; }

.fila-campos { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }

@media print {
  .planilla-marco { overflow: visible; }
  .boton-enlace, .acciones, form { display: none; }
}

/* ==========================================================================
   Fase 2 · Ama de llaves y mantenimiento
   ========================================================================== */

.alerta {
  border-left: 3px solid var(--bloqueada);
  background: #fdf3f3;
  padding: 14px 18px;
  border-radius: 0 var(--radio) var(--radio) 0;
  margin-bottom: 22px;
}
.alerta__titulo {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--bloqueada);
  margin-bottom: 8px;
}
.alerta__linea { font-size: 13px; color: var(--texto-2); padding: 3px 0; }
.alerta__linea strong { color: var(--texto); }

/* Reparto de carga entre camareras */
.cargas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.carga { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 13px 16px; }
.carga__nombre { font-weight: 600; font-size: 13.5px; margin-bottom: 8px; }
.carga__barra { height: 6px; background: var(--linea-2); border-radius: 3px; overflow: hidden; }
.carga__barra span { display: block; height: 100%; background: var(--vendible); border-radius: 3px; }
.carga--exceso .carga__barra span { background: var(--bloqueada); }
.carga__datos { font-size: 11.5px; color: var(--texto-2); margin-top: 6px; }
.carga--exceso .carga__datos { color: var(--bloqueada); }

/* La urgencia se marca en el borde, no pintando la fila entera: una tabla
   con filas de colores deja de leerse a los diez minutos de turno. */
tbody tr.urgente td:first-child { box-shadow: inset 3px 0 0 var(--laton); }

.etiqueta-urgente,
.etiqueta-suave {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 9px;
  margin-left: 6px;
  vertical-align: 1px;
}
.etiqueta-urgente { background: #fdf3e2; color: #8a5f14; }
.etiqueta-suave { background: #f0f2f4; color: var(--texto-2); }

.insignia--PENDIENTE  { background: #f0f2f4; color: var(--texto-2); }
.insignia--EN_PROCESO { background: var(--reservada-f); color: var(--reservada); }
.insignia--TERMINADA  { background: var(--vendible-f); color: var(--vendible); }
.insignia--VERIFICADA { background: var(--ocupada-f); color: var(--ocupada); }

/* Botones de acción cómodos para usar con el dedo en una tableta. */
tbody td button { padding: 6px 13px; font-size: 12.5px; }
tbody td:last-child { white-space: nowrap; }
tbody td:last-child button + button { margin-left: 5px; }
tbody td select { padding: 5px 8px; font-size: 13px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); }

@media (max-width: 700px) {
  tbody td button { padding: 9px 16px; font-size: 14px; }
}

/* ==========================================================================
   Fase 3 · Indicadores y temporadas
   ========================================================================== */

/* Serie temporal de RevPAR. Barras y no líneas: cada día es un hecho
   cerrado por la auditoría, no un punto de una curva continua. */
.serie {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 150px;
  padding-bottom: 2px;
}
.serie__barra { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 4px; }
.serie__barra span {
  display: block;
  width: 100%;
  background: var(--ocupada);
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  transition: none;
}
.serie__barra:hover span { background: var(--laton); }
.serie__pie {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--texto-3);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--linea-2);
  font-family: var(--mono);
}

/* Origen de las reservas */
.canal { display: grid; grid-template-columns: 110px 1fr 40px; gap: 12px; align-items: center; padding: 7px 0; }
.canal__nombre { font-size: 13px; }
.canal__barra { height: 8px; background: var(--linea-2); border-radius: 4px; overflow: hidden; }
.canal__barra span { display: block; height: 100%; background: var(--reservada); border-radius: 4px; }
.canal__valor { font-size: 13px; text-align: right; }

/* Calendario de precios */
.calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendario__dia {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 8px 6px;
  text-align: center;
}
.calendario__dia--finde { background: #f4f6f8; }
.calendario__dia--fijado { border-color: var(--laton); background: #fdfaf3; }
.calendario__fecha { font-size: 10px; color: var(--texto-2); font-family: var(--mono); }
.calendario__precio { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; margin-top: 3px; }
.calendario__marca { font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--laton); margin-top: 2px; font-weight: 700; }

@media (max-width: 700px) {
  .calendario { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   Fase 4 · Acceso y sesión
   ========================================================================== */

.portada {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--tinta);
  padding: 24px;
}

.portada__caja {
  width: 100%;
  max-width: 370px;
  background: var(--superficie);
  border-radius: 5px;
  padding: 32px 30px 26px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
}
.portada__caja--ancha { max-width: 440px; }

.portada__marca { text-align: center; margin-bottom: 26px; }
.portada__logo {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 0 auto 6px;
}
.portada__nombre { font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.portada__lugar {
  font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--texto-2); margin-top: 4px;
}
.portada__pie {
  text-align: center; font-size: 10.5px; color: var(--texto-3);
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--linea-2);
}

/* Datos de la sesión en la barra lateral */
.sesion {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--tinta-3);
}
.sesion__nombre { color: #d8dee5; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.sesion__rol {
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--laton-claro); margin-top: 2px;
}
.sesion__salir {
  display: inline-block; margin-top: 7px; font-size: 11px;
  color: var(--texto-3); text-decoration: none; border-bottom: 1px solid var(--tinta-3);
}
.sesion__salir:hover { color: #d8dee5; }

.insignia--ADMINISTRADOR { background: #f3e9d5; color: #7a5a12; }
.insignia--RECEPCION     { background: var(--ocupada-f); color: var(--ocupada); }
.insignia--AMA_DE_LLAVES { background: var(--vendible-f); color: var(--vendible); }
.insignia--MANTENIMIENTO { background: var(--bloqueada-f); color: var(--bloqueada); }
.insignia--GERENCIA      { background: var(--reservada-f); color: var(--reservada); }

/* ==========================================================================
   Refinamiento visual
   --------------------------------------------------------------------------
   La austeridad de las primeras fases servía para no distraer, pero dejaba
   el entorno frío. Aquí se le da calidez y jerarquía sin perder lo que
   importa: que un dato se lea de un vistazo después de ocho horas de turno.
   ========================================================================== */

body { font-size: 14.5px; }

/* --- Barra lateral -------------------------------------------------------- */

.barra {
  background: linear-gradient(178deg, var(--tinta-2) 0%, var(--tinta) 55%, #012a1f 100%);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .05);
}

.marca { border-bottom: 1px solid rgba(255, 255, 255, .09); position: relative; }
.marca::after {
  content: "";
  position: absolute;
  left: 18px; right: 18px; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--laton), transparent);
}
.marca::before { display: none; }

/* El logo ya lleva el nombre del hotel: repetirlo debajo sobra y aprieta
   la barra. Solo se conserva la ciudad, que el logo no dice.
   
   Va sobre una placa clara y no recoloreado: el logo del hotel se usa
   como es. Alterarle los colores para que quepa en el fondo es rehacerlo,
   no aplicarlo. */
.marca__placa {
  background: #fff;
  border-radius: var(--radio);
  padding: 12px 14px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}

.marca__logo {
  display: block;
  width: 100%;
  height: auto;
}
.marca__nombre { font-family: var(--titular); font-size: 17px; font-weight: 600; letter-spacing: -.005em; }
.marca__lugar { color: var(--laton-claro); font-weight: 600; }

.menu__grupo { color: rgba(255, 255, 255, .32); padding: 12px 8px 4px; font-size: 9px; }

.menu a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 11px;
  margin-bottom: 0;
  font-size: 13px;
  border-radius: var(--radio-chico);
  border-left: none;
  color: rgba(255, 255, 255, .72);
  transition: background .12s ease, color .12s ease;
}
.menu a svg { width: 15px; height: 15px; flex-shrink: 0; opacity: .7; }
.menu a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.menu a:hover svg { opacity: 1; }
.menu a.activo {
  background: rgba(224, 180, 92, .16);
  color: #fff;
  box-shadow: inset 2px 0 0 var(--laton-claro);
}
.menu a.activo svg { opacity: 1; color: var(--laton-claro); }

.pie-barra { border-top: 1px solid rgba(255, 255, 255, .09); }
.sesion { border-bottom-color: rgba(255, 255, 255, .09); }

/* --- Encabezado de página ------------------------------------------------- */

.cabecera { border-bottom: 1px solid var(--linea); padding-bottom: 18px; }
h1 {
  font-family: var(--titular);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.01em;
}
h2 { color: var(--laton); letter-spacing: .14em; }

/* --- Tarjetas y métricas -------------------------------------------------- */

.tarjeta, .bloque, .metrica, table, .carga, .pendiente, .calendario__dia {
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.bloque h3 { color: var(--laton); }

/* La cinta superior le da a cada métrica un color propio y hace la fila
   legible de reojo, sin tener que leer las etiquetas. */
.metrica { position: relative; overflow: hidden; padding: 16px 18px; }
.metrica::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--laton);
}
.rejilla-metricas > .metrica:nth-child(1)::before { background: var(--laton); }
.rejilla-metricas > .metrica:nth-child(2)::before { background: var(--vendible); }
.rejilla-metricas > .metrica:nth-child(3)::before { background: var(--ocupada); }
.rejilla-metricas > .metrica:nth-child(4)::before { background: var(--bloqueada); }
.rejilla-metricas > .metrica:nth-child(5)::before { background: #8a6bb0; }

.metrica__valor { font-size: 27px; font-weight: 500; color: var(--texto); }
.metrica__etiqueta { color: var(--texto-2); font-weight: 600; }

/* --- Tablas --------------------------------------------------------------- */

table { overflow: hidden; }
thead th { background: var(--laton-suave); color: #7a5a12; border-bottom-color: #ecdcbc; }
tbody tr:hover { background: #fdfbf6; }

/* --- Botones -------------------------------------------------------------- */

button, .boton-enlace {
  border-radius: var(--radio-chico);
  transition: background .12s ease, box-shadow .12s ease, transform .06s ease;
}
button:active, .boton-enlace:active { transform: translateY(1px); }
button:not(.secundario), .boton-enlace:not(.secundario) {
  background: var(--tinta-2);
  border-color: var(--tinta-2);
  box-shadow: 0 1px 2px rgba(22, 50, 42, .2);
}
button:not(.secundario):hover, .boton-enlace:not(.secundario):hover {
  background: var(--tinta-3);
  border-color: var(--tinta-3);
}
button.secundario, .boton-enlace.secundario { background: var(--superficie); }
button.secundario:hover, .boton-enlace.secundario:hover { background: var(--laton-suave); border-color: #e0cfa8; }

/* --- Formularios ---------------------------------------------------------- */

.campo input, .campo select {
  border-radius: var(--radio-chico);
  border-color: #ddd4c4;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.campo input:focus, .campo select:focus {
  outline: none;
  border-color: var(--laton);
  box-shadow: 0 0 0 3px rgba(181, 130, 42, .14);
}
.campo label { color: var(--texto-2); }

/* --- Avisos y notas ------------------------------------------------------- */

.nota { background: var(--laton-suave); border-left-width: 3px; border-radius: 0 var(--radio) var(--radio) 0; }
.alerta { border-radius: 0 var(--radio) var(--radio) 0; }
.vacio { border-radius: var(--radio); border-color: #ded5c5; background: #fdfbf7; }

/* --- Planilla ------------------------------------------------------------- */

.planilla-marco { border-radius: var(--radio); box-shadow: var(--sombra); }
.planilla thead th { background: var(--laton-suave); }
.planilla thead th.planilla__dia--finde { background: #f0e8d6; }
.planilla__esquina { background: var(--laton-suave); color: #7a5a12; }
.planilla tbody tr:nth-child(even) .planilla__celda { background: #fdfbf7; }
.franja { border-radius: 13px; box-shadow: 0 1px 3px rgba(60, 45, 25, .18); }
.franja--reservada { background: #8a6bb0; }

/* --- Tablero de habitaciones ---------------------------------------------- */

.celda { border-radius: var(--radio-chico); box-shadow: var(--sombra); border-top-width: 3px; }
.celda__numero { font-weight: 500; }

/* --- Portada de acceso ---------------------------------------------------- */

.portada {
  background:
    radial-gradient(1100px 600px at 50% -10%, #0a5240 0%, transparent 60%),
    var(--tinta);
}
.portada__caja { border-radius: 14px; box-shadow: var(--sombra-alta); }
.portada__nombre { font-family: var(--titular); font-size: 21px; }


/* --- Serie de indicadores -------------------------------------------------- */

.serie__barra span { background: linear-gradient(180deg, #3a74bd, var(--ocupada)); border-radius: 3px 3px 0 0; }
.canal__barra span { background: linear-gradient(90deg, #9a7dc0, #8a6bb0); }
.carga__barra span { background: linear-gradient(90deg, #3d9670, var(--vendible)); }

@media print {
  .barra { display: none; }
  body { background: #fff; font-size: 12px; }
  .tarjeta, .bloque, .metrica, table { box-shadow: none; }
}

/* ==========================================================================
   Fase 5 · Documento tributario
   --------------------------------------------------------------------------
   La factura se imprime y se entrega al huésped, así que es la única pantalla
   que se diseña como papel y no como interfaz.
   ========================================================================== */

.documento {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 30px 34px 26px;
  max-width: 880px;
}

.documento__cabeza {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--tinta);
}
.documento__hotel { font-family: var(--titular); font-size: 21px; font-weight: 600; }
.documento__linea { font-size: 12.5px; color: var(--texto-2); line-height: 1.55; }
.documento__folio { text-align: right; }
.documento__etiqueta {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--laton); font-weight: 700;
}
.documento__numero {
  font-family: var(--mono); font-size: 25px; font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; margin: 2px 0 3px;
}

.documento__partes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  padding: 18px 0 4px;
}

.documento__cierre {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 30px;
  margin-top: 20px;
  align-items: start;
}
.documento__totales { display: grid; gap: 6px; }
.documento__totales .folio__linea--saldo { border-top: 2px solid var(--tinta); }

@media (max-width: 760px) {
  .documento { padding: 20px; }
  .documento__cabeza, .documento__partes, .documento__cierre { grid-template-columns: 1fr; flex-direction: column; }
  .documento__folio { text-align: left; }
}

@media print {
  .no-imprimir, .cabecera { display: none; }
  .documento { border: none; box-shadow: none; padding: 0; max-width: none; }
}

.insignia--EMITIDA   { background: var(--laton-suave); color: #7a5a12; }
.insignia--ENVIADA   { background: var(--ocupada-f); color: var(--ocupada); }
.insignia--ACEPTADA  { background: var(--vendible-f); color: var(--vendible); }
.insignia--RECHAZADA { background: var(--bloqueada-f); color: var(--bloqueada); }
.insignia--ANULADA   { background: #f0eeea; color: var(--texto-3); }

/* ==========================================================================
   Fase 6 · Malla de turnos
   --------------------------------------------------------------------------
   Cada turno tiene su color y su ficha. La malla se lee de reojo: quién está
   de noche esta semana, quién descansa, dónde hay un hueco.
   ========================================================================== */

.malla tbody tr { height: 40px; }
.malla__celda { text-align: center; vertical-align: middle; padding: 0 3px; }

.ficha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 24px;
  padding: 0 7px;
  border-radius: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: #fff;
}

/* Mañana en latón (amanece), tarde en verde, noche en el verde profundo de
   la barra: el mismo idioma cromático del resto del sistema. */
.ficha--man { background: var(--laton); }
.ficha--tar { background: var(--vendible); }
.ficha--noc { background: var(--tinta-2); }
.ficha--ausencia { background: var(--texto-3); }
.ficha--libre {
  background: transparent;
  color: var(--linea);
  font-size: 15px;
  min-width: 0;
}

.marca-barra.ficha--man,
.marca-barra.ficha--tar,
.marca-barra.ficha--noc { min-width: 0; height: 8px; width: 16px; padding: 0; }

/* ==========================================================================
   Espejo remoto
   ========================================================================== */

/* Cinta permanente en el espejo: quien consulta debe saber en todo momento
   que no está mirando el sistema en vivo, sino una copia con retraso. */
.cinta-espejo {
  margin: -26px -30px 22px;
  padding: 9px 30px;
  background: linear-gradient(90deg, var(--tinta-2), var(--tinta));
  color: var(--laton-claro);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .cinta-espejo { margin: -18px -16px 16px; padding: 8px 16px; }
}

/* ==========================================================================
   Clave de rescate
   --------------------------------------------------------------------------
   El código se lee en voz alta y se teclea desde un papel, así que va grande,
   monoespaciado y muy separado. Confundir una letra a las nueve de la noche
   cuesta un intento de cinco.
   ========================================================================== */

.codigo-rescate {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.hoja {
  border: 2px solid var(--tinta);
  border-radius: var(--radio);
  padding: 26px 24px;
  text-align: center;
  background: var(--superficie);
}
.hoja__titulo {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--laton); font-weight: 700;
}
.hoja__hotel { font-family: var(--titular); font-size: 19px; font-weight: 600; margin-top: 6px; }
/* Cada grupo va entero o pasa a la línea siguiente. Partir un grupo por la
   mitad invita a teclear mal el código, que es justo lo que no puede pasar
   cuando quedan cinco intentos. */
.hoja__codigo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 10px;
  margin: 20px 0 6px;
  padding: 16px 12px;
  background: var(--laton-suave);
  border: 1px dashed var(--laton);
  border-radius: var(--radio);
}
.hoja__grupo {
  font-family: var(--mono);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: .08em;
  white-space: nowrap;
}
.hoja__grupo + .hoja__grupo::before {
  content: "-";
  margin-right: 10px;
  color: var(--laton);
}
.hoja__fecha { font-size: 11.5px; color: var(--texto-3); font-family: var(--mono); }
.hoja__instrucciones {
  text-align: left;
  font-size: 12.5px;
  color: var(--texto-2);
  line-height: 1.75;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--linea);
}
.hoja__instrucciones strong { color: var(--texto); }

@media print {
  body { background: #fff; }
  .portada { display: block; padding: 0; background: #fff; }
  .portada__caja { max-width: none; box-shadow: none; padding: 0; }
  .no-imprimir, .acciones, .menu, .barra { display: none !important; }
  .hoja { border-color: #000; }
}

/* Logo del establecimiento en el documento tributario. */
.documento__logo { max-width: 260px; height: auto; margin-bottom: 10px; display: block; }

/* ==========================================================================
   Cronómetro de las tareas en proceso
   ========================================================================== */

.cronometro {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 3px 9px;
  border-radius: 10px;
  background: var(--ocupada-f);
  color: var(--ocupada);
  white-space: nowrap;
}

/* Rojo solo cuando se pasó de verdad del estimado. Un aviso que salta al
   primer minuto de retraso deja de mirarse a la semana. */
.cronometro--tarde {
  background: var(--bloqueada-f);
  color: var(--bloqueada);
}