/* calendario.css · vista calendario
   Estructura: .calhead > .cgrid [.cw, .cd > (.cd-num, .cd-evs, .dots)] > .legend > .calbelow
   Ajustes rápidos: */
:root{
  --cal-gap:4px;          /* espacio entre días */
  --cal-min-h:112px;      /* alto mínimo de un día en pantallas anchas */
  --cal-radius:12px
}

/* 1. Cabecera: mes y navegación */
.calhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.calhead h2{font-size:clamp(26px,5vw,38px);text-transform:capitalize}
.calsub{margin:4px 0 0;color:var(--muted);font-size:14px}
.calnav{display:flex;gap:8px}
.calnav .chip{width:var(--tap);padding:0;font-size:20px}

/* 2. Grilla de días */
.cgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--cal-gap)}
.cw{text-align:center;font-size:13px;color:var(--muted);padding:4px 0}
.cd{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:6px;min-width:0;min-height:var(--cal-min-h);padding:8px 6px 6px;text-align:left;cursor:pointer;
  border-radius:var(--cal-radius);border:1px solid var(--line);background:var(--surface);color:var(--ink);font:500 15px 'DM Sans',sans-serif}
.cd.off{visibility:hidden}
.cd:disabled{cursor:default;color:var(--muted)}
.cd.past{opacity:.55}
.cd.has{border-color:var(--muted)}
.cd.has .cd-num{font-weight:700}
.cd.today{outline:2px solid var(--sea);outline-offset:-1px;opacity:1}
.cd[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.cd[aria-pressed="true"] .ev{background:#1c1c22;color:var(--ink)}
.cd[aria-pressed="true"] .more{color:var(--bg)}
@media (hover:hover){.cd.has:not([aria-pressed="true"]):hover{border-color:var(--ink)}}

/* 3. Contenido de un día (pantallas anchas): hasta 3 líneas; con 1 o 2 eventos los títulos pueden ocupar 2 líneas */
.cd-evs{display:flex;flex-direction:column;gap:3px;width:100%;min-width:0}
.ev{display:block;width:100%;font-size:12px;line-height:1.25;padding:2px 5px;border-radius:5px;border-left:3px solid var(--c);background:color-mix(in srgb,var(--c) 24%,transparent);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cd[data-n="1"] .ev,.cd[data-n="2"] .ev{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;white-space:normal}
.more{font-size:12px;color:var(--muted);font-weight:700;padding-left:2px}

/* 4. Puntos de color (celulares) */
.dots{display:none;align-items:center;gap:3px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.dots .plus{font-size:12px;line-height:1;color:var(--muted)}
.cd[aria-pressed="true"] .dots .plus{color:var(--bg)}

/* 5. Leyenda de categorías del mes */
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:14px 0 0;padding:0;list-style:none;color:var(--muted);font-size:13px}
.legend li{display:inline-flex;align-items:center;gap:6px}
.legend i{width:8px;height:8px;border-radius:50%;background:var(--c)}

/* 6. Lista de eventos del día o del mes */
.calbelow{margin-top:24px;scroll-margin-top:12px}
.calbelow-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.calbelow h3{font-size:22px}

/* 7. Celulares: días cuadrados con puntos */
@media (max-width:700px){
  :root{--cal-gap:3px}
  .cd{aspect-ratio:1/1;min-height:0;justify-content:space-between;padding:6px;gap:0}
  .cd-evs{display:none}
  .dots{display:flex}
  .cd-num{font-size:15px;line-height:1}
  .calbelow-head{flex-wrap:wrap}
}