/* calendar_paged_month_v2.css — Desktop month-by-month calendar (keeps mobile list) */

/* Mobile/tablet: keep the existing vertical list */
@media (max-width: 979px){
  .cal-month-ui{ display:none !important; }
}

/* Desktop: show month UI, hide the list */
@media (min-width: 980px){
  #calendarList{ display:none !important; }
  #calendarEnd{ display:none !important; }

  .cal-month-ui{
    display:block;
    margin: 12px;
    margin-bottom: 0;
  }

  .cal-monthbar{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid rgba(148,163,184,.18);
    background: rgba(15,23,42,.45);
  }
  .cal-monthbar .cal-title{
    font-weight: 950;
    letter-spacing: -.01em;
    font-size: 14px;
    text-transform: capitalize;
  }
  .cal-monthbtn{
    width: 42px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(148,163,184,.20);
    background: rgba(15,23,42,.55);
    color: rgba(229,231,235,.92);
    cursor:pointer;
    font-weight: 950;
    display:grid;
    place-items:center;
    line-height: 1;
    transition: transform .06s ease, filter .15s ease, border-color .15s ease;
  }
  .cal-monthbtn:hover{ filter: brightness(1.08); border-color: rgba(148,163,184,.36); }
  .cal-monthbtn:active{ transform: translateY(1px); }
  .cal-monthbtn:disabled{ opacity: .40; cursor: not-allowed; filter:none; }

  .cal-weekdays{
    display:grid;
    grid-template-columns: repeat(7, minmax(0,1fr));
    gap: 10px;
    margin: 10px 0 8px;
    padding: 0 4px;
    color: rgba(229,231,235,.60);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
    user-select:none;
  }
  .cal-weekdays span{ display:flex; align-items:center; justify-content:center; height: 22px; }

  .cal-monthgrid{
    display:grid;
    grid-template-columns: repeat(7, minmax(0,1fr));
    gap: 10px;
    padding-bottom: 12px;
  }

  .cal-cell{
    height: 74px;
    border-radius: 16px;
    border: 1px solid rgba(148,163,184,.16);
    background: rgba(15,23,42,.40);
    position: relative;
    overflow:hidden;
  }
  .cal-cell.off{
    opacity: .35;
    background: rgba(15,23,42,.22);
    border-color: rgba(148,163,184,.10);
  }

  .cal-day{
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 10px 10px;
    text-align:left;
    cursor:pointer;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
  }
  .cal-day:disabled{ cursor: not-allowed; opacity: 1; }

  .cal-num{
    font-weight: 950;
    font-size: 18px;
    color: rgba(229,231,235,.92);
    letter-spacing: -.02em;
  }
  .cal-mini{
    align-self:flex-start;
    font-size: 12px;
    font-weight: 900;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,.16);
    background: rgba(0,0,0,.16);
    color: rgba(229,231,235,.78);
  }

  .cal-mark{
    position:absolute;
    right: 10px;
    bottom: 10px;
    width: 28px;
    height: 28px;
    border-radius: 12px;
    display:grid;
    place-items:center;
    border: 1px solid rgba(148,163,184,.18);
    background: rgba(0,0,0,.18);
    color: rgba(229,231,235,.92);
    font-weight: 950;
    font-size: 14px;
    pointer-events:none;
  }

  /* ===== State colors (semantic) =====
     Verde: completado en día
     Amarillo: completado en recuperar
     Rojo: intentado sin completar
  */
  .cal-cell.s-done{
    border-color: rgba(34,197,94,.30);
    background: rgba(34,197,94,.06);
  }
  .cal-cell.s-done .cal-mark{
    border-color: rgba(34,197,94,.38);
    background: rgba(34,197,94,.12);
  }

  .cal-cell.s-recover{
    border-color: rgba(250,204,21,.34);
    background: rgba(250,204,21,.06);
  }
  .cal-cell.s-recover .cal-mark{
    border-color: rgba(250,204,21,.42);
    background: rgba(250,204,21,.12);
  }

  .cal-cell.s-attempt{
    border-color: rgba(239,68,68,.30);
    background: rgba(239,68,68,.05);
  }
  .cal-cell.s-attempt .cal-mark{
    border-color: rgba(239,68,68,.38);
    background: rgba(239,68,68,.12);
  }

  /* Today highlight */
  .cal-cell.today{
    border-color: rgba(96,165,250,.40);
    background: rgba(96,165,250,.06);
  }
  .cal-cell.today .cal-mini{
    border-color: rgba(96,165,250,.30);
    background: rgba(96,165,250,.12);
    color: rgba(229,231,235,.92);
  }
}