/* ==========================================================================
   AULA VIRTUAL — Hoja de estilos única para todas las plantillas
   Inspirada en la plataforma Moodle (tema Boost)
   ========================================================================== */

:root{
  /* Paleta */
  --color-primary:        #f98012;
  --color-primary-dark:   #cf6a0a;
  --color-primary-light:  #fef1e2;
  --color-navbar-bg:      #1c1d21;
  --color-navbar-bg-2:    #2a2b30;
  --color-navbar-text:    #f4f5f7;
  --color-bg:             #f6f7fb;
  --color-card-bg:        #ffffff;
  --color-border:         #e1e3e8;
  --color-text:           #3a3c42;
  --color-text-muted:     #6c7078;
  --color-link:           #0f6cbf;
  --color-link-hover:     #0a4d8a;
  --color-success:        #2e7d32;
  --color-success-bg:     #e8f5e9;
  --color-warning:        #b8590a;
  --color-warning-bg:     #fef1e2;
  --color-danger:         #c62828;
  --color-danger-bg:      #fdecea;
  --color-info:           #0f6cbf;
  --color-info-bg:        #e8f2fc;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(20,20,30,.06), 0 1px 1px rgba(20,20,30,.04);
  --shadow-md: 0 4px 12px rgba(20,20,30,.08);
  --shadow-lg: 0 12px 32px rgba(20,20,30,.14);

  --font-body: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --nav-height: 56px;
  --subnav-height: 46px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--color-text);
  background:var(--color-bg);
  font-size:14.5px;
  line-height:1.5;
}
img{ max-width:100%; display:block; }
a{ color:var(--color-link); text-decoration:none; }
a:hover{ color:var(--color-link-hover); text-decoration:underline; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5{ margin:0 0 .5em; font-weight:600; color:#232428; }
p{ margin:0 0 1em; }
button{ font-family:inherit; }
:focus-visible{ outline:3px solid #0f6cbf88; outline-offset:2px; }

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ==========================================================================
   Layout general
   ========================================================================== */
.page-wrapper{ min-height:100vh; display:flex; flex-direction:column; }
.page-main{ flex:1; }
.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 20px;
}
.content-area{ padding:24px 10px 60px; }

/* ==========================================================================
   Barra superior (navbar)
   ========================================================================== */
.navbar{
  background:var(--color-navbar-bg);
  color:var(--color-navbar-text);
  height:var(--nav-height);
  display:flex;
  align-items:center;
  position:sticky;
  top:0;
  z-index:200;
  box-shadow:var(--shadow-sm);
}
.navbar-inner{
  max-width:1180px;
  margin:0 auto;
  width:100%;
  padding:0 20px;
  display:flex;
  align-items:center;
  gap:20px;
}
.navbar-toggle{
  display:none;
  background:transparent;
  border:0;
  color:var(--color-navbar-text);
  font-size:20px;
  cursor:pointer;
  padding:6px;
}
.navbar-brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  font-weight:700;
  font-size:18px;
  letter-spacing:.2px;
  white-space:nowrap;
}
.navbar-brand:hover{ text-decoration:none; color:#fff; }
.navbar-brand .brand-mark{
  width:30px; height:30px; border-radius:8px;
  background:var(--color-primary);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:800; color:#1c1d21;
}
.navbar-links{
  display:flex;
  align-items:center;
  gap:4px;
  flex:1;
}
.navbar-links a{
  color:#c9cbd1;
  padding:8px 12px;
  border-radius:var(--radius-sm);
  font-size:14px;
  font-weight:500;
}
.navbar-links a:hover{ color:#fff; background:rgba(255,255,255,.08); text-decoration:none; }
.navbar-links a.is-active{ color:#fff; background:rgba(249,128,18,.18); }

.navbar-search{
  display:flex;
  align-items:center;
  background:rgba(255,255,255,.09);
  border-radius:20px;
  padding:6px 14px;
  gap:8px;
  width:220px;
  transition:width .15s ease, background .15s ease;
}
.navbar-search:focus-within{ background:rgba(255,255,255,.16); width:260px; }
.navbar-search input{
  background:transparent;
  border:0;
  outline:0;
  color:#fff;
  font-size:13.5px;
  width:100%;
}
.navbar-search input::placeholder{ color:#a9abb3; }
.navbar-search svg{ flex:none; opacity:.8; }

.navbar-actions{
  display:flex;
  align-items:center;
  gap:6px;
}
.icon-btn{
  position:relative;
  width:36px; height:36px;
  border-radius:50%;
  border:0;
  background:transparent;
  color:#e6e7ea;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.icon-btn:hover{ background:rgba(255,255,255,.1); }
.icon-btn .badge-dot{
  position:absolute; top:4px; right:5px;
  min-width:15px; height:15px; padding:0 3px;
  border-radius:50%;
  background:var(--color-primary);
  color:#1c1d21;
  font-size:9.5px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--color-navbar-bg);
}

.navbar-user{
  display:flex; align-items:center; gap:8px;
  background:transparent; border:0; cursor:pointer;
  padding:4px 8px 4px 4px; border-radius:20px; color:#fff;
}
.navbar-user:hover{ background:rgba(255,255,255,.08); }
.avatar{
  border-radius:50%;
  background:var(--color-primary);
  color:#1c1d21;
  font-weight:700;
  display:flex; align-items:center; justify-content:center;
  flex:none;
}
.avatar-28{ width:28px; height:28px; font-size:11px; }
.avatar-36{ width:36px; height:36px; font-size:13px; }
.avatar-56{ width:56px; height:56px; font-size:19px; }
.avatar-96{ width:96px; height:96px; font-size:32px; }
.navbar-user .chev{ opacity:.75; }

/* Dropdown genérico */
.dropdown{ position:relative; }
.dropdown-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:230px;
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);
  padding:8px;
  display:none;
  z-index:300;
  color:var(--color-text);
}
.dropdown-menu.is-open{ display:block; animation:dropIn .12s ease; }
@keyframes dropIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } }
.dropdown-header{
  padding:10px 12px 8px;
  border-bottom:1px solid var(--color-border);
  margin-bottom:6px;
}
.dropdown-header .dh-name{ font-weight:700; font-size:14px; color:#232428; }
.dropdown-header .dh-email{ font-size:12px; color:var(--color-text-muted); }
.dropdown-menu a, .dropdown-menu button.dd-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px;
  border-radius:var(--radius-sm);
  font-size:13.5px;
  color:var(--color-text);
  width:100%;
  background:transparent; border:0; text-align:left; cursor:pointer;
}
.dropdown-menu a:hover, .dropdown-menu button.dd-item:hover{
  background:var(--color-primary-light); color:var(--color-primary-dark); text-decoration:none;
}
.dropdown-menu .dd-divider{ height:1px; background:var(--color-border); margin:6px 4px; }
.notif-item{ display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:var(--radius-sm); }
.notif-item:hover{ background:var(--color-primary-light); }
.notif-item .n-dot{ width:8px; height:8px; border-radius:50%; background:var(--color-primary); margin-top:6px; flex:none; }
.notif-item .n-text{ font-size:13px; }
.notif-item .n-time{ font-size:11.5px; color:var(--color-text-muted); }

/* ==========================================================================
   Sub-navegación (dentro de un curso)
   ========================================================================== */
.subnav{
  background:#fff;
  border-bottom:1px solid var(--color-border);
  position:sticky;
  top:var(--nav-height);
  z-index:150;
}
.subnav-inner{
  max-width:1180px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; gap:4px; overflow-x:auto;
}
.subnav a{
  padding:14px 14px;
  font-size:14px; font-weight:600;
  color:var(--color-text-muted);
  border-bottom:3px solid transparent;
  white-space:nowrap;
}
.subnav a:hover{ color:var(--color-text); text-decoration:none; }
.subnav a.is-active{ color:var(--color-primary-dark); border-bottom-color:var(--color-primary); }

/* Migas de pan */
.breadcrumb{
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  font-size:12.5px; color:var(--color-text-muted);
  padding:14px 0 4px;
}
.breadcrumb a{ color:var(--color-text-muted); }
.breadcrumb a:hover{ color:var(--color-primary-dark); }
.breadcrumb .sep{ opacity:.6; }
.breadcrumb .current{ color:var(--color-text); font-weight:600; }

/* ==========================================================================
   Botones
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 18px;
  border-radius:var(--radius-sm);
  font-size:13.5px; font-weight:600;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover{ text-decoration:none; }
.btn-primary{ background:var(--color-primary); color:#fff; }
.btn-primary:hover{ background:var(--color-primary-dark); color:#fff; }
.btn-outline{ background:#fff; border-color:var(--color-border); color:var(--color-text); }
.btn-outline:hover{ border-color:var(--color-primary); color:var(--color-primary-dark); }
.btn-secondary{ background:#eef0f3; color:var(--color-text); }
.btn-secondary:hover{ background:#e2e4e9; }
.btn-danger{ background:var(--color-danger); color:#fff; }
.btn-danger:hover{ background:#a41f1f; }
.btn-success{ background:var(--color-success); color:#fff; }
.btn-success:hover{ background:#255f28; }
.btn-sm{ padding:6px 12px; font-size:12.5px; }
.btn-lg{ padding:12px 24px; font-size:15px; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }
.btn-icon{ padding:8px; border-radius:50%; }

/* ==========================================================================
   Tarjetas / Cards
   ========================================================================== */
.card{
  background:var(--color-card-bg);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.card-header{
  padding:16px 20px;
  border-bottom:1px solid var(--color-border);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.card-header h2, .card-header h3{ margin:0; font-size:16px; }
.card-body{ padding:20px; }
.card-footer{ padding:14px 20px; border-top:1px solid var(--color-border); }

/* ==========================================================================
   VISTA LOGIN
   ========================================================================== */
.login-shell{
  min-height:100vh;
  display:flex;
  background:linear-gradient(135deg,#1c1d21 0%,#2a2b30 45%, var(--color-primary-dark) 130%);
}
.login-aside{
  flex:1.1;
  display:flex; flex-direction:column; justify-content:center;
  padding:60px 70px;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.login-aside::after{
  content:"";
  position:absolute; right:-120px; bottom:-120px;
  width:360px; height:360px; border-radius:50%;
  background:radial-gradient(circle, rgba(249,128,18,.35), transparent 70%);
}
.login-aside .brand-mark{ width:46px; height:46px; border-radius:12px; font-size:22px; margin-bottom:26px; }
.login-aside h1{ color:#fff; font-size:34px; max-width:420px; line-height:1.25; }
.login-aside p{ color:#c9cbd1; max-width:400px; font-size:15px; }
.login-aside .login-feature{ display:flex; gap:12px; align-items:flex-start; margin-top:22px; max-width:400px; }
.login-aside .login-feature svg{ flex:none; margin-top:2px; color:var(--color-primary); }
.login-aside .login-feature strong{ display:block; color:#fff; font-size:14px; }
.login-aside .login-feature span{ color:#a9abb3; font-size:13px; }

.login-panel{
  flex:1;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  padding:40px;
}
.login-form-wrap{ width:100%; max-width:370px; }
.login-form-wrap h2{ font-size:22px; margin-bottom:6px; }
.login-form-wrap .sub{ color:var(--color-text-muted); margin-bottom:26px; font-size:13.5px; }
.login-form-wrap .alert-custom{
  margin:0 0 18px;
  padding:10px 12px;
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  font-size:13px;
}
.login-form-wrap .msg-error{ color:#a42828; background:#fff0f0; border-color:#f4c7c7; }
.login-form-wrap .msg-bloqueado{ color:#7b5200; background:#fff6df; border-color:#f1d28e; }
.login-form-wrap .msg-ok{ color:#176b43; background:#e8f7ef; border-color:#b9e4cc; }

.form-group{ margin-bottom:18px; }
.form-group label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:#232428; }

        .form-group label i {
            margin-right: 6px;
            color: #667eea;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 10px 12px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s ease;
            font-family: inherit;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        .form-group textarea {
            resize: vertical;
            min-height: 80px;
        }
.form-control{
  width:100%;
  padding:9px 12px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  font-size:14px;
  background:#fbfbfc;
  transition:border-color .12s ease, background .12s ease;
}
.form-control:focus{ outline:0; border-color:var(--color-primary); background:#fff; box-shadow:0 0 0 3px var(--color-primary-light); }
.form-hint{ font-size:12px; color:var(--color-text-muted); margin-top:5px; }
.form-row-between{ display:flex; align-items:center; justify-content:space-between; font-size:13px; margin-bottom:18px; }
.checkbox-line{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--color-text); }
.login-divider{ display:flex; align-items:center; gap:12px; margin:22px 0; color:var(--color-text-muted); font-size:12px; }
.login-divider::before,.login-divider::after{ content:""; flex:1; height:1px; background:var(--color-border); }
.login-footer-links{ margin-top:22px; text-align:center; font-size:13px; color:var(--color-text-muted); }

/* ==========================================================================
   VISTA MIS CURSOS (dashboard)
   ========================================================================== */
.page-title-row{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-bottom:18px;
}
.page-title-row h1{ font-size:24px; margin:0; }
.page-title-row .muted{ color:var(--color-text-muted); font-size:13.5px; margin-top:4px; }

.filter-bar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-bottom:18px;
}
.chip{
  padding:7px 14px;
  border-radius:20px;
  border:1px solid var(--color-border);
  background:#fff;
  font-size:13px; font-weight:600; color:var(--color-text-muted);
  cursor:pointer;
}
.chip.is-active{ background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
.chip:hover{ text-decoration:none; }

.course-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(270px, 1fr));
  gap:20px;
}
.course-card{
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .15s ease, transform .15s ease;
  display:flex; flex-direction:column;
}
.course-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.course-card .cc-banner{
  height:88px;
  position:relative;
  background:linear-gradient(135deg, #667eea, #4a5aa8);
}

.course-card .cc-banner-primary{
  background:linear-gradient(135deg, #6a1fb0, #4a1580);
}
.course-card .cc-banner-success{
  background:linear-gradient(135deg, #0f6cbf, #0a4d8a);
}
.course-card .cc-banner-warning{
  background:linear-gradient(135deg, #c62828, #8e1f1f);
}
.course-card .cc-banner-info{
  background:linear-gradient(135deg, #f98012, #cf6a0a);
}

.course-card .cc-cat{
  position:absolute; top:10px; left:12px;
  background:rgba(0,0,0,.28); color:#fff;
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  padding:3px 9px; border-radius:12px;
}
/* Bloque de metadatos (docente / sede / sigla) */
.course-card .cc-meta{
    margin-bottom:14px;
    display:flex;
    flex-direction:column;
    gap:4px;
}
.course-card .cc-meta-item{
    font-size:12.5px;
    color:var(--color-text-muted);
    display:flex;
    align-items:center;
    gap:7px;
}
.course-card .cc-meta-item i{
    width:14px;
    text-align:center;
    color:var(--color-primary);
    opacity:.85;
    font-size:11px;
}

.course-card .cc-footer{
    margin-top:12px;
    margin-bottom:12px;
}

.course-card .cc-enter-btn{
    margin-top:auto;
    font-size:13px;
    gap:8px;
}

.course-card .cc-body{ padding:16px; flex:1; display:flex; flex-direction:column; }
.course-card h3{ font-size:15px; margin-bottom:4px; }
.course-card h3 a{ color:#232428; }
.course-card .cc-teacher{ font-size:12.5px; color:var(--color-text-muted); margin-bottom:12px; }
.progress-track{
  height:7px; border-radius:4px; background:#eef0f3; overflow:hidden; margin-bottom:6px;
}
.progress-fill{ height:100%; background:var(--color-primary); border-radius:4px; }
.progress-label{ font-size:11.5px; color:var(--color-text-muted); display:flex; justify-content:space-between; }
.cc-footer{ margin-top:14px; display:flex; align-items:center; justify-content:space-between; }
.cc-footer .badge{ font-size:10.5px; }

.badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px;
  border-radius:12px;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.3px;
}
.badge-success{ background:var(--color-success-bg); color:var(--color-success); }
.badge-warning{ background:var(--color-warning-bg); color:var(--color-warning); }
.badge-danger{ background:var(--color-danger-bg); color:var(--color-danger); }
.badge-info{ background:var(--color-info-bg); color:var(--color-info); }
.badge-neutral{ background:#eef0f3; color:var(--color-text-muted); }

/* ==========================================================================
   Layout con barra lateral (curso, calificaciones...)
   ========================================================================== */
.layout-with-side{
  display:grid;
  grid-template-columns: 250px 1fr;
  gap:22px;
  align-items:start;
}
.layout-with-side > *{
  min-width: 0;
}
.side-panel{
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:16px;
  position:sticky;
  top:calc(var(--nav-height) + var(--subnav-height) + 16px);
}
.side-panel h4{ font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--color-text-muted); margin-bottom:10px; }
.side-nav a{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:var(--radius-sm);
  font-size:13.5px; color:var(--color-text); margin-bottom:2px;
}
.side-nav a:hover{ background:var(--color-primary-light); color:var(--color-primary-dark); text-decoration:none; }
.side-nav a.is-active{ background:var(--color-primary-light); color:var(--color-primary-dark); font-weight:700; }
.side-nav .count{ margin-left:auto; font-size:11px; color:var(--color-text-muted); background:#eef0f3; padding:1px 7px; border-radius:10px; }

/* ==========================================================================
   Acordeón de dos niveles — sidebar de "Contenido" del curso
   Nivel 1: "📘 Contenido"  →  Nivel 2: cada unidad/tema
   Animación por max-height (calculado con JS vía scrollHeight)
   ========================================================================== */
.side-nav-accordion-item{ list-style:none; margin-bottom:2px; }

.side-nav-toggle{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:transparent; border:0; text-align:left; cursor:pointer;
  padding:9px 10px; border-radius:var(--radius-sm);
  font-size:13.5px; font-weight:700; color:var(--color-text); font-family:inherit;
}
.side-nav-toggle:hover{ background:var(--color-primary-light); color:var(--color-primary-dark); }
.side-nav-accordion-item.is-open > .side-nav-toggle{
  background:var(--color-primary-light); color:var(--color-primary-dark);
}
.side-nav-chev{
  flex:none; font-size:11px; color:var(--color-text-muted);
  transition:transform .3s ease;
}
.side-nav-accordion-item.is-open > .side-nav-toggle .side-nav-chev{ transform:rotate(180deg); }

.side-nav-panel{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
}
.unidad-index-list{ padding:4px 0 2px 6px; }

.unidad-index-item{ list-style:none; margin-bottom:1px; }
.unidad-index-header{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:transparent; border:0; text-align:left; cursor:pointer;
  padding:8px 10px; border-radius:var(--radius-sm);
  font-size:12.5px; color:var(--color-text); font-family:inherit;
}
.unidad-index-header:hover{ background:#f2f4f7; color:var(--color-primary-dark); }
.unidad-index-item.is-open > .unidad-index-header{
  background:var(--color-primary-light); color:var(--color-primary-dark); font-weight:700;
}
.unidad-index-chev{
  flex:none; font-size:10px; color:var(--color-text-muted);
  transition:transform .3s ease;
}
.unidad-index-item.is-open .unidad-index-chev{ transform:rotate(180deg); }

.unidad-index-panel{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
}
.unidad-index-panel-inner{ padding:2px 0 6px; }

.unidad-index-sub-link{
  display:flex; align-items:center; gap:8px;
  padding:7px 10px 7px 22px;
  font-size:12px; color:var(--color-text-muted);
  border-radius:var(--radius-sm);
}
.unidad-index-sub-link:hover{ background:#f2f4f7; color:var(--color-primary-dark); text-decoration:none; }

/* ==========================================================================
   Vista de curso — secciones/temas
   ========================================================================== */
.course-hero{
  background:linear-gradient(120deg,#232428, #2a2b30 60%, var(--color-primary-dark));
  border-radius:var(--radius-lg);
  color:#fff;
  padding:26px 28px;
  margin-bottom:22px;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.course-hero .ch-cat{ color:#f4c48e; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.course-hero h1{ color:#fff; font-size:24px; margin-bottom:8px; max-width:600px; }
.course-hero p{ color:#c9cbd1; max-width:560px; margin-bottom:0; font-size:13.5px; }
.course-hero .ch-meta{ display:flex; gap:18px; flex-wrap:wrap; margin-top:14px; }
.course-hero .ch-meta div{ font-size:12.5px; color:#c9cbd1; }
.course-hero .ch-meta strong{ display:block; color:#fff; font-size:15px; }
.course-hero .ch-progress{ min-width:150px; }

.topic-section{
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  margin-bottom:16px;
  overflow:hidden;
}
.topic-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  background:#fafbfc;
  border-bottom:1px solid var(--color-border);
  cursor:pointer;
}
.topic-header h3{ font-size:14.5px; margin:0; display:flex; align-items:center; gap:8px; }
.topic-header .topic-index{
  width:26px; height:26px; border-radius:7px;
  background:var(--color-primary-light); color:var(--color-primary-dark);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800;
}
.topic-header .chev{ transition:transform .15s ease; color:var(--color-text-muted); }
.topic-section.is-collapsed .topic-header .chev{ transform:rotate(-90deg); }
.topic-section.is-collapsed .topic-body{ display:none; }
.topic-body{ padding:6px 10px; }



.a-icon.type-tarea{ background:#e8f2fc; color:#0f6cbf; }
.a-icon.type-foro{ background:#fef1e2; color:#b8590a; }
.a-icon.type-recurso{ background:#eef0f3; color:#54575e; }
.a-icon.type-cuestionario{ background:#f1e8fc; color:#6a1fb0; }
.a-icon.type-video{ background:#fdecea; color:#c62828; }

.activity-row {
    display: grid;
    grid-template-columns: 44px 1fr auto auto;
    grid-template-rows: auto;
    gap: 8px 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: transparent;
    transition: background 0.15s ease;
}
/* ==========================================================================
   ACTIVITY ROW - VERSIÓN FLEXBOX
   ========================================================================== */

.activity-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: transparent;
    transition: background 0.15s ease;
}

/* ESTE ES EL CAMBIO CLAVE - Asegura que el contenido-info ocupe todo el espacio disponible */
.activity-row .contenido-info,
.activity-row > div:not(.a-icon):not(.a-status):not(.content-actions) {
    flex: 1 1 200px;
    min-width: 0;
}

/* Para el caso específico de la segunda estructura */
.activity-row > div:has(.a-title) {
    flex: 1 1 200px;
    min-width: 0;
}

.activity-row .a-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    font-size: 18px;
}

.activity-row .a-title {
    font-size: 13.5px;
    font-weight: 600;
    color: #232428;
}

.activity-row .a-meta {
    font-size: 11.5px;
    color: var(--color-text-muted);
}

.activity-row .a-status {
    flex: 0 0 auto;
    /* El margin-left: auto empujará el estado hacia la derecha */
    margin-left: auto;
}

.activity-row .content-actions {
    display: flex;
    gap: 4px;
    flex: 0 0 auto;
}

/* Solo aplicar margin-left: auto al estado cuando NO hay botones de acción */
/* Esta es la solución más limpia usando la pseudoclase :has() */
.activity-row:not(:has(.content-actions)) .a-status {
    margin-left: auto;
}

/* Alternativa: si el contenedor del estado tiene un hermano que es el contenedor de acciones */
.activity-row .a-status:last-child {
    margin-left: auto;
}

/* ============================================
   SOLUCIÓN ALTERNATIVA CON CLASE ESPECÍFICA
   ============================================ */

/* Si prefieres usar una clase específica para la segunda estructura */
.activity-row.no-actions .a-status {
    margin-left: auto;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 860px) {
    .activity-row .a-icon {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .activity-row .contenido-info,
    .activity-row > div:not(.a-icon):not(.a-status):not(.content-actions) {
        flex: 1 1 150px;
    }
}

@media (max-width: 480px) {
    .activity-row {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 12px;
        border-bottom: 1px solid var(--color-border);
        border-radius: 0;
    }

    .activity-row:last-child {
        border-bottom: 0;
    }

    .activity-row .a-icon {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        font-size: 14px;
        align-self: flex-start;
    }

    .activity-row .contenido-info,
    .activity-row > div:not(.a-icon):not(.a-status):not(.content-actions) {
        flex: 1 1 auto;
        order: 2;
    }

    .activity-row .a-status {
        order: 3;
        align-self: flex-start;
        margin-left: 0 !important; /* Resetear margin-left en móvil */
    }

    .activity-row .content-actions {
        order: 4;
        justify-content: stretch;
        margin-top: 4px;
        padding-top: 8px;
        border-top: 1px solid var(--color-border);
    }

    .activity-row .content-actions a,
    .activity-row .content-actions button {
        flex: 1;
        justify-content: center;
        padding: 8px;
    }
}

/* ==========================================================================
   Tablas
   ========================================================================== */
.table-wrap{ overflow-x:auto; }
table.data-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.data-table th{
  text-align:left; padding:11px 14px; background:#fafbfc;
  border-bottom:2px solid var(--color-border);
  font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--color-text-muted);
  white-space:nowrap;
}
table.data-table td{ padding:11px 14px; border-bottom:1px solid var(--color-border); vertical-align:middle; }
table.data-table tbody tr:hover{ background:#fafbfc; }
table.data-table tfoot td{ font-weight:700; background:#fafbfc; }
.cell-user{ display:flex; align-items:center; gap:10px; }
.cell-user .u-name{ font-weight:600; color:#232428; font-size:13.5px; }
.cell-user .u-sub{ font-size:11.5px; color:var(--color-text-muted); }

/* ==========================================================================
   Vista tarea / actividad
   ========================================================================== */
.activity-head{
  display:flex; align-items:flex-start; gap:16px; margin-bottom:18px; flex-wrap:wrap;
}
.activity-head .a-icon{ width:52px; height:52px; border-radius:12px; font-size:22px; }
.activity-head h1{ font-size:21px; margin-bottom:4px; }
.activity-head .muted{ color:var(--color-text-muted); font-size:13px; }

.info-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px;
  margin-bottom:4px;
}
.info-item{ }
.info-item .i-label{ font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--color-text-muted); margin-bottom:4px; }
.info-item .i-value{ font-size:14.5px; font-weight:700; color:#232428; }

.upload-zone{
  border:2px dashed var(--color-border);
  border-radius:var(--radius-md);
  padding:30px 20px;
  text-align:center;
  color:var(--color-text-muted);
  background:#fafbfc;
  cursor:pointer;
  transition:border-color .12s ease, background .12s ease;
}
.upload-zone:hover, .upload-zone.is-drag{ border-color:var(--color-primary); background:var(--color-primary-light); color:var(--color-primary-dark); }
.upload-zone svg{ margin:0 auto 10px; }
.upload-zone strong{ color:#232428; }

.file-chip{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  margin-top:10px;
  font-size:13px;
}
.file-chip .f-icon{ width:30px; height:30px; border-radius:6px; background:var(--color-info-bg); color:var(--color-info); display:flex; align-items:center; justify-content:center; flex:none; }
.file-chip .f-name{ font-weight:600; color:#232428; flex:1; }
.file-chip .f-size{ color:var(--color-text-muted); font-size:11.5px; }
.file-chip .f-remove{ background:transparent; border:0; color:var(--color-text-muted); cursor:pointer; }
.file-chip .f-remove:hover{ color:var(--color-danger); }

.timeline{ border-left:2px solid var(--color-border); margin-left:8px; padding-left:20px; }
.timeline-item{ position:relative; padding-bottom:20px; }
.timeline-item::before{
  content:""; position:absolute; left:-26px; top:2px;
  width:11px; height:11px; border-radius:50%; background:var(--color-primary);
  border:2px solid #fff; box-shadow:0 0 0 2px var(--color-border);
}
.timeline-item .t-title{ font-weight:700; font-size:13.5px; }
.timeline-item .t-time{ font-size:11.5px; color:var(--color-text-muted); margin-bottom:4px; }

/* ==========================================================================
   Vista foro
   ========================================================================== */
.forum-topic{
  display:flex; gap:14px;
  padding:16px 18px;
  border-bottom:1px solid var(--color-border);
}
.forum-topic:hover{ background:#fafbfc; }
.forum-topic:last-child{ border-bottom:0; }
.forum-topic .ft-body{ flex:1; min-width:0; }
.forum-topic h3{ font-size:14.5px; margin-bottom:3px; }
.forum-topic .ft-meta{ font-size:12px; color:var(--color-text-muted); }
.forum-topic .ft-excerpt{ font-size:13px; color:var(--color-text-muted); margin-top:6px; max-width:560px; }
.forum-topic .ft-stats{ text-align:center; flex:none; width:70px; }
.forum-topic .ft-stats strong{ display:block; font-size:15px; color:#232428; }
.forum-topic .ft-stats span{ font-size:10.5px; color:var(--color-text-muted); text-transform:uppercase; }

.post{
  display:flex; gap:14px;
  padding:18px 0;
  border-bottom:1px solid var(--color-border);
}
.post:last-child{ border-bottom:0; }
.post .post-avatar{ flex:none; }
.post .post-body{ flex:1; min-width:0; }
.post-header{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.post-header .p-name{ font-weight:700; font-size:13.5px; color:#232428; }
.post-header .p-role{ font-size:10.5px; }
.post-header .p-time{ font-size:11.5px; color:var(--color-text-muted); margin-left:auto; }
.post-content{ font-size:13.5px; color:var(--color-text); line-height:1.65; }
.post-actions{ display:flex; gap:14px; margin-top:10px; }
.post-actions button{
  background:transparent; border:0; color:var(--color-text-muted);
  font-size:12px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:5px;
}
.post-actions button:hover{ color:var(--color-primary-dark); }
.reply-box{ margin-top:16px; padding-top:16px; border-top:1px solid var(--color-border); }
textarea.form-control{ resize:vertical; min-height:100px; font-family:inherit; }

/* ==========================================================================
   Vista evaluación / calificaciones
   ========================================================================== */
.grade-summary{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; margin-bottom:22px;
}
.grade-stat{
  background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-lg);
  padding:18px; text-align:center;
}
.grade-stat .g-value{ font-size:26px; font-weight:800; color:var(--color-primary-dark); }
.grade-stat .g-label{ font-size:11.5px; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:.4px; margin-top:4px; }

.grade-bar-row{ display:flex; align-items:center; gap:10px; }
.grade-bar-row .gb-track{ flex:1; height:8px; background:#eef0f3; border-radius:4px; overflow:hidden; }
.grade-bar-row .gb-fill{ height:100%; border-radius:4px; }

/* ==========================================================================
   Vista perfil
   ========================================================================== */
.profile-header{
  background:linear-gradient(120deg,#2a2b30, var(--color-primary-dark));
  border-radius:var(--radius-lg);
  padding:30px 30px 0;
  color:#fff;
  overflow:hidden;
  position:relative;
  margin-bottom:30px;
}
.profile-header-inner{ display:flex; align-items:flex-end; gap:20px; padding-bottom:20px; flex-wrap:wrap; }
.profile-header .avatar-96{ border:4px solid #fff; }
.profile-header h1{ color:#fff; font-size:22px; margin-bottom:2px; }
.profile-header .p-role{ color:#f4c48e; font-size:13px; font-weight:600; }
.profile-header .p-actions{ margin-left:auto; padding-bottom:6px; }

.profile-tabs{ display:flex; gap:4px; padding:0 30px; margin-top:10px; }
.profile-tabs a{ padding:12px 6px; color:rgba(255,255,255,.75); font-size:13.5px; font-weight:600; border-bottom:3px solid transparent; }
.profile-tabs a:hover{ color:#fff; text-decoration:none; }
.profile-tabs a.is-active{ color:#fff; border-color:var(--color-primary); }

.stat-strip{ display:flex; gap:0; background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:22px; }
.stat-strip > div{ flex:1; text-align:center; padding:18px; border-right:1px solid var(--color-border); }
.stat-strip > div:last-child{ border-right:0; }
.stat-strip strong{ display:block; font-size:22px; color:#232428; }
.stat-strip span{ font-size:11.5px; color:var(--color-text-muted); text-transform:uppercase; }

.detail-list dt{ font-size:11px; text-transform:uppercase; color:var(--color-text-muted); letter-spacing:.4px; margin-top:14px; }
.detail-list dt:first-child{ margin-top:0; }
.detail-list dd{ margin:3px 0 0; font-size:14px; color:#232428; font-weight:600; }

/* ==========================================================================
   Vistas del docente
   ========================================================================== */
.stat-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:22px; }
.stat-card{
  background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-lg);
  padding:18px; display:flex; align-items:center; gap:14px;
}
.stat-card .sc-icon{ width:44px; height:44px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex:none; font-size:19px; }
.stat-card .sc-value{ font-size:21px; font-weight:800; color:#232428; line-height:1.1; }
.stat-card .sc-label{ font-size:12px; color:var(--color-text-muted); }

.toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-bottom:16px;
}
.toolbar-left{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.search-input{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--color-border); border-radius:var(--radius-sm);
  padding:8px 12px; background:#fff; min-width:220px;
}
.search-input input{ border:0; outline:0; font-size:13px; width:100%; }
.select-control{
  border:1px solid var(--color-border); border-radius:var(--radius-sm);
  padding:8px 10px; font-size:13px; background:#fff; color:var(--color-text);
}

.grading-layout{ display:grid; grid-template-columns: 260px 1fr 320px; gap:20px; align-items:start; }
.grading-list{ background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden; position:sticky; top:calc(var(--nav-height) + 16px); max-height:calc(100vh - var(--nav-height) - 32px); overflow-y:auto; }
.grading-list-item{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-bottom:1px solid var(--color-border); cursor:pointer;
}
.grading-list-item:hover{ background:#fafbfc; }
.grading-list-item.is-active{ background:var(--color-primary-light); }
.grading-list-item .gl-name{ font-size:13px; font-weight:600; color:#232428; }
.grading-list-item .gl-sub{ font-size:11px; color:var(--color-text-muted); }

.submission-viewer{ background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-lg); }
.submission-viewer .sv-header{ padding:16px 20px; border-bottom:1px solid var(--color-border); display:flex; align-items:center; gap:14px; justify-content:space-between; flex-wrap:wrap; }
.submission-viewer .sv-body{ padding:20px; }
.doc-preview{
  border:1px solid var(--color-border); border-radius:var(--radius-md);
  background:#fafbfc; padding:20px;
  font-size:13.5px; color:var(--color-text); line-height:1.7;
}

.grading-panel{ background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:18px; position:sticky; top:calc(var(--nav-height) + 16px); }
.grading-panel h3{ font-size:14px; margin-bottom:14px; }
.rubric-row{ padding:12px 0; border-bottom:1px solid var(--color-border); }
.rubric-row:last-child{ border-bottom:0; }
.rubric-row .r-title{ font-size:13px; font-weight:700; margin-bottom:6px; display:flex; justify-content:space-between; }
.rubric-row .r-scale{ display:flex; gap:6px; }
.rubric-row .r-scale button{
  flex:1; padding:6px 0; border-radius:6px; border:1px solid var(--color-border);
  background:#fff; font-size:12px; font-weight:700; cursor:pointer; color:var(--color-text-muted);
}
.rubric-row .r-scale button.is-selected{ background:var(--color-primary); border-color:var(--color-primary); color:#fff; }

/* ==========================================================================
   Alertas
   ========================================================================== */
.alert{
  display:flex; gap:12px; align-items:flex-start;
  padding:13px 16px; border-radius:var(--radius-md);
  font-size:13.5px; margin-bottom:18px; border:1px solid transparent;
}
.alert-info{ background:var(--color-info-bg); color:#0a4d8a; border-color:#c9e2f7; }
.alert-warning{ background:var(--color-warning-bg); color:var(--color-warning); border-color:#f7dcb8; }
.alert-success{ background:var(--color-success-bg); color:var(--color-success); border-color:#c5e3c7; }
.alert-danger{ background:var(--color-danger-bg); color:var(--color-danger); border-color:#f5c6c6; }

/* ==========================================================================
   Modal
   ========================================================================== */
.modal-overlay{
  position:fixed; inset:0; background:rgba(20,20,25,.5);
  display:none; align-items:center; justify-content:center; z-index:500; padding:20px;
}
.modal-overlay.is-open{ display:flex; }
.modal-header{ padding:14px 18px; border-bottom:1px solid var(--color-border); display:flex; justify-content:space-between; align-items:center; }
.modal-header h3{ margin:0; font-size:15.5px; }
.modal-close{ background:transparent; border:0; cursor:pointer; color:var(--color-text-muted); font-size:18px; }
.modal-body{ padding:16px 18px; font-size:13.5px; }
.modal-footer{ padding:12px 18px; border-top:1px solid var(--color-border); display:flex; justify-content:flex-end; gap:10px; }

/* ==========================================================================
   Pie de página
   ========================================================================== */
.site-footer{
  background:#1c1d21; color:#a9abb3; padding:24px 0; margin-top:40px; font-size:12.5px; text-align:center;
}
.site-footer a{ color:#c9cbd1; }

/* ==========================================================================
   Utilidades
   ========================================================================== */
.flex{ display:flex; flex-wrap:wrap; }
.flex-between{ display:flex; align-items:center; justify-content:space-between; }
.flex-gap-8{ gap:8px; } .flex-gap-10{ gap:10px; } .flex-gap-14{ gap:14px; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.text-muted{ color:var(--color-text-muted); }
.text-center{ text-align:center; }
.w-100{ width:100%; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:980px){
  .layout-with-side{ grid-template-columns:1fr; }
  .side-panel{ position:static; }
  .grading-layout{ grid-template-columns:1fr; }
  .grading-list{ position:static; max-height:none; }
  .grading-panel{ position:static; }
}
@media (max-width:860px){
  .navbar-search{ display:none; }
  .login-aside{ display:none; }
}
@media (max-width:720px){
  .navbar-toggle{ display:flex; }
  .navbar-links{
    position:fixed; top:var(--nav-height); left:0; right:0; bottom:0;
    background:var(--color-navbar-bg);
    flex-direction:column; align-items:stretch; padding:14px;
    transform:translateX(-100%); transition:transform .2s ease;
    overflow-y:auto;
  }
  .navbar-links.is-open{ transform:translateX(0); }
  .navbar-links a{ padding:13px 14px; font-size:15px; }
  .course-grid{ grid-template-columns:1fr; }
  .stat-strip{ flex-wrap:wrap; }
  .stat-strip > div{ flex:1 1 50%; border-bottom:1px solid var(--color-border); }
}

@media (max-width:480px){
  .container{ padding:0 14px; }
  .content-area{ padding:20px 8px 50px; }

  /* Botones de acción (Atrás/Excel/PDF) se apilan a ancho completo */
  .page-title-row .flex{ width:100%; }
  .page-title-row .flex .btn{ flex:1 1 auto; justify-content:center; }

  /* Sidebar de filtro: evita que la etiqueta empuje el contador fuera de vista */
  .side-panel{ padding:12px; }
  .side-nav a{
    font-size:12.5px;
    gap:6px;
    white-space:normal;
  }
  .side-nav .count{ flex:none; }

  /* Tabla: reduce el padding de celdas para aprovechar el ancho */
  table.data-table th, table.data-table td{ padding:8px 10px; font-size:12px; }
}

/* ==========================================================================
   ESTILOS DE UNIDADES Y ÁREAS (Vista de curso)
   ========================================================================== */

/* Cabecera de unidad */
.unit-heading { margin-bottom:22px; }
.unit-title {
    font-size:19px; 
    font-weight:700; 
    color:#1a1a2e;
    margin:0 0 6px; 
    display:flex; 
    align-items:center; 
    gap:8px;
}
.unit-description {
    font-size:13.5px; 
    color:var(--color-text-muted); 
    margin:0; 
    line-height:1.5;
}

/* Áreas - SIN INTERACCIÓN (todo abierto) */
.topic-header {
    cursor: default;
    user-select: none;
    background: var(--area-color, #fafbfc);
}
.topic-header h3 {
    display:flex; 
    align-items:center; 
    gap:8px;
    font-size:14.5px;
}
.topic-header .area-count {
    font-weight:500; 
    font-size:11.5px; 
    opacity:.85; 
    margin-left:2px;
}
.topic-header .chev {
    display: none !important;
}

/* Cuerpo siempre visible */
.topic-body {
    max-height: none !important;
    overflow: visible !important;
    padding: 16px 0 !important;
}
.topic-section .topic-body {
    transition: none !important;
}

/* Estado vacío */
.empty-state {
    padding:24px 20px;
    text-align:center;
    color:var(--color-text-muted);
    font-size:13px;
    font-style:italic;
}

/* ==========================================================================
   SIDEBAR - Acordeón de unidades (versión mejorada)
   ========================================================================== */

/* Sobrescribimos los estilos del sidebar para usar grid en vez de max-height */
.unidad-index-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .35s ease;
}
.unidad-index-item.is-open .unidad-index-panel {
    grid-template-rows: 1fr;
}
.unidad-index-panel-inner {
    overflow: hidden;
    min-height: 0;
}

/* Mejoramos el estilo de los sub-links */
.unidad-index-sub-link {
    display:flex; 
    align-items:center; 
    gap:8px;
    padding:7px 10px 7px 28px;
    font-size:12.5px; 
    color:var(--color-text-muted);
    border-radius:var(--radius-sm);
    cursor:pointer;
}
.unidad-index-sub-link:hover { 
    background:#f2f4f7; 
    color:var(--color-primary-dark); 
    text-decoration:none;
}
.unidad-index-sub-link i { 
    width:14px; 
    text-align:center; 
    opacity:.8; 
}
.unidad-index-sub-link .sn-count { 
    margin-left:auto; 
    font-size:11px; 
    opacity:.7; 
}

/* ==========================================================================
   ASISTENCIAVER
   ========================================================================== */

    .attendance-summary-empty{
        padding:40px 20px;
        text-align:center;
        color:var(--color-text-muted);
        font-size:13.5px;
    }

    /* Grid de 4 columnas para el historial de asistencia */
    .attendance-history-grid{
        display:grid;
        grid-template-columns:repeat(4, 1fr);
        gap:12px;
        padding:20px;
    }
    .attendance-history-item{
        background:#fff;
        border:1px solid var(--color-border);
        border-radius:var(--radius-md);
        padding:14px 10px;
        text-align:center;
        transition:box-shadow .15s ease, transform .15s ease;
    }
    .attendance-history-item:hover{ box-shadow:var(--shadow-sm); transform:translateY(-1px); }
    .attendance-history-item .ahi-date{
        font-size:12px; font-weight:700; color:#232428; margin-bottom:8px;
    }
    .attendance-history-item .ahi-icon{ font-size:22px; margin-bottom:6px; line-height:1; }

    .attendance-legend{
        display:flex; gap:16px; flex-wrap:wrap;
        padding:0 20px 16px;
        font-size:12px; color:var(--color-text-muted);
    }
    .attendance-legend span{ display:inline-flex; align-items:center; gap:5px; }

    @media (max-width:860px){
        .attendance-history-grid{ grid-template-columns:repeat(2, 1fr); }
    }
    @media (max-width:480px){
        .attendance-history-grid{ grid-template-columns:1fr; }
    }
/* Imagen de referencia dentro de una tarjeta (ej. instrucciones de tarea) */
.instruction-image{
    display:block;
    width:80%;
    height:70vh;
    margin:16px auto;
    border-radius:var(--radius-md);
    overflow:hidden;
    border:1px solid var(--color-border);
    box-shadow:var(--shadow-sm);
    transition:box-shadow .15s ease;
}
.instruction-image:hover{ box-shadow:var(--shadow-md); }
.instruction-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
}

.resource-link{
    display:flex; align-items:center; gap:10px;
    padding:12px 14px;
    border:1px solid var(--color-border);
    border-radius:var(--radius-sm);
    margin-top:10px;
    font-size:13px;
    transition:border-color .12s ease, background .12s ease;
}
.resource-link:hover{
    border-color:var(--color-primary);
    background:var(--color-primary-light);
    text-decoration:none;
}
.resource-link .f-icon{
    width:30px; height:30px; border-radius:6px;
    background:var(--color-info-bg); color:var(--color-info);
    display:flex; align-items:center; justify-content:center; flex:none;
}
.resource-link .f-name{ font-weight:600; color:#232428; flex:1; }
.resource-link:hover .f-name{ color:var(--color-primary-dark); }
.resource-link .f-open{ font-size:11.5px; font-weight:700; color:var(--color-text-muted); flex:none; }
.resource-link:hover .f-open{ color:var(--color-primary-dark); }
.horario{
        color: var(--color-text-muted);
        background-color: white;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 9px 18px;
        border-radius: var(--radius-sm);
        font-size: 13.5px;
        font-weight: 600;
        border: 1px solid transparent;
        cursor: pointer;
        transition: background .12s ease, border-color .12s ease, color .12s ease;
    }

/* ==========================================================================
   1) REEMPLAZA tu bloque ".modal" actual (el que dice:
      "background:#fff; border-radius:var(--radius-lg); width:100%;
      max-width:440px; ..." ) por este par de reglas.
      Ahora .modal es el OVERLAY de pantalla completa y
      .modal-content es la tarjeta blanca de adentro.
   ========================================================================== */
.modal{
  display:none;
  position:fixed; inset:0;
  background:rgba(20,20,25,.5);
  align-items:center; justify-content:center;
  z-index:500; padding:20px;
}
.modal-content{
  background:#fff; border-radius:var(--radius-lg); width:100%; max-width:440px;
  box-shadow:var(--shadow-lg); overflow:hidden; animation:dropIn .15s ease;
  max-height:90vh; overflow-y:auto;
}
.modal-content.modal-lg{ max-width:640px; }
/* ==========================================================================
   Selects dentro de modales
   ========================================================================== */
.modal-body select{
  width:100%;
  padding:9px 30px 9px 12px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  font-size:13.5px;
  font-family:inherit;
  color:var(--color-text);
  background-color:#fbfbfc;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c7078' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:14px;
  transition:border-color .12s ease, background-color .12s ease;
}
.modal-body select:focus{
  outline:0;
  border-color:var(--color-primary);
  background-color:#fff;
  box-shadow:0 0 0 3px var(--color-primary-light);
}
.modal-body select option{
  color:var(--color-text);
  padding:6px;
}

/* ==========================================================================
   2) Agrega todo esto al final de styles.css
   ========================================================================== */

/* Botones pequeños de los modales (Cancelar / Guardar / etc.) */
.btn-small{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 16px; border-radius:var(--radius-sm);
  font-size:13px; font-weight:600; color:#fff; border:0;
  cursor:pointer; transition:opacity .12s ease;
}
.btn-small:hover{ opacity:.88; }

/* ==========================================================================
   Layout principal del panel de docente (sidebar + contenido)
   ========================================================================== */
.main-layout{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap:22px;
  align-items:start;
}
.main-layout > *{ min-width:0; }

.sidebar-index{
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:16px;
  position:sticky;
  top:calc(var(--nav-height) + var(--subnav-height) + 16px);
}
.sidebar-index h4{
  font-size:11.5px; text-transform:uppercase; letter-spacing:.5px;
  color:var(--color-text-muted); margin-bottom:10px;
}

.add-unit-btn{
  width:100%;
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--color-primary); color:#fff; border:0;
  padding:10px 12px; border-radius:var(--radius-sm);
  font-size:13px; font-weight:700; cursor:pointer; margin-bottom:16px;
  transition:background .12s ease;
}
.add-unit-btn:hover{ 
  background:var(--color-primary-dark); 
  color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(249, 128, 18, 0.3);
}

/* Filas de unidad dentro del sidebar del docente (con editar/eliminar) */
.sidebar-index .unidad-index-item{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 10px; border-radius:var(--radius-sm);
  font-size:12.5px; color:var(--color-text); cursor:pointer;
  transition:background .12s ease;
}
.sidebar-index .unidad-index-item:hover{ background:#f2f4f7; }
.sidebar-index .unidad-index-item.active{
  background:var(--color-primary-light); color:var(--color-primary-dark); font-weight:700;
}
.sidebar-index .unidad-index-item span{
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.unidad-index-actions{
  display:flex; gap:4px; flex:none; opacity:0; transition:opacity .12s ease;
}
.sidebar-index .unidad-index-item:hover .unidad-index-actions{ opacity:1; }
.unidad-index-actions button{
  width:24px; height:24px; border-radius:6px; border:0; background:transparent;
  color:var(--color-text-muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:11px;
}
.unidad-index-actions button:hover{ background:#e2e4e9; color:var(--color-text); }

.no-units-message{
  text-align:center; padding:60px 20px; color:var(--color-text-muted);
}
.no-units-message i{ font-size:36px; margin-bottom:12px; display:block; }

/* Encabezado de la unidad activa (título + botones de acción) */
.unidad-view-header{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-bottom:20px;
}
/* ==========================================================================
   UNIDAD VIEW ACTIONS - VERSIÓN APILADA EN MÓVIL
   ========================================================================== */

.unidad-view-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
    justify-content: flex-end;
}

/* Tablets */
@media (max-width: 860px) {
    .unidad-view-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .btn-add-content,
    .btn-edit-unidad,
    .btn-delete-unidad {
        flex: 1;
        justify-content: center;
        min-height: 40px;
    }
}

/* Móviles - botones apilados verticalmente */
@media (max-width: 480px) {
    .unidad-view-actions {
        flex-direction: column;
        width: 100%;
        gap: 6px;
    }

    .btn-add-content,
    .btn-edit-unidad,
    .btn-delete-unidad {
        width: 100%;
        justify-content: center;
        padding: 10px;
        font-size: 13px;
        min-height: 44px;
    }

    .btn-add-content i,
    .btn-edit-unidad i,
    .btn-delete-unidad i {
        font-size: 14px;
    }
}

.btn-add-content, .btn-edit-unidad, .btn-delete-unidad{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:var(--radius-sm);
  font-size:12.5px; font-weight:600; border:1px solid var(--color-border);
  background:#fff; color:var(--color-text); cursor:pointer;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
}
.btn-add-content{ background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
.btn-add-content:hover{ background:var(--color-primary-dark); border-color:var(--color-primary-dark); }
.btn-edit-unidad:hover{ border-color:var(--color-primary); color:var(--color-primary-dark); }
.btn-delete-unidad:hover{ border-color:var(--color-danger); color:var(--color-danger); }

/* Botones editar/eliminar por fila de contenido dentro de cada área */
.content-actions{ display:flex; gap:4px; flex:none; }
.btn-edit-content, .btn-del-content{
  width:28px; height:28px; border-radius:6px; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:12px;
  background:#eef0f3; color:var(--color-text-muted);
}
.btn-edit-content:hover{ background:var(--color-info-bg); color:var(--color-info); }
.btn-del-content:hover{ background:var(--color-danger-bg); color:var(--color-danger); }

/* Tabla de horarios (modal "Gestionar horarios") */
.horarios-table{ width:100%; border-collapse:collapse; font-size:13px; }
.horarios-table th{
  text-align:left; padding:10px 12px; background:#fafbfc;
  border-bottom:2px solid var(--color-border);
  font-size:11px; text-transform:uppercase; color:var(--color-text-muted);
}
.horarios-table td{ padding:10px 12px; border-bottom:1px solid var(--color-border); }
.radio-group{ display:flex; gap:14px; justify-content:center; }
.radio-option{ display:flex; align-items:center; gap:6px; font-size:12.5px; cursor:pointer; }
.radio-option input{ cursor:pointer; }

/* Responsive: sidebar del docente en una sola columna en pantallas chicas */
@media (max-width:980px){
  .main-layout{ grid-template-columns:1fr; }
  .sidebar-index{ position:static; }
}

    .student-card{
        background:#fff;
        border:1px solid var(--color-border);
        border-radius:var(--radius-lg);
        padding:16px;
        cursor:pointer;
        position:relative;
        transition:box-shadow .15s ease, border-color .15s ease, transform .15s ease;
    }
    .student-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
    .student-card.present{ border-color:var(--color-success); background:var(--color-success-bg); }
    .student-card.tarde{ border-color:var(--color-warning); background:var(--color-warning-bg); }
    .student-card.justificado{ border-color:var(--color-info); background:var(--color-info-bg); }
    .student-card.absent{ border-color:var(--color-border); }

    .student-card .sc-check{
        position:absolute; top:12px; right:12px;
        font-size:18px; opacity:.2; color:var(--color-text-muted);
    }
    .student-card.present .sc-check{ opacity:1; color:var(--color-success); }

    .student-name{ font-size:14px; font-weight:700; color:#232428; margin-bottom:6px; padding-right:26px; }
    .student-meta{ font-size:12px; color:var(--color-text-muted); margin-bottom:2px; }
    .student-date{
        font-size:11px; color:var(--color-text-muted);
        margin-top:10px; padding-top:8px; border-top:1px solid var(--color-border);
    }

    .attendance-grid{
        display:grid;
        grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
        gap:16px;
    }

    /* Overlay de carga (mismo lenguaje visual que el resto del sitio) */
    .loading-overlay-page{
        position:fixed; inset:0; z-index:600;
        background:rgba(28,29,33,.45);
        display:flex; align-items:center; justify-content:center;
        color:#fff; font-size:14px; font-weight:600;
    }

    /* Notificaciones flotantes (toast) */
    .toast{
        position:fixed; top:20px; right:20px; z-index:700;
        padding:13px 18px; border-radius:var(--radius-md);
        font-size:13.5px; font-weight:600; color:#fff;
        box-shadow:var(--shadow-lg);
        animation:toastIn .25s ease;
        max-width:320px;
    }
    @keyframes toastIn{ from{ transform:translateX(100%); opacity:0; } to{ transform:translateX(0); opacity:1; } }
    .toast-success{ background:var(--color-success); }
    .toast-error{ background:var(--color-danger); }
    .toast-info{ background:var(--color-info); }

    /* Chips compactos para recursos del foro (enlace / imagen / pdf) */
.forum-resources{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:10px;
}
.resource-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 12px;
    border-radius:20px;
    border:1px solid var(--color-border);
    background:#fff;
    font-size:12.5px;
    font-weight:600;
    color:var(--color-text-muted);
    cursor:pointer;
}
.resource-chip:hover{
    border-color:var(--color-primary);
    color:var(--color-primary-dark);
    text-decoration:none;
    background:var(--color-primary-light);
}
/* ==========================================================================
   AGREGAR AL FINAL de public/css/styles.css
   Libro de notas del docente — tabla matriz editable (estudiante x contenido)
   ========================================================================== */
.gradebook-wrap{ overflow:auto; border-radius:var(--radius-lg); }
table.gradebook-table{ width:100%; border-collapse:collapse; font-size:13px; }
table.gradebook-table th, table.gradebook-table td{
  border-bottom:1px solid var(--color-border);
  padding:8px 10px;
  text-align:center;
  white-space:nowrap;
}
table.gradebook-table thead th{
  background:#fafbfc;
  font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--color-text-muted);
  border-bottom:2px solid var(--color-border);
}

/* Columna de estudiante fija al hacer scroll horizontal */
.gradebook-student-cell{
  position:sticky; left:0; z-index:2;
  background:#fff;
  text-align:left; white-space:normal;
  min-width:170px;
  border-right:1px solid var(--color-border);
}
thead .gradebook-student-cell{ background:#fafbfc; z-index:3; }
.gradebook-student-name{ font-weight:700; color:#232428; font-size:13px; }
.gradebook-student-meta{ font-size:11px; color:var(--color-text-muted); margin-top:2px; }

/* Encabezado de cada contenido (badge de tipo + título + puntaje máx) */
.gradebook-contenido-heading .badge{ margin-bottom:4px; }
.gradebook-contenido-heading div.gc-titulo{
  font-size:12px; font-weight:600; color:#232428;
  max-width:140px; margin:0 auto; overflow:hidden; text-overflow:ellipsis;
}
.gradebook-contenido-heading small{ display:block; color:var(--color-text-muted); font-size:10.5px; margin-top:2px; }

/* Columnas de promedios/total */
.gradebook-prom-col{ background:#fafbfc; font-weight:700; }

/* Input de nota dentro de cada celda */
.nota-input{
  width:64px;
  text-align:center;
  padding:6px 4px;
}
.nota-input.is-empty{ color:var(--color-text-muted); }
.nota-input.is-saving{ opacity:.6; }
.nota-input.is-saved{ border-color:var(--color-success) !important; background:var(--color-success-bg); }
.nota-input.is-error{ border-color:var(--color-danger) !important; background:var(--color-danger-bg); }

/* Fila separadora de unidad dentro de la tabla matriz (si se necesita) */
.gradebook-unidad-row td{ background:#fafbfc; font-weight:700; text-align:left; }
.revision-nota-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}
.revision-nota-cell .revision-nota-input {
    width: 70px;
}
.revision-nota-max {
    font-size: 12.5px;
}
.stat-card.is-active-filtro {
    outline: 2px solid var(--color-info);
    outline-offset: -2px;
}
/* Tipo 3: Evaluación (Fondo Rojo tenue) */
tr.fila-evaluacion, tr.fila-evaluacion td {
    background-color: #f8d7da !important;
    color: #842029;
}

/* Tipo 8: Feriado (Fondo Amarillo / Naranja tenue) */
tr.fila-feriado, tr.fila-feriado td {
    background-color: #fff3cd !important;
    color: #664d03;
}
/* --- COMPORTAMIENTO MÓVIL (norowspan) --- */
@media (max-width: 768px) {
  /* Oculta los encabezados superiores de la tabla */
  table.data-table thead {
    display: none;
  }

  /* Transforma las filas en tarjetas independientes */
  table.data-table tr.norowspan {
    display: block;
    margin-bottom: 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
    padding: 8px 12px;
  }

  /* Alinea la etiqueta izquierda (data-label) y el valor derecha */
  table.data-table tr.norowspan td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 4px;
    border-bottom: 1px dashed var(--color-border);
    text-align: right;
  }

  table.data-table tr.norowspan td:last-child {
    border-bottom: 0;
  }

  /* Muestra el título de cada columna tomando el valor de data-label */
  table.data-table tr.norowspan td::before {
    content: attr(data-label);
    font-weight: 700;
    font-size: 12px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    text-align: left;
    padding-right: 10px;
  }
}

/* ==========================================================================
   Timeline / Línea de tiempo (Sección completada)
   ========================================================================== */
.timeline { border-left: 2px solid var(--color-border); margin-left: 8px; padding-left: 20px; }
.timeline-item { position: relative; padding-bottom: 20px; }
.timeline-item::before {
  content: ""; position: absolute; left: -26px; top: 2px;
  width: 11px; height: 11px; border-radius: 50%; background: var(--color-primary);
  border: 2px solid #fff; box-shadow: 0 0 0 2px var(--color-border);
}