:root {
  --primary: #9d2449;
  --primary-light: #fbeaf0;
  --secondary: #a57f2c;
  --accent: #28a745;
  --dark: #1a1a1a;
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-800: #343a40;
  --radius: 16px;
  --shadow: 0 4px 12px rgba(0,0,0,0.08);
  --header-height: 70px;
  --navbar-height: 80px;
}

body {
  font-family: 'Outfit', sans-serif;
  background-color: var(--gray-100);
  color: var(--dark);
  margin: 0;
  padding-top: var(--header-height);
  padding-bottom: var(--navbar-height);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Header */
header {
  height: var(--header-height);
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}

header .brand {
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--primary);
}

header .brand span {
  color: var(--secondary);
}

/* Bottom Navigation */
.bottom-nav {
  height: var(--navbar-height);
  background: white;
  position: fixed;
  bottom: 0;
  width: 100%;
  border-top: 1px solid var(--gray-200);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1000;
  padding-bottom: env(safe-area-inset-bottom);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #999;
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 500;
  transition: color 0.3s ease;
}

.nav-item i {
  font-size: 1.4rem;
  margin-bottom: 4px;
}

.nav-item.active {
  color: var(--primary);
}

/* Cards */
.card-custom {
  background: white;
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
  border: none;
}

.card-title {
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.card-title i {
  margin-right: 10px;
  color: var(--primary);
}

/* Glassmorphism Splash */
.splash {
  position: fixed;
  inset: 0;
  background: var(--primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  color: white;
  transition: opacity 0.5s ease;
}

.splash img {
  width: 120px;
  margin-bottom: 20px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 0.8; }
}

/* Utilities */
.text-primary { color: var(--primary) !important; }
.bg-primary-light { background-color: var(--primary-light) !important; }

/* Micro-animations */
.btn-animate:active {
  transform: scale(0.95);
}

/* ========================================================
   MODO CLARO PREMIUM - CRISTAL, SOMBRAS Y CONTORNOS INSTITUCIONALES
   (Rediseño no invasivo utilizando las estructuras premium existentes)
   ======================================================== */

/* Ocultar las vistas planas predeterminadas y mostrar las estructuras premium en ambos modos */
.pwa-light-only {
  display: none !important;
}
.pwa-dark-only {
  display: block !important;
}

/* Fondo corporal ambiental premium en modo claro */
body:not(.theme-dark) {
  background-color: #f8fafc !important;
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%) !important;
  background-attachment: fixed !important;
  color: #2d3748 !important;
}

/* Splash Screen en Modo Claro */
body:not(.theme-dark) .splash {
  background: #ffffff !important;
  background-image: 
    radial-gradient(at 0% 0%, rgba(157, 36, 73, 0.02) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(165, 127, 44, 0.02) 0px, transparent 50%) !important;
}
body:not(.theme-dark) .splash img.bg-white {
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}
body:not(.theme-dark) .splash .spinner-border {
  color: #9d2449 !important;
}

/* Encabezado y Navegación inferior con efecto esmerilado de cristal en modo claro */
header:not(.theme-dark),
header.header:not(.theme-dark) {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

header:not(.theme-dark) .brand {
  font-size: 1.7rem !important;
  font-weight: 800 !important;
  color: #7a1c3c !important; /* Burgundy logo */
  letter-spacing: -0.5px !important;
  font-family: 'Outfit', sans-serif !important;
}

header:not(.theme-dark) .brand span {
  color: #7a1c3c !important;
}

.pwa-header-logo {
  display: block !important;
  height: 42px !important;
  width: auto !important;
  object-fit: contain !important;
  margin-right: 12px !important;
  border-radius: 8px !important;
  transition: transform 0.3s ease !important;
}

.pwa-header-logo:hover {
  transform: scale(1.05) !important;
}

/* Custom theme switcher styles are active without cheap outline overrides */

.bottom-nav:not(.theme-dark) {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.02) !important;
}

.nav-item:not(.theme-dark) {
  color: #718096 !important;
}

.nav-item.active:not(.theme-dark) {
  color: #9d2449 !important;
  text-shadow: 0 0 10px rgba(157, 36, 73, 0.1) !important;
}

.nav-item.active:not(.theme-dark) i {
  color: #9d2449 !important;
}

/* Tarjetas y Contenedores Premium en Modo Claro */
.card-custom:not(.theme-dark),
.card:not(.theme-dark),
.bg-white:not(.theme-dark),
.list-group-item:not(.theme-dark) {
  background: rgba(255, 255, 255, 0.95) !important;
  background-color: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(165, 127, 44, 0.15) !important; /* Micro-borde dorado sutil */
  border-radius: 18px !important;
  box-shadow: 0 6px 14px -2px rgba(0, 0, 0, 0.12), 0 16px 36px -4px rgba(0, 0, 0, 0.18), inset 0 1px 0 0 rgba(255, 255, 255, 0.8) !important; /* Sombra doble oscurecida + Brillo interno */
  color: #2d3748 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.card-custom:not(.theme-dark):hover,
.card:not(.theme-dark):hover,
.list-group-item-action:not(.theme-dark):hover {
  border-color: rgba(165, 127, 44, 0.45) !important; /* Brillo dorado más visible en hover */
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.20), 0 4px 12px rgba(165, 127, 44, 0.15), inset 0 1px 0 0 rgba(255, 255, 255, 0.95) !important;
  transform: translateY(-2px);
}

/* Sub-bloques y detalles en Modo Claro */
.bg-light:not(.theme-dark) {
  background-color: rgba(0, 0, 0, 0.015) !important;
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
  color: #4a5568 !important;
}

.bg-light:not(.theme-dark) * {
  color: #4a5568 !important;
}

.bg-light:not(.theme-dark) .text-muted {
  color: #718096 !important;
}

/* Fotos de Alumno / Contenedores de Avatar en Modo Claro */
.bg-primary-light:not(.theme-dark) {
  background-color: rgba(157, 36, 73, 0.05) !important;
  border: 1px solid rgba(157, 36, 73, 0.15) !important;
}

.bg-primary-light:not(.theme-dark) i {
  color: #9d2449 !important;
}

img.rounded-circle.student-avatar:not(.theme-dark) {
  border-color: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.06) !important;
}

/* Tipografías y Encabezados en Modo Claro */
h1:not(.theme-dark),
h2:not(.theme-dark),
h3:not(.theme-dark),
h4:not(.theme-dark),
h5:not(.theme-dark),
h6:not(.theme-dark),
.card-title:not(.theme-dark),
.fw-bold:not(.theme-dark),
.text-dark:not(.theme-dark),
strong:not(.theme-dark),
b:not(.theme-dark) {
  color: #1a202c !important;
}

.text-muted:not(.theme-dark),
p.text-muted:not(.theme-dark),
small.text-muted:not(.theme-dark),
.text-secondary:not(.theme-dark) {
  color: #4a5568 !important;
}

.smallest:not(.theme-dark),
p.smallest:not(.theme-dark),
small.smallest:not(.theme-dark) {
  color: #718096 !important;
}

/* Acentos Visuales de Marca (Guinda Institucional) */
.text-primary:not(.theme-dark),
.card-title i:not(.theme-dark),
i.text-primary:not(.theme-dark),
.fa-user-shield:not(.theme-dark),
a.text-primary:not(.theme-dark),
.btn-link:not(.theme-dark) {
  color: #9d2449 !important;
}

/* Elementos de Lista del Selector */
.list-group-item-action:not(.theme-dark) {
  background: transparent !important;
  color: #2d3748 !important;
}

.list-group-item-action:not(.theme-dark):hover,
.list-group-item-action:not(.theme-dark):focus {
  background-color: rgba(0, 0, 0, 0.015) !important;
  color: #1a202c !important;
  border-color: rgba(165, 127, 44, 0.2) !important;
}

/* Botones en Modo Claro Premium */
.btn-outline-dark:not(.theme-dark) {
  color: #2d3748 !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  background-color: transparent !important;
}

.btn-outline-dark:not(.theme-dark):hover,
.btn-outline-dark:not(.theme-dark):active {
  background-color: rgba(0, 0, 0, 0.02) !important;
  border-color: #1a202c !important;
  color: #1a202c !important;
}

.btn-outline-secondary:not(.theme-dark) {
  color: #4a5568 !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  background-color: transparent !important;
}

.btn-outline-secondary:not(.theme-dark):hover {
  color: #2d3748 !important;
  background-color: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.25) !important;
}

.btn-primary:not(.theme-dark) {
  background-color: transparent !important;
  border: 1.5px solid #9d2449 !important;
  color: #9d2449 !important;
  box-shadow: 0 4px 15px rgba(157, 36, 73, 0.02) !important;
}

.btn-primary:not(.theme-dark):hover {
  background-color: #9d2449 !important;
  border-color: #9d2449 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 20px rgba(157, 36, 73, 0.15) !important;
}

.btn-outline-primary:not(.theme-dark) {
  background-color: transparent !important;
  border: 1.5px solid #9d2449 !important;
  color: #9d2449 !important;
  box-shadow: 0 4px 15px rgba(157, 36, 73, 0.02) !important;
}

.btn-outline-primary:not(.theme-dark):hover {
  background-color: #9d2449 !important;
  border-color: #9d2449 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 20px rgba(157, 36, 73, 0.15) !important;
}

.btn-light.rounded-circle:not(.theme-dark) {
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #4a5568 !important;
}

.btn-light.rounded-circle:not(.theme-dark):hover {
  background-color: #f7fafc !important;
}

/* Badges e Indicadores con Bordes de Color en Modo Claro */
.badge:not(.theme-dark) {
  background-color: transparent !important;
  border-width: 1px !important;
  border-style: solid !important;
}

.badge.bg-success:not(.theme-dark) {
  border-color: #28a745 !important;
  color: #28a745 !important;
  background-color: rgba(40, 167, 69, 0.04) !important;
}

.badge.bg-warning:not(.theme-dark) {
  border-color: #d97706 !important; /* Más oscuro para contraste */
  color: #d97706 !important;
  background-color: rgba(217, 119, 6, 0.04) !important;
}

.badge.bg-secondary:not(.theme-dark) {
  border-color: rgba(0, 0, 0, 0.2) !important;
  color: #4a5568 !important;
  background-color: rgba(0, 0, 0, 0.02) !important;
}

.badge.bg-danger:not(.theme-dark) {
  border-color: #dc3545 !important;
  color: #dc3545 !important;
  background-color: rgba(220, 53, 69, 0.04) !important;
}

/* Tarjeta de Notificaciones Push */
#push-card:not(.theme-dark) {
  background-color: transparent !important;
  border: 1.5px dashed #9d2449 !important;
  color: #2d3748 !important;
}

#push-card:not(.theme-dark) .btn-light {
  background-color: transparent !important;
  border: 1px solid #9d2449 !important;
  color: #9d2449 !important;
}

#push-card:not(.theme-dark) .btn-light:hover {
  background-color: rgba(157, 36, 73, 0.05) !important;
}

/* Bordes Generales Bootstrap en Modo Claro */
.border:not(.theme-dark),
.border-top:not(.theme-dark),
.border-bottom:not(.theme-dark),
.border-start:not(.theme-dark),
.border-end:not(.theme-dark) {
  border-color: rgba(0, 0, 0, 0.05) !important;
}

/* Conservar color de bordes izquierdos para tipo de reporte */
.border-start.border-4.border-warning:not(.theme-dark) {
  border-left: 4px solid #ffc107 !important;
  border-color: rgba(0, 0, 0, 0.05) !important;
}

.border-start.border-4.border-success:not(.theme-dark) {
  border-left: 4px solid #28a745 !important;
  border-color: rgba(0, 0, 0, 0.05) !important;
}

/* Modales y Diálogos en Modo Claro */
.modal-content:not(.theme-dark) {
  background-color: #ffffff !important;
  border: 1px solid rgba(165, 127, 44, 0.15) !important;
  color: #2d3748 !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05) !important;
}

/* Formulario e Inputs en Modo Claro */
input.form-control:not(.theme-dark),
select.form-select:not(.theme-dark),
textarea.form-control:not(.theme-dark) {
  background-color: rgba(0, 0, 0, 0.005) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #2d3748 !important;
}

input.form-control:focus:not(.theme-dark),
select.form-select:focus:not(.theme-dark) {
  background-color: #ffffff !important;
  border-color: #9d2449 !important;
  box-shadow: 0 0 8px rgba(157, 36, 73, 0.1) !important;
  color: #2d3748 !important;
}

/* ========================================================
   ESTILOS EXCLUSIVOS DE ALTA FIDELIDAD DEL MOCKUP SMARTPHONE (COMPARTIDOS)
   ======================================================== */
#sec-inicio:has(.card-custom:nth-of-type(2)) {
  display: grid;
  grid-template-columns: 1fr 1.25fr !important;
  gap: 16px !important;
  align-items: stretch !important;
}

#btn-install,
#push-card {
  grid-column: span 2 !important;
}

@media (max-width: 768px) {
  #sec-inicio:has(.card-custom:nth-of-type(2)) {
    grid-template-columns: 1fr 1.25fr !important; /* Keep side-by-side columns on mobile to match high-fidelity mockup! */
    gap: 10px !important;
  }
  #btn-install,
  #push-card {
    grid-column: span 2 !important;
  }
  .card-custom {
    padding: 10px !important;
    border-radius: 16px !important;
  }
}

/* Progress Bar Track Color per theme */
body:not(.theme-dark) .attendance-track {
  stroke: rgba(165, 127, 44, 0.09) !important;
}
body.theme-dark .attendance-track {
  stroke: rgba(255, 255, 255, 0.08) !important;
}

/* Percentage Text Color per theme */
body:not(.theme-dark) .attendance-pct-text {
  color: #9d2449 !important;
}
body.theme-dark .attendance-pct-text {
  color: #ffffff !important;
}

/* Text color for total days */
body:not(.theme-dark) .attendance-days-text {
  color: #4a5568 !important;
}
body.theme-dark .attendance-days-text {
  color: #94a3b8 !important;
}

/* Ficha de Estudiante Flotante y Minimalista */
.student-info-container {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 10px !important;
  margin-bottom: 25px !important;
}

.student-logout-btn:not(.theme-dark) {
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  background-color: rgba(0, 0, 0, 0.01) !important;
  color: #4a5568 !important;
}
.student-logout-btn:not(.theme-dark):hover {
  background-color: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}

.pwa-student-name:not(.theme-dark) {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: #7a1c3c !important;
  line-height: 1.10 !important; /* Interlineado menor */
}
.pwa-student-name span.pwa-lastname {
  margin-top: -3px !important; /* Compactar apellido */
}

.pwa-student-grade-group:not(.theme-dark) {
  display: block !important;
  color: #718096 !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  margin-top: 2px !important;
}

/* Etiqueta Fecticia con Clip en el Avatar */
.pwa-avatar-tag:not(.theme-dark) {
  display: none !important;
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  background: #9d2449 !important; /* Guinda */
  color: #ffffff !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 1px 7px !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 6px rgba(157,36,73,0.2) !important;
  letter-spacing: 0.5px !important;
  z-index: 10;
  text-transform: lowercase;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.pwa-avatar-tag:not(.theme-dark)::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 4px;
  background: #e2e8f0;
  border-radius: 1px;
}

/* Columna Izquierda: Círculo de Asistencia en Modo Claro */
.pwa-asistencia-circle:not(.theme-dark) {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px auto 20px auto;
  position: relative;
}

.pwa-asistencia-pill:not(.theme-dark) {
  padding: 3px 9px !important;
  border-radius: 20px !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap;
  background-color: #ffffff !important;
}

.pwa-access-divider:not(.theme-dark) {
  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.pwa-access-label:not(.theme-dark) {
  font-size: 0.75rem !important;
  color: #2d3748 !important;
  font-weight: 600 !important;
}

.pwa-access-time:not(.theme-dark) {
  font-size: 0.9rem !important;
}

/* Columna Derecha: Campana Flotante en Modo Claro */
.pwa-bell-container:not(.theme-dark) {
  display: flex;
  justify-content: center;
  margin: 10px 0;
}

.pwa-glowing-bell:not(.theme-dark) {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(165, 127, 44, 0.08) 0%, rgba(165, 127, 44, 0) 70%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pwa-glowing-bell i:not(.theme-dark) {
  color: #a57f2c !important;
  font-size: 1.8rem !important;
  filter: drop-shadow(0 0 6px rgba(165, 127, 44, 0.2));
  animation: pwa-pulse-bell-light 2s infinite ease-in-out;
}

@keyframes pwa-pulse-bell-light {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 4px rgba(165, 127, 44, 0.15));
  }
  50% {
    transform: scale(1.08);
    filter: drop-shadow(0 0 10px rgba(165, 127, 44, 0.35));
  }
}

.pwa-aviso-divider:not(.theme-dark) {
  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.pwa-sub-aviso:not(.theme-dark) {
  transition: all 0.2s ease !important;
}
.pwa-sub-aviso:not(.theme-dark):hover {
  opacity: 0.85;
}

/* ========================================================
   MODO OSCURO PREMIUM - MONOCROMÁTICO / MINIMALISTA DE CONTORNOS
   (Sincronización en assets/css/style.css)
   ======================================================== */
html.theme-dark, 
body.theme-dark {
  background-color: #0a0c10 !important;
  background: #0a0c10 !important;
  color: #e2e8f0 !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) #0a0c10;
}

/* Evitar FOUC y asegurar color de fondo instantáneo */
html.theme-dark {
  background-color: #0a0c10 !important;
}

/* Scrollbar premium para navegadores Webkit */
body.theme-dark::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
body.theme-dark::-webkit-scrollbar-track {
  background: #0a0c10;
}
body.theme-dark::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
}
body.theme-dark::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Splash Screen Premium sin destello blanco */
body.theme-dark .splash {
  background: #0a0c10 !important;
}
body.theme-dark .splash img.bg-white {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}
body.theme-dark .splash .spinner-border {
  color: #bc955c !important;
}

/* Encabezado Principal */
body.theme-dark header,
body.theme-dark header.header {
  background: rgba(10, 12, 16, 0.8) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}

body.theme-dark header .brand,
body.theme-dark header .brand span {
  color: #ffffff !important;
}

/* Custom theme switcher styles are active in dark mode */

/* Tarjetas, Contenedores y Cajas Principales (Sin Fondo, Solo Contorno Fino) */
body.theme-dark .card-custom,
body.theme-dark .card,
body.theme-dark .bg-white,
body.theme-dark .list-group-item {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
  color: #ffffff !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.theme-dark .card-custom:hover,
body.theme-dark .card:hover,
body.theme-dark .list-group-item-action:hover {
  border-color: rgba(188, 149, 92, 0.35) !important; /* Brillo oro en hover */
  box-shadow: 0 4px 20px rgba(188, 149, 92, 0.05) !important;
  transform: translateY(-2px);
}

/* Sub-bloques Internos y Detalles */
body.theme-dark .bg-light {
  background-color: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

body.theme-dark .bg-light * {
  color: #ffffff !important;
}

body.theme-dark .bg-light .text-muted {
  color: #94a3b8 !important;
}

/* Fotos de Alumno / Contenedores de Avatar */
body.theme-dark .bg-primary-light {
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

body.theme-dark .bg-primary-light i {
  color: #ffffff !important;
}

body.theme-dark img.rounded-circle.border-light {
  border-color: rgba(188, 149, 92, 0.3) !important;
  box-shadow: 0 0 15px rgba(188, 149, 92, 0.1) !important;
}

/* Tipografías y Encabezados con Alto Contraste */
body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark h4,
body.theme-dark h5,
body.theme-dark h6,
body.theme-dark .card-title,
body.theme-dark .fw-bold,
body.theme-dark .text-dark,
body.theme-dark strong,
body.theme-dark b {
  color: #ffffff !important;
}

/* Letras muy claras para Textos de Apoyo y Mutados */
body.theme-dark .text-muted,
body.theme-dark p.text-muted,
body.theme-dark small.text-muted,
body.theme-dark .text-secondary {
  color: #e2e8f0 !important;
}

body.theme-dark .smallest,
body.theme-dark p.smallest,
body.theme-dark small.smallest {
  color: #94a3b8 !important;
}

/* Acentos Visuales de Marca (Color Oro/Dorado para legibilidad Premium) */
body.theme-dark .text-primary,
body.theme-dark .card-title i,
body.theme-dark i.text-primary,
body.theme-dark .fa-user-shield,
body.theme-dark a.text-primary,
body.theme-dark .btn-link {
  color: #bc955c !important; /* Oro Institucional */
}

/* Elementos de Lista (Selector de Alumnos Guardados) */
body.theme-dark .list-group-item-action {
  background: transparent !important;
  background-color: transparent !important;
  color: #ffffff !important;
}

body.theme-dark .list-group-item-action:hover,
body.theme-dark .list-group-item-action:focus {
  background-color: rgba(255, 255, 255, 0.04) !important;
  color: #ffffff !important;
  border-color: rgba(188, 149, 92, 0.35) !important;
}

body.theme-dark .list-group-item .fw-bold {
  color: #ffffff !important;
}

/* Botones Minimalistas de Contorno */
body.theme-dark .btn-outline-dark {
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  background-color: transparent !important;
  transition: all 0.25s ease !important;
}

body.theme-dark .btn-outline-dark:hover,
body.theme-dark .btn-outline-dark:active {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.05) !important;
}

body.theme-dark .btn-outline-secondary {
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background-color: transparent !important;
  transition: all 0.25s ease !important;
}

body.theme-dark .btn-outline-secondary:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

body.theme-dark .btn-primary {
  background-color: transparent !important;
  border: 1.5px solid #bc955c !important;
  color: #bc955c !important;
  box-shadow: 0 4px 15px rgba(188, 149, 92, 0.05) !important;
  transition: all 0.25s ease !important;
}

body.theme-dark .btn-primary:hover {
  background-color: #bc955c !important;
  border-color: #bc955c !important;
  color: #0a0c10 !important;
  box-shadow: 0 4px 20px rgba(188, 149, 92, 0.25) !important;
}

body.theme-dark .btn-outline-primary {
  background-color: transparent !important;
  border: 1.5px solid #bc955c !important;
  color: #bc955c !important;
  box-shadow: 0 4px 15px rgba(188, 149, 92, 0.05) !important;
  transition: all 0.25s ease !important;
}

body.theme-dark .btn-outline-primary:hover {
  background-color: #bc955c !important;
  border-color: #bc955c !important;
  color: #0a0c10 !important;
  box-shadow: 0 4px 20px rgba(188, 149, 92, 0.25) !important;
}

body.theme-dark .btn-light.rounded-circle {
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

body.theme-dark .btn-light.rounded-circle:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Badges e Indicadores con Bordes de Color (Sin Fondo Solido) */
body.theme-dark .badge {
  background-color: transparent !important;
  border-width: 1px !important;
  border-style: solid !important;
}

body.theme-dark .badge.bg-success {
  border-color: #28a745 !important;
  color: #28a745 !important;
}

body.theme-dark .badge.bg-warning {
  border-color: #ffc107 !important;
  color: #ffc107 !important;
}

body.theme-dark .badge.bg-secondary {
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #e2e8f0 !important;
}

body.theme-dark .badge.bg-danger-light,
body.theme-dark .badge.bg-danger {
  border-color: #dc3545 !important;
  color: #dc3545 !important;
}

/* Tarjeta de Notificaciones Push */
body.theme-dark #push-card {
  background-color: transparent !important;
  border: 1.5px dashed #bc955c !important;
  color: #ffffff !important;
}

body.theme-dark #push-card .btn-light {
  background-color: transparent !important;
  border: 1px solid #ffffff !important;
  color: #ffffff !important;
}

body.theme-dark #push-card .btn-light:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Bordes Generales Bootstrap */
body.theme-dark .border,
body.theme-dark .border-top,
body.theme-dark .border-bottom,
body.theme-dark .border-start,
body.theme-dark .border-end {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Conservar color especifico de bordes izquierdos para tipo de reporte */
body.theme-dark .border-start.border-4.border-warning {
  border-left: 4px solid #ffc107 !important;
  border-color: rgba(255, 193, 7, 0.2) !important;
}

body.theme-dark .border-start.border-4.border-success {
  border-left: 4px solid #28a745 !important;
  border-color: rgba(40, 167, 69, 0.2) !important;
}

/* Barra de Navegación Inferior (Efecto Translúcido Esmerilado) */
body.theme-dark .bottom-nav {
  background: rgba(10, 12, 16, 0.8) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.theme-dark .nav-item {
  color: rgba(255, 255, 255, 0.45) !important;
  transition: all 0.2s ease !important;
}

body.theme-dark .nav-item.active {
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(188, 149, 92, 0.3) !important;
}

body.theme-dark .nav-item.active i {
  color: #bc955c !important; /* Icono activo en color oro */
}

/* Modales y Diálogos */
body.theme-dark .modal-content {
  background-color: #0a0c10 !important;
  border: 1px solid rgba(188, 149, 92, 0.2) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8) !important;
}

body.theme-dark .modal-header,
body.theme-dark .modal-footer {
  border: none !important;
  background: transparent !important;
}

body.theme-dark .btn-close {
  filter: invert(1) !important;
}

/* Formulario e Inputs */
body.theme-dark input.form-control,
body.theme-dark select.form-select,
body.theme-dark textarea.form-control {
  background-color: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

body.theme-dark input.form-control:focus,
body.theme-dark select.form-select:focus {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: #bc955c !important;
  box-shadow: 0 0 8px rgba(188, 149, 92, 0.25) !important;
  color: #ffffff !important;
}

/* ========================================================
   REFINAMIENTOS ESTÉTICOS PREMIUM DE ALTA FIDELIDAD (MOCKUP ACCORDANCE)
   ======================================================== */

/* Switch de Tema estilo Píldora Premium */
.premium-theme-switch {
  position: relative;
  width: 66px;
  height: 34px;
  background: rgba(165, 127, 44, 0.08);
  border: 1px solid rgba(165, 127, 44, 0.22);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}

.premium-theme-switch .switch-handle {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 28px;
  height: 28px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255,255,255,0.8);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

/* Posición de la píldora según el tema */
body:not(.theme-dark) .premium-theme-switch .switch-handle {
  transform: translateX(0);
}

body.theme-dark .premium-theme-switch .switch-handle {
  transform: translateX(32px);
  background: #0f172a !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

.premium-theme-switch i {
  font-size: 0.95rem;
  z-index: 2;
  transition: color 0.3s ease;
}

body:not(.theme-dark) .premium-theme-switch .icon-sun {
  color: #a57f2c !important; /* Dorado activo */
}

body:not(.theme-dark) .premium-theme-switch .icon-moon {
  color: #a0aec0 !important; /* Muted */
}

body.theme-dark .premium-theme-switch {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
}

body.theme-dark .premium-theme-switch .icon-sun {
  color: #4a5568 !important; /* Muted */
}

body.theme-dark .premium-theme-switch .icon-moon {
  color: #bc955c !important; /* Dorado activo oscuro */
}

/* Ficha del Alumno en Modo Claro (Tarjeta Tridimensional Premium) */
body:not(.theme-dark) .student-info-container {
  background: #ffffff !important;
  border: 1px solid rgba(165, 127, 44, 0.15) !important; /* Definición elegante de bordes */
  border-radius: 24px !important;
  box-shadow: 0 6px 14px -2px rgba(0, 0, 0, 0.12), 0 16px 36px -4px rgba(0, 0, 0, 0.18), inset 0 1px 0 0 rgba(255, 255, 255, 0.8) !important; /* Sombra unificada oscurecida */
  padding: 14px 22px !important; /* Compacto verticalmente, amplio horizontalmente */
  margin-top: 10px !important;
  margin-bottom: 25px !important;
}

/* Avatar del Estudiante */
.student-avatar {
  border-color: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.06) !important;
}

/* Tarjetas de Avisos Modulares Premium */
.pwa-avisos-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pwa-aviso-card {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid rgba(165, 127, 44, 0.15) !important;
  border-radius: 16px;
  padding: 16px 18px !important; /* Padding superior/inferior aumentado */
  min-height: 85px !important; /* Más alta por defecto */
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.08), 0 12px 28px -4px rgba(0, 0, 0, 0.14), inset 0 1px 0 0 rgba(255, 255, 255, 0.8) !important; /* Sombra unificada oscurecida */
  cursor: pointer;
}

.pwa-aviso-card:hover {
  transform: translateY(-1px);
  border-color: rgba(165, 127, 44, 0.45) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(165, 127, 44, 0.10), inset 0 1px 0 0 rgba(255, 255, 255, 0.9) !important;
}

.pwa-aviso-icon-container {
  width: 42px;
  height: 42px;
  background: #9d2449;
  color: #ffffff !important;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 14px;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(157, 36, 73, 0.15);
}

.pwa-aviso-icon-container i {
  font-size: 1.15rem;
  color: #ffffff !important;
}

.pwa-aviso-text-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.pwa-aviso-card-title {
  font-size: 0.98rem !important; /* Título más grande */
  font-weight: 700 !important;
  color: #1a202c !important;
  line-height: 1.20 !important;
}

.pwa-aviso-card-subtitle {
  font-size: 0.82rem !important; /* Texto de detalles más grande */
  color: #4a5568 !important; /* Gris de alto contraste */
  margin-top: 4px !important;
  white-space: normal !important; /* ¡Texto envolvente multi-renglón! */
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.35 !important;
}

/* Ajustes de los Avisos en Modo Oscuro */
body.theme-dark .pwa-aviso-card {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
}

body.theme-dark .pwa-aviso-card:hover {
  border-color: rgba(188, 149, 92, 0.35) !important;
  background-color: rgba(255, 255, 255, 0.02) !important;
}

body.theme-dark .pwa-aviso-icon-container {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff !important;
  box-shadow: none;
}

body.theme-dark .pwa-aviso-card-title {
  color: #ffffff !important;
  font-size: 0.98rem !important;
}

body.theme-dark .pwa-aviso-card-subtitle {
  color: #cbd5e1 !important;
  font-size: 0.82rem !important;
}