@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,500,1,0&icon_names=analytics,folder_copy,groups,inbox,key,photo_camera,quiz,settings,space_dashboard,warning&display=swap');

/* ============================================================
   enhance.css — Capa visual moderna para SIMULACION-PROCAES
   ------------------------------------------------------------
   Se carga DESPUÉS de style.css. Añade:
     · Paleta con psicología del color según el tipo de acción
     · Iconos Material Symbols (Google) sin tocar el HTML
     · Micro-interacciones, profundidad y color en las tarjetas
     · Responsive real para celulares (incluido el panel admin)
   Si borras este archivo, el sistema sigue funcionando con el
   diseño anterior: no reemplaza nada de style.css.
   ============================================================ */

:root{
  /* ---- PSICOLOGÍA DEL COLOR ----
     Verde   → disponible, avanzar, éxito       (permiso, seguridad)
     Ámbar   → en curso, pendiente, cuidado     (atención sin alarma)
     Azul    → información, confianza, navegar  (calma, institucional)
     Púrpura → administración, control
     Rojo    → destructivo, sin respuesta       (detenerse)            */
  --ok-500:#16a34a;   --ok-600:#15803d;   --ok-050:#ecfdf5;  --ok-glow:rgba(22,163,74,.32);
  --go-500:#25D366;   --go-600:#1DA851;                       /* verde acción tipo WhatsApp */
  --warn-500:#f59e0b; --warn-600:#d97706; --warn-050:#fffbeb; --warn-glow:rgba(245,158,11,.32);
  --info-500:#0f6fc5; --info-600:#0a4f8e; --info-050:#eff6ff; --info-glow:rgba(15,111,197,.32);
  --purple-500:#7c3aed; --purple-600:#6d28d9; --purple-050:#f5f3ff;
  --danger-500:#dc2626; --danger-600:#b91c1c; --danger-050:#fef2f2; --danger-glow:rgba(220,38,38,.30);

  --shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --shadow-md: 0 4px 10px -2px rgba(16,24,40,.12), 0 2px 4px -2px rgba(16,24,40,.06);
  --shadow-lg: 0 14px 24px -6px rgba(16,24,40,.14), 0 4px 8px -4px rgba(16,24,40,.06);
  --shadow-xl: 0 24px 48px -12px rgba(16,24,40,.28);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --radius: 12px;
}

*{ -webkit-tap-highlight-color: transparent; }

/* Fondo con vida en lugar de gris plano */
body{
  background-color:#eef2f7 !important;
  background-image:
    radial-gradient(1100px 480px at 8% -12%, rgba(15,111,197,.10), transparent 60%),
    radial-gradient(900px 420px at 105% 0%, rgba(37,211,102,.09), transparent 55%),
    radial-gradient(800px 500px at 50% 115%, rgba(124,58,237,.07), transparent 60%) !important;
  background-attachment: fixed;
}
body.login-body{
  background-image:
    radial-gradient(900px 520px at 15% 0%, rgba(15,111,197,.20), transparent 60%),
    radial-gradient(800px 460px at 100% 100%, rgba(37,211,102,.16), transparent 55%) !important;
}

/* ============================================================
   ICONOS — Material Symbols (Google)
   ============================================================ */
.menu-icon::after, .upload-zone .icon::after,
.overlay .icon-warn::after, .empty-state::before{
  font-family:'Material Symbols Rounded';
  font-weight:normal; font-style:normal;
  line-height:1; letter-spacing:normal; text-transform:none;
  display:inline-block; white-space:nowrap; direction:ltr;
  -webkit-font-feature-settings:'liga'; -webkit-font-smoothing:antialiased;
}

/* Menú lateral del admin: emoji → icono vectorial */
.admin-sidebar .menu-icon{ font-size:0 !important; width:24px !important; }
.admin-sidebar .menu-icon::after{ font-size:21px; }
.menu-item[data-tab="dashboard"]   .menu-icon::after{ content:'space_dashboard' }
.menu-item[data-tab="config"]      .menu-icon::after{ content:'settings' }
.menu-item[data-tab="grupos"]      .menu-icon::after{ content:'folder_copy' }
.menu-item[data-tab="questions"]   .menu-icon::after{ content:'quiz' }
.menu-item[data-tab="postulantes"] .menu-icon::after{ content:'groups' }
.menu-item[data-tab="results"]     .menu-icon::after{ content:'analytics' }
.menu-item[data-tab="account"]     .menu-icon::after{ content:'key' }

/* Zona de subida y avisos */
.upload-zone .icon{ font-size:0 !important; }
.upload-zone .icon::after{ content:'photo_camera'; font-size:46px; color:var(--info-500); }
.overlay .icon-warn{ font-size:0 !important; }
.overlay .icon-warn::after{ content:'warning'; font-size:38px; color:var(--warn-500); }

/* Estados vacíos con icono */
.empty-state::before{
  content:'inbox'; display:block; font-size:46px;
  color:var(--gray-400); margin-bottom:10px;
}

/* ============================================================
   ANIMACIONES
   ============================================================ */
@keyframes fadeUp    { from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
@keyframes fadeIn    { from{opacity:0} to{opacity:1} }
@keyframes scaleIn   { from{opacity:0; transform:scale(.94) translateY(10px)} to{opacity:1; transform:none} }
@keyframes toastIn   { from{opacity:0; transform:translateY(20px) scale(.96)} to{opacity:1; transform:none} }
@keyframes pop       { 0%{transform:scale(1)} 45%{transform:scale(1.06)} 100%{transform:scale(1)} }
@keyframes pulseRing { 0%{box-shadow:0 0 0 0 var(--info-glow)} 70%{box-shadow:0 0 0 12px rgba(0,0,0,0)} 100%{box-shadow:0 0 0 0 rgba(0,0,0,0)} }
@keyframes pulseGreen{ 0%{box-shadow:0 0 0 0 var(--ok-glow)} 70%{box-shadow:0 0 0 12px rgba(0,0,0,0)} 100%{box-shadow:0 0 0 0 rgba(0,0,0,0)} }
@keyframes shimmer   { 0%{background-position:-450px 0} 100%{background-position:450px 0} }
@keyframes ripple    { from{opacity:.55; transform:scale(1)} to{opacity:0; transform:scale(28)} }
@keyframes breathe   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-2px)} }

.screen{ animation: fadeUp .38s var(--ease-out) both; }

/* ============================================================
   BOTONES — cada color comunica una intención
   ============================================================ */
.btn{
  position:relative; overflow:hidden; border-radius:10px;
  font-weight:600; letter-spacing:.15px;
  transition: transform .16s var(--ease-spring), box-shadow .24s var(--ease-out),
              filter .18s ease, background-color .18s ease;
}
.btn:hover:not(:disabled){ transform:translateY(-2px); filter:saturate(1.1) brightness(1.03); }
.btn:active:not(:disabled){ transform:translateY(0) scale(.97); transition-duration:.06s; }
.btn:disabled{ opacity:.45; cursor:not-allowed; filter:grayscale(.4); }
.btn:focus-visible{ outline:3px solid var(--info-glow); outline-offset:2px; }
.btn::after{
  content:''; position:absolute; inset:0; margin:auto;
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.6); opacity:0; pointer-events:none;
}
.btn:active::after{ animation: ripple .5s var(--ease-out); }

/* AVANZAR / CONFIRMAR — verde: "puedes seguir" */
.btn-primary{
  background:linear-gradient(135deg,var(--go-500),var(--ok-600)) !important;
  color:#fff !important; border:none !important;
  box-shadow:0 4px 14px -3px var(--ok-glow);
}
.btn-primary:hover:not(:disabled){ box-shadow:0 10px 22px -6px var(--ok-glow); }
.btn-primary::after{ background:rgba(255,255,255,.7); }

/* ACCIÓN DEL EXAMEN — ámbar: "atención, avanzas sin poder volver" */
.btn-action{
  background:linear-gradient(135deg,#fbbf24,var(--warn-600)) !important;
  color:#fff !important; border:none !important;
  box-shadow:0 4px 14px -3px var(--warn-glow);
}
.btn-action:hover:not(:disabled){ box-shadow:0 10px 22px -6px var(--warn-glow); }

/* ADMIN — púrpura: control */
.btn-admin{
  background:linear-gradient(135deg,#8b5cf6,var(--purple-600)) !important;
  color:#fff !important; border:none !important;
  box-shadow:0 4px 14px -3px rgba(124,58,237,.32);
}
.btn-admin:hover:not(:disabled){ box-shadow:0 10px 22px -6px rgba(124,58,237,.42); }

/* DESTRUCTIVO — rojo */
.btn-danger{
  background:linear-gradient(135deg,#ef4444,var(--danger-600)) !important;
  color:#fff !important; border:none !important;
  box-shadow:0 4px 14px -3px var(--danger-glow);
}
.btn-danger:hover:not(:disabled){ box-shadow:0 10px 22px -6px var(--danger-glow); }

/* SECUNDARIO — neutro que se tiñe de azul al tocarlo */
.btn-secondary{
  background:#fff !important; color:var(--gray-700) !important;
  border:1.5px solid var(--gray-300) !important;
  box-shadow:var(--shadow-sm);
}
.btn-secondary:hover:not(:disabled){
  border-color:var(--info-500) !important;
  color:var(--info-600) !important;
  background:var(--info-050) !important;
}
.btn-secondary::after{ background:rgba(15,111,197,.22); }

/* El botón clave del examen respira suavemente para invitar al clic */
#btnNext{ animation: breathe 3.2s ease-in-out infinite; }
#btnNext:hover{ animation:none; }

/* ============================================================
   NAVBAR / CABECERAS
   ============================================================ */
.navbar{
  background:linear-gradient(120deg,var(--info-600),var(--info-500) 55%,#1f8ad6) !important;
  box-shadow:0 2px 14px rgba(10,79,142,.28) !important;
  border-bottom:none !important;
}
.navbar .brand-icon{
  background:rgba(255,255,255,.22) !important;
  box-shadow:0 0 0 3px rgba(255,255,255,.14);
}
.breadcrumb-bar{
  background:rgba(255,255,255,.75) !important;
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(15,111,197,.12) !important;
}
.app-footer{
  background:linear-gradient(120deg,#1f2937,#111827) !important;
  color:#9ca3af !important;
  border-top:3px solid var(--info-500);
}

/* ============================================================
   TARJETAS — con color y profundidad, no blanco plano
   ============================================================ */
.card, .login-card{
  border-radius:var(--radius) !important;
  box-shadow:var(--shadow-md) !important;
  border:1px solid rgba(15,111,197,.10) !important;
  transition: box-shadow .25s var(--ease-out), transform .25s var(--ease-out);
}
.card:hover{ box-shadow:var(--shadow-lg) !important; }
.login-card{ animation: scaleIn .45s var(--ease-out) both; overflow:hidden; }

.card-header{
  background:linear-gradient(100deg,var(--info-050),#fff 70%) !important;
  border-bottom:1px solid rgba(15,111,197,.14) !important;
}
.card-header h3{ color:var(--info-600) !important; }

/* Estadísticas con identidad de color */
.admin-stat{
  border-radius:var(--radius) !important;
  border:1px solid rgba(15,111,197,.10) !important;
  box-shadow:var(--shadow-sm);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.admin-stat:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.admin-stat.blue  { background:linear-gradient(135deg,var(--info-050),#fff) !important; }
.admin-stat.green { background:linear-gradient(135deg,var(--ok-050),#fff) !important; }
.admin-stat.orange{ background:linear-gradient(135deg,var(--warn-050),#fff) !important; }
.admin-stat .stat-icon{ filter:drop-shadow(0 2px 4px rgba(0,0,0,.12)); }

.stat-tile{
  border-radius:var(--radius) !important;
  background:linear-gradient(160deg,#fff,var(--gray-50)) !important;
  border:1px solid rgba(15,111,197,.12) !important;
  box-shadow:var(--shadow-sm);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.stat-tile:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.stat-tile.ok  { background:linear-gradient(160deg,var(--ok-050),#fff) !important;   border-color:rgba(22,163,74,.28) !important; }
.stat-tile.warn{ background:linear-gradient(160deg,var(--warn-050),#fff) !important; border-color:rgba(245,158,11,.30) !important; }
.result-grid .stat-tile{ animation: fadeUp .45s var(--ease-out) both; }
.result-grid .stat-tile:nth-child(1){animation-delay:.04s}
.result-grid .stat-tile:nth-child(2){animation-delay:.08s}
.result-grid .stat-tile:nth-child(3){animation-delay:.12s}
.result-grid .stat-tile:nth-child(4){animation-delay:.16s}
.result-grid .stat-tile:nth-child(5){animation-delay:.20s}
.result-grid .stat-tile:nth-child(6){animation-delay:.24s}

.result-hero{
  background:linear-gradient(130deg,var(--ok-600),var(--go-500) 60%,#34d399) !important;
  box-shadow:0 18px 40px -14px var(--ok-glow) !important;
  border-radius:16px !important;
  animation: scaleIn .5s var(--ease-out) both;
}
.result-hero .check{ animation: pop .6s var(--ease-spring) .15s both; }

.login-header{ background:linear-gradient(130deg,var(--info-600),var(--info-500) 60%,#2aa0e8) !important; }
.login-header.admin{ background:linear-gradient(130deg,var(--purple-600),#8b5cf6) !important; }

/* Bloques de aviso */
.warn-block{
  background:linear-gradient(100deg,var(--warn-050),#fff 80%) !important;
  border-left:5px solid var(--warn-500) !important;
  border-radius:10px !important;
  box-shadow:var(--shadow-sm);
}
.error-block{
  background:linear-gradient(100deg,var(--danger-050),#fff 80%) !important;
  border-left:5px solid var(--danger-500) !important;
  border-radius:10px !important;
}
.exercise-instructions{ border-radius:10px !important; }

/* ============================================================
   TARJETAS DE SIMULACRO — el corazón de la pantalla del alumno
   ============================================================ */
#gruposCards > div, #gruposList > div{
  border-radius:14px !important;
  box-shadow:var(--shadow-sm);
  transition: transform .24s var(--ease-out), box-shadow .24s var(--ease-out);
  animation: fadeUp .4s var(--ease-out) both;
  position:relative; overflow:hidden;
}
#gruposCards > div:hover, #gruposList > div:hover{
  transform:translateY(-4px); box-shadow:var(--shadow-lg);
}
#gruposCards > div:nth-child(1){animation-delay:.04s}
#gruposCards > div:nth-child(2){animation-delay:.10s}
#gruposCards > div:nth-child(3){animation-delay:.16s}
#gruposCards > div:nth-child(4){animation-delay:.22s}

/* DISPONIBLE → verde: "adelante, puedes rendirlo" */
#gruposCards > div[style*="gray-300"]{
  border-color:rgba(22,163,74,.35) !important;
  border-left-color:var(--go-500) !important;
  background:linear-gradient(115deg,var(--ok-050) 0%, #fff 42%) !important;
}
#gruposCards > div[style*="gray-300"]:hover{
  border-color:var(--go-500) !important;
  box-shadow:0 16px 32px -12px var(--ok-glow) !important;
}
/* La insignia gris "DISPONIBLE" pasa a verde vivo */
#gruposCards span[style*="#e9ecef"]{
  background:linear-gradient(135deg,var(--go-500),var(--ok-600)) !important;
  color:#fff !important;
  box-shadow:0 2px 8px -1px var(--ok-glow);
  animation: pulseGreen 2.6s ease-out 1.2s 2;
}
/* EN CURSO → ámbar */
#gruposCards > div[style*="#f39c12"]{
  background:linear-gradient(115deg,var(--warn-050) 0%, #fff 42%) !important;
}
/* COMPLETADO → verde sereno */
#gruposCards > div[style*="#198754"]{
  background:linear-gradient(115deg,#f0fdf4 0%, #fff 42%) !important;
}
/* Cinta superior de color en cada tarjeta */
#gruposCards > div::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--go-500),transparent); opacity:.85;
}
#gruposCards > div[style*="#f39c12"]::before{ background:linear-gradient(90deg,var(--warn-500),transparent); }
#gruposCards > div[style*="#198754"]::before{ background:linear-gradient(90deg,var(--ok-500),transparent); }

/* Admin: activo verde, inactivo neutro pero legible */
#gruposList > div[style*="#198754"]{ background:linear-gradient(115deg,var(--ok-050) 0%, #fff 45%) !important; }
#gruposList span[style*="#e9ecef"]{ background:var(--gray-200) !important; color:var(--gray-700) !important; }

/* ============================================================
   OPCIONES DE RESPUESTA
   ============================================================ */
.option{
  border-radius:11px !important;
  transition: border-color .18s ease, background-color .18s ease,
              transform .16s var(--ease-spring), box-shadow .2s var(--ease-out);
  animation: fadeUp .3s var(--ease-out) both;
}
.option:nth-child(1){animation-delay:.03s}
.option:nth-child(2){animation-delay:.06s}
.option:nth-child(3){animation-delay:.09s}
.option:nth-child(4){animation-delay:.12s}
.option:hover{
  transform:translateX(5px);
  border-color:var(--info-500) !important;
  background:var(--info-050) !important;
  box-shadow:var(--shadow-sm);
}
.option.selected{
  border-color:var(--ok-500) !important;
  background:linear-gradient(100deg,var(--ok-050),#fff 75%) !important;
  box-shadow:0 0 0 3px rgba(22,163,74,.18) !important;
  animation: pop .3s var(--ease-spring);
}
.option.selected .option-letter{
  background:var(--ok-500) !important; color:#fff !important;
  animation: pulseGreen 1.1s ease-out 1;
}
.option.selected .option-radio{ border-color:var(--ok-500) !important; }
.option.selected .option-radio::after{ background:var(--ok-500) !important; }
.option-letter{ transition: background-color .2s ease, color .2s ease, transform .2s var(--ease-spring); }
.option:hover .option-letter{ transform:scale(1.1); }

/* Navegación de preguntas */
.qnav-item{
  border-radius:9px !important;
  transition: transform .18s var(--ease-spring), background-color .2s ease,
              border-color .2s ease, box-shadow .2s ease;
}
.qnav-item:hover{ transform:translateY(-3px); box-shadow:var(--shadow-sm); }
.qnav-item.answered{
  background:var(--ok-050) !important; border-color:var(--ok-500) !important; color:var(--ok-600) !important;
}
.qnav-item.current{
  background:linear-gradient(135deg,var(--info-500),var(--info-600)) !important;
  box-shadow:0 0 0 4px var(--info-glow) !important;
  animation: pop .35s var(--ease-spring);
}
.qnav-item.skipped{
  background:var(--warn-050) !important; border-color:var(--warn-500) !important; color:var(--warn-600) !important;
}
.question-text{ animation: fadeUp .35s var(--ease-out) both; }

/* Píldoras de tipo de pregunta */
.card-header .pill{
  background:linear-gradient(135deg,var(--info-500),var(--info-600)) !important;
  box-shadow:0 2px 8px -2px var(--info-glow);
}
.card-header .pill.exercise{
  background:linear-gradient(135deg,#fbbf24,var(--warn-600)) !important;
  box-shadow:0 2px 8px -2px var(--warn-glow);
}

/* Temporizadores */
.timer-badge{ transition: background-color .3s ease, color .3s ease, transform .2s ease; border-radius:20px !important; }
.timer-badge.warn{ background:var(--warn-500) !important; color:#fff !important; animation: pop .4s var(--ease-spring); }
.timer-badge.danger{
  background:var(--danger-500) !important; color:#fff !important;
  animation: pulseRing 1.2s ease-out infinite;
}

/* ============================================================
   OVERLAYS / MODALES
   ============================================================ */
.overlay{
  animation: fadeIn .22s ease both;
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  background: rgba(12,20,36,.58) !important;
  padding:16px;
}
.overlay-card{
  animation: scaleIn .34s var(--ease-spring) both;
  border-radius:18px !important;
  box-shadow:var(--shadow-xl) !important;
  border-top:5px solid var(--warn-500);
}
.overlay .icon-warn{
  background:var(--warn-050) !important;
  border-radius:50%; width:74px; height:74px;
  display:inline-flex; align-items:center; justify-content:center;
  animation: pop .5s var(--ease-spring) .1s both;
}
#overlayResults .overlay-card{ border-top-color:var(--info-500); }
#overlayDetail  .overlay-card{ border-top-color:var(--purple-500); }
#overlayGrupo .overlay-card,
#overlayImportar .overlay-card,
#overlayDuplicarGrupo .overlay-card{ border-top-color:var(--purple-500); }

#toast{
  animation: toastIn .3s var(--ease-spring) both;
  border-radius:12px !important;
  box-shadow:var(--shadow-lg) !important;
  font-weight:600;
}

/* ============================================================
   SUBIDA DE FOTOS
   ============================================================ */
.upload-zone{
  border-radius:14px !important;
  border:2px dashed rgba(15,111,197,.45) !important;
  background:linear-gradient(140deg,var(--info-050),#fff 70%) !important;
  transition: border-color .2s ease, background .25s ease, transform .2s var(--ease-out);
}
.upload-zone:hover{
  transform:translateY(-3px);
  border-color:var(--info-500) !important;
  box-shadow:0 12px 26px -14px var(--info-glow);
}
.upload-zone:active{ transform:scale(.995); }
.upload-zone.dragover{
  border-color:var(--go-500) !important;
  background:linear-gradient(140deg,var(--ok-050),#fff 70%) !important;
  transform:scale(1.015);
}
.upload-zone.dragover .icon::after{ color:var(--go-500); }
.upload-zone .icon::after{ transition:transform .3s var(--ease-spring), color .2s ease; }
.upload-zone:hover .icon::after{ transform:scale(1.12) translateY(-2px); }

.upload-item{
  border-radius:10px !important;
  animation: scaleIn .3s var(--ease-out) both;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
  box-shadow:var(--shadow-sm);
}
.upload-item:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.upload-item.uploading{
  background-image:linear-gradient(90deg,#eef2f7 0px,#dfe7f0 180px,#eef2f7 360px);
  background-size:900px 100%;
  animation: shimmer 1.2s linear infinite;
}
.upload-item .remove{
  background:var(--danger-500) !important; color:#fff !important;
  transition: transform .18s var(--ease-spring), background-color .18s ease;
}
.upload-item .remove:hover{ transform:scale(1.18) rotate(90deg); background:var(--danger-600) !important; }

/* ============================================================
   TABLAS Y LISTAS
   ============================================================ */
.results-table thead th{
  background:linear-gradient(180deg,var(--info-050),#fff) !important;
  color:var(--info-600) !important;
  border-bottom:2px solid rgba(15,111,197,.2) !important;
}
.results-table tbody tr{ transition: background-color .16s ease, box-shadow .16s ease; }
.results-table tbody tr:hover{
  background:var(--info-050) !important;
  box-shadow:inset 4px 0 0 var(--info-500);
}
#resultsList, #postulantesList{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

.qcard{
  border-radius:var(--radius) !important;
  box-shadow:var(--shadow-sm);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s ease;
}
.qcard:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--info-500) !important; }
.qcard-num{
  background:linear-gradient(135deg,var(--info-500),var(--info-600)) !important;
  color:#fff !important; box-shadow:0 2px 8px -2px var(--info-glow);
}

/* ============================================================
   FORMULARIOS
   ============================================================ */
.form-control, select, textarea,
input[type=text], input[type=email], input[type=number], input[type=password]{
  border-radius:10px !important;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.form-control:focus, select:focus, textarea:focus,
input[type=text]:focus, input[type=email]:focus,
input[type=number]:focus, input[type=password]:focus{
  border-color:var(--info-500) !important;
  box-shadow:0 0 0 4px var(--info-glow) !important;
  outline:none;
}
.form-group label{ color:var(--gray-800); }

/* Menú lateral admin */
.admin-sidebar .menu-item{
  transition: background-color .18s ease, color .18s ease, padding-left .2s var(--ease-out);
  border-radius:0 22px 22px 0; margin-right:10px;
}
.admin-sidebar .menu-item:hover{ padding-left:26px; background:var(--purple-050); color:var(--purple-600); }
.admin-sidebar .menu-item.active{
  background:linear-gradient(90deg,var(--purple-050),transparent) !important;
  color:var(--purple-600) !important;
  border-left-color:var(--purple-500) !important;
}

/* ============================================================
   RESPONSIVE — TABLETS (≤900px)
   ============================================================ */
@media (max-width:900px){
  .admin-stats{ grid-template-columns:repeat(2,1fr) !important; }
  .result-grid{ grid-template-columns:repeat(2,1fr) !important; }
}

/* ============================================================
   RESPONSIVE — CELULARES (≤768px)
   ============================================================ */
@media (max-width:768px){

  /* Panel admin: menú lateral → barra superior deslizable */
  .admin-layout{ display:block !important; }
  .admin-sidebar{
    display:flex !important; width:100% !important;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    border-right:none !important; border-bottom:1px solid var(--gray-200);
    padding:0 !important; position:sticky; top:0; z-index:40;
    background:#fff; box-shadow:0 2px 10px rgba(16,24,40,.06);
  }
  .admin-sidebar::-webkit-scrollbar{ display:none; }
  .admin-sidebar .menu-section, .admin-sidebar .divider{ display:none !important; }
  .admin-sidebar .menu-item{
    flex:0 0 auto; white-space:nowrap; flex-direction:column; gap:3px !important;
    padding:10px 15px !important; margin-right:0;
    border-left:none !important; border-bottom:3px solid transparent;
    border-radius:0; font-size:11px;
  }
  .admin-sidebar .menu-item:hover{ padding-left:15px !important; }
  .admin-sidebar .menu-item.active{
    border-left:none !important; border-bottom-color:var(--purple-500);
    background:linear-gradient(180deg,var(--purple-050),transparent) !important;
  }
  .admin-sidebar .menu-icon::after{ font-size:22px; }
  .admin-content{ padding:16px 14px !important; }

  .admin-page-header{ flex-direction:column; align-items:stretch !important; gap:12px; }
  .admin-page-header .btn{ width:100%; }

  .admin-stats{ grid-template-columns:repeat(2,1fr) !important; gap:8px !important; }
  .admin-stat{ padding:12px !important; }
  .admin-stat .stat-num{ font-size:20px !important; }
  .admin-stat .stat-lbl{ font-size:10px !important; }

  /* Botones cómodos para el dedo */
  .btn{ min-height:46px; padding:12px 16px !important; font-size:14px !important; }
  .btn-sm{ min-height:38px; padding:8px 12px !important; font-size:12px !important; }
  .btn-row{ flex-wrap:wrap; gap:8px !important; }
  .btn-row .btn{ flex:1 1 auto; }
  .btn-row.right{ justify-content:stretch !important; }

  /* Examen */
  .layout{ display:block !important; }
  .sidebar{
    display:block !important; width:100% !important; position:static !important;
    border-right:none !important; border-bottom:1px solid var(--gray-200);
    padding:12px 14px !important;
    background:rgba(255,255,255,.85) !important;
  }
  .sidebar h4{ font-size:11px !important; margin-bottom:8px !important; }
  .sidebar .quiz-nav{ display:flex !important; flex-wrap:wrap; gap:6px; }
  .sidebar .legend, .sidebar .info-box{ display:none !important; }
  .qnav-item{ width:38px !important; height:38px !important; font-size:13px !important; }

  .main{ padding:14px !important; }
  .card-header{ padding:12px 14px !important; }
  .card-header h3{ font-size:15px !important; }

  .question-text{ font-size:16px !important; line-height:1.5 !important; }
  .question-meta{ flex-wrap:wrap; gap:8px !important; }

  .option{ padding:14px 12px !important; }
  .option:hover{ transform:none; }
  .option-letter{ width:32px !important; height:32px !important; font-size:13px !important; }
  .option-text{ font-size:14px !important; line-height:1.45 !important; }

  .upload-zone{ padding:22px 14px !important; }
  .upload-zone .icon::after{ font-size:38px !important; }
  .upload-zone p{ font-size:13px !important; }
  .upload-list{ justify-content:center; }
  .upload-item{ width:46% !important; }

  /* Modales tipo panel inferior */
  .overlay{ padding:10px !important; align-items:flex-end !important; }
  .overlay-card{
    width:100% !important; max-width:100% !important; max-height:92vh !important;
    overflow-y:auto; padding:22px 16px !important;
    border-radius:20px 20px 12px 12px !important;
    animation: slideUpSheet .32s var(--ease-out) both;
  }
  @keyframes slideUpSheet{ from{opacity:0; transform:translateY(40px)} to{opacity:1; transform:none} }
  .overlay-card h3{ font-size:17px !important; }
  .overlay-card .btn-row{ flex-direction:column-reverse; }
  .overlay-card .btn-row .btn{ width:100%; }

  /* Navbar */
  .navbar{ padding:0 12px !important; height:54px !important; }
  .navbar .brand span{ font-size:14px !important; max-width:46vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .navbar .timer-badge{ font-size:12px !important; padding:5px 10px !important; }

  /* Tablas con pista de scroll */
  .results-table{ min-width:760px; }
  #resultsList{
    background:
      linear-gradient(to right,#fff 30%, rgba(255,255,255,0)),
      linear-gradient(to left,#fff 30%, rgba(255,255,255,0)) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.14), transparent),
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.14), transparent) 100% 0;
    background-repeat:no-repeat;
    background-size:34px 100%,34px 100%,12px 100%,12px 100%;
    background-attachment:local,local,scroll,scroll;
  }

  .result-grid{ grid-template-columns:repeat(2,1fr) !important; gap:8px !important; }
  .result-hero{ padding:26px 16px !important; }
  .result-hero h2{ font-size:21px !important; }

  .center-wrap{ padding:16px 12px !important; align-items:flex-start !important; }
  .form-row{ grid-template-columns:1fr !important; }

  #grupoSelector{ min-width:100% !important; }
  #grupoSelectorInfo{ margin-left:0 !important; width:100%; }

  /* Tarjetas de simulacro: el botón ocupa todo el ancho */
  #gruposCards > div > div{ flex-direction:column; align-items:stretch !important; }
  #gruposCards > div .btn{ width:100%; margin-top:6px; }
}

/* ============================================================
   RESPONSIVE — CELULARES PEQUEÑOS (≤420px)
   ============================================================ */
@media (max-width:420px){
  .admin-stats{ grid-template-columns:1fr !important; }
  .result-grid{ grid-template-columns:1fr !important; }
  .upload-item{ width:100% !important; }
  .qnav-item{ width:34px !important; height:34px !important; font-size:12px !important; }
  .navbar .brand span{ max-width:38vw; }
  .breadcrumb-bar{ font-size:11px !important; padding:7px 12px !important; }
  .option-text{ font-size:13.5px !important; }
  .btn{ font-size:13.5px !important; }
}

/* ============================================================
   IMPRESIÓN
   ============================================================ */
@media print{
  .navbar,.sidebar,.admin-sidebar,.btn,.btn-row,
  .breadcrumb-bar,#toast,.app-footer{ display:none !important; }
  body{ background:#fff !important; }
  .screen,.card{ animation:none !important; box-shadow:none !important; }
}

/* ============================================================
   ACCESIBILIDAD
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}