/* =====================================================================
   theme.css
   Piel visual de la Plataforma Educativa — Sagrado Corazón de Jesús
   Bethlemitas. Se carga DESPUÉS de bootstrap.min.css en header.php.
   No se toca ninguna vista: todo funciona sobre las mismas clases
   de Bootstrap que ya usan admin, docente y estudiante.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,500;1,600&family=Fraunces:opsz,wght@9..144,600;9..144,700&family=JetBrains+Mono:wght@500&family=Work+Sans:wght@400;500;600&display=swap');

:root{
  --ink:#0F1B2B;
  --panel:#16273D;
  --panel-2:#1D3049;
  --maroon:#9B2C3B;
  --maroon-hover:#B4374A;
  --gold:#D4A94B;
  --gold-oscuro:#8A6A26;
  --teal:#2E7D74;
  --text:#F5EFE3;
  --muted:#93A0B4;
  --line:rgba(245,239,227,0.10);
  --radius:14px;
}

/* ---------- Base ---------- */
html{
  background:var(--ink) !important;
}
body{
  background:var(--ink) !important;
  color:var(--text);
  font-family:'Work Sans', sans-serif;
}
h1,h2,h3,h4,h5,h6{
  font-family:'Fraunces', serif;
  letter-spacing:-0.01em;
}
/* Títulos de página (ej. "Mis clases", "Mis notas", "Evaluaciones") —
   dorado oscuro para que se lean bien sobre fondo claro */
h1.h3, h1.h4{
  color:var(--gold-oscuro);
}
a{ color:var(--gold); }
a:hover{ color:var(--maroon-hover); }
.text-muted{ color:var(--muted) !important; }

/* ---------- Navbar superior ---------- */
.navbar.bg-dark{
  background:linear-gradient(120deg, var(--panel-2), var(--ink)) !important;
  border-bottom:1px solid var(--line);
}
.navbar-brand{
  font-family:'Cormorant Garamond', serif !important;
  font-style:italic;
  font-weight:600;
  color:var(--gold) !important;
  font-size:1.4rem !important;
}
.navbar .text-white{ color:var(--text) !important; }
.navbar .text-secondary{ color:var(--muted) !important; }
.navbar .btn-outline-light{
  border-color:var(--line);
  color:var(--text);
}
.navbar .btn-outline-light:hover{
  background:var(--maroon);
  border-color:var(--maroon);
  color:var(--text);
}

/* ---------- Sidebar ---------- */
nav.bg-white,
aside.bg-white{
  background:linear-gradient(190deg, var(--panel-2), var(--ink)) !important;
  border-right:1px solid var(--line) !important;
  border-color:var(--line) !important;
}
.nav-link.text-dark{
  color:var(--muted) !important;
  border-radius:10px;
  padding:10px 12px !important;
  margin-bottom:4px;
  transition:all .15s ease;
  border-left:3px solid transparent;
}
.nav-link.text-dark:hover{
  color:var(--text) !important;
  background:rgba(245,239,227,0.05);
}
.nav-link.text-dark.active,
.nav-link.text-dark[aria-current="page"]{
  color:var(--text) !important;
  background:var(--panel);
  border-left-color:var(--gold);
}

/* ---------- Tarjetas ---------- */
.card{
  background:linear-gradient(160deg, var(--panel), var(--panel-2)) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius) !important;
  color:var(--text);
}
.card.shadow-sm{
  box-shadow:0 10px 26px rgba(0,0,0,0.28) !important;
}
.card-title{
  font-family:'Fraunces', serif;
  color:var(--text);
}
.card-header{
  background:rgba(245,239,227,0.04) !important;
  border-bottom:1px solid var(--line) !important;
  color:var(--text);
}

/* ---------- Botones ---------- */
.btn-primary{
  background:var(--maroon) !important;
  border-color:var(--maroon) !important;
}
.btn-primary:hover{
  background:var(--maroon-hover) !important;
  border-color:var(--maroon-hover) !important;
}
.btn-outline-primary{
  color:var(--gold) !important;
  border-color:var(--gold) !important;
}
.btn-outline-primary:hover{
  background:var(--gold) !important;
  color:var(--ink) !important;
}
.btn-outline-secondary{
  color:var(--muted) !important;
  border-color:var(--line) !important;
}
.btn-outline-secondary:hover{
  background:rgba(245,239,227,0.08) !important;
  color:var(--text) !important;
  border-color:var(--muted) !important;
}
.btn-outline-danger{
  color:#E28C97 !important;
  border-color:rgba(226,140,151,0.5) !important;
}
.btn-outline-danger:hover{
  background:var(--maroon) !important;
  border-color:var(--maroon) !important;
  color:var(--text) !important;
}
.btn-success{
  background:var(--teal) !important;
  border-color:var(--teal) !important;
}
.btn-secondary{
  background:var(--panel-2) !important;
  border-color:var(--line) !important;
  color:var(--text) !important;
}

/* ---------- Alertas ---------- */
.alert{
  border:1px solid var(--line);
  border-left-width:4px;
  background:var(--panel) !important;
  color:var(--text) !important;
  border-radius:10px;
}
.alert-info{ border-left-color:var(--teal); }
.alert-warning{ border-left-color:var(--gold); }
.alert-danger{ border-left-color:var(--maroon); }
.alert-success{ border-left-color:var(--teal); }
.btn-close{ filter:invert(1) grayscale(1) opacity(0.7); }

/* ---------- Formularios ---------- */
.form-control,
.form-select{
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  color:var(--text) !important;
}
.form-control:focus,
.form-select:focus{
  background:var(--panel) !important;
  border-color:var(--gold) !important;
  box-shadow:0 0 0 0.2rem rgba(212,169,75,0.15) !important;
  color:var(--text) !important;
}
.form-control::placeholder{ color:var(--muted); opacity:0.7; }
.form-label{ color:var(--muted); font-size:0.85rem; }

/* ---------- Tablas ---------- */
.table{
  background:var(--panel) !important;
  color:var(--text);
  border-color:var(--line);
}

/* ---------- Acordeones (contenido de clases, "Aula virtual") ---------- */
.accordion-item{
  background:var(--panel) !important;
  color:var(--text);
  border-color:var(--line) !important;
}
.accordion-button{
  background:var(--panel) !important;
  color:var(--text) !important;
  box-shadow:none !important;
}
.accordion-button:not(.collapsed){
  background:var(--panel-2) !important;
  color:var(--gold) !important;
}
.accordion-button::after{
  filter:invert(1) grayscale(1) brightness(1.6); /* la flechita se ve blanca, no negra */
}
.accordion-body{
  background:var(--panel) !important;
  color:var(--text) !important;
}
/* El contenido que el docente escribe en el editor (Quill) hereda el
   color de arriba; los enlaces dentro de ese contenido usan el dorado. */
.accordion-body a{ color:var(--gold); }

/* ---------- Otras superficies blancas de Bootstrap que faltaban ---------- */
.list-group-item{
  background:var(--panel) !important;
  color:var(--text) !important;
  border-color:var(--line) !important;
}
.dropdown-menu{
  background:var(--panel-2) !important;
  color:var(--text) !important;
  border-color:var(--line) !important;
}
.dropdown-item{ color:var(--text) !important; }
.dropdown-item:hover, .dropdown-item:focus{ background:rgba(245,239,227,0.08) !important; }
.offcanvas{
  background:var(--panel-2) !important;
  color:var(--text) !important;
}
.popover, .popover-body{
  background:var(--panel-2) !important;
  color:var(--text) !important;
  border-color:var(--line) !important;
}

/* ---------- Editor de texto enriquecido (Quill) ---------- */
/* El editor tiene fondo blanco a propósito (para escribir como en un
   documento normal) — pero sin esto, heredaba el color de letra claro
   del tema oscuro general, quedando invisible sobre ese blanco. */
.ql-editor{
  color:#1a1a1a !important;
  background:#ffffff;
}
.ql-editor.ql-blank::before{
  color:#888 !important; /* el texto de "placeholder" tipo "Escribe aquí..." */
}
.ql-toolbar.ql-snow{
  background:#f4f4f4;
  border-color:#ccc !important;
}
.ql-container.ql-snow{
  border-color:#ccc !important;
}
.table > :not(caption) > * > *{
  background:transparent;
  border-bottom-color:var(--line);
  color:var(--text);
}
.table-light,
.table thead{
  background:var(--panel-2) !important;
  color:var(--gold);
  font-family:'JetBrains Mono', monospace;
  font-size:0.75rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.table-bordered{ border-color:var(--line); }
.table-hover > tbody > tr:hover > *{
  background:rgba(245,239,227,0.03);
}

/* ---------- Modales ---------- */
.modal-content{
  background:linear-gradient(155deg, var(--panel-2), var(--ink)) !important;
  border:1px solid var(--line) !important;
  color:var(--text);
  border-radius:16px;
}
.modal-header,
.modal-footer{
  border-color:var(--line) !important;
}
.modal-title{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  color:var(--gold);
}

/* ---------- Badges (notas) ---------- */
.badge{
  font-family:'JetBrains Mono', monospace;
  font-weight:500;
}
.badge-nota-editable{
  cursor:pointer;
  transition:transform .15s ease;
}
.badge-nota-editable:hover{
  transform:translateY(-1px);
  filter:brightness(1.1);
}

/* ---------- Scrollbar (opcional, estético) ---------- */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{ background:var(--panel-2); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:var(--muted); }