/* =========================================================================
   PMS Arco Iris · hoja de estilos

   Paleta tomada de LobbyPMS: fondo casi blanco, tarjetas blancas, tinta
   azul pizarra y un solo acento turquesa. La estructura del menu viene de
   Frambuesa: grupos con titulo, no una lista de cien enlaces.
   ========================================================================= */

:root{
  --fondo:        #F6F8FC;
  --panel:        #FFFFFF;
  --panel-2:      #F0F3F8;
  --linea:        #E3E8EF;
  --linea-fuerte: #CBD5E1;

  --tinta:        #2D3F50;
  --tinta-2:      #708496;
  --tinta-3:      #9AAABA;

  --acento:       #1D8DAB;
  --acento-2:     #52BDC2;
  --acento-tinta: #FFFFFF;
  --menta:        #E6F7F8;
  --menta-linea:  #B7E4E7;

  --exito:        #14805E;
  --exito-suave:  #E3F5EE;
  --alerta:       #B4531F;
  --alerta-suave: #FDF0E6;
  --peligro:      #C0392B;
  --peligro-suave:#FCEDEB;

  --sombra:       0 1px 2px rgba(45,63,80,.06), 0 8px 24px rgba(45,63,80,.07);
  --sombra-alta:  0 4px 12px rgba(45,63,80,.10), 0 24px 56px rgba(45,63,80,.14);
  --r:            10px;
  --menu:         248px;
  --barra:        62px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ margin:0; letter-spacing:-.012em; }
h1{ font-size:24px; font-weight:650; }
h2{ font-size:18px; font-weight:640; }
h3{ font-size:14px; font-weight:640; }
p{ margin:0; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:var(--acento); text-decoration:none; }

/* ---------- utilidades ---------- */
.oculto{ display:none !important; }
.fila{ display:flex; align-items:center; gap:10px; }
.crece{ flex:1; }
.tenue{ color:var(--tinta-2); }
.mini{ font-size:13px; }
.mono{ font-variant-numeric:tabular-nums; }

/* =========================================================================
   Entrada
   ========================================================================= */
.entrada{
  min-height:100vh; display:grid; place-items:center; padding:24px;
  background:
    radial-gradient(1100px 520px at 15% -10%, var(--menta) 0%, transparent 60%),
    var(--fondo);
}
.entrada-caja{
  width:100%; max-width:380px; background:var(--panel);
  border:1px solid var(--linea); border-radius:16px;
  padding:34px 30px 30px; box-shadow:var(--sombra-alta);
}
.marca{ display:flex; align-items:center; gap:11px; margin-bottom:22px; }
.marca-icono{
  width:38px; height:38px; border-radius:11px; flex:none;
  background:linear-gradient(140deg, var(--acento-2), var(--acento));
  display:grid; place-items:center; color:#fff; font-weight:700; font-size:16px;
}
.marca-texto b{ display:block; font-size:16px; font-weight:660; line-height:1.2; }
.marca-texto span{ font-size:12px; color:var(--tinta-2); letter-spacing:.04em; }

/* -------------------------------------------------------------------------
   El logo

   La imagen trae el emblema arriba —sol, montañas y ola— y el nombre
   debajo. Segun donde se use hace falta una cosa o la otra:

     - En la pantalla de entrada cabe entero, y ahi el nombre se lee.
     - En el menu el cuadrito mide 31 pixeles. Ahi el nombre no se leeria
       ni con lupa, asi que se recorta y se muestra solo el emblema; el
       nombre ya va escrito al lado.

   El recorte se hace con la imagen ampliada dentro de una caja que corta lo
   que sobra. Los numeros salen de donde esta el emblema dentro de la imagen
   (de 1320 x 1026, ocupa mas o menos de x=370 a x=820 y de y=30 a y=545).
   ------------------------------------------------------------------------- */
.marca-entrada{ flex-direction:column; align-items:center; text-align:center; gap:2px; }
.marca-lema{ font-size:12px; color:var(--tinta-2); letter-spacing:.04em; }

.logo-entrada{
  width:min(220px, 66%); height:auto; display:block;
  /* El JPEG trae un degradado gris muy claro de fondo. Sobre la tarjeta
     blanca se notaba el recuadro, asi que se aclara un pelo hasta que el
     fondo se funde. Recortar el archivo seria mas limpio, pero esto no
     necesita ninguna herramienta y se deshace cambiando un numero. */
  filter:brightness(1.06) contrast(1.04);
}

.marca-icono.emblema{
  position:relative; overflow:hidden; background:#fff; padding:0;
  border:1px solid var(--linea);
}
.marca-icono.emblema img{
  position:absolute; width:293%; left:-82%; top:-7%; max-width:none;
}

/* =========================================================================
   Campos
   ========================================================================= */
.campo{ display:block; margin-bottom:14px; }
.campo > span{
  display:block; font-size:12.5px; font-weight:600;
  color:var(--tinta-2); margin-bottom:5px;
}
.campo input, .campo select, .campo textarea{
  width:100%; padding:9px 11px; border:1px solid var(--linea-fuerte);
  border-radius:8px; background:var(--panel); transition:border-color .14s, box-shadow .14s;
}
.campo input:focus, .campo select:focus, .campo textarea:focus{
  outline:none; border-color:var(--acento);
  box-shadow:0 0 0 3px rgba(29,141,171,.14);
}
.campo input:disabled, .campo select:disabled{ background:var(--panel-2); color:var(--tinta-2); }
.campo-ayuda{ font-size:12px; color:var(--tinta-3); margin-top:4px; }
.con-sufijo{ position:relative; }
.con-sufijo input{ padding-right:126px; }
.con-sufijo .sufijo{
  position:absolute; right:11px; top:50%; transform:translateY(-50%);
  font-size:12.5px; color:var(--tinta-3); pointer-events:none;
}

/* =========================================================================
   Botones
   ========================================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 15px; border-radius:8px; border:1px solid var(--linea-fuerte);
  background:var(--panel); color:var(--tinta); font-size:14px; font-weight:560;
  cursor:pointer; transition:background .14s, border-color .14s, transform .06s;
  white-space:nowrap;
}
.btn:hover{ background:var(--panel-2); }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }
.btn.principal{ background:var(--acento); border-color:var(--acento); color:var(--acento-tinta); }
.btn.principal:hover{ background:#19809b; }
.btn.peligro{ color:var(--peligro); border-color:#EBC4BF; background:var(--peligro-suave); }
.btn.peligro:hover{ background:#F8DFDB; }
.btn.plano{ border-color:transparent; background:transparent; }
.btn.plano:hover{ background:var(--panel-2); }
.btn.ancho{ width:100%; }
.btn.chico{ padding:6px 11px; font-size:13px; }

/* =========================================================================
   Estructura de la aplicacion
   ========================================================================= */
.app{ display:grid; grid-template-columns:var(--menu) 1fr; min-height:100vh; }

/* ---------- menu lateral ---------- */
.menu{
  background:var(--panel); border-right:1px solid var(--linea);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.menu-cabeza{
  height:var(--barra); display:flex; align-items:center; gap:10px;
  padding:0 16px; border-bottom:1px solid var(--linea); flex:none;
}
.menu-cuerpo{ overflow-y:auto; padding:12px 10px 20px; flex:1; }
.menu-grupo{
  font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-3); padding:14px 8px 6px;
}
.menu-grupo:first-child{ padding-top:2px; }
.menu-enlace{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:8px 10px; border-radius:8px; border:0; background:transparent;
  color:var(--tinta); font-size:14px; font-weight:520; cursor:pointer;
  text-align:left; transition:background .13s, color .13s;
}
.menu-enlace:hover{ background:var(--panel-2); }
.menu-enlace.activo{ background:var(--menta); color:var(--acento); font-weight:620; }
.menu-enlace svg{ width:17px; height:17px; flex:none; opacity:.82; }
.menu-enlace.activo svg{ opacity:1; }

/* Cualquier icono dentro de un boton se queda del tamano del texto. Sin
   esto, un SVG sin ancho declarado se estira a lo que le dé la gana: es lo
   que le pasaba al boton de cerrar sesion. */
.btn svg{ width:17px; height:17px; flex:none; }
.menu-enlace .pendiente{
  margin-left:auto; font-size:10px; font-weight:700; letter-spacing:.06em;
  color:var(--tinta-3); border:1px solid var(--linea); border-radius:5px; padding:1px 5px;
}
.menu-pie{ padding:12px 14px; border-top:1px solid var(--linea); flex:none; }

/* ---------- barra superior ---------- */
.principal{ display:flex; flex-direction:column; min-width:0; }
.barra{
  height:var(--barra); background:var(--panel); border-bottom:1px solid var(--linea);
  display:flex; align-items:center; gap:16px; padding:0 22px;
  position:sticky; top:0; z-index:20;
}
.barra-dato{ display:flex; flex-direction:column; line-height:1.25; }
.barra-dato small{ font-size:11px; color:var(--tinta-2); }
.barra-dato b{ font-size:14px; font-weight:620; }
.separador{ width:1px; height:26px; background:var(--linea); }
.usuario-chip{
  display:flex; align-items:center; gap:9px; padding:5px 9px 5px 5px;
  border-radius:999px; border:1px solid var(--linea); background:var(--panel);
  cursor:pointer;
}
.usuario-chip:hover{ background:var(--panel-2); }
.avatar{
  width:29px; height:29px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--acento-2); color:#fff; font-size:11.5px; font-weight:700;
}
.contenido{ padding:24px 26px 60px; max-width:1240px; width:100%; }

/* ---------- encabezado de pantalla ---------- */
.pantalla-cabeza{
  display:flex; align-items:flex-start; gap:16px; margin-bottom:20px; flex-wrap:wrap;
}
.pantalla-cabeza p{ color:var(--tinta-2); font-size:14px; margin-top:3px; max-width:70ch; }

/* =========================================================================
   Tarjetas, tablas, etiquetas
   ========================================================================= */
.tarjeta{
  background:var(--panel); border:1px solid var(--linea);
  border-radius:var(--r); box-shadow:var(--sombra);
}
.tarjeta-cabeza{
  padding:14px 18px; border-bottom:1px solid var(--linea);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.tarjeta-cuerpo{ padding:18px; }

.rejilla{ display:grid; gap:14px; }
.rejilla.c4{ grid-template-columns:repeat(4,1fr); }
.rejilla.c3{ grid-template-columns:repeat(3,1fr); }
.rejilla.c2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:1100px){ .rejilla.c4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px){ .rejilla.c4,.rejilla.c3,.rejilla.c2{ grid-template-columns:1fr; } }

.cifra{ padding:16px 18px; }
.cifra small{
  display:block; font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--tinta-2); margin-bottom:7px;
}
.cifra b{ font-size:27px; font-weight:660; letter-spacing:-.02em; display:block; }
.cifra .pie{ font-size:12.5px; color:var(--tinta-2); margin-top:3px; }

.tabla-envoltura{ overflow-x:auto; }
table.tabla{ width:100%; border-collapse:collapse; font-size:14px; }
table.tabla th{
  text-align:left; font-size:11px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--tinta-2);
  padding:10px 14px; border-bottom:1px solid var(--linea); white-space:nowrap;
  background:var(--panel-2);
}
table.tabla td{ padding:11px 14px; border-bottom:1px solid var(--linea); vertical-align:middle; }
table.tabla tr:last-child td{ border-bottom:0; }
table.tabla tbody tr:hover{ background:var(--panel-2); }
.celda-acciones{ text-align:right; white-space:nowrap; }
.celda-acciones .btn{ margin-left:5px; }

.etiqueta{
  display:inline-flex; align-items:center; gap:5px; padding:2px 8px;
  border-radius:999px; font-size:11.5px; font-weight:650; white-space:nowrap;
  border:1px solid transparent;
}
.etiqueta.neutra{ background:var(--panel-2); color:var(--tinta-2); border-color:var(--linea); }
.etiqueta.activa{ background:var(--exito-suave); color:var(--exito); border-color:#BEE5D7; }
.etiqueta.apagada{ background:var(--peligro-suave); color:var(--peligro); border-color:#EBC4BF; }
.etiqueta.alerta{ background:var(--alerta-suave); color:var(--alerta); border-color:#F0D3B8; }

/* La lista de huespedes que salen al buscar. Va pegada debajo de la caja
   de busqueda, sin flotar: dentro de una ventana con desplazamiento, algo
   que flota se queda donde estaba cuando se mueve el contenido. */
.resultados-huesped{
  border:1px solid var(--linea); border-radius:9px; overflow:hidden;
  margin:-8px 0 14px; background:var(--panel);
}
.resultado-huesped{
  display:block; width:100%; text-align:left; cursor:pointer;
  background:none; border:0; border-bottom:1px solid var(--linea);
  padding:10px 13px; font:inherit; color:var(--tinta);
}
.resultado-huesped:last-child{ border-bottom:0; }
.resultado-huesped:hover{ background:var(--fondo-suave, #F8FAFC); }
.resultado-huesped b{ display:block; font-weight:560; font-size:14px; }
.resultado-huesped small{ display:block; font-size:12px; color:var(--tinta-2); }
.sin-resultados{ padding:11px 13px; font-size:13px; color:var(--tinta-2); }

/* Una opcion con su explicacion debajo, para elegir entre dos caminos que
   se parecen. El radio a un lado y el texto al otro, para que se pueda
   tocar toda la fila y no solo el circulito.

   Ojo con lo que hereda: .campo le pone width:100% a sus inputs, y eso
   convierte el circulito del radio en una barra de lado a lado que empuja
   el texto fuera de la ventana. Por eso hay que devolverle su ancho. */
.campo.elegible{
  display:flex; align-items:flex-start; gap:11px; cursor:pointer;
  border:1px solid var(--linea); border-radius:9px; padding:12px 14px;
  margin-bottom:9px;
}
.campo.elegible:hover{ border-color:var(--linea-fuerte); }
.campo.elegible input[type="radio"]{
  width:auto; flex:none; margin:3px 0 0; padding:0;
}
.campo.elegible > span{
  display:block; flex:1; min-width:0; margin:0;
  font-size:13.5px; font-weight:400; color:var(--tinta);
}
.campo.elegible small{ display:block; margin-top:3px; line-height:1.45; }

/* La lista de pendientes de la DIAN. Un renglon por cosa que hay que
   conseguir, con su marca. Se lee de arriba a abajo como una lista de
   mercado, que es exactamente lo que es. */
.lista-pasos{ display:flex; flex-direction:column; gap:2px; }
.paso{
  display:flex; align-items:flex-start; gap:11px;
  padding:9px 11px; border-radius:8px; font-size:13.5px;
}
.paso:nth-child(odd){ background:var(--fondo-suave, #F8FAFC); }
.paso .marca{ font-weight:700; color:var(--tinta-2); width:16px; flex:none; }
.paso.hecho .marca{ color:var(--exito); }
.paso b{ display:block; font-weight:560; }
.paso small{ color:var(--tinta-2); }
.paso.hecho b{ color:var(--tinta-2); font-weight:500; }

/* La casilla de cobrar otro precio. Va apagada y discreta: lo normal es
   cobrar la tarifa del tipo, y este atajo no debe invitar a usarse. */
.tarifa-manual{
  border:1px dashed var(--linea); border-radius:9px;
  padding:11px 13px; margin:12px 0 4px; font-size:13.5px;
}
.etiqueta.acento{ background:var(--menta); color:var(--acento); border-color:var(--menta-linea); }

.vacio{ padding:44px 20px; text-align:center; color:var(--tinta-2); }
.vacio b{ display:block; color:var(--tinta); font-size:15px; margin-bottom:5px; }

.aviso{
  display:flex; gap:11px; padding:12px 14px; border-radius:9px;
  border:1px solid var(--menta-linea); background:var(--menta);
  font-size:13.5px; color:var(--tinta); margin-bottom:18px;
}
.aviso.alerta{ background:var(--alerta-suave); border-color:#F0D3B8; }
.aviso b{ font-weight:650; }

/* =========================================================================
   Ventana modal
   ========================================================================= */
.telon{
  position:fixed; inset:0; background:rgba(28,42,56,.42);
  display:grid; place-items:center; padding:22px; z-index:60;
  backdrop-filter:blur(2px);
}
.ventana{
  background:var(--panel); border-radius:14px; box-shadow:var(--sombra-alta);
  width:100%; max-width:520px; max-height:88vh; display:flex; flex-direction:column;
}
.ventana.ancha{ max-width:760px; }
.ventana-cabeza{
  padding:17px 20px; border-bottom:1px solid var(--linea);
  display:flex; align-items:center; gap:12px;
}
.ventana-cuerpo{ padding:20px; overflow-y:auto; }
.ventana-pie{
  padding:14px 20px; border-top:1px solid var(--linea);
  display:flex; justify-content:flex-end; gap:9px; background:var(--panel-2);
  border-radius:0 0 14px 14px;
}
.cerrar{
  margin-left:auto; border:0; background:transparent; cursor:pointer;
  color:var(--tinta-2); font-size:20px; line-height:1; padding:4px 6px; border-radius:6px;
}
.cerrar:hover{ background:var(--panel-2); color:var(--tinta); }

/* ---------- lista de permisos ---------- */
.permiso-grupo{ margin-bottom:16px; }
.permiso-grupo > h3{
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tinta-2); margin-bottom:7px;
}
.permiso{
  display:flex; align-items:flex-start; gap:11px; padding:9px 11px;
  border:1px solid var(--linea); border-radius:8px; margin-bottom:6px;
  background:var(--panel);
}
.permiso:hover{ background:var(--panel-2); }
.permiso input{ margin-top:3px; width:16px; height:16px; accent-color:var(--acento); flex:none; }
.permiso .txt b{ display:block; font-size:13.5px; font-weight:590; }
.permiso .txt span{ font-size:12.5px; color:var(--tinta-2); }
.permiso .origen{
  margin-left:auto; font-size:10.5px; font-weight:700; letter-spacing:.05em;
  color:var(--tinta-3); text-transform:uppercase; white-space:nowrap; padding-top:2px;
}
.permiso.cambiado{ border-color:var(--menta-linea); background:var(--menta); }

/* =========================================================================
   Avisos flotantes
   ========================================================================= */
.avisos{
  position:fixed; right:20px; bottom:20px; z-index:80;
  display:flex; flex-direction:column; gap:9px; max-width:380px;
}
.aviso-flotante{
  background:var(--tinta); color:#fff; padding:11px 15px; border-radius:9px;
  box-shadow:var(--sombra-alta); font-size:13.5px;
  animation:entrar .18s ease-out;
}
.aviso-flotante.mal{ background:var(--peligro); }
.aviso-flotante.bien{ background:var(--exito); }
@keyframes entrar{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* ---------- pantalla en construccion ---------- */
.construccion{
  border:1px dashed var(--linea-fuerte); border-radius:var(--r);
  padding:52px 26px; text-align:center; background:var(--panel);
}
.construccion .icono{
  width:46px; height:46px; margin:0 auto 14px; border-radius:13px;
  background:var(--menta); color:var(--acento); display:grid; place-items:center;
}
.construccion h2{ margin-bottom:7px; }
.construccion p{ color:var(--tinta-2); max-width:52ch; margin:0 auto; font-size:14px; }
.construccion ul{
  text-align:left; max-width:430px; margin:18px auto 0; padding-left:20px;
  color:var(--tinta-2); font-size:13.5px;
}
.construccion li{ margin-bottom:5px; }

/* =========================================================================
   En el celular

   El sistema se usa en tres tamaños: computador en recepción, tablet en la
   cocina y celular en el bolsillo de quien anda por ahí. Los dos primeros
   ya funcionaban; el tercero no, y por una sola razón: la barra de arriba.

   Con "Caja asignada", "Inventario", el turno y el nombre del usuario, esa
   barra pide unos 470 píxeles. Un celular tiene 390. Se salía 56 y eso
   metía desplazamiento lateral en TODAS las pantallas, que es de las cosas
   que más molestan al usar algo con una mano.

   La regla para decidir qué se va: en un celular sobra lo que no cambia
   nunca. En qué caja e inventario está uno se ve al entrar y no varía en
   todo el turno; el nombre propio lo sabe quien lo está usando. Lo que sí
   se queda es el turno, porque cambia y porque de él depende poder cobrar.
   ========================================================================= */
@media (max-width:560px){
  .barra{ padding:0 12px; gap:10px; }

  /* La caja y el inventario siguen a un toque, en Panel. */
  .barra .barra-dato, .barra .separador{ display:none; }

  /* Del usuario queda el círculo con las iniciales: sigue abriendo el menú
     de la cuenta, ocupa 29 píxeles en vez de 150. */
  .usuario-chip{ padding:4px; }
  .usuario-chip > span:not(.avatar){ display:none; }

  .turno-chip{ white-space:nowrap; font-size:12px; padding:6px 10px; }

  .contenido{ padding:16px 12px 60px; }
  .pantalla-cabeza h1{ font-size:22px; }
  .pantalla-cabeza{ gap:10px; margin-bottom:16px; }

  /* Las pestañas se deslizan de lado en vez de amontonarse. Configuración
     tiene seis y no caben ni de lejos. */
  .pestanas{ overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
  .pestanas::-webkit-scrollbar{ display:none; }
  .pestana{ white-space:nowrap; flex:none; }

  /* Un botón de acción en el celular se toca con el pulgar. */
  .btn{ min-height:38px; }
}

/* En computador el fondo no existe: el menu esta siempre a la vista y no
   hay nada que cerrar. */
.menu-fondo{ display:none; }

@media (max-width:900px){
  .app{ grid-template-columns:1fr; }
  .menu{ position:fixed; left:0; top:0; height:100%; width:var(--menu); z-index:50;
         transform:translateX(-100%); transition:transform .2s; box-shadow:var(--sombra-alta); }
  .menu.abierto{ transform:none; }
  .contenido{ padding:18px 16px 60px; }

  /* Oscurece lo de atras y, sobre todo, da algo que tocar para salir.
     Va por debajo del menu (z-index 40 contra 50) y solo recibe toques
     cuando esta visible: si no, se comeria los clics del contenido. */
  .menu-fondo{
    display:block; position:fixed; inset:0; z-index:40;
    background:rgba(16,32,42,.38);
    opacity:0; pointer-events:none; transition:opacity .2s;
  }
  .menu-fondo.visible{ opacity:1; pointer-events:auto; }
}

/* =========================================================================
   Calendario de reservas

   Rejilla de habitaciones por dias, como la de LobbyPMS. La primera
   columna queda fija al desplazarse a los lados: sin eso uno pierde de
   vista que habitacion esta mirando.
   ========================================================================= */
.pestanas{
  display:flex; gap:2px; border-bottom:1px solid var(--linea); margin-bottom:18px;
}
.pestana{
  padding:9px 15px; border:0; background:transparent; cursor:pointer;
  font-size:14px; font-weight:550; color:var(--tinta-2);
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.pestana:hover{ color:var(--tinta); }
.pestana.activa{ color:var(--acento); border-bottom-color:var(--acento); font-weight:640; }
.pestana .cuenta{
  margin-left:6px; font-size:11px; font-weight:700; padding:1px 6px;
  border-radius:999px; background:var(--panel-2); color:var(--tinta-2);
}
.pestana.activa .cuenta{ background:var(--menta); color:var(--acento); }

.calendario{ overflow:auto; max-height:70vh; }
table.rejilla-cal{ border-collapse:separate; border-spacing:0; font-size:12.5px; }
table.rejilla-cal th, table.rejilla-cal td{
  border-right:1px solid var(--linea); border-bottom:1px solid var(--linea);
  padding:0; height:34px;
}
table.rejilla-cal thead th{
  position:sticky; top:0; z-index:3; background:var(--panel-2);
  font-size:10.5px; font-weight:650; color:var(--tinta-2);
  text-align:center; min-width:52px; padding:5px 3px; line-height:1.25;
}
table.rejilla-cal thead th b{ display:block; font-size:14px; color:var(--tinta); font-weight:650; }
table.rejilla-cal thead th.finde{ background:var(--menta); }
table.rejilla-cal thead th.hoy{ background:var(--acento); color:#fff; }
table.rejilla-cal thead th.hoy b{ color:#fff; }

.col-hab{
  position:sticky; left:0; z-index:2; background:var(--panel);
  min-width:190px; max-width:190px; text-align:left !important;
  padding:6px 12px !important; font-weight:550; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
thead .col-hab{ z-index:4; background:var(--panel-2) !important; }
tr.grupo-tipo td{
  background:var(--panel-2); font-weight:650; font-size:12px;
  padding:6px 12px !important; color:var(--tinta);
}
tr.grupo-tipo .col-hab{ background:var(--panel-2); }
.libres{
  display:block; text-align:center; font-size:11px; font-weight:650;
  color:var(--tinta-2); line-height:1.15;
}
.libres.agotado{ color:var(--peligro); }
.libres small{ display:block; font-size:9.5px; font-weight:500; color:var(--tinta-3); }

.celda-libre{ background:var(--panel); cursor:pointer; }
.celda-libre:hover{ background:var(--menta); }
.celda-finde{ background:#FBFCFE; }

/* Habitacion bloqueada: la celda esta vacia pero no se puede vender, asi
   que no invita a hacer clic. El rayado la distingue de una libre de un
   vistazo, sin tener que leer el punto de estado de la primera columna. */
.celda-bloqueada{
  cursor:not-allowed;
  background:repeating-linear-gradient(45deg,
    #E7EBF0 0 6px, #F4F6F9 6px 12px);
}
.celda-bloqueada:hover{ background:repeating-linear-gradient(45deg,
    #E7EBF0 0 6px, #F4F6F9 6px 12px); }

/* La fila entera de una habitacion bloqueada se apaga un poco. */
tr.hab-bloqueada .col-hab{ color:var(--tinta-2); }

.bloque{
  display:flex; align-items:center; height:100%; padding:0 7px;
  font-size:11.5px; font-weight:600; color:#fff; cursor:pointer;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.bloque:hover{ filter:brightness(1.08); }
.bloque.provisional{ background:#C98A21; }
.bloque.confirmada { background:#1D8DAB; }
.bloque.en_casa    { background:#14805E; }
.bloque.finalizada { background:#8CA0B3; }
.bloque.bloqueo    { background:#5B6B7C;
  background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.16) 0 5px, transparent 5px 10px); }
.bloque.inicio{ border-radius:6px 0 0 6px; }
.bloque.fin{ border-radius:0 6px 6px 0; }

.leyenda{ display:flex; flex-wrap:wrap; gap:14px; margin-top:14px; font-size:12px; color:var(--tinta-2); }
.leyenda span{ display:inline-flex; align-items:center; gap:6px; }
.leyenda i{ width:12px; height:12px; border-radius:3px; display:inline-block; }

/* ---------- ficha de reserva ---------- */
.ficha-datos{
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px 20px; margin-bottom:18px;
}
.ficha-dato small{
  display:block; font-size:10.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--tinta-2); margin-bottom:2px;
}
.ficha-dato b{ font-size:14px; font-weight:580; }
.cuenta-linea{
  display:flex; justify-content:space-between; padding:7px 0;
  border-bottom:1px solid var(--linea); font-size:14px;
}
.cuenta-linea.total{ border-bottom:0; border-top:2px solid var(--linea-fuerte);
  font-weight:680; font-size:16px; padding-top:11px; margin-top:4px; }
.cuenta-linea.saldo b{ color:var(--peligro); }
.cuenta-linea.saldo.cero b{ color:var(--exito); }

/* ---------- integracion ---------- */
.codigo{
  background:#0F2937; color:#D7E4EC; border-radius:9px; padding:14px 16px;
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  font-size:12.5px; line-height:1.65; overflow-x:auto; white-space:pre;
  margin:0;
}
.codigo .llave{ color:#7FD1C4; }
.codigo .coment{ color:#7E93A3; }
.token{
  font-family:"SFMono-Regular",Consolas,monospace; font-size:13px;
  background:var(--panel-2); border:1px solid var(--linea); border-radius:7px;
  padding:7px 10px; display:inline-flex; align-items:center; gap:10px;
  word-break:break-all;
}
.dominio-chip{
  display:inline-flex; align-items:center; gap:7px; padding:4px 8px 4px 11px;
  border-radius:999px; background:var(--menta); border:1px solid var(--menta-linea);
  color:var(--acento); font-size:12.5px; font-weight:580; margin:0 6px 6px 0;
}
.dominio-chip button{
  border:0; background:transparent; color:inherit; cursor:pointer;
  font-size:15px; line-height:1; padding:0 2px; opacity:.65;
}
.dominio-chip button:hover{ opacity:1; }

/* Cinco columnas para el resumen del hotel en el panel de inicio. */
@media (max-width:1180px){
  .rejilla[style*="repeat(5"]{ grid-template-columns:repeat(3,1fr) !important; }
}
@media (max-width:760px){
  .rejilla[style*="repeat(5"]{ grid-template-columns:repeat(2,1fr) !important; }
}