/* ═══════════════════════════════════════════════
   Orbita — Calendario (D111, vista semanal y mensual)
   ═══════════════════════════════════════════════ */

.cal-nav {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}

.cal-vistas {
  display: inline-flex;
  gap: 6px;
  margin-left: 12px;
}

.cal-aviso {
  font-size: 13px;
  color: var(--t2);
  background: var(--sf2);
  border: 1px solid var(--b2);
  border-radius: var(--r-sm, 6px);
  padding: 8px 12px;
  margin-bottom: 14px;
}

.cal-aviso a { color: var(--ac); }

/* ─── Semana ─── */

.cal-grid {
  display: grid;
  grid-template-columns: 52px repeat(7, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--b2);
  border-radius: var(--r-md, 8px);
  background: var(--sf);
  overflow-x: auto;
}

.cal-corner { border-bottom: 1px solid var(--b2); }

.cal-dayhead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 8px 4px;
  border-left: 1px solid var(--b2);
  border-bottom: 1px solid var(--b2);
}

.cal-dow {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t3);
}

.cal-dnum {
  font: var(--text-mono);
  font-size: 15px;
  color: var(--t1);
}

/* El día de hoy se marca en la cabecera y con un tinte de columna. Un borde
   completo alrededor competía con los eventos, que son lo que hay que leer. */
.cal-dayhead.es-hoy .cal-dnum { color: var(--ac); font-weight: 600; }
.cal-dayhead.es-hoy { background: color-mix(in srgb, var(--ac) 7%, transparent); }
.cal-col.es-hoy { background: color-mix(in srgb, var(--ac) 4%, transparent); }

.cal-allday-label {
  font-size: 10px;
  color: var(--t3);
  text-align: right;
  padding: 4px 6px;
  border-bottom: 1px solid var(--b2);
}

.cal-allday-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 3px;
  border-left: 1px solid var(--b2);
  border-bottom: 1px solid var(--b2);
  min-height: 22px;
}

.cal-chip {
  font-size: 11px;
  line-height: 1.3;
  padding: 2px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--chip) 16%, transparent);
  border-left: 2px solid var(--chip);
  color: var(--t1);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-hours { position: relative; }

.cal-hour {
  position: absolute;
  right: 6px;
  transform: translateY(-50%);
  font: var(--text-mono-sm);
  color: var(--t3);
}

.cal-col {
  position: relative;
  border-left: 1px solid var(--b2);
}

.cal-linea {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--b1, rgba(0, 0, 0, 0.05));
  pointer-events: none;
}

/* La rutina es el fondo: lo que planificaste, no lo que te comprometiste a hacer.
   Va detrás de todo y sin borde propio para que no compita con un evento real. */
.cal-slot {
  position: absolute;
  left: 2px;
  right: 2px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--slot) 12%, transparent);
  color: var(--t3);
  font-size: 10px;
  padding: 2px 4px;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.cal-ev {
  position: absolute;
  /* left y width los pone el reparto de columnas (distribuirSolapados): dos
     eventos a la misma hora ocupan media columna cada uno en vez de taparse. */
  z-index: 2;
  border-radius: 4px;
  border-left: 3px solid var(--ev);
  background: color-mix(in srgb, var(--ev) 15%, var(--sf));
  padding: 2px 5px;
  overflow: hidden;
  cursor: pointer;
}

.cal-ev-hora {
  font: var(--text-mono-sm);
  color: var(--t2);
}

.cal-ev-tit {
  font-size: 11px;
  line-height: 1.25;
  color: var(--t1);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Lo que salió de Orbita lleva un punto: en una semana cargada, saber qué puso
   uno mismo desde la app es la diferencia entre confiar en la vista o no. */
.cal-ev.de-orbita::after,
.cal-chip.de-orbita::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ev, var(--chip));
}

.cal-chip.de-orbita { position: relative; padding-right: 14px; }

/* Lo pendiente se dibuja punteado: todavía no es un compromiso, es un vencimiento. */
.cal-ev.pendiente,
.cal-chip.pendiente {
  background: transparent;
  border: 1px dashed var(--ev, var(--chip));
  border-left-width: 3px;
  border-left-style: solid;
}

/* ─── Mes ─── */

.cal-mes {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid var(--b2);
  border-radius: var(--r-md, 8px);
  background: var(--sf);
  overflow: hidden;
}

.cal-mes-head {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t3);
  text-align: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--b2);
}

.cal-mes-dia {
  min-height: 96px;
  border-left: 1px solid var(--b2);
  border-top: 1px solid var(--b2);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cal-mes-dia:nth-child(7n + 1) { border-left: none; }
.cal-mes-dia.fuera { opacity: 0.4; }
.cal-mes-dia.es-hoy { background: color-mix(in srgb, var(--ac) 6%, transparent); }

.cal-mes-num {
  font: var(--text-mono);
  font-size: 12px;
  color: var(--t2);
}

.cal-mes-dia.es-hoy .cal-mes-num { color: var(--ac); font-weight: 600; }

.cal-mes-ev {
  font-size: 10px;
  line-height: 1.3;
  padding: 1px 4px;
  border-radius: 3px;
  border-left: 2px solid var(--ev);
  background: color-mix(in srgb, var(--ev) 14%, transparent);
  color: var(--t1);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-mes-ev.pendiente {
  background: transparent;
  border: 1px dashed var(--ev);
  border-left-width: 2px;
  border-left-style: solid;
}

.cal-mes-hora {
  font: var(--text-mono-sm);
  color: var(--t3);
  margin-right: 3px;
}

.cal-mes-mas {
  font-size: 10px;
  color: var(--t3);
  padding-left: 4px;
}

/* ─── Leyenda ─── */

.cal-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
  font-size: 11px;
  color: var(--t3);
}

.cal-leyenda span { display: inline-flex; align-items: center; gap: 5px; }

.cal-lg {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

.cal-lg.ev { background: color-mix(in srgb, var(--ac) 25%, transparent); border-left: 2px solid var(--ac); }
.cal-lg.orb { background: var(--ac); }
.cal-lg.pend { border: 1px dashed var(--ac); }
.cal-lg.slot { background: color-mix(in srgb, var(--t3) 25%, transparent); }

/* ─── Mobile ─── */

@media (max-width: 720px) {
  /* La grilla de 7 días no entra en un teléfono sin volverse ilegible. Se deja
     scrollear en horizontal con columnas de ancho fijo en vez de comprimirlas
     hasta que un evento sea una raya sin texto. */
  .cal-grid {
    grid-template-columns: 44px repeat(7, 116px);
  }

  .cal-mes-dia { min-height: 68px; }
  .cal-mes-ev { font-size: 9px; }
}

/* Un calendario de Google marcado como "fondo" en Configuración. Se dibuja como
   la rutina —detrás, tenue— pero con borde punteado a la izquierda para que se
   note que viene de Google y no de la rutina de Orbita. */
.cal-slot.de-google {
  border-left: 2px dashed color-mix(in srgb, var(--slot) 60%, transparent);
  background: color-mix(in srgb, var(--slot) 9%, transparent);
}

/* Evento corto (30 min o menos): hora y título en una línea. Apilados necesitan
   unos 34px y un evento de media hora mide 22, así que el título se cortaba al
   medio — peor que no mostrarlo, porque parece un bug de render. */
.cal-ev.corto {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding-top: 1px;
  padding-bottom: 1px;
  line-height: 1.15;
}

.cal-ev.corto .cal-ev-hora { flex: none; }

.cal-ev.corto .cal-ev-tit {
  white-space: nowrap;
  min-width: 0;
}

/* ── Línea de ahora, cortes de eventos multi-día, hueco (D138) ──────────── */

.cal-now-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1.5px solid var(--danger);
  z-index: 6;
  pointer-events: none;
}
.cal-now-line::before {
  content: '';
  position: absolute;
  left: -3px;
  top: -3.5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--danger);
}

/* Un evento que viene de ayer o sigue mañana no cierra su borde de ese lado:
   el bloque tiene que leerse como recortado, no como que empieza a las 00:00. */
.cal-ev.viene-antes {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: 1px dashed var(--ev, var(--ac));
}
.cal-ev.sigue-despues {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 1px dashed var(--ev, var(--ac));
}

.cal-col { cursor: cell; }
.cal-ev, .cal-slot, .cal-chip { cursor: pointer; }

.cal-lg-tip { color: var(--t3); font-style: italic; }

.modal-hueco { max-width: 380px; }
.mh-cuando {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--t3);
  margin: -6px 0 16px;
}