/* ============================================================
   CALENDARIO (#/produccion/calendario) — Bloque 6

   Sin colores nuevos. Cada red toma prestado uno de los tintes de etapa de tokens.css
   (--e-*), que es donde se cambia la paleta de la app: tres redes, tres tintes que ya se
   distinguen entre sí en los dos temas y que ya tienen su `-ink` con contraste medido. Lo
   que se hace A MANO no tiene tinte propio: tiene otra FORMA (borde punteado), porque la
   diferencia que importa no es de qué canal es sino si la app lo publica sola o si alguien
   lo tiene que subir.
   ============================================================ */

.cal-wrap{ padding:var(--gut); display:flex; flex-direction:column; gap:var(--sp-5); }

.cal-head{ display:flex; align-items:flex-start; gap:var(--sp-6); }
.cal-titulo{ margin:0; font-size:var(--fs-xl); }
.cal-bajada{
  margin:var(--sp-2) 0 0; color:var(--ink-2); font-size:var(--fs-md);
  line-height:var(--lh-base); max-width:78ch;
}
.cal-dim{ color:var(--ink-3); font-size:var(--fs-xs); line-height:var(--lh-base); }

.cal-barra{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-4); }
.cal-seg{ display:flex; gap:var(--sp-1); }
.cal-seg button{ font-size:var(--fs-sm); color:var(--ink-2); }
.cal-nav{ display:flex; align-items:center; gap:var(--sp-2); }
.cal-nav button{ font-size:var(--fs-sm); padding:2px var(--sp-3); }
.cal-nav b{ margin-left:var(--sp-3); font-size:var(--fs-sm); color:var(--ink-2); }

.cal-aviso{
  border:1px solid var(--line); border-radius:var(--r-sm); padding:var(--sp-4) var(--sp-5);
  font-size:var(--fs-sm); color:var(--ink-2); white-space:pre-wrap;
}
.cal-aviso.err{ border-color:var(--rojo); color:var(--ink); }

.cal-vacio{ color:var(--ink-2); font-size:var(--fs-md); line-height:var(--lh-base); max-width:78ch; }
.cal-link{
  background:none; border:none; padding:0; font:inherit; cursor:pointer;
  color:var(--turquesa-ink); text-decoration:none;
}
.cal-link:hover{ text-decoration:underline; }

/* ---------- la grilla ---------- */

.cal-semana{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:var(--sp-2); }
.cal-mes-cab{
  display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:var(--sp-2);
  font-size:var(--fs-xs); color:var(--ink-3); text-transform:uppercase; letter-spacing:.04em;
  padding-bottom:var(--sp-2);
}
.cal-mes-celdas{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:var(--sp-2); }

.cal-dia{
  border:1px solid var(--line-soft); border-radius:var(--r-sm);
  padding:var(--sp-2); min-height:7rem; display:flex; flex-direction:column; gap:var(--sp-2);
}
.cal-mes-celdas .cal-dia{ min-height:5.5rem; }
/* Los días del mes anterior y del siguiente que completan la primera y la última semana.
   Se muestran (una semana partida al medio no se lee) y se apagan. */
.cal-fuera{ opacity:.55; }
.cal-hoy{ border-color:var(--turquesa-line); box-shadow:inset 0 2px 0 var(--turquesa-ink); }
/* El día sobre el que se está soltando una tarjeta. */
.cal-dropzona{ background:var(--turquesa-dim); border-color:var(--turquesa-ink); }

.cal-dia-cab{
  display:flex; align-items:baseline; gap:var(--sp-2);
  font-size:var(--fs-xs); color:var(--ink-3);
}
.cal-dia-cab b{ color:var(--ink-2); text-transform:capitalize; }
.cal-dia-cuerpo{ display:flex; flex-direction:column; gap:var(--sp-1); }

/* ---------- el chip de un evento ---------- */

.cal-chip{
  display:flex; align-items:baseline; gap:var(--sp-2); width:100%; text-align:left;
  padding:2px var(--sp-2); border-radius:var(--r-xs); cursor:pointer;
  font-size:var(--fs-xs); line-height:var(--lh-tight);
  color:var(--ink); background:var(--et-dim, transparent);
  border:1px solid var(--et, var(--line));
  border-left:3px solid var(--et, var(--line));
}
.cal-chip:hover{ border-color:var(--et-ink, var(--ink-2)); }
.cal-chip-h{ color:var(--et-ink, var(--ink-3)); font-variant-numeric:tabular-nums; }
.cal-chip-t{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-chip-mano{ font-size:var(--fs-micro); color:var(--ink-3); }
.cal-arrastrando{ opacity:.4; }

/* Una red, un tinte de etapa. No son colores nuevos: son los mismos que pintan Hoy. */
.cal-chip[data-canal="instagram"]{ --et:var(--e-rev); --et-ink:var(--e-rev-ink); --et-dim:var(--e-rev-dim); }
.cal-chip[data-canal="facebook"]{ --et:var(--e-prog); --et-ink:var(--e-prog-ink); --et-dim:var(--e-prog-dim); }
.cal-chip[data-canal="linkedin"]{ --et:var(--e-ideas); --et-ink:var(--e-ideas-ink); --et-dim:var(--e-ideas-dim); }

/* Lo que se hace a mano: sin relleno y con el borde punteado. La forma dice "esto no sale
   solo" antes de que se lea la palabra. */
.cal-chip[data-tipo="recordatorio"]{
  --et:var(--ink-3); --et-ink:var(--ink-2); --et-dim:transparent;
  border-style:dashed; border-left-style:dashed;
}
/* Terminales: se ven, pero apagadas y tachadas. Esconderlas se lee como "nunca existió". */
.cal-off{ opacity:.6; }
.cal-off .cal-chip-t{ text-decoration:line-through; }
.cal-chip[data-estado="fallado"]{ --et:var(--rojo); --et-ink:var(--rojo-ink); }

/* ---------- un hueco libre ---------- */

.cal-hueco{
  display:flex; align-items:baseline; gap:var(--sp-2);
  padding:2px var(--sp-2); border-radius:var(--r-xs);
  border:1px dashed var(--line); color:var(--ink-3);
  font-size:var(--fs-micro); line-height:var(--lh-tight);
}
.cal-hueco-t{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- lo que quedó sin fecha ---------- */

.cal-sinfecha{
  border:1px solid var(--line); border-radius:var(--r-sm); padding:var(--sp-4) var(--sp-5);
  font-size:var(--fs-sm);
}
.cal-sinfecha p{ margin:var(--sp-2) 0 var(--sp-3); }
.cal-sinfecha-chips{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.cal-sinfecha-chips .cal-chip{ width:auto; max-width:20rem; }

/* ---------- el popover ---------- */

.cal-pop{
  position:fixed; z-index:60; min-width:15rem; max-width:20rem;
  background:var(--s2); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow); padding:var(--sp-4);
  display:flex; flex-direction:column; gap:var(--sp-2);
}
.cal-pop-tit{ font-size:var(--fs-sm); }
.cal-pop-dim{ margin:0; color:var(--ink-3); font-size:var(--fs-xs); line-height:var(--lh-base); }
.cal-pop-err{ margin:0; color:var(--rojo-ink); font-size:var(--fs-xs); line-height:var(--lh-base); }
.cal-pop-acc{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-2); }
.cal-pop-b{
  font-size:var(--fs-xs); padding:2px var(--sp-3); border:1px solid var(--line);
  border-radius:var(--r-xs); background:none; color:var(--ink-2); cursor:pointer;
  text-decoration:none;
}
.cal-pop-b:hover{ color:var(--ink); border-color:var(--line-soft); }
.cal-pop-b.cal-danger:hover{ color:var(--rojo-ink); border-color:var(--rojo); }
.cal-pop-b.cal-tildado{ color:var(--turquesa-ink); border-color:var(--turquesa-line); }
.cal-campo input{ width:100%; font-size:var(--fs-xs); }
.cal-destinos{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }

/* ---------- el drawer de huecos ---------- */

.cal-drawer{
  margin-left:auto; height:100%; width:min(40rem, 100%); overflow:auto;
  background:var(--s2); border-left:1px solid var(--line);
  padding:var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-4);
}
.cal-drawer h3{ margin:0; font-size:var(--fs-lg); }
.cal-hfila{ border-top:1px solid var(--line-soft); padding-top:var(--sp-3); }
.cal-hfila-cab{ display:flex; align-items:center; gap:var(--sp-3); font-size:var(--fs-sm); }
.cal-conf{
  font-size:var(--fs-micro); border:1px solid var(--line); border-radius:var(--r-xs);
  padding:0 var(--sp-2); color:var(--ink-3);
}
.cal-conf[data-conf="datos"]{ color:var(--turquesa-ink); border-color:var(--turquesa-line); }
.cal-conf[data-conf="pocos_datos"]{ color:var(--ambar-ink); border-color:var(--ambar-dim); }
.cal-hdias{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:var(--sp-2); margin-top:var(--sp-2); }
.cal-hdia{ display:flex; flex-direction:column; gap:var(--sp-1); }
.cal-hdia-nom{ font-size:var(--fs-micro); color:var(--ink-3); text-transform:capitalize; }
/* Lo que dicen los números para ese día: cuanto más alto el valor, más marcado el nombre.
   Es una pista, no un ranking: el número exacto está en el title. */
.cal-hdia-dato{ color:var(--ink-2); border-bottom:2px solid var(--turquesa-line); opacity:calc(.45 + var(--v) * .55); }
.cal-hhora{
  font-size:var(--fs-micro); padding:1px var(--sp-2); border:1px solid var(--line);
  border-radius:var(--r-xs); background:none; color:var(--ink-2); cursor:pointer;
}
.cal-hhora:hover{ color:var(--rojo-ink); border-color:var(--rojo); }
.cal-hnuevo{ font-size:var(--fs-micro); width:100%; }
.cal-drawer-acc{ display:flex; align-items:center; gap:var(--sp-3); margin-top:auto; padding-top:var(--sp-4); }

/* ---------- pantalla chica ---------- */

@media (max-width:900px){
  .cal-wrap{ padding:var(--sp-6); }
  /* La semana en siete columnas no entra: pasa a una fila por día, con el nombre adelante.
     El mes se achica pero se queda en grilla — en una tira de 30 días no se ve un mes. */
  .cal-semana{ grid-template-columns:1fr; }
  .cal-semana .cal-dia{ min-height:0; }
  .cal-mes-celdas .cal-dia{ min-height:4rem; padding:var(--sp-1); }
  .cal-mes-celdas .cal-chip-t, .cal-mes-celdas .cal-hueco-t{ display:none; }
  .cal-drawer{ width:100%; padding:var(--sp-5); }
}