/* Overrides del front V2 cargados DESPUÉS de bootstrap.min.css.
   El diseño define Poppins vía @import (que el navegador ignora por ir enterrado) y su
   regla body{font-family} la pisa el reboot de Bootstrap. Aquí forzamos Poppins. */
:root {
  --bs-body-font-family: "Poppins", sans-serif;
}
body,
.btn, .form-control, .form-select, input, textarea, select, button,
h1, h2, h3, h4, h5, h6, p, span, a, li, label, div {
  font-family: "Poppins", sans-serif;
}

/* Sticky footer: en pantallas altas con poco contenido el footer se pega abajo
   (antes quedaba un hueco blanco). El <main> crece para empujarlo. */
body { display: flex; flex-direction: column; min-height: 100vh; }
.v2-main { flex: 1 0 auto; }

/* Ancho de contenido: el diseño deja .main-container a 1560px (demasiado ancho en
   monitor grande → todo estirado). Lo estrechamos y centramos de forma global. No
   afecta a navbar/footer (usan navbar-main-container/footer-main-container) ni a las
   secciones de la landing (usan sus propias *-main-container). */
.main-container { max-width: 1120px; }

/* Login/registro: el panel de ventajas de la derecha estaba centrado verticalmente
   (quedaba muy abajo). Lo alineamos arriba, a la altura del título del formulario. */
.register-main-container { align-items: flex-start !important; }
.advantajes-main-container { align-self: stretch; }

/* Navbar: el .auth-main-container está dimensionado para el "user pill" del usuario
   logueado (~740px). Con los botones de invitado (Iniciar sesión / Regístrate) eso
   desbordaba y caía a otra línea. Lo ajustamos al contenido. */
.navbar .auth-main-container { flex: 0 0 auto !important; width: auto !important; }
.navbar .auth-container { justify-content: flex-end; align-items: center; gap: 12px; }

/* Enlaces/etiquetas que solo aparecen dentro del menú hamburguesa (móvil). */
.navbar .links .nav-only-mobile { display: none; }
.navbar .links .nav-user-label {
  color: rgba(255,255,255,.55); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; padding: 10px 0 4px;
}
.navbar .links .nav-user-label i { color: #ee6c4d; margin-right: 6px; }

/* ===== RESPONSIVE: navegación móvil =====
   El diseño, a ≤820px, oculta .left-container (logo+enlaces) Y la .hamburger cuando el
   navbar va dentro de .header-main (todas las páginas interiores) → el usuario se queda
   sin logo y sin navegación en móvil. Además trae el botón hamburguesa pero NO el menú
   desplegable (ni CSS ni JS). Aquí restauramos el logo, mostramos la hamburguesa y
   añadimos el desplegable (front.js alterna la clase .nav-open).
   El corte sube de 820 a 1024: con el logo 15 aniversario (246px renderizado), el navbar
   de escritorio necesita ~1130px (logo + 5 enlaces + botones de auth) y en tablets
   (iPad Pro 1024, Surface 912) se solapaba todo. */
@media only screen and (max-width: 1024px) {
  .header-main .navbar-main-container .navbar-container .navbar .left-container,
  nav .navbar-main-container .navbar-container .navbar .left-container { display: flex !important; }
  nav .navbar-main-container .navbar-container .navbar .left-container .links { display: none; }
  .header-main .navbar-main-container .navbar-container .navbar .hamburger,
  nav .navbar-main-container .navbar-container .navbar .hamburger { display: flex !important; }

  /* La hamburguesa (2 barras de 1px) se iba a una segunda línea bajo el logo y era
     casi invisible/intocable. La llevamos a la derecha y le damos área táctil. */
  nav .navbar-main-container .navbar-container .navbar { flex-wrap: nowrap; align-items: center; gap: 10px; }
  nav .navbar-main-container .navbar-container .navbar .left-container { flex: 0 1 auto; min-width: 0; }
  /* El logo (167px) no cabe junto al pill de usuario / botones de auth + hamburguesa:
     lo escalamos y evitamos que se colapse a 0. */
  nav .navbar-main-container .navbar-container .navbar .left-container .logo { flex: 0 0 auto; }
  nav .navbar-main-container .navbar-container .navbar .left-container .logo img {
    /* max-height + width auto (no height fija): el logo 15 aniversario es mas ancho
       (273px vs 186) y a 30px de alto se montaba con el boton de registro en moviles
       estrechos; el tope 40vw lo encoge proporcionalmente donde no cabe. */
    height: auto; max-height: 30px; width: auto; max-width: 36vw;
  }
  /* Invitado: el bloque de auth ocupaba 327px sin encoger (por un override de desktop),
     dejando el logo a 0 y la hamburguesa fuera de pantalla. Lo hacemos compacto. */
  nav .navbar-main-container .navbar-container .navbar .auth-main-container {
    flex: 0 1 auto !important; width: auto !important; min-width: 0;
  }
  /* En la HOME el diseno oculta los botones de auth en movil con
     `.navbar-mobile ... .auth-main-container{display:none !important}` (a <=820px), asi que
     "Registrate gratis" desaparecia solo en la home y si aparecia en el resto de secciones.
     Lo restauramos con mayor especificidad: es el CTA principal para invitados. */
  nav#navbar .navbar-main-container.navbar-mobile .navbar-container .navbar .auth-main-container {
    display: flex !important;
  }
  nav .navbar-main-container .navbar-container .navbar .auth-container { gap: 8px; flex-wrap: nowrap; }
  /* "Iniciar sesión" sale del navbar (no cabe) y se muestra dentro del menú desplegable. */
  nav .navbar-main-container .navbar-container .navbar .auth-container .btn-login { display: none; }
  nav .navbar-main-container .navbar-container .navbar .auth-container .btn-accent {
    font-size: 13px; padding: 8px 12px; white-space: nowrap;
  }
  nav#navbar.nav-open .navbar .left-container .links .nav-only-mobile { display: block; }
  nav .navbar-main-container .navbar-container .navbar .hamburger {
    order: 9; flex: 0 0 auto; width: 26px; height: 20px; padding: 0;
    flex-direction: column; justify-content: space-between; cursor: pointer;
  }
  /* Las barras eran invisibles: el diseño les pone margin:5px 0, así que 2 barras
     ocupaban 2*(2+10)=24px en un contenedor de 20px y, al ser flex items con
     flex-shrink:1, se encogían hasta height:0. Quitamos margen y el shrink. */
  /* La 2ª barra tiene además una regla propia (:nth-child(2), más específica) que la
     dejaba en 1px, así que hay que igualar la especificidad. */
  nav .navbar-main-container .navbar-container .navbar .hamburger .bar,
  nav .navbar-main-container .navbar-container .navbar .hamburger .bar:nth-child(2) {
    width: 100%; height: 3px; margin: 0; flex: 0 0 auto;
    background: #fcfcfc; border-radius: 2px;
  }
  /* El pill de usuario (nombre + 3 puntos) duplicaba menús en móvil: sus opciones
     pasan al desplegable de la hamburguesa. */
  nav .navbar-main-container .navbar-container .navbar .user-main-container { display: none !important; }
  /* El hero de la landing tiene .main-text-container con position:relative; z-index:2,
     que se pintaba ENCIMA del desplegable (el texto se solapaba con el menú). Elevamos
     el nav para que él y su menú queden siempre por encima del contenido. */
  nav#navbar { position: relative; z-index: 1090; }
  nav#navbar.nav-open .navbar .left-container .links {
    display: flex !important; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 1080;
    /* El diseño le deja un margen automático que lo empujaba a la derecha. */
    margin: 0 !important; width: auto !important;
    background: #293241; padding: 6px 20px 14px;
    border-top: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 14px 28px rgba(0,0,0,.22);
  }
  nav#navbar.nav-open .navbar .left-container .links .navbar-link {
    display: block; width: 100%; padding: 13px 0; color: #fcfcfc; text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  nav#navbar.nav-open .navbar .left-container .links .navbar-link:last-child { border-bottom: 0; }
}

/* El título de la sección FAQ pasó de <span> a <h2> (semántica: agrupa 4 h2 y no estaba
   en la jerarquía). El diseño solo estiliza el <span> por elemento, así que replicamos
   su aspecto en el h2. */
.questions-main-container .questions-container .text-main-container .text-container h2 {
  font-size: 64px; font-weight: 600; color: #293241; text-align: left;
}

/* RESPONSIVE: titulares. El diseño deja .landing-title a 64px y el título de FAQ a 64px
   sin escalarlos en móvil → las palabras largas se cortan (p.ej. "encontrada" mide 384px
   en una caja de 375 en el 404). Los capamos. */
@media only screen and (max-width: 820px) {
  .landing-title { font-size: 38px; line-height: 1.18; }
  .questions-main-container .questions-container .text-main-container .text-container span,
  .questions-main-container .questions-container .text-main-container .text-container h2 {
    font-size: 34px; line-height: 1.2;
  }
}

/* ===== RESPONSIVE: cabecera del player/examen =====
   Título (izq) y reloj/progreso (der) van en fila y no caben: el reloj se cortaba fuera
   de pantalla y el título se partía palabra a palabra. Los apilamos. */
@media only screen and (max-width: 820px) {
  .test-player-header .header-list-main-container {
    flex-direction: column; align-items: flex-start; gap: 14px;
  }
  .test-player-header .header-list-container { width: 100%; justify-content: flex-start; gap: 14px; }
  .test-player-header .title-main-container { width: 100%; }
  .test-player-header .title-text { min-width: 0; }
  .time-left-container { flex: 1 1 auto; min-width: 0; }
}

/* ===== Página Ventajas ===== */
/* Título de cada bloque como <h2> (semántica SEO) con el estilo del diseño. */
.ventaja-list-container .text-list-container h2 {
  font-size: 26px; font-weight: 700; color: #293241; line-height: 1.3; margin-bottom: 16px;
}
/* Enlace-CTA de texto dentro de cada bloque. */
.btn-link-accent {
  display: inline-block; margin-top: 10px; color: #ee6c4d; font-weight: 600; text-decoration: none;
}
.btn-link-accent:hover { text-decoration: underline; }
/* Lista de la normativa (checklist con separadores). */
.normativa-list { list-style: none; padding: 0; margin: 0; }
.normativa-list li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid #eee; }
.normativa-list li i { color: #ee6c4d; margin-top: 4px; }
/* Banda CTA final. */
.cta-band {
  background: #293241; border-radius: 18px; padding: 60px 28px; text-align: center;
  color: #fcfcfc; margin: 24px 0 72px;
}
.cta-band h2 { color: #fcfcfc; font-weight: 800; margin-bottom: 0; }
.cta-band p { opacity: .82; max-width: 680px; margin: 16px auto 30px; }
.btn-outlined-light {
  border: 2px solid rgba(255,255,255,.55); color: #fcfcfc; background: transparent;
  padding: 12px 24px; border-radius: 8px; text-decoration: none; display: inline-flex; align-items: center;
}
.btn-outlined-light:hover { background: rgba(255,255,255,.12); color: #fcfcfc; }

/* ===== User pill del navbar (logueado): nombre + gema + 3 puntos ===== */
.navbar .user-container {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 8px 6px 14px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
}
.navbar .user-container:hover { background: rgba(255,255,255,.1); }
.navbar .user-container > span { line-height: 1; white-space: nowrap; color: #fcfcfc; }
.navbar .user-container .premium-container { display: inline-flex; align-items: center; color: #ee6c4d; }
.navbar .user-container .user-options {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
}
.navbar .user-container .user-options:hover { background: rgba(255,255,255,.15); }
.navbar .user-container .user-options i { font-size: 18px; line-height: 1; }
.navbar .user-container .dropdown-menu { margin-top: 8px; }

/* Flash: toast fijo centrado bajo el navbar (antes se solapaba y rompía el menú). */
.v2-flash {
  position: fixed; top: 84px; left: 50%; transform: translateX(-50%);
  z-index: 1090; width: 100%; max-width: 720px; padding: 0 16px;
}
.v2-flash .alert { margin-bottom: 10px; }

/* Barra de estadísticas del navbar (invitado): preguntas + actualización + tests realizados. */
.navbar-stats {
  display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: center; align-items: center;
  padding: 7px 16px; font-size: 13px; color: rgba(255,255,255,.85);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.navbar-stats strong { color: #fcfcfc; font-weight: 600; }
.navbar-stats .sep { opacity: .4; }
.navbar-stats i { color: #ee6c4d; margin-right: 6px; }

/* ===== Mi cuenta (users/edit) / Historial ===== */
.account-page { padding-top: 28px; padding-bottom: 64px; }
/* Tablas de datos poco pobladas (pagos): que no se estiren repartiendo columnas con
   huecos enormes; se ajustan al contenido y se centran en la tarjeta. */
.account-card > .table:not(.history-table) { width: auto; margin-left: auto; margin-right: auto; min-width: 60%; }
.account-header { margin-bottom: 28px; }
.account-header .account-badges { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; margin-top: 6px; color: #555; }
.account-header .badge-premium { background: rgba(238,108,77,.12); color: #ee6c4d; padding: 6px 14px; border-radius: 999px; font-weight: 600; }
.account-header .badge-premium i { color: #ee6c4d; margin-right: 6px; }
.account-header .badge-free { background: #f0f0f0; color: #555; padding: 6px 14px; border-radius: 999px; font-weight: 600; }
.account-header .account-email i { color: #ee6c4d; margin-right: 6px; }
.account-section { margin-bottom: 30px; }
.account-section h2 { display: flex; align-items: center; font-size: 20px; font-weight: 700; color: #293241; margin-bottom: 14px; }
.account-section h2 i { color: #ee6c4d; margin-right: 10px; font-size: 18px; }
.account-card { background: #fff; border: 1px solid #eee; border-radius: 14px; padding: 26px; box-shadow: 0 4px 18px rgba(0,0,0,.04); }
.account-card .table th { color: #293241; }
/* Planes de suscripción como tarjeta compacta (no estirada a los extremos). */
.plan-list { display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
.plan-row {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 16px 20px; border: 1px solid #eee; border-radius: 12px; background: #fcfcfc;
}
.plan-info { display: flex; flex-direction: column; gap: 2px; }
.plan-name { font-weight: 700; color: #293241; font-size: 16px; }
.plan-price { color: #ee6c4d; font-weight: 700; font-size: 15px; }
.plan-price small { color: #8c8b85; font-weight: 400; }
.plan-cta-form { margin: 0; flex: 0 0 auto; }
.plan-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 22px; font-size: 14px; border-radius: 6px; }

/* ===== Listado de tests (topic_tests#index): contadores intentos/aprobado/suspendido ===== */
.test-namebox { display: flex; flex-direction: column; min-width: 0; }
.test-tries { display: inline-flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 13px; margin-top: 6px; }
.test-tries .try-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* Aviso de examen (normativa/tiempo). */
.exam-notice {
  display: flex; gap: 14px; align-items: flex-start;
  background: rgba(238,108,77,.08); border: 1px solid rgba(238,108,77,.25);
  border-radius: 12px; padding: 16px 20px; margin-bottom: 24px; color: #7a3b2b;
}
.exam-notice i { color: #ee6c4d; font-size: 20px; margin-top: 2px; flex: 0 0 auto; }
.exam-notice p { margin: 0; font-size: 14px; line-height: 1.5; }
.test-tries .try-total { color: #8c8b85; }
.test-tries .try-ok { color: #568c39; }
.test-tries .try-ko { color: #8c2f2b; }
.test-tries .badge { font-size: 12px; min-width: 22px; }

/* ===== Test-player ===== */
/* Los botones Anterior/Siguiente quedaban pegados al footer (el diseño deja
   .main-container con padding-block:0 en el player). Damos aire al final. */
.test-detail-main-container { padding-bottom: 56px; }
.prevent_select { -webkit-user-select: none; user-select: none; }
.test-player-header { background: #293241; }
.test-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0; }
/* Navegación del test: "Anterior" (btn-outlined) y "Siguiente" (btn-filled) como dos
   botones iguales. Autónomo: no depende de la cadena .buttons-main-container del diseño
   (que en nuestra estructura no envuelve la navegación, dejaba el contenedor encogido). */
.test-nav { width: 100%; }
.test-nav .question-nav { display: flex; gap: 16px; align-items: stretch; }
.test-nav .question-nav .btn-outlined,
.test-nav .question-nav .btn-filled {
  flex: 1 1 0; width: auto; margin: 0;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 14px 24px; font-size: 14px; border-radius: 2px; box-sizing: border-box;
}
.test-actions .test-action { padding: 9px 16px; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
/* Respuestas: radio oculto + estado seleccionado. El cursor "mano" solo tiene sentido
   en el player (las respuestas son <label> clicables); en resultados son <div> de solo
   lectura, así que lo limitamos a label. */
label.question-item { cursor: pointer; }
.question-item .answer-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.question-item:has(.answer-radio:checked) .custom-input { background: #ee6c4d; border-color: #ee6c4d; color: #fff; }
.question-item:has(.answer-radio:checked) { border-color: #ee6c4d; }
.answers-list { list-style: none; padding: 0; }
.answers-list img, .question-image img { max-width: 100%; height: auto; }
/* ===== Temarios (topics#index) ===== */
/* Columna: cada elemento (volver / antetítulo / título) en su propia línea; si no,
   el enlace "Volver a temarios" y el antetítulo quedan pegados en la misma línea. */
.topics-header { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 32px; }
.topics-header .landing-subtitle { color: #ee6c4d; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 13px; }
.topics-title { font-size: 30px; font-weight: 800; color: #293241; margin: 6px 0 0; }
/* Cabecera de sección con acción a la derecha ("Ver todos"). */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.section-head h2 { margin: 0; }
.btn-link-accent i { font-size: 12px; margin-left: 4px; }

/* --- Mis últimos tests (lista de tarjetas) --- */
.recent-list { display: flex; flex-direction: column; gap: 12px; }
.recent-item {
  display: flex; align-items: center; gap: 20px;
  background: #fff; border: 1px solid #eee; border-radius: 14px; padding: 16px 20px;
  box-shadow: 0 3px 12px rgba(0,0,0,.03);
}
.recent-left { display: flex; align-items: center; gap: 14px; flex: 1 1 auto; min-width: 0; }
.type-badge {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px;
}
.type-badge.is-exam { background: rgba(55,140,255,.14); color: #2f6fd0; }
.type-badge.is-test { background: rgba(86,140,57,.14); color: #568c39; }
.recent-text { display: flex; flex-direction: column; min-width: 0; }
.recent-name { font-weight: 700; color: #293241; font-size: 15px; }
.recent-cat { color: #8c8b85; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-mid { display: flex; align-items: center; gap: 22px; flex: 0 0 auto; }
.status-pill { padding: 5px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.status-pill.is-approved { background: rgba(113,182,61,.16); color: #568c39; }
.status-pill.is-failed { background: rgba(182,58,42,.16); color: #b63a2a; }
.status-pill.is-progress { background: rgba(238,108,77,.14); color: #ee6c4d; }
.recent-score { display: flex; flex-direction: column; align-items: center; min-width: 64px; }
.recent-score span { font-weight: 800; color: #293241; font-size: 17px; line-height: 1.1; }
.recent-score small { color: #8c8b85; font-size: 11px; }
.recent-action { flex: 0 0 auto; }
.recent-btn {
  width: 42px; height: 42px; border-radius: 10px; background: #293241; color: #fcfcfc;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: background .15s;
}
.recent-btn:hover { background: #ee6c4d; color: #fff; }

/* --- Lista de temarios --- */
.topic-list { display: flex; flex-direction: column; gap: 12px; }
.topic-row {
  display: flex; align-items: center; gap: 20px;
  background: #fff; border: 1px solid #eee; border-radius: 14px; padding: 16px 22px;
  box-shadow: 0 3px 12px rgba(0,0,0,.03);
}
.topic-info { display: flex; align-items: center; gap: 16px; flex: 1 1 auto; min-width: 0; }
.topic-icon {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; background: rgba(238,108,77,.12);
  color: #ee6c4d; display: inline-flex; align-items: center; justify-content: center; font-size: 20px;
}
.topic-name { font-weight: 700; color: #293241; font-size: 16px; }
/* SEGUIMIENTO: número dentro de un círculo para que resalte. */
.topic-track { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; margin-right: 8px; }
.track-count {
  width: 40px; height: 40px; border-radius: 50%; background: #293241; color: #fcfcfc;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px;
}
.track-label { color: #8c8b85; font-size: 13px; white-space: nowrap; }
.topic-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.topic-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px; font-size: 14px; border-radius: 8px; text-decoration: none; white-space: nowrap;
}
.topic-btn.btn-outlined { border: 1px solid #d6d6d6; color: #293241; background: transparent; }
.topic-btn.btn-outlined:hover { background: #f2f2f2; }
@media (max-width: 720px) {
  .recent-item, .topic-row { flex-wrap: wrap; }
  .recent-mid { width: 100%; justify-content: space-between; }
  .topic-actions { width: 100%; }
  .topic-btn { flex: 1 1 0; }
  /* "Ver todos →" no debe partir la flecha a otra línea. */
  .section-head { gap: 10px; }
  .btn-link-accent { white-space: nowrap; }
  /* El botón de acción quedaba suelto en su propia fila: lo alineamos con el estado. */
  .recent-item { position: relative; padding-right: 68px; }
  .recent-action { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); }
}

/* ===== Historial de intentos (user_tests#index) ===== */
.history-header { margin-bottom: 24px; }
.history-back {
  display: inline-flex; align-items: center; gap: 6px; color: #ee6c4d;
  font-weight: 600; text-decoration: none; font-size: 14px; margin-bottom: 10px;
}
.history-back:hover { color: #d0492f; }
.history-title { display: flex; align-items: center; gap: 12px; font-size: 28px; font-weight: 800; color: #293241; margin: 0; }
.history-count {
  font-size: 14px; font-weight: 700; color: #ee6c4d; background: rgba(238,108,77,.12);
  padding: 4px 12px; border-radius: 999px;
}
.history-card { padding: 8px 8px; }
.history-table { margin: 0; }
.history-table thead th {
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #8c8b85;
  font-weight: 700; border-bottom: 2px solid #eee; padding: 14px 16px; white-space: nowrap;
}
.history-table tbody td { padding: 16px; border-bottom: 1px solid #f0f0f0; color: #293241; vertical-align: middle; }
.history-table tbody tr:last-child td { border-bottom: 0; }
.history-table tbody tr:hover { background: #fafafa; }
.type-pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.type-pill.is-exam { background: rgba(55,140,255,.12); color: #2f6fd0; }
.type-pill.is-test { background: rgba(86,140,57,.12); color: #568c39; }
.history-table .badge { font-size: 12px; padding: 6px 12px; }
/* Botones de acción de la tabla (variante compacta de btn-filled/btn-outlined). */
.history-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 18px; font-size: 13px; border-radius: 6px; text-decoration: none;
  white-space: nowrap;
}
.history-btn.btn-outlined { border: 1px solid #d6d6d6; color: #293241; background: transparent; }
.history-btn.btn-outlined:hover { background: #f2f2f2; }
/* Paginación estilizada (will_paginate: div.pagination con a/span/em.current). */
.history-pagination, .v2-pagination { margin-top: 24px; display: flex; justify-content: center; }
.history-pagination .pagination, .v2-pagination .pagination {
  display: inline-flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; align-items: center;
}
.history-pagination .pagination a, .history-pagination .pagination span, .history-pagination .pagination em,
.v2-pagination .pagination a, .v2-pagination .pagination span, .v2-pagination .pagination em {
  display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px;
  padding: 0 12px; border-radius: 8px; border: 1px solid #e6e6e6; color: #293241;
  text-decoration: none; font-style: normal; font-size: 14px;
}
.history-pagination .pagination .current, .v2-pagination .pagination .current {
  background: #293241; color: #fcfcfc; border-color: #293241; font-weight: 700;
}
.history-pagination .pagination a:hover, .v2-pagination .pagination a:hover { background: #f2f2f2; }
.history-pagination .pagination .disabled, .v2-pagination .pagination .disabled { opacity: .4; }
.history-pagination .pagination .gap, .v2-pagination .pagination .gap { border-color: transparent; }
/* RESPONSIVE: en móvil una tabla de 6 columnas obliga a scroll horizontal (no se veían
   ni Estado, ni Fecha, ni Acción). La convertimos en tarjetas apiladas con etiqueta. */
@media only screen and (max-width: 720px) {
  .history-card .table-responsive { overflow-x: visible; }
  .history-table thead { display: none; }
  .history-table, .history-table tbody, .history-table tr, .history-table td { display: block; width: 100%; }
  .history-table tr {
    border: 1px solid #eee; border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; background: #fff;
  }
  .history-table tbody tr:hover { background: #fff; }
  .history-table tbody td {
    border: 0; padding: 7px 0; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  }
  .history-table tbody td::before {
    content: attr(data-label); font-size: 11px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: #8c8b85; flex: 0 0 auto;
  }
  .history-table tbody tr td:last-child { border-top: 1px solid #f0f0f0; margin-top: 4px; padding-top: 12px; }
  .history-btn { width: auto; }
}
.history-empty { text-align: center; padding: 48px 16px; color: #8c8b85; }
.history-empty i { font-size: 42px; color: #d6d6d6; margin-bottom: 14px; display: block; }
.history-empty p { margin-bottom: 20px; }

/* ===== Test a medias (user_tests#incomplete) ===== */
.incomplete-card { text-align: center; max-width: 620px; margin: 0 auto; padding: 48px 32px; }
.incomplete-icon {
  width: 72px; height: 72px; border-radius: 50%; background: rgba(238,108,77,.12);
  color: #ee6c4d; display: inline-flex; align-items: center; justify-content: center;
  font-size: 30px; margin-bottom: 20px;
}
.incomplete-title { font-size: 22px; font-weight: 800; color: #293241; margin-bottom: 10px; }
.incomplete-text { color: #6b6b6b; font-size: 15px; line-height: 1.5; margin: 0 auto 28px; max-width: 460px; }
.incomplete-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.incomplete-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; font-size: 14px; border-radius: 8px; text-decoration: none;
}
.incomplete-btn.btn-outlined { border: 1px solid #d6d6d6; color: #293241; background: transparent; }
.incomplete-btn.btn-outlined:hover { background: #f2f2f2; }

/* ===== Reloj del examen ===== */
/* La cabecera es navy y el texto del diseño es oscuro → el contador quedaba invisible.
   Lo presentamos como tarjeta clara sobre el header, bien legible. */
.test-player-header .header-list-container { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: flex-end; }
.time-left-container {
  display: flex; flex-direction: column; gap: 8px;
  min-width: 190px; padding: 10px 16px; border-radius: 12px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
}
.time-left-container .time-left-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.time-left-container .time-left {
  color: rgba(255,255,255,.78); font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.time-left-container .time-left i { color: #ee6c4d; }
.time-left-container .time {
  color: #fcfcfc; font-size: 26px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: 1px;
}
.time-left-container .progress-bar-wrapper {
  width: 100%; height: 6px; background: rgba(255,255,255,.16);
  border-radius: 4px; overflow: hidden;
}
.time-left-container .progress-bar-wrapper .bar {
  height: 100%; background: #ee6c4d; width: 0; transition: width 1s linear;
}
/* Estado de urgencia (último minuto): rojo + parpadeo. */
.time-left-container.is-urgent { background: rgba(220,53,69,.18); border-color: rgba(220,53,69,.55); animation: clockPulse 1s ease-in-out infinite; }
.time-left-container.is-urgent .time,
.time-left-container.is-urgent .time-left i { color: #ff6b6b; }
.time-left-container.is-urgent .progress-bar-wrapper .bar { background: #ff6b6b; }
@keyframes clockPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ===== Resultados (user_tests/show) ===== */
.result-status-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px;
  border-radius: 999px; font-weight: 600; font-size: 14px; white-space: nowrap;
}
.result-status-badge.is-approved { background: rgba(113,182,61,.16); color: #71b63d; }
.result-status-badge.is-failed { background: rgba(182,58,42,.16); color: #ff8a7a; }
/* Separación entre las cajas de stats y el rectángulo de resultado (el diseño las deja
   pegadas: flex con space-between y sin gap). */
.test-detail-main-container .test-detail-container .results-main-container .results-container { gap: 32px; }
/* La caja de resultado del diseño es medio ancho (width:50%, float:right) → casi
   cuadrada y el texto se apila. La hacemos rectangular: ancho completo de su columna. */
.test-detail-main-container .test-detail-container .results-main-container .results-container .result-dialog-container .result-container {
  width: 100%; float: none;
}
/* El diseño colorea .result-container en verde (aprobado) con un selector de 6 clases
   encadenadas (especificidad 0,6,0), así que el override suspendido = rojo debe replicar
   la cadena para ganar en especificidad. */
.test-detail-main-container .test-detail-container .results-main-container .results-container .result-dialog-container .result-container.is-failed {
  background-color: #ffe3de;
}
.test-detail-main-container .test-detail-container .results-main-container .results-container .result-dialog-container .result-container.is-failed span,
.test-detail-main-container .test-detail-container .results-main-container .results-container .result-dialog-container .result-container.is-failed p {
  color: #d0492f;
}
.test-detail-main-container .test-detail-container .results-main-container .results-container .result-dialog-container .result-container.is-failed p strong {
  color: #b63a2a;
}

/* Cajas de stats (realizadas / correctas / incorrectas): centradas y con número
   más contenido. El diseño las alinea a la izquierda con un selector de 8 clases
   (0,8,0), así que hay que replicar la cadena para ganar en especificidad. */
.test-detail-main-container .test-detail-container .results-main-container .results-container .stats-main-container .top-container .stats-container .stats-box-container {
  align-items: center; justify-content: center; text-align: center;
  border: 1px solid #e6e6e6; border-radius: 12px; padding: 18px 12px;
  background: #fff; box-shadow: 0 3px 12px rgba(0,0,0,.04);
}
.test-detail-main-container .test-detail-container .results-main-container .results-container .stats-main-container .top-container .stats-container .stats-box-container span {
  font-size: 30px; line-height: 1.1;
}
.test-detail-main-container .test-detail-container .results-main-container .results-container .stats-main-container .top-container .stats-container .stats-box-container small {
  font-size: 12px; margin-top: 4px; text-transform: none;
}
.test-detail-main-container .test-detail-container .results-main-container .results-container .stats-main-container .top-container .stats-container {
  gap: 16px;
}
.questions-review .answer-tag { color: #ee6c4d; font-style: normal; font-weight: 600; margin-left: 6px; font-size: 13px; }
/* En resultados las respuestas son solo lectura: quitamos el cursor "mano" que el
   diseño pone en .question-item (pensado para el player). Especificidad alta para
   ganar a la regla larga del diseño (.test-detail…ul li .question-item). */
.test-detail-main-container .test-detail-container .questions-review .questions-main-container .questions-container ul li .question-item {
  cursor: default;
}
.questions-review .question-title img, .questions-review .question-item img { max-width: 100%; height: auto; margin-top: 8px; }

/* /planes en móvil: el diseño fija el número del precio a 116px (cadena de 3 clases,
   0,3,0) y en pantallas estrechas "19€/mes" se salía de la tarjeta. Se escala
   el bloque completo por debajo de 576px. */
@media (max-width: 576px) {
  .pricing-main-container .pricing-container h2 span,
  .pricing-main-container .pricing-container .h2 span {
    font-size: 72px;
  }
  .pricing-main-container .pricing-container h2,
  .pricing-main-container .pricing-container .h2 {
    font-size: 28px;
  }
}

/* Tablets grandes / portátiles estrechos (1025-1200px): el navbar de escritorio
   necesita ~1130px con el logo 15 aniversario; comprimimos sus piezas para que
   quepa sin solaparse hasta que el hamburguesa tome el relevo (≤1024). */
@media (min-width: 1025px) and (max-width: 1200px) {
  nav .navbar-main-container .navbar-container .navbar { flex-wrap: nowrap; }
  nav .navbar-main-container .navbar-container .navbar .left-container { flex-wrap: nowrap; min-width: 0; }
  nav .navbar-main-container .navbar-container .navbar .left-container .logo img {
    height: auto; max-width: 205px;
  }
  /* El diseño separa los enlaces del logo con margin-left:124px fijo; con el logo
     ancho eso empujaba los botones de auth a una segunda linea. */
  nav .navbar-main-container .navbar-container .navbar .left-container .links {
    margin-left: 32px !important;
  }
  nav .navbar-main-container .navbar-container .navbar .left-container .links .navbar-link {
    font-size: 15px;
  }
  nav .navbar-main-container .navbar-container .navbar .auth-container .btn-login,
  nav .navbar-main-container .navbar-container .navbar .auth-container .btn-accent {
    font-size: 14px; padding: 9px 14px; white-space: nowrap;
  }
}

/* Enlaces "discretos" (organismos oficiales: AESA, EASA, SENASA, MUPET): mismo color
   que el texto que los rodea, con un subrayado tenue como única señal de que son
   clicables. Ojo: NO quitar el subrayado — un enlace indistinguible del texto sí
   roza lo que Google considera enlace oculto, y ademas es un problema de
   accesibilidad (WCAG exige distinguirlos por algo mas que el color). */
a.enlace-discreto {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
a.enlace-discreto:hover {
  color: inherit;
  text-decoration-color: currentColor;
}

/* Tablets y portátiles (821-1641px): el diseño solo da margen lateral al contenido en
   móvil (≤820, reglas propias) y en pantallas anchas (centrado por max-width 1480). En
   todo el rango intermedio los contenedores van a ancho completo con padding 0 y el
   texto tocaba los bordes. Tope en 1641 (decisión del usuario): a partir de ahí el
   centrado natural ya da ~80px de margen y la transición es continua. */
@media (min-width: 821px) and (max-width: 1641px) {
  .ventajas-container, .main-container, .questions-container, .pricing-container,
  .testimonials-container, .hero-container, .logos-container, .contact-container,
  .register-container, .account-container {
    padding-left: 32px !important; padding-right: 32px !important;
  }
}

/* Comparativa de /planes: plegada tras un boton discreto; estilo tarjeta del diseno
   (bordes redondeados, cabecera oscura, acento en Premium) en vez de tabla cruda. */
.plan-comparativa { max-width: 860px; margin: 0 auto; padding-top: 0; padding-bottom: 90px; text-align: center; }
.plan-comparativa .comparativa-toggle {
  background: none; border: 1px solid #d8dce3; border-radius: 999px;
  color: #293241; font-weight: 600; font-size: 15px; padding: 12px 26px; cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.plan-comparativa .comparativa-toggle:hover { border-color: #ee6c4d; color: #ee6c4d; }
.plan-comparativa .comparativa-toggle i { margin-left: 8px; transition: transform .2s ease; }
.plan-comparativa .comparativa-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.plan-comparativa .table-responsive {
  margin-top: 26px; border-radius: 16px; overflow: hidden;
  box-shadow: 0 6px 24px rgba(41,50,65,.10); border: 1px solid #edeff3;
}
.plan-comparativa .table { margin-bottom: 0; text-align: left; }
.plan-comparativa .table thead th {
  background: #293241; color: #fcfcfc; font-weight: 600; border: 0; padding: 14px 18px;
}
.plan-comparativa .table thead th:nth-child(3) { color: #ee6c4d; }
.plan-comparativa .table td { padding: 13px 18px; border-color: #edeff3; vertical-align: middle; }
.plan-comparativa .table tbody tr:nth-child(odd) td { background: #f7f8fa; }
.plan-comparativa .table td:first-child { font-weight: 500; color: #293241; }
.plan-comparativa .table td i.fa-check { color: #2e9e6b; margin-right: 6px; }
.plan-comparativa .table td strong { color: #293241; }

/* FAQ mas compacta: con 12 preguntas, el acordeon del diseno (paddings grandes)
   ocupaba demasiado alto. */
#faqAccordion .accordion-button { padding: 14px 18px; font-size: 16px; line-height: 1.35; }
#faqAccordion .accordion-body { padding: 12px 18px 16px; font-size: 15px; line-height: 1.55; }
#faqAccordion .accordion-item { margin-bottom: 0; }

/* ===== Header fijo (sticky) =====
   El menu queda anclado arriba y el contenido se desplaza por debajo.
   - Paginas interiores: el nav va dentro de .header-main (solido) -> sticky en el wrapper.
   - Home: el nav va suelto y transparente sobre el hero -> sticky en el propio nav con
     fondo solido (mismo azul que el hero, no se nota sobre el; da legibilidad al flotar
     sobre contenido claro). sticky y no fixed: mantiene su hueco (sin saltos de layout).

   CLAVE: bootstrap.min.css pone `overflow-x: hidden` en html y body (para evitar scroll
   horizontal de los elementos decorativos del hero). Ese overflow-x en los ancestros
   convierte a html/body en contenedor de scroll y ROMPE `position: sticky` de sus hijos
   (el header se ancla a un elemento que no scrollea en vertical -> nunca se fija).
   `overflow-x: clip` recorta igual el desbordamiento horizontal (sin barra) pero NO crea
   contenedor de scroll, asi que el sticky vuelve a funcionar. Verificado con scroll real
   en home e interiores, escritorio y movil, sin reintroducir scroll horizontal. */
html, body { overflow-x: clip; }
/* z-index 1030 (nivel "fixed" de Bootstrap), DEBAJO de sus overlays: modal-backdrop
   1050, modal 1055, popover 1070, tooltip 1080, toast 1090. Antes estaba en 1100 y
   tapaba el modal de explicacion del test-player y los desplegables. */
/* :not(.test-player-header) — la cabecera del player de test/examen reutiliza la clase
   .header-main, asi que esta regla la volvia sticky sin querer: al ir DESPUES en el DOM
   con el mismo z-index, tapaba el desplegable de la hamburguesa. Se queda como estaba
   (no sticky), lo que ademas libera alto en movil. */
.header-main:not(.test-player-header) { position: sticky; top: 0; z-index: 1030; }
nav#navbar { position: sticky; top: 0; z-index: 1030; background: #293241; }
/* En la home el nav es transparente sobre el hero y su barra visible
   (.navbar-mobile) no tiene fondo -> al fijarse y pasar contenido claro por debajo se
   transparentaba. Fondo solido del mismo azul del hero: identico arriba (sin costura
   sobre el hero oscuro) y opaco/legible al hacer scroll. En interiores el header ya es
   solido (.header-main), asi que solo tocamos la barra de la landing. */
nav#navbar .navbar-main-container.navbar-mobile { background: #293241; }
/* Sombra sutil para separar el header del contenido al hacer scroll. */
.header-main:not(.test-player-header), nav#navbar .navbar-main-container.navbar-mobile { box-shadow: 0 4px 14px rgba(0,0,0,.18); }

/* ===== Header condensado al hacer scroll (estilo elmundo.es) =====
   front.js alterna .header-condensed en <body> al bajar. La barra se vuelve ESTRECHA
   para no molestar mientras se navega, pero el menu sigue visible al lado del logo
   (nada de hamburguesa en escritorio: eso solo en movil, que lo gestiona el bloque
   @media <=1024px de mas arriba). Arriba del todo el header se ve completo como siempre. */
.navbar-stats,
.navbar .left-container .logo img,
.navbar-container { transition: max-height .2s ease, padding .2s ease, opacity .2s ease; }

/* La barra de stats (invitado) NO desaparece al hacer scroll: se mantiene visible e
   integrada con la cabecera, solo que compactada (menos alto y letra algo menor) para
   que el conjunto siga siendo estrecho. */
body.header-condensed .navbar-stats {
  padding-top: 3px; padding-bottom: 3px; font-size: 12px; gap: 2px 16px;
}
body.header-condensed .navbar-container { padding-top: 0 !important; padding-bottom: 0 !important; }
body.header-condensed .navbar-container .navbar { padding-top: 7px !important; padding-bottom: 7px !important; }
/* Logo mas pequeno; al ocupar menos, el menu cabe holgado a su lado. */
body.header-condensed .navbar .left-container .logo img { max-height: 26px !important; width: auto; }

/* Menu al lado del logo, compacto (el diseno lo separa 124px del logo: lo reducimos). */
body.header-condensed .navbar { flex-wrap: nowrap; align-items: center; }
body.header-condensed .navbar .left-container { align-items: center; gap: 0; }
body.header-condensed .navbar .left-container .links { margin-left: 32px !important; align-items: center; }
body.header-condensed .navbar .left-container .links .navbar-link { font-size: 15px; }
/* Botones de auth y pill de usuario compactos, pegados a la derecha. */
body.header-condensed .navbar .auth-main-container { margin-left: auto; }
body.header-condensed .navbar .auth-container .btn-accent { font-size: 12px; padding: 6px 12px; white-space: nowrap; }
body.header-condensed .navbar .auth-container .btn-login { font-size: 13px; }

/* Parrafo SEO al final de /planes: legible y contenido, no protagonista. */
.plan-seo-outro { max-width: 820px; margin: 0 auto; padding: 0 20px 80px; color: #444; }
.plan-seo-outro p { font-size: 15px; line-height: 1.6; margin-bottom: 12px; }
.plan-seo-outro strong { color: #293241; }

/* Enunciado de la pregunta +2px para que resalte sobre el resto (el diseno lo deja en
   24px en escritorio y 14px a <=820px). Se replica la cadena de selectores del diseno
   para ganar en especificidad. */
.test-detail-main-container .test-detail-container .questions-main-container .questions-container .question-title {
  font-size: 26px;
}
@media only screen and (max-width: 820px) {
  .test-detail-main-container .test-detail-container .questions-main-container .questions-container .question-title {
    font-size: 16px;
  }
}

/* Las acciones del test (notas, teoria, explicacion...) ahora van debajo de la
   navegacion; un poco de aire para separarlas de los botones Anterior/Siguiente. */
.test-detail-main-container .test-detail-container .test-actions { margin-top: 24px; }

/* ===== F0 plan SEO: bloque "3 rutas" en la home ===== */
.rutas-main-container { background: #f7f8fa; }
.rutas-container { padding: 64px 20px; }
.rutas-container > h2 { font-size: 34px; font-weight: 600; color: #293241; text-align: center; margin-bottom: 32px; }
.rutas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ruta-card {
  display: flex; flex-direction: column; gap: 8px; text-decoration: none;
  background: #fff; border: 1px solid #edeff3; border-radius: 16px; padding: 26px 24px;
  box-shadow: 0 4px 16px rgba(41,50,65,.06); transition: transform .15s ease, box-shadow .15s ease;
}
.ruta-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(41,50,65,.12); }
.ruta-card i { color: #ee6c4d; font-size: 24px; }
.ruta-card .ruta-title { font-size: 19px; font-weight: 600; color: #293241; }
.ruta-card .ruta-text { font-size: 15px; line-height: 1.5; color: #5b6472; }
@media (max-width: 820px) {
  .rutas-grid { grid-template-columns: 1fr; }
  .rutas-container { padding: 44px 20px; }
  .rutas-container > h2 { font-size: 26px; }
}

/* ===== F0: navegacion SEO del footer ===== */
.footer-seo-nav {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  max-width: 1120px; margin: 0 auto; padding: 44px 20px 8px;
}
.footer-seo-col { display: flex; flex-direction: column; gap: 9px; }
.footer-seo-title {
  color: rgba(255,255,255,.55); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px;
}
.footer-seo-col a { color: rgba(255,255,255,.9); text-decoration: none; font-size: 15px; }
.footer-seo-col a:hover { color: #ee6c4d; }
@media (max-width: 820px) {
  .footer-seo-nav { grid-template-columns: 1fr; gap: 22px; padding: 32px 20px 4px; }
}

/* ===== F0: paginas del motor de contenido (app/content/**.md) ===== */
.contenido-seo .breadcrumb-seo { font-size: 14px; color: #6b7280; margin-bottom: 14px; }
.contenido-seo .breadcrumb-seo a { color: #6b7280; text-decoration: none; }
.contenido-seo .breadcrumb-seo a:hover { color: #ee6c4d; }
.contenido-seo .breadcrumb-seo .sep { margin: 0 7px; opacity: .5; }
.contenido-cuerpo { font-size: 16px; line-height: 1.7; color: #3a4250; }
.contenido-cuerpo h2 { font-size: 27px; font-weight: 600; color: #293241; margin: 34px 0 12px; }
.contenido-cuerpo h3 { font-size: 20px; font-weight: 600; color: #293241; margin: 24px 0 10px; }
.contenido-cuerpo p { margin-bottom: 14px; }
.contenido-cuerpo ul, .contenido-cuerpo ol { margin: 0 0 16px 22px; }
.contenido-cuerpo li { margin-bottom: 7px; }
.contenido-cuerpo a { color: inherit; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.contenido-cuerpo a:hover { text-decoration-color: currentColor; }
.contenido-cuerpo table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15px; }
.contenido-cuerpo th { background: #293241; color: #fcfcfc; text-align: left; padding: 11px 14px; }
.contenido-cuerpo td { border-top: 1px solid #edeff3; padding: 11px 14px; }
.contenido-cuerpo tbody tr:nth-child(odd) td { background: #f7f8fa; }
.contenido-fuentes { margin-top: 40px; padding-top: 20px; border-top: 1px solid #edeff3; }
.contenido-fuentes h2 { font-size: 18px; font-weight: 600; color: #293241; margin-bottom: 10px; }
.contenido-fuentes ul { margin-left: 20px; font-size: 15px; }
.contenido-revision { margin-top: 16px; font-size: 13px; color: #8a929e; }
/* Aviso destacado dentro del cuerpo (markdown: "> texto"). */
.contenido-cuerpo blockquote { margin: 22px 0; padding: 14px 18px; background: #f7f8fa;
  border-left: 3px solid #ee6c4d; font-size: 15px; }
.contenido-cuerpo blockquote p:last-child { margin-bottom: 0; }
.contenido-cuerpo blockquote ol, .contenido-cuerpo blockquote ul { margin: 10px 0 12px 22px; }
.contenido-cuerpo blockquote li { margin-bottom: 4px; }
/* Bloques de codigo: METAR, TAF y demas partes que se leen literalmente. */
.contenido-cuerpo pre { margin: 18px 0; padding: 14px 18px; background: #293241; color: #fcfcfc;
  border-radius: 4px; overflow-x: auto; }
.contenido-cuerpo pre code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px; letter-spacing: .04em; white-space: pre; }
.contenido-cuerpo :not(pre) > code { background: #f0f2f5; padding: 2px 6px; border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; }
/* Paginas indice (ItemList): lista de fichas sin vinetas. */
.contenido-itemlist { list-style: none; margin: 22px 0 0 0 !important; padding: 0; }
.contenido-itemlist li { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid #edeff3; }
.contenido-itemlist li:last-child { border-bottom: 0; }
.contenido-itemlist h3 { margin-top: 0 !important; }
.contenido-itemlist p:last-child { margin-bottom: 0; }
/* FAQ de las paginas de contenido. */
.contenido-faq { margin-top: 38px; }
.contenido-faq h3 { font-size: 17px; }
.contenido-faq h3 + p { margin-bottom: 18px; }
/* Pregunta de ejemplo (landings de test y banco de preguntas). */
.pregunta-ejemplo { margin: 20px 0; padding: 18px 22px; background: #f7f8fa;
  border-left: 3px solid #ee6c4d; font-size: 15px; }
.pregunta-ejemplo ol { margin: 10px 0 14px 22px; }
.pregunta-ejemplo li { margin-bottom: 5px; }
.pregunta-ejemplo p:last-child { margin-bottom: 0; }
.pregunta-solucion { color: #3a4250; }