/* ===========================================
   THEME — Paleta y tipografías
=========================================== */
:root{
  --primary-color: #1E88E5;
  --primary-hover: #1565C0;
  --secondary-color: #FFB300;

  --background-color: #E8ECF3;
  --surface-color: #FFFFFF;

  --text-color: #2C2C2C;
  --text-muted: #6F6F6F;

  --border-color: #E0E4EC;
  --shadow-color: rgba(15, 23, 42, 0.06);

  --danger: #E53935;
  --success: #2E7D32;

  --font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}

/* ===========================================
   Base
=========================================== */
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family:var(--font-family);
  background:var(--background-color);
  color:var(--text-color);
  line-height:1.6;
}
a{ color:var(--primary-color); text-decoration:none; }
a:hover{ color:var(--primary-hover); text-decoration:underline; }

.main-container{ display:flex; min-height:100vh; }
.content{ flex:1; padding:2rem; overflow-y:auto; }

h1,h2,h3,h4,h5,h6{
  color:#0F172A;
  font-weight:800;
  letter-spacing:.2px;
}
.page-title{ font-size:1.9rem; margin-bottom:.35rem; }
.page-subtitle{ color:var(--text-muted); margin-top:-.25rem; margin-bottom:.75rem; }

/* ===========================================
   Sidebar
=========================================== */
.sidebar{
  width:260px; flex-shrink:0;
  background:#111827; color:#fff;
  display:flex; flex-direction:column; min-height:100vh;
}
.sidebar-header{ padding:1rem 1.2rem; border-bottom:1px solid rgba(255,255,255,.06); }
.sidebar a{
  color:#e5e7eb; display:flex; align-items:center; gap:.65rem;
  padding:.75rem 1rem; border-radius:10px; margin:.15rem .5rem;
  transition:background .15s;
}
.sidebar a:hover{ background:#1f2937; }
.sidebar a.active{ background:var(--primary-color); color:#fff; }

/* ===========================================
   Dashboard grid (Alumno)
=========================================== */
.dashboard-wrap{ width:100%; }
.dashboard-grid{
  display:grid;
  width:100%;
  grid-template-columns: minmax(0,2fr) minmax(0,1fr);
  grid-template-areas:
    "reminder calendar"
    "tasks    calendar"
    "announcements announcements";
  gap:1.25rem;
  align-items:start;
}
.dashboard-grid > .card-reminder{ grid-area:reminder; }
.dashboard-grid > .card-calendar{ grid-area:calendar; }
.dashboard-grid > .card-tasks{ grid-area:tasks; }
.dashboard-grid > .card-announcements{ grid-area:announcements; }

/* ===========================================
   Panels (cards)
=========================================== */
.panel{
  background:var(--surface-color);
  border:1px solid var(--border-color);
  border-radius:16px;
  box-shadow:0 10px 30px var(--shadow-color);
  overflow:clip;
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.panel:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(15,23,42,.08); border-color:#DADFE8; }

.panel-head{
  display:flex; align-items:center; gap:.9rem;
  padding:1rem 1.2rem .75rem;
}
.panel-icon{
  width:38px; height:38px; flex:0 0 38px;
  display:grid; place-items:center; font-size:1.15rem; color:#0f172a;
  background:linear-gradient(180deg,#F3F7FF,#E9F0FF);
  border:1px solid #DBE6FF; border-radius:12px;
}
.panel-title{ font-size:1.05rem; font-weight:800; color:#0f172a; }
.panel-sub{ color:var(--text-muted); font-size:.9rem; margin-top:.1rem; }
.panel-divider{ height:1px; background:#EFF3F7; margin:0 .9rem; }
.panel-body{ padding:1rem 1.2rem 1.2rem; }

.panel--blue .panel-icon{ background:linear-gradient(180deg,#EDF4FF,#E4EFFF); border-color:#D5E3FF; color:#0b62b3; }
.panel--amber .panel-icon{ background:linear-gradient(180deg,#FFF6E5,#FFECC7); border-color:#FFE3B0; color:#AA6A00; }
.panel--green .panel-icon{ background:linear-gradient(180deg,#E9F9F0,#DFF6EA); border-color:#C6EEDC; color:#1F7A52; }

/* ===========================================
   Calendario mini
=========================================== */
.card-calendar{ display:flex; flex-direction:column; justify-content:flex-start; aspect-ratio:1/1; }
@media (max-height:800px){ .card-calendar{ aspect-ratio:auto; } }

.calendar-mini{ font-size:.96rem; }
.calendar-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.8rem; }
.cal-btn{
  background:#EEF3FB; border:1px solid #E2E8F6; padding:.3rem .6rem; border-radius:8px; color:#667085; cursor:not-allowed;
}
.cal-month{ font-weight:800; color:#0f172a; }
.calendar-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:.35rem; }
.calendar-grid span{ color:#6b7280; font-weight:700; text-align:center; }
.day{
  background:#FBFDFF; border:1px solid #ECF1F6; border-radius:10px; padding:.55rem .2rem;
  position:relative; text-align:center; transition:transform .12s, box-shadow .12s, border-color .12s;
}
.day:hover{ transform:translateY(-1px); box-shadow:0 6px 14px rgba(15,23,42,.08); border-color:#E3E9F1; }
.day.today{ outline:2px solid var(--primary-color); outline-offset:2px; background:#fff; }
.day.due::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:6px;
  width:6px; height:6px; border-radius:50%; background:var(--danger);
}
.calendar-legend{ margin-top:.6rem; color:#6b7280; font-size:.85rem; }
.calendar-legend .due{
  display:inline-flex; align-items:center; gap:.35rem; background:#FFEEF1; color:#B4232B;
  border:1px solid #FFD6DC; padding:.25rem .5rem; border-radius:8px;
}

/* ===========================================
   Tablas
=========================================== */
.table-container{ overflow-x:auto; }
.styled-table{ width:100%; border-collapse:collapse; background:var(--surface-color); }
.styled-table th,.styled-table td{ padding:.7rem .75rem; border-bottom:1px solid #EFF3F7; }
.styled-table th{ background:#F5F7FA; color:#0f172a; font-weight:700; border-bottom:1px solid #E6EDF3; }
.styled-table tr:hover td{ background:#F9FBFD; }

/* ===========================================
   Formularios y botones — SISTEMA ÚNICO
   (centralizado para todo el sitio)
=========================================== */

/* Base */
.btn{
  --btn-bg: var(--surface-color);
  --btn-text: var(--text-color);
  --btn-bd: var(--border-color);
  --btn-bg-hover: #f3f6fb;
  --btn-text-hover: var(--btn-text);
  --btn-bd-hover: #cfd6e3;

  display:inline-flex; align-items:center; justify-content:center;
  gap:.45rem;
  padding:.62rem 1rem;
  border-radius:10px;
  border:1px solid var(--btn-bd);
  background:var(--btn-bg);
  color:var(--btn-text);
  font-weight:700;
  line-height:1.1;
  cursor:pointer;
  text-decoration:none;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .06s ease;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover{ background:var(--btn-bg-hover); color:var(--btn-text-hover); border-color:var(--btn-bd-hover); }
.btn:active{ transform:scale(.98); }
.btn:focus-visible{ outline:2px solid rgba(30,136,229,.45); outline-offset:2px; }
.btn[disabled], .btn:disabled{ opacity:.6; pointer-events:none; }

/* Tamaños */
.btn-sm{ padding:.45rem .75rem; font-size:.9rem; border-radius:9px; }
.btn-lg{ padding:.8rem 1.25rem; font-size:1.05rem; border-radius:12px; }
.btn-block{ width:100%; }

/* Icon-only (redondo) */
.btn-icon{
  width:40px; height:40px; padding:0; border-radius:12px;
}
.btn-icon.btn-sm{ width:34px; height:34px; border-radius:10px; }
.btn-icon.btn-lg{ width:46px; height:46px; border-radius:14px; }

/* Variantes */
.btn-primary{
  --btn-bg: var(--primary-color);
  --btn-text: #fff;
  --btn-bd: transparent;
  --btn-bg-hover: var(--primary-hover);
  --btn-text-hover: #fff;
  --btn-bd-hover: transparent;
  box-shadow: 0 4px 14px rgba(30,136,229,.18);
}
.btn-secondary{
  --btn-bg: #eef2ff;
  --btn-text: #1e40af;
  --btn-bd: #c7d2fe;
  --btn-bg-hover: #e0e7ff;
  --btn-text-hover: #1e3a8a;
  --btn-bd-hover: #b7c3fd;
}
.btn-success{
  --btn-bg:#e8f5e9; --btn-text:#1b5e20; --btn-bd:#c8e6c9;
  --btn-bg-hover:#dcf2df; --btn-text-hover:#124a17; --btn-bd-hover:#bfe0c0;
}
.btn-danger{
  --btn-bg:#fee2e2; --btn-text:#991b1b; --btn-bd:#fecaca;
  --btn-bg-hover:#fecaca; --btn-text-hover:#7f1d1d; --btn-bd-hover:#fda4a4;
}
.btn-warning{
  --btn-bg:#fff7ed; --btn-text:#9a3412; --btn-bd:#fde68a;
  --btn-bg-hover:#ffedd5; --btn-text-hover:#7c2d12; --btn-bd-hover:#fcd34d;
}

/* Outline & Ghost */
.btn-outline{
  --btn-bg: transparent;
  --btn-text: var(--primary-color);
  --btn-bd: var(--primary-color);
  --btn-bg-hover: rgba(30,136,229,.08);
  --btn-text-hover: var(--primary-hover);
  --btn-bd-hover: var(--primary-hover);
}
.btn-ghost{
  --btn-bg: transparent;
  --btn-text: var(--primary-color);
  --btn-bd: #dfe6f1;
  --btn-bg-hover: rgba(30,136,229,.07);
  --btn-text-hover: var(--primary-hover);
  --btn-bd-hover: #cbd7ea;
}

/* Blanco (para fondos oscuros) */
.btn-white{
  --btn-bg:#fff; --btn-text:#0f172a; --btn-bd:#e5e7eb;
  --btn-bg-hover:#f8fafc; --btn-text-hover:#0f172a; --btn-bd-hover:#dbe1ea;
}

/* “Text button” (link estilizado) */
.btn-link{
  --btn-bg: transparent; --btn-text: var(--primary-color); --btn-bd: transparent;
  --btn-bg-hover: transparent; --btn-text-hover: var(--primary-hover); --btn-bd-hover: transparent;
  padding:.2rem .1rem; border-radius:6px; font-weight:700;
}
.btn-link:hover{ text-decoration:underline; }

/* Botones en top bar/zonas oscuras: asegurar contraste */
.top-bar .btn-outline{ --btn-text:#0f172a; --btn-bd:#d0d7e2; --btn-text-hover:#0b1324; --btn-bd-hover:#b9c3d6; }
.top-bar .btn-ghost{ --btn-text:#0f172a; }

/* Grupos de botones */
.btn-group{ display:flex; gap:.5rem; flex-wrap:wrap; }

/* ===========================================
   Modal
=========================================== */
.modal{ position:fixed; inset:0; z-index:9999; display:none; }
.modal.is-open{ display:block; }
.modal__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
.modal__card{
  position:relative; margin:10vh auto 0; width:min(560px,90vw);
  background:#fff; border:1px solid var(--border-color);
  border-radius:16px; box-shadow:0 24px 60px rgba(15,23,42,.25);
  padding:1rem 1.2rem 1.2rem;
}
.modal__title{ font-size:1.1rem; font-weight:800; margin-bottom:.5rem; color:#0f172a; }
.modal__close{
  position:absolute; top:.6rem; right:.6rem; width:34px; height:34px;
  border-radius:10px; border:1px solid #e5e8ee; background:#f8fafc;
  cursor:pointer; font-size:1.1rem; line-height:1;
}
.modal__close:hover{ background:#eef4ff; border-color:#cfe0ff; }
.modal-list{ display:flex; flex-direction:column; gap:.75rem; margin-top:.25rem; }
.modal-item{ border:1px solid #eef1f4; border-radius:12px; padding:.7rem .8rem; background:#fbfdff; }
.mi-title{ font-weight:800; color:#0f172a; margin-bottom:.15rem; }
.mi-sub{ color:#6b7280; font-size:.9rem; margin-bottom:.4rem; }
.mi-actions{ display:flex; gap:.5rem; flex-wrap:wrap; }

/* ===========================================
   MIS CURSOS — alumno (grid+cards)
=========================================== */
.courses-toolbar{
  display:flex; gap:.6rem; align-items:center; margin-bottom:1rem; flex-wrap:wrap;
}
.courses-toolbar input[type="text"]{ flex:1 1 260px; min-width:220px; }

.courses-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:1.25rem;
}
@media (max-width:1100px){ .courses-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:680px){ .courses-grid{ grid-template-columns: 1fr; } }

.course-card{
  background: var(--surface-color);
  border:1px solid var(--border-color);
  border-radius:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 10px 24px var(--shadow-color);
  transition:transform .18s ease, box-shadow .18s ease;
  min-width:0; /* importante para grids */
}
.course-card:hover{ transform:translateY(-3px); box-shadow:0 16px 32px rgba(16,24,40,.10); }

.course-cover{ position:relative; aspect-ratio:16/9; overflow:hidden; background:#f3f6fb; }
.course-cover img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.course-card:hover .course-cover img{ transform:scale(1.04); }

.course-cover-badges{ position:absolute; top:.7rem; left:.7rem; display:flex; gap:.5rem; }
.chip{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.35rem .6rem; border-radius:999px;
  font-weight:700; font-size:.82rem;
}
.chip-accent{ background:#fff2c6; color:#6a4c00; border:1px solid #ffe69b; }

.course-card-body{ padding:1rem 1rem 1.1rem; display:flex; flex-direction:column; gap:.7rem; }
.course-title{ margin:0; font-size:1.1rem; line-height:1.35; color:#0f172a; font-weight:800; }
.course-desc{ margin:0; color:var(--text-muted); font-size:.95rem; }
.course-meta{ display:flex; gap:1rem; align-items:center; font-size:.92rem; color:#475467; }

.progress{ display:flex; flex-direction:column; gap:.4rem; }
.progress-bar{ width:100%; height:8px; background:#eef2f7; border-radius:999px; overflow:hidden; }
.progress-fill{
  height:100%;
  background:linear-gradient(90deg, var(--primary-color), #5aa4ff);
  border-radius:999px;
  color:transparent; line-height:normal; padding:0;
}

.course-actions{ display:flex; gap:.5rem; margin-top:.3rem; }
.course-actions .btn{ flex:0 0 auto; }

.btn-ghost{
  background:transparent; border:1px solid var(--border-color);
  color:var(--primary-color); border-radius:10px; padding:.45rem .85rem; font-weight:700;
}
.btn-ghost:hover{ background:rgba(30,136,229,.07); }

/* ===========================================
   DOCENTE — grid y cards (limpio)
=========================================== */
/* Grilla principal: Cursos (2fr) + panel lateral (1fr) */
.gd-teacher{
  display:grid !important;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap:1.25rem;
  align-items:start;
}
@media (max-width:992px){
  .gd-teacher{ grid-template-columns:1fr !important; }
}

/* Panel cursos del docente: grilla fluida */
.panel-courses .panel-body{ overflow:visible; }
.courses-grid--teacher{
  display:grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); /* cards anchas por defecto */
  gap:1rem;
}
@media (max-width:1200px){
  .courses-grid--teacher{ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}
@media (max-width:560px){
  .courses-grid--teacher{ grid-template-columns:1fr; }
}

/* Asegura que las cards no hereden anchos fijos */
.courses-grid--teacher .course-card{
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  height:100%;
}

/* ===========================================
   Responsive general
=========================================== */
@media (max-width:992px){
  .content{ padding:1.25rem; }
  .dashboard-grid{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "reminder"
      "calendar"
      "tasks"
      "announcements";
  }
  .card-calendar{ aspect-ratio:auto; }
}
@media (max-width:768px){
  .content{ padding:1rem; }
  .btn{ padding:.5rem .85rem; border-radius:9px; }
}

/* ===========================================
   Variantes utilitarias
=========================================== */
.panel-stack{ display:block; text-align:center; }
.panel-stack .panel-actions{ margin-top:.6rem; justify-content:center; }
.panel-stack .lead{ font-size:1rem; color:var(--text-color); }


/* ==== DASHBOARD (Alumno) – robust area mapping ==== */

/* Force the grid + areas on desktop */
@media (min-width: 993px){
  .dashboard-grid{
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-areas:
      "reminder calendar"
      "tasks    calendar"
      "announcements announcements";
    gap: 1.25rem;
    align-items: start;
  }
  /* Map areas even if cards are wrapped */
  .dashboard-grid .card-reminder{ grid-area: reminder !important; }
  .dashboard-grid .card-calendar{ grid-area: calendar !important; }
  .dashboard-grid .card-tasks{ grid-area: tasks !important; }
  .dashboard-grid .card-announcements{ grid-area: announcements !important; }
}

/* Mobile keeps single column */
@media (max-width: 992px){
  .dashboard-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "reminder"
      "calendar"
      "tasks"
      "announcements";
    gap: 1rem;
  }
}


/* ==== Foro: meta del mensaje (avatar + nombre + rol + fecha) ==== */
.foro-msg { /* contenedor de cada mensaje */
  padding: .9rem 0;
  border-bottom: 1px solid #EFF3F7;
}

.foro-msg .post-meta{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
  margin-bottom:.35rem;
}

.foro-msg .author-name{
  font-weight:700;
  color:#0f172a;            /* negro suave (match del tema) */
}

.foro-msg .author-avatar{
  width:28px; height:28px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}

.foro-msg .author-role{
  display:inline-flex;
  align-items:center;
  padding:.15rem .5rem;
  border-radius:999px;
  font-size:.78rem;
  font-weight:700;
  border:1px solid #dbeafe;
  background:#eef2ff;       /* base */
  color:#1e40af;
}

/* Variantes por rol (opcional) */
.badge-role-docente{
  border-color:#fde68a;
  background:#fff7ed;
  color:#9a3412;
}
.badge-role-alumno{
  border-color:#bbf7d0;
  background:#ecfdf5;
  color:#065f46;
}
.badge-role-admin{
  border-color:#fecaca;
  background:#fef2f2;
  color:#991b1b;
}

/* Fecha */
.foro-msg .post-date{
  color:#64748b;
  font-size:.85rem;
}

/* Adjuntos del mensaje */
.foro-msg .attachments{
  margin-top:.5rem;
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
}

/* Responsive fino */
@media (max-width:640px){
  .foro-msg .author-name{ font-size:.95rem; }
  .foro-msg .author-avatar{ width:26px; height:26px; }
  .foro-msg .author-role{ font-size:.75rem; padding:.12rem .45rem; }
  .foro-msg .post-date{ font-size:.8rem; }
}

/* ======= LOGIN (layout + estética) ======= */
.login-wrap{
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.2fr 1fr;     /* panel visual + form */
  gap: 2rem;
  align-items: center;
  padding: clamp(1rem, 4vw, 3rem);
}

.login-hero{
  display: none;                        /* oculto en mobile */
  background: linear-gradient(135deg,#e9edf6,#e3e8ef);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  box-shadow: 0 14px 40px var(--shadow-color);
  height: min(560px, 70vh);
  overflow: hidden;
}
.login-hero__inner{
  height: 100%;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem;
}
.login-hero h1{
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  margin-bottom: .5rem;
}
.login-hero p{ color: var(--text-muted); }

.login-card{
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  box-shadow: 0 14px 40px var(--shadow-color);
  padding: clamp(1rem, 3vw, 2rem);
  max-width: 520px;
  width: 100%;
  margin-inline: auto;
}

.login-title{
  margin-bottom: .35rem;
  font-size: 1.4rem;
  font-weight: 800;
  color: #0f172a;
}
.login-sub{ color: var(--text-muted); margin-bottom: 1rem; }

.login-form .form-row{ margin-bottom: .9rem; }
.login-form label{ display:block; font-weight:600; margin-bottom:.35rem; }
.login-form input[type="text"],
.login-form input[type="password"]{
  width: 100%;
  background: #fff;
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: .7rem .85rem;
  outline: none;
  transition: border .15s, box-shadow .15s, background .15s;
  font-size: 1rem;
}
.login-form input:focus{
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(30,136,229,.15);
}

/* filas pequeñas (checkbox + link) */
.login-meta{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; margin:.25rem 0 1rem;
}
.login-check{
  display:flex; align-items:center; gap:.4rem; color:var(--text-color);
}
.login-check input{ accent-color: var(--primary-color); }

.login-actions .btn{ width:100%; padding:.75rem 1rem; font-size:1rem; }
.login-actions .btn + .btn{ margin-top:.5rem; }

.login-muted-link{
  display:block; text-align:center; margin-top:.75rem; font-size:.95rem;
}

/* responsive: en móvil solo el card */
@media (max-width: 900px){
  .login-wrap{ grid-template-columns: 1fr; padding: 1rem; }
  .login-hero{ display:none; }
}

/* Contenedor con scroll */
.ann-list {
  max-height: 250px;      /* ajusta según tu diseño */
  overflow-y: auto;
  padding-right: 6px;     /* para que no se superponga el scroll */
}

/* Estilo de cada anuncio */
.ann-item {
  border: 1px solid #cce5cc;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
  background: #f9fff9;
  transition: background 0.2s ease;
}
.ann-item:hover {
  background: #f1fff1;
}

.ann-item .title {
  font-weight: bold;
  margin-bottom: 4px;
  color: #2c662d;
}

.ann-item .text {
  font-size: 0.95rem;
  margin-bottom: 6px;
  color: #333;
}

.ann-item .meta {
  font-size: 0.8rem;
  color: #777;
}