/* Estilo del sistema del hostal Maui. Simple a propósito: se usa en el
   mostrador, a veces en celular, y tiene que leerse rápido. */

:root {
  /* Paleta oficial de Maui Hostels (Brand Guidelines 2025):
     azul profundo #284C66, gris #5A6A73, turquesa #80CEC3, lima #B2DC56,
     naranja #F88B32, verde #36A84C, coral #EF6E67, crema #FDF9F3. */
  --maui-azul: #284c66;
  --maui-azul-oscuro: #1d3a4f;
  --maui-turquesa: #80cec3;
  --maui-lima: #b2dc56;
  --maui-naranja: #f88b32;
  --maui-coral: #ef6e67;
  --maui-crema: #fdf9f3;
  --tinta: #1d2f3d;
  --tinta-suave: #5a6a73;
  --linea: #dbe3e8;
  --fondo: #f5f8f9;
  --tarjeta: #ffffff;
  --mar: #284c66;
  --mar-oscuro: #1d3a4f;
  --arena: #fdf9f3;
  --alerta: #c6362e;
  --bien: #2a8a47;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--tinta);
  background: var(--fondo);
  line-height: 1.5;
}

a { color: var(--mar-oscuro); }

.barra {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  background: var(--maui-azul);
  color: #fff;
  flex-wrap: wrap;
}
.barra .marca { display: flex; align-items: center; }
.barra .marca img { height: 34px; width: auto; display: block; }
.barra .titulo-pantalla { font-weight: 600; letter-spacing: 0.01em; padding-left: 1rem; border-left: 1px solid rgba(255,255,255,0.25); }
.barra .quien { margin-left: auto; font-size: 0.9rem; color: #c9d6dd; }
.barra button {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  border-radius: 0.4rem;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
}

/* Selector de propiedad (Tulum / Playa) en la barra de arriba. */
.barra .selector-propiedad {
  width: auto;
  background: var(--maui-azul-oscuro);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
  padding: 0.3rem 0.5rem;
  font-size: 0.9rem;
}

/* Menú de pantallas. */
.menu { display: flex; gap: 1.25rem; padding: 1rem 0 0.25rem; flex-wrap: wrap; }
.menu a { color: var(--tinta-suave); text-decoration: none; font-weight: 600; font-size: 0.9rem; }
.menu a:hover { color: var(--mar-oscuro); }
.menu a.aqui { color: var(--tinta); border-bottom: 2px solid var(--mar); padding-bottom: 0.2rem; }

/* Renglón desplegado con las camas de un cuarto. */
td.desplegado { background: #fbfcfc; }

.contenido { max-width: 62rem; margin: 0 auto; padding: 1.25rem; }

h1 { font-size: 1.5rem; margin: 0 0 0.25rem; }
h2 { font-size: 1.1rem; margin: 2rem 0 0.75rem; }
.ayuda { color: var(--tinta-suave); margin: 0 0 1.25rem; }

.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: 0.6rem;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.3rem; }

input, select {
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--linea);
  border-radius: 0.4rem;
  font: inherit;
  background: #fff;
}

.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.9rem; }
.campo-ancho { grid-column: 1 / -1; }

button.principal {
  background: var(--mar);
  color: #fff;
  border: 0;
  border-radius: 0.4rem;
  padding: 0.6rem 1.1rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
button.principal:hover { background: var(--mar-oscuro); }
button.principal:disabled { opacity: 0.55; cursor: default; }

button.liso {
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 0.4rem;
  padding: 0.35rem 0.6rem;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.55rem 0.5rem; border-bottom: 1px solid var(--linea); }
th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tinta-suave); }
td.derecha, th.derecha { text-align: right; }

.etiqueta {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.1rem 0.45rem;
  border-radius: 1rem;
  background: var(--arena);
  color: #6b5a3e;
}
.etiqueta.dormitorio { background: #e3f1f3; color: #0b5f6a; }
.etiqueta.apagada { background: #eceff1; color: var(--tinta-suave); }

.camas { color: var(--tinta-suave); font-size: 0.85rem; }

.aviso { padding: 0.7rem 0.9rem; border-radius: 0.4rem; margin: 0 0 1rem; }
.aviso.mal { background: #fdecea; color: var(--alerta); border: 1px solid #f5c6c2; }
.aviso.bien { background: #e8f5ee; color: var(--bien); border: 1px solid #c2e3d0; }

.entrada { max-width: 24rem; margin: 10vh auto; }
.entrada .marca { text-align: center; margin: 0.5rem 0 0.75rem; }
.entrada .marca img { width: 220px; max-width: 80%; height: auto; }
.entrada .sub { text-align: center; color: var(--tinta-suave); margin-bottom: 1.5rem; }
.entrada label { margin-top: 0.9rem; }
.entrada button { width: 100%; margin-top: 1.25rem; }

/* ===================== Tablero ===================== */

.contenido-ancho { max-width: 100rem; }

.aviso.prueba { background: #fff7e0; color: #6b4e00; border: 1px solid #f0dca0; }

.controles { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0.5rem 0 0.75rem; }
.controles label.en-linea { display: flex; align-items: center; gap: 0.4rem; margin: 0; font-weight: 600; }
.controles input, .controles select { width: auto; }

.leyenda { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.82rem; color: var(--tinta-suave); margin-bottom: 0.6rem; }
.leyenda .muestra { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 0.2rem; vertical-align: -0.1rem; }

.tablero-caja { overflow-x: auto; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 0.6rem; }

table.tablero { border-collapse: separate; border-spacing: 0; table-layout: fixed; width: max-content; min-width: 100%; font-size: 0.82rem; }
table.tablero th, table.tablero td { border-bottom: 1px solid var(--linea); padding: 0; height: 2rem; }
table.tablero th.dia { width: 3.6rem; min-width: 3.6rem; text-align: center; font-size: 0.75rem; line-height: 1.15; padding: 0.35rem 0.1rem; text-transform: none; letter-spacing: 0; color: var(--tinta-suave); border-left: 1px solid var(--linea); }
table.tablero th.dia .dia-nombre { text-transform: uppercase; font-size: 0.68rem; }
table.tablero th.dia .dia-mes { font-size: 0.68rem; color: var(--mar-oscuro); }
table.tablero th.finde { background: #f8f5ef; }
table.tablero th.hoy { background: var(--mar); color: #fff; }
table.tablero th.hoy .dia-mes { color: #fff; }

/* La columna de las camas se queda fija al desplazarse a los lados. */
table.tablero .col-cama { position: sticky; left: 0; z-index: 1; background: var(--tarjeta); width: 9.5rem; min-width: 9.5rem; padding: 0 0.6rem; white-space: nowrap; border-right: 1px solid var(--linea); text-align: left; }
table.tablero thead .col-cama { z-index: 2; font-size: 0.85rem; color: var(--tinta); text-transform: none; letter-spacing: 0; }
table.tablero .cama-sub { color: var(--tinta-suave); font-size: 0.75rem; }

table.tablero tr.grupo td { background: #f3f6f7; font-weight: 600; padding: 0.35rem 0.6rem; height: auto; position: sticky; left: 0; }

table.tablero td.libre { border-left: 1px solid #eef2f4; }
table.tablero td.libre.hoy { background: #f0f9fa; }
table.tablero td.libre.se-puede { cursor: pointer; }
table.tablero td.libre.se-puede:hover { background: #e3f1f3; box-shadow: inset 0 0 0 2px var(--mar); }

table.tablero td.con-reserva { padding: 0.2rem 0.15rem; border-left: 1px solid #eef2f4; }
.res { display: block; width: 100%; height: 1.6rem; border: 0; border-radius: 0.35rem; padding: 0 0.5rem; font: inherit; font-size: 0.78rem; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.res.sigue-atras { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.res.sigue-adelante { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.res.confirmada, .muestra.confirmada { background: #d6e6fb; color: #123d75; }
.res.llego,      .muestra.llego      { background: #c6ead8; color: #0b4d34; }
.res.sale-hoy,   .muestra.sale-hoy   { background: #fbe1a6; color: #5e3d00; }
.res.se_fue,     .muestra.se_fue     { background: #e4e7ea; color: #4b5560; }
.res:hover { filter: brightness(0.96); }
.res:focus-visible { outline: 2px solid var(--tinta); outline-offset: 1px; }

/* Diálogos */
dialog { border: 1px solid var(--linea); border-radius: 0.7rem; padding: 1.25rem 1.4rem; max-width: 30rem; width: calc(100% - 2rem); color: var(--tinta); }
dialog::backdrop { background: rgba(22, 34, 43, 0.45); }
dialog h2 { margin: 0 0 0.2rem; }
dialog label { margin-top: 0.8rem; }
.botones-dialogo { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; margin-top: 1.2rem; }
table.detalle th { text-transform: none; letter-spacing: 0; font-size: 0.85rem; width: 6rem; }
table.detalle td, table.detalle th { padding: 0.4rem 0.3rem; }
button.liso.peligro { color: var(--alerta); border-color: #f0c4c0; }

/* --- Tablero por noches (de medio día a medio día) --- */
table.tablero col.c-cama  { width: 9.5rem; }
table.tablero col.c-mitad { width: 1.9rem; }
table.tablero th.dia { width: auto; min-width: 0; }

/* Las líneas finas de las celdas libres caen a medio día: es el momento
   en que uno se va y el otro llega. */
table.tablero td.libre { border-left: 1px dashed #e6ecef; }
table.tablero td.libre.esta-noche { background: #f0f9fa; }
table.tablero td.libre.se-puede { cursor: cell; user-select: none; }
table.tablero td.libre.seleccion { background: #cfe9ec; box-shadow: inset 0 0 0 2px var(--mar); }

.leyenda-nota { font-style: italic; }

/* Diálogo de reserva */
dialog { max-width: 36rem; }
dialog .campos { margin-top: 0.2rem; }
.fechas-nueva { margin: 0.8rem 0 0; color: var(--tinta); font-weight: 600; }
.nota-campo { margin: 0.3rem 0 0; font-size: 0.82rem; }
input[type="file"] { padding: 0.4rem; background: #fbfcfc; }

/* Documento en el detalle */
.documento-caja { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--linea); }
.documento-caja input[type="file"] { flex: 1 1 14rem; width: auto; }
.doc-ok { color: var(--bien); font-weight: 600; font-size: 0.9rem; }
.doc-falta { color: var(--alerta); font-weight: 600; font-size: 0.9rem; }

/* Segundo toque para confirmar lo que no tiene vuelta atrás */
button.liso.armado { background: var(--alerta); color: #fff; border-color: var(--alerta); }

/* --- Buscador del tablero --- */
.buscador { position: relative; margin-left: auto; min-width: 16rem; flex: 0 1 22rem; }
.buscador input { width: 100%; }
.resultados { position: absolute; top: calc(100% + 0.3rem); right: 0; left: 0; z-index: 5; background: #fff; border: 1px solid var(--linea); border-radius: 0.5rem; box-shadow: 0 8px 24px rgba(22,34,43,0.14); max-height: 22rem; overflow-y: auto; }
.resultado { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--linea); background: #fff; padding: 0.55rem 0.75rem; font: inherit; cursor: pointer; }
.resultado:hover, .resultado:focus-visible { background: #f0f9fa; }
.resultado strong { display: block; }
.resultado span { font-size: 0.8rem; color: var(--tinta-suave); }
.resultado-vacio { padding: 0.7rem 0.75rem; color: var(--tinta-suave); font-size: 0.85rem; }

/* --- Mover una reserva arrastrándola --- */
.res[draggable="true"] { cursor: grab; }
.res.arrastrando { opacity: 0.45; }
table.tablero tr.destino-ok td { background: #e2f4ea !important; }
table.tablero tr.destino-ok .col-cama { box-shadow: inset 4px 0 0 var(--bien); }
table.tablero tr.destino-no td { background: #fbeceb !important; cursor: not-allowed; }

/* --- Ficha de la reserva --- */
dialog.ficha { max-width: 52rem; padding: 1.1rem 1.4rem 1.3rem; }
.ficha-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.ficha-sub { margin-top: 0.35rem; font-size: 0.88rem; color: var(--tinta-suave); }
.etiqueta.estado-confirmada { background: #d6e6fb; color: #123d75; }
.etiqueta.estado-llego      { background: #c6ead8; color: #0b4d34; }
.etiqueta.estado-se_fue, .etiqueta.estado-cancelada, .etiqueta.estado-no_llego { background: #e4e7ea; color: #4b5560; }

.pestanas { display: flex; gap: 0.2rem; border-bottom: 1px solid var(--linea); margin: 1rem 0 0.9rem; overflow-x: auto; }
.pestanas button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 0.55rem 0.85rem; font: inherit; font-weight: 600; font-size: 0.9rem; color: var(--tinta-suave); cursor: pointer; white-space: nowrap; }
.pestanas button[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--mar); }
.pestanas button:hover { color: var(--tinta); }
.panel { min-height: 12rem; }
.subtitulo { font-size: 0.95rem; margin: 1.2rem 0 0.5rem; }

table.historial { font-size: 0.85rem; }
table.historial th { font-size: 0.72rem; }
table.historial tr.esta td { background: #f0f9fa; font-weight: 600; }

.doc-vista { display: block; max-width: 100%; max-height: 22rem; border: 1px solid var(--linea); border-radius: 0.5rem; margin: 0.4rem 0 0.6rem; }
a.boton-liga { display: inline-block; text-decoration: none; color: var(--tinta); background: #fff; border: 1px solid var(--linea); border-radius: 0.4rem; padding: 0.35rem 0.7rem; font-size: 0.85rem; }

.zona-archivo { border: 2px dashed #b9cdd3; border-radius: 0.6rem; padding: 1.1rem; text-align: center; color: var(--tinta-suave); background: #fbfcfc; cursor: pointer; font-size: 0.9rem; margin-top: 0.4rem; }
.zona-archivo:hover, .zona-archivo:focus-visible { border-color: var(--mar); color: var(--tinta); outline: none; }
.zona-archivo.encima { border-color: var(--mar); background: #e3f1f3; color: var(--mar-oscuro); }
.zona-archivo.con-archivo { border-style: solid; border-color: var(--bien); color: var(--bien); background: #eef8f2; }

.notas-lista { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.9rem; }
.nota { background: #fffaf0; border: 1px solid #f1e3c4; border-radius: 0.5rem; padding: 0.6rem 0.8rem; }
.nota-texto { white-space: pre-wrap; }
.nota-autor { font-size: 0.75rem; color: var(--tinta-suave); margin-top: 0.3rem; }
textarea { width: 100%; padding: 0.55rem 0.65rem; border: 1px solid var(--linea); border-radius: 0.4rem; font: inherit; resize: vertical; }

/* --- Alta de equipo --- */
.resultado-alta { margin-top: 1.2rem; padding: 1rem; border: 1px solid #c2e3d0; background: #eef8f2; border-radius: 0.5rem; }
.resultado-alta p { margin: 0 0 0.6rem; }
.enlace-caja { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.6rem; }
.enlace-caja input { flex: 1 1 18rem; font-family: ui-monospace, Consolas, monospace; font-size: 0.8rem; }
a.boton-liga-principal { display: inline-block; text-decoration: none; background: var(--mar); color: #fff; border-radius: 0.4rem; padding: 0.55rem 1rem; font-weight: 600; }
a.boton-liga-principal:hover { background: var(--mar-oscuro); }

/* La alerta de lista negra en la ficha: roja, grande, en todas las pestañas */
.alerta-veto { background: var(--alerta); color: #fff; border-radius: 0.5rem; padding: 0.9rem 1rem; margin: 0 0 1rem; font-size: 1.05rem; line-height: 1.4; }
.alerta-veto strong { display: block; font-size: 1.15rem; letter-spacing: 0.02em; margin-bottom: 0.25rem; }
.alerta-veto .veto-pie { margin-top: 0.4rem; font-size: 0.9rem; opacity: 0.95; }

/* Encabezados con la letra de la marca */
h1, h2, h3 { font-family: "Montserrat", system-ui, sans-serif; letter-spacing: -0.01em; }

/* ---------- Inicio: el menú principal ---------- */
.inicio { max-width: 76rem; }
.inicio .inicio-saludo { display: flex; align-items: center; gap: 1.1rem; margin: 0.25rem 0 0.5rem; padding: 1.3rem 1.5rem; border-radius: 1rem; background: var(--maui-azul); color: #fff; }
.inicio .inicio-tortuga { width: 52px; height: auto; flex: none; }
.inicio .inicio-saludo h1 { font-size: 1.6rem; margin: 0; color: #fff; }
.inicio .inicio-saludo .ayuda { color: rgba(255, 255, 255, 0.82); margin: 0.15rem 0 0; }
.inicio-titulo { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinta-suave); margin: 1.6rem 0 0.7rem; }
.resumen-hoy { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; }
.resumen-hoy .dato { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 0.8rem; padding: 0.95rem 1.1rem; display: grid; gap: 0.15rem; }
.resumen-hoy .dato b { font-size: 2rem; font-weight: 700; color: var(--maui-azul); font-variant-numeric: tabular-nums; line-height: 1.05; }
.resumen-hoy .dato span { color: var(--tinta-suave); font-size: 0.88rem; }
.losas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; }
.losa { display: flex; flex-direction: column; gap: 0.35rem; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 0.9rem; padding: 1.15rem 1.15rem 1.25rem; text-decoration: none; color: var(--tinta); transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s; }
a.losa:hover, a.losa:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(40, 76, 102, 0.14); border-color: var(--maui-turquesa); outline: none; }
.losa > strong { font-size: 1.05rem; font-weight: 700; }
.losa > .losa-texto { color: var(--tinta-suave); font-size: 0.9rem; line-height: 1.45; }
.losa > .losa-icono { width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; background: var(--maui-turquesa); color: var(--maui-azul); display: grid; place-items: center; margin-bottom: 0.45rem; }
.losa > .losa-icono svg { width: 1.5rem; height: 1.5rem; }
.losa.apagada { background: var(--maui-crema); border-style: dashed; }
.losa.apagada > em { font-style: normal; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--maui-naranja); }
.losa.apagada > strong { color: var(--tinta-suave); }
@media (max-width: 900px) {
  .resumen-hoy, .losas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .losas { grid-template-columns: minmax(0, 1fr); }
  .inicio .inicio-saludo { padding: 1rem 1.1rem; }
  .inicio .inicio-saludo h1 { font-size: 1.35rem; }
}

/* Cámara del celular en la zona de archivo */
.boton-camara { width: 100%; margin-top: 0.5rem; }

/* Menú rápido del tablero (clic derecho sobre una reserva) */
.menu-rapido { position: fixed; z-index: 50; min-width: 15rem; max-width: 20rem; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 0.6rem; box-shadow: 0 12px 30px rgba(29, 47, 61, 0.18); padding: 0.35rem; display: flex; flex-direction: column; }
.menu-rapido .menu-titulo { font-weight: 700; font-size: 0.85rem; padding: 0.45rem 0.6rem 0.4rem; color: var(--maui-azul); border-bottom: 1px solid var(--linea); margin-bottom: 0.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-rapido .opcion { background: none; border: 0; text-align: left; font: inherit; font-size: 0.9rem; padding: 0.5rem 0.6rem; border-radius: 0.4rem; cursor: pointer; color: var(--tinta); }
.menu-rapido .opcion:hover, .menu-rapido .opcion:focus-visible { background: var(--fondo); outline: none; }
.menu-rapido .opcion.peligro { color: var(--alerta); }
.menu-rapido .menu-nota { font-size: 0.78rem; color: var(--tinta-suave); padding: 0.4rem 0.6rem 0.3rem; border-top: 1px solid var(--linea); margin-top: 0.25rem; }