:root{
  --font-body:"Manrope","Segoe UI",sans-serif;
  --font-display:"Fraunces","Georgia",serif;
  --bg:#09111c;
  --panel:rgba(9,20,34,.84);
  --panel-2:rgba(17,33,53,.92);
  --card:#f8fafc;
  --text:#f8efe5;
  --muted:#b6c3d5;
  --orange:#f97316;
  --orange-dark:#c2410c;
  --blue:#0e7490;
  --green:#22c55e;
  --red:#ef4444;
  --gold:#f7c68c;
  --border:rgba(255,255,255,.12);
  --shadow:0 24px 80px rgba(0,0,0,.42);
  --content-max:1180px;
  --content-half:590px;
  --page-gutter:clamp(14px,3vw,30px);
  --bottom-nav-height:70px;
  --side-nav-width:88px;
  --side-nav-half:44px;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-body);background:#08101a;color:var(--text);min-height:100vh;position:relative}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(ellipse at 78% 12%,rgba(249,115,22,.12),transparent 34%),
    radial-gradient(ellipse at 10% 82%,rgba(14,116,144,.13),transparent 32%),
    linear-gradient(145deg,#050b14 0%,#091522 48%,#07101b 100%);
  z-index:-2;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at top right, rgba(249,115,22,.18), transparent 28%),
    radial-gradient(circle at bottom left, rgba(14,116,144,.16), transparent 25%);
  z-index:-1;
  pointer-events:none;
}
button,input,select,textarea{font:inherit}
/* Tamaño fijo: sin tirador de redimensionado (rompía la maquetación del panel admin). */
textarea{resize:none}
.topbar{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;gap:18px;align-items:center;padding:14px var(--page-gutter);background:rgba(8,17,31,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:14px;min-width:0;margin:0;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.brand-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:18px;padding:6px;background:linear-gradient(145deg,rgba(8,19,33,.96),rgba(15,29,48,.94));border:1px solid rgba(247,198,140,.3);box-shadow:0 16px 34px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08)}
.brand small{display:block;color:var(--muted);font-size:12px}

/* Asegura que el icono de la marca se adapte al contenedor de 44×44 px. La imagen se escala para ocupar todo el espacio disponible sin distorsionarse y no modifica el tamaño del encabezado. */
.brand-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  border-radius:inherit;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.22));
}
.nav{display:flex;gap:8px;flex-wrap:wrap}.nav-btn{border:1px solid var(--border);color:var(--text);background:transparent;border-radius:999px;padding:9px 14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px}.nav-btn:hover,.nav-btn.active{background:var(--orange);border-color:var(--orange);color:white}.chat-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#ef4444;color:#fff;font-size:12px;font-weight:900;line-height:1}
main{max-width:var(--content-max);margin:0 auto;padding:34px var(--page-gutter) 70px}
.hero{display:grid;grid-template-columns:1.25fr .75fr;gap:24px;align-items:stretch}
.seo-landing{margin-bottom:12px}
.seo-list{margin:18px 0 0;padding-left:20px;color:#cbd5e1;line-height:1.7}
.seo-list li + li{margin-top:8px}
.seo-side .section-title{margin-bottom:10px}
.seo-stats{margin-top:18px}
.seo-noscript{margin-top:22px}
.panel{background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:26px;padding:28px;backdrop-filter:blur(16px)}
.kicker{color:#fed7aa;text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:800}
.h1{font-family:var(--font-display);font-size:clamp(34px,5vw,62px);line-height:1.02;margin:14px 0}
.lead{font-size:18px;color:#cbd5e1;line-height:1.65}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.btn{border:0;border-radius:14px;padding:13px 18px;cursor:pointer;font-weight:800}
.btn-primary{background:var(--orange);color:white}.btn-primary:hover{background:var(--orange-dark)}
.btn-secondary{background:#233453;color:#e5e7eb;border:1px solid var(--border)}
.btn-ghost{background:transparent;color:#e5e7eb;border:1px solid var(--border)}
/* Botón "Continuar/Registrarme con Google": blanco + logo a color, tal como
   pide la guía de marca de Google, en vez de un botón secundario genérico
   más que se confunda con el resto de acciones de la pantalla. */
.btn-google{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid #dadce0;border-radius:14px;padding:12px 18px;background:#ffffff;color:#3c4043;font-weight:700;font-size:14px;font-family:inherit;cursor:pointer;transition:background-color .15s ease,box-shadow .15s ease}
.btn-google:hover{background:#f8f9fa;box-shadow:0 1px 3px rgba(60,64,67,.3)}
.btn-google:focus-visible{outline:2px solid #1a73e8;outline-offset:2px}
.btn-google:disabled{opacity:.6;cursor:not-allowed;background:#f1f3f4;box-shadow:none}
.btn-google svg{flex:0 0 auto}
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.opposition-card{position:relative;background:linear-gradient(160deg,#f8fafc,#e2e8f0);color:#0f172a;border-radius:22px;padding:22px;min-height:160px;cursor:pointer;border:3px solid transparent}
.opposition-card.available{border-color:var(--orange)}
.opposition-card.locked{
  /* Mantener estilo más atenuado pero permitir la interacción */
  opacity:.58;
  cursor:pointer;
}

/* Iconos decorativos para cada tarjeta de oposición */
.opposition-card .opposition-icon {
  width:48px;
  height:48px;
  margin-bottom:12px;
  object-fit:contain;
  display:block;
}
.tag{display:inline-flex;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800;background:#ffedd5;color:#9a3412}
.tag.off{background:#e2e8f0;color:#475569}
.section-title{font-family:var(--font-display);font-size:28px;margin:0 0 14px}
.muted{color:var(--muted)}
.login-card{max-width:520px;margin:0 auto}
.field{display:grid;gap:7px;margin:14px 0}
.field label{font-weight:800}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--border);border-radius:14px;background:#0b1220;color:var(--text);padding:13px 14px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:20px 0}
.stat{background:rgba(248,250,252,.08);border:1px solid var(--border);border-radius:18px;padding:18px}
.stat strong{display:block;font-size:28px}
.simulator{display:grid;grid-template-columns:1.1fr .9fr;gap:22px}
.topic-list{display:grid;gap:12px}
.topic{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);padding:12px;border-radius:14px;border:1px solid var(--border)}
.topic input{width:20px;height:20px;accent-color:var(--orange)}
.test-card{max-width:900px;margin:0 auto}
.question{background:#202020;border-radius:24px;padding:28px;border:1px solid rgba(255,255,255,.08)}
.question h2{font-size:21px;line-height:1.5;margin-top:0}
.answers{display:grid;gap:10px;margin:22px 0}
.answer{display:flex;gap:12px;align-items:flex-start;background:#2c2c2c;border:1px solid #3f3f46;border-radius:12px;padding:14px;cursor:pointer}
.answer input{margin-top:4px}
.answer.selected{outline:2px solid var(--orange)}
.answer.correct{background:rgba(34,197,94,.76);color:#06220f}
.answer.incorrect{background:rgba(239,68,68,.72)}
.test-footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
.progress{height:10px;background:#334155;border-radius:99px;overflow:hidden;margin:14px 0}
.progress span{display:block;height:100%;background:var(--orange);width:0}
.alert{border-left:5px solid var(--orange);background:rgba(249,115,22,.1);padding:14px;border-radius:14px;margin:16px 0}
.pending-test-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.pending-test-banner span{font-weight:600}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#0b1220;border:1px solid var(--border);padding:14px;border-radius:14px;overflow:auto;color:#bbf7d0;font-size:13px}
.hidden{display:none!important}
/* Tabla para gestión de usuarios */
.users-table{width:100%;border-collapse:collapse;margin-top:12px}
.users-table th,.users-table td{padding:10px 14px;border-bottom:1px solid var(--border)}
.users-table th{text-align:left;font-weight:600}

/* Estilos para la sección de psicotécnicos */
.psico-section{
  background:rgba(17,28,49,.84);
  border:1px solid var(--border);
  border-radius:26px;
  padding:28px;
}
.psico-card{
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  cursor:pointer;
  transition:background-color .2s,transform .2s;
}
.psico-card:hover{
  background:rgba(255,255,255,.1);
  transform:translateY(-2px);
}
.psico-card h3{
  margin:0 0 6px;
  color:var(--orange);
  font-size:20px;
}
.psico-card p{
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.4;
}

/* Estilos para las tarjetas de temas. Cada tema se muestra como una tarjeta
   interactiva que permite acceder directamente a las preguntas de ese
   apartado. Siguen un estilo similar a los psicotécnicos para mantener
   la coherencia visual. */
.topic-card{
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  cursor:pointer;
  transition:background-color .2s,transform .2s;
}
.topic-card:hover{
  background:rgba(255,255,255,.1);
  transform:translateY(-2px);
}
.topic-card h3{
  margin:0 0 6px;
  color:var(--orange);
  font-size:18px;
}
.topic-card p{
  margin:0;
  font-size:14px;
  color:var(--muted);
}
@media(max-width:850px){.hero,.simulator,.grid-2,.grid-3{grid-template-columns:1fr}.topbar{align-items:flex-start;flex-direction:column}.stats{grid-template-columns:repeat(2,1fr)}}
/* Bloques desplegables del panel de oposición */
.collapsible-block{
  margin-top:18px;
}
.collapsible-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  cursor:pointer;
  user-select:none;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px 18px;
  margin:0 0 14px;
}
.collapsible-title .toggle-icon{
  color:var(--orange);
  font-size:24px;
  line-height:1;
  flex:0 0 auto;
}
.chart-box{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--border);
}
.chart-box h3{
  margin:0 0 8px;
}
.performance-chart{
  display:grid;
  gap:12px;
  margin-top:12px;
}
.chart-row{
  display:grid;
  gap:6px;
}
.chart-label{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:13px;
  color:#e5e7eb;
}
.chart-label span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.chart-label small{
  color:var(--muted);
  white-space:nowrap;
}
.chart-bar{
  display:flex;
  height:10px;
  width:100%;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.08);
}
.bar-ok{background:#22c55e;display:block;height:100%}
.bar-bad{background:#ef4444;display:block;height:100%}

/* Corrección de márgenes y desbordamientos laterales en el panel de oposición.
   Evita que la zona de configuración, las listas de temas o las gráficas se salgan
   hacia la derecha cuando hay textos largos o columnas de grid. */
body{
  overflow-x:hidden;
}
main{
  width:100%;
}
.panel,
.psico-section,
.collapsible-block,
.simulator,
.topic-list,
.topic-grid,
.chart-box,
.performance-chart{
  max-width:100%;
  min-width:0;
}
.simulator{
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  width:100%;
}
.simulator > *,
.topic-card,
.topic,
.field,
.chart-row,
.chart-label,
.chart-bar{
  min-width:0;
}
.field input,
.field select,
.field textarea{
  min-width:0;
  max-width:100%;
  display:block;
}
.topic span,
.topic-card h3,
.chart-label span{
  min-width:0;
  overflow-wrap:anywhere;
}
.topic small,
.chart-label small{
  flex:0 0 auto;
}


/* Estadísticas compactas dentro de cada tema */
.topic-side-stats{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:120px;
  text-align:right;
  color:var(--muted);
  font-size:12px;
}
.topic-side-stats small{
  display:block;
  line-height:1.2;
  white-space:nowrap;
}
@media(max-width:850px){
  .topic-side-stats{
    text-align:left;
    min-width:0;
  }
}

/* Editor de temario en el panel de administración */
.admin-panel{
  max-width:1180px;
  margin:0 auto;
}
.admin-topic-list{
  display:grid;
  gap:10px;
  margin-top:12px;
}
.admin-topic-item{
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(255,255,255,.05);
  overflow:hidden;
}
.admin-topic-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding:8px 12px;
}
.admin-topic-title{
  display:grid;
  gap:2px;
  min-width:0;
}
.admin-topic-title strong{
  color:var(--orange);
  font-size:.88rem;
  font-weight:600;
  line-height:1.3;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.admin-topic-title small{
  font-size:.72rem;
}
.admin-topic-actions{
  display:flex;
  gap:8px;
  flex-shrink:0;
}
.icon-btn{
  border:1px solid var(--border);
  background:#0b1220;
  color:var(--text);
  border-radius:12px;
  min-width:38px;
  height:34px;
  padding:0 10px;
  cursor:pointer;
  font-weight:900;
}
.icon-btn:hover{
  background:rgba(255,255,255,.10);
}
.admin-question-list{
  border-top:1px solid var(--border);
  padding:14px;
  display:grid;
  gap:14px;
}
.admin-question-list-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.admin-question-list-head p{margin:0}
.admin-question-card{
  border:1px solid rgba(255,255,255,.09);
  background:rgba(11,18,32,.62);
  border-radius:14px;
  overflow:hidden;
  transition:border-color .18s ease,background .18s ease;
}
.admin-question-card.is-open{
  border-color:rgba(255,154,60,.45);
  background:rgba(11,18,32,.82);
}
.admin-question-summary{
  appearance:none;
  width:100%;
  border:0;
  background:transparent;
  color:var(--text);
  padding:12px;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto 24px;
  gap:10px;
  align-items:center;
  text-align:left;
  cursor:pointer;
  font:inherit;
}
.admin-question-summary:hover{background:rgba(255,255,255,.04)}
.admin-question-number{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:rgba(255,154,60,.14);
  color:var(--orange);
  font-weight:800;
  font-size:.82rem;
}
.admin-question-summary-copy{
  display:grid;
  gap:4px;
  min-width:0;
}
.admin-question-summary-copy strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.9rem;
  line-height:1.3;
}
.admin-question-summary-copy small{color:var(--muted);font-size:.72rem}
.admin-question-badges{display:flex;gap:6px;align-items:center}
.admin-question-chevron{color:var(--orange);font-size:1.35rem;font-weight:600;text-align:center}
.admin-question-editor{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(11,18,32,.72);
  border-radius:14px;
  padding:14px;
}
.admin-question-card > .admin-question-editor{
  border:0;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(7,13,24,.48);
  border-radius:0;
  padding:16px;
}
.admin-editor-section{
  padding:16px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
  background:rgba(255,255,255,.025);
}
.admin-editor-section + .admin-editor-section{margin-top:14px}
.admin-editor-section-head{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:14px;
}
.admin-editor-section-head h3{margin:0;color:#fff5ea;font-size:1rem}
.admin-editor-section-head p{margin:4px 0 0;color:var(--muted);font-size:.8rem}
.admin-editor-step{
  width:28px;
  height:28px;
  flex:0 0 28px;
  display:inline-grid;
  place-items:center;
  border-radius:9px;
  background:rgba(255,154,60,.15);
  color:var(--orange);
  font-size:.78rem;
  font-style:normal;
  font-weight:900;
}
.admin-explanation-block{border-color:rgba(255,154,60,.24);background:rgba(255,154,60,.035)}
.admin-explanation-context{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:10px;
  margin-bottom:12px;
}
.admin-explanation-context>div{
  padding:11px 12px;
  border-radius:11px;
  background:rgba(7,13,24,.58);
  border:1px solid rgba(255,255,255,.07);
}
.admin-explanation-context span{display:block;color:var(--muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.admin-explanation-context p,.admin-explanation-context strong{margin:0;color:#fff5ea;font-size:.82rem;line-height:1.45}
.admin-explanation-actions{display:flex;justify-content:flex-end;margin-top:12px}
.admin-user-stats-row td{background:rgba(127,127,127,.06);padding:16px}
.admin-user-stats-panel{display:grid;gap:12px}
.explanation-history-panel{display:grid;gap:14px}
.explanation-history-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.explanation-history-toolbar p{margin:0}
.explanation-history-list{display:grid;gap:10px}
.explanation-history-card{
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
  background:rgba(11,18,32,.62);
  overflow:hidden;
}
.explanation-history-card>summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:13px 14px;
  cursor:pointer;
  list-style-position:inside;
}
.explanation-history-main{display:grid;gap:4px;min-width:0}
.explanation-history-main strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff5ea;font-size:.88rem}
.explanation-history-main small,.explanation-history-meta small{color:var(--muted);font-size:.7rem}
.explanation-history-meta{display:flex;align-items:center;gap:10px;flex-shrink:0}
.explanation-history-body{padding:0 14px 14px;border-top:1px solid rgba(255,255,255,.07)}
.explanation-history-author{padding:10px 0;color:var(--muted);font-size:.76rem}
.explanation-history-diff{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.explanation-history-diff article{padding:12px;border-radius:11px;background:rgba(7,13,24,.68);border:1px solid rgba(255,255,255,.07)}
.explanation-history-diff article>span{display:block;margin-bottom:7px;color:var(--orange);font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.explanation-history-diff p{margin:0;color:#fff5ea;font-size:.8rem;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.explanation-history-diff em{color:var(--muted)}
.admin-answer-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 14px;
}
.admin-answer-options{
  border:0;
  padding:0;
  margin:16px 0;
  display:grid;
  gap:8px;
}
.admin-answer-options legend{
  padding:0;
  margin-bottom:8px;
  font-weight:700;
}
.admin-answer-options legend small{color:var(--muted);font-weight:400;margin-left:6px}
.admin-answer-option{
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.025);
}
.admin-answer-option:focus-within{border-color:rgba(255,154,60,.55)}
.admin-answer-correct{
  display:grid;
  grid-template-columns:20px 30px;
  align-items:center;
  gap:8px;
  cursor:pointer;
}
.admin-answer-option input[type="radio"]{
  width:18px;
  height:18px;
  margin:0;
  accent-color:var(--orange);
}
.admin-answer-option input[type="text"],
.admin-answer-option input:not([type]){margin:0}
.admin-answer-letter{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:rgba(255,255,255,.07);
  font-weight:800;
  font-size:.78rem;
}
.admin-explanation-field{
  padding:14px;
  border-radius:12px;
  background:rgba(255,154,60,.07);
  border:1px solid rgba(255,154,60,.18);
}
.admin-explanation-field small{display:block;margin-top:6px;color:var(--muted)}
.admin-editor-advanced{
  margin-top:14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.025);
}
.admin-editor-advanced summary{
  cursor:pointer;
  padding:12px 14px;
  font-weight:700;
}
.admin-editor-advanced summary{display:flex;align-items:center;gap:8px}
.admin-editor-advanced summary em{color:var(--muted);font-weight:400;font-style:normal}
.admin-editor-advanced-content{
  padding:4px 14px 14px;
  display:grid;
  gap:12px;
}
.admin-editor-primary-actions,
.admin-editor-secondary-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.admin-editor-primary-actions{margin-top:14px}
.admin-editor-secondary-actions{justify-content:flex-end}
.admin-question-editor textarea,
.admin-question-editor input,
.admin-question-editor select{
  max-width:100%;
}
@media(max-width:850px){
  .admin-topic-head{
    flex-direction:column;
  }
  .admin-answer-grid{
    grid-template-columns:1fr;
  }
  .admin-question-summary{
    grid-template-columns:32px minmax(0,1fr) 22px;
  }
  .admin-question-badges{display:none}
  .admin-question-list-head{align-items:flex-start}
  .admin-explanation-context{grid-template-columns:1fr}
  .admin-explanation-actions .btn{width:100%}
  .explanation-history-toolbar{align-items:flex-start;flex-direction:column}
  .explanation-history-card>summary{align-items:flex-start;flex-direction:column}
  .explanation-history-meta{width:100%;justify-content:space-between}
  .explanation-history-diff{grid-template-columns:1fr}
  .admin-editor-primary-actions .btn{flex:1 1 100%}
}

/* Ajustes responsivos para pantalla dividida.
   No alteran la visualización normal de escritorio; sólo actúan cuando el ancho disponible se reduce. */
img,canvas,svg{max-width:100%}
.topbar,.brand,.nav,.panel,.stat,.opposition-card,.admin-topic-item,.admin-question-editor{min-width:0}
.brand > div{min-width:0;overflow:hidden}
.brand strong,.brand small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav{min-width:0}
@media(max-width:1050px){
  .topbar{align-items:flex-start;flex-direction:column;padding:14px clamp(14px,3vw,30px)}
  .nav{width:100%;justify-content:flex-start}
  .hero,.simulator{grid-template-columns:1fr}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .users-table{display:block;overflow-x:auto;white-space:nowrap}
}
@media(max-width:650px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .panel,.psico-section{padding:20px}
  .topic-header{align-items:flex-start!important;flex-direction:column}
  .topic-side-stats{text-align:left;min-width:0}
  .admin-topic-actions{width:100%;justify-content:flex-start;flex-wrap:wrap}
}

/* Selección de oposición autorizada en admin */
.users-table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto;
}
.users-table select{
  width:100%;
  min-width:210px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#0b1220;
  color:var(--text);
  padding:9px 10px;
}
.users-table td,
.users-table th{
  vertical-align:middle;
}

/* Ajustes para pantalla dividida o ventanas estrechas.
   No modifica el diseño en pantalla normal, sólo evita que se descuadre cuando hay menos ancho. */
@media(max-width:1050px){
  body{
    overflow-x:hidden;
  }
  .topbar{
    align-items:flex-start;
    flex-direction:column;
    padding:12px 16px;
  }
  .brand{
    max-width:100%;
  }
  .brand > div{
    min-width:0;
  }
  .brand strong,
  .brand small{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:calc(100vw - 92px);
  }
  .nav{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overflow-y:visible;
    flex-wrap:nowrap;
    padding-bottom:4px;
  }
  .nav-btn{
    flex:0 0 auto;
  }
  main{
    padding:22px 12px 58px;
    max-width:100%;
  }
  .hero,
  .simulator,
  .grid-2,
  .grid-3{
    grid-template-columns:1fr!important;
  }
  .panel,
  .psico-section{
    padding:20px;
    border-radius:22px;
    max-width:100%;
    overflow:hidden;
  }
  .opposition-card{
    min-height:auto;
  }
  .stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .collapsible-title,
  .topic-header,
  .admin-topic-head,
  .chart-label{
    min-width:0;
  }
  .topic-list{
    grid-template-columns:1fr;
  }
  .topic{
    align-items:flex-start;
  }
  .topic small,
  .chart-label small{
    white-space:normal;
  }
}

@media(max-width:620px){
  .h1{font-size:32px;}
  .lead{font-size:16px;line-height:1.55;}
  .stats{grid-template-columns:1fr;}
  .panel,.psico-section{padding:16px;border-radius:18px;}
  .admin-topic-head{flex-direction:column;}
  .admin-topic-actions{width:100%;justify-content:flex-start;}
}

/* --- Ajuste adicional para pantalla dividida y edición de autorizaciones por oposición --- */
.auth-opp-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.auth-opp-chip{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(255,255,255,.05);
  min-width:0;
}
.auth-opp-chip input{
  margin-top:3px;
  accent-color:var(--orange);
  flex:0 0 auto;
}
.auth-opp-chip span{
  min-width:0;
  overflow-wrap:anywhere;
  line-height:1.25;
}

/* Superficie profesional de portada y acceso */
.hero-panel{
  background:
    linear-gradient(180deg,rgba(9,20,34,.92),rgba(9,20,34,.76));
}
.hero-proof{
  background:
    linear-gradient(180deg,rgba(20,30,47,.9),rgba(11,18,32,.78));
}
.hero-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:22px 0 4px;
}
.hero-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border-radius:999px;
  border:1px solid rgba(247,198,140,.2);
  background:rgba(247,198,140,.08);
  color:#fff4e6;
  font-weight:700;
  font-size:13px;
}
.home-shell{
  display:grid;
  gap:24px;
}
.home-hero{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);
  gap:24px;
  align-items:stretch;
}
.home-hero-copy{
  min-width:0;
}
.cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}
.metric-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:18px;
}
.metric-card{
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);
}
.metric-card span{
  display:block;
  color:var(--muted);
  font-size:13px;
}
.metric-card strong{
  display:block;
  margin-top:8px;
  font-size:24px;
  color:#fff8ef;
}
.hero-illustration{
  margin-top:22px;
  display:flex;
  justify-content:center;
}
.hero-illustration svg{
  width:100%;
  max-width:220px;
  height:auto;
}
.proof-list{
  display:grid;
  gap:12px;
  margin:18px 0 0;
}
.proof-item{
  padding:16px 18px;
  border-radius:18px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}
.proof-item strong{
  display:block;
  margin-bottom:6px;
  color:#fff5ea;
}
.section-shell{
  display:grid;
  gap:16px;
}
.section-shell + .section-shell{
  margin-top:8px;
}
.feature-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.feature-card{
  padding:22px;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(12,22,37,.82),rgba(14,20,31,.68));
  border:1px solid rgba(255,255,255,.08);
}
.feature-card h3{
  margin:0 0 10px;
  font-size:20px;
  color:#fff7ee;
}
.feature-card p{
  margin:0;
  color:#d7e0ec;
  line-height:1.6;
}
.feature-card small{
  display:block;
  margin-top:14px;
  color:var(--gold);
  font-weight:700;
}
.home-oppositions{
  display:grid;
  gap:20px;
}
.home-oppositions .opposition-card{
  box-shadow:0 12px 34px rgba(15,23,42,.18);
  overflow:hidden;
  padding:0;
  min-height:320px;
  border:1px solid rgba(249,115,22,.42);
  background:
    radial-gradient(circle at top left, rgba(249,115,22,.18), transparent 34%),
    linear-gradient(145deg,rgba(8,18,32,.98),rgba(16,33,54,.94));
  color:#fff5ea;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);
  gap:0;
  isolation:isolate;
}
.home-oppositions .opposition-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,rgba(255,255,255,.04),transparent 34%,rgba(249,115,22,.06) 100%);
  pointer-events:none;
}
.opposition-card-content{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  padding:34px 34px 30px;
}
.opposition-card-top{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.opposition-card-status{
  display:inline-flex;
  align-items:center;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
  color:#d7e0ec;
  font-size:12px;
  font-weight:800;
  letter-spacing:.03em;
}
.opposition-card-heading{
  display:flex;
  align-items:flex-start;
  gap:18px;
  margin-top:18px;
}
.opposition-icon-shell{
  flex:0 0 78px;
  width:78px;
  height:78px;
  border-radius:24px;
  padding:10px;
  background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  border:1px solid rgba(247,198,140,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 16px 32px rgba(2,8,23,.24);
}
.home-oppositions .opposition-card .opposition-icon{
  width:100%;
  height:100%;
  margin:0;
  object-fit:contain;
}
.home-oppositions .opposition-card h3{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(34px,4vw,52px);
  line-height:1.02;
  color:#fff8ef;
}
.opposition-card-subtitle{
  margin:8px 0 0;
  color:#fbd5a5;
  font-size:15px;
  line-height:1.5;
  font-weight:700;
}
.opposition-card-content > p{
  margin:24px 0 0;
  max-width:620px;
  color:#d7e0ec;
  font-size:17px;
  line-height:1.75;
}
.opposition-card-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:auto;
  padding-top:24px;
}
.opposition-meta-chip{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:10px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
  color:#fff5ea;
  font-weight:700;
}
.opposition-card-art{
  position:relative;
  min-height:100%;
}
.opposition-card-art::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(8,18,32,.96) 0%,rgba(8,18,32,.68) 18%,transparent 42%),
    linear-gradient(180deg,rgba(8,18,32,.04),rgba(8,18,32,.34));
  z-index:1;
}
.opposition-card-art img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.login-panel .section-title{
  margin-bottom:10px;
}
.login-note{
  margin-top:18px;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  color:#d7e0ec;
}
.login-note strong{
  color:#fff5ea;
}
.password-input-wrap{
  position:relative;
}
.password-input-wrap input{
  padding-right:54px;
}
.password-toggle{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:rgba(255,255,255,.06);
  color:#d7e0ec;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.password-toggle:hover,
.password-toggle.is-visible{
  background:rgba(249,115,22,.16);
  color:#fff5ea;
  border-color:rgba(249,115,22,.34);
}
.password-toggle svg{
  width:18px;
  height:18px;
}
.presence-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
}
.presence-badge.online{
  background:rgba(34,197,94,.18);
  color:#bbf7d0;
  border:1px solid rgba(34,197,94,.3);
}
.presence-badge.offline{
  background:rgba(255,255,255,.06);
  color:#d7e0ec;
  border:1px solid rgba(255,255,255,.08);
}

@media(max-width:980px){
  .home-hero,
  .feature-grid{
    grid-template-columns:1fr;
  }
  .home-oppositions .opposition-card{
    grid-template-columns:1fr;
  }
  .opposition-card-content{
    padding:28px 24px 24px;
  }
  .opposition-card-art{
    min-height:230px;
  }
  .opposition-card-art::before{
    background:
      linear-gradient(180deg,rgba(8,18,32,.12),rgba(8,18,32,.5)),
      linear-gradient(0deg,rgba(8,18,32,.96) 0%,rgba(8,18,32,.18) 46%,transparent 100%);
  }
}

@media(max-width:620px){
  .metric-grid{
    grid-template-columns:1fr;
  }
  .hero-chip-row,
  .cta-row{
    flex-direction:column;
    align-items:stretch;
  }
  .opposition-card-heading{
    gap:14px;
  }
  .opposition-icon-shell{
    width:64px;
    height:64px;
    flex-basis:64px;
    border-radius:20px;
  }
  .home-oppositions .opposition-card h3{
    font-size:clamp(28px,8vw,40px);
  }
  .opposition-card-content > p{
    font-size:16px;
  }
  .opposition-meta-chip{
    width:100%;
    justify-content:center;
  }
}
@media(max-width:1250px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }
  .topbar{
    width:100%;
    max-width:100%;
  }
  main{
    max-width:100%;
    width:100%;
    padding-left:16px;
    padding-right:16px;
    overflow:hidden;
  }
  .hero{
    grid-template-columns:1fr!important;
  }
  .hero > aside{
    margin-top:24px;
  }
  .info-panels{
    grid-template-columns:1fr!important;
  }
  .info-panels > .panel{
    grid-column:auto!important;
    width:100%;
  }
  .panel,.psico-section,.opposition-card,.topic-card,.admin-panel{
    max-width:100%;
    min-width:0;
    overflow:hidden;
  }
  .h1,.lead,.section-title,.panel p,.opposition-card p,.opposition-card h3{
    overflow-wrap:anywhere;
  }
}

@media(max-width:900px){
  .users-table,
  .users-table tbody,
  .users-table tr,
  .users-table td{
    display:block;
    width:100%;
  }
  .users-table thead{
    display:none;
  }
  .users-table tr{
    padding:12px 0;
    border-bottom:1px solid var(--border);
  }
  .users-table td{
    border-bottom:0;
    padding:8px 0;
    white-space:normal;
  }
  .users-table td:first-child{
    font-weight:800;
  }
  .auth-opp-list{
    grid-template-columns:1fr;
  }
}

@media(max-width:560px){
  .topbar{
    position:relative;
  }
  .nav{
    flex-wrap:wrap;
    overflow:visible;
  }
  .nav-btn{
    padding:8px 11px;
  }
  .brand strong,
  .brand small{
    white-space:normal;
  }
}
.auth-opp-dropdown{
  width:100%;
  max-width:100%;
  position:relative;
}
.auth-opp-dropdown summary{
  list-style:none;
  cursor:pointer;
  border:1px solid var(--border);
  background:#0b1220;
  border-radius:12px;
  padding:10px 12px;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  overflow-wrap:anywhere;
}
.auth-opp-dropdown summary::-webkit-details-marker{display:none}
.auth-opp-dropdown summary::after{
  content:'▾';
  color:var(--muted);
  flex:0 0 auto;
}
.auth-opp-dropdown[open] summary::after{content:'▴'}
.auth-opp-dropdown[open] .auth-opp-list{
  margin-top:8px;
  padding:8px;
  border:1px solid var(--border);
  background:rgba(11,18,32,.95);
  border-radius:14px;
}

/* Añadir preguntas desde el panel de administración */
.admin-add-question-btn{
  width:max-content;
  max-width:100%;
  margin-bottom:4px;
}

/* Chat usuario-administrador */
.chat-panel{
  max-width:1100px;
  margin:0 auto;
}
.chat-layout{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:18px;
  align-items:start;
}
.chat-users{
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(255,255,255,.04);
  padding:14px;
  min-width:0;
}
.chat-users h3,.chat-thread h3{
  margin-top:0;
}
.chat-user-button{
  width:100%;
  border:1px solid var(--border);
  background:#0b1220;
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  text-align:left;
  cursor:pointer;
  margin-bottom:8px;
  overflow-wrap:anywhere;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.chat-user-button:hover,.chat-user-button.active{
  background:rgba(249,115,22,.18);
  border-color:var(--orange);
}
.chat-thread{
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(255,255,255,.04);
  padding:16px;
  min-width:0;
}
.chat-thread.single{
  margin-top:18px;
}
.chat-messages{
  display:grid;
  gap:10px;
  max-height:460px;
  overflow:auto;
  padding-right:4px;
}
.chat-bubble{
  border:1px solid var(--border);
  border-radius:16px;
  padding:10px 12px;
  max-width:86%;
  background:rgba(255,255,255,.06);
  overflow-wrap:anywhere;
}
.chat-bubble.mine{
  justify-self:end;
  background:rgba(249,115,22,.18);
  border-color:rgba(249,115,22,.55);
}
.chat-bubble.theirs{
  justify-self:start;
}
.chat-bubble p{
  margin:6px 0;
}
.chat-bubble small{
  color:var(--muted);
  font-size:12px;
}
.chat-compose{
  display:grid;
  gap:10px;
  margin-top:16px;
}
.chat-compose textarea{
  width:100%;
  min-width:0;
  border:1px solid var(--border);
  border-radius:14px;
  background:#0b1220;
  color:var(--text);
  padding:12px 14px;
  resize:none;
  height:86px;
  min-height:86px;
  max-height:86px;
  overflow:auto;
}
.chat-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.chat-actions .btn{
  flex:0 0 auto;
}
@media(max-width:850px){
  .chat-layout{
    grid-template-columns:1fr;
  }
  .chat-bubble{
    max-width:100%;
  }
}

/* Mejoras beta: modo examen, buscador, rendimiento y administración */
.test-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.timer{font-weight:800;color:#fed7aa;margin:0}.timer-warn{color:#f87171}
.test-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 18px}.blank-answer{border-style:dashed}
.performance-center,.search-box{display:grid;gap:14px;margin-top:12px}.mini-stats{grid-template-columns:repeat(4,minmax(0,1fr))}.table-scroll{width:100%;overflow:auto;border-radius:16px;border:1px solid var(--border)}.performance-table{min-width:760px}.history-list{margin:0;padding-left:20px}.history-list li{margin:7px 0;color:#cbd5e1}.search-results{display:grid;gap:10px;max-height:420px;overflow:auto;padding-right:4px}.search-result{border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.05);padding:12px}.search-result p{margin:6px 0;line-height:1.45}.compact-actions{gap:8px;flex-wrap:wrap}.btn.danger,.icon-btn.danger{color:#fecaca;border-color:rgba(248,113,113,.45)}.btn.danger:hover,.icon-btn.danger:hover{background:rgba(239,68,68,.16)}.footer-links{display:flex;gap:10px;flex-wrap:wrap}.footer-links button{border:0;background:transparent;color:#cbd5e1;text-decoration:underline;cursor:pointer;padding:0}.admin-add-question-btn{margin-bottom:12px}
@media(max-width:720px){.mini-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.test-meta{align-items:flex-start}.performance-table{min-width:640px}.test-tools .muted{width:100%}}

/* Buscador de preguntas: resultado clicable que se despliega con la respuesta correcta */
.search-result{cursor:pointer;transition:border-color .16s ease,background-color .16s ease}
.search-result:hover{border-color:rgba(249,115,22,.4);background:rgba(249,115,22,.06)}
.search-result.open{border-color:rgba(249,115,22,.5);background:rgba(249,115,22,.08)}
.search-result-detail{margin-top:8px;cursor:default}
.search-result-answers{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px}
.search-result-answers li{padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,.04)}
.search-result-answers li.correct{background:rgba(34,197,94,.18);border-color:rgba(34,197,94,.5);color:#86efac;font-weight:700}

/* Parche beta 43: revisión, papelera, PWA, accesibilidad y feedback */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(249,115,22,.75);
  outline-offset: 3px;
}
.review-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(52px,1fr));
  gap:10px;
  margin:20px 0;
}
.review-chip{
  min-height:44px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(255,255,255,.05);
  color:var(--text);
  font-weight:800;
  cursor:pointer;
}
.review-chip.answered{border-color:rgba(34,197,94,.45)}
.review-chip.empty{border-color:rgba(148,163,184,.45);opacity:.85}
.review-chip.doubt{box-shadow:0 0 0 2px rgba(249,115,22,.28) inset}
.result-review{display:grid;gap:14px;margin-top:20px}
.review-question{border:1px solid var(--border);border-radius:16px;padding:16px;background:rgba(255,255,255,.04)}
.review-question.correct{border-color:rgba(34,197,94,.45)}
.review-question.wrong{border-color:rgba(239,68,68,.45)}
.review-question.blank{border-color:rgba(148,163,184,.45)}
.toast{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%) translateY(18px);
  opacity:0;
  background:#0b1220;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:999px;
  padding:12px 18px;
  box-shadow:var(--shadow);
  z-index:9999;
  transition:opacity .2s ease, transform .2s ease;
  max-width:min(92vw,680px);
  text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.backup-restore{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin:12px 0;
  padding:12px;
  border:1px dashed var(--border);
  border-radius:16px;
  background:rgba(255,255,255,.03);
}
.checkbox-field{display:flex;align-items:center;gap:10px;justify-content:flex-start}
.checkbox-field input{width:auto}
@media(max-width:760px){
  .review-grid{grid-template-columns:repeat(auto-fill,minmax(44px,1fr))}
  .toast{border-radius:18px}
}

/* Endurecimiento visual y accesibilidad v44 */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(251,146,60,.95);
  outline-offset: 3px;
}

.btn-primary,
.nav-btn.active {
  color:#111827;
  text-shadow:none;
}

.opposition-card,
.psico-card,
.topic-header,
.collapsible-title {
  overflow-wrap:anywhere;
}

.security-alert {
  margin-top:18px;
  border-color:rgba(251,146,60,.45);
}

#modalRoot {
  position:fixed;
  inset:0;
  z-index:1000;
  pointer-events:none;
}

.modal-backdrop {
  position:absolute;
  inset:0;
  background:rgba(2,6,23,.72);
  display:grid;
  place-items:center;
  padding:18px;
  pointer-events:auto;
}

.modal-card {
  width:min(520px, 100%);
  background:#0f172a;
  border:1px solid var(--border);
  border-radius:22px;
  box-shadow:var(--shadow);
  padding:22px;
}

.modal-card h2 { margin:0 0 10px; }
.modal-card p { color:var(--muted); }

.review-question.correct::before { content:'✓ Correcta'; color:#86efac; font-weight:800; display:block; margin-bottom:8px; }
.review-question.wrong::before { content:'✕ Incorrecta'; color:#fca5a5; font-weight:800; display:block; margin-bottom:8px; }
.review-question.blank::before { content:'○ En blanco'; color:#cbd5e1; font-weight:800; display:block; margin-bottom:8px; }

@media(max-width:760px){
  .topbar { align-items:flex-start; }
  .nav { width:100%; }
  .nav-btn { white-space:normal; }
  .admin-answer-grid { grid-template-columns:1fr !important; }
}

/* Evita que el usuario pueda redimensionar manualmente el cajón de sugerencias de inicio */
#note-message{
  resize:none !important;
}


/* ==========================================================
   RESPONSIVE MÓVIL COMPLETO v45
   Convierte la SPA en una interfaz mobile-first sin retirar
   ninguna función disponible en escritorio.
   ========================================================== */
html{
  width:100%;
  max-width:100%;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
img,video,canvas,svg,iframe{
  max-width:100%;
}
pre,.code,.table-scroll,.users-table-wrap,.chat-messages,.search-results{
  -webkit-overflow-scrolling:touch;
}
.btn,.nav-btn,.icon-btn,.review-chip,.chat-user-button,.auth-opp-chip,input,select,textarea,summary{
  touch-action:manipulation;
}

@media(max-width:900px){
  .topbar{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
    padding:12px 14px;
  }
  .brand{
    width:100%;
    max-width:100%;
  }
  .brand-icon{
    width:44px;
    height:44px;
    border-radius:12px;
    flex:0 0 auto;
    padding:4px;
  }
  .brand strong{
    font-size:15px;
    line-height:1.2;
  }
  .brand small{
    font-size:11px;
    line-height:1.2;
  }
  .nav{
    grid-column:1 / -1;
    width:100%;
    max-width:100%;
    display:none;
    flex-direction:column;
    flex-wrap:nowrap;
    gap:8px;
    overflow:auto;
    max-height:calc(100vh - 92px);
    padding:10px;
    border:1px solid var(--border);
    border-radius:18px;
    background:rgba(11,18,32,.96);
    box-shadow:var(--shadow);
  }
  .nav-btn{
    width:100%;
    min-height:44px;
    justify-content:center;
    border-radius:14px;
    white-space:normal;
    text-align:center;
  }
  main{
    width:100%;
    max-width:100%;
    padding:20px 12px 76px;
    overflow:visible;
  }
  .footer{
    padding-left:12px;
    padding-right:12px;
    gap:8px;
    text-align:center;
  }
  .footer > span{
    width:100%;
  }
  .h1{
    font-size:clamp(30px,9vw,42px);
    line-height:1.08;
  }
  .section-title{
    font-size:clamp(23px,7vw,30px);
    line-height:1.15;
  }
  .lead{
    font-size:16px;
    line-height:1.55;
  }
  .hero,
  .simulator,
  .grid-2,
  .grid-3,
  .info-panels,
  .chat-layout{
    grid-template-columns:1fr !important;
  }
  .panel,
  .psico-section,
  .question,
  .modal-card{
    padding:18px;
    border-radius:20px;
    overflow:visible;
  }
  .opposition-card,
  .psico-card,
  .topic-card,
  .admin-topic-item,
  .admin-question-editor,
  .review-question,
  .search-result{
    border-radius:16px;
  }
  .actions,
  .compact-actions,
  .test-footer,
  .test-tools,
  .backup-restore{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .actions .btn,
  .compact-actions .btn,
  .test-footer .btn,
  .test-tools .btn,
  .backup-restore .btn,
  .admin-add-question-btn{
    width:100%;
  }
  .stats,
  .mini-stats{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px;
  }
  .stat{
    padding:14px;
    border-radius:16px;
  }
  .stat strong{
    font-size:clamp(22px,8vw,30px);
    overflow-wrap:anywhere;
  }
  .field{
    margin:12px 0;
  }
  .field input,
  .field select,
  .field textarea,
  input[type="file"]{
    min-height:44px;
    font-size:16px;
  }
  input[type="file"]{
    width:100%;
    max-width:100%;
  }
  .collapsible-title{
    align-items:center;
    padding:13px 14px;
    border-radius:16px;
  }
  .topic-header,
  .admin-topic-head{
    flex-direction:column !important;
    align-items:stretch !important;
  }
  .topic-side-stats{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:4px 10px;
    text-align:left;
    width:100%;
  }
  .topic-side-stats small{
    white-space:normal;
  }
  .topic{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:start;
  }
  .topic small{
    grid-column:2;
  }
  .auth-opp-list,
  .admin-answer-grid{
    grid-template-columns:1fr !important;
  }
  .admin-topic-actions{
    width:100%;
    flex-wrap:wrap;
  }
  .admin-topic-actions .icon-btn{
    flex:1 1 44px;
    min-height:42px;
  }
  .admin-question-list{
    padding:12px;
  }
  .performance-table{
    min-width:680px;
  }
  .table-scroll,
  .users-table-wrap{
    margin-inline:-2px;
  }
  .chat-users,
  .chat-thread{
    padding:14px;
    border-radius:16px;
  }
  .chat-actions .btn{
    width:100%;
  }
  .chat-messages,
  .search-results{
    max-height:55vh;
  }
  .chat-bubble{
    max-width:100%;
  }
  .test-card{
    max-width:100%;
  }
  .question h2{
    font-size:18px;
    line-height:1.45;
  }
  .answer{
    min-height:48px;
    padding:13px;
  }
  .answer input{
    flex:0 0 auto;
  }
  .review-grid{
    grid-template-columns:repeat(auto-fill,minmax(44px,1fr));
  }
  .modal-backdrop{
    align-items:end;
    padding:12px;
  }
  .modal-card{
    width:100%;
    max-height:88vh;
    overflow:auto;
  }
  .toast{
    width:calc(100vw - 24px);
    max-width:calc(100vw - 24px);
    border-radius:18px;
  }
}

@media(max-width:600px){
  .topbar{
    position:sticky;
    top:0;
  }
  .brand small{
    display:none;
  }
  main{
    padding-left:10px;
    padding-right:10px;
  }
  .panel,
  .psico-section,
  .question,
  .modal-card{
    padding:15px;
    border-radius:18px;
  }
  .stats,
  .mini-stats{
    grid-template-columns:1fr !important;
  }
  .stat{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
  }
  .stat strong{
    text-align:right;
  }
  .opposition-card,
  .psico-card,
  .topic-card{
    padding:15px;
  }
  .opposition-card .opposition-icon{
    width:42px;
    height:42px;
  }
  .topic-side-stats{
    grid-template-columns:1fr;
  }
  .test-meta{
    display:grid;
    gap:4px;
  }
  .timer{
    width:100%;
  }
  .performance-table{
    min-width:620px;
  }
  .history-list,
  .notes-list{
    padding-left:18px !important;
  }
  .footer-links{
    justify-content:center;
  }
}

@media(max-width:420px){
  .brand strong{
    font-size:14px;
  }
  .h1{
    font-size:29px;
  }
  .lead,
  .muted,
  .panel p,
  .psico-card p,
  .topic-card p{
    font-size:14px;
  }
  .btn{
    padding:12px 14px;
    border-radius:13px;
  }
  .question h2{
    font-size:17px;
  }
  .answer{
    gap:10px;
  }
}

@media(hover:none){
  .psico-card:hover,
  .topic-card:hover{
    transform:none;
  }
}


/* ==========================================================
   v47 · Scroll táctil real y controles móviles completos
   Permite desplazar la pantalla arrastrando el dedo en móvil
   y evita que cabeceras, menús o paneles bloqueen la interacción.
   ========================================================== */
html,
body{
  height:auto !important;
  min-height:100%;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:auto;
}
body{
  position:relative;
  touch-action:pan-y pinch-zoom;
}
#app,
main,
.footer,
.panel,
.psico-section,
.question,
.test-card,
.admin-panel,
.chat-layout,
.chat-thread,
.chat-users,
.opposition-card,
.topic-card,
.psico-card{
  touch-action:pan-y pinch-zoom;
}
button,
.btn,
.nav-btn,
.icon-btn,
.answer,
.answer label,
.topic input,
input,
select,
textarea,
label{
  touch-action:manipulation;
}
input,
select,
textarea{
  -webkit-user-select:text;
  user-select:text;
}

@supports (-webkit-touch-callout:none){
  html{min-height:-webkit-fill-available;}
  body{min-height:-webkit-fill-available;}
}

@media(max-width:900px){
  body{
    min-height:100svh;
    overflow-y:auto !important;
  }
  .topbar{
    z-index:1000;
  }
  main,
  #app{
    min-height:calc(100svh - 84px);
    overflow:visible !important;
    -webkit-overflow-scrolling:touch;
  }
  .nav{
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y pinch-zoom;
  }
  .actions,
  .test-footer,
  .backup-restore,
  .admin-topic-actions,
  .compact-actions{
    position:relative;
    z-index:1;
  }
  .modal-card{
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y pinch-zoom;
  }
}

/* v50 · Calidad, reportes, planificador y analítica */
.quality-dashboard{
  margin:18px 0 22px;
  padding:18px;
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(248,250,252,.06);
}
.quality-stats{grid-template-columns:repeat(6,minmax(0,1fr));}
.quality-progress{
  height:12px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.12);
  margin:14px 0 8px;
}
.quality-progress span{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--orange),#facc15);
}
.quality-filters{margin-top:12px}
.review-chip.active{outline:2px solid var(--orange);outline-offset:2px}
.quality-editor{position:relative}
.quality-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.tag.ok{background:#dcfce7;color:#166534}
.tag.warn{background:#fee2e2;color:#991b1b}
.report-list{display:grid;gap:12px;margin-top:12px}
.report-card{
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  background:rgba(255,255,255,.06);
}
.report-card.resolved{opacity:.72}
.report-card strong{display:block}
.report-card small{display:block;color:var(--muted);margin-top:4px}
.planner-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.planner-week{
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px;
  background:rgba(255,255,255,.06);
}
.planner-week h3{margin-top:0}
.pro-tools{margin-top:24px;padding-top:16px;border-top:1px solid var(--border)}
.table-scroll code{white-space:normal;word-break:break-word;font-size:12px}
@media (max-width:900px){
  .quality-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .planner-grid{grid-template-columns:1fr}
}

/* ==========================================================
   v51 · Avisos globales
   ========================================================== */
.announcement-compose{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:24px;
  padding:16px;
  border:1px solid rgba(148,163,184,.35);
  border-radius:14px;
  background:rgba(15,23,42,.35);
}
.announcement-compose select,
.announcement-compose input,
.announcement-compose textarea{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(148,163,184,.45);
  background:rgba(2,6,23,.55);
  color:inherit;
  font:inherit;
  resize:none;
}
.field-label{
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.02em;
  opacity:.85;
}
.section-subtitle{
  margin:20px 0 12px;
  font-size:1.1rem;
}
.updates-list{display:flex;flex-direction:column;gap:10px}
.update-item{
  display:block;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:inherit;
  text-decoration:none;
  transition:border-color .16s ease,background-color .16s ease;
}
@media(hover:hover){
  .update-item:hover{border-color:rgba(249,115,22,.4);background:rgba(249,115,22,.08)}
}
.update-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:6px}
.update-date{
  font-size:11.5px;
  font-weight:800;
  color:var(--orange);
  letter-spacing:.03em;
}
.update-dept{font-size:12px;color:var(--muted)}
.update-title{margin:0;font-size:14.5px;line-height:1.45;overflow-wrap:anywhere}
.update-title a{color:inherit}
.update-item-admin{
  border-color:rgba(249,115,22,.35);
  background:rgba(249,115,22,.05);
}
.affected-question-list{
  list-style:none;
  margin:10px 0 0;
  padding:0;
  display:grid;
  gap:8px;
}
.affected-question-list li{
  padding:10px 12px;
  border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  font-size:13.5px;
  line-height:1.5;
}
.announcement-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.announcement-card{
  border:1px solid rgba(249,115,22,.35);
  border-left:4px solid #f97316;
  border-radius:12px;
  background:rgba(15,23,42,.45);
  overflow:hidden;
}
.announcement-card>summary{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  cursor:pointer;
  list-style-position:inside;
}
.announcement-title-wrap{min-width:0}
.announcement-title{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#fff5ea;
  font-size:.92rem;
}
.announcement-meta{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.announcement-meta small{color:var(--muted);font-size:.72rem}
.announcement-body{padding:0 16px 14px;border-top:1px solid rgba(255,255,255,.07)}
.announcement-target{
  margin:10px 0 0;
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#fb923c;
}
.announcement-text{
  margin:8px 0 10px;
  white-space:pre-wrap;
  line-height:1.5;
}
.announcement-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  opacity:.85;
}
.btn-small{
  padding:4px 10px;
  font-size:.8rem;
}
.btn[disabled],
.btn-small[disabled]{
  opacity:.45;
  cursor:not-allowed;
}
.topic-toolbar{
  display:grid;
  gap:12px;
  margin-bottom:16px;
}
.topic-toolbar .muted{
  margin:0;
}
.topic-toolbar-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.topic-pager{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.topic-pager-label{
  color:var(--muted);
  font-size:14px;
  font-weight:700;
}
/* Mismo formato de filas compactas que el selector del simulacro:
   una columna, título contenido y datos a la derecha. */
.compact-topic-grid{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.compact-topic-grid .topic-card{
  padding:8px 12px;
  border-radius:12px;
}
.compact-topic-grid .topic-header{
  align-items:center!important;
  gap:10px;
}
.compact-topic-grid .topic-card h3{
  font-size:.88rem;
  font-weight:600;
  line-height:1.3;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.compact-topic-grid .topic-header small.muted{
  font-size:.72rem;
}
.compact-topic-grid .topic-side-stats{
  flex:none;
  flex-direction:row;
  flex-wrap:wrap;
  gap:4px 10px;
  min-width:0;
  font-size:.72rem;
  text-align:right;
  justify-content:flex-end;
}
.topic-card-readonly{
  cursor:default;
}
.topic-card-readonly:hover{
  transform:none;
}
.public-syllabus{
  padding:clamp(18px,3vw,28px);
}
.public-syllabus-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:8px;
}
.public-syllabus-heading h2{
  margin:4px 0 0;
  font-size:clamp(1.25rem,3vw,1.7rem);
}
.public-topic-list{
  list-style:none;
  counter-reset:public-topic;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:18px 0 0;
  padding:0;
}
.public-topic-list li{
  counter-increment:public-topic;
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  align-items:start;
  gap:10px;
  min-width:0;
  padding:11px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(255,255,255,.035);
  color:var(--text);
  line-height:1.4;
}
.public-topic-list li::before{
  content:counter(public-topic,decimal-leading-zero);
  color:var(--gold);
  font-size:.75rem;
  font-weight:900;
  letter-spacing:.04em;
  padding-top:2px;
}
.public-topic-list li span{
  overflow-wrap:anywhere;
}
.topic-readonly-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
@media (max-width:680px){
  .public-syllabus-heading{
    align-items:center;
  }
  .public-topic-list{
    grid-template-columns:1fr;
  }
}
/* Selector de temas del simulacro: filas finas y legibles en vez de
   tarjetas grandes, para que la lista se vea limpia y compacta. */
.compact-topic-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.compact-topic{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:12px;
  min-height:0;
}
.compact-topic input{
  flex:none;
  width:18px;
  height:18px;
}
.compact-topic span{
  flex:1;
  min-width:0;
  font-weight:600;
  font-size:.88rem;
  line-height:1.3;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.compact-topic small{
  flex:none;
  margin-left:auto;
  font-size:.75rem;
  white-space:nowrap;
}
@media (max-width: 640px){
  .announcement-card>summary,
  .announcement-foot{
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
  }
  .compact-topic-grid,
  .compact-topic-list{
    grid-template-columns:1fr;
  }
  .topic-toolbar-actions,
  .topic-pager{
    justify-content:flex-start;
  }
}

/* ===== v82 · Pestaña Ranking ===== */
.ranking-table td:first-child{font-weight:700;width:52px}
.ranking-me td{background:rgba(249,115,22,.14)}
.ranking-me td:first-child{border-left:3px solid var(--orange, #f97316)}
.ranking-you-tag{
  display:inline-block;
  margin-left:8px;
  padding:2px 8px;
  border-radius:999px;
  background:var(--orange, #f97316);
  color:#0b1220;
  font-size:.72rem;
  font-weight:700;
  vertical-align:middle;
}

/* ===== Móvil: en el test, el botón principal (Verificar / Siguiente pregunta)
   aparece justo debajo de las respuestas, antes que el resto de acciones. ===== */
@media(max-width:900px){
  .question{display:flex;flex-direction:column}
  .question h2{order:0}
  .question .answers{order:1}
  .question .alert{order:2}
  .question .test-footer{order:3;flex-direction:column}
  .question .test-tools{order:4;margin-bottom:0}
}

/* Psicotécnicos con el mismo formato de filas compactas que los demás listados. */
.psico-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.psico-list .psico-card{
  display:flex;
  flex-direction:column;
  padding:10px 14px;
  border-radius:12px;
}
.psico-list .psico-card-header{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
  cursor:pointer;
}
.psico-list .psico-card h3{
  margin:0;
  font-size:.9rem;
  font-weight:700;
  line-height:1.3;
}
.psico-list .psico-card p{
  margin:0;
  flex:1;
  min-width:220px;
  font-size:.78rem;
  color:var(--muted);
  line-height:1.4;
}

/* En móvil, los listados compactos mantienen el formato de fila
   (el bloque genérico de arriba los forzaba a columna con !important).
   OJO: esto NO debe aplicarse a .admin-topic-head (editor de temario y
   psicotécnicos en el panel de administración): ahí el texto es largo
   (título + descripción) y forzar la fila hacía que los botones de
   editar/borrar quedaran superpuestos encima del texto en móvil. */
@media(max-width:900px){
  .compact-topic-grid .topic-header{
    flex-direction:row !important;
    align-items:center !important;
  }
  .compact-topic-grid .topic-side-stats{
    display:flex;
    flex-direction:column;
    flex:none;
    width:auto;
    gap:2px;
    text-align:right;
    font-size:.68rem;
  }
}

/* ============================================================
   Pulido móvil integral: en pantallas de teléfono los paneles,
   cajetines, números y títulos bajan de escala para que cada
   pantalla muestre más contenido, ordenado y sin desbordes.
   ============================================================ */
@media(max-width:640px){
  main{padding:14px 10px 44px}

  /* Paneles y secciones: menos aire, más contenido visible */
  .panel,.psico-section{padding:14px 12px;border-radius:16px}
  .section-title{font-size:20px;margin:0 0 10px}
  .panel h2{font-size:17px;margin:18px 0 10px}
  .panel h3{font-size:15px}
  .kicker{font-size:10px;letter-spacing:.12em}
  .h1{font-size:clamp(23px,6.5vw,30px);margin:10px 0;line-height:1.12}
  .lead{font-size:14.5px;line-height:1.55}
  .muted{font-size:.86rem}
  .alert{padding:10px 12px;font-size:.88rem;margin:12px 0;border-radius:10px}

  /* Cajetines de estadísticas: la mitad de altura, números contenidos */
  .stats,.mini-stats{gap:8px;margin:12px 0}
  .stat{padding:9px 11px;border-radius:12px}
  .stat span{font-size:10.5px;letter-spacing:.02em}
  .stat strong{font-size:17px;margin-top:2px;line-height:1.2}

  /* Formularios: compactos pero con letra de 16px (evita el zoom de iOS) */
  .field{margin:10px 0;gap:5px}
  .field label{font-size:.85rem}
  .field input,.field select,.field textarea{padding:10px 12px;border-radius:10px;font-size:16px}
  .login-note{font-size:.8rem}

  /* Botones y acciones */
  .btn{padding:11px 14px;border-radius:12px;font-size:.92rem}
  .btn-small{padding:7px 10px;font-size:.8rem}
  .actions,.compact-actions{gap:8px;margin-top:14px}

  /* Desplegables */
  .collapsible-block{margin-top:12px}
  .collapsible-title{padding:11px 14px;border-radius:14px;margin-bottom:10px;font-size:16px}
  .collapsible-title span{font-size:20px}

  /* Test: la pregunta y las respuestas dominan la pantalla */
  .question{padding:14px 12px;border-radius:16px}
  .question h2{font-size:16.5px;line-height:1.45;margin:0 0 4px}
  .answers{gap:8px;margin:14px 0}
  .answer{padding:10px 12px;border-radius:10px;font-size:.92rem;line-height:1.4}
  .test-meta{font-size:.8rem;margin-bottom:6px}
  .test-tools{margin:8px 0 10px}
  .test-tools .muted{font-size:.78rem}
  .test-footer{gap:8px}
  .progress{height:8px;margin:10px 0}
  .review-question{padding:12px;font-size:.9rem}
  .review-question h3{font-size:.95rem}

  /* Portada */
  .home-hero{gap:12px}
  .hero{gap:12px}
  .hero-chip-row{gap:6px}
  .hero-chip{font-size:11px;padding:5px 10px}
  .cta-row{gap:8px}
  .metric-grid{gap:8px}
  .metric-card{padding:9px 11px;border-radius:12px}
  .metric-card span{font-size:10.5px}
  .metric-card strong{font-size:16px}
  .proof-item{padding:10px 12px;border-radius:12px}
  .proof-item strong{font-size:.9rem}
  .proof-item span{font-size:.8rem}
  .section-shell{margin-top:14px}
  .feature-card{padding:12px 14px;border-radius:14px}
  .feature-card h3{font-size:15px;margin:0 0 6px}
  .feature-card p{font-size:.85rem;margin:0 0 6px}
  .feature-card small{font-size:.72rem}
  .seo-list{font-size:.88rem;line-height:1.55;padding-left:18px}

  /* Tarjetas de oposición */
  .opposition-card{padding:14px;border-radius:16px;min-height:0}
  .opposition-card h3{font-size:16px}
  .opposition-card-subtitle{font-size:.82rem}
  .opposition-card p{font-size:.85rem}
  .opposition-meta-chip{font-size:.7rem}

  /* Tablas y paginadores */
  .users-table th,.users-table td{padding:7px 9px;font-size:.8rem}
  .table-scroll table{font-size:.8rem}
  .table-scroll th,.table-scroll td{padding:7px 9px}
  .topic-pager{gap:6px}
  .topic-pager-label{font-size:.8rem}
  .topic-toolbar{gap:6px}
  .topic-toolbar p{font-size:.82rem;margin:4px 0}

  /* Avisos y comunicación */
  .announcement-compose select,.announcement-compose input,.announcement-compose textarea{padding:9px 11px;font-size:16px}
  .announcement-card>summary{padding:10px 12px}
  .announcement-body{padding:0 12px 10px}
  .announcement-text{font-size:.9rem}

  /* Ranking */
  .ranking-table td:first-child{width:36px}
  .ranking-you-tag{font-size:.62rem;padding:2px 6px}

  /* Pie de página */
  .footer{font-size:11.5px;gap:6px;padding:14px 12px}
  .footer-links button{font-size:11.5px}
}

/* ==========================================================
   v100 · Orden visual de la pestaña Oposición
   Antes, "Test por temas", "Realizar simulacro", "Buscador" y
   "Psicotécnicos" eran cuatro barras idénticas apiladas sin aire
   ni jerarquía, y "Analítica personal" aparecía mal encajada por
   un hack de texto. Ahora hay dos grupos con título propio
   (Practicar / Herramientas), cada bloque tiene icono y subtítulo,
   y las filas de temas usan pastillas de color en vez de texto
   plano para que se lea de un vistazo.
   ========================================================== */

/* Cabeceras de grupo: "Practicar" y "Herramientas" */
.opp-section-group{margin-top:30px}
.opp-section-group:first-child{margin-top:24px}
.opp-group-head{margin-bottom:16px}
.opp-group-title{
  font-family:var(--font-display);
  font-size:22px;
  margin:0 0 4px;
  color:#fff5ea;
}
.opp-group-subtitle{
  margin:0;
  color:var(--muted);
  font-size:14px;
}

/* Cabecera de cada bloque desplegable: icono + título + subtítulo */
.collapsible-title{
  gap:16px;
}
.collapsible-title-main{
  display:flex;
  align-items:center;
  gap:14px;
  flex:1 1 auto;
  min-width:0;
}
.collapsible-icon{
  flex:0 0 auto;
  display:inline-grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:12px;
  background:rgba(249,115,22,.12);
  border:1px solid rgba(249,115,22,.3);
  color:#f7c68c;
}
.collapsible-icon svg{width:21px;height:21px}
.collapsible-heading{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.collapsible-heading strong{
  font-size:17px;
  font-weight:800;
  color:#fff5ea;
  overflow-wrap:anywhere;
}
.collapsible-heading small{
  color:var(--muted);
  font-weight:500;
  font-size:12.5px;
  overflow-wrap:anywhere;
}
.collapsible-title-aside{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 1 auto;
  min-width:0;
}
.collapsible-title-aside .stat-pill{
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
.collapsible-title-aside .toggle-icon{
  flex:0 0 auto;
}

/* Panel admin: resumen de cifras + agrupación de secciones por función */
.admin-summary{
  margin-bottom:8px;
}
.admin-group{
  margin-top:28px;
}
.admin-group-label{
  margin:0 0 10px 2px;
}
.admin-subsection-title{
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid var(--border);
}

/* Test por temas: número de orden + pastillas de estado en vez de texto plano */
.topic-header{
  display:flex;
  align-items:center;
  gap:12px;
}
.topic-heading{
  flex:1;
  min-width:0;
}
.topic-index{
  flex:0 0 auto;
  display:inline-grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:9px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.stat-pill{
  display:inline-flex;
  align-items:center;
  padding:3px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}
.stat-pill-ok{background:rgba(34,197,94,.14);color:#86efac;border:1px solid rgba(34,197,94,.32)}
.stat-pill-bad{background:rgba(239,68,68,.14);color:#fca5a5;border:1px solid rgba(239,68,68,.32)}
.stat-pill-pending{background:rgba(249,115,22,.14);color:#fdba74;border:1px solid rgba(249,115,22,.32)}
.stat-pill-empty{background:rgba(255,255,255,.05);color:var(--muted);border:1px solid var(--border)}

/* v130 · Gestión de usuarios: una tarjeta por cuenta en vez de una tabla de
   7 columnas con hasta 5 controles apretados en la última celda. El grid
   pasa solo a una columna cuando no cabe una segunda, así que funciona
   igual en móvil y escritorio sin reglas de tabla "aplanada" aparte. */
.users-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:16px;
  margin-top:14px;
}
.user-card{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:16px;
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(255,255,255,.05);
  min-width:0;
}
.user-card.is-disabled{
  border-color:rgba(248,113,113,.32);
  background:rgba(239,68,68,.04);
}
.user-card-head{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.user-card-avatar{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  flex:0 0 auto;
  border-radius:13px;
  background:rgba(249,115,22,.13);
  border:1px solid rgba(249,115,22,.3);
  color:#fdba74;
  font:800 17px Georgia,serif;
}
.user-card-id{
  flex:1;
  min-width:0;
}
.user-card-id strong{
  display:block;
  font-size:15px;
  overflow-wrap:anywhere;
}
.user-card-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:5px;
}
.user-card-head .presence-badge{
  flex:0 0 auto;
  min-height:0;
  padding:4px 10px;
}
.user-card-meta{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 16px;
  padding:12px 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.user-card-meta-item{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.user-card-meta-item span{
  font-size:10.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--muted);
}
.user-card-meta-item strong{
  font-size:13px;
  font-weight:600;
  overflow-wrap:anywhere;
}
.user-card-access .kicker{
  display:block;
  margin-bottom:8px;
}
.user-card-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chip-removable{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 8px 5px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.05);
  color:var(--text);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.chip-removable span{
  opacity:.65;
  font-weight:900;
}
.chip-removable:hover{
  background:rgba(239,68,68,.14);
  border-color:rgba(248,113,113,.4);
  color:#fecaca;
}
.user-card-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.user-card-grant,
.user-card-toggles{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.user-card-grant select{
  flex:1 1 180px;
  min-width:0;
  border:1px solid var(--border);
  border-radius:12px;
  background:#0b1220;
  color:var(--text);
  padding:9px 10px;
}
.user-card-readonly{
  margin:0;
  font-size:12.5px;
}
.user-card-stats{
  padding-top:14px;
  border-top:1px dashed var(--border);
}
@media(max-width:420px){
  .user-card-meta{grid-template-columns:1fr}
}

/* Campos del simulacro en rejilla de 2 columnas en vez de una lista larga */
.simulator-fields-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 16px;
}

/* "Preguntas falladas" y "Rendimiento por tema": tarjetas propias en vez de un simple borde superior */
.chart-box{
  margin-top:18px;
  padding:16px 18px;
  border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
}

/* Grupo "Herramientas": Buscador y Analítica personal como tarjetas iguales */
.tools-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.tool-card{
  display:flex;
  align-items:center;
  gap:14px;
  text-align:left;
  padding:16px 18px;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  color:var(--text);
  cursor:pointer;
  font:inherit;
  transition:background-color .16s ease,border-color .16s ease;
}
@media(hover:hover){
  .tool-card:hover{background:rgba(249,115,22,.1);border-color:rgba(249,115,22,.4)}
}
.tool-icon{
  flex:0 0 auto;
  display:inline-grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:12px;
  background:rgba(249,115,22,.12);
  border:1px solid rgba(249,115,22,.3);
  color:#f7c68c;
}
.tool-icon svg{width:21px;height:21px}
.tool-copy{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.tool-copy strong{color:#fff5ea;font-size:15px}
.tool-copy small{color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}
.tool-caret{flex:0 0 auto;color:var(--orange);font-size:20px;font-weight:800}
.tool-panel{margin-top:14px}

@media(max-width:850px){
  .simulator-fields-grid,.tools-grid{grid-template-columns:1fr}
}
@media(max-width:650px){
  .opp-section-group{margin-top:22px}
  .opp-group-title{font-size:19px}
  .collapsible-icon,.tool-icon{width:36px;height:36px;border-radius:10px}
  .admin-section .collapsible-title-aside .stat-pill{display:none}
  .collapsible-icon svg,.tool-icon svg{width:18px;height:18px}
  .topic-side-stats{gap:5px}
}

/* ==========================================================
   v97 · Revisión visual integral
   Portada con menos texto y más claridad, estados interactivos
   consistentes (hover, foco, selección) y coherencia cromática
   en el test. Comodidad primero: todo lo pulsable se nota.
   ========================================================== */

/* Controles: color de acento y selección de texto coherentes */
input[type="checkbox"],
input[type="radio"]{accent-color:var(--orange)}
::selection{background:rgba(249,115,22,.45);color:#fff8ef}

/* Botones: transición suave y jerarquía clara al pasar el ratón */
.btn,.nav-btn,.icon-btn,.chat-user-button,.review-chip{
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease;
}
@media(hover:hover){
  .btn:hover{transform:translateY(-1px)}
  .btn:active{transform:translateY(0)}
  .btn-primary:hover{box-shadow:0 10px 26px rgba(249,115,22,.32)}
  .btn-secondary:hover{background:#2c4066;border-color:rgba(249,115,22,.45)}
  .btn-ghost:hover{background:rgba(255,255,255,.08)}
  /* La pestaña activa queda en naranja sólido; el hover es más suave para distinguirla */
  .nav-btn:hover:not(.active){background:rgba(249,115,22,.16);border-color:rgba(249,115,22,.45);color:#ffedd5}
}
.btn[disabled]:hover{transform:none;box-shadow:none}

/* Bloques desplegables: que se note que se pueden pulsar */
.collapsible-title{transition:background-color .16s ease,border-color .16s ease}
@media(hover:hover){
  .collapsible-title:hover{background:rgba(249,115,22,.12);border-color:rgba(249,115,22,.4)}
}

/* Test: misma paleta azul que el resto de la web (antes gris desacoplado) */
.question{background:linear-gradient(180deg,rgba(13,24,40,.94),rgba(10,18,31,.9));border:1px solid var(--border)}
.answer{background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:12px;transition:background-color .14s ease,border-color .14s ease}
@media(hover:hover){
  .answer:hover{border-color:rgba(249,115,22,.5);background:rgba(249,115,22,.07)}
}
.answer.selected{background:rgba(249,115,22,.13)}
.answer.correct{background:rgba(34,197,94,.76);border-color:rgba(34,197,94,.9)}
.answer.incorrect{background:rgba(239,68,68,.72);border-color:rgba(239,68,68,.9)}

/* Cajetines de estadísticas: etiqueta diferenciada del dato */
.stat span{display:block;color:var(--muted);font-size:13px}

/* Hero: el texto queda centrado en vertical frente al panel de pasos */
.home-hero-copy{display:flex;flex-direction:column;justify-content:center}
.home-hero-copy .h1,.home-hero-copy .lead{margin-top:0}

/* Tarjetas de oposición sin imagen: más compactas, sin aire sobrante */
.home-oppositions .opposition-card-compact{min-height:0}
.home-oppositions .opposition-card-compact h3{font-size:clamp(24px,2.6vw,34px)}
.home-oppositions .opposition-card-compact .opposition-card-content{padding:26px 28px 24px}
.home-oppositions .opposition-card-compact .opposition-card-meta{padding-top:18px}

/* Tarjetas de oposición de la portada: respuesta al ratón */
.home-oppositions .opposition-card{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
@media(hover:hover){
  .home-oppositions .opposition-card:hover{transform:translateY(-3px);border-color:rgba(249,115,22,.72);box-shadow:0 22px 48px rgba(2,8,23,.45)}
}

/* Portada: tarjetas de características compactas con icono.
   6 tarjetas -> 3 columnas (2 filas completas) en vez de 4 (que dejaba
   la última fila con solo 2 huecos descuadrados). */
.feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.feature-icon{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:14px;background:rgba(249,115,22,.14);border:1px solid rgba(249,115,22,.3);font-size:22px;line-height:1;margin-bottom:14px}
.feature-card p{font-size:15px}
@media(max-width:1100px){
  .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .feature-grid{grid-template-columns:1fr}
}

/* Pie de página: estilo base (antes solo tenía reglas móviles) */
.footer{
  max-width:var(--content-max);
  margin:0 auto;
  padding:24px var(--page-gutter) 36px;
  display:flex;
  flex-direction:column;
  gap:8px;
  color:var(--muted);
  font-size:13px;
  border-top:1px solid var(--border);
}

/* Barras de scroll discretas acordes al tema oscuro */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(148,163,184,.32);border-radius:999px;border:2px solid rgba(8,16,26,.6)}
::-webkit-scrollbar-thumb:hover{background:rgba(148,163,184,.55)}

/* Ajustes móviles de los elementos nuevos de portada */
@media(max-width:640px){
  .feature-icon{width:38px;height:38px;font-size:19px;margin-bottom:10px;border-radius:12px}
}

/* ==========================================================
   v98 · Tono sobrio y profesional
   Esquinas más contenidas, chips y etiquetas discretas,
   iconografía de línea en vez de emojis y brillos atenuados.
   ========================================================== */
.panel,.psico-section{border-radius:18px}
.btn{border-radius:10px;font-weight:700}
.nav-btn{font-weight:600}
.field input,.field select,.field textarea{border-radius:10px}
.stat,.metric-card{border-radius:12px}
.collapsible-title{border-radius:12px}
.question,.modal-card{border-radius:16px}
.opposition-card,.feature-card{border-radius:14px}
.home-oppositions .opposition-card{border-radius:16px;border-color:rgba(249,115,22,.3)}
.brand-icon{border-radius:12px}
.opposition-icon-shell{border-radius:14px}

/* Chips informativos: neutros, sin relleno llamativo */
.hero-chip{background:transparent;border:1px solid var(--border);color:var(--muted);font-weight:600;border-radius:8px}
.opposition-meta-chip{background:transparent;border:1px solid rgba(255,255,255,.14);color:#cbd5e1;font-weight:600;border-radius:8px;min-height:34px;padding:7px 12px}
.tag{background:rgba(249,115,22,.14);color:#fdba74;border:1px solid rgba(249,115,22,.35)}
.topic-readonly-badge{border-radius:8px}

/* Iconos de línea (SVG) en tarjetas */
.feature-icon{background:rgba(255,255,255,.04);border:1px solid var(--border);color:#f7c68c;border-radius:10px}
.feature-icon svg{width:20px;height:20px}

/* Hover más contenido: la interfaz responde sin efectos aparatosos */
@media(hover:hover){
  .btn-primary:hover{box-shadow:0 6px 16px rgba(249,115,22,.22)}
  .home-oppositions .opposition-card:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(2,8,23,.35);border-color:rgba(249,115,22,.5)}
}

/* ==========================================================
   v105 · Configuración de simulacros simplificada
   Antes, 6 campos (más una plantilla rápida redundante) se
   mostraban siempre a la vez. Ahora hay tres arranques directos
   con un clic (practicar / examen corto / examen completo) y los
   parámetros detallados quedan ocultos tras "Personalizar",
   accesibles para quien de verdad quiera ajustarlos.
   ========================================================== */
.quick-start-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:16px 0;
}
.quick-start-card{
  display:flex;
  flex-direction:column;
  gap:6px;
  text-align:left;
  padding:16px;
  border-radius:14px;
  background:rgba(249,115,22,.08);
  border:1px solid rgba(249,115,22,.28);
  color:var(--text);
  cursor:pointer;
  font:inherit;
  transition:background-color .16s ease,border-color .16s ease,transform .16s ease;
}
.quick-start-card strong{color:#fff5ea;font-size:15px}
.quick-start-card small{color:var(--muted);font-size:12.5px;line-height:1.4}
@media(hover:hover){
  .quick-start-card:hover{background:rgba(249,115,22,.15);border-color:rgba(249,115,22,.5);transform:translateY(-2px)}
}

.customize-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  margin:4px 0 18px;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--muted);
  font-weight:700;
  font-size:13px;
  cursor:pointer;
}
.customize-toggle .toggle-icon{color:var(--orange);font-size:18px;line-height:1}
@media(hover:hover){
  .customize-toggle:hover{background:rgba(255,255,255,.05);color:var(--text)}
}

@media(max-width:850px){
  .quick-start-grid{grid-template-columns:1fr}
}

/* ==========================================================
   v107 · Progreso por tema en Analítica personal
   Sustituye la tabla plana de 7 columnas (ilegible en pantallas
   estrechas) por filas-tarjeta con barra de progreso y pastillas
   de color, coherente con el resto de la interfaz.
   ========================================================== */
.topic-performance-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:14px;
}
.topic-performance-row{
  padding:14px 16px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
}
.topic-performance-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.topic-performance-head strong{
  color:#fff5ea;
  font-size:14.5px;
  overflow-wrap:anywhere;
}
.topic-performance-row .chart-bar{
  margin-bottom:10px;
}
.topic-performance-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
@media(max-width:640px){
  .topic-performance-row{padding:11px 12px;border-radius:12px}
  .topic-performance-head strong{font-size:13.5px}
}

/* ==========================================================
   v109 · Portada: "qué ofrecemos" como lista de comprobación
   Sustituye la rejilla de tarjetas por un único bloque con la
   lista completa de funcionalidades, más fiel al boceto que
   compartió el usuario que las tarjetas sueltas.
   ========================================================== */
.offer-panel{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.offer-intro{
  max-width:640px;
}
.offer-checklist{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 32px;
  list-style:none;
  margin:18px 0 0;
  padding:0;
}
.offer-checklist li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:15.5px;
  color:#e5e9f0;
  line-height:1.5;
}
.offer-check{
  flex:0 0 auto;
  display:inline-grid;
  place-items:center;
  width:24px;
  height:24px;
  margin-top:1px;
  border-radius:999px;
  background:rgba(34,197,94,.16);
  border:1px solid rgba(34,197,94,.4);
  color:#86efac;
  font-size:13px;
  font-weight:800;
}

/* v110 · Planes públicos y propuesta de valor centrada en test */
.plans-shell{display:grid;gap:22px}
.plans-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:30px;background:radial-gradient(circle at 88% 20%,rgba(249,115,22,.22),transparent 28%),linear-gradient(145deg,rgba(8,18,32,.98),rgba(16,33,54,.94))}
.plans-hero .lead{max-width:760px;margin-bottom:0}
.plans-seal{width:150px;aspect-ratio:1;display:grid;place-content:center;text-align:center;border-radius:50%;border:1px solid rgba(249,115,22,.5);background:rgba(249,115,22,.1);box-shadow:inset 0 0 0 8px rgba(249,115,22,.05)}
.plans-seal strong{font-size:34px;color:#fff5ea}.plans-seal span{color:#fdba74;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.plans-catalog{display:grid;gap:20px}.plans-heading{display:flex;justify-content:space-between;align-items:end;gap:24px}.plans-heading p{max-width:360px;color:var(--muted);margin:0}
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.plan-card{display:flex;flex-direction:column;gap:18px;padding:26px;border-radius:16px;border:1px solid rgba(249,115,22,.34);background:linear-gradient(180deg,rgba(21,35,55,.96),rgba(10,20,34,.94));box-shadow:0 18px 42px rgba(2,8,23,.28)}
.plan-card h2{margin:0 0 8px;color:#fff5ea}.plan-card p{margin:0;color:var(--muted);line-height:1.55}.plan-card-top{display:flex;justify-content:space-between;align-items:center}.plan-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(249,115,22,.15);border:1px solid rgba(249,115,22,.35);color:#fdba74;font-family:Georgia,serif;font-size:22px;font-weight:800}
.plan-benefits{display:grid;gap:9px;list-style:none;margin:0;padding:0}.plan-benefits li{position:relative;padding-left:25px;color:#e5e9f0}.plan-benefits li::before{content:'✓';position:absolute;left:0;color:#4ade80;font-weight:800}
.plan-price{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-top:auto;padding-top:17px;border-top:1px solid var(--border)}.plan-price strong{font-size:26px;color:#fff5ea}.plan-price span{font-size:13px;color:var(--muted)}
.plans-notice{margin:0;padding:12px 15px;border-radius:10px;background:rgba(249,115,22,.09);border:1px solid rgba(249,115,22,.25);color:#fed7aa}
.current-plan{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 26px;border-radius:16px;border:1px solid var(--border);background:rgba(255,255,255,.04)}.current-plan.is-active{border-color:rgba(34,197,94,.36);background:rgba(34,197,94,.07)}.current-plan h2{margin:5px 0}.current-plan p{margin:0;color:var(--muted)}.plan-status{padding:8px 13px;border-radius:999px;background:rgba(148,163,184,.12);color:#cbd5e1;font-weight:800}.is-active .plan-status{background:rgba(34,197,94,.14);color:#86efac}
.plan-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.plan-steps article{padding:20px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.035)}.plan-steps article>span{display:grid;place-items:center;width:30px;height:30px;margin-bottom:14px;border-radius:9px;background:rgba(249,115,22,.14);color:#fdba74;font-weight:900}.plan-steps strong{display:block;color:#fff5ea}.plan-steps p{margin:7px 0 0;color:var(--muted);font-size:14px;line-height:1.5}
.user-plan-link{color:inherit}
@media(max-width:720px){.plans-hero{grid-template-columns:1fr}.plans-seal{width:112px}.plans-heading{align-items:start;flex-direction:column}.plan-steps{grid-template-columns:1fr}.current-plan{align-items:flex-start;flex-direction:column}.plan-price{align-items:flex-start;flex-direction:column}}
@media(max-width:700px){
  .offer-checklist{grid-template-columns:1fr}
}
@media(max-width:640px){
  .offer-checklist{gap:10px}
  .offer-checklist li{font-size:14px}
}

/* v111 · Menos carga visual y ajustes como centro de cuenta */
.settings-shell{display:grid;gap:18px;max-width:920px;margin:0 auto}
.settings-header{display:flex;align-items:center;justify-content:space-between;gap:24px}
.settings-header>div:first-child{flex:1 1 380px;min-width:0}
.settings-header p{margin-bottom:0}
.settings-avatar{display:grid;place-items:center;width:62px;height:62px;flex:0 0 auto;border-radius:18px;background:rgba(249,115,22,.13);border:1px solid rgba(249,115,22,.3);color:#fdba74;font:700 28px Georgia,serif}
.settings-header-identity{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;min-width:0;max-width:min(100%,440px);flex:1 1 320px}
/* flex:1 1 0 (no el "0 1 auto" por defecto) para que este bloque ocupe
   siempre justo el hueco que queda tras el avatar, sea cual sea el ancho
   disponible, en vez de dimensionarse por su propio contenido (usuario+correo)
   y quedar pegado al margen o sin apenas aire cuando ese contenido es largo.
   grid-template-columns:minmax(0,1fr) evita el "desbordamiento de grid": sin
   él, la columna implícita de este grid no se encoge por debajo del ancho
   natural de su contenido aunque el propio contenedor sí se haya encogido. */
.settings-identity-copy{display:grid;grid-template-columns:minmax(0,1fr);gap:5px;min-width:0}
.settings-identity-name{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff5ea;font-size:clamp(12px,3.6vw,15px);letter-spacing:-.01em}
.settings-identity-meta{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap;font-size:12px}
.settings-identity-email{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.settings-identity-meta .btn{flex:0 0 auto}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.settings-card{display:flex;flex-direction:column;justify-content:space-between;gap:22px;padding:24px;border-radius:16px;border:1px solid var(--border);background:linear-gradient(180deg,rgba(18,31,50,.94),rgba(10,20,34,.9))}
.settings-card h2{margin:7px 0;color:#fff5ea}.settings-card p{margin:0;color:var(--muted)}
.settings-label{color:#fdba74;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.1em}
.settings-card .btn{align-self:flex-start}
.settings-account{display:flex;gap:36px;flex-wrap:wrap;padding-block:18px}
.settings-account div{display:grid;gap:4px}.settings-account span{color:var(--muted);font-size:12px}.settings-account strong{color:#fff5ea;overflow-wrap:anywhere}
.account-actions{margin-top:18px}.account-danger-card{border-color:rgba(248,113,113,.28)}
.account-delete-shell{display:grid;gap:20px;max-width:780px;margin-inline:auto}.account-delete-header p{max-width:650px;color:var(--muted)}
.account-delete-panel{display:grid;gap:14px}.account-delete-panel label{font-weight:800;color:#fff5ea}.account-delete-panel input{width:100%}
.account-delete-warning{padding:16px;border-radius:14px;background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.25)}
.account-delete-warning strong{color:#fecaca}.account-delete-warning p{margin:8px 0 0;color:var(--muted)}
.progressive-details{margin-top:20px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.025);overflow:hidden}
.progressive-details>summary{padding:16px 18px;cursor:pointer;color:#fff5ea;font-weight:800;list-style-position:inside}
.progressive-details[open]>summary{border-bottom:1px solid var(--border);background:rgba(255,255,255,.035)}
.progressive-details>:not(summary){margin-left:18px;margin-right:18px}.progressive-details>:last-child{margin-bottom:18px}
.result-summary{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:700px){.settings-header{flex-direction:column;align-items:stretch;gap:18px}.settings-header>div:first-child{flex:auto}.settings-header-identity{width:100%;max-width:none;flex:auto;padding-top:18px;border-top:1px solid var(--border)}.settings-avatar{width:50px;height:50px;border-radius:14px;font-size:22px}.settings-grid{grid-template-columns:1fr}.settings-card{padding:20px}.settings-account{display:grid;gap:14px}.result-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* v112 · Analítica visual, compacta y con estado persistente */
.analytics-topic-scroll{max-height:min(62vh,620px);overflow-y:auto;overscroll-behavior:contain;padding-right:6px;scrollbar-gutter:stable}
.analytics-topic-scroll .topic-performance-list{margin-bottom:4px}
.analytics-topic-scroll .topic-toolbar-actions{position:sticky;bottom:0;padding:12px;background:linear-gradient(180deg,rgba(11,18,32,.72),#0b1220 35%);z-index:2}
.analytics-detail-section{padding-bottom:4px}
.analytics-breakdown-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.analytics-type-card{display:flex;align-items:center;gap:14px;padding:16px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.035)}
.analytics-type-card h3{margin:0 0 5px;color:#fff5ea;font-size:16px}.analytics-type-card p{margin:0;color:var(--muted);font-size:13px}
.analytics-score{--score:0;display:grid;place-items:center;width:58px;height:58px;flex:0 0 auto;border-radius:50%;background:radial-gradient(circle closest-side,#111d2f 76%,transparent 78% 99%),conic-gradient(#f97316 calc(var(--score)*1%),rgba(148,163,184,.16) 0)}
.analytics-score strong{font-size:13px;color:#fff5ea}
.attempt-history{display:grid;gap:9px;max-height:520px;overflow-y:auto;overscroll-behavior:contain;padding-right:6px;scrollbar-gutter:stable}
.attempt-card{display:grid;grid-template-columns:92px minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 16px;border-radius:13px;border:1px solid var(--border);background:rgba(255,255,255,.03)}
.attempt-date,.attempt-main{display:grid;gap:3px}.attempt-date strong,.attempt-main strong{color:#fff5ea}.attempt-date span,.attempt-main span{color:var(--muted);font-size:12.5px}
.attempt-score{min-width:58px;padding:7px 9px;border-radius:9px;text-align:center;font-weight:850;color:#fecaca;background:rgba(239,68,68,.13);border:1px solid rgba(239,68,68,.28)}
.attempt-score.is-mid{color:#fde68a;background:rgba(245,158,11,.13);border-color:rgba(245,158,11,.28)}.attempt-score.is-good{color:#86efac;background:rgba(34,197,94,.13);border-color:rgba(34,197,94,.28)}
@media(max-width:640px){.analytics-topic-scroll{max-height:56vh;margin-left:10px!important;margin-right:10px!important;padding-right:3px}.analytics-breakdown-grid{grid-template-columns:1fr}.attempt-card{grid-template-columns:74px minmax(0,1fr) auto;gap:9px;padding:12px}.attempt-main span{line-height:1.35}.attempt-score{min-width:50px}.analytics-detail-section{margin-left:12px!important;margin-right:12px!important}}

/* v114 · Portada visual Haz un Test */
.hero-mascot-card{position:relative;min-height:430px;padding:0;overflow:hidden;isolation:isolate;background:#07111f;border-color:rgba(249,115,22,.35);perspective:900px}
.hero-mascot-card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 55%,rgba(3,9,18,.82)),radial-gradient(circle at 50% 55%,transparent 28%,rgba(3,9,18,.2) 76%);pointer-events:none}
.hero-mascot-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.035);filter:saturate(1.04) contrast(1.03);animation:topo-float 7s ease-in-out infinite;will-change:transform}
.hero-mascot-badge{position:absolute;left:20px;bottom:18px;z-index:3;display:flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(5,13,25,.72);backdrop-filter:blur(12px);color:#fff4e6;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.hero-mascot-badge span{color:#f97316;filter:drop-shadow(0 0 6px #f97316);animation:topo-pulse 2.2s ease-in-out infinite}
.hero-mascot-orbit{position:absolute;z-index:2;border:1px solid rgba(249,115,22,.34);border-radius:50%;pointer-events:none;animation:topo-orbit 12s linear infinite}
.hero-mascot-orbit::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#f97316;box-shadow:0 0 15px #f97316;top:12%;left:12%}
.hero-mascot-orbit-one{width:250px;height:250px;right:-105px;top:-80px}
.hero-mascot-orbit-two{width:150px;height:150px;left:-70px;bottom:35px;animation-duration:9s;animation-direction:reverse}
@keyframes topo-float{0%,100%{transform:scale(1.035) translate3d(0,0,0) rotateX(0)}50%{transform:scale(1.055) translate3d(0,-7px,18px) rotateX(1deg)}}
@keyframes topo-orbit{to{transform:rotate(360deg)}}
@keyframes topo-pulse{50%{opacity:.5;transform:scale(.78)}}

.public-proof-section{padding:clamp(24px,4vw,42px);border:1px solid rgba(255,255,255,.09);border-radius:24px;background:linear-gradient(145deg,rgba(9,20,34,.96),rgba(12,24,41,.82));overflow:hidden}
.hook-statement{display:flex;align-items:flex-start;gap:18px;max-width:920px;margin-bottom:30px}
.hook-mark{font-family:Georgia,serif;font-size:92px;line-height:.72;color:#f97316;opacity:.85}
.hook-statement h2{margin:8px 0 0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(28px,4vw,50px);line-height:1.05;color:#fff7ee}
.hook-statement h2 em{font-style:normal;color:#f6c98f}
.visual-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.visual-stat-card{display:flex;align-items:center;gap:16px;min-width:0;padding:18px;border:1px solid rgba(255,255,255,.09);border-radius:18px;background:rgba(255,255,255,.035)}
.visual-stat-card>div:last-child{min-width:0}.visual-stat-card span{display:block;color:#fff4e6;font-weight:800}.visual-stat-card p{margin:5px 0 0;color:#aebbd0;font-size:12px;line-height:1.45}
.visual-ring{--value:75;display:grid;place-items:center;width:72px;height:72px;flex:0 0 72px;border-radius:50%;background:radial-gradient(circle closest-side,#0c192b 72%,transparent 74% 99%),conic-gradient(#f6c98f calc(var(--value)*1%),rgba(255,255,255,.08) 0);box-shadow:inset 0 0 20px rgba(246,201,143,.05)}
.visual-ring-orange{background:radial-gradient(circle closest-side,#0c192b 72%,transparent 74% 99%),conic-gradient(#f97316 calc(var(--value)*1%),rgba(255,255,255,.08) 0)}
.visual-ring strong{font-size:16px;color:#fff7ee}
.mini-bars{height:72px;width:78px;flex:0 0 78px;display:flex;align-items:flex-end;gap:7px;padding:8px 7px;border-bottom:1px solid rgba(255,255,255,.16)}
.mini-bars i{width:12px;height:var(--h);border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#f6c98f,#f97316);box-shadow:0 0 12px rgba(249,115,22,.22)}

@media(max-width:920px){.hero-mascot-card{min-height:390px}.visual-stat-grid{grid-template-columns:1fr 1fr}.visual-stat-card:last-child{grid-column:1/-1}}
@media(max-width:620px){.hero-mascot-card{min-height:350px}.hero-mascot-image{object-position:center}.hero-mascot-badge{left:13px;bottom:12px}.public-proof-section{padding:23px 16px}.hook-statement{gap:8px;margin-bottom:22px}.hook-mark{font-size:62px}.hook-statement h2{font-size:29px}.visual-stat-grid{grid-template-columns:1fr}.visual-stat-card:last-child{grid-column:auto}}
@media(prefers-reduced-motion:reduce){.hero-mascot-image,.hero-mascot-orbit,.hero-mascot-badge span{animation:none!important}}

/* v115 · Centro de métricas administrativas */
.admin-metrics-dashboard{display:grid;gap:16px;padding:4px 0 10px}.metrics-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.035)}
.metrics-toolbar>div{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:10px}.metrics-toolbar small{grid-column:2;color:var(--muted);font-size:11px;margin-top:2px}.health-dot{width:11px;height:11px;grid-row:1/3;border-radius:50%;background:#f59e0b;box-shadow:0 0 0 5px rgba(245,158,11,.12)}.health-dot.is-healthy{background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.12)}.health-dot.needs-attention{background:#f59e0b}
.metrics-loading{min-height:180px;display:grid;place-items:center;align-content:center;gap:12px;color:var(--muted)}
.metric-kpi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.metric-kpi-grid article{padding:16px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.02));min-width:0}.metric-kpi-grid article.is-warning{border-color:rgba(245,158,11,.45);background:rgba(245,158,11,.07)}.metric-kpi-grid span,.metric-kpi-grid small{display:block;color:var(--muted);font-size:11px}.metric-kpi-grid strong{display:block;margin:5px 0 3px;color:#fff7ee;font-size:clamp(20px,2.5vw,30px);line-height:1.1}
.metrics-grid-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.metrics-card{min-width:0;padding:17px;border:1px solid rgba(255,255,255,.09);border-radius:15px;background:rgba(5,13,24,.38)}.metrics-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.metrics-card h3{margin:3px 0 0;color:#fff7ee;font-size:16px}.metrics-card header>small{color:var(--muted);font-size:10px;text-align:right}
.metrics-chart{height:132px;display:flex;align-items:flex-end;gap:3px;padding:12px 4px 4px;border-bottom:1px solid rgba(255,255,255,.12);background:repeating-linear-gradient(to top,transparent 0,transparent 32px,rgba(255,255,255,.045) 33px)}.metrics-bar{display:block;flex:1;height:var(--bar);min-height:2px;border-radius:3px 3px 0 0;background:linear-gradient(180deg,#f6c98f,#f97316);opacity:.82;transition:height .25s ease}.metrics-bar.has-errors{background:linear-gradient(180deg,#fca5a5,#ef4444)}.metrics-legend{display:flex;gap:14px;margin-top:9px;color:var(--muted);font-size:10px}.metrics-legend span{display:flex;align-items:center;gap:5px}.metrics-legend i{width:8px;height:8px;border-radius:2px;background:#f97316}.metrics-legend i.error{background:#ef4444}
.business-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px}.business-metrics>div{padding:12px;border-radius:12px;background:rgba(255,255,255,.035)}.business-metrics strong,.business-metrics span,.business-metrics small{display:block}.business-metrics strong{color:#fff4e6;font-size:19px}.business-metrics span{margin-top:3px;color:#dbe5f2;font-size:11px;font-weight:750}.business-metrics small{margin-top:2px;color:var(--muted);font-size:10px}
.metric-route-head,.metric-route-row{display:grid;grid-template-columns:minmax(0,1.8fr) .6fr .6fr .35fr;gap:8px;align-items:center}.metric-route-head{padding:0 8px 7px;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.05em}.metric-route-list{display:grid;gap:4px}.metric-route-row{padding:8px;border-radius:9px;background:rgba(255,255,255,.03);font-size:10px}.metric-route-row code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#dbeafe}.metric-route-row span{text-align:right;color:#d2dbea}.metric-ok{color:#86efac!important}.metric-bad{color:#fca5a5!important}
.metric-statuses{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:13px}.metric-status{display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:9px;background:rgba(255,255,255,.04);color:var(--muted);font-size:10px}.metric-status b{color:#dbeafe}.metric-status.status-2xx b{color:#86efac}.metric-status.status-4xx b{color:#fcd34d}.metric-status.status-5xx b{color:#fca5a5}.capacity-list{display:grid;gap:1px}.capacity-list p{display:flex;justify-content:space-between;gap:12px;margin:0;padding:9px 3px;border-bottom:1px solid rgba(255,255,255,.06);font-size:11px}.capacity-list span{color:var(--muted)}.capacity-list strong{color:#fff4e6;text-align:right}.metrics-footnote{margin:0;color:#8290a4;font-size:10px;line-height:1.45}.admin-section:has(.admin-metrics-dashboard) .collapsible-title{border-color:rgba(249,115,22,.28)}
@media(max-width:850px){.metric-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metrics-grid-two{grid-template-columns:1fr}}

/* v126/v127 · Navegación estilo Instagram/TikTok: barra abajo en móvil,
   raíl vertical pegado al margen derecho en escritorio — mismo componente,
   mismo #bottomNav, misma lógica en app-bottom-nav.js, solo cambia cómo se
   coloca según el ancho. Se activa vía body.has-bottom-nav (App.updateBottomNav()
   en app-bottom-nav.js la añade siempre, con o sin sesión). Nada de lo de
   aquí toca reglas existentes de .topbar/.nav: solo se ocultan por CSS
   cuando la barra nueva está activa, en cualquier ancho.
   El logo/marca del .topbar NO se oculta: sigue arriba a la izquierda.
   #mainNav ya no tiene menú de usuario ni botón de acceso propios (viven
   solo en la pestaña Perfil de #bottomNav): el hueco que queda dentro de
   #mainNav es el punto donde tools/prepare-frontend-seo.js inyecta el
   enlace al blog de WordPress cuando esa integración está configurada
   (ver BLOG_NAV_LINK en index.html); por eso el elemento se mantiene en
   vez de borrarse, aunque estando siempre oculto ese enlace tampoco se
   vería hoy — pendiente de decidir dónde debe vivir cuando se active. */
body.has-bottom-nav #bottomNav{display:flex!important}
body.has-bottom-nav #mainNav{display:none!important}
/* Posicionamiento "mobile-first": la regla base cubre cualquier ancho (barra
   horizontal pegada abajo) y el media query de escritorio la redefine por
   completo a partir de 901px. Antes el posicionamiento vivía repartido entre
   dos media queries (max-width:900px / min-width:901px) sin solape: un ancho
   fraccionario entre 900 y 901px CSS (alcanzable con zoom no entero del
   navegador) no encajaba en ninguna de las dos y la barra se quedaba sin
   posición. Con la base cubriendo el hueco no puede volver a pasar. */
.bottom-nav{
  display:none;
  position:fixed;z-index:950;
  left:0;right:0;bottom:0;top:auto;width:auto;
  min-height:calc(var(--bottom-nav-height) + env(safe-area-inset-bottom,0px));
  flex-direction:row;justify-content:space-between;align-items:flex-start;
  padding:6px max(8px,env(safe-area-inset-right,0px)) max(8px,env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));
  border-top:1px solid var(--border);
  background:rgba(8,17,31,.92);
  backdrop-filter:blur(12px);
  overflow:visible;
}
@media(max-width:900px){
  /* Espacio inferior a nivel body (no en main): main{padding-bottom} está
     fragmentado en varias reglas a distintos breakpoints y la más específica
     en móvil real gana por orden de fuente, no por especificidad, así que
     tocar main aquí quedaría pisado más abajo en el fichero. */
  body.has-bottom-nav{padding-bottom:calc(var(--bottom-nav-height) + env(safe-area-inset-bottom,0px))}
  body.has-bottom-nav .toast{bottom:calc(var(--bottom-nav-height) + env(safe-area-inset-bottom,0px) + 14px)}
}
/* Escritorio: raíl vertical pegado al margen derecho, icono+etiqueta igual
   que en móvil pero apilados en columna y centrados en la altura de la
   pantalla, como un dock flotante. */
@media(min-width:901px){
  .bottom-nav{
    top:0;right:0;bottom:0;left:auto;width:var(--side-nav-width);
    flex-direction:column;justify-content:center;align-items:center;gap:10px;
    padding:24px 6px;
    border-top:none;
    border-left:1px solid var(--border);
  }
  body.has-bottom-nav{padding-right:var(--side-nav-width)}
  body.has-bottom-nav .topbar{padding-inline:max(var(--page-gutter),calc(50vw - var(--content-half) - var(--side-nav-half) + var(--page-gutter)))}
}
.bottom-nav-item{
  flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;
  min-width:0;min-height:48px;padding:4px 2px;border:0;background:transparent;
  color:var(--muted);font:inherit;font-size:11px;font-weight:700;cursor:pointer;
}
.bottom-nav-item.active{color:var(--gold)}
.bottom-nav-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.bottom-nav-icon svg{width:22px;height:22px}
.bottom-nav-icon-wrap{position:relative;display:flex}
.bottom-nav-label{display:block;width:100%;min-width:0;line-height:1.15;text-align:center;white-space:normal;overflow-wrap:normal}
/* Grupo de pestañas a un lado del botón central (ver App.renderBottomNav en
   app-bottom-nav.js): flex:1 1 0 en los dos grupos + flex:0 0 auto en el
   botón central hace que este quede SIEMPRE geométricamente centrado en la
   barra, aunque el número de pestañas no coincida a cada lado (p. ej. sin
   acceso a ninguna oposición: 1 pestaña a la izquierda, 2 a la derecha). Sin
   esto, un simple "N huecos iguales" deja el botón central en el hueco
   central de la LISTA, no en el centro real de la barra, cuando N es par. */
.bottom-nav-side{display:flex;flex:1 1 0;min-width:0;align-items:flex-start}
.bottom-nav-side>.bottom-nav-item{flex:1 1 0;min-width:0}
.bottom-nav-item-center{flex:0 0 70px;width:70px}
@media(min-width:901px){
  /* .bottom-nav-side>.bottom-nav-item{flex:1 1 0} (arriba) tiene más
     especificidad que un simple .bottom-nav-item: sin repetir aquí ese
     selector compuesto, esas pestañas seguirían estirándose para repartirse
     todo el alto del raíl en vez de quedar compactas y centradas. */
  .bottom-nav-item,.bottom-nav-side>.bottom-nav-item{flex:none;width:100%;padding:6px 2px}
  /* Va DESPUÉS de la regla base ".bottom-nav-label{line-height:1}" de arriba
     a propósito: misma especificidad, así que el orden de aparición decide.
     Si este bloque se moviera antes de esa regla, el line-height:1 sin media
     query volvería a ganar y anularía este 1.15 en escritorio. */
  .bottom-nav-label{max-width:70px;white-space:normal;line-height:1.15;text-align:center;font-size:10px}
  /* En el raíl vertical no hay "centro" que respetar (es una sola columna
     apilada): los grupos vuelven a comportarse como si no existieran, para
     que sus pestañas sean hijas directas del raíl igual que antes de v128. */
  .bottom-nav-side{display:contents}
}
.bottom-nav-item-center{color:var(--text)}
.bottom-nav-item-center.active{color:var(--text)}
.bottom-nav-icon-circle{
  width:52px;height:52px;margin-top:-22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--orange);box-shadow:var(--shadow);
  transition:background .15s ease;
}
@media(min-width:901px){
  /* En vertical, "elevar" el botón central no tiene el mismo sentido que en
     una barra horizontal: en vez de eso, todo el elemento (icono+etiqueta
     juntos, para no desalinearlos entre sí) se desplaza un poco hacia fuera
     del raíl, sobre el contenido de la página. */
  .bottom-nav-icon-circle{margin-top:0}
  .bottom-nav-item-center{margin-right:0}
}
.bottom-nav-icon-circle svg{width:26px;height:26px}
.bottom-nav-item-center:hover .bottom-nav-icon-circle,
.bottom-nav-item-center:active .bottom-nav-icon-circle{background:var(--orange-dark)}
.bottom-nav-icon-wrap .chat-badge{position:absolute;top:-6px;right:-10px;min-width:16px;height:16px;padding:0 4px;font-size:10px}
.bottom-nav-dot{position:absolute;top:0;right:2px;width:8px;height:8px;border-radius:50%;background:var(--orange);border:2px solid #08111f}

/* v126 · Perfil: cabecera + menú agrupado. El agrupado en sí reutiliza
   .admin-group/.admin-group-label tal cual (solo espaciado); esta es la
   única clase nueva (el antiguo menú de usuario en .topbar que inspiró su
   estilo ya no existe: lo sustituye por completo). */
.profile-menu-row{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:11px 12px;border:0;border-radius:12px;background:transparent;color:var(--text);text-align:left;font:inherit;font-weight:700;cursor:pointer}
.profile-menu-row:hover{background:rgba(255,255,255,.08)}
.profile-menu-row-icon{width:20px;height:20px;flex:0 0 20px;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.profile-menu-row-label{flex:1;min-width:0;overflow-wrap:anywhere}
.profile-menu-row-chevron{color:var(--muted)}
.profile-menu-row.danger{color:#fca5a5}
.profile-menu-row.danger .profile-menu-row-icon{color:#fca5a5}
@media(max-width:520px){.metrics-toolbar{align-items:flex-start;flex-direction:column}.metrics-toolbar .btn{width:100%}.metric-kpi-grid{grid-template-columns:1fr 1fr}.metric-kpi-grid article{padding:12px}.metric-kpi-grid strong{font-size:20px}.metrics-card{padding:13px}.metric-route-head,.metric-route-row{grid-template-columns:minmax(0,1.5fr) .55fr .55fr .3fr;gap:5px}.metric-route-row{font-size:9px}.business-metrics{grid-template-columns:1fr 1fr}}

/* v129 · Pulido responsive y accesibilidad de navegación. */
.brand:focus-visible,.bottom-nav-item:focus-visible,.profile-menu-row:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(max-width:900px){
  main{padding-bottom:32px}
  .bottom-nav-label{font-size:clamp(9px,2.7vw,11px)}
}
@media(max-width:360px){
  .bottom-nav{padding-inline:4px}
  .bottom-nav-item-center{flex-basis:62px;width:62px}
  .bottom-nav-icon-circle{width:48px;height:48px}
  .bottom-nav-label{font-size:9px}
  .settings-header,.settings-card{padding:17px}
  .settings-header-identity{gap:10px}
}

/* ==========================================================
   v131 · Lenguaje visual inspirado en Cult UI (cult-ui.com)
   ----------------------------------------------------------
   Capa puramente decorativa sobre los componentes YA existentes:
   mismo HTML, mismos sitios, misma lógica — solo se refina la
   sombra/profundidad ("tarjeta suave" multicapa de MinimalCard),
   el tacto de los botones (bisel + sombra de color de
   NeumorphButton, con press/lift con muelle), un titular con
   degradado sutil (GradientHeading), un halo giratorio en el
   botón central del dock (idea de CosmicButton, hecho con
   conic-gradient en vez del paquete real) y un brillo que seno
   el cursor en las tarjetas de tipo "elige esto" (ver
   app-visual-fx.js). Todo respeta @media(hover:hover) y
   prefers-reduced-motion, igual que el resto de este fichero.
   ========================================================== */
:root{
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --shadow-card-rest:
    0 1px 0 0 rgba(255,255,255,.05) inset,
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 1px 2px rgba(0,0,0,.35),
    0 18px 40px rgba(2,8,20,.38);
  --shadow-card-hover:
    0 1px 0 0 rgba(255,255,255,.08) inset,
    0 0 0 1px rgba(249,115,22,.18) inset,
    0 2px 6px rgba(0,0,0,.4),
    0 26px 56px rgba(2,8,20,.5);
}

/* Fondo ambiental: el degradado ya existente "respira" muy despacio
   en vez de quedarse estático, sin mover ni un píxel de contenido real
   (son los mismos pseudo-elementos fijos de fondo de más arriba). */
body::before{animation:cult-ambient-breathe 18s ease-in-out infinite}
body::after{animation:cult-ambient-breathe 24s ease-in-out infinite reverse}
@keyframes cult-ambient-breathe{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.86;transform:scale(1.045)}
}

/* Titular de portada: texto en degradado suave (blanco cálido -> dorado),
   igual de legible que antes, con un resplandor apenas perceptible detrás. */
.h1{
  background:linear-gradient(180deg,#fff8f0 8%,var(--text) 58%,var(--gold) 145%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 20px rgba(249,115,22,.16));
}
@supports not (background-clip:text){.h1{background:none;color:var(--text);filter:none}}

/* Títulos de sección: pequeño acento en degradado debajo, igual que un
   subrayado de marca, para que se note qué encabeza cada bloque. */
.section-title{position:relative;padding-bottom:8px}
.section-title::after{
  content:"";position:absolute;left:0;bottom:0;
  width:44px;height:3px;border-radius:999px;
  background:linear-gradient(90deg,var(--orange),var(--gold));
}

/* Botones: bisel táctil + sombra de color a juego + muelle en vez de
   una simple transición lineal, para que se note el "click" antes de
   pulsar y el "aplastado" justo al pulsar. */
.btn{transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .18s var(--ease-spring),box-shadow .2s ease}
.btn-primary{
  background:linear-gradient(180deg,#fb923c,var(--orange) 62%,var(--orange-dark));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -3px 0 rgba(124,45,18,.5),0 10px 24px rgba(249,115,22,.28);
}
.btn-secondary{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -2px 0 rgba(0,0,0,.22),0 1px 2px rgba(0,0,0,.18)}
@media(hover:hover){
  .btn-primary:hover{
    background:linear-gradient(180deg,#fdba74,var(--orange) 58%,var(--orange-dark));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -3px 0 rgba(124,45,18,.55),0 16px 36px rgba(249,115,22,.4);
    transform:translateY(-2px);
  }
  .btn-secondary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -2px 0 rgba(0,0,0,.28),0 10px 22px rgba(0,0,0,.3);transform:translateY(-2px)}
  .btn-ghost:hover{transform:translateY(-2px)}
}
.btn-primary:active{transform:translateY(0) scale(.97);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -1px 0 rgba(124,45,18,.5),0 6px 14px rgba(249,115,22,.3)}
.btn-secondary:active,.btn-ghost:active{transform:scale(.97)}

/* Campos de formulario: resplandor suave al enfocar, además del contorno
   de accesibilidad que ya existe (:focus-visible) para quien usa ratón. */
.field input,.field select,.field textarea{transition:border-color .18s ease,box-shadow .18s ease}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:rgba(249,115,22,.55);
  box-shadow:0 0 0 4px rgba(249,115,22,.15);
}

/* Tarjetas y paneles: misma jerarquía de color de siempre, más profundidad
   ("tarjeta suave" de varias capas: veta clara arriba + sombra ambiental)
   en vez de una única sombra plana. */
.panel,.stat,.admin-topic-item,.user-card{box-shadow:var(--shadow-card-rest)}
.topic-card,.tool-card{box-shadow:var(--shadow-card-rest)}
@media(hover:hover){
  .topic-card:hover,.tool-card:hover{box-shadow:var(--shadow-card-hover)}
}

/* Halo giratorio en el botón central del dock ("Hacer test"): mismo botón,
   mismo sitio, con un anillo de degradado cónico en vez de estar inerte. */
.bottom-nav-item-center{position:relative}
.bottom-nav-icon-circle{
  position:relative;isolation:isolate;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(124,45,18,.5),0 10px 26px rgba(249,115,22,.35);
}
.bottom-nav-icon-circle::before{
  content:"";position:absolute;inset:-5px;z-index:-1;border-radius:50%;
  background:conic-gradient(from 0deg,var(--gold),var(--orange),rgba(255,255,255,.15) 30%,var(--orange),var(--gold));
  opacity:.5;filter:blur(2px);
  animation:cult-ring-spin 7s linear infinite;
}
@media(hover:hover){
  .bottom-nav-item-center:hover .bottom-nav-icon-circle::before{opacity:.85}
}
@keyframes cult-ring-spin{to{transform:rotate(360deg)}}

/* Brillo que sigue al cursor en las tarjetas de "elige esto" (oposiciones,
   temas, herramientas del panel, usuarios, temario admin): las variables
   --spot-x/--spot-y las actualiza app-visual-fx.js al mover el ratón; sin
   JS o en táctil, la tarjeta se queda tal cual, sin ningún brillo. */
.opposition-card,.topic-card,.tool-card,.user-card,.admin-topic-item{
  position:relative;isolation:isolate;
}
.opposition-card::after,.topic-card::after,.tool-card::after,.user-card::after,.admin-topic-item::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  opacity:0;pointer-events:none;transition:opacity .35s ease;
  background:radial-gradient(480px circle at var(--spot-x,50%) var(--spot-y,50%),rgba(249,115,22,.16),transparent 62%);
}
.is-spotlit::after{opacity:1}
.opposition-card::after{background:radial-gradient(480px circle at var(--spot-x,50%) var(--spot-y,50%),rgba(255,255,255,.35),transparent 62%)}

@media(prefers-reduced-motion:reduce){
  body::before,body::after,.bottom-nav-icon-circle::before{animation:none}
  .opposition-card::after,.topic-card::after,.tool-card::after,.user-card::after,.admin-topic-item::after{transition:none}
}