/* ══════════════════════════════════════════════════════════════════════════
   HOUZAPP v2 · Calendario mensual

   La rejilla de siete columnas. La carga solo quien la usa.

   ── Por qué empieza en lunes ──────────────────────────────────────────────

   Porque en Colombia la semana empieza el lunes, y porque lo que importa de
   este calendario es el fin de semana: es cuando se reservan los salones. Con
   el domingo al frente, sábado y domingo quedan separados por toda la fila y
   deja de verse como el bloque que en realidad es.
   ══════════════════════════════════════════════════════════════════════════ */

.calendario {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  overflow: hidden;
}

.calendario__encabezado,
.calendario__rejilla {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calendario__encabezado {
  border-bottom: 1px solid var(--borde);
  background: var(--superficie-2, var(--superficie));
}

.calendario__encabezado span {
  padding: var(--e-2) var(--e-3);
  color: var(--texto-tenue);
  font: var(--peso-fuerte) var(--t-xs) var(--fuente-texto);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Cada casilla ──────────────────────────────────────────────────────── */

.calendario__dia {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 108px;
  padding: var(--e-2);
  border-right: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.calendario__dia:nth-child(7n) { border-right: none; }

.calendario__dia:hover { background: var(--superficie-2, rgba(56, 159, 204, .06)); }

.calendario__dia:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: -2px;
}

/* Los huecos del principio y del final del mes. No se pueden pulsar: no son
   días de este mes, y dejarlos activos llevaría a un modal vacío. */
.calendario__dia--fuera {
  background: var(--superficie-2, rgba(0, 0, 0, .02));
  cursor: default;
}

.calendario__dia--fuera:hover { background: var(--superficie-2, rgba(0, 0, 0, .02)); }

.calendario__numero {
  color: var(--texto-tenue);
  font: var(--peso-fuerte) var(--t-xs) var(--fuente-texto);
}

/* Hoy. Es la referencia desde la que se lee todo lo demás. */
.calendario__dia--hoy .calendario__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--marca);
  color: #fff;
}

/* El fin de semana, apenas insinuado: es cuando se reserva. */
.calendario__dia--finde { background: rgba(56, 159, 204, .04); }

/* ── Las reservas dentro del día ───────────────────────────────────────── */

.calendario__marca {
  display: block;
  overflow: hidden;
  padding: 2px var(--e-2);
  border-left: 3px solid var(--marca);
  border-radius: 4px;
  background: rgba(56, 159, 204, .12);
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.calendario__marca--pagar {
  border-left-color: var(--alerta);
  background: rgba(214, 158, 46, .14);
}

/* `--muerta` no se define aquí sino más abajo, después de los colores por
   fuente: tienen la misma especificidad y gana la última, así que lo cancelado
   no puede seguir gritando con el color de su fuente. */

.calendario__mas {
  color: var(--texto-tenue);
  font-size: 11px;
}

/* ── Un color por fuente ──────────────────────────────────────────────────
   En el calendario unificado caen cinco cosas distintas en el mismo día. El
   color es lo único que deja distinguirlas de un vistazo sin leer: leer cinco
   líneas en una casilla de 100 px es exactamente lo que no se hace.

   No van solos: el texto de cada marca dice qué es. El color acompaña, no
   sustituye — quien no distingue rojo de verde tiene que poder usar esto.   */

.calendario__marca--reserva       { border-left-color: var(--marca);   background: rgba(56, 159, 204, .12); }
.calendario__marca--cita          { border-left-color: #7C5CBF;        background: rgba(124, 92, 191, .12); }
.calendario__marca--evento        { border-left-color: var(--exito);   background: rgba(31, 138, 84, .12); }
.calendario__marca--mantenimiento { border-left-color: var(--alerta);  background: rgba(214, 158, 46, .14); }
.calendario__marca--cobro         { border-left-color: var(--peligro); background: rgba(200, 60, 60, .12); }

/* La variante apagada va DESPUÉS para ganarle a los colores de arriba: lo
   cancelado no puede seguir gritando con el color de su fuente. */
.calendario__marca--muerta {
  border-left-color: var(--borde);
  background: none;
  color: var(--texto-tenue);
  text-decoration: line-through;
}

/* La leyenda de colores, bajo los filtros. */
.calendario__leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-4);
  margin-bottom: var(--e-4);
  font-size: var(--t-xs);
  color: var(--texto-suave);
}

.calendario__leyenda label {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  cursor: pointer;
}

.calendario__punto {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.calendario__punto--reserva       { background: var(--marca); }
.calendario__punto--cita          { background: #7C5CBF; }
.calendario__punto--evento        { background: var(--exito); }
.calendario__punto--mantenimiento { background: var(--alerta); }
.calendario__punto--cobro         { background: var(--peligro); }

.calendario__navegacion {
  display: flex;
  gap: var(--e-2);
  align-items: center;
}

.calendario__navegacion strong {
  min-width: 11ch;
  text-align: center;
  text-transform: capitalize;
}

/* ── En el celular ─────────────────────────────────────────────────────── */
/*
   Siete columnas en 360 px dan 50 px por día: no cabe ni la hora. Se bajan las
   casillas de altura y las marcas se vuelven puntos de color, que es lo único
   que sigue siendo legible. El detalle se ve al tocar el día.               */

@media (max-width: 620px) {
  .calendario__dia { min-height: 62px; padding: 4px; }

  .calendario__marca {
    height: 6px;
    padding: 0;
    border-left: none;
    border-radius: 3px;
    background: var(--marca);
    text-indent: -999px;
  }

  .calendario__marca--pagar { background: var(--alerta); }
  .calendario__marca--muerta { background: var(--borde); }

  .calendario__mas { font-size: 10px; }
}