/* ════════════════════════════════════════════════════════════════
   CALENDARIO — estilos propios de la tarjeta del Dashboard: celdas
   que crecen con su contenido, menú contextual de día/tarea y aviso
   de error en la propia interfaz. No toca componentes.css: solo
   redefine `.cal-dia` (declarado ahí) desde este archivo, cargado
   después en index.html.
   ════════════════════════════════════════════════════════════════ */

/* la celda deja de ser una fila fija de altura mínima y pasa a columna:
   cabecera (número + contador) y, debajo, hasta tres tareas + «+N» */
.cal-dia{
  flex-direction:column;align-items:stretch;justify-content:flex-start;gap:4px;padding:5px 6px;text-align:left;
}
/* Cada día toma su propia altura. Sin esto, CSS Grid estira todas las celdas de una fila a
   la más alta y un día vacío ocupaba tanto como uno con cuatro tareas. */
.cal-grid{align-items:start}
.cal-dia-cab{display:flex;align-items:center;justify-content:space-between;gap:4px}
.cal-dia-tareas{display:flex;flex-direction:column;gap:2px}
.cal-dia-tarea{
  font:9px var(--f-ui);color:var(--tx-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding:1px 0 1px 5px;border-left:2px solid color-mix(in srgb, var(--a) 55%, transparent);border-radius:1px;
  transition:background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.cal-dia-tarea:hover{background:color-mix(in srgb, var(--a) 14%, transparent);color:var(--tx)}
.cal-dia-tarea--alta{border-left-color:#ff8d8d}
.cal-dia-tarea--baja{border-left-color:color-mix(in srgb, var(--tx-3) 70%, transparent)}
.cal-dia-mas{font:9px var(--f-mo);color:var(--tx-3);padding-left:5px}
.cal-dia--sobre{border-color:color-mix(in srgb, var(--a) 70%, var(--line-2));background:color-mix(in srgb, var(--a) 22%, var(--card-solid))}

/* menú: nota de una línea (diferencia Cancelar/Eliminar) y opción peligrosa */
.menu-nota{font-size:10.5px;color:var(--tx-3);line-height:1.4;padding:0 9px 7px;max-width:230px}
.menu button.peligro{color:#FFB3B3}
.menu button.peligro:hover,.menu button.peligro:focus-visible{background:rgba(255,107,107,.16);color:#FFB3B3}

/* aviso de error en la propia interfaz: sustituye a alert() */
.cal-aviso{
  position:fixed;left:50%;bottom:18px;z-index:90;max-width:min(420px,90vw);
  transform:translate(-50%,8px);opacity:0;pointer-events:none;
  padding:10px 14px;border-radius:10px;font-size:12px;color:var(--tx);
  background:color-mix(in srgb, var(--crit) 16%, var(--card-hi));
  border:1px solid color-mix(in srgb, var(--crit) 45%, var(--line-2));
  box-shadow:0 18px 50px -18px rgba(0,0,0,.9);
  transition:opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.cal-aviso.is-open{opacity:1;transform:translate(-50%,0);pointer-events:auto}

.cal-form-error{color:var(--crit);font-size:11px;margin:0}

/* bajo 560px: la rejilla de siete columnas se vuelve lista de días con tareas */
@media(max-width:560px){
  .cal-grid{grid-template-columns:1fr}
  .cal-wd{display:none}
  .cal-dia.cal-dia--pad{display:none}
  .cal-dia:not([data-has="1"]):not(.cal-dia--sel){display:none}
}