/* Ajustes de diseño globales (QA de diseño 2026-10-25). Se carga después de style.css. */

/* G1 · Títulos en Fraunces: espacio entre palabras legible */
h1, .hero-title, .detail-title, .section-title { word-spacing: .12em; letter-spacing: -.01em; }

/* G2 · Números tabulares solo donde hay cifras alineadas (el guion «-» dejaba huecos en el texto) */
body { font-variant-numeric: normal; }
.stat-value, .exam-stat-value, td.num, .num, [data-num], .spec-row dd, .boat-card-spec-value, .spec-pill-value, .bd-num, .per-rules-grid strong { font-variant-numeric: tabular-nums; }

/* G3 · Datos bajo el título alineados con el título en móvil */
@media (max-width: 768px) {
  .detail-subtitle { flex-direction: row !important; flex-wrap: wrap; justify-content: flex-start !important; align-items: baseline !important; gap: 4px 12px; text-align: left !important; }
}

/* G4 · Sin palabras sueltas al final de títulos y párrafos */
h1, h2, h3 { text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }

/* G5 · Sin guiones automáticos en escritorio ni en pies de foto */
@media (min-width: 769px) { .article-body, .guide-content, .legal-page { hyphens: manual; } }
figcaption { hyphens: manual; }

/* G7 · Migas con aire antes del título */
.breadcrumb, .detail-breadcrumb { margin-bottom: 12px; }

/* G8 · Preguntas frecuentes: mismo componente y zona táctil de 44px */
.mb-faq-i > summary, .exam-faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 10px 2px; }
.mb-faq-i > summary::-webkit-details-marker, .exam-faq summary::-webkit-details-marker { display: none; }
.mb-faq-i > summary::after, .exam-faq summary::after { content: "+"; flex: none; font-weight: 700; font-size: 1.25rem; line-height: 1; color: #2563eb; }
.mb-faq-i[open] > summary::after, .exam-faq details[open] > summary::after { content: "−"; }

/* G9 · «.com» del logo con contraste suficiente */
.site-logo span { color: #60a5fa; }

/* G10 · Zonas táctiles mínimas en móvil */
@media (max-width: 768px) {
  .detail-breadcrumb a { display: inline-block; padding-block: 8px; }
  .detail-ext-link { display: inline-block; padding-block: 10px; }
  .footer-newsletter input[type=checkbox], .footer-newsletter-consent input { width: 20px; height: 20px; }
}

/* Buscador */
h1.search-h1 { color: var(--text-primary, #0f172a) !important; }
.boat-card-badge { left: 12px; right: auto; }
.filter-combobox, .filter-combobox-input { width: 100%; }

/* Contacto: contenido con margen lateral */
.contact-wrap { padding-left: 20px; padding-right: 20px; }

/* Ficha de barco */
.similar-section { margin-left: auto; margin-right: auto; }
.gallery-item.primary img[src$=".png"] { object-fit: contain; background: #fff; }
.spec-section:has(dl:empty) { display: none; }

/* Tarjetas de barco: etiquetas sin cortar */
.boat-card-spec-label { white-space: normal; overflow: visible; text-overflow: clip; }

/* Diseñador: foto redonda */
img.designer-photo { width: 80px; height: 80px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; }

/* Temario: aire bajo la cabecera; barra fija móvil sin tapar el pie */
.article-layout { padding-top: 32px; }
@media (max-width: 768px) { body:has(.topic-mobile-cta) .site-footer { padding-bottom: 84px; } }
.topic-row .tr-num { color: #94a3b8; }

/* Exámenes en PDF: dos columnas desde 900px */
@media (min-width: 900px) {
  .pdf-conv-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .pdf-conv-docs { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important; }
}

/* Pie: newsletter alineada con las columnas */
.footer-newsletter-card { max-width: none; margin-left: 0; }

/* Contrastes */
.engine-sheet-page figcaption { color: #9ca3af; }
.detail-ext-link, .brand-website-link { color: #2563eb; }
tr.is-past td { color: #6b7280; }
.cv-pill.st-celebrada { color: #4b5563; }
.home-link-card--featured .home-link-desc { color: #cbd5e1; }

/* Portada: tarjetas de categoría legibles sobre la foto */
.cat-card-overlay { background: linear-gradient(transparent 35%, rgba(0, 0, 0, .65)) !important; }

/* Buscadores: el texto no pasa por debajo del botón */
.search-box input { padding-right: 110px; text-overflow: ellipsis; }

/* Móvil: chips de astilleros en dos columnas */
@media (max-width: 600px) { .brands-row { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; } }

/* Portada 769-1180px: las tarjetas estrechas sin miniatura para que el texto respire */
@media (min-width: 769px) and (max-width: 1180px) {
  .hc-card:not(.hc-card--main) { padding-right: 20px !important; }
  .hc-card:not(.hc-card--main) .hc-cov { display: none; }
}

/* Temario: botón «Hacer test del tema» visible (blanco sobre el recuadro oscuro, texto oscuro) */
#main-content .topic-cta-practice { background: #0c1220 !important; }
#main-content .topic-cta-practice .btn, #main-content .topic-cta-practice .btn-primary { background: #fff !important; color: #0c1220 !important; border-color: #fff !important; }
#main-content .topic-cta-practice .btn:hover { background: #2563eb !important; color: #fff !important; border-color: #2563eb !important; }

/* Simulacro: los puntos de navegación caben en móvil */
@media (max-width: 768px) { .q-nav { grid-template-columns: repeat(auto-fill, minmax(31px, 1fr)) !important; } }

/* Enlaces de fuente largos sin desbordar */
a.inline-source { white-space: normal; overflow-wrap: anywhere; }

/* Páginas con columna propia (libro, chuletas, calculadora, convocatorias, Beaufort): borde izquierdo alineado con el título del resto de la web */
@media (min-width: 1000px) {
  .bk, .cs, .ncp, .cv, .bd { margin-left: max(0px, calc((100% - 1200px) / 2)) !important; margin-right: auto !important; }
}

/* Calculadora: botón principal en el azul de la web (era verde) */
.nc-btn { background: #2563eb !important; }
.nc-btn:hover { background: #1d4ed8 !important; }
.nc-out { border-left-color: #2563eb !important; background: #eff6ff !important; }

/* Beaufort: subtítulo de las tarjetas legible sobre los colores intensos */
.bd-card-h .bd-kn { opacity: 1 !important; }

/* Libro: aire entre la lista y el párrafo siguiente */
.book-landing ul + p, .bk ul + p { margin-top: 14px; }

/* Guías: miniaturas sin foto con la misma proporción que las fotos */
.guide-hub-thumb--icon { aspect-ratio: 16 / 9; height: auto !important; }
@media (max-width: 600px) { .guide-hub-grid { grid-template-columns: 1fr 1fr !important; } }