: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;
  --cv-celda: 38px;
}

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: 36px; }
}

@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);
  overflow: hidden;
}

.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. */
.semaforo {
  flex: 0 0 auto;
  width: 9px; height: 9px; border-radius: 50%;
  margin-right: 7px;
  border: 1px solid rgba(0,0,0,.18);
}
.semaforo-limpia   { background: #3f9d54; }   /* lista */
.semaforo-revisar  { background: #e3b341; }   /* sin inspeccionar */
.semaforo-en_curso { background: #e3b341; }   /* haciendose: tampoco lista */
.semaforo-sucia    { background: #c8493f; }   /* sin hacer */

.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); }
.dia .numero { display: block; font-size: 14px; color: var(--tinta); }

.fila-categoria {
  background: var(--acento-claro);
  font-weight: 600;
  font-size: 13px;
}
.fila-categoria .etiqueta-fila { background: var(--acento-claro); }
.fila-categoria .resto { padding: 6px 12px; color: var(--tinta-suave); font-weight: 400; }

.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); cursor: pointer; }

.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; }

.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;
}
.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. 22/09/2026. */
.catalogo select, .catalogo input[type=time] { font-size: 12px; padding: 4px 6px; }
.catalogo td { vertical-align: middle; }
/* Lo que falta por clasificar se ve de lejos. */
.catalogo tr.sin-clasificar td:first-child { border-left: 3px solid var(--aviso); }

/* 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. */
.punto-nota       { background: #EAD016; }   /* tono  52 grados */
.punto-deuda-alta { background: #C8493F; }   /* tono   4 grados */
.punto-deuda-baja { background: #E06A00; }   /* tono  28 grados */

/* 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. */
.barra .punto  { width: 12px; height: 12px; }   /* otro 30 %: 17 -> 12 */
.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 12 px necesitan unos 32: ya caben en todas. 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: relative; z-index: 2; }
/* 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; }

/* ---------- 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; }