/* Modulo de hospedaje: una sola hoja para todo el modulo, con los tokens de
   css/styles.css y ningun color propio. El color de un bloque del calendario NO
   esta aqui a proposito: sale del canal, que es un dato, y lo pone la vista en
   linea (js/hospedaje/calendario.js). Escribirlo aqui seria congelar en CSS lo
   que el usuario cambia en datos.

   Movil primero: la rejilla se consulta de pie y desde el telefono, asi que el
   calendario vive en un contenedor desplazable en horizontal y las columnas
   tienen un ancho minimo legible en vez de encogerse hasta desaparecer. */

/* grupo de navegacion del modulo en la barra superior */
.nav-hosp { align-items: center; }

/* aviso de ruta cuya vista todavia no existe (comparte forma con .rest-vacio) */
.hosp-vacio { max-width: 420px; }

/* ---------- encabezado de vista ---------- */
.hosp-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2);
}
.hosp-head h2 { font-size: var(--fs-3); }
.hosp-head .sub { margin: 0; font-size: var(--fs-0); color: var(--text-dim); }

/* navegacion de mes: los dos controles son objetivo de pulgar en telefono */
.hosp-mes { display: flex; align-items: center; gap: var(--sp-2); }
.hosp-mes-label {
  min-width: 7em; text-align: center; font-size: var(--fs-2); font-weight: 600;
}
.hosp-btn {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); font-size: var(--fs-2);
  min-width: 44px; min-height: 44px; cursor: pointer;
  transition: background var(--trans), border-color var(--trans);
}
.hosp-btn:hover { background: var(--surface); border-color: var(--accent); }

/* ---------- sello de frescura por canal ---------- */
.hosp-frescura {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2);
}
.hosp-sync {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-0); color: var(--text-dim);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 3px var(--sp-2);
}
/* un feed viejo se dice con color Y con borde: nunca solo con color */
.hosp-sync.viejo { color: var(--warn); border-color: var(--warn); }
.hosp-sw { width: 10px; height: 10px; border-radius: 50%; flex: none; }

/* el modulo es espejo de lectura y lo dice, no lo esconde */
.hosp-aviso-lectura {
  margin: 0 0 var(--sp-2); padding: var(--sp-2);
  font-size: var(--fs-0); color: var(--text-dim);
  border: 1px dashed var(--border); border-radius: var(--radius);
}

/* ---------- traslapes ---------- */
.hosp-conflictos {
  margin-bottom: var(--sp-2); padding: var(--sp-2);
  border: 1px solid var(--danger); border-radius: var(--radius);
  background: var(--surface);
}
.hosp-conflictos h3 { font-size: var(--fs-1); color: var(--danger); }
.hosp-conflictos ul { margin: var(--sp-1) 0 0; padding-left: var(--sp-3); }
.hosp-conflictos li { font-size: var(--fs-0); color: var(--text-dim); }

/* ---------- rejilla del calendario ---------- */
.hosp-cal-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border); border-radius: var(--radius);
}
.hosp-cal { border-collapse: collapse; width: 100%; font-size: var(--fs-0); }
.hosp-cal th, .hosp-cal td { padding: 0; }
.hosp-cal thead th {
  color: var(--text-dim); font-weight: 500; text-align: center;
  min-width: 26px; padding: var(--sp-1) 0; border-bottom: 1px solid var(--border);
}
.hosp-unidad {
  position: sticky; left: 0; z-index: 1;
  background: var(--surface); color: var(--text); text-align: left;
  padding: var(--sp-1) var(--sp-2); white-space: nowrap;
  border-right: 1px solid var(--border); min-width: 9em;
}
/* la pista es la fila de una unidad; el carril reparte las noches en columnas */
.hosp-pista { padding: var(--sp-1) 0; }
.hosp-carril { display: grid; gap: 2px; min-height: 30px; align-items: stretch; }
.hosp-guia th, .hosp-guia td { height: 1px; border-bottom: 1px solid var(--border); }

.hosp-bloque {
  display: flex; align-items: center; overflow: hidden;
  border-radius: var(--radius-sm); padding: 2px var(--sp-1);
  font-size: var(--fs-0); color: var(--text); min-width: 0;
}
.hosp-bloque-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* un bloqueo no es una venta: se dibuja rayado y sin color de canal */
.hosp-bloque.hosp-bloqueo {
  background: repeating-linear-gradient(
    45deg, var(--surface-2), var(--surface-2) 5px, var(--empty) 5px, var(--empty) 10px);
  color: var(--text-dim);
}
/* el traslape se marca con borde, que se ve encima de cualquier color de canal */
.hosp-bloque.conflicto { outline: 2px solid var(--danger); outline-offset: -2px; }

/* ---------- leyenda ---------- */
.hosp-leyenda {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-2); font-size: var(--fs-0); color: var(--text-dim);
}
.hosp-swatch {
  width: 16px; height: 12px; border-radius: var(--radius-sm); flex: none;
  display: inline-block; background: var(--surface-2);
}
.hosp-swatch.hosp-bloqueo {
  background: repeating-linear-gradient(
    45deg, var(--surface-2), var(--surface-2) 5px, var(--empty) 5px, var(--empty) 10px);
}
.hosp-swatch.conflicto { outline: 2px solid var(--danger); outline-offset: -2px; }

/* ---------- listas y formularios del modulo ---------- */
.hosp-cols {
  display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
/* un hijo de un grid con min-width auto no encoge bajo su contenido y estira su
   columna hasta desbordar el documento; min-width 0 es lo que lo contiene */
.hosp-cols > * { min-width: 0; }
.hosp-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--sp-2);
}
.hosp-card h3 { font-size: var(--fs-1); margin-bottom: var(--sp-1); }
.hosp-card .cuenta { color: var(--text-dim); font-weight: 400; }
.hosp-lista { list-style: none; margin: 0; padding: 0; }
.hosp-lista li {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1);
  padding: var(--sp-1) 0; border-bottom: 1px solid var(--border);
}
.hosp-lista li:last-child { border-bottom: none; }
.hosp-lista .vacio { color: var(--text-dim); font-size: var(--fs-0); }
.hosp-tag {
  font-size: var(--fs-0); color: var(--text-dim);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1px var(--sp-1);
}
.hosp-tag.bloqueo { color: var(--warn); border-color: var(--warn); }
.hosp-tag.hecha { color: var(--ok); border-color: var(--ok); }
.hosp-tag.falta { color: var(--warn); border-color: var(--warn); }

.hosp-form { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; }
.hosp-form input, .hosp-form select, .hosp-form textarea {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: var(--sp-1); font-family: var(--font); font-size: var(--fs-1);
  min-width: 0; flex: 1 1 8em;
}
.hosp-form button {
  background: var(--accent-soft); color: var(--text);
  border: 1px solid var(--accent); border-radius: var(--radius-sm);
  padding: var(--sp-1) var(--sp-2); font-size: var(--fs-1);
  min-height: 44px; cursor: pointer;
}
.hosp-form button:hover { background: var(--accent); }

/* dinero: tabulares para que las columnas alineen */
.hosp-importe { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hosp-total { font-size: var(--fs-3); font-weight: 700; font-variant-numeric: tabular-nums; }
/* un total calculado sobre datos incompletos nunca se presenta a solas */
.hosp-incompleto { color: var(--warn); font-size: var(--fs-0); }

.hosp-tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-1); }
.hosp-tabla th, .hosp-tabla td {
  padding: var(--sp-1); border-bottom: 1px solid var(--border); text-align: left;
}
.hosp-tabla td.num, .hosp-tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
.hosp-tabla-wrap { overflow-x: auto; }

@media (max-width: 640px) {
  .nav-hosp .nav-grupo { border-left: none; padding-left: 0; width: 100%; }
  .hosp-head h2 { font-size: var(--fs-2); }
  .hosp-mes { width: 100%; justify-content: space-between; }
  .hosp-unidad { min-width: 6.5em; font-size: var(--fs-0); }
}

/* ---------- tablero de unidades (hq-m5eg.14.13) ---------- */
/* Una tarjeta por unidad. La rejilla es auto-fill con un minimo en em y no un
   numero fijo de columnas: a 360 px de ancho cabe UNA sola, que es lo que pide
   el bead, y en el monitor de administracion caben las seis sin tocar nada. */
.tab-rejilla {
  list-style: none; display: grid; gap: var(--sp-2); margin-top: var(--sp-2);
  grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
}
.tab-unidad {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--sp-2);
  /* La franja de color es la lectura de un vistazo: se ve antes que el texto */
  border-left: 4px solid var(--empty);
}
/* La etiqueta mas larga ("Limpieza programada") no se parte: partida en dos
   renglones empuja el nombre de la unidad a dos, y el nombre es lo que se busca
   primero al mirar el tablero. Si no caben en una linea, baja la etiqueta
   entera. */
.tab-fila { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-1); flex-wrap: wrap; }
.tab-fila .tab-estado { white-space: nowrap; }
.tab-nombre { font-size: var(--fs-2); }
.tab-pendiente { color: var(--text-dim); font-size: var(--fs-0); font-weight: 400; }
.tab-porque { color: var(--text-dim); font-size: var(--fs-1); margin-top: var(--sp-1); }
.tab-proximo { font-size: var(--fs-1); margin-top: var(--sp-1); }

/* Resumen por estado sobre la rejilla: el conteo que administracion mira antes
   que las tarjetas. */
.tab-resumen {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.tab-resumen li {
  display: flex; align-items: baseline; gap: var(--sp-1);
  font-size: var(--fs-1); color: var(--text-dim);
  border-left: 3px solid var(--empty); padding-left: var(--sp-1);
}
.tab-cuenta { font-size: var(--fs-3); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

/* El color de cada estado se declara UNA vez y lo heredan la franja de la
   tarjeta, la del resumen, la etiqueta y el termino de la leyenda. Asi no hay
   dos sitios donde "sucia" pueda dejar de ser del mismo color. */
.estado-bloqueo { --estado: var(--warn); }
.estado-ocupada { --estado: var(--accent); }
.estado-problema { --estado: var(--danger); }
.estado-sucia { --estado: var(--danger); }
.estado-programada { --estado: var(--info); }
.estado-limpia { --estado: var(--ok); }
.estado-reservada { --estado: var(--gold); }
.estado-libre { --estado: var(--text-dim); }
.tab-unidad, .tab-resumen li { border-left-color: var(--estado, var(--empty)); }
.tab-unidad .tab-estado { color: var(--estado, var(--text-dim)); border-color: var(--estado, var(--border)); }

/* El estado no se dice solo con color: cada tarjeta lleva su etiqueta en texto
   y la leyenda explica las dos que se confunden (sucia y programada). */
.tab-leyenda { margin-top: var(--sp-3); font-size: var(--fs-1); color: var(--text-dim); }
.tab-leyenda summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.tab-leyenda dl { margin-top: var(--sp-1); }
.tab-leyenda dt { font-weight: 600; color: var(--estado, var(--text)); margin-top: var(--sp-1); }
.tab-leyenda dd { margin: 0; }

@media (max-width: 640px) {
  .tab-rejilla { grid-template-columns: 1fr; }
  .tab-resumen { gap: var(--sp-1); }
}

/* ---------- vista de limpieza para telefono (hq-m5eg.14.14) ---------- */
/* Se disena para el telefono PRIMERO y no como una pantalla de escritorio
   encogida: quien limpia la usa de pie, con una mano y a veces con guantes.
   Por eso los botones son bloques de 56 px (el minimo comodo, no el minimo
   accesible de 44), la lista es de una columna en cualquier ancho y no hay
   navegacion dentro de la tarjeta. En un monitor se ve una columna centrada,
   que es lo correcto: es una pantalla de una tarea. */
/* La cabecera y la lista comparten el mismo ancho maximo: en el telefono ocupan
   todo (que es el caso para el que esta hecha la pantalla) y en un monitor no se
   estiran a 1400 px, que hace que la caja de la fecha se lea como un error. */
.lim-head { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-2); max-width: 32em; }
.lim-head h2 { font-size: var(--fs-4); }
.lim-cuenta { font-size: var(--fs-2); color: var(--text-dim); }
.lim-yo { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-1); color: var(--text-dim); }
.lim-yo input {
  flex: 1; min-height: 44px; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: var(--sp-1) var(--sp-2); font-size: var(--fs-2);
}

.lim-lista { list-style: none; display: grid; gap: var(--sp-2); max-width: 32em; }
.lim-tarea {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--sp-2);
  border-left: 4px solid var(--warn);
}
.lim-unidad { font-size: var(--fs-3); font-weight: 700; }
.lim-nota { font-size: var(--fs-1); color: var(--warn); margin-top: var(--sp-1); }
.lim-pie { font-size: var(--fs-1); color: var(--text-dim); margin-top: var(--sp-1); }
.lim-quien, .lim-hora { color: var(--text); }

/* Los dos botones, uno debajo del otro y a todo lo ancho: en un telefono la
   fila de dos hace que el pulgar acierte el equivocado. */
.lim-botones { display: grid; gap: var(--sp-1); margin-top: var(--sp-2); }
.lim-btn {
  min-height: 56px; width: 100%; cursor: pointer;
  border-radius: var(--radius-sm); font-size: var(--fs-2);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
}
.lim-limpia { background: var(--accent-soft); border-color: var(--accent); font-weight: 600; }
.lim-limpia:hover { background: var(--accent); }
.lim-problema { color: var(--warn); border-color: var(--warn); }

/* Las hechas van abajo y tachadas: siguen a la vista para poder corregirse, sin
   competir por la atencion con lo que falta. */
.lim-titulo-hechas { font-size: var(--fs-1); color: var(--text-dim); margin: var(--sp-3) 0 var(--sp-1); }
.lim-lista-hechas .lim-tarea { border-left-color: var(--ok); opacity: 0.7; }
.lim-hecha .lim-unidad { text-decoration: line-through; color: var(--text-dim); }

/* Un fallo al guardar nunca se queda mudo. */
.lim-aviso {
  background: var(--surface-2); border-left: 4px solid var(--danger);
  border-radius: var(--radius-sm); padding: var(--sp-2);
  font-size: var(--fs-1); margin-bottom: var(--sp-2); max-width: 32em;
}