:root{
  --hallel:#0b86c8;
  --hallel-600:#0879b5;
  --hallel-700:#075f8c;
  --hallel-50:#effaff;
  --hallel-100:#dff4fd;
  --navy:#10293b;
  --navy-2:#17384d;
  --text:#1d2a35;
  --muted:#6f7d87;
  --line:#e4ebef;
  --bg:#f4f8fa;
  --white:#ffffff;
  --danger:#b42318;
  --success:#18794e;
  --warning:#9a6700;
  --radius:20px;
  --radius-sm:12px;
  --shadow-sm:0 2px 8px rgba(17,55,77,.05);
  --shadow:0 14px 36px rgba(16,41,59,.08);
  --shadow-lg:0 30px 80px rgba(3,47,73,.16);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}

/* LOGIN */
.login-view{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:32px 20px;
  background:
    radial-gradient(circle at 12% 12%,rgba(255,255,255,.16),transparent 28%),
    radial-gradient(circle at 88% 88%,rgba(255,255,255,.10),transparent 26%),
    linear-gradient(145deg,#075f8c 0%,#0b86c8 54%,#37a9d8 100%);
  position:relative;
  overflow:hidden;
}
.login-view:before,
.login-view:after{
  content:"";
  position:absolute;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
}
.login-view:before{width:520px;height:520px;right:-190px;top:-190px}
.login-view:after{width:360px;height:360px;left:-150px;bottom:-170px}

.login-panel{
  position:relative;
  z-index:2;
  width:min(465px,100%);
  background:rgba(255,255,255,.985);
  border:1px solid rgba(255,255,255,.7);
  border-radius:30px;
  padding:38px 38px 28px;
  box-shadow:var(--shadow-lg);
}
.login-brand{text-align:center;margin-bottom:30px}
.brand-mark{
  width:92px;height:92px;margin:0 auto 18px;
  padding:7px;border-radius:26px;background:#fff;
  border:1px solid #e9f0f4;box-shadow:0 12px 28px rgba(8,121,181,.14)
}
.login-logo{width:100%;height:100%;object-fit:cover;border-radius:20px;display:block}
.eyebrow{
  display:inline-block;
  font-size:11px;
  letter-spacing:.13em;
  font-weight:800;
  color:var(--hallel-700);
  margin-bottom:8px
}
.login-brand h1{margin:0;font-size:31px;letter-spacing:-.035em;color:var(--navy)}
.login-brand p{margin:10px auto 0;max-width:330px;color:var(--muted);line-height:1.55;font-size:14px}

.login-form label,.field label{
  display:block;
  font-size:13px;
  font-weight:700;
  margin:14px 0 7px;
  color:#324652;
}
.login-form input,.field input,.field select,.field textarea,.toolbar input,.toolbar select{
  width:100%;
  border:1px solid #dce5ea;
  border-radius:13px;
  padding:12px 14px;
  background:#fbfdfe;
  color:var(--text);
  outline:none;
  transition:.18s ease;
}
.login-form input{padding:14px 15px}
.login-form input:focus,.field input:focus,.field select:focus,.field textarea:focus{
  background:#fff;border-color:var(--hallel);
  box-shadow:0 0 0 4px rgba(11,134,200,.10)
}
.field textarea{min-height:105px;resize:vertical}

.btn{
  border:0;border-radius:12px;padding:11px 16px;
  font-weight:700;transition:transform .16s ease,box-shadow .16s ease,background .16s ease
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--hallel),var(--hallel-600));color:#fff;box-shadow:0 7px 18px rgba(11,134,200,.18)}
.btn-primary:hover{box-shadow:0 10px 24px rgba(11,134,200,.24)}
.btn-secondary{background:#edf3f6;color:var(--navy)}
.btn-danger{background:#feeceb;color:var(--danger)}
.btn-success{background:#e5f7ee;color:var(--success)}
.btn-warning{background:#fff6db;color:var(--warning)}
.btn-small{padding:7px 10px;border-radius:9px;font-size:12px}
.login-submit{
  width:100%;margin-top:22px;padding:14px 17px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;gap:10px;font-size:14px
}
.login-submit span{font-size:17px}
.link-btn{
  border:0;background:transparent;color:var(--hallel-700);
  font-weight:700;margin-top:12px;width:100%;text-align:center;font-size:13px
}
.form-message{min-height:18px;margin:8px 0 0;color:var(--danger);font-size:12px;text-align:center}
.login-footer{
  border-top:1px solid #edf1f3;margin-top:20px;padding-top:18px;
  display:flex;justify-content:center;gap:8px;color:#8a969e;font-size:11px
}

/* APP SHELL */
.app-view{min-height:100vh;display:flex}
.sidebar{
  width:278px;min-height:100vh;position:sticky;top:0;
  display:flex;flex-direction:column;padding:22px 15px 18px;
  color:#fff;background:
    radial-gradient(circle at top right,rgba(11,134,200,.25),transparent 35%),
    linear-gradient(180deg,#10293b 0%,#0d2434 100%);
  box-shadow:10px 0 35px rgba(16,41,59,.08);
}
.sidebar-brand{
  display:flex;gap:12px;align-items:center;padding:8px 9px 25px;
  border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:16px
}
.sidebar-brand img{
  width:48px;height:48px;object-fit:cover;border-radius:14px;
  border:1px solid rgba(255,255,255,.16)
}
.sidebar-brand strong{display:block;font-size:15px;letter-spacing:-.01em}
.sidebar-brand small{display:block;opacity:.58;margin-top:4px;font-size:11px}
.sidebar nav{display:grid;gap:5px}
.nav-btn{
  background:transparent;border:0;color:#bdd0dc;text-align:left;
  padding:11px 13px;border-radius:11px;font-size:13px;font-weight:650;
  transition:.16s ease
}
.nav-btn:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-btn.active{
  background:linear-gradient(90deg,rgba(11,134,200,.24),rgba(11,134,200,.10));
  color:#fff;box-shadow:inset 3px 0 0 var(--hallel)
}
.logout-btn{
  margin-top:auto;border:1px solid rgba(255,255,255,.09);
  color:#d8e5ec;background:rgba(255,255,255,.045);
  border-radius:11px;padding:11px;font-weight:650
}

.main{flex:1;min-width:0;padding:28px 32px 46px;max-width:1700px}
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  gap:20px;margin-bottom:26px
}
.topbar h2{margin:0;font-size:26px;letter-spacing:-.035em;color:var(--navy)}
.topbar p{margin:5px 0 0;color:var(--muted);font-size:13px}
.user-chip{
  display:flex;align-items:center;gap:10px;background:#fff;
  padding:7px 11px;border-radius:14px;border:1px solid #e8eef1;box-shadow:var(--shadow-sm)
}
.user-chip strong,.user-chip small{display:block}
.user-chip strong{font-size:12px}
.user-chip small{color:var(--muted);margin-top:2px;font-size:10px}
.avatar{
  width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--hallel-100),#f4fbff);
  color:var(--hallel-700);display:grid;place-items:center;font-weight:800
}

/* PROFESSIONAL DASHBOARD */
.dashboard-hero{
  position:relative;overflow:hidden;border-radius:24px;padding:27px 28px;
  background:linear-gradient(120deg,#10293b 0%,#0b668f 58%,#0b86c8 100%);
  color:#fff;box-shadow:var(--shadow);margin-bottom:18px
}
.dashboard-hero:after{
  content:"";position:absolute;width:230px;height:230px;border-radius:50%;
  border:1px solid rgba(255,255,255,.12);right:-70px;top:-95px
}
.dashboard-hero .hero-kicker{font-size:11px;font-weight:800;letter-spacing:.12em;opacity:.72;text-transform:uppercase}
.dashboard-hero h2{margin:7px 0 5px;font-size:28px;letter-spacing:-.035em}
.dashboard-hero p{margin:0;color:rgba(255,255,255,.76);font-size:13px;line-height:1.5}
.dashboard-hero .hero-actions{margin-top:18px;display:flex;gap:8px;flex-wrap:wrap}
.hero-btn{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.10);color:#fff;padding:9px 13px;border-radius:11px;font-weight:700}
.hero-btn.primary{background:#fff;color:var(--hallel-700)}

.grid{display:grid;gap:16px}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{
  background:#fff;border-radius:var(--radius);padding:20px;
  border:1px solid #e7eef2;box-shadow:var(--shadow-sm)
}
.stat{position:relative;overflow:hidden;min-height:122px}
.stat:after{
  content:"";position:absolute;width:80px;height:80px;border-radius:50%;
  background:var(--hallel-50);right:-25px;top:-25px
}
.stat .label{position:relative;z-index:1;color:var(--muted);font-size:12px;font-weight:650}
.stat .value{position:relative;z-index:1;font-size:29px;font-weight:800;margin-top:9px;color:var(--navy);letter-spacing:-.04em}
.stat .hint{position:relative;z-index:1;margin-top:6px;font-size:11px;color:var(--hallel-700)}
.section-card{margin-top:16px}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:15px}
.section-head h3{margin:0;color:var(--navy);font-size:15px;letter-spacing:-.01em}
.actions{display:flex;gap:7px;flex-wrap:wrap}
.toolbar{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-bottom:14px}
.toolbar .field{min-width:180px}

/* TABLES */
.table-wrap{overflow:auto;border:1px solid #edf1f3;border-radius:14px}
table{width:100%;border-collapse:collapse}
th,td{padding:12px 13px;text-align:left;border-bottom:1px solid #edf1f3;white-space:nowrap}
th{
  background:#f8fafb;font-size:10px;color:#74828b;
  text-transform:uppercase;letter-spacing:.06em;font-weight:800
}
td{font-size:12px}
tbody tr{transition:.14s ease}
tbody tr:hover{background:#fbfdfe}
tbody tr:last-child td{border-bottom:0}
.empty{padding:28px;text-align:center;color:var(--muted);font-size:13px}

/* BADGES */
.badge,.audience-chip,.request-status{
  display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;
  font-size:10px;font-weight:800
}
.badge.active{background:#e5f7ee;color:#177149}
.badge.inactive{background:#feeceb;color:#a52a20}
.badge.admin{background:#eeeaff;color:#6842b8}
.badge.teacher{background:#e8f3ff;color:#1c63a8}
.badge.student{background:#e6f7fc;color:#11738e}
.badge.present{background:#e5f7ee;color:#177149}
.badge.absent{background:#feeceb;color:#a52a20}
.badge.late{background:#fff5dc;color:#8c5d00}
.badge.justified{background:#edf0ff;color:#4b57a4}

/* FORMS + MODALS */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.field.full{grid-column:1/-1}
.help{font-size:11px;color:var(--muted);margin-top:5px}
.modal-backdrop{
  position:fixed;inset:0;background:rgba(9,27,39,.55);backdrop-filter:blur(4px);
  display:grid;place-items:center;padding:20px;z-index:20
}
.modal{
  background:#fff;width:min(820px,100%);max-height:90vh;overflow:auto;
  border-radius:24px;padding:24px;border:1px solid rgba(255,255,255,.4);
  box-shadow:0 30px 90px rgba(6,30,44,.28)
}
.modal h3{margin:0 0 18px;color:var(--navy);font-size:20px;letter-spacing:-.025em}
.modal-footer{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}

/* STUDENT / GRADES */
.report-card{background:linear-gradient(135deg,#10293b,#0b86c8);color:#fff}
.report-card p{opacity:.82}
.metric-boxes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.metric-box,.summary-box,.att-card,.week-card{
  border:1px solid #e2edf2;background:linear-gradient(180deg,#fff,#fbfdfe);
  border-radius:16px;padding:15px
}
.metric-box .title,.summary-box small,.att-card span,.week-title{
  font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.055em;font-weight:800
}
.metric-box .number,.summary-box strong,.att-card strong{
  display:block;color:var(--navy);font-size:25px;font-weight:800;margin-top:6px;letter-spacing:-.035em
}
.grade-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px;margin-bottom:17px}
.grade-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.grade-card{
  border:1px solid #e2edf2;border-radius:16px;padding:15px;background:#fff
}
.grade-card .subject{font-weight:750;color:var(--navy);font-size:12px}
.grade-card .grade{font-size:29px;font-weight:800;color:var(--hallel);margin-top:8px}
.grade-card .obs{font-size:11px;color:var(--muted);margin-top:6px;white-space:normal;line-height:1.4}
.attendance-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.progress{height:8px;border-radius:999px;background:#e9eff2;overflow:hidden}
.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--hallel),#3ca9d4)}
.trimester-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.trimester-tab{
  border:1px solid #dfe8ed;background:#fff;color:var(--navy);
  padding:8px 12px;border-radius:999px;font-size:11px;font-weight:750
}
.trimester-tab.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.week-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.week-grade{font-size:23px;color:var(--hallel);font-weight:800;margin-top:5px}

/* ATTENDANCE QUICK */
.inline-attendance{display:flex;gap:4px;flex-wrap:wrap}
.inline-attendance button{
  min-width:28px;padding:5px 7px;border:0;border-radius:8px;font-size:10px;font-weight:800
}
.inline-attendance .p{background:#e5f7ee;color:#177149}
.inline-attendance .a{background:#feeceb;color:#a52a20}
.inline-attendance .t{background:#fff5dc;color:#8c5d00}
.inline-attendance .j{background:#edf0ff;color:#4b57a4}
.today-status{margin-top:5px;font-size:10px;color:var(--muted)}

/* NEWS / MEDIA */
.news-feed{display:grid;gap:14px}
.news-card{
  background:#fff;border:1px solid #e6edf1;border-radius:18px;
  overflow:hidden;box-shadow:var(--shadow-sm)
}
.news-card-body{padding:17px}
.news-card h3{margin:0;color:var(--navy);font-size:15px}
.news-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:7px 0 11px;color:var(--muted);font-size:10px}
.news-card p{white-space:pre-wrap;line-height:1.55;color:#495963;font-size:12px}
.news-media{width:100%;max-height:400px;object-fit:cover;background:#eaf3f8;display:block}
.news-video{width:100%;aspect-ratio:16/9;border:0;background:#000}
.news-file{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:12px;margin-top:12px;background:#fafcfd}
.audience-chip{background:var(--hallel-50);color:var(--hallel-700)}
.upload-preview{margin-top:9px;padding:11px;border:1px dashed #b8d7e6;border-radius:11px;background:#f8fcfe;color:var(--muted);font-size:11px}

/* CONFIG + MISC */
.notice{
  border:1px solid #cce9f7;background:var(--hallel-50);
  padding:13px 14px;border-radius:12px;color:#24596f;font-size:12px;line-height:1.5
}
.config-list{display:grid;gap:8px;margin-top:12px}
.config-item{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff
}
.config-item span{font-weight:650;font-size:12px}
.security-card{border:1px solid #dbeafe;background:#f8fcff;border-radius:16px;padding:18px}
.request-status.pending{background:#fff5dc;color:#8c5d00}
.request-status.approved{background:#e5f7ee;color:#177149}
.request-status.rejected{background:#feeceb;color:#a52a20}
.request-status.completed{background:#edf0ff;color:#4b57a4}
.report-list{display:grid;gap:8px}
.report-list-item{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff;font-size:12px}
.weight-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.student-header{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;flex-wrap:wrap}
.student-header h2{margin:0;color:var(--navy)}
.student-header p{margin:6px 0 0;color:var(--muted);font-size:12px}

/* RESPONSIVE */
@media(max-width:1180px){
  .grid-4,.metric-boxes,.attendance-cards{grid-template-columns:repeat(2,1fr)}
  .grade-summary{grid-template-columns:repeat(3,1fr)}
  .sidebar{width:240px}
}
@media(max-width:860px){
  .main{padding:22px}
  .grid-3,.grade-cards,.week-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .app-view{display:block}
  .sidebar{position:relative;width:100%;min-height:auto}
  .sidebar nav{grid-template-columns:repeat(2,1fr)}
  .logout-btn{margin-top:16px}
  .main{padding:18px 14px 32px}
  .topbar{margin-bottom:18px}
  .topbar h2{font-size:22px}
  .user-chip{display:none}
  .grid-4,.grid-3,.grid-2,.metric-boxes,.grade-summary,.grade-cards,.attendance-cards,.week-grid,.weight-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .field.full{grid-column:auto}
  .dashboard-hero{padding:22px}
  .dashboard-hero h2{font-size:24px}
  .login-panel{padding:31px 24px 24px;border-radius:25px}
}


/* ===== V7: AULA DIGITAL / TAREAS ===== */
.assignment-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.assignment-card{border:1px solid #e2ebf0;border-radius:18px;background:#fff;overflow:hidden;box-shadow:var(--shadow-sm)}
.assignment-card .cover{height:8px;background:linear-gradient(90deg,var(--hallel),#46b0da)}
.assignment-card-body{padding:17px}
.assignment-card h3{margin:0;color:var(--navy);font-size:15px}
.assignment-card p{font-size:12px;color:var(--muted);line-height:1.5;white-space:pre-wrap}
.assignment-meta{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0}
.assignment-chip{display:inline-flex;padding:5px 8px;border-radius:999px;background:#f0f6f9;color:#486371;font-size:10px;font-weight:750}
.assignment-chip.due{background:#fff5dc;color:#8c5d00}
.assignment-chip.done{background:#e5f7ee;color:#177149}
.assignment-chip.late{background:#feeceb;color:#a52a20}
.assignment-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:13px}
.submission-box{border:1px solid #dce8ee;background:#fbfdfe;border-radius:16px;padding:15px}
.submission-media{width:100%;max-height:360px;object-fit:contain;background:#f3f7f9;border-radius:12px;margin-top:10px}
.submission-video{width:100%;max-height:420px;border-radius:12px;margin-top:10px;background:#000}
.status-pill{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:10px;font-weight:800}
.status-pill.pending{background:#fff5dc;color:#8c5d00}
.status-pill.submitted{background:#e8f3ff;color:#1c63a8}
.status-pill.reviewed{background:#e5f7ee;color:#177149}
.status-pill.late{background:#feeceb;color:#a52a20}
.assignment-counts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.assignment-count{padding:13px;border:1px solid var(--line);border-radius:14px;background:#fff}
.assignment-count small{display:block;color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase}
.assignment-count strong{display:block;color:var(--navy);font-size:24px;margin-top:5px}
.file-drop{border:1px dashed #b9d4e0;background:#f8fcfe;border-radius:14px;padding:14px}
@media(max-width:1050px){.assignment-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.assignment-grid,.assignment-counts{grid-template-columns:1fr}}

/* =========================================
   PORTALES HALLEL - CHECKBOXES
   ========================================= */

#portalResourceForm input[type="checkbox"] {
  width: auto;
  min-width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 auto;
}

#portalResourceForm label:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: auto;
}

#portalResourceForm input[name="portalAccess"] {
  width: 18px;
  height: 18px;
}

/* =========================================
   PORTALES HALLEL - MODAL CON SCROLL
   ========================================= */

.modal-overlay {
  overflow-y: auto;
  padding: 24px 16px;
}

.modal {
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

#portalResourceForm {
  padding-bottom: 8px;
}

@media (max-width: 720px) {
  .modal-overlay {
    padding: 12px;
    align-items: flex-start;
  }

  .modal {
    width: 100%;
    max-height: calc(100vh - 24px);
    margin: 0;
  }
}

/* =========================================================
   CALENDARIO ACADÉMICO - ESCUELA HALLEL
   ========================================================= */

.calendar-card {
  padding: 22px;
  overflow-x: auto;
}

.calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.calendar-toolbar h3 {
  font-size: 24px;
  font-weight: 800;
}

.calendar-toolbar .actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}


/* =========================================================
   ENCABEZADO DE DÍAS
   ========================================================= */

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-width: 900px;

  border: 1px solid #dbe6ee;
  border-bottom: none;

  border-radius: 14px 14px 0 0;
  overflow: hidden;

  background: #f4f8fb;
}

.calendar-weekdays > div {
  padding: 12px 8px;
  text-align: center;

  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;

  color: #627486;

  border-right: 1px solid #dbe6ee;
}

.calendar-weekdays > div:last-child {
  border-right: none;
}


/* =========================================================
   CUADRÍCULA DEL CALENDARIO
   ========================================================= */

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));

  min-width: 900px;

  border-left: 1px solid #dbe6ee;
  border-top: 1px solid #dbe6ee;
}

.calendar-day {
  position: relative;

  min-height: 145px;
  padding: 10px;

  background: #ffffff;

  border-right: 1px solid #dbe6ee;
  border-bottom: 1px solid #dbe6ee;

  transition:
    background .15s ease,
    box-shadow .15s ease;
}

.calendar-day:hover {
  background: #f9fcfe;
}


/* Esquinas inferiores */

.calendar-grid .calendar-day:nth-last-child(7) {
  border-bottom-left-radius: 14px;
}

.calendar-grid .calendar-day:last-child {
  border-bottom-right-radius: 14px;
}


/* =========================================================
   NÚMERO DEL DÍA
   ========================================================= */

.calendar-day-number {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;

  margin-bottom: 8px;

  border-radius: 50%;

  font-size: 14px;
  font-weight: 800;

  color: #163247;
}


/* =========================================================
   DÍAS DE OTRO MES
   ========================================================= */

.calendar-day-outside {
  background: #f7f9fb;
}

.calendar-day-outside .calendar-day-number {
  color: #a4b0ba;
}

.calendar-day-outside .calendar-event {
  opacity: .55;
}


/* =========================================================
   DÍA ACTUAL
   ========================================================= */

.calendar-day-today {
  background:#f1faff;
}

.calendar-day-today .calendar-day-number {
  background: #078acb;
  color: #ffffff;

  box-shadow:
    0 4px 12px rgba(7, 138, 203, .25);
}


/* =========================================================
   EVENTOS
   ========================================================= */

.calendar-day-events {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.calendar-event {
  width: 100%;

  border: none;
  border-radius: 8px;

  padding: 7px 8px;

  background: #e8f6fd;
  color: #075d89;

  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;

  text-align: left;

  cursor: pointer;

  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  transition:
    background .15s ease,
    transform .15s ease,
    box-shadow .15s ease;
}

.calendar-event:hover {
  background: #d5effc;

  transform: translateY(-1px);

  box-shadow:
    0 4px 10px rgba(13, 111, 158, .12);
}


/* =========================================================
   CUANDO HAY MÁS DE 3 EVENTOS
   ========================================================= */

.calendar-more {
  padding: 3px 7px;

  font-size: 11px;
  font-weight: 700;

  color: #617687;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

  .calendar-card {
    padding: 18px;
  }

  .calendar-day {
    min-height: 125px;
  }

  .calendar-weekdays,
  .calendar-grid {
    min-width: 820px;
  }

}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 720px) {

  .calendar-card {
    padding: 14px;
  }

  .calendar-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .calendar-toolbar .actions {
    width: 100%;
  }

  .calendar-toolbar h3 {
    font-size: 21px;
  }

  .calendar-weekdays,
  .calendar-grid {
    min-width: 760px;
  }

  .calendar-day {
    min-height: 115px;
    padding: 8px;
  }

  .calendar-event {
    font-size: 11px;
  }

}

/* Días clicables del calendario para administración */

.calendar-day-admin {
  cursor: pointer;
}

.calendar-day-admin:hover {
  background: #f1faff;
  box-shadow: inset 0 0 0 2px rgba(7, 138, 203, 0.12);
}

.calendar-day-admin:active {
  background: #e8f6fd;
}
/* =========================================================
   CATEGORÍAS DEL CALENDARIO
   ========================================================= */

/* Académico */
.calendar-event-academic {
  background: #e8f6fd;
  color: #075d89;
}

/* Evaluaciones */
.calendar-event-evaluation {
  background: #fff0e8;
  color: #a94316;
}

/* Reuniones */
.calendar-event-meeting {
  background: #eeeafd;
  color: #5540a5;
}

/* Eventos especiales */
.calendar-event-event {
  background: #e8f8ef;
  color: #187549;
}

/* Feriados / vacaciones */
.calendar-event-holiday {
  background: #fff4d8;
  color: #8c6400;
}

/* Pagos / aportes */
.calendar-event-payment {
  background: #fdecef;
  color: #a32745;
}

/* General */
.calendar-event-general {
  background: #edf1f4;
  color: #405566;
}