:root {
  --tinta: #1c1f1d;
  --tinta-suave: #5e6763;
  --linea: #dfe3e0;
  --fondo: #f6f7f6;
  --papel: #ffffff;
  --acento: #2f5d3f;
  --acento-claro: #e8f0ea;
  --aviso: #b3261e;
  --finde: #f0f2f0;
  --hoy: #fff4d6;
  --radio: 8px;
}

* { box-sizing: border-box; }

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

a { color: var(--acento); }

/* ---------- Cabecera ---------- */
/* ---------- Barra lateral de secciones ----------
   Fija a la derecha. El ancho vive en --cv-barra y el contenido se aparta
   con un margin-right de esa misma variable, asi que para cambiar el ancho
   solo hay que tocar la variable. Pedida por Miguel el 22/09/2026, con
   Mister Plan de referencia. */
:root {
  --cv-barra: 210px;
  /* Medidas de la rejilla del planning. Viven aqui, y no en la plantilla,
     para poder apretarlas cuando la ventana se estrecha. */
  --cv-etiqueta: 200px;
  /* 32 y no 38: con el mes debajo del numero la columna necesita menos
     ancho («26» y «sep» apilados, en vez de «26 sep»). Punto 9 corregido. */
  --cv-celda: 32px;
}

body { margin-left: var(--cv-barra); }

.barra-lateral {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--cv-barra);
  background: #1E3A2C;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 10px;
  overflow-y: auto;
  z-index: 30;
}

.barra-accion {
  display: flex; align-items: center; gap: 10px;
  background: #fff; color: #1E3A2C;
  border-radius: var(--radio);
  padding: 9px 10px;
  margin-bottom: 10px;
  text-decoration: none;
  font-size: 14px; font-weight: 600;
}
.barra-accion:hover { filter: brightness(0.94); }
.barra-icono-accion {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: 8px; background: #1E3A2C; color: #fff;
}

.barra-secciones { display: flex; flex-direction: column; gap: 2px; }

.barra-enlace {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radio);
  color: #fff; text-decoration: none;
  font-size: 14px;
  border-left: 3px solid transparent;
}
.barra-enlace:hover { background: rgba(255,255,255,.10); }

/* El cuadrado lleva el color de la seccion; el icono, blanco dentro. */
.barra-icono {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: 8px;
  background: var(--color-seccion, #8C9BAB);
  color: #fff;
}

.barra-enlace.activa {
  background: #F3F6F4;
  color: #1E3A2C;
  border-left-color: var(--color-seccion, #8C9BAB);
}

.barra-texto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Entre 900 y 1300 px la barra se queda en iconos. Medido el 22/09: el
   planning necesita 1038 px de ventana, y con la barra entera hacian falta
   1248, o sea que en un portatil de 13 pulgadas no cabia. */
@media (max-width: 1299px) {
  /* Con la barra estrecha el planning tiene que seguir entrando entero:
     150 + 21x36 = 906 px, y a 1024 quedan 920. Comprobado el 22/09. */
  :root { --cv-etiqueta: 150px; --cv-celda: 32px; }
}

@media (max-width: 1299px) and (min-width: 900px) {
  :root { --cv-barra: 64px; }
  .barra-lateral { padding: 12px 8px; align-items: center; }
  .barra-texto { display: none; }
  .barra-enlace, .barra-accion { justify-content: center; gap: 0; padding: 7px; }
}

/* Por debajo de 900 px manda el telefono: fuera la barra y vuelve la fila
   de siempre. Las pantallas de /equipo se usan asi y no se tocan. */
@media (max-width: 899px) {
  :root { --cv-barra: 0px; }
  .barra-lateral { display: none; }
}

/* Al imprimir una factura no pinta nada una barra de navegacion. */
@media print {
  .barra-lateral { display: none; }
  body { margin-left: 0; }
}

.cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
  position: sticky;
  top: 0;
  z-index: 20;
}
.marca { font-weight: 600; letter-spacing: -0.01em; }
.marca span { color: var(--tinta-suave); font-weight: 400; margin-left: 8px; }

.acciones { display: flex; gap: 8px; align-items: center; }

/* De 900 px para arriba las secciones estan en la barra de la derecha, asi
   que en la cabecera solo se quedan el usuario y Salir. */
@media (min-width: 900px) {
  .cabecera .acciones > a.boton:not([href="/salir"]) { display: none; }
}

.boton {
  display: inline-block;
  padding: 7px 14px;
  border-radius: var(--radio);
  border: 1px solid var(--linea);
  background: var(--papel);
  color: var(--tinta);
  text-decoration: none;
  font-size: 13px;
  cursor: pointer;
}
.boton:hover { background: var(--fondo); }
.boton.principal {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}
.boton.principal:hover { filter: brightness(1.08); }
.boton.peligro { color: var(--aviso); border-color: #f0c9c6; }

/* ---------- Planning ---------- */
.contenedor { padding: 20px; }

.planning {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  /* `clip` y no `hidden`: recorta igual las esquinas redondas, pero NO
     convierte el planning en contenedor de desplazamiento. Con `hidden`,
     la fila de dias fija (punto 14) se pegaria al borde del planning, que
     no se ve, en vez de a la ventana. 23/09/2026. */
  overflow: clip;
}

.fila {
  display: grid;
  align-items: stretch;
  border-bottom: 1px solid var(--linea);
}
.fila:last-child { border-bottom: 0; }

/* Semaforo de limpieza del planning. El color dice si se puede entrar;
   el titulo, cual de los cuatro estados es. 22/09/2026. */
/* Punto 17 (23/09/2026): es un boton que se pulsa, dos colores, y al
   DOBLE de tamano (17 bis: 9 -> 18 px). NO es el punto de aviso de las
   barras (.punto): son clases distintas y cambian por separado. */
.semaforo {
  flex: 0 0 auto;
  position: relative;
  width: 18px; height: 18px; border-radius: 50%;
  margin: 0 8px 0 0; padding: 0;
  border: 1px solid rgba(0,0,0,.18);
  cursor: pointer;
}
/* Tres estados que se eligen a mano (limpia, sucia, repasar) y un cuarto
   que solo manda la app de limpieza (haciendose). 23/09/2026. */
.semaforo[data-estado="limpia"]   { background: #3f9d54; }   /* se puede entrar */
.semaforo[data-estado="sucia"]    { background: #c8493f; }   /* sin hacer */
.semaforo[data-estado="revisar"],
.semaforo[data-estado="en_curso"] { background: #e3b341; }   /* repasar / haciendose */

/* El menu de las tres opciones. */
.menu-limpieza {
  position: fixed; z-index: 55; min-width: 170px;
  background: var(--papel); border: 1px solid var(--linea); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.14); padding: 4px;
}
.menu-limpieza button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; border: 0; background: none; border-radius: 6px;
  font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.menu-limpieza button:hover, .menu-limpieza button:focus-visible { background: var(--acento-claro); }
.menu-limpieza button[aria-checked="true"] { font-weight: 600; }
.menu-limpieza i { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.semaforo:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.semaforo.guardando { opacity: .6; }
/* En tactil la zona que se pulsa mide 44 px aunque el circulo pintado
   mida 18: sin ocupar mas sitio ni estirar la fila. */
.semaforo::after { content: ""; position: absolute; inset: -13px; }

.etiqueta-nombre { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.ir-a-fecha { gap: 6px; }
.ir-a-fecha input { font-size: 13px; padding: 6px 8px; }

/* Para lectores de pantalla, sin ocupar sitio en la pantalla. */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.etiqueta-fila {
  padding: 6px 12px;
  font-size: 13px;
  /* Al estrechar la columna hay nombres de 42 caracteres que la
     desbordarian y romperian la rejilla. Se cortan con puntos suspensivos
     y el nombre entero queda en el title. 22/09/2026. */
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-right: 1px solid var(--linea);
  display: flex;
  align-items: center;
  background: var(--papel);
  position: sticky;
  left: 0;
  z-index: 5;
}

.cabecera-dias .etiqueta-fila { font-weight: 600; }

.dia {
  border-right: 1px solid var(--linea);
  text-align: center;
  font-size: 11px;
  padding: 4px 0;
  color: var(--tinta-suave);
}
.dia.finde { background: var(--finde); }
.dia.hoy { background: var(--hoy); font-weight: 600; color: var(--tinta); }
/* Tres lineas apretadas: semana (11 px), numero (14 px) y mes (10 px),
   con el interlineado justo. 2 + 13 + 16 + 12 + 2 = 45 px, algo menos que
   los 45,5 de antes con dos lineas. La fila de dias va fija (punto 14) y
   lo que ganara de alto se lo comeria a la pantalla para siempre.
   Punto 9 corregido, 23/09/2026. */
.cabecera-dias .dia { padding: 2px 0; }
.dia .semana { display: block; line-height: 13px; }
.dia .numero { display: block; font-size: 14px; line-height: 16px; color: var(--tinta); white-space: nowrap; }
.dia .mes { display: block; font-size: 10px; line-height: 12px; color: var(--tinta-suave); font-weight: 400; }
/* Donde salta el mes: una linea fina a la izquierda (sombra, no borde,
   para no cambiar el ancho de la columna) y el mes en negrita. */
.dia.primero-mes { box-shadow: inset 2px 0 0 var(--tinta-suave); }
.dia.primero-mes .mes { font-weight: 600; color: var(--tinta); }

.fila-categoria {
  background: var(--acento-claro);
  font-weight: 600;
  font-size: 13px;
}
/* La banda: solo el nombre, entero y a todo lo ancho (ya no lleva el
   subtitulo, punto 11), y un 20 % mas baja. Solo la caja: la letra y su
   interlineado se quedan igual (13 px x 1,5 = 19,5). Antes medía
   6 + 19,5 + 6 = 31,5 px; x 0,8 = 25,2, o sea 2,85 px de relleno. */
.fila-categoria .etiqueta-fila {
  background: var(--acento-claro);
  grid-column: 1 / -1;
  border-right: 0;
  padding-top: 2.85px; padding-bottom: 2.85px;
}

/* Punto 20: plegar la categoria. La banda entera es el boton; el
   triangulo cabe en la banda ya encogida del punto 11 sin subirle la
   altura (el boton hereda la misma linea de 19,5 px). */
.plegar {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; line-height: inherit; text-align: left;
  cursor: pointer;
}
.plegar:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.plegar-flecha {
  flex: 0 0 auto; width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 7px solid currentColor;            /* abajo = abierta */
  transition: transform .12s;
}
.plegada .plegar-flecha { transform: rotate(-90deg); }   /* derecha = cerrada */
.plegar-nombre { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* El resumen solo cuando esta plegada: abierta, las casas ya se ven. */
.plegar-resumen { display: none; margin-left: auto; padding-left: 12px;
                  color: var(--tinta-suave); font-weight: 400; white-space: nowrap; }
.plegada .plegar-resumen { display: inline; }
.grupo-categoria[hidden] { display: none; }
/* Cada fila de unidad conserva su linea de abajo aunque ahora sea la
   ultima de su grupo; solo la ultima del planning va sin ella. */
.grupo-categoria > .fila:last-child { border-bottom: 1px solid var(--linea); }
.planning > .grupo-categoria:last-child > .fila:last-child { border-bottom: 0; }

.pista {
  position: relative;
  display: grid;
  min-height: 34px;
}
.celda {
  border-right: 1px solid var(--linea);
  grid-row: 1;
  /* La celda vacia es un enlace a «nueva reserva»: que no parezca un
     enlace de texto, pero que se note que responde. 22/09/2026. */
  text-decoration: none;
  color: inherit;
}
.celda.finde { background: var(--finde); }
.celda.hoy { background: var(--hoy); }
a.celda:hover { background: var(--acento-claro); }

/* ---------- La linea del tiempo que se arrastra (punto 10) ----------
   Cada fila: la etiqueta, fija, y una ventana con la tira de dias. Se
   pintan tres ventanas (antes, la visible, despues); la tira mide tres
   veces la ventana y se coloca en la del medio. Todas las tiras se
   mueven con la MISMA variable (--desplaza, en #planning), asi que la
   cabecera y las filas no se descuadran nunca. 23/09/2026. */
/* La columna de las casas, como mucho el 40 % de la pantalla: en un movil
   el nombre largo se corta con puntos suspensivos (entero en el title) y
   quedan dias a la vista. */
.planning .fila { grid-template-columns: min(var(--cv-etiqueta), 40vw) minmax(0, 1fr); }
/* La PAGINA no se desplaza en horizontal (Cowork, 24/09/2026): antes el
   planning tenia un ancho minimo que empujaba la pagina entera en un
   movil. Ahora cada dia mide como poco --cv-celda y, si no caben todos
   los de la vista, se ven menos y el resto se recorre arrastrando, con el
   mismo mecanismo que el punto 10. Asi la cabecera fija (punto 14) sigue
   pegada a la ventana. */
.ventana {
  /* Recorta solo en horizontal. En vertical deja asomar la mitad de los
     puntos de estado, que salen por encima de la barra (punto 18). Con
     `hidden` no se puede: obliga a recortar tambien en vertical. */
  overflow-x: clip;
  overflow-y: visible;
  min-width: 0;
  /* En tableta el gesto horizontal es nuestro; el vertical sigue siendo
     el scroll de la pagina. */
  touch-action: pan-y;
  cursor: grab;
  /* Que arrastrar no vaya seleccionando texto de las barras. */
  user-select: none;
}
.tira {
  display: grid;
  width: max(calc(100% * var(--total) / var(--n)), calc(var(--total) * var(--cv-celda)));
  transform: translateX(calc(-100% * var(--n) / var(--total) + var(--desplaza, 0px)));
}
.cabecera-dias .tira { align-items: stretch; }
.planning.asentando .tira { transition: transform .15s ease-out; }

/* ---------- Barra de botones y fila de dias, fijas arriba (punto 14) ----
   Al bajar hasta las casas espejo se sigue viendo que columna es que
   fecha. De arriba abajo: la cabecera de la pagina (ya fija), la barra
   de botones, la fila de dias. La fila de dias NO esta dentro de nada que
   recorte: cada fila recorta solo su tira, asi que el `sticky` se pega a
   la ventana y el desplazamiento horizontal sigue siendo la misma
   variable para todas. Las alturas de arriba las mide el guion del
   planning (cambian si la barra se parte en dos lineas).

   LAS CAPAS, todas aqui y en orden:
      2   .barra .puntos          (los puntos por encima de su barra)
      5   .etiqueta-fila          (la columna de unidades, fija a la izq.)
     10   .cabecera-dias fija     (tapa las barras que pasan por debajo)
     11   .barra-fija             (la barra de botones del planning Y la de
                                   la ficha de reserva: la misma clase)
     20   .cabecera de la pagina
     30   .barra-lateral
     55   .menu-limpieza          (las tres opciones del punto de limpieza)
     60   .cuadro-reserva         (el hover: por encima de TODO, para que
                                   en la primera fila no salga cortado) */
/* La barra de mandos fija. LA MISMA para el planning (punto 14) y para la
   ficha de reserva (punto 27, 24/09/2026): si se hicieran por separado,
   dentro de tres meses se comportarian distinto. Se pega justo debajo de
   la cabecera de la pagina; su altura la mide base.html. */
.barra-fija {
  position: sticky;
  top: var(--cv-arriba-botones, 61px);
  z-index: 11;
  /* Fondo opaco: si no, lo que pasa por debajo se leeria a traves. */
  background: var(--fondo);
  padding: 8px 0;
  margin-top: -8px;
  transition: box-shadow .15s, padding .15s;
}
/* Pegada (la pagina esta desplazada): una linea y una sombra suave, que
   dicen que hay contenido por debajo. Arriba del todo, nada. */
.barra-fija.pegada { box-shadow: 0 1px 0 var(--linea), 0 6px 10px -8px rgba(0,0,0,.25); }
.barra-planning .boton { white-space: nowrap; }
/* Con poco ancho, los botones pasan a varias lineas en vez de salirse. */
.barra-planning, .barra-planning > .acciones { flex-wrap: wrap; }
@media (max-width: 899px) {
  .cabecera .acciones { flex-wrap: wrap; }
  /* En pantalla estrecha la cabecera de la pagina (con todas las
     secciones) y la barra de botones ocupan varias lineas: fijas, se
     comian media pantalla. Solo se queda fija la fila de dias, que es la
     que dice que columna es que fecha. 24/09/2026. */
  .cabecera, .barra-planning.barra-fija { position: static; }
}
/* La misma fila repetida al final (punto 26): NO fija. Vive al pie de la
   tabla y se ve al llegar abajo, con las fechas cerca de las casas espejo.
   Si tambien se pegara, con pocas casas en pantalla se juntarian las dos. */
.planning .cabecera-dias.pie-dias {
  position: static;
  box-shadow: none;
  border-top: 1px solid var(--linea);
}
.planning .cabecera-dias {
  position: sticky;
  top: var(--cv-arriba-dias, 110px);
  z-index: 10;
  background: var(--papel);
  box-shadow: 0 1px 0 var(--linea), 0 2px 4px rgba(0,0,0,.06);
}
.planning.desplazando,
.planning.desplazando * { cursor: grabbing !important; user-select: none; }

.barra {
  grid-row: 1;
  margin: 4px 2px;
  border-radius: 999px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-left: 4px solid rgba(0,0,0,.25);
}
.barra:hover { filter: brightness(1.12); }
.barra.recortada-inicio { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; }
.barra.recortada-fin { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }

/* Que se vea que la reserva SIGUE fuera de la pantalla.
   Hasta el 24/09/2026 lo unico que lo decia era la esquina sin redondear,
   que ya era sutil y que con la piel de Cork Valley —esquinas rectas en
   todo— desaparece: una reserva recortada se veia igual que una que
   empieza y acaba dentro. En la vista semanal esto pasa en casi todas.

   El borde rayado funciona sobre CUALQUIER color de canal porque es
   blanco translucido, y no depende del radio de las esquinas. */
.barra.recortada-inicio, .barra.recortada-fin { position: relative; }
.barra.recortada-inicio::before,
.barra.recortada-fin::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 11px;
  pointer-events: none;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, .55) 0 2px,
    rgba(255, 255, 255, 0)   2px 5px);
}
.barra.recortada-inicio::before { left: 0; }
.barra.recortada-fin::after { right: 0; }
/* Un bloqueo es gris claro: ahi el rayado blanco no se ve, se usa tinta. */
.barra.bloqueo.recortada-inicio::before,
.barra.bloqueo.recortada-fin::after {
  background: repeating-linear-gradient(
    -45deg,
    rgba(18, 18, 18, .38) 0 2px,
    rgba(18, 18, 18, 0)   2px 5px);
}

.barra.bloqueo {
  background: repeating-linear-gradient(45deg, #9aa3a0, #9aa3a0 6px, #848d8a 6px, #848d8a 12px);
  color: #fff;
}

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

/* ---------- Formularios y fichas ---------- */
.tarjeta {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 18px 20px;
  margin-bottom: 16px;
}

/* Un aviso que hay que resolver, no una nota informativa: rojo y con
   barra lateral para que no se confunda con el resto de tarjetas.
   22/09/2026. */
.tarjeta.sin-hueco {
  background: #fdf3f2;
  border-color: #f0c9c6;
  border-left: 4px solid var(--aviso);
}
.tarjeta.sin-hueco h2 { color: var(--aviso); }

/* La nota interna no es del huesped: tiene que distinguirse de un
   vistazo del comentario que si ve el cliente. 22/09/2026. */
.tarjeta.nota-interna {
  background: var(--hoy);
  border-color: #e0c56b;
  border-left: 4px solid #c9a227;
}
.tarjeta.nota-interna h2 { color: #7a6212; }
.tarjeta h2 {
  margin: 0 0 14px;
  font-size: 15px;
  letter-spacing: -0.01em;
}

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

label { display: block; font-size: 12px; color: var(--tinta-suave); margin-bottom: 4px; }
input, select, textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--linea);
  border-radius: 6px;
  font: inherit;
  background: var(--papel);
  color: var(--tinta);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acento-claro); border-color: var(--acento); }

.error {
  background: #fdecea;
  border: 1px solid #f5c6c2;
  color: var(--aviso);
  padding: 10px 14px;
  border-radius: var(--radio);
  margin-bottom: 16px;
}

.aviso {
  background: #fff8e6;
  border: 1px solid #f0e0b0;
  padding: 10px 14px;
  border-radius: var(--radio);
  margin-bottom: 16px;
  font-size: 13px;
}

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font-weight: 600; color: var(--tinta-suave); font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--linea); }
td { padding: 8px; border-bottom: 1px solid var(--linea); }
tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }

.etiqueta {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  background: var(--acento-claro);
  color: var(--acento);
}
.etiqueta.gris { background: #eceeed; color: var(--tinta-suave); }
.etiqueta.roja { background: #fdecea; color: var(--aviso); }

.dos-columnas { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .dos-columnas { grid-template-columns: 1fr; } }

.par { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--linea); }
.par:last-child { border-bottom: 0; }
.par span:first-child { color: var(--tinta-suave); }
.par.total { font-weight: 600; font-size: 15px; padding-top: 10px; }

/* Desglose de precio noche a noche en el alta de reserva */
.desglose {
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--fondo);
  border-radius: 8px;
}
.desglose h3 { margin: 0 0 8px; font-size: 13px; color: var(--tinta-suave);
               font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.desglose table { width: 100%; max-width: 380px; }
.desglose td { padding: 4px 0; border-bottom: 1px solid var(--linea); }
.desglose tr.total td { font-weight: 600; border-bottom: 0; padding-top: 8px; }
.desglose-aviso { margin: 10px 0 0; color: var(--aviso); font-size: 13px; }


/* ---------- Puerta: acceso, contraseña y usuarios ---------- */
.campo { margin-bottom: 12px; }
.pista { font-size: 12px; color: var(--tinta-suave); margin: 0 0 14px; }
.boton.ancho { width: 100%; text-align: center; }
.en-linea { display: inline; }
.acciones-fila { display: flex; gap: 6px; justify-content: flex-end; }
tr.apagado td { opacity: .55; }

.quien {
  display: flex; flex-direction: column; line-height: 1.15;
  padding: 0 4px 0 10px; border-left: 1px solid var(--linea); margin-left: 4px;
}
.quien a { text-decoration: none; font-size: 13px; }
.quien small { color: var(--tinta-suave); font-size: 11px; }

.pantalla-acceso {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--fondo);
  padding: 24px;
}
.acceso-caja {
  width: 100%; max-width: 380px;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 28px 26px 22px;
}
.acceso-marca { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.acceso-logo {
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 10px;
  background: var(--acento); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; letter-spacing: .02em;
}
.acceso-marca > div strong { display: block; font-size: 15px; }
.acceso-marca > div span { display: block; font-size: 12px; color: var(--tinta-suave); }
.acceso-pie { font-size: 12px; color: var(--tinta-suave); margin: 16px 0 0; }

.clave-recien { border-color: var(--acento); background: var(--acento-claro); }
.clave-grande code {
  display: inline-block;
  font-size: 22px; letter-spacing: .04em;
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: 8px; padding: 10px 16px;
  user-select: all;
}

/* Un desplegable dentro de una tabla no debe encogerse hasta no leerse. */
td select { width: auto; min-width: 150px; }


/* ---------- Buscar y editar ---------- */
.buscador { flex: 1; max-width: 420px; margin: 0 8px; }
.buscador input {
  width: 100%;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--fondo);
  font-size: 13px;
}
/* Punto 25 (23/09/2026): buscador + boton de reserva, un bloque centrado
   en la zona de contenido (la cabecera ya empieza a la derecha de la barra
   lateral). Tres columnas: marca, centro y acciones. Las de los lados
   miden lo mismo, asi que el centro queda centrado de verdad. El campo no
   se encoge para hacer sitio al boton. */
.cabecera {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}
.cabecera > .marca          { grid-column: 1; justify-self: start; }
.cabecera > .cabecera-centro { grid-column: 2; }
.cabecera > .acciones       { grid-column: 3; justify-self: end; }
.cabecera-centro { display: flex; align-items: center; gap: 12px; }
.cabecera-centro .buscador { flex: 0 0 420px; max-width: 420px; margin: 0; }
/* Misma altura que el campo (36 px) y centrados entre si. */
.cabecera-centro .buscador input { height: 36px; box-sizing: border-box; }
/* gap: en un inline-flex el espacio inicial de « Reserva» se perdia y salia
   «+Reserva». */
.boton-reserva { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px;
                 height: 36px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }
/* Pantalla estrecha: la cabecera enseña tambien las secciones y no cabe
   en tres columnas. El bloque pasa a su propia linea, centrado. */
@media (max-width: 899px) {
  .cabecera { display: flex; flex-wrap: wrap; }
  .cabecera > .cabecera-centro { order: 3; flex: 1 1 100%; justify-content: center; }
  .cabecera-centro .buscador { flex: 1 1 auto; max-width: 420px; }
}
/* Movil: el boton se queda con el «+»; su nombre lo da el aria-label. */
@media (max-width: 700px) {
  .boton-reserva-texto { display: none; }
  .cabecera-centro .buscador { flex-basis: auto; margin: 0; }
}
.buscador-grande { display: flex; gap: 10px; }
.buscador-grande input { flex: 1; font-size: 15px; padding: 11px 14px; }

.cabecera-ficha {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 16px;
}
.cabecera-ficha h1 { margin: 0 0 4px; font-size: 19px; }
.cabecera-ficha code { font-size: 19px; letter-spacing: .02em; }
@media (max-width: 700px) {
  .buscador { max-width: none; margin: 8px 0; flex-basis: 100%; }
  .cabecera { flex-wrap: wrap; }
}


/* ---------- El día ---------- */
.barra-dia { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.fecha-dia { margin-left: auto; font-size: 15px; }
.fecha-dia small { color: var(--aviso); font-weight: 400; }

.fila-dia {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--linea);
}
.fila-dia:last-child { border-bottom: 0; padding-bottom: 0; }
.fila-dia-cuerpo { flex: 1; min-width: 0; }
.fila-dia-accion { flex: 0 0 auto; }
.casa-chip {
  flex: 0 0 62px; text-align: center;
  background: var(--acento-claro); color: var(--acento);
  border-radius: 8px; padding: 8px 6px;
  font-weight: 600; font-size: 13px; letter-spacing: .02em;
}
.debe { color: var(--aviso); font-weight: 600; }
.aviso-limpieza {
  margin-top: 6px; font-size: 12px; font-weight: 600;
  color: var(--aviso);
}

.rejilla-casas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 10px;
}
.casa {
  border: 1px solid var(--linea); border-radius: 10px;
  padding: 12px; background: var(--papel);
}
.casa.ocupada { border-color: #c6d6cb; background: #fbfdfb; }
.casa.bloqueada { border-color: #f0c9c6; background: #fdf8f7; }
.casa-titulo { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.casa-categoria { font-size: 11px; margin: 2px 0 8px; }
.casa-estado { min-height: 24px; }
.casa-pie { font-size: 11px; margin-top: 6px; }
.casa-acciones { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }

.limpieza { font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
.l-limpia   { background: var(--acento-claro); color: var(--acento); }
.l-sucia    { background: #fdecea; color: var(--aviso); }
.l-en_curso { background: #fff4d6; color: #8a6d00; }
.l-revisar  { background: #eceeed; color: var(--tinta-suave); }

.boton.mini { padding: 4px 9px; font-size: 11px; }

/* ---------- Selector de extras ----------
   Tarjetas que se clican: nombre y precio a la vista, y al marcarlas se
   abren SUS opciones. Un componente para la ficha, la nueva reserva y
   manana la pantalla del huesped. 22/09/2026. */
.selector-extras { border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px; }

.selector-filtro {
  display: flex; gap: 10px; align-items: center;
  margin-bottom: 10px;
}
.selector-buscar { flex: 1; max-width: 320px; }
.selector-cuenta { color: var(--tinta-suave); font-size: 13px; margin-left: auto; }

.selector-categoria { border-top: 1px solid var(--linea); padding: 8px 0; }
.selector-categoria:first-of-type { border-top: 0; }
.selector-categoria > summary {
  cursor: pointer; font-weight: 600; font-size: 14px; padding: 4px 0;
}
.selector-categoria > summary small { color: var(--tinta-suave); font-weight: 400; }

.selector-rejilla {
  display: grid; gap: 8px; margin-top: 8px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.extra { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); }
.extra-cabecera {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  width: 100%; padding: 10px 12px; background: none; border: 0;
  font: inherit; text-align: left; cursor: pointer; border-radius: var(--radio);
}
.extra-cabecera:hover { background: var(--fondo); }
.extra-nombre { font-size: 13px; }
.extra-precio { color: var(--tinta-suave); font-size: 13px; white-space: nowrap; }

/* Marcada: se ve de un vistazo cual entra en la reserva. */
.extra.marcado { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
.extra.marcado .extra-cabecera { background: var(--acento-claro); }
.extra.marcado .extra-nombre { font-weight: 600; }

/* A medias: le faltan opciones y no se puede enviar asi. */
.extra.incompleto { border-color: var(--aviso); }

.extra-detalle { padding: 0 12px 12px; border-top: 1px solid var(--linea); }
.extra-campos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.extra-campos label { font-size: 12px; color: var(--tinta-suave); }
.extra-campos input { display: block; width: 100%; }
.extra-cantidad { max-width: 80px; }
.extra-nota { font-size: 12px; color: var(--tinta-suave); }

.extra-grupo { margin-top: 10px; }
.extra-grupo-titulo { font-size: 12px; font-weight: 600; }
.extra-grupo-titulo small { color: var(--tinta-suave); font-weight: 400; }
.extra-opciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.extra-opcion {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--linea); border-radius: 999px;
  padding: 4px 10px; font-size: 12px; cursor: pointer;
}
.extra-opcion:has(input:checked) { background: var(--acento-claro); border-color: var(--acento); }
.extra-aviso { display: block; margin-top: 6px; font-size: 12px; color: var(--aviso); }

/* Un articulo cancelado no desaparece: se queda apagado y tachado. */
tr.cancelado { opacity: .6; }
tr.cancelado td:first-child { text-decoration: line-through; }
tr.cancelado .etiqueta { text-decoration: none; }

/* ---------- Documento de detalle ----------
   Un resumen para el huesped, no una factura. Se imprime limpio: fuera la
   barra, los botones y todo lo que no sea el documento. 22/09/2026. */
.documento {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 28px 32px;
  margin-bottom: 16px;
}
.documento h1 { margin: 0; font-size: 22px; }
.documento h2 { margin: 22px 0 8px; font-size: 15px; }
.documento-sub { color: var(--tinta-suave); margin: 6px 0 18px; }
.documento table { width: 100%; }
.documento .totales { margin-top: 18px; max-width: 360px; margin-left: auto; }
.documento .totales .total td { font-weight: 600; border-top: 1px solid var(--linea); }
.documento-pie {
  margin-top: 24px; padding-top: 12px;
  border-top: 1px solid var(--linea);
  color: var(--tinta-suave); font-size: 12px;
}
.mensaje-previo {
  white-space: pre-wrap; background: var(--fondo);
  border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 12px; font-size: 13px; margin: 10px 0 0;
}
@media print {
  .cabecera, .no-imprimir, .barra-lateral { display: none !important; }
  body { margin-left: 0; }
  .contenedor { padding: 0; }
  .documento { border: 0; padding: 0; }
}

/* El catalogo: UNA fila por servicio, editable en el sitio.
   Las horas de Comida y Cena iban en una segunda fila con dos botones
   propios; desde el 22/09 van en la misma, y el boton de la fila guarda
   todo. Para que quepa se aprieta todo lo que no se lee: los
   desplegables se cortan, las horas van en 12 px y las celdas pierden
   aire. El nombre y el precio no se tocan: es lo unico que se lee de
   verdad aqui. Miguel, 22/09/2026. */
.catalogo select, .catalogo input[type=time] { font-size: 12px; padding: 3px 4px; }
.catalogo td { vertical-align: middle; padding-left: 6px; padding-right: 6px; }
.catalogo th { padding-left: 6px; padding-right: 6px; }
/* Lo que falta por clasificar se ve de lejos. */
.catalogo tr.sin-clasificar td:first-child { border-left: 3px solid var(--aviso); }

/* «El dia que elija el huesped» no hace falta verlo entero para saber
   cual esta elegido: se corta y el texto completo va en el title. */
.catalogo select {
  max-width: 132px;
  text-overflow: ellipsis;
}

/* Comida y Cena, uno al lado del otro y con la etiqueta delante, que es
   lo que menos ancho ocupa. */
.momentos-celda { white-space: nowrap; }
.momento-hora {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--tinta-suave);
}
.momento-hora + .momento-hora { margin-left: 8px; }
.momento-hora input[type=time] { width: 78px; }
.sin-momentos { color: var(--tinta-suave); }

/* Si aun asi no cabe, la tabla se desplaza y el nombre se queda fijo a
   la izquierda. Lo que NO puede pasar es que la fila se parta en dos. */
.catalogo-envoltorio { overflow-x: auto; }
.catalogo { min-width: 100%; }
.catalogo th:first-child, .catalogo td:first-child {
  position: sticky; left: 0; z-index: 1;
  background: var(--papel);
}

/* El check-in online, que hasta el 22/09 no se veia en el PMS. Ambar y no
   rojo: es algo que hay que atender, no un fallo. */
.tarjeta.checkin-bloque { border-left: 4px solid #48BEB3; }
.tarjeta.checkin-bloque h2 { color: #2c7a72; }
.tarjeta.sin-checkin {
  background: var(--hoy);
  border-color: #e0c56b;
  border-left: 4px solid #c9a227;
}
.tarjeta.sin-checkin h2 { color: #7a6212; }

/* «No he podido comprobarlo» no es lo mismo que «no hay»: ambar, no rojo,
   y sin bloquear nada. 22/09/2026. */
.desglose-aviso.no-comprobado {
  background: var(--hoy);
  border-left: 3px solid #c9a227;
  padding: 8px 10px;
  border-radius: 4px;
  color: #7a6212;
}

/* ---------- Los tres avisos de una reserva ----------
   Amarillo: tiene nota. Rojo: debe 100 € o mas. Naranja: debe menos.
   Son independientes: una reserva puede llevar dos.

   Rojo y naranja son los que peor se separan, y en el planning miden seis
   pixeles: por eso no se distinguen solo por el color. El de deuda alta va
   relleno y el de deuda baja es un anillo hueco, ademas del importe en el
   title. 22/09/2026. */
/* Cuatro veces mas grandes que al principio, por decision de Miguel del
   22/09: a 8 px no se veian. Los puntos NO se encogen nunca (flex-shrink
   en 0): si no caben, lo que cede es el texto. */
.puntos {
  display: inline-flex;
  align-items: center;
  gap: 3px;            /* poca separacion entre ellos */
  flex: 0 0 auto;      /* nunca se encogen */
  margin-left: auto;   /* pegados al extremo derecho */
}
.punto {
  display: block;
  /* Otro 30 % menos: 22 -> 15. Miguel, 22/09/2026. */
  width: 15px; height: 15px;
  border-radius: 50%;
  flex: 0 0 auto;
}
/* Circulos RELLENOS, sin borde: con borde se leen como circunferencias.
   Miguel, 22/09/2026. Lo que separa el rojo del naranja sin depender del
   color es el importe del title y del aria-label, no la forma.

   Los tres tonos estan medidos, no elegidos a ojo. Amarillo y naranja
   se confundian (17 grados de tono): ahora hay 24 entre el amarillo y
   el naranja y otros 24 entre el naranja y el rojo, repartidos a
   partes iguales. El amarillo se queda en #EAD016 y no en un limon mas
   claro porque tiene que verse sobre fondo blanco. 22/09/2026. */
/* 23/09/2026 (punto 18, segunda correccion): amarillo y naranja seguian
   pareciendo el mismo a tamano pequeno. Ahora ademas del tono cambia la
   CLARIDAD, de claro a oscuro, que es lo que se distingue a 10 px, en una
   pantalla mala o sin distinguir bien rojo y verde. Lo que significa cada
   color no cambia; solo el tono. En todas las pantallas a la vez. */
.punto-nota       { background: #FFD21E; }   /* amarillo, el mas claro */
.punto-deuda-baja { background: #F07B00; }   /* naranja, intermedio */
.punto-deuda-alta { background: #C1121F; }   /* rojo, el mas oscuro */

/* En el planning tambien van grandes: 24 px, cuatro veces los 6 de antes.
   Una reserva de una noche es un recuadro estrecho y tres puntos de ese
   tamano se comen el nombre: por eso el nombre se recorta con puntos
   suspensivos y los puntos se quedan enteros. El nombre completo sigue
   estando en el title de la barra. 22/09/2026. */
/* 24 -> 17 px (22/09) -> 13 px (23/09) -> 10 px (23/09, segunda
   correccion del punto 18: medido 13 x 0,75 = 9,75). Separacion y alto de
   pista, igual. El borde blanco va SOLO aqui, sobre la barra verde oscura:
   sin el, el rojo se funde con ella. Rompe a proposito lo del 22/09 («sin
   borde») porque ahora el punto es mucho mas pequeno. border-box: el
   borde cuenta dentro de los 10 px. */
.barra .punto  { width: 10px; height: 10px; box-sizing: border-box;
                 border: 1px solid #fff; }

/* Punto 18 revisado (23/09/2026): los puntos, en la esquina SUPERIOR
   DERECHA y fuera de la linea del texto, sobresaliendo la mitad (5 px) SOLO
   hacia arriba. Por la derecha NO salen (segunda correccion): la barra
   acaba donde acaba el dia, y lo que saliera caeria sobre la reserva que
   entra al dia siguiente, como si el aviso fuera suyo. El nombre ocupa todo el ancho: el punto
   no le reserva sitio. Con varios, se alinean desde la esquina hacia la
   izquierda con la misma separacion.
   CAPAS: el punto va POR ENCIMA de la barra vecina y de la fila de
   arriba (va en una tira posterior), por DEBAJO de la cabecera fija (10)
   y del cuadro del hover (60). Sigue dentro del enlace de la barra, asi
   que pulsarlo abre la reserva. */
.barra { position: relative; }
/* Sube 4 px y no 5 (la mitad): arriba de la barra hay 4 px de aire, y un
   pixel mas pisaria la fila de encima, que es la casa equivocada. */
.barra .puntos {
  position: absolute;
  top: -4px;
  right: 0;
  margin: 0;
}
.barra .puntos { gap: 2px; margin-left: 4px; }

/* En una reserva de una noche la barra mide entre 32 y 49 px segun la
   pantalla, y dos puntos de 17 px necesitan unos 42: caben en pantalla
   grande y asoman unos pixeles en las estrechas. Como los puntos son el aviso
   y no pueden encogerse ni desaparecer, se les deja asomar por el borde
   en vez de cortarlos. El recorte del texto lo hace .barra-nombre, que
   tiene el suyo propio. Medido el 22/09/2026. */
.barra { overflow: visible; }
/* Quien asoma va por encima de la barra vecina, no por debajo. */
.barra .puntos { position: absolute; z-index: 2; }   /* absoluto desde el punto 18 revisado: ver arriba */
/* Sin hueco a la derecha cuando hay puntos: cada pixel cuenta. */
.barra:has(.puntos) { padding-right: 2px; }

/* Lo unico que cede. min-width:0 es lo que permite que un hijo flex se
   encoja por debajo de su contenido.
   Se llama .barra-nombre y no .barra-texto porque esa ya es del menu
   lateral, y alli se OCULTA entre 900 y 1299 px: reutilizarla habria
   hecho desaparecer el nombre del huesped del planning en los portatiles.
   22/09/2026. */
.barra-nombre {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Con puntos de 24 px la barra necesita algo mas de aire: 34 px de pista
   dejaban 26 de barra y quedaban pegados al borde. */
.pista { min-height: 38px; }

/* Punto 22 (23/09/2026): la fila, al alto de la reserva, recortando SOLO
   POR ABAJO (Miguel). La fila medía 53 px con una barra de 30: sobraban
   los 14 px de margen inferior que le pone a `.pista` la regla generica de
   los textos de ayuda (misma clase, otra cosa) y parte del de la barra.
   Arriba se queda como estaba, 4 px; abajo, 3. 4 + 30 + 3 = 37 px de pista
   + 1 de linea = 38 px de fila. El punto de limpieza (18 px + 12 de
   relleno = 30) cabe de sobra: no manda sobre el alto. */
.planning .pista { margin: 0; min-height: 37px; }
.planning .pista .barra { margin: 4px 2px 3px; }
/* Con el dedo no: 30 px de barra no se aciertan. Raton, fila compacta;
   dedo, la barra crece hasta los 44 px pulsables (4 + 44 + 3 = 51).
   Cowork, 24/09/2026. */
@media (pointer: coarse) {
  .planning .pista { min-height: 51px; }
}

/* ---------- El pendiente, en la cabecera de la reserva ----------
   Mismo codigo de color que los puntos de las listas: 100 o mas rojo,
   menos naranja, cero verde. Un pendiente NEGATIVO no es deuda —es
   dinero de mas—, asi que va en neutro y dice «A devolver». 22/09/2026. */
.pendiente-caja {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 6px 12px;
  border-radius: var(--radio);
  border: 1px solid var(--linea);
  text-decoration: none;
  line-height: 1.15;
  margin-left: auto;
}
.pendiente-caja:hover { filter: brightness(0.97); }
.pendiente-etiqueta {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  opacity: .8;
}
.pendiente-importe { font-size: 19px; font-weight: 600; }

/* Rojo intenso: el apagado no se leia como aviso. Miguel, 22/09/2026. */
.pendiente-caja.deuda-alta  { background: #fdeceb; border-color: #e8a8a3; color: #D0021B; }
.pendiente-caja.deuda-baja  { background: #fdf7ef; border-color: #f0dcc0; color: #b06a20; }
.pendiente-caja.al-dia      { background: var(--acento-claro); border-color: #bcd7c4; color: var(--acento); }
/* Neutro a proposito: que se deba dinero al huesped no es una alarma. */
.pendiente-caja.a-devolver  { background: var(--fondo); color: var(--tinta); }

/* En las tablas y listas los puntos van al final de la linea, alineados
   al centro y sin empujar nada. */
td .puntos, .par .puntos { vertical-align: middle; margin-left: 8px; }


/* =====================================================================
   El cuadro que sale al pasar por encima de una reserva del planning
   =====================================================================
   Sustituye al `title` del enlace. Miguel lo pidio EXPRESAMENTE mas
   grande que un tooltip normal: 320 px de ancho minimo, texto de 15 px
   y aire entre los cuatro bloques, para que se distingan sin leerlos.
   22/09/2026.

   Va colgado del <body> y en position:fixed, no dentro de la barra: la
   rejilla del planning lo recortaria y tendria que pelearse con el
   z-index de los puntos. */

/* La copia que viaja dentro de la barra no se pinta nunca. */
.cuadro-datos { display: none; }

.cuadro-reserva {
  position: fixed;
  z-index: 60;                /* por encima de los puntos (2) y la barra lateral */
  min-width: 320px;
  max-width: 380px;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
  pointer-events: none;       /* no se puede tapar a si mismo ni robar el raton */
}
.cuadro-reserva[hidden] { display: none; }

/* Aire entre bloques: es lo que deja distinguirlos de un vistazo. */
.cuadro-reserva .cuadro-bloque {
  display: block;
  padding: 9px 0;
  border-top: 1px solid var(--linea);
}
.cuadro-reserva .cuadro-bloque:first-child { padding-top: 0; border-top: 0; }

.cuadro-titular { display: block; font-weight: 600; font-size: 16px; }
.cuadro-acompanante { display: block; opacity: .75; }

/* Mismo codigo de color que los puntos y que la cabecera de la ficha. */
.cuadro-pendiente { display: flex; align-items: baseline; gap: 8px; }
.cuadro-clave { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; opacity: .75; }
.cuadro-valor { font-size: 19px; font-weight: 600; margin-left: auto; }
.cuadro-pendiente.deuda-alta .cuadro-valor { color: #D0021B; }
.cuadro-pendiente.deuda-baja .cuadro-valor { color: #E06A00; }
.cuadro-pendiente.al-dia     .cuadro-valor { color: var(--acento); }
/* Neutro a proposito: deberle dinero al huesped no es una alarma. */
.cuadro-pendiente.a-devolver .cuadro-valor { color: var(--tinta); }

/* Un punto delante del check-in, con los mismos colores del resto. */
.cuadro-marca {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: 8px; vertical-align: baseline;
}
/* Verde hecho, rojo pendiente, ambar caducado. Pedido por Miguel el
   23/09/2026. Los colores van escritos y NO salen de --acento a
   proposito: --acento cambia con la piel, y aqui el color significa algo
   —hecho o no hecho— asi que no puede depender del tema. Son los mismos
   verde, rojo y naranja que ya usan los puntos del planning. */
.cuadro-marca.hecho       { background: #2F8F4E; }
.cuadro-marca.pendiente   { background: #D0021B; }
.cuadro-marca.sin-empezar { background: #D0021B; }
/* El ambar: un enlace caducado no es lo mismo que uno sin abrir. */
.cuadro-marca.caducado    { background: #E06A00; }
.cuadro-hora { opacity: .75; }

/* Early y late: solo aparecen si los tiene. */
.cuadro-horarios { display: flex; flex-wrap: wrap; gap: 6px; }
.cuadro-horario {
  display: inline-block; padding: 3px 9px; font-size: 13px;
  border-radius: 999px; background: var(--acento-claro); color: var(--acento);
}

.cuadro-pie {
  display: block; margin-top: 10px; padding-top: 8px;
  border-top: 1px solid var(--linea);
  font-size: 12px; opacity: .6;
}


/* =====================================================================
   La lista de limpieza de /equipo
   =====================================================================
   Se mira desde el movil y con prisa: una fila por casa, el codigo
   grande a la izquierda y el estado al lado. Lo limpio va apagado
   porque es lo unico que NO hay que hacer. 22/09/2026. */
.lista-limpieza { list-style: none; margin: 0; padding: 0; }
.fila-limpieza {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--linea);
}
.fila-limpieza:first-child { border-top: 0; }

.lim-casa {
  flex: 0 0 auto; min-width: 64px;
  font-weight: 600; font-size: 16px;
  padding: 4px 10px; border-radius: var(--radio);
  background: var(--fondo); text-align: center;
}
.lim-cuerpo { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap;
              align-items: baseline; gap: 4px 10px; }
.lim-estado { font-weight: 600; }
.lim-quien  { }
.lim-desde, .lim-nota { color: var(--tinta-suave); font-size: 13px; }
.lim-cola { flex: 0 0 auto; display: flex; gap: 4px; }

/* El color del borde izquierdo dice el estado sin tener que leerlo. */
.fila-limpieza { border-left: 4px solid transparent; padding-left: 8px; }
.estado-en_curso { border-left-color: #4C9AD6; }
.estado-en_curso .lim-estado { color: #2f6fa3; }
.estado-sucia    { border-left-color: #E06A00; }
.estado-sucia .lim-estado { color: #b05400; }
.estado-revisar  { border-left-color: #EAD016; }
.estado-revisar .lim-estado { color: #8a7a00; }
/* Lo limpio es lo unico que no hay que hacer: apagado y al final. */
.estado-limpia { opacity: .55; }
.estado-limpia .lim-estado { font-weight: 400; color: var(--tinta-suave); }

@media (max-width: 560px) {
  .lim-casa { min-width: 54px; font-size: 15px; }
  .fila-limpieza { gap: 8px; }
}


/* El buscador del catalogo. 22/09/2026. */
.buscador-catalogo {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 12px;
}
.caja-buscador {
  position: relative; display: inline-flex; align-items: center;
  flex: 0 1 340px;
}
.caja-buscador input[type=search] {
  width: 100%; padding: 8px 30px 8px 10px;
  font-size: 14px;
  border: 1px solid var(--linea); border-radius: var(--radio);
  background: var(--papel); color: var(--tinta);
}
.caja-buscador input[type=search]:focus {
  outline: 2px solid var(--acento); outline-offset: 1px;
}
/* La «x» va dentro del campo, pegada a la derecha. */
#vaciar-busqueda {
  position: absolute; right: 4px;
  border: 0; background: none; cursor: pointer;
  font-size: 18px; line-height: 1; padding: 2px 6px;
  color: var(--tinta-suave);
}
#vaciar-busqueda:hover { color: var(--tinta); }
.cuenta-busqueda { color: var(--tinta-suave); font-size: 13px; }
.sin-resultados { padding: 14px 6px; color: var(--tinta-suave); }


/* =====================================================================
   Astro: el panel de WhatsApp
   =====================================================================
   Se abre por la derecha con la mitad del ancho y el contenido de debajo
   SE ENCOGE, no se tapa: el panel es para mirar una reserva mientras
   hablas con el huesped. Miguel, 22/09/2026. */
:root {
  --astro-ancho: 50vw;
  --astro-alto: 70vh;
  --astro-x: 0px;
  --astro-y: 72px;
}

/* Una VENTANA flotante, no un panel acoplado: se mueve donde se quiera y
   se redimensiona. Miguel, 22/09/2026. Eso significa que TAPA lo que hay
   debajo; antes era un panel pegado a la derecha que encogia el
   contenido, y se cambio a peticion suya. */
.astro-panel {
  position: fixed;
  left: var(--astro-x); top: var(--astro-y);
  width: var(--astro-ancho); height: var(--astro-alto);
  display: flex; flex-direction: column;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
  z-index: 50;
  overflow: hidden;      /* que nada se salga de las esquinas redondas */
}
.astro-panel[hidden] { display: none; }

/* TRES agarres para el tamano: el borde derecho, el de abajo y la
   esquina. Antes solo estaba la esquina, de 18 px y encima recortada por
   el borde redondeado: no habia forma de agarrarla. Miguel, 22/09/2026.

   `touch-action: none` es imprescindible: sin eso, en un portatil tactil
   o en una tableta el arrastre lo interpreta el navegador como un
   desplazamiento de la pagina y la ventana no se mueve. */
.astro-borde, .astro-tirador {
  position: absolute;
  touch-action: none;
  z-index: 3;              /* por encima del contenido de la ventana */
}
.astro-borde-x {
  right: -2px; top: 0; bottom: 14px; width: 10px;
  cursor: ew-resize;
}
.astro-borde-y {
  left: 0; right: 14px; bottom: -2px; height: 10px;
  cursor: ns-resize;
}
.astro-borde:hover { background: var(--acento); opacity: .25; }

.astro-tirador {
  right: 0; bottom: 0; width: 22px; height: 22px;
  cursor: nwse-resize;
  /* Dos rayas diagonales, como cualquier ventana. */
  background:
    linear-gradient(135deg, transparent 0 45%, var(--tinta-suave) 45% 58%, transparent 58%),
    linear-gradient(135deg, transparent 0 70%, var(--tinta-suave) 70% 83%, transparent 83%);
}
.astro-tirador:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }

/* Maximizada: sin esquinas redondeadas y sin agarres, que no hay nada
   que estirar. */
.astro-max .astro-panel { border-radius: 0; }
.astro-max .astro-borde, .astro-max .astro-tirador { display: none; }
.astro-max .astro-cabecera { cursor: default; }

/* Mientras se mueve o se redimensiona, que no se seleccione medio PMS. */
body.astro-gesto { user-select: none; }

/* La cabecera es el asa. */
.astro-cabecera {
  display: flex; align-items: baseline; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid var(--linea);
  background: var(--fondo);
  cursor: move;
  touch-action: none;    /* sin esto, arrastrar en tactil desplaza la pagina */
}
.astro-cabecera:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
.astro-sub { color: var(--tinta-suave); font-size: 12px; }
.astro-boton-titulo {
  border: 0; background: none; cursor: pointer;
  font-size: 16px; line-height: 1; padding: 2px 6px;
  color: var(--tinta-suave); border-radius: 4px;
}
.astro-boton-titulo:hover { color: var(--tinta); background: var(--linea); }
#astro-max { margin-left: auto; }
.astro-cerrar { font-size: 20px; }

.astro-cuerpo { flex: 1 1 auto; display: flex; min-height: 0; }
.astro-lista {
  flex: 0 0 240px; overflow-y: auto;
  border-right: 1px solid var(--linea);
}
.astro-conv {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 0; border-bottom: 1px solid var(--linea); background: none;
  padding: 10px 12px; color: inherit; font: inherit;
}
.astro-conv:hover { background: var(--fondo); }
.astro-conv.elegida { background: var(--acento-claro); }
.astro-conv strong { display: block; font-size: 14px; }
.astro-conv span { color: var(--tinta-suave); font-size: 12px; }
.astro-avance {
  display: block; margin-top: 2px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
/* Una nota interna se ve distinta de un mensaje: no se mando a nadie. */
.astro-mensaje.privado p {
  background: var(--hoy); border: 1px dashed #c9a227;
}

.astro-charla { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.astro-mensajes { flex: 1 1 auto; overflow-y: auto; padding: 12px 14px; }
.astro-mensaje { margin-bottom: 12px; max-width: 80%; }
.astro-mensaje.nuestro { margin-left: auto; text-align: right; }
.astro-quien { display: block; font-size: 11px; color: var(--tinta-suave); }
.astro-mensaje p {
  margin: 2px 0 0; padding: 8px 10px; border-radius: var(--radio);
  background: var(--fondo); display: inline-block; text-align: left;
}
.astro-mensaje.nuestro p { background: var(--acento-claro); }

.astro-escribir {
  display: flex; gap: 8px; padding: 10px 12px;
  border-top: 1px solid var(--linea);
}
.astro-escribir input {
  flex: 1 1 auto; min-width: 0; padding: 8px 10px;
  border: 1px solid var(--linea); border-radius: var(--radio);
  background: var(--papel); color: var(--tinta);
}
.astro-nota, .astro-aviso {
  margin: 0; padding: 14px; color: var(--tinta-suave); font-size: 13px;
}
.astro-aviso { padding-top: 0; }

/* El boton, igual que los de seccion pero sin ser un enlace. */
.astro-boton { cursor: pointer; border: 0; background: none; font: inherit;
               width: 100%; text-align: left; }

/* En movil la ventana se lleva la pantalla entera y deja de moverse:
   colocar una ventana a mano en 360 px no sirve para nada. */
@media (max-width: 899px) {
  .astro-panel {
    left: 0 !important; top: 0 !important;
    width: 100% !important; height: 100% !important;
    border-radius: 0; border: 0;
  }
  .astro-tirador, .astro-borde, #astro-max { display: none; }
  .astro-cabecera { cursor: default; }
  .astro-cuerpo { flex-direction: column; }
  .astro-lista { flex: 0 0 auto; max-height: 38%; border-right: 0;
                 border-bottom: 1px solid var(--linea); }
}


/* =====================================================================
   Los avisos que manda la app del equipo
   =====================================================================
   Pila de rectangulos en la esquina superior derecha, el mas nuevo
   arriba. Cada uno ES un boton. No se van solos: se quedan hasta que
   alguien los resuelve. Miguel, 22/09/2026.

   Van por debajo de la cabecera a proposito (top: 64px): taparla seria
   cambiar un problema por otro. */
.avisos-pila {
  position: fixed; top: 64px; right: 16px;
  z-index: 70;                /* por encima de Astro (50) */
  display: flex; flex-direction: column; gap: 8px;
  width: 320px; max-width: calc(100vw - 32px);
}

.aviso {
  position: relative;
  display: flex; align-items: stretch;
  border-radius: var(--radio);
  border: 1px solid rgba(0, 0, 0, .10);
  border-left: 6px solid var(--color-aviso, #888);
  background: var(--papel);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  overflow: hidden;
}
.aviso-cuerpo {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  text-align: left; cursor: pointer;
  border: 0; background: none; font: inherit; color: inherit;
  padding: 10px 12px;
}
.aviso-cuerpo:hover { background: var(--fondo); }
.aviso-casa  { font-size: 15px; }
.aviso-texto { font-size: 13px; }
.aviso-pie   { font-size: 11px; color: var(--tinta-suave); }
.aviso-sin   { font-size: 11px; color: #b05400; font-weight: 600; }
.aviso-x {
  flex: 0 0 auto; border: 0; border-left: 1px solid var(--linea);
  background: none; cursor: pointer; font-size: 18px; line-height: 1;
  padding: 0 10px; color: var(--tinta-suave);
}
.aviso-x:hover { background: var(--fondo); color: var(--tinta); }
.aviso-respuesta {
  margin: 0; padding: 6px 12px; font-size: 12px;
  background: var(--acento-claro); color: var(--acento);
}
.aviso-respuesta.mal { background: #fdeceb; color: #D0021B; }

/* Un color por tipo. Se han elegido para que NO se parezcan entre ellos
   ni a los de las secciones del menu: el azul de entrada es mas oscuro
   que el de Planning (#4C9AD6) y el morado de salida mas oscuro que el
   de Equipo (#C77DD6), porque si no se confundirian de un vistazo, que
   es justo lo que hay que evitar. 22/09/2026. */
.aviso-cobro   { --color-aviso: #2F8F4E; }   /* verde */
.aviso-perros  { --color-aviso: #8A5A2B; }   /* marron */
.aviso-entrada { --color-aviso: #1F5FA9; }   /* azul */
.aviso-salida  { --color-aviso: #6B3FA0; }   /* morado */
/* La cabecera de cada aviso se tine del mismo color, para no depender
   solo de la franja de la izquierda. */
.aviso-casa { color: var(--color-aviso); }

.aviso-mas {
  border: 1px dashed var(--linea); border-radius: var(--radio);
  background: var(--papel); cursor: pointer;
  padding: 6px; font: inherit; font-size: 12px; color: var(--tinta-suave);
}
.aviso-mas:hover { color: var(--tinta); }

/* La pregunta de confirmacion. */
.dialogo {
  border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 20px 22px; max-width: 460px;
  background: var(--papel); color: var(--tinta);
}
.dialogo::backdrop { background: rgba(0, 0, 0, .35); }
.dialogo h2 { margin: 0 0 8px; font-size: 18px; }
.dialogo p  { margin: 0 0 16px; }
.dialogo-botones { display: flex; gap: 8px; justify-content: flex-end; }

@media (max-width: 899px) {
  .avisos-pila { top: 8px; right: 8px; left: 8px; width: auto; }
}


/* =====================================================================
   /equipo: navegacion por dias y modo semana
   ===================================================================== */
.barra-dias {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px; justify-content: space-between;
}
.dias-flechas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dias-fecha { font-size: 17px; min-width: 104px; text-align: center; }
.dias-ir { display: flex; align-items: center; gap: 6px; }
.dias-ir label { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.dias-modo { display: flex; gap: 4px; }

/* La tira de once dias. En pantalla ancha, once columnas. */
.tira-dias {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 6px;
}
.tira-dia {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 6px; min-width: 0;
  border: 1px solid var(--linea); border-radius: var(--radio);
  background: var(--papel); color: inherit; text-decoration: none;
}
.tira-dia:hover { border-color: var(--acento); }
/* Los dos de cada punta son contexto: apagados a proposito. */
.tira-dia.borde { opacity: .45; background: var(--fondo); }
.tira-dia.elegido {
  border-color: var(--acento); border-width: 2px;
  box-shadow: 0 0 0 2px var(--acento-claro);
}
.tira-dia.es-hoy .tira-num { color: var(--acento); }

.tira-cabeza { display: flex; align-items: baseline; gap: 4px; }
.tira-sem { font-size: 11px; color: var(--tinta-suave); text-transform: uppercase; }
.tira-num { font-size: 19px; font-weight: 600; }
.tira-mes { font-size: 11px; color: var(--tinta-suave); }
.tira-dato { font-size: 12px; color: var(--tinta-suave); }
.tira-dato b { font-size: 14px; color: var(--tinta); }
.tira-dato.entran b { color: #2F8F4E; }
.tira-dato.salen  b { color: #6B3FA0; }
/* Un dia sin movimiento se ensena vacio, no se esconde: el hueco es
   informacion y esconderlo descolocaria las columnas. */
.tira-nada { font-size: 18px; color: var(--tinta-suave); }

/* En movil once columnas no caben, y NO se pone desplazamiento
   horizontal: el equipo lo mira con una mano y se pierde. Se convierte
   en una lista vertical, con el dia elegido arriba del todo visible.
   Miguel, 22/09/2026. */
@media (max-width: 899px) {
  .tira-dias { grid-template-columns: 1fr; gap: 4px; }
  .tira-dia { flex-direction: row; align-items: baseline; gap: 10px; }
  .tira-cabeza { flex: 0 0 76px; }
  .barra-dias { gap: 8px; }
  .dias-fecha { min-width: 0; }
}


/* =====================================================================
   Objetivos de caja
   =====================================================================
   Tres bloques, uno al lado de otro. El color va por el cumplimiento:
   verde desde el 100 %, ambar entre 80 y 99, rojo por debajo de 80. En
   el mes el color lo manda el porcentaje SOBRE EL RITMO, no el del
   total: es lo que dice si vamos bien para el dia que es.
   Miguel, 22/09/2026. */
/* Cinco tarjetas y HOY LA PRIMERA. Es la mas ancha; ayer y anteayer, las
   mas estrechas, que ya pasaron y son referencia. Miguel, 22/09/2026:
   «de un vistazo y sin leer, tu ojo tiene que ir a HOY». */
.objetivos {
  display: grid;
  grid-template-columns: 1.35fr 0.7fr 0.7fr 1fr 1.25fr;
  gap: 12px; margin-bottom: 16px;
}

/* Los dias ya cerrados: mas apagados y con la cifra un escalon por
   debajo. Son resultado, no lo que hay que mover hoy. */
.objetivo-cerrado { opacity: .62; }
.objetivo-cerrado .objetivo-cobrado { font-size: 19px; }
.objetivo-cerrado .objetivo-titulo  { font-size: 11px; }

/* HOY manda. Mismos colores de siempre: solo cambia el peso —marco mas
   grueso, fondo propio y la cifra un escalon mayor—, ningun color
   nuevo. */
.objetivo-hoy {
  border-width: 2px;
  border-left-width: 8px;
  background: var(--fondo);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
  padding: 16px 18px;
}
.objetivo-hoy .objetivo-cobrado { font-size: 32px; }
.objetivo-hoy .objetivo-pct     { font-size: 19px; }
.objetivo-hoy .objetivo-titulo  { color: var(--tinta); font-weight: 600; }
.objetivo {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--linea);
  border-left: 6px solid var(--color-objetivo, var(--linea));
  border-radius: var(--radio);
  background: var(--papel);
}
.objetivo-titulo {
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--tinta-suave);
}
.objetivo-cobrado { font-size: 24px; font-weight: 600; line-height: 1.1; }
.objetivo-de      { font-size: 12px; color: var(--tinta-suave); }
.objetivo-linea   { font-size: 13px; margin-top: 6px; }
.objetivo-pct     { font-size: 16px; color: var(--color-objetivo); }
.objetivo-dif     { font-size: 12px; color: var(--tinta-suave); }
/* El porcentaje del mes entero va apagado: es el contexto, no la
   pregunta del dia. */
.objetivo-linea.apagado { margin-top: 2px; font-size: 12px; opacity: .65; }

.objetivo-verde { --color-objetivo: #2F8F4E; }
.objetivo-ambar { --color-objetivo: #C77A00; }
.objetivo-rojo  { --color-objetivo: #D0021B; }
.objetivo-sin-objetivo { --color-objetivo: var(--linea); }

/* Antes de encoger la letra, que bajen a dos filas. HOY se queda
   ENTERA y arriba: es la que hay que poder leer de pie en una casa. */
@media (max-width: 1279px) {
  .objetivos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .objetivo-hoy { grid-column: 1 / -1; }
}
@media (max-width: 899px) {
  .objetivos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .objetivo-hoy { grid-column: 1 / -1; }
  .objetivo { flex-direction: row; flex-wrap: wrap; align-items: baseline;
              gap: 4px 10px; }
  .objetivo-titulo { flex: 0 0 100%; }
}


/* La pantalla de confirmacion (y el dialogo que la evita). 22/09/2026. */
.tarjeta.confirmar { max-width: 620px; border-left: 4px solid var(--acento); }
.tarjeta.confirmar.peligro { border-left-color: var(--aviso); }
.confirmar-que { font-size: 17px; margin: 0 0 10px; }
.confirmar-consecuencia { color: var(--tinta-suave); margin: 0 0 18px; }
.confirmar-botones { display: flex; gap: 10px; align-items: center; }
.boton.peligro { background: var(--aviso); border-color: var(--aviso); color: #fff; }
.boton.peligro:hover { filter: brightness(0.92); }


/* =====================================================================
   Caja: la franja del ano
   =====================================================================
   Tres piezas en una fila: el mes en curso, los meses del ano y el
   acumulado. Usa los mismos colores que las tarjetas de objetivos —
   rojo por debajo, ambar cerca, verde al llegar— y NO una escala nueva.
   Miguel, 22/09/2026. */
.franja-fila {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(320px, 2fr) minmax(200px, 1fr);
  gap: 18px; align-items: start;
}
.franja-mes, .franja-anual, .franja-meses {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.franja-mes, .franja-anual {
  padding-left: 12px;
  border-left: 5px solid var(--color-objetivo, var(--linea));
}
.franja-titulo {
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--tinta-suave);
}
.franja-cifra { font-size: 26px; font-weight: 600; line-height: 1.1; }
.franja-de    { font-size: 12px; color: var(--tinta-suave); }
.franja-pct   { font-size: 17px; font-weight: 600; color: var(--color-objetivo);
                margin-top: 4px; }
.franja-falta { font-size: 12px; color: var(--tinta-suave); }

/* Los meses. Se anaden solos: la lista sale de los datos, no del
   codigo, asi que en octubre aparece octubre sin tocar nada. */
.franja-tira {
  display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap;
}
.franja-celda {
  flex: 1 1 52px; min-width: 52px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 4px;
  border-radius: var(--radio);
  border: 1px solid var(--linea);
  border-bottom: 4px solid var(--color-objetivo, var(--linea));
  background: var(--papel);
}
.franja-corto { font-size: 11px; text-transform: uppercase;
                color: var(--tinta-suave); }
.franja-celda-pct { font-size: 15px; font-weight: 600; color: var(--color-objetivo); }
.franja-celda-eur { font-size: 11px; color: var(--tinta-suave); }
.franja-celda.en-curso {
  border-color: var(--acento); border-width: 2px;
  border-bottom-width: 4px; border-bottom-color: var(--color-objetivo);
}
/* Sin datos: gris y una raya. Enero de 2026 no es un fracaso comercial,
   es que el PMS no existia. */
.franja-nada { font-size: 15px; color: var(--tinta-suave); }
.franja-sin-datos { --color-objetivo: var(--linea); background: var(--fondo); }
.franja-sin-datos .franja-corto { opacity: .6; }

.franja-verde { --color-objetivo: #2F8F4E; }
.franja-ambar { --color-objetivo: #C77A00; }
.franja-rojo  { --color-objetivo: #D0021B; }

/* En movil baja a dos lineas antes que encoger la letra. */
@media (max-width: 1099px) {
  .franja-fila { grid-template-columns: 1fr 1fr; }
  .franja-meses { grid-column: 1 / -1; order: 3; }
}
@media (max-width: 640px) {
  .franja-fila { grid-template-columns: 1fr; }
  .franja-celda { flex: 1 1 44px; min-width: 44px; }
}


/* La casilla de avisar al huesped al dar de alta a mano. Nace
   desmarcada: que el correo no salga se arregla; que salga, no.
   22/09/2026. */
.tarjeta.avisar-huesped { border-left: 4px solid var(--acento); }
.tarjeta.avisar-huesped label { display: flex; align-items: center; gap: 8px; }


/* El chat con el huesped, en la ficha de la reserva. 22/09/2026. */
.tarjeta.chat-huesped { border-left: 4px solid #25D366; }
#chat-cuerpo { max-height: 340px; overflow-y: auto; margin-bottom: 10px; }
.chat-mensaje { margin-bottom: 10px; max-width: 85%; }
.chat-mensaje.nuestro { margin-left: auto; text-align: right; }
.chat-quien { display: block; font-size: 11px; color: var(--tinta-suave); }
.chat-mensaje p {
  margin: 2px 0 0; padding: 8px 10px; border-radius: var(--radio);
  background: var(--fondo); display: inline-block; text-align: left;
}
.chat-mensaje.nuestro p { background: var(--acento-claro); }
/* Una nota interna no se le mando a nadie. */
.chat-mensaje.privado p { background: var(--hoy); border: 1px dashed #c9a227; }
#chat-escribir { display: flex; gap: 8px; }
/* Sin esto el `display: flex` de arriba ganaba al atributo `hidden`: el
   campo de escribir salia aunque no hubiera conversacion, y al enviar el
   mismo error se pintaba otra vez debajo. Por eso se veia DOS VECES.
   Brief del 23/09/2026, extra. */
#chat-escribir[hidden], #chat-aviso[hidden] { display: none; }
#chat-escribir input {
  flex: 1 1 auto; min-width: 0; padding: 8px 10px;
  border: 1px solid var(--linea); border-radius: var(--radio);
  background: var(--papel); color: var(--tinta);
}


/* Los avisos que llevan tiempo NO se esconden: se destacan MAS. Un cobro
   sin confirmar de ayer tiene que cantar mas que uno de hace diez
   minutos; si los viejos se apagaran, se quedarian ahi para siempre.
   Miguel, 22/09/2026. */
.aviso.espera-espera  { box-shadow: 0 6px 20px rgba(0,0,0,.22); }
.aviso.espera-espera .aviso-pie { color: #b05400; font-weight: 600; }

.aviso.espera-urgente {
  border-width: 2px;
  border-left-width: 8px;
  box-shadow: 0 8px 26px rgba(0,0,0,.30);
}
.aviso.espera-urgente .aviso-pie { color: #D0021B; font-weight: 600; }

/* De otro dia: lo que mas canta. Latido lento, no parpadeo: tiene que
   llamar la atencion sin marear a quien pasa el dia con la pantalla
   abierta. */
.aviso.espera-viejo {
  border-width: 2px;
  border-left-width: 10px;
  box-shadow: 0 8px 26px rgba(0,0,0,.34);
  animation: aviso-late 3s ease-in-out infinite;
}
.aviso.espera-viejo .aviso-pie {
  color: #D0021B; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em;
}
@keyframes aviso-late {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-3px); }
}
/* Quien tenga puesto «menos movimiento» no ve el latido, pero sigue
   viendo el borde y el color. */
@media (prefers-reduced-motion: reduce) {
  .aviso.espera-viejo { animation: none; }
}


/* Las horas de entrada y salida del cuadro del planning: en pequeno, en
   una linea y sin romper el ancho. Lo que va «(early)» o «(late)» esta
   pagado. 22/09/2026. */
.cuadro-horas {
  display: block; margin-top: 4px;
  font-size: 12px; color: var(--tinta-suave);
}
.cuadro-horas i {
  font-style: normal; font-size: 11px;
  color: var(--acento); font-weight: 600;
}


/* El aviso de importacion vieja, en «El dia». Ambar cuando lleva medio
   dia; rojo cuando lleva mas de uno y ya es seguro que faltan reservas.
   22/09/2026. */
.tarjeta.importacion-vieja.aviso {
  background: var(--hoy); border-color: #e0c56b;
  border-left: 4px solid #c9a227;
}
.tarjeta.importacion-vieja.aviso h2 { color: #7a6212; }
.tarjeta.importacion-vieja.grave {
  background: #fdeceb; border-color: #e8a8a3;
  border-left: 4px solid #D0021B;
}
.tarjeta.importacion-vieja.grave h2 { color: #D0021B; }
.tarjeta.importacion-vieja code {
  background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px;
}


/* =====================================================================
   Los dos graficos de Caja
   =====================================================================
   SVG dibujado en el servidor, sin libreria: el PMS no carga nada de
   fuera y esta pantalla se mira desde el movil. Miguel, 22/09/2026. */
.graficos-cabecera {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 10px; margin-bottom: 4px;
}
.graficos-cabecera h2 { margin: 0; }
.graficos-modos { display: flex; gap: 4px; }

.grafico-bloque { margin-top: 14px; }
.grafico-titulo {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  font-size: 13px; font-weight: 600; margin-bottom: 4px;
}
.grafico-nota { font-weight: 400; font-size: 12px; color: var(--tinta-suave); }

.grafico { width: 100%; height: auto; display: block; }
.g-rejilla { stroke: var(--linea); stroke-width: 1; }
.g-eje { font-size: 10px; fill: var(--tinta-suave); }

/* El rojo de las tarjetas, como pidio Miguel: un solo color de serie. */
.g-barra { fill: #D0021B; }
.g-barra:hover { fill: #a80116; }
/* Un dia que aun no ha llegado no es un dia flojo: se ve, pero apagado. */
.g-barra.futura { fill: var(--linea); }
.g-barra.hoy { fill: #7a0110; }

/* El objetivo, por encima y a trazos: es una referencia, no un dato. */
.g-objetivo {
  stroke: var(--tinta); stroke-width: 1.5; stroke-dasharray: 5 4;
  opacity: .55;
}

@media (max-width: 640px) {
  .graficos-cabecera { flex-direction: column; align-items: stretch; }
  .g-eje { font-size: 13px; }   /* en el movil el SVG se encoge: compensa */
}


/* La pantalla de objetivos de caja. 22/09/2026. */
.objetivos-tabla input[type=text] {
  width: 110px; text-align: right; padding: 5px 7px;
  border: 1px solid var(--linea); border-radius: var(--radio);
  background: var(--papel); color: var(--tinta); font: inherit;
}
.objetivos-tabla td:last-child input { width: 100%; text-align: left; }
.objetivos-tabla tr.mes-en-curso { background: var(--fondo); }
.objetivos-tabla tr.mes-en-curso td:first-child { font-weight: 600; }
.pct-verde { color: #2F8F4E; }
.pct-ambar { color: #C77A00; }
.pct-rojo  { color: #D0021B; }
.franja-ajustar {
  position: absolute; top: 0; right: 0;
  font-size: 11px; color: var(--tinta-suave); text-decoration: underline;
}
.franja-anual { position: relative; }


/* «Cuando se reserva». Barras con CSS, sin SVG: son cuatro listas
   cortas y una barra es un div con un ancho. 22/09/2026. */
.patrones {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px; margin-top: 12px;
}
.patron-titulo {
  font-size: 13px; font-weight: 600; margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
}
.patron-fila {
  display: grid; grid-template-columns: 96px 1fr auto;
  align-items: center; gap: 8px; margin-bottom: 3px;
}
.patron-et { font-size: 12px; color: var(--tinta-suave);
             overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.patron-barra { background: var(--fondo); border-radius: 3px; height: 16px; }
.patron-barra i { display: block; height: 100%; background: #D0021B;
                  border-radius: 3px; opacity: .55; }
.patron-fila.gana .patron-barra i { opacity: 1; }
.patron-fila.gana .patron-et { color: var(--tinta); font-weight: 600; }
.patron-n { font-size: 13px; font-weight: 600; text-align: right;
            min-width: 84px; }
.patron-n small { display: block; font-weight: 400; font-size: 11px;
                  color: var(--tinta-suave); }
.patron-antes { font-size: 11px; color: var(--tinta-suave); min-width: 28px;
                text-align: right; }
.patron-nota { font-size: 11.5px; color: var(--tinta-suave);
               margin: 6px 0 0; }

@media (max-width: 900px) {
  .patrones { grid-template-columns: 1fr; }
  .patron-fila { grid-template-columns: 88px 1fr auto; }
}


/* =====================================================================
   El panel de Astro, con el sistema visual de Cork Valley
   =====================================================================
   La piel de Cork Valley dentro del panel y SOLO dentro del panel: el
   resto del PMS sigue con el verde hasta que Miguel decida cambiarlo
   entero. Se hace redefiniendo aqui las variables que ya usaban estas
   reglas, no reescribiendolas una a una: asi el dia que se cambie el
   PMS entero, este bloque se cae solo y no queda nada suelto.

   Las decisiones son las mismas que ya estan en produccion en CV Desk
   (/opt/cvdesk/public/app.css), para que las dos pantallas —que ensenan
   las MISMAS conversaciones— no se vean distintas. 23/09/2026. */

.astro-panel {
  --tinta: #121212;
  --tinta-suave: #6b675f;
  --linea: #d8d4ca;
  --fondo: #f5f2ec;          /* papel */
  --papel: #ffffff;
  --piedra: #e9ebe0;
  --lima: #edf6d4;
  --acento: #121212;
  --acento-claro: #edf6d4;
  --radio: 0px;              /* esquinas rectas */

  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  background: var(--papel);
  border: 1px solid var(--linea);
  color: var(--tinta);
}

.astro-panel h1, .astro-panel h2, .astro-panel h3,
.astro-cabecera strong {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.astro-cabecera { background: var(--piedra); border-bottom: 1px solid var(--linea); }

/* La lista: la elegida con fondo piedra y una barra de tinta a la
   izquierda, que es como se marca en CV Desk. */
.astro-lista { background: var(--fondo); border-right: 1px solid var(--linea); }
.astro-conv {
  border-bottom: 1px solid var(--linea);
  box-shadow: inset 3px 0 0 transparent;
}
.astro-conv:hover { background: var(--piedra); }
.astro-conv.elegida {
  background: var(--piedra);
  box-shadow: inset 3px 0 0 var(--tinta);
}
.astro-conv-cabeza { display: flex; align-items: baseline; gap: 8px; }
.astro-conv-cabeza strong { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.astro-conv-fecha { flex: none; font-size: 11.5px; color: var(--tinta-suave);
                    font-variant-numeric: tabular-nums; }
.astro-conv-pie { display: flex; align-items: center; gap: 7px; margin-top: 3px;
                  font-size: 12px; color: var(--tinta-suave); }

/* Los distintivos de canal: WhatsApp en lima, el resto en piedra. */
.astro-chip {
  flex: none; padding: 1px 6px; font-size: 10.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  background: var(--piedra); color: var(--tinta); border: 1px solid var(--linea);
}
.astro-chip-whatsapp { background: var(--lima); }

/* Las burbujas. El huesped en papel; nosotros en tinta con texto lima;
   Astro al reves, lima con texto tinta. Asi se distingue de un vistazo
   quien contesto sin sacar ningun color del sistema. */
.astro-mensaje p { border-radius: 0; background: var(--fondo);
                   border: 1px solid var(--linea); }
.astro-mensaje.de-agente p {
  background: var(--tinta); color: var(--lima); border-color: var(--tinta);
}
.astro-mensaje.de-astro p {
  background: var(--lima); color: var(--tinta); border-color: #d9e6b4;
}
/* Una nota interna no es un mensaje: no sale de aqui y se ve distinta. */
.astro-mensaje.privado p {
  background: #f4ecd8; border-color: #ddd0ae; color: var(--tinta);
}

.astro-escribir { background: var(--piedra); border-top: 1px solid var(--linea); }
.astro-escribir input { border-radius: 0; border-color: var(--linea); }
.astro-escribir input:focus { outline: 2px solid var(--tinta); outline-offset: -2px; }
/* El boton de enviar, como los del sistema: tinta con texto y borde lima. */
.astro-escribir .boton.principal {
  background: #0b0d12; color: var(--lima);
  border: 2px solid var(--lima); border-radius: 0;
}
.astro-escribir .boton.principal:hover { background: var(--tinta); }

.astro-nota-sub { color: var(--tinta-suave); font-size: 12px; }
.astro-panel .astro-borde:hover { background: var(--tinta); opacity: .18; }

/* El cuadro de las iniciales solo existe con la piel de Cork Valley. */
.barra-logo { display: none; }

/* El contador de mensajes sin leer en el boton de Astro. Existe porque
   con el panel cerrado no habia forma de enterarse de que habia algo
   nuevo. Miguel, 23/09/2026. */
.astro-sinleer {
  margin-left: auto;
  min-width: 18px; height: 18px;
  display: inline-grid; place-items: center;
  padding: 0 5px;
  background: var(--aviso); color: #fff;
  font-size: 11px; font-weight: 600; line-height: 1;
}

/* La nota dentro del cuadro del planning. Tres lineas como mucho: el
   cuadro flota sobre la rejilla y si creciera taparia las reservas de
   las filas de abajo. El texto entero sigue en el HTML, solo se recorta
   al pintarlo. Miguel, 23/09/2026. */
.cuadro-nota { display: block; }
.cuadro-nota-texto {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;     /* respeta los saltos de linea de la nota */
  font-size: 12px;
  line-height: 1.35;
  color: var(--tinta-suave);
  max-width: 34ch;
}

/* El titulo de la nota interna y su boton, en la misma linea. */
.nota-cabeza { display: flex; align-items: center; gap: 12px; }
.nota-cabeza h2 { margin: 0; flex: 1; }

/* Punto 31: mientras llega la semana siguiente (sin recargar), la rejilla
   se apaga un poco. Con retraso, para que un salto rapido no parpadee. */
#zona-planning.cargando .planning { opacity: .55; transition: opacity .15s .2s; }

.cuadro-fuera { font-size: 12px; color: var(--tinta-suave); display: block; }

/* Satisfacción del huésped (1-10) y pantalla Agentes. 24/09/2026.
   Rojo hasta 4, ámbar 5-6, verde desde 7: los mismos tonos en la ficha,
   en el panel de Astro y en la historia. */
.nota-satisf {
  display: inline-block; min-width: 38px; padding: 1px 6px; border-radius: 10px;
  font-size: 12px; font-weight: 700; text-align: center; color: #fff;
}
.nota-satisf.mal { background: #C1121F; }
.nota-satisf.regular { background: #E08A00; }
.nota-satisf.bien { background: #2E7D32; }
.satisf-marcador { display: flex; align-items: center; gap: 14px; }
.satisf-numero { font-size: 34px; font-weight: 700; line-height: 1; }
.satisf-numero small { font-size: 15px; color: var(--tinta-suave); font-weight: 400; }
.satisf-numero.mal { color: #C1121F; }
.satisf-numero.regular { color: #E08A00; }
.satisf-numero.bien { color: #2E7D32; }
.satisf-escala { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; flex: 1; max-width: 260px; }
.satisf-escala i { height: 10px; border-radius: 2px; background: #e4e7e5; }
.satisf-escala i.mal { background: #C1121F; }
.satisf-escala i.regular { background: #E08A00; }
.satisf-escala i.bien { background: #2E7D32; }
.satisf-historia { list-style: none; padding: 0; margin: 8px 0 0; }
.satisf-historia li { padding: 6px 0; border-top: 1px solid var(--linea, #e4e7e5); font-size: 13px; }
.astro-satisf { display: block; margin-top: 4px; font-size: 11.5px; color: var(--tinta-suave); }
.astro-conv-pie .nota-satisf { margin-left: auto; }

.agente-cabeza { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.agente.apagado h2 { color: var(--tinta-suave); }
.agente-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 14px; }
.agente-form { margin-top: 12px; }
.agente-form textarea { width: 100%; box-sizing: border-box; }
.agente-niveles { border: 1px solid var(--linea, #e4e7e5); border-radius: 8px; padding: 8px 12px 10px; margin: 0 0 12px; }
.agente-niveles legend { font-size: 12px; color: var(--tinta-suave); padding: 0 4px; }
.agente-nivel { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: inherit; margin: 6px 0; }
.agente-nivel small { color: var(--tinta-suave); }
.agente-activo { display: flex; gap: 8px; align-items: center; font-size: 14px; color: inherit; }
details > summary.boton { list-style: none; display: inline-block; cursor: pointer; }
details > summary.boton::-webkit-details-marker { display: none; }

/* ==========================================================================
   Astro con la piel de Chatwoot. 24/09/2026.
   Solo el panel de Astro: el resto del PMS se queda con la piel Cork Valley.
   Valores medidos en app.chatwoot.com el 24/09/2026.
   ========================================================================== */

.astro-panel {
  --cw-texto: #1c2024;
  --cw-apagado: #60646c;
  --cw-suave: #80838d;
  --cw-papel: #f7f7f7;
  --cw-panel: #fefefe;
  --cw-linea: #eaeaea;
  --cw-entrante: #e8e8ec;
  --cw-saliente: #daecff;
  --cw-nota: #ffe4b5;
  --cw-nota-texto: #4f3422;
  --cw-azul: #2781f6;
  --cw-azul-hover: #086de0;
  background: var(--cw-panel);
  color: var(--cw-texto);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  border: 1px solid var(--cw-linea);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(28, 32, 36, .16);
}
.astro-panel h1, .astro-panel h2, .astro-panel h3, .astro-panel strong {
  font-family: inherit; letter-spacing: 0;
}
.astro-panel .astro-cabecera {
  background: var(--cw-papel);
  border-bottom: 1px solid var(--cw-linea);
  color: var(--cw-texto);
}
.astro-panel .astro-sub { color: var(--cw-apagado); font-size: 12px; }
.astro-panel .astro-boton-titulo { color: var(--cw-apagado); border-radius: 8px; }
.astro-panel .astro-boton-titulo:hover { color: var(--cw-texto); background: rgba(196, 197, 198, .28); }
.astro-panel .astro-lista {
  background: var(--cw-panel);
  border-right: 1px solid var(--cw-linea);
}
.astro-panel .astro-conv { border-bottom: 1px solid var(--cw-linea); }
.astro-panel .astro-conv:hover { background: var(--cw-papel); }
.astro-panel .astro-conv.elegida { background: rgba(196, 197, 198, .22); }
.astro-panel .astro-conv strong { font-size: 14px; font-weight: 600; color: var(--cw-texto); }
.astro-panel .astro-conv span,
.astro-panel .astro-conv-fecha { color: var(--cw-suave); font-size: 10px; }
.astro-panel .astro-conv p,
.astro-panel .astro-nota { color: var(--cw-apagado); font-size: 13px; }
.astro-panel .astro-nota-sub { color: var(--cw-suave); font-size: 12px; }
.astro-panel .astro-chip {
  border-radius: 8px; font-size: 11.5px; padding: 2px 8px;
  background: var(--cw-papel); color: var(--cw-apagado); border: 1px solid var(--cw-linea);
  text-transform: none; letter-spacing: 0;
}
.astro-panel .astro-chip-whatsapp { background: #e6f6ec; color: #1a7f43; border-color: #c9ebd6; }
.astro-panel .astro-sinleer { background: #12a594; color: #fff; border-radius: 9999px; font-size: 10px; }
.astro-panel .astro-mensajes { background: var(--cw-panel); }
.astro-panel .astro-mensaje p {
  background: var(--cw-entrante);
  color: var(--cw-texto);
  border: 0;
  border-radius: 12px 12px 12px 2px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 20px;
}
.astro-panel .astro-mensaje.nuestro p,
.astro-panel .astro-mensaje.de-agente p,
.astro-panel .astro-mensaje.de-astro p {
  background: var(--cw-saliente);
  color: var(--cw-texto);
  border-radius: 12px 12px 2px 12px;
}
.astro-panel .astro-mensaje.privado p {
  background: var(--cw-nota);
  color: var(--cw-nota-texto);
  border-radius: 12px 12px 2px 12px;
}
.astro-panel .astro-quien { color: var(--cw-suave); font-size: 11px; }
.astro-panel .astro-escribir {
  background: var(--cw-papel);
  border-top: 1px solid var(--cw-linea);
}
.astro-panel .astro-escribir input {
  border-radius: 8px;
  border: 1px solid var(--cw-linea);
  background: var(--cw-panel);
  color: var(--cw-texto);
}
.astro-panel .astro-escribir input:focus {
  outline: 0;
  border-color: var(--cw-azul);
  box-shadow: 0 0 0 3px rgba(39, 129, 246, .12);
}
.astro-panel .astro-escribir .boton.principal {
  background: var(--cw-azul); color: #fff; border: 1px solid var(--cw-azul);
  border-radius: 8px; font-weight: 500;
}
.astro-panel .astro-escribir .boton.principal:hover { background: var(--cw-azul-hover); border-color: var(--cw-azul-hover); }
.astro-panel .astro-aviso { color: var(--cw-apagado); font-size: 12px; }
.astro-panel .astro-borde:hover { background: var(--cw-azul); opacity: .25; }

/* Automatizaciones de Astro: los pendientes de mandar. 24/09/2026. */
.astro-pendiente { padding: 10px 0; border-top: 1px solid var(--linea, #e4e7e5); }
.astro-pendiente:first-of-type { border-top: 0; }
.astro-panel .astro-avance { color: var(--cw-apagado); font-size: 13px; }
.astro-panel .astro-cuerpo { position: relative; }
.astro-panel .astro-marco { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; display: block; }

/* Hoy: huéspedes descontentos (satisfacción < 5). 24/09/2026. */
.alarma-satisfaccion { border-left: 4px solid #C1121F; }
.alarma-fila { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--linea, #e4e7e5); }
.alarma-fila:first-of-type { border-top: 0; }

/* Clientes: las tres bases y los campos de contacto. 24/09/2026. */
.pestanas-clientes { display: flex; gap: 4px; margin: 0 0 14px; border-bottom: 1px solid var(--linea, #e4e7e5); flex-wrap: wrap; }
.pestanas-clientes a { padding: 8px 14px; text-decoration: none; color: var(--tinta-suave); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pestanas-clientes a.activa { color: var(--tinta, #1f2a24); border-bottom-color: currentColor; font-weight: 600; }
.pestanas-clientes a b { font-weight: 600; margin-left: 4px; font-size: 12px; background: #eef0ef; padding: 1px 7px; border-radius: 10px; }
.campos-contacto { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0 14px; }
.campos-contacto .campo-ancho { grid-column: 1 / -1; }
.campos-contacto input, .campos-contacto select, .campos-contacto textarea { width: 100%; box-sizing: border-box; }
.campos-contacto .campo-si-no { display: flex; gap: 8px; align-items: center; font-size: 14px; color: inherit; margin: 4px 0 10px; }

/* CRM de Clientes (24/09/2026). */
.pestanas-clientes a b.caliente { background: #fde2e1; color: #b3261e; }
.pestanas-clientes a b.vence { background: #C1121F; color: #fff; }
.crm-linea { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crm-cabeza-quien { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.crm-cabeza-quien h2 { margin: 0; }
.crm-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.crm-acciones a { text-decoration: none; }
.crm-cifras { margin-top: 4px; }
.crm-duplicados { margin: 10px 0 0; font-size: 13px; background: #fff7e6; padding: 6px 10px; border-radius: 6px; }
.crm-insignia { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: #eceeed; color: #3b4541; }
.crm-insignia.cliente { background: #dcfce7; color: #166534; }
.crm-insignia.potencial { background: #fef3c7; color: #92400e; }
.crm-insignia.baja { background: #fdecea; color: #b3261e; }
.crm-insignia.estado-nuevo { background: #e0f2fe; color: #075985; }
.crm-insignia.estado-contactado { background: #ede9fe; color: #5b21b6; }
.crm-insignia.estado-interesado { background: #fef9c3; color: #854d0e; }
.crm-insignia.estado-propuesta { background: #ffedd5; color: #9a3412; }
.crm-insignia.estado-reservo { background: #dcfce7; color: #166534; }
.crm-insignia.estado-perdido { background: #f3f4f6; color: #6b7280; }
.crm-insignia.temp-caliente { background: #fde2e1; color: #b3261e; }
.crm-insignia.temp-templado { background: #ffedd5; color: #9a3412; }
.crm-insignia.temp-frio { background: #e0f2fe; color: #075985; }
.crm-rejilla { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0 16px; align-items: start; }
@media (max-width: 1000px) { .crm-rejilla { grid-template-columns: 1fr; } }
.crm-seguimiento-vence { border-left: 4px solid #C1121F; }
.crm-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-etiquetas form { margin: 0; }
.crm-etiqueta { border: 1.5px solid var(--c); color: var(--c); background: #fff; border-radius: 14px; padding: 3px 10px; font: inherit; font-size: 12.5px; cursor: pointer; }
.crm-etiqueta.puesta { background: var(--c); color: #fff; }
.crm-historia { list-style: none; margin: 0; padding: 0; }
.crm-historia li { position: relative; padding: 6px 0 10px 16px; border-left: 2px solid #e5e7eb; margin-left: 4px; }
.crm-historia li::before { content: ""; position: absolute; left: -6px; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: #9ca3af; }
.crm-historia li.h-reserva::before { background: #2E7D32; } .crm-historia li.h-nota::before { background: #E3C04A; }
.crm-historia li.h-interaccion::before { background: #1565C0; } .crm-historia li.h-cambio::before { background: #9ca3af; }
.crm-historia li.h-envio::before { background: #6A1B9A; } .crm-historia li.h-satisfaccion::before { background: #E08A00; }
.crm-historia .h-cuando { font-size: 11.5px; color: var(--tinta-suave); }
.crm-historia .h-titulo { font-weight: 600; font-size: 13.5px; }
.crm-historia .h-texto { font-size: 13px; white-space: pre-line; }
.crm-lista-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.crm-lista-cab .boton { text-decoration: none; }
.crm-bloque { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: #eef6ff; border: 1px solid #cfe3fb; padding: 8px 10px; border-radius: 8px; margin-bottom: 10px; }
.crm-tabla td { vertical-align: top; }
.crm-tabla .vence, .embudo .vence { color: #C1121F; font-weight: 600; }
.tabla-envoltorio { overflow-x: auto; }
.crm-dialogo { border: 0; border-radius: 12px; padding: 20px 22px; width: min(460px, 94vw); box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.crm-dialogo.ancho { width: min(820px, 96vw); }
.crm-dialogo::backdrop { background: rgba(17, 24, 39, .45); }
.crm-dialogo h3 { margin-top: 0; }
.embudo { display: grid; grid-template-columns: repeat(6, minmax(190px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 8px; }
.embudo-col { background: #f5f6f5; border-radius: 10px; padding: 8px; min-height: 120px; }
.embudo-col h3 { font-size: 13px; margin: 2px 4px 8px; display: flex; justify-content: space-between; }
.embudo-col h3 span { background: #fff; border-radius: 10px; padding: 0 8px; font-size: 12px; }
.embudo-tarjeta { background: #fff; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.06); border-left: 4px solid #d1d5db; font-size: 13px; }
.embudo-tarjeta select { margin-top: 6px; width: 100%; font-size: 12px; }
.temp-borde-caliente { border-left-color: #C1121F; } .temp-borde-templado { border-left-color: #E08A00; } .temp-borde-frio { border-left-color: #1565C0; }
.seguimiento-fila { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--linea, #e4e7e5); }
.seguimiento-fila:first-of-type { border-top: 0; }