/* ================= MODO OSCURO GLOBAL ================= */
/* Paleta: blanco, azul oscuro (#1b263b), morado suave (#5c4d7d) */
:root {
  --azul: #1b263b;
  --morado: #5c4d7d;
  --blanco: #fff;
  --gris: #f5f6fa;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
  background: var(--blanco);
  color: var(--azul);
  line-height: 1.6;
}
body.modo-oscuro {
  background: #181c27 !important;
  color: #e0e0e0 !important;
}
body.modo-oscuro main,
body.modo-oscuro .plan-estudios,
body.modo-oscuro .recursos,
body.modo-oscuro .contacto,
body.modo-oscuro .progreso-section,
body.modo-oscuro .apuntes-section,
body.modo-oscuro .horario-section {
  background: #1e2230 !important;
  color: #e0e0e0 !important;
}
body.modo-oscuro .card,
body.modo-oscuro .recurso,
body.modo-oscuro .progreso-materia,
body.modo-oscuro .apunte-item,
body.modo-oscuro .apunte-editor,
body.modo-oscuro .apuntes-carpetas,
body.modo-oscuro .apuntes-main,
body.modo-oscuro .horario-responsive,
body.modo-oscuro .modal-content,
body.modo-oscuro .apunte-visor-panel {
  background: #23263a !important;
  color: #e0e0e0 !important;
  box-shadow: 0 2px 16px rgba(27,38,59,0.28) !important;
}
body.modo-oscuro .card h3,
body.modo-oscuro .recurso-info span,
body.modo-oscuro .progreso-materia h3,
body.modo-oscuro .apunte-item .apunte-asunto,
body.modo-oscuro .apuntes-main-header,
body.modo-oscuro .carpetas-header {
  color: #b8a1e3 !important;
}
body.modo-oscuro .btn,
body.modo-oscuro .acces-panel-btn,
body.modo-oscuro .acces-switch.active {
  background: #5c4d7d !important;
  color: #fff !important;
}
body.modo-oscuro .btn:hover,
body.modo-oscuro .acces-panel-btn:hover {
  background: #b8a1e3 !important;
  color: #23263a !important;
}
body.modo-oscuro .barra-progreso {
  background: #2d3147 !important;
}
body.modo-oscuro .barra-progreso-inner {
  background: linear-gradient(90deg, #b8a1e3, #5c4d7d) !important;
}
body.modo-oscuro .checklist-temas label,
body.modo-oscuro .apunte-item {
  background: #23263a !important;
  color: #e0e0e0 !important;
}
body.modo-oscuro .apunte-item:hover {
  background: #2d3147 !important;
  color: #b8a1e3 !important;
}
body.modo-oscuro .medalla {
  background: #2d3147 !important;
  color: #b8a1e3 !important;
}
body.modo-oscuro .medalla span {
  color: #e0e0e0 !important;
}
body.modo-oscuro .mensaje-inspirador-card {
  background: linear-gradient(120deg, #23263a 80%, #2d3147 100%) !important;
  color: #e0e0e0 !important;
}
body.modo-oscuro .mensaje-inspirador-text {
  color: #b8a1e3 !important;
}
body.modo-oscuro .mensaje-inspirador-autor {
  color: #e0e0e0 !important;
}
body.modo-oscuro .apuntes-tabs {
  background: #23263a !important;
}
body.modo-oscuro .apuntes-tab {
  background: #5c4d7d !important;
  color: #fff !important;
}
body.modo-oscuro .apuntes-tab.active, body.modo-oscuro .apuntes-tab:hover {
  background: #b8a1e3 !important;
  color: #23263a !important;
}
body.modo-oscuro .apunte-editor-modal {
  background: rgba(24,28,39,0.88) !important;
}
body.modo-oscuro .modal-config {
  background: rgba(24,28,39,0.88) !important;
}
body.modo-oscuro .input-personalizado,
body.modo-oscuro input,
body.modo-oscuro textarea,
body.modo-oscuro select {
  background: #23263a !important;
  color: #e0e0e0 !important;
  border-color: #5c4d7d !important;
}
body.modo-oscuro input:focus,
body.modo-oscuro textarea:focus,
body.modo-oscuro select:focus {
  border-color: #b8a1e3 !important;
}
body.modo-oscuro #buscador {
  background: #23263a !important;
  color: #e0e0e0 !important;
  border-color: #5c4d7d !important;
}
body.modo-oscuro #buscador:focus {
  border-color: #b8a1e3 !important;
}
body.modo-oscuro .apuntes-carpetas {
  background: #23263a !important;
}
body.modo-oscuro .apuntes-main {
  background: none !important;
}
body.modo-oscuro .apunte-visor-header {
  background: #23263a !important;
  border-bottom: 1.5px solid #5c4d7d !important;
}
body.modo-oscuro .apunte-visor-content {
  background: #1e2230 !important;
}
body.modo-oscuro .apunte-visor-header .apunte-visor-asunto {
  color: #b8a1e3 !important;
}
body.modo-oscuro .apunte-visor-header .apunte-visor-actions {
  color: #e0e0e0 !important;
}
body.modo-oscuro .apunte-visor-content {
  color: #e0e0e0 !important;
}
body.modo-oscuro .apunte-visor-panel {
  background: #23263a !important;
}
body.modo-oscuro .apunte-visor-edicion .apunte-visor-asunto,
body.modo-oscuro .apunte-visor-edicion .apunte-visor-texto,
body.modo-oscuro .apunte-visor-edicion input[type="text"] {
  background: #23263a !important;
  color: #e0e0e0 !important;
  border-color: #5c4d7d !important;
}
body.modo-oscuro .apunte-visor-edicion .apunte-visor-asunto:focus,
body.modo-oscuro .apunte-visor-edicion .apunte-visor-texto:focus,
body.modo-oscuro .apunte-visor-edicion input[type="text"]:focus {
  border-color: #b8a1e3 !important;
}
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: var(--blanco);
  box-shadow: 0 2px 8px rgba(27,38,59,0.07);
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  transition: background 0.3s;
}
body.modo-oscuro header {
  background: #23263a !important;
  box-shadow: 0 2px 16px rgba(27,38,59,0.18);
}
.logo {
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--morado);
  letter-spacing: 2px;
  transition: color 0.3s;
}
body.modo-oscuro .logo {
  color: #b8a1e3;
}
nav ul {
  display: flex;
  gap: 2rem;
  list-style: none;
}
nav a {
  text-decoration: none;
  color: var(--azul);
  font-weight: 500;
  transition: color 0.2s;
}
nav a:hover {
  color: var(--morado);
}
body.modo-oscuro nav a {
  color: #e0e0e0;
}
body.modo-oscuro nav a:hover {
  color: #b8a1e3;
}
main {
  margin-top: 80px;
}
.hero {
  min-height: 60vh;
  background: linear-gradient(120deg, var(--azul) 60%, var(--morado) 100%), url('https://images.unsplash.com/photo-1519389950473-47ba0277781c?auto=format&fit=crop&w=1200&q=80') center/cover no-repeat;
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 2rem 2rem 2rem;
}
.hero-content h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
}
.hero-content p {
  font-size: 1.2rem;
  font-weight: 400;
}
.plan-estudios {
  padding: 4rem 2rem 2rem 2rem;
  background: var(--gris);
}
.plan-estudios h2 {
  text-align: center;
  color: var(--morado);
  margin-bottom: 2rem;
  font-size: 2rem;
}
.cards {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
}
.card {
  background: var(--blanco);
  border-radius: 1rem;
  box-shadow: 0 4px 16px rgba(27,38,59,0.08);
  padding: 2rem 1.5rem;
  width: 260px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 8px 24px rgba(92,77,125,0.13);
}
.card .icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--morado);
}
.card h3 {
  margin-bottom: 0.5rem;
  color: var(--azul);
}
.card p {
  font-size: 1rem;
  margin-bottom: 1rem;
}
.btn {
  display: inline-block;
  background: var(--morado);
  color: var(--blanco);
  padding: 0.5rem 1.2rem;
  border-radius: 2rem;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(92,77,125,0.08);
}
.btn:hover {
  background: var(--azul);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 4px 16px rgba(92,77,125,0.13);
}
.recursos {
  padding: 4rem 2rem 2rem 2rem;
}
.recursos h2 {
  text-align: center;
  color: var(--morado);
  margin-bottom: 2rem;
  font-size: 2rem;
}
#buscador {
  display: block;
  margin: 0 auto 2rem auto;
  padding: 0.7rem 1rem;
  width: 100%;
  max-width: 400px;
  border: 1px solid #ddd;
  border-radius: 2rem;
  font-size: 1rem;
}
.recursos-grid {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.recurso {
  background: var(--blanco);
  border-radius: 1rem;
  box-shadow: 0 2px 8px rgba(27,38,59,0.07);
  padding: 1.2rem 1rem;
  min-width: 220px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.recurso-info {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.recurso-info span {
  font-size: 1.5rem;
  color: var(--morado);
}
.contacto {
  padding: 4rem 2rem 2rem 2rem;
  background: var(--gris);
}
.contacto h2 {
  text-align: center;
  color: var(--morado);
  margin-bottom: 2rem;
  font-size: 2rem;
}
#form-contacto {
  max-width: 500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
#form-contacto input,
#form-contacto textarea {
  padding: 0.8rem 1rem;
  border: 1px solid #ddd;
  border-radius: 1rem;
  font-size: 1rem;
  font-family: inherit;
}
#form-contacto textarea {
  min-height: 100px;
  resize: vertical;
}
.contact-links {
  text-align: center;
  margin-top: 1.5rem;
  color: var(--azul);
}
.contact-links a {
  color: var(--morado);
  text-decoration: none;
  margin: 0 0.5rem;
  font-weight: 500;
}
footer {
  background: var(--azul);
  color: var(--blanco);
  text-align: center;
  padding: 1.5rem 1rem 1rem 1rem;
  margin-top: 2rem;
}
footer .social-icons {
  margin-top: 0.7rem;
}
footer .social-icons a {
  color: var(--blanco);
  margin: 0 0.5rem;
  font-size: 1.3rem;
  text-decoration: none;
  transition: color 0.2s;
}
footer .social-icons a:hover {
  color: var(--morado);
}
@media (max-width: 900px) {
  .cards {
    flex-direction: column;
    align-items: center;
  }
  .recursos-grid {
    flex-direction: column;
    align-items: center;
  }
}
@media (max-width: 600px) {
  header {
    flex-direction: column;
    gap: 0.7rem;
    padding: 1rem;
  }
  .logo {
    font-size: 1.2rem;
  }
  nav ul {
    gap: 1rem;
  }
  .hero-content h1 {
    font-size: 1.5rem;
  }
  .plan-estudios, .recursos, .contacto {
    padding: 2rem 0.7rem 1rem 0.7rem;
  }
  .card {
    width: 90vw;
    min-width: unset;
  }
  .recurso {
    min-width: unset;
    width: 90vw;
  }
  #form-contacto {
    padding: 0 0.5rem;
  }
}

/* --- HORARIO --- */
.horario-section {
  padding: 3rem 1rem 2rem 1rem;
  max-width: 1100px;
  margin: 0 auto;
}
.horario-section h2 {
  text-align: center;
  color: var(--morado);
  margin-bottom: 2rem;
}
.horario-config {
  text-align: right;
  margin-bottom: 1rem;
}
.horario-responsive {
  overflow-x: auto;
  background: var(--blanco);
  border-radius: 1rem;
  box-shadow: 0 2px 8px rgba(27,38,59,0.07);
  padding: 1rem;
}
#tabla-horario {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
}
#tabla-horario th, #tabla-horario td {
  border: 1px solid #e0e0e0;
  padding: 0.7rem 0.5rem;
  text-align: center;
  font-size: 1rem;
}
#tabla-horario th {
  background: var(--azul);
  color: var(--blanco);
  font-weight: 600;
}
#tabla-horario .almuerzo {
  background: #f3e9ff;
  color: var(--morado);
  font-weight: 600;
}
.modal-config {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(27,38,59,0.18);
  align-items: center;
  justify-content: center;
}
.modal-content {
  background: var(--blanco);
  border-radius: 1rem;
  padding: 2rem 1.5rem;
  max-width: 600px;
  width: 95vw;
  box-shadow: 0 8px 32px rgba(92,77,125,0.13);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.horario-editable {
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.edit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
}
.edit-row span {
  min-width: 120px;
  font-weight: 500;
  color: var(--azul);
  margin-bottom: 0.3rem;
}
.edit-row select {
  padding: 0.3rem 0.7rem;
  border-radius: 0.7rem;
  border: 1px solid #ddd;
  font-size: 1rem;
  font-family: inherit;
  margin-bottom: 0.3rem;
  min-width: 130px;
  max-width: 100%;
  flex: 1 1 130px;
}
.modal-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}
@media (max-width: 900px) {
  #tabla-horario {
    min-width: 500px;
    font-size: 0.95rem;
  }
  .modal-content {
    padding: 1rem 0.5rem;
    max-width: 98vw;
  }
  .edit-row span {
    min-width: 80px;
    font-size: 0.95rem;
  }
  .edit-row select {
    min-width: 100px;
    font-size: 0.95rem;
  }
}
@media (max-width: 600px) {
  .horario-section {
    padding: 1.5rem 0.2rem 1rem 0.2rem;
  }
  #tabla-horario th, #tabla-horario td {
    padding: 0.4rem 0.2rem;
    font-size: 0.9rem;
  }
  .edit-row span {
    min-width: 70px;
    font-size: 0.93rem;
  }
  .edit-row select {
    min-width: 80px;
    font-size: 0.93rem;
  }
  .modal-content {
    padding: 0.5rem 0.1rem;
  }
}

/* Animaciones de entrada */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-config[style*="display: flex"] .modal-content {
  animation: fadeInUp 0.5s cubic-bezier(.4,1.4,.6,1) both;
}
.horario-section, .horario-responsive, #tabla-horario {
  animation: fadeIn 0.8s cubic-bezier(.4,1.4,.6,1) both;
}

/* Selector de días en el modal */
.dias-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 1.5rem 0;
  justify-content: center;
}
.btn-dia {
  background: var(--morado);
  color: var(--blanco);
  border: none;
  border-radius: 1.2rem;
  padding: 0.4rem 1.1rem;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.btn-dia:hover, .btn-dia.selected {
  background: var(--azul);
  transform: scale(1.07);
}

/* Input personalizado */
.input-personalizado {
  margin-left: 0.5rem;
  padding: 0.3rem 0.7rem;
  border-radius: 0.7rem;
  border: 1px solid #bbb;
  font-size: 1rem;
  font-family: inherit;
  min-width: 120px;
  max-width: 60vw;
}
@media (max-width: 600px) {
  .input-personalizado {
    min-width: 70px;
    font-size: 0.93rem;
  }
}

/* --- PROGRESO --- */
.progreso-section {
  padding: 3rem 1rem 2rem 1rem;
  max-width: 1100px;
  margin: 0 auto;
}
.progreso-materia {
  background: var(--blanco);
  border-radius: 1rem;
  box-shadow: 0 2px 8px rgba(27,38,59,0.07);
  margin-bottom: 2rem;
  padding: 1.5rem 1rem;
}
.progreso-materia h3 {
  color: var(--morado);
  margin-bottom: 0.7rem;
}
.barra-progreso {
  background: #e6e6f7;
  border-radius: 1rem;
  height: 18px;
  margin-bottom: 1rem;
  overflow: hidden;
}
.barra-progreso-inner {
  background: linear-gradient(90deg, var(--morado), var(--azul));
  height: 100%;
  border-radius: 1rem;
  transition: width 0.5s;
}
.checklist-temas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}
.checklist-temas label {
  background: #f5f6fa;
  border-radius: 0.7rem;
  padding: 0.4rem 1rem;
  cursor: pointer;
  font-size: 1rem;
  color: var(--azul);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.checklist-temas input[type="checkbox"] {
  accent-color: var(--morado);
}
.medallas-logros {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  align-items: center;
}
.medalla {
  background: #f3e9ff;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--morado);
  box-shadow: 0 2px 8px rgba(92,77,125,0.10);
  flex-direction: column;
  text-align: center;
}
.medalla span {
  font-size: 1.1rem;
  color: var(--azul);
  font-weight: 600;
}
#registro-notas {
  margin-top: 2.5rem;
}
.tabla-notas {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}
.tabla-notas th, .tabla-notas td {
  border: 1px solid #e0e0e0;
  padding: 0.6rem 0.5rem;
  text-align: center;
}
.tabla-notas th {
  background: var(--azul);
  color: var(--blanco);
}
.input-nota {
  width: 60px;
  padding: 0.2rem 0.4rem;
  border-radius: 0.5rem;
  border: 1px solid #bbb;
  font-size: 1rem;
  text-align: center;
}
.btn-nota {
  background: var(--morado);
  color: var(--blanco);
  border: none;
  border-radius: 0.7rem;
  padding: 0.3rem 0.9rem;
  font-size: 1rem;
  margin-left: 0.5rem;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-nota:hover {
  background: var(--azul);
}

/* --- APUNTES --- */
.apuntes-section {
  padding: 3rem 1rem 2rem 1rem;
  max-width: 1100px;
  margin: 0 auto;
}
#apuntes-materias {
  margin-top: 2rem;
}
.apuntes-tabs {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.apuntes-tab {
  background: var(--morado);
  color: var(--blanco);
  border: none;
  border-radius: 1.2rem;
  padding: 0.4rem 1.1rem;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.apuntes-tab.active, .apuntes-tab:hover {
  background: var(--azul);
  transform: scale(1.07);
}
.apunte-editor {
  background: var(--blanco);
  border-radius: 1rem;
  box-shadow: 0 2px 8px rgba(27,38,59,0.07);
  padding: 1.5rem 1rem;
  margin-bottom: 2rem;
}
.apunte-editor textarea {
  width: 100%;
  min-height: 120px;
  border-radius: 0.7rem;
  border: 1px solid #bbb;
  padding: 0.7rem;
  font-size: 1rem;
  font-family: inherit;
  margin-bottom: 1rem;
}
.apunte-editor input[type="text"] {
  width: 100%;
  border-radius: 0.7rem;
  border: 1px solid #bbb;
  padding: 0.5rem;
  font-size: 1rem;
  font-family: inherit;
  margin-bottom: 0.7rem;
}
.apunte-editor input[type="file"] {
  margin-bottom: 0.7rem;
}
.apunte-editor .btn {
  margin-top: 0.5rem;
}
.apuntes-lista {
  margin-top: 1.5rem;
}
.apunte-item {
  background: #f5f6fa;
  border-radius: 0.7rem;
  padding: 1rem;
  margin-bottom: 1rem;
  position: relative;
  box-shadow: 0 2px 8px rgba(27,38,59,0.07);
  cursor: pointer;
  transition: box-shadow 0.2s, background 0.2s, color 0.2s;
}
.apunte-item:hover {
  background: #ece6fa;
  box-shadow: 0 4px 16px rgba(92,77,125,0.13);
  color: var(--morado);
}
.apunte-item .apunte-asunto {
  font-weight: 700;
  color: var(--morado);
  margin-bottom: 0.3rem;
  font-size: 1.08rem;
}
.apunte-item .apunte-preview {
  color: #666;
  font-size: 0.98rem;
}
.apunte-item .apunte-actions {
  display: none;
}
.apunte-item img {
  max-width: 100%;
  border-radius: 0.5rem;
  margin-top: 0.5rem;
}
.apunte-item a {
  color: var(--morado);
  text-decoration: underline;
  word-break: break-all;
}
.apunte-editor-modal {
  display: none;
  position: fixed;
  z-index: 4000;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(27,38,59,0.18);
  align-items: center;
  justify-content: center;
}
.apunte-editor-modal.open {
  display: flex;
}
.apunte-editor {
  background: var(--blanco);
  border-radius: 1rem;
  box-shadow: 0 8px 32px rgba(27,38,59,0.13);
  padding: 2rem 1.5rem;
  max-width: 500px;
  width: 95vw;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.apunte-editor input[type="text"] {
  width: 100%;
  border-radius: 0.7rem;
  border: 1px solid #bbb;
  padding: 0.5rem;
  font-size: 1rem;
  font-family: inherit;
}
.apunte-editor textarea {
  width: 100%;
  min-height: 120px;
  border-radius: 0.7rem;
  border: 1px solid #bbb;
  padding: 0.7rem;
  font-size: 1rem;
  font-family: inherit;
}
.apunte-editor input[type="file"] {
  margin-bottom: 0.7rem;
}
.apunte-editor .btn {
  margin-top: 0.5rem;
}
.apunte-editor-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: var(--morado);
  font-size: 1.3rem;
  cursor: pointer;
  border-radius: 0.5rem;
  transition: background 0.2s;
}
.apunte-editor-close:hover {
  background: #ece6fa;
}
@media (max-width: 900px) {
  .apuntes-explorer {
    flex-direction: column;
    gap: 1rem;
  }
  .apuntes-carpetas {
    flex-direction: row;
    min-width: unset;
    max-width: unset;
    width: 100%;
    gap: 1rem;
    padding: 0.7rem 0.3rem;
    border-radius: 1rem;
  }
}
@media (max-width: 600px) {
  .apuntes-explorer {
    flex-direction: column;
    gap: 0.5rem;
  }
  .apuntes-carpetas {
    min-width: unset;
    max-width: unset;
    width: 100%;
    padding: 0.5rem 0.1rem;
    border-radius: 0.7rem;
  }
  .apuntes-main-header {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* === Visor de edición profesional de apuntes === */
.apuntes-main.apunte-edicion-activo #apuntes-lista {
  display: none;
}
.apuntes-main.apunte-edicion-activo #apunte-visor {
  display: block;
  width: 100%;
  min-height: 500px;
  background: var(--blanco);
  box-shadow: 0 4px 24px rgba(92,77,125,0.10);
  border-radius: 1.2rem;
  padding: 2.5rem 2rem 2rem 2rem;
  margin-top: 1.2rem;
  animation: fadeIn 0.4s;
}
.apunte-visor-edicion {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.apunte-visor-edicion .apunte-visor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.2rem;
  margin-top: 0.5rem;
  justify-content: flex-end;
  align-items: center;
}
.apunte-visor-edicion .btn {
  margin-bottom: 0;
  min-width: 120px;
  text-align: center;
  font-size: 1rem;
  padding: 0.4rem 1.2rem;
  border-radius: 2rem;
}
.apunte-visor-edicion .apunte-visor-asunto {
  font-size: 1.4rem;
  font-weight: 700;
  border: none;
  border-bottom: 2px solid var(--morado);
  outline: none;
  padding: 0.5rem 0.2rem;
  margin-bottom: 0.5rem;
  background: transparent;
  color: var(--azul);
  transition: border 0.2s;
}
.apunte-visor-edicion .apunte-visor-asunto:focus {
  border-bottom: 2.5px solid var(--azul);
}
.apunte-visor-edicion .apunte-visor-texto {
  min-height: 180px;
  font-size: 1.1rem;
  border-radius: 0.7rem;
  border: 1.5px solid #e0e0e0;
  padding: 1rem;
  resize: vertical;
  outline: none;
  background: #fafaff;
  color: var(--azul);
  transition: border 0.2s;
}
.apunte-visor-edicion .apunte-visor-texto:focus {
  border: 1.5px solid var(--morado);
}
.apunte-visor-edicion #apunte-imagen-preview {
  text-align: left;
}
.apunte-visor-edicion .apunte-visor-img {
  max-width: 220px;
  max-height: 180px;
  border-radius: 0.7rem;
  margin-top: 0.5rem;
  box-shadow: 0 2px 8px rgba(92,77,125,0.10);
}
.apunte-visor-edicion input[type="text"] {
  font-size: 1.05rem;
  border-radius: 0.5rem;
  border: 1.5px solid #e0e0e0;
  padding: 0.5rem 0.7rem;
  margin-top: 0.2rem;
  background: #fafaff;
  color: var(--azul);
  margin-bottom: 0.5rem;
  width: 100%;
}
.apunte-visor-edicion input[type="text"]:focus {
  border: 1.5px solid var(--morado);
}
@media (max-width: 900px) {
  .apuntes-main.apunte-edicion-activo #apunte-visor {
    padding: 1.2rem 0.5rem 1rem 0.5rem;
  }
  .apunte-visor-edicion .apunte-visor-asunto {
    font-size: 1.1rem;
  }
}
@media (max-width: 600px) {
  .apuntes-main.apunte-edicion-activo #apunte-visor {
    padding: 0.5rem 0.1rem 0.5rem 0.1rem;
  }
  .apunte-visor-edicion .apunte-visor-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
  }
  .apunte-visor-edicion .btn {
    min-width: 100%;
  }
}
body.modo-oscuro .apuntes-main.apunte-edicion-activo #apunte-visor {
  background: #23263a;
}
body.modo-oscuro .apunte-visor-edicion .apunte-visor-asunto,
body.modo-oscuro .apunte-visor-edicion .apunte-visor-texto,
body.modo-oscuro .apunte-visor-edicion input[type="text"] {
  background: #23263a;
  color: #e0e0e0;
  border-color: #5c4d7d;
}
body.modo-oscuro .apunte-visor-edicion .apunte-visor-asunto:focus,
body.modo-oscuro .apunte-visor-edicion .apunte-visor-texto:focus,
body.modo-oscuro .apunte-visor-edicion input[type="text"]:focus {
  border-color: #b8a1e3;
}

/* Barra de botones al final del editor de apuntes */
.apunte-visor-actions-bottom {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  align-items: center;
  margin-top: 1.5rem;
  margin-bottom: 0.2rem;
  width: 100%;
}
@media (max-width: 600px) {
  .apunte-visor-actions-bottom {
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
  }
}

/* Fuentes personalizadas para Quill */
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sans-serif"],
.ql-font-sans-serif { font-family: 'Open Sans', Arial, sans-serif; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"],
.ql-font-serif { font-family: 'Times New Roman', Times, serif; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"],
.ql-font-monospace { font-family: 'Courier New', Courier, monospace; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="poppins"],
.ql-font-poppins { font-family: 'Poppins', sans-serif; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="open-sans"],
.ql-font-open-sans { font-family: 'Open Sans', Arial, sans-serif; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="roboto"],
.ql-font-roboto { font-family: 'Roboto', sans-serif; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="lato"],
.ql-font-lato { font-family: 'Lato', sans-serif; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="montserrat"],
.ql-font-montserrat { font-family: 'Montserrat', sans-serif; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="arial"],
.ql-font-arial { font-family: Arial, Helvetica, sans-serif; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="times-new-roman"],
.ql-font-times-new-roman { font-family: 'Times New Roman', Times, serif; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="courier-new"],
.ql-font-courier-new { font-family: 'Courier New', Courier, monospace; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="georgia"],
.ql-font-georgia { font-family: Georgia, serif; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="verdana"],
.ql-font-verdana { font-family: Verdana, Geneva, sans-serif; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="tahoma"],
.ql-font-tahoma { font-family: Tahoma, Geneva, sans-serif; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="trebuchet-ms"],
.ql-font-trebuchet-ms { font-family: 'Trebuchet MS', Helvetica, sans-serif; }

/* Alineación de texto Quill en el visor de lectura */
.apunte-visor-texto .ql-align-center { text-align: center; }
.apunte-visor-texto .ql-align-right { text-align: right; }
.apunte-visor-texto .ql-align-justify { text-align: justify; }

/* Listas e indentación Quill en el visor de lectura */
.apunte-visor-texto ol, .apunte-visor-texto ul {
  padding-left: 2.2em;
  margin-bottom: 0.5em;
}
.apunte-visor-texto li {
  margin-bottom: 0.2em;
}
.apunte-visor-texto .ql-indent-1 { margin-left: 2em; }
.apunte-visor-texto .ql-indent-2 { margin-left: 4em; }
.apunte-visor-texto .ql-indent-3 { margin-left: 6em; }
.apunte-visor-texto .ql-indent-4 { margin-left: 8em; }
.apunte-visor-texto .ql-indent-5 { margin-left: 10em; }
.apunte-visor-texto .ql-indent-6 { margin-left: 12em; }
.apunte-visor-texto .ql-indent-7 { margin-left: 14em; }
.apunte-visor-texto .ql-indent-8 { margin-left: 16em; }

/* Espaciado de párrafos y listas */
.apunte-visor-texto p, .apunte-visor-texto li {
  line-height: 1.7;
  margin-top: 0.2em;
  margin-bottom: 0.2em;
}

/* Mejorar visualización de saltos de línea y espacios */
.apunte-visor-texto br {
  line-height: 1.7;
}

/* Forzar fuentes de Quill con !important para editor y visor */
.ql-font-sans-serif, .apunte-visor-texto .ql-font-sans-serif { font-family: 'Open Sans', Arial, sans-serif !important; }
.ql-font-serif, .apunte-visor-texto .ql-font-serif { font-family: 'Times New Roman', Times, serif !important; }
.ql-font-monospace, .apunte-visor-texto .ql-font-monospace { font-family: 'Courier New', Courier, monospace !important; }
.ql-font-poppins, .apunte-visor-texto .ql-font-poppins { font-family: 'Poppins', sans-serif !important; }
.ql-font-open-sans, .apunte-visor-texto .ql-font-open-sans { font-family: 'Open Sans', Arial, sans-serif !important; }
.ql-font-roboto, .apunte-visor-texto .ql-font-roboto { font-family: 'Roboto', sans-serif !important; }
.ql-font-lato, .apunte-visor-texto .ql-font-lato { font-family: 'Lato', sans-serif !important; }
.ql-font-montserrat, .apunte-visor-texto .ql-font-montserrat { font-family: 'Montserrat', sans-serif !important; }
.ql-font-arial, .apunte-visor-texto .ql-font-arial { font-family: Arial, Helvetica, sans-serif !important; }
.ql-font-times-new-roman, .apunte-visor-texto .ql-font-times-new-roman { font-family: 'Times New Roman', Times, serif !important; }
.ql-font-courier-new, .apunte-visor-texto .ql-font-courier-new { font-family: 'Courier New', Courier, monospace !important; }
.ql-font-georgia, .apunte-visor-texto .ql-font-georgia { font-family: Georgia, serif !important; }
.ql-font-verdana, .apunte-visor-texto .ql-font-verdana { font-family: Verdana, Geneva, sans-serif !important; }
.ql-font-tahoma, .apunte-visor-texto .ql-font-tahoma { font-family: Tahoma, Geneva, sans-serif !important; }
.ql-font-trebuchet-ms, .apunte-visor-texto .ql-font-trebuchet-ms { font-family: 'Trebuchet MS', Helvetica, sans-serif !important; }

/* Personalizar menú del selector de fuentes de Quill */
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="poppins"],
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="poppins"],
.ql-font-poppins, .apunte-visor-texto .ql-font-poppins { font-family: 'Poppins', sans-serif !important; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="roboto"],
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="roboto"],
.ql-font-roboto, .apunte-visor-texto .ql-font-roboto { font-family: 'Roboto', sans-serif !important; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"],
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"],
.ql-font-serif, .apunte-visor-texto .ql-font-serif { font-family: 'Times New Roman', Times, serif !important; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"],
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"],
.ql-font-monospace, .apunte-visor-texto .ql-font-monospace { font-family: 'Courier New', Courier, monospace !important; }

/* === Mensaje Inspirador del Día === */
.mensaje-inspirador-section {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2.5rem;
  margin-top: 1.5rem;
}
.mensaje-inspirador-card {
  background: linear-gradient(120deg, #f5f6fa 80%, #e0e7ff 100%);
  border-radius: 1.5rem;
  box-shadow: 0 6px 32px rgba(92,77,125,0.13);
  padding: 2.5rem 2.2rem 2rem 2.2rem;
  max-width: 600px;
  min-width: 320px;
  text-align: center;
  animation: fadeInUp 0.8s;
  position: relative;
}
.mensaje-inspirador-icon {
  font-size: 2.7rem;
  margin-bottom: 1.1rem;
  color: #5c4d7d;
  filter: drop-shadow(0 2px 8px #b8a1e3aa);
}
.mensaje-inspirador-text {
  font-size: 1.35rem;
  font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
  color: #23263a;
  font-weight: 600;
  margin-bottom: 1.1rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.mensaje-inspirador-autor {
  font-size: 1.05rem;
  color: #5c4d7d;
  font-style: italic;
  font-weight: 500;
  margin-top: 0.2rem;
  opacity: 0.85;
}
@media (max-width: 600px) {
  .mensaje-inspirador-card {
    padding: 1.2rem 0.5rem 1rem 0.5rem;
    min-width: unset;
  }
  .mensaje-inspirador-text {
    font-size: 1.05rem;
  }
}

/* Centrar mensaje inspirador sutil debajo del subtítulo */
.mensaje-inspirador-sutil {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 1.1rem;
  margin-bottom: 0.2rem;
  width: 100%;
  text-align: center;
}
.mensaje-inspirador-sutil .mensaje-inspirador-icon {
  font-size: 1.3rem;
  margin-bottom: 0;
  color: #ffe066;
  filter: drop-shadow(0 1px 2px #b8a1e3aa);
}
.mensaje-inspirador-sutil .mensaje-inspirador-text {
  font-size: 1.08rem;
  color: #e0e0e0;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.01em;
}
.mensaje-inspirador-sutil .mensaje-inspirador-autor {
  font-size: 1.02rem;
  color: #b8a1e3;
  font-style: italic;
  font-weight: 400;
  margin-left: 0.5rem;
  opacity: 0.85;
}
@media (max-width: 600px) {
  .mensaje-inspirador-sutil {
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.98rem;
  }
  .mensaje-inspirador-sutil .mensaje-inspirador-text {
    font-size: 0.98rem;
  }
}

#lista-carpetas {
  list-style: none;
  padding: 0;
  margin: 0;
}
#lista-carpetas li {
  padding: 0.5rem 0.7rem;
  border-radius: 0.7rem;
  margin-bottom: 0.3rem;
  cursor: pointer;
  color: var(--azul);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transition: background 0.2s, color 0.2s;
  background: none;
  border: none;
}
#lista-carpetas li.selected, #lista-carpetas li:hover {
  background: var(--morado);
  color: #fff;
}
.apuntes-main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 1rem;
}
#nombre-carpeta-seleccionada {
  font-weight: 600;
  color: var(--morado);
  font-size: 1.1rem;
}
#btn-nuevo-apunte {
  margin-left: 1rem;
}

/* Restaurar diseño profesional de la columna de carpetas */
.apuntes-carpetas {
  min-width: 180px;
  background: #f5f6fa;
  border-radius: 1rem;
  box-shadow: 0 2px 8px rgba(27,38,59,0.07);
  padding: 1rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: fit-content;
}
.carpetas-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 0.7rem;
  font-weight: 600;
  color: var(--morado);
  font-size: 1.08rem;
}
#lista-carpetas {
  list-style: none;
  padding: 0;
  margin: 0;
}
#lista-carpetas li {
  padding: 0.45rem 0.7rem;
  border-radius: 0.7rem;
  margin-bottom: 0.2rem;
  cursor: pointer;
  color: var(--azul);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transition: background 0.2s, color 0.2s;
  background: none;
  border: none;
  font-size: 1rem;
}
#lista-carpetas li.selected, #lista-carpetas li:hover {
  background: var(--morado);
  color: #fff;
}
.apuntes-main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 1rem;
}
#nombre-carpeta-seleccionada {
  font-weight: 600;
  color: var(--morado);
  font-size: 1.1rem;
}
#btn-nuevo-apunte {
  margin-left: 1rem;
}

/* --- PANEL DE ACCESIBILIDAD (TAMAÑO FIJO CORREGIDO) --- */
.burbuja-accesibilidad {
  position: fixed;
  bottom: 2.2rem;
  right: 2.2rem;
  z-index: 3000;
  background: transparent;
  box-shadow: none;
  border-radius: 50%;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.burbuja-accesibilidad .acces-toggle {
  width: 54px;
  height: 54px;
  min-width: 54px;
  min-height: 54px;
  max-width: 54px;
  max-height: 54px;
  font-size: 32px;
  background: var(--morado);
  color: #fff;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(27,38,59,0.18);
  transition: background 0.2s, transform 0.2s;
  position: relative;
}
.burbuja-accesibilidad .acces-toggle:hover {
  background: var(--azul);
  transform: scale(1.08);
}
.burbuja-accesibilidad .acces-panel {
  min-width: 220px;
  max-width: 270px;
  padding: 18px 16px 16px 16px;
  font-size: 16px;
  background: var(--blanco);
  border-radius: 1.1rem;
  box-shadow: 0 8px 32px rgba(27,38,59,0.18);
  margin-bottom: 0.7rem;
  animation: fadeInUp 0.3s;
  position: absolute;
  bottom: 70px;
  right: 0;
  z-index: 4000;
  display: none;
  flex-direction: column;
  align-items: stretch;
}
.burbuja-accesibilidad.open .acces-panel {
  display: flex;
}
.acces-panel-title {
  font-weight: 700;
  color: var(--morado);
  font-size: 1.1rem;
}
.acces-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.7rem;
}
.acces-panel-close {
  background: none;
  border: none;
  color: var(--azul);
  font-size: 20px;
  cursor: pointer;
  padding: 0.1rem 0.5rem;
  border-radius: 0.5rem;
  transition: background 0.2s;
  min-width: 32px;
  min-height: 32px;
}
.acces-panel-close:hover {
  background: #ece6fa;
}
.acces-panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.7rem;
  gap: 0.7rem;
}
.acces-panel-label {
  color: var(--azul);
  font-size: 1rem;
}
.acces-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e6e6f7;
  border: none;
  border-radius: 1.2rem;
  padding: 0.2rem 1.1rem;
  font-size: 1rem;
  color: var(--morado);
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s, color 0.2s;
  min-width: 110px;
  min-height: 32px;
  box-shadow: 0 2px 8px rgba(27,38,59,0.10);
  text-align: center;
}
.acces-switch.active {
  background: var(--morado);
  color: #fff;
}
.acces-panel-btns {
  display: flex;
  gap: 0.5rem;
}
.acces-panel-btn {
  background: var(--morado);
  color: #fff;
  border: none;
  border-radius: 0.7rem;
  padding: 0.2rem 0.8rem;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.2s;
  min-width: 36px;
  min-height: 32px;
}
.acces-panel-btn:hover {
  background: var(--azul);
}
@media (max-width: 600px) {
  .burbuja-accesibilidad .acces-panel {
    min-width: 150px;
    max-width: 98vw;
    padding: 10px 6px 10px 6px;
  }
}

/* Estructura de dos paneles en apuntes */
.apuntes-explorer {
  display: flex;
  gap: 2rem;
  min-height: 400px;
}
.apuntes-carpetas {
  min-width: 200px;
  max-width: 240px;
  background: #f5f6fa;
  border-radius: 1rem;
  box-shadow: 0 2px 8px rgba(27,38,59,0.07);
  padding: 1.2rem 0.8rem 1.2rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: fit-content;
  flex-shrink: 0;
}
.apuntes-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: none;
}
@media (max-width: 900px) {
  .apuntes-explorer {
    flex-direction: column;
    gap: 1.2rem;
  }
  .apuntes-carpetas {
    flex-direction: row;
    min-width: unset;
    max-width: unset;
    width: 100%;
    gap: 1rem;
    padding: 0.7rem 0.3rem;
    border-radius: 1rem;
  }
}
@media (max-width: 600px) {
  .apuntes-explorer {
    flex-direction: column;
    gap: 0.5rem;
  }
  .apuntes-carpetas {
    min-width: unset;
    max-width: unset;
    width: 100%;
    padding: 0.5rem 0.1rem;
    border-radius: 0.7rem;
  }
  .apuntes-main-header {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* Visor de lectura profesional para apuntes */
.apunte-visor-panel {
  background: #fff;
  border-radius: 1.2rem;
  box-shadow: 0 4px 24px rgba(92,77,125,0.10);
  padding: 0;
  margin: 0;
  overflow: hidden;
  max-width: 700px;
  margin-top: 1.2rem;
}
.apunte-visor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f5f6fa;
  border-bottom: 1.5px solid #ececec;
  padding: 1.1rem 2rem 1.1rem 2rem;
}
.apunte-visor-header .apunte-visor-asunto {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--morado);
  margin: 0;
  padding: 0;
}
.apunte-visor-header .apunte-visor-actions {
  gap: 1rem;
}
.apunte-visor-content {
  background: #f8f9fb;
  padding: 2rem 2.5rem 2.5rem 2.5rem;
  border-radius: 0 0 1.2rem 1.2rem;
}
@media (max-width: 900px) {
  .apunte-visor-panel { max-width: 100%; }
  .apunte-visor-header { padding: 1rem 0.7rem 1rem 0.7rem; }
  .apunte-visor-content { padding: 1.2rem 0.5rem 1.5rem 0.5rem; }
}

/* Modal simulacro completo */
.modal-simulacro {
  display: none;
  position: fixed;
  z-index: 5000;
  left: 0; top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(24,28,39,0.85);
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}
.modal-simulacro[style*="display: flex"] {
  display: flex !important;
  opacity: 1;
  animation: fadeInUp 0.4s;
}
.modal-simulacro-content {
  background: #23263a;
  padding: 2.2rem 2rem 1.5rem 2rem;
  border-radius: 1.2rem;
  box-shadow: 0 8px 32px #0008;
  max-width: 98vw;
  width: 400px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  color: #e0e0e0;
  animation: fadeInUp 0.4s;
}
body.modo-oscuro .modal-simulacro-content {
  background: #23263a;
  color: #e0e0e0;
}
.modal-simulacro-content label {
  color: #b8a1e3;
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.modal-simulacro-content input[type="number"],
.modal-simulacro-content input[type="date"] {
  background: #181c27;
  color: #e0e0e0;
  border: 1px solid #5c4d7d;
  border-radius: 0.7rem;
  padding: 0.4rem 0.7rem;
  font-size: 1rem;
  margin-top: 0.2rem;
  width: 100%;
}
.modal-simulacro-content input[type="number"]:focus,
.modal-simulacro-content input[type="date"]:focus {
  border-color: #b8a1e3;
  outline: none;
}
.modal-simulacro-content button.btn-nota {
  background: #5c4d7d;
  color: #fff;
  border: none;
  border-radius: 0.7rem;
  padding: 0.5rem 0.9rem;
  font-size: 1.1em;
  cursor: pointer;
  margin-top: 1.2rem;
  width: 100%;
  transition: background 0.2s;
}
.modal-simulacro-content button.btn-nota:hover {
  background: #b8a1e3;
  color: #23263a;
}
.modal-simulacro-content #cerrar-modal-simulacro {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #b8a1e3;
  cursor: pointer;
  transition: color 0.2s;
}
.modal-simulacro-content #cerrar-modal-simulacro:hover {
  color: #fff;
}
@media (max-width: 600px) {
  .modal-simulacro-content {
    padding: 1.2rem 0.5rem 1rem 0.5rem;
    width: 98vw;
    min-width: unset;
  }
}
body.modo-oscuro #buscador:focus {
  border-color: #b8a1e3 !important;
}
body.modo-oscuro #lista-carpetas li {
  color: #e0e0e0;
  background: transparent;
  box-shadow: none;
}
body.modo-oscuro #lista-carpetas li.selected,
body.modo-oscuro #lista-carpetas li:hover {
  background: #b792fc;
  color: #23263a;
}
body.modo-oscuro .apuntes-carpetas {
  background: #23263a !important;
}
body.modo-oscuro .apuntes-main {
  background: none !important;
}

/* ================= SECCIÓN RENDIMIENTO SEMANAL ================= */
.rendimiento-semanal {
  padding: 4rem 2rem;
  background: var(--gris);
  text-align: center;
}

.rendimiento-semanal h2 {
  font-size: 2.5rem;
  color: var(--azul);
  margin-bottom: 3rem;
  font-weight: 700;
}

.rendimiento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.rendimiento-card {
  background: var(--blanco);
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 4px 20px rgba(27,38,59,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;
  overflow: hidden;
}

.rendimiento-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--morado), #b8a1e3);
}

.rendimiento-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(27,38,59,0.15);
}

.rendimiento-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  display: block;
}

.rendimiento-card h3 {
  font-size: 1.3rem;
  color: var(--azul);
  margin-bottom: 1rem;
  font-weight: 600;
}

.rendimiento-tiempo {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--morado);
  margin-bottom: 1rem;
  font-family: 'Poppins', sans-serif;
}

.rendimiento-comparacion {
  font-size: 1rem;
  color: #666;
  font-style: italic;
  min-height: 1.5rem;
}

.rendimiento-comparacion.positivo {
  color: #28a745;
  font-weight: 600;
}

.rendimiento-comparacion.negativo {
  color: #dc3545;
  font-weight: 600;
}

.rendimiento-progreso {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

.barra-progreso-meta {
  flex: 1;
  height: 8px;
  background: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
}

.barra-progreso-meta-inner {
  height: 100%;
  background: linear-gradient(90deg, var(--morado), #b8a1e3);
  border-radius: 4px;
  transition: width 0.5s ease;
  width: 0%;
}

#porcentaje-meta {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--morado);
  min-width: 3rem;
}

.rendimiento-acciones {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-registrar, .btn-configurar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  font-weight: 600;
  border: none;
  border-radius: 0.8rem;
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
}

.btn-registrar {
  background: linear-gradient(135deg, var(--morado), #b8a1e3);
  color: white;
}

.btn-configurar {
  background: linear-gradient(135deg, #6c757d, #adb5bd);
  color: white;
}

.btn-registrar:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(92,77,125,0.3);
}

.btn-configurar:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(108,117,125,0.3);
}

/* Modal para registrar tiempo */
.modal-tiempo {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  align-items: center;
  justify-content: center;
}

.modal-tiempo.active {
  display: flex;
}

.modal-tiempo-content {
  background: var(--blanco);
  padding: 2.5rem;
  border-radius: 1rem;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  width: 90%;
  max-width: 400px;
  position: relative;
  animation: fadeIn 0.3s;
}

.modal-tiempo h3 {
  color: var(--azul);
  margin-bottom: 1.5rem;
  text-align: center;
  font-size: 1.5rem;
}

.tiempo-inputs {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  justify-content: center;
}

.tiempo-input {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.tiempo-input label {
  font-size: 0.9rem;
  color: #666;
  font-weight: 600;
}

.tiempo-input input {
  width: 80px;
  padding: 0.8rem;
  border: 2px solid #e9ecef;
  border-radius: 0.5rem;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--azul);
  transition: border-color 0.3s;
}

.tiempo-input input:focus {
  outline: none;
  border-color: var(--morado);
}

.modal-tiempo-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.modal-tiempo-actions .btn {
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
}

/* Modo oscuro para rendimiento */
body.modo-oscuro .rendimiento-semanal {
  background: #1e2230 !important;
}

body.modo-oscuro .rendimiento-semanal h2 {
  color: #e0e0e0 !important;
}

body.modo-oscuro .rendimiento-card {
  background: #23263a !important;
  box-shadow: 0 4px 20px rgba(27,38,59,0.3) !important;
}

body.modo-oscuro .rendimiento-card h3 {
  color: #b8a1e3 !important;
}

body.modo-oscuro .rendimiento-tiempo {
  color: #b8a1e3 !important;
}

body.modo-oscuro .rendimiento-comparacion {
  color: #bbb !important;
}

body.modo-oscuro .barra-progreso-meta {
  background: #2d3147 !important;
}

body.modo-oscuro .barra-progreso-meta-inner {
  background: linear-gradient(90deg, #b8a1e3, #5c4d7d) !important;
}

body.modo-oscuro #porcentaje-meta {
  color: #b8a1e3 !important;
}

body.modo-oscuro .modal-tiempo-content {
  background: #23263a !important;
  color: #e0e0e0 !important;
}

body.modo-oscuro .modal-tiempo h3 {
  color: #b8a1e3 !important;
}

body.modo-oscuro .tiempo-input label {
  color: #bbb !important;
}

body.modo-oscuro .tiempo-input input {
  background: #2d3147 !important;
  color: #e0e0e0 !important;
  border-color: #5c4d7d !important;
}

body.modo-oscuro .tiempo-input input:focus {
  border-color: #b8a1e3 !important;
}

/* Responsive para rendimiento */
@media (max-width: 900px) {
  .rendimiento-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
  }
  
  .rendimiento-acciones {
    flex-direction: column;
    align-items: center;
  }
  
  .btn-registrar, .btn-configurar {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .rendimiento-semanal {
    padding: 3rem 1rem;
  }
  
  .rendimiento-semanal h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
  }
  
  .rendimiento-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .rendimiento-card {
    padding: 1.5rem;
  }
  
  .rendimiento-tiempo {
    font-size: 2rem;
  }
  
  .tiempo-inputs {
    flex-direction: column;
    gap: 1rem;
  }
  
  .tiempo-input {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  
  .tiempo-input input {
    width: 100px;
  }
} 

/* MODO OSCURO PARA RECURSOS */
body.modo-oscuro .recursos-section {
  background: #1e2230 !important;
  color: #e0e0e0 !important;
}
body.modo-oscuro .recursos-section h2 {
  color: #b8a1e3 !important;
}
body.modo-oscuro .recursos-desc {
  color: #bbb !important;
}
body.modo-oscuro .recursos-filtros input,
body.modo-oscuro .recursos-filtros select {
  background: #23263a !important;
  color: #e0e0e0 !important;
  border-color: #5c4d7d !important;
}
body.modo-oscuro .recursos-filtros input:focus,
body.modo-oscuro .recursos-filtros select:focus {
  border-color: #b8a1e3 !important;
}
body.modo-oscuro .recurso-card {
  background: #23263a !important;
  color: #e0e0e0 !important;
  box-shadow: 0 2px 16px rgba(27,38,59,0.28) !important;
}
body.modo-oscuro .recurso-titulo {
  color: #b8a1e3 !important;
}
body.modo-oscuro .recurso-tipo {
  color: #b8a1e3 !important;
}
body.modo-oscuro .recurso-desc {
  color: #bbb !important;
}
body.modo-oscuro .recurso-btn {
  background: #5c4d7d !important;
  color: #fff !important;
}
body.modo-oscuro .recurso-btn:hover, body.modo-oscuro .recurso-btn:focus {
  background: #b8a1e3 !important;
  color: #23263a !important;
  outline: 2px solid #b8a1e3;
}
body.modo-oscuro .recurso-icon {
  color: #b8a1e3 !important;
}
body.modo-oscuro .recurso-thumb {
  box-shadow: 0 2px 8px rgba(184,161,227,0.10);
}

.apunte-visor-img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.2rem auto;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  background: #222;
}

.apunte-visor-content img,
.apunte-visor-img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  margin: 1.2rem auto;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  background: #222;
}

/* ================= ALTO CONTRASTE GLOBAL ================= */
/* Diseñado para convivir con modo claro y modo oscuro. Usa !important para garantizar prioridad. */
body.alto-contraste {
  background: #000 !important;
  color: #fff !important;
}
body.alto-contraste header,
body.alto-contraste main,
body.alto-contraste footer,
body.alto-contraste .plan-estudios,
body.alto-contraste .recursos,
body.alto-contraste .contacto,
body.alto-contraste .progreso-section,
body.alto-contraste .apuntes-section,
body.alto-contraste .horario-section,
body.alto-contraste .rendimiento-semanal {
  background: #000 !important;
  color: #fff !important;
}
body.alto-contraste .card,
body.alto-contraste .recurso,
body.alto-contraste .progreso-materia,
body.alto-contraste .apunte-item,
body.alto-contraste .apunte-editor,
body.alto-contraste .apuntes-carpetas,
body.alto-contraste .apuntes-main,
body.alto-contraste .horario-responsive,
body.alto-contraste .modal-content,
body.alto-contraste .apunte-visor-panel,
body.alto-contraste .mensaje-inspirador-card,
body.alto-contraste .rendimiento-card,
body.alto-contraste .game-container {
  background: #000 !important;
  color: #fff !important;
  box-shadow: none !important;
  border: 2px solid #fff !important;
}
body.alto-contraste .logo,
body.alto-contraste h1,
body.alto-contraste h2,
body.alto-contraste h3,
body.alto-contraste h4,
body.alto-contraste h5,
body.alto-contraste h6 {
  color: #ff0 !important;
}
body.alto-contraste nav a {
  color: #fff !important;
  text-decoration: underline !important;
}
body.alto-contraste nav a:hover {
  color: #ff0 !important;
}
/* Botones y controles */
body.alto-contraste .btn,
body.alto-contraste .acces-switch,
body.alto-contraste .acces-panel-btn,
body.alto-contraste .btn-icon,
body.alto-contraste .prime-btn,
body.alto-contraste .option-btn {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
}
body.alto-contraste .btn:hover,
body.alto-contraste .acces-panel-btn:hover,
body.alto-contraste .btn-icon:hover,
body.alto-contraste .prime-btn:hover,
body.alto-contraste .option-btn:hover {
  background: #fff !important;
  color: #000 !important;
}
/* Estados correct/incorrect se mantienen visibles */
body.alto-contraste .option-btn.correct { background: #0a0 !important; color: #fff !important; border-color: #fff !important; }
body.alto-contraste .option-btn.incorrect { background: #a00 !important; color: #fff !important; border-color: #fff !important; }

/* Inputs y selects */
body.alto-contraste input,
body.alto-contraste textarea,
body.alto-contraste select {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}

/* Temporizadores, etiquetas y cajas informativas */
body.alto-contraste .timer,
body.alto-contraste .word-container,
body.alto-contraste .category-tag,
body.alto-contraste .feedback,
body.alto-contraste .final-score,
body.alto-contraste .score,
body.alto-contraste .mensaje-inspirador-sutil,
body.alto-contraste .mensaje-inspirador-text,
body.alto-contraste .mensaje-inspirador-autor {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}

/* Panel de accesibilidad */
body.alto-contraste .burbuja-accesibilidad .acces-toggle {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}
body.alto-contraste .burbuja-accesibilidad .acces-panel {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}
body.alto-contraste .acces-switch.active {
  background: #fff !important;
  color: #000 !important;
}

/* Enfasis de foco para teclado */
body.alto-contraste a:focus,
body.alto-contraste button:focus,
body.alto-contraste input:focus,
body.alto-contraste select:focus,
body.alto-contraste textarea:focus {
  outline: 3px solid #ff0 !important;
  outline-offset: 2px !important;
}

/* Listas y tablas */
body.alto-contraste table,
body.alto-contraste th,
body.alto-contraste td,
body.alto-contraste .barra-progreso,
body.alto-contraste .barra-progreso-inner,
body.alto-contraste .barra-progreso-meta,
body.alto-contraste .barra-progreso-meta-inner {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}

/* Listas de carpetas y elementos clicables */
body.alto-contraste #lista-carpetas li {
  color: #fff !important;
}
body.alto-contraste #lista-carpetas li.selected,
body.alto-contraste #lista-carpetas li:hover {
  background: #fff !important;
  color: #000 !important;
}

/* Compatibilidad con modo oscuro activado simultáneamente */
body.modo-oscuro.alto-contraste {
  background: #000 !important;
  color: #fff !important;
}

/* Controles de tiempo y SVG en alto contraste */
body.alto-contraste #timer-bar { background: #fff !important; }
body.alto-contraste #triangle-svg { stroke: #fff !important; }
body.alto-contraste #triangle-svg text { fill: #fff !important; }
body.alto-contraste .right-angle-marker { stroke: #fff !important; }

/* Enlaces generales */
body.alto-contraste a { color: #fff !important; text-decoration: underline !important; }
body.alto-contraste a:hover { color: #ff0 !important; }