:root{
      /* Asistencia domain tokens (status colors) */
      --present-bg:#4A90E2; --absent-bg:#c5c5c5; --inactive-bg:rgba(0,0,0,0.02);
      --holiday-bg:#5f5f5f;
      --btn-asistencia-bg:#1abc9c; --btn-oral-bg:#e67e22; --btn-escrito-bg:#9b59b6;
      --btn-feriado-bg:var(--holiday-bg);
      --offline-bg:#fff8e1; --offline-border:#ffd54f;
      /* Generic tokens (--border, --radius, --ink, etc.) inherited from app.css */
    }
    *, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }
    /* body definido en app.css */
    /* Contenedor con el MISMO padding vertical/horizontal que el resto de páginas (.wrap en app.css) */
    .container{
      width:100%;
      max-width:var(--page-max, 1280px);
      margin:0 auto;
      padding: var(--page-pad-top, 16px) var(--page-pad, 14px) var(--page-pad-bottom, 28px);
    }
    h1{ text-align:center; margin-bottom:1rem; font-size:1.5rem; }

    .form-group{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:0.5rem; }
    .form-group input, .form-group button{ flex:1 1 200px; padding:8px 12px; border:1px solid var(--border); border-radius:12px; font-size:1rem; }
    .form-group button{ flex:0 1 120px; background:var(--present-bg); color:#fff; border:none; cursor:pointer; transition:opacity .2s; }
    .form-group button:disabled{ opacity:.6; cursor:not-allowed; }

    #status{ text-align:center; margin-bottom:.25rem; font-size:.9rem; min-height:1.2em; }
    #error{ color:var(--danger); text-align:center; margin-bottom:.5rem; min-height:1.2em; font-size:.9rem; }

    .net-banner{ display:none; margin:0 auto 8px; border-radius:8px; border:1px solid var(--offline-border); background:var(--offline-bg); padding:8px 12px; font-size:.9rem; }
    .net-banner.show{ display:block; }

    /* En el HTML la clase es calendar-wrap */
    .calendar-wrap{ overflow-x:auto; }
    .calendar{ width:100%; background:#fff; border-radius:12px; box-shadow:0 4px 16px rgba(0,0,0,.1); overflow:hidden; }
    .calendar-header{ display:flex; align-items:center; justify-content:space-between; padding:.5rem .75rem; background:var(--present-bg); color:#fff; font-size:.9rem; }
    .calendar-header button{ background:none; border:none; color:inherit; font-size:1rem; padding:.25rem; margin:0 .25rem; cursor:pointer; }
    .calendar-header h2{ margin:0; font-size:1rem; text-transform:capitalize; flex:1; text-align:center; }

    .weekdays, .days{ display:grid; grid-template-columns:repeat(5,1fr); }
    .weekdays{ background:rgba(240,244,248,1); padding:.5rem 0; text-align:center; font-weight:600; font-size:.9rem; }
    .days{ grid-auto-rows:minmax(96px,auto); }

    /* Desktop: celdas un poco más altas y texto más cómodo */
    @media (min-width:980px){
      .calendar-header{ padding:.65rem 1rem; font-size:1rem; }
      .calendar-header h2{ font-size:1.05rem; }
      .weekdays{ font-size:.95rem; }
      .days{ grid-auto-rows:minmax(120px,auto); }
      .btn-part{ font-size:.78rem; padding:5px 10px; }
      .date{ font-size:1rem; }
    }

    .day{ border:1px solid var(--border); padding:4px; position:relative; font-size:.8rem; display:flex; flex-direction:column; align-items:center; }
    .day.inactive{ background:var(--inactive-bg); color:rgba(0,0,0,.3); }
    .day.present{ background:#fff; }
    .day.absent{ background:#fafafa; }

    .date{ position:absolute; bottom:4px; right:4px; font-weight:600; font-size:.9rem; line-height:1; }
    .group-mini{ display:block; font-size:.7em; opacity:.9; margin-top:4px; font-weight:normal; text-align:center; }

    .btn-part{ display:inline-block; margin:4px auto 0; padding:4px 8px; font-size:.75rem; border:none; border-radius:4px; cursor:pointer; color:#fff; }
    .btn-asistencia{ background:var(--btn-asistencia-bg); }
    .btn-oral{ background:var(--btn-oral-bg); }
    .btn-escrito{ background:var(--btn-escrito-bg); }
    .btn-feriado{ background:var(--btn-feriado-bg); }
    .btn-ausente{ background:var(--absent-bg); color:#222; }

    #modalOverlay{ display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); align-items:center; justify-content:center; z-index:9999; }
    #modalContent{ background:#fff; border-radius:12px; padding:1rem; width:90%; max-width:500px; max-height:80%; overflow-y:auto; position:relative; }
    #modalClose{ position:absolute; top:8px; right:12px; background:none; border:none; font-size:1.2rem; cursor:pointer; }
    #modalBody p, #modalBody ul{ margin-bottom:.5em; }
    #modalBody ul{ padding-left:1.2em; }

    @media (max-width:800px){
      .calendar-header{ padding:.4rem .5rem; font-size:.85rem; }
      .calendar-header h2{ font-size:.9rem; }
      .weekdays{ font-size:.8rem; }
      .date{ font-size:.8rem; }
    }
    @media (max-width:520px){
      .form-group input, .form-group button{ flex:1 1 100%; }
      .calendar-header{ padding:.3rem .4rem; font-size:.85rem; }
      .calendar-header h2{ font-size:.85rem; }
      .weekdays{ font-size:.7rem; }
      .days{ grid-auto-rows:minmax(80px,auto); }
      .date{ font-size:.75rem; }
      .weekdays, .days{ grid-template-columns:repeat(5,20%); }
      .btn-part{ font-size:.6rem; padding:2px 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
      /* Solo celular: hacer más pequeño el texto A1/A2/A3 */
      .group-mini{
        font-size:.55em !important;
        line-height:1.05 !important;
        margin-top:2px !important;
      }

    }

    /* SKELETON / SHIMMER */
    .skeleton{ position:relative; overflow:hidden; background:#eef2f7; }
    .skeleton::after{ content:""; position:absolute; inset:0; transform:translateX(-100%); animation:shimmer 1.2s infinite; background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); }
    @keyframes shimmer{ 100%{ transform:translateX(100%); } }
    .day.skeleton .date{ opacity:0; }
    .skeleton-pill{ width:68px; height:24px; border-radius:999px; margin:6px auto 0; }
    .skeleton-mini{ width:44px; height:12px; border-radius:6px; margin:6px auto 0; }