/* ============================================================
   SKIPPER — TEMA MODERNO
   Todos los estilos están bajo body.theme-modern
   para que el tema clásico nunca se vea afectado.
   ============================================================ */

/* ——— Variables del tema ——— */
body.theme-modern {
  --sm-primary:       #3b5bdb;
  --sm-primary-dark:  #1c3aa9;
  --sm-accent:        #6741d9;
  --sm-surface:       #ffffff;
  --sm-bg:            #f0f2f8;
  --sm-text:          #1a1a2e;
  --sm-muted:         #64748b;
  --sm-border:        #e2e8f0;
  --sm-radius:        16px;
  --sm-shadow:        0 4px 24px rgba(59,91,219,0.10);
  --sm-shadow-hover:  0 12px 36px rgba(59,91,219,0.20);

  background-color: var(--sm-bg) !important;
  font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ——— NAVBAR ——— */
body.theme-modern .navbar {
  background: linear-gradient(90deg, #1c3aa9 0%, #3b5bdb 100%) !important;
  box-shadow: 0 2px 20px rgba(28, 58, 169, 0.30) !important;
  min-height: 56px;
}

body.theme-modern .navbar .logo {
  height: 38px;
  width: auto;
}

body.theme-modern .navbar h4 {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

body.theme-modern .navbar .btn-light {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
}

body.theme-modern .navbar .btn-light:hover,
body.theme-modern .navbar .btn-light:focus {
  background: rgba(255, 255, 255, 0.22) !important;
}

body.theme-modern .navbar .btn-outline-primary {
  color: rgba(255, 255, 255, 0.90) !important;
  border-color: transparent !important;
}

body.theme-modern .navbar .btn-outline-primary:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

body.theme-modern .navbar .dropdown-menu {
  border: none;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  padding: 0.4rem 0.4rem;
  min-width: 240px;
}

body.theme-modern .navbar .dropdown-item {
  border-radius: 8px;
  padding: 0.45rem 0.9rem;
  font-size: 0.875rem;
  transition: background 0.15s;
}

body.theme-modern .navbar .dropdown-item:hover {
  background-color: #eef2ff;
  color: var(--sm-primary);
}

body.theme-modern .navbar .dropdown-header {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sm-muted);
  padding: 0.4rem 0.9rem 0.2rem;
}

body.theme-modern .navbar .dropdown-divider {
  margin: 0.3rem 0.5rem;
  border-color: var(--sm-border);
}

/* Back arrow */
body.theme-modern .navbar .text-light {
  opacity: 0.85;
  transition: opacity 0.15s;
}

body.theme-modern .navbar .text-light:hover {
  opacity: 1;
}

/* ——— LOGIN PAGE ——— */
body.theme-modern.route-login {
  background: linear-gradient(135deg, #0f2460 0%, #1c3aa9 45%, #6741d9 100%) !important;
  min-height: 100vh;
}

body.theme-modern.route-login .navbar {
  background: rgba(15, 36, 96, 0.60) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
}

body.theme-modern.route-login .principal {
  background: transparent !important;
  min-height: calc(100vh - 56px);
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 2rem !important;
}

/* La tarjeta del form de login */
body.theme-modern.route-login form.card {
  background: rgba(255, 255, 255, 0.11) !important;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 24px !important;
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255,255,255,0.08) inset !important;
  color: #fff;
  max-width: 420px !important;
  width: 100%;
  padding: 2.5rem 2.5rem 2rem !important;
  margin: 0 !important;
  transition: box-shadow 0.3s ease;
}

body.theme-modern.route-login form.card:hover {
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(255,255,255,0.12) inset !important;
}

body.theme-modern.route-login #login-logo {
  width: 200px;
  filter: brightness(0) invert(1);
  drop-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Input groups */
body.theme-modern.route-login .input-group-text {
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  border-right: none !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

body.theme-modern.route-login .form-control {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  border-left: none !important;
  color: #fff !important;
  font-size: 0.9rem;
}

body.theme-modern.route-login .form-control::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
}

body.theme-modern.route-login .form-control:focus {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.50) !important;
  box-shadow: none !important;
  color: #fff !important;
  outline: none;
}

body.theme-modern.route-login label {
  color: rgba(255, 255, 255, 0.80);
  font-size: 0.875rem;
}

/* Botón Iniciar Sesión */
body.theme-modern.route-login .btn-primary,
body.theme-modern.route-login input[type="submit"].btn-primary {
  background: #fff !important;
  border: none !important;
  color: #1c3aa9 !important;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.65rem 1.5rem;
  border-radius: 50px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
  margin-top: 0.75rem;
  letter-spacing: 0.02em;
  cursor: pointer;
}

body.theme-modern.route-login .btn-primary:hover,
body.theme-modern.route-login input[type="submit"].btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  background: #f0f4ff !important;
}

body.theme-modern.route-login .btn-primary:active,
body.theme-modern.route-login input[type="submit"].btn-primary:active {
  transform: translateY(0);
}

/* Separadores de input */
body.theme-modern.route-login .input-group {
  border-radius: 10px;
  overflow: hidden;
}

body.theme-modern.route-login .input-group:focus-within .input-group-text {
  border-color: rgba(255, 255, 255, 0.50) !important;
}

body.theme-modern.route-login .input-group:focus-within .form-control {
  border-color: rgba(255, 255, 255, 0.50) !important;
}

/* ——— PÁGINA DE INICIO — Bienvenida ——— */
body.theme-modern .principal {
  background: var(--sm-bg) !important;
  padding: 1.75rem 2rem !important;
}

body.theme-modern .alert-light.h3 {
  background: linear-gradient(90deg, var(--sm-primary-dark) 0%, var(--sm-accent) 100%) !important;
  border: none !important;
  border-radius: var(--sm-radius) !important;
  color: #fff !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  box-shadow: var(--sm-shadow);
  padding: 1rem 1.75rem;
  letter-spacing: 0.01em;
}

/* ——— TARJETAS DE MÓDULOS ——— */
body.theme-modern .section-card {
  background: var(--sm-surface) !important;
  border: 1px solid var(--sm-border) !important;
  border-radius: var(--sm-radius) !important;
  box-shadow: var(--sm-shadow) !important;
  color: var(--sm-text) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 160px;
  padding: 1.5rem 1rem !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease, color 0.15s ease !important;
  text-decoration: none !important;
}

/* Línea de color superior */
body.theme-modern .section-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--sm-primary), var(--sm-accent));
  border-radius: var(--sm-radius) var(--sm-radius) 0 0;
  opacity: 0.85;
  transition: opacity 0.2s;
}

body.theme-modern .section-card:hover {
  transform: translateY(-7px) !important;
  box-shadow: var(--sm-shadow-hover) !important;
  color: var(--sm-primary) !important;
}

body.theme-modern .section-card:hover::before {
  opacity: 1;
}

/* Íconos imagen */
body.theme-modern .section-card .imgCard {
  width: 68px !important;
  height: 68px !important;
  max-height: 68px !important;
  object-fit: contain;
  margin: 0 0 0.75rem 0 !important;
  transition: transform 0.22s ease;
}

body.theme-modern .section-card:hover .imgCard {
  transform: scale(1.08);
}

/* Íconos FontAwesome */
body.theme-modern .section-card .fas,
body.theme-modern .section-card .far,
body.theme-modern .section-card .fab {
  color: var(--sm-primary);
  font-size: 3rem !important;
  margin-bottom: 0.75rem;
  transition: transform 0.22s ease, color 0.15s;
}

body.theme-modern .section-card:hover .fas,
body.theme-modern .section-card:hover .far,
body.theme-modern .section-card:hover .fab {
  transform: scale(1.08);
  color: var(--sm-accent);
}

/* Texto de tarjeta */
body.theme-modern .section-card span {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  text-align: center;
  line-height: 1.3;
  color: inherit !important;
  font-family: 'Segoe UI', system-ui, sans-serif !important;
}

/* ——— TOGGLE DE TEMA en el dropdown ——— */
.sm-theme-toggle-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  font-size: 0.875rem;
  user-select: none;
  transition: background 0.15s;
}

body.theme-modern .sm-theme-toggle-wrapper {
  border-radius: 8px;
}

.sm-theme-toggle-wrapper:hover {
  background-color: #eef2ff;
  color: var(--sm-primary, #3b5bdb);
}

.sm-theme-toggle-wrapper label {
  margin-bottom: 0;
  cursor: pointer;
}

/* Asegura que el switch del Bootstrap 4 luzca bien */
body.theme-modern .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--sm-primary) !important;
  border-color: var(--sm-primary) !important;
}

/* ——— NOTIFICACIÓN / MODAL ——— */
body.theme-modern .modal-content {
  border-radius: var(--sm-radius);
  border: none;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.20);
}

body.theme-modern .modal-header {
  border-bottom: 1px solid var(--sm-border);
  border-radius: var(--sm-radius) var(--sm-radius) 0 0;
}

/* ——— ANIMACIÓN entrada de tarjetas ——— */
@keyframes sm-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

body.theme-modern .section-card {
  animation: sm-fade-up 0.35s ease both;
}

/* Escalonar la animación por posición (máx 8 tarjetas) */
body.theme-modern .section-card:nth-child(1) { animation-delay: 0.05s; }
body.theme-modern .section-card:nth-child(2) { animation-delay: 0.10s; }
body.theme-modern .section-card:nth-child(3) { animation-delay: 0.15s; }
body.theme-modern .section-card:nth-child(4) { animation-delay: 0.20s; }
body.theme-modern .section-card:nth-child(5) { animation-delay: 0.25s; }
body.theme-modern .section-card:nth-child(6) { animation-delay: 0.30s; }
body.theme-modern .section-card:nth-child(7) { animation-delay: 0.35s; }
body.theme-modern .section-card:nth-child(8) { animation-delay: 0.40s; }