/* Guías públicas (/guias). Se carga solo en esas páginas (content_for :head) encima del layout `publico`, que es de la sesión de marketing:
   aquí no hay cabecera ni menú, solo la tipografía del artículo. Colores de la marca con valores propios, para no depender de la hoja que
   use el layout. Pensado primero para el teléfono (375 px) y con lectura cómoda en escritorio (~70 caracteres por línea). */

.guia {
  --g-marino: #0D2B5B;
  --g-azul: #1565D8;
  --g-dorado: #FFC107;
  --g-texto: #0F172A;
  --g-suave: #5B6474;
  --g-borde: #E3E6EB;
  --g-fondo-suave: #F3F6FA;
  --g-tarjeta: #FFFFFF;
  background: var(--g-tarjeta);
  border: 1px solid var(--g-borde);
  border-radius: 14px;
  padding: 20px 16px 24px;
  color: var(--g-texto);
  font-size: 16px;
  line-height: 1.65;
  min-width: 0;
  overflow-wrap: break-word;
}
@media (min-width: 700px) { .guia { padding: 32px 40px 40px; font-size: 17px; } }

.guia h1, .guia h2, .guia h3 { font-family: Poppins, Inter, system-ui, sans-serif; color: var(--g-marino); line-height: 1.25; }
.guia h1 { font-size: 28px; margin: 4px 0 12px; letter-spacing: -.01em; }
.guia h2 { font-size: 22px; margin: 36px 0 10px; scroll-margin-top: 16px; }
.guia h3 { font-size: 18px; margin: 24px 0 6px; scroll-margin-top: 16px; }
@media (min-width: 700px) { .guia h1 { font-size: 34px; } .guia h2 { font-size: 24px; } }
.guia p, .guia ul, .guia ol { margin: 0 0 14px; }
.guia ul, .guia ol { padding-left: 22px; }
.guia li { margin: 4px 0; }
.guia a { color: var(--g-azul); text-underline-offset: .15em; }
.guia a:hover { color: var(--g-marino); }
.guia :focus-visible { outline: 3px solid var(--g-azul); outline-offset: 2px; border-radius: 4px; }
.guia strong { color: var(--g-marino); }

.guia-migas { font-size: 14px; color: var(--g-suave); margin-bottom: 8px; }
.guia-migas a { font-weight: 600; }
.guia-bajada { font-size: 18px; color: var(--g-suave); }
.guia-meta { font-size: 14px; color: var(--g-suave); }

/* Índice plegable: en el teléfono no empuja el contenido; se abre si se quiere. */
.guia-indice { background: var(--g-fondo-suave); border-radius: 12px; padding: 4px 16px; margin: 8px 0 24px; }
.guia-indice summary { cursor: pointer; font-weight: 600; color: var(--g-marino); min-height: 44px; display: flex; align-items: center; }
.guia-indice ol { margin: 0 0 12px; }

/* Tablas: en pantallas chicas se desplazan dentro de su caja, nunca la página entera. */
.guia-cuerpo table, .guia-respuesta table {
  display: block; overflow-x: auto; border-collapse: collapse; margin: 0 0 18px; font-size: 15px; max-width: 100%;
  font-variant-numeric: tabular-nums;
}
.guia-cuerpo th, .guia-cuerpo td { border-bottom: 1px solid var(--g-borde); padding: 8px 10px; text-align: left; vertical-align: top; }
.guia-cuerpo th { background: var(--g-fondo-suave); color: var(--g-marino); white-space: nowrap; }
.guia-cuerpo blockquote { margin: 0 0 16px; padding: 12px 16px; border-left: 4px solid var(--g-dorado); background: #FFF8E1; border-radius: 0 10px 10px 0; }
.guia-cuerpo blockquote p:last-child { margin-bottom: 0; }

/* Llamado a la lista de espera */
.guia-cta { margin: 32px 0; padding: 20px; border-radius: 14px; background: var(--g-marino); color: #E6EDF8; }
.guia-cta p { margin: 0 0 12px; }
.guia-cta-titulo { font-family: Poppins, Inter, system-ui, sans-serif; font-size: 20px; font-weight: 700; color: #fff; line-height: 1.3; }
.guia-cta-accion { margin-top: 16px !important; }
.guia .guia-boton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border-radius: 12px;
  background: var(--g-dorado); color: var(--g-marino); font-weight: 700; text-decoration: none; text-align: center; max-width: 100%;
}
.guia .guia-boton:hover { background: #FFD54F; color: var(--g-marino); }
.guia-cta :focus-visible { outline-color: #FFD54F; }
.guia-cta-nota { font-size: 14px; color: #A9BBDA; margin-bottom: 0 !important; }
@media (max-width: 480px) { .guia .guia-boton { display: flex; width: 100%; } }

.guia-preguntas h3 { font-size: 17px; }
.guia-fuentes, .guia-relacionadas { border-top: 1px solid var(--g-borde); margin-top: 28px; }
.guia-fuentes ol { font-size: 15px; }

/* Índice de /guias */
.guias-cluster h2 { margin-top: 28px; }
.guias-lista { list-style: none; padding: 0 !important; display: grid; gap: 12px; }
.guias-item { border: 1px solid var(--g-borde); border-radius: 12px; padding: 14px 16px; margin: 0 !important; }
.guias-item p { margin: 6px 0 0; font-size: 15px; }
.guias-enlace { font-weight: 700; font-size: 17px; }

/* Calculadoras dentro de una guía */
.calc { margin: 28px 0; padding: 18px 16px; border: 2px solid var(--g-azul); border-radius: 14px; background: #F5F9FF; }
.guia .calc-titulo { margin-top: 0; }
.calc-form { display: grid; gap: 12px; margin-bottom: 16px; }
@media (min-width: 700px) { .calc-form { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; } }
.calc-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--g-marino); }
.calc-form input {
  font: inherit; font-size: 17px; font-variant-numeric: tabular-nums; min-height: 48px; padding: 8px 12px;
  border: 1px solid #B8C2D1; border-radius: 10px; background: #fff; color: var(--g-texto); width: 100%;
}
.calc-resultado table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; max-width: 100%; margin: 0 0 10px; }
.calc-resultado th, .calc-resultado td { padding: 8px 10px; border-bottom: 1px solid var(--g-borde); text-align: right; }
.calc-resultado th[scope="row"], .calc-resultado thead th:first-child { text-align: left; font-weight: 500; color: var(--g-texto); }
.calc-resultado thead th { color: var(--g-marino); }
.calc-nota { font-size: 14px; color: var(--g-suave); }
.calc-aviso { background: #FDE7E4; color: #7A271A; padding: 10px 12px; border-radius: 10px; }

/* El layout público carga panel.css DESPUÉS de esta hoja (yield :head va antes), y sus tablas van en mayúsculas, sin salto de línea y a todo
   el ancho. Se anula con un selector más específico (`.panel .guia …`), no con el orden de carga. */
.panel .guia th { text-transform: none; letter-spacing: normal; font-size: inherit; white-space: normal; color: var(--g-marino); font-weight: 600; }
.panel .guia-cuerpo table { width: auto; font-size: 15px; }
.panel .calc-resultado table { display: table; width: 100%; table-layout: auto; font-size: 15px; }
.panel .calc-resultado td { white-space: nowrap; }
.panel .calc-resultado th[scope="row"] { font-size: 14px; font-weight: 500; color: var(--g-texto); }

@media (max-width: 480px) {
  .calc { padding: 16px 12px; }
  .panel .calc-resultado th, .panel .calc-resultado td { padding: 8px 5px; }
  .guia-bajada { font-size: 17px; }
}