/* ==========================================================================
   base.css — Estilos globales base
   Informe Técnico FuXion Perú — Volumen 41
   Depende de: reset.css (ejecutado antes) + variables.css
   ========================================================================== */


/* ════════════════════════════════════════════════════════════════════════════
   1. DOCUMENTO Y CUERPO
   ════════════════════════════════════════════════════════════════════════════ */

html {
  font-size: 16px;
  color-scheme: light;
  tab-size: 4;
  /* Evita el scroll/arrastre horizontal en móvil sin romper el header sticky.
     'clip' (a diferencia de 'hidden') no crea contenedor de scroll. */
  overflow-x: clip;
}

body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--color-text);
  background-color: #F8F9FC;
  background-image:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(27, 58, 107, 0.055) 0%, transparent 100%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(30, 106, 122, 0.035) 0%, transparent 100%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Refuerzo del clip horizontal a nivel body (algunos móviles lo necesitan). */
  overflow-x: clip;
  max-width: 100%;
}


main {
  display: block;   /* IE11 */
}

section,
article {
  display: block;
}


/* ════════════════════════════════════════════════════════════════════════════
   2. TIPOGRAFÍA — TÍTULOS
   ════════════════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-primary);
  margin-bottom: var(--space-md);
}

h1 {
  font-size: var(--text-4xl);      /* 48px desktop */
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
}

h2 {
  font-size: var(--text-3xl);      /* 36px */
  font-weight: var(--fw-bold);
  margin-top: var(--space-2xl);
}

h3 {
  font-size: var(--text-2xl);      /* 30px */
  font-weight: var(--fw-semibold);
  margin-top: var(--space-xl);
}

h4 {
  font-size: var(--text-xl);       /* 24px */
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin-top: var(--space-lg);
}

h5 {
  font-size: var(--text-lg);       /* 20px */
  font-weight: var(--fw-medium);
  color: var(--color-text);
}

h6 {
  font-size: var(--text-md);       /* 18px */
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* El primer hijo directo no hereda margen superior */
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child {
  margin-top: 0;
}


/* ════════════════════════════════════════════════════════════════════════════
   3. PÁRRAFOS Y TEXTO INLINE
   ════════════════════════════════════════════════════════════════════════════ */

p {
  margin-bottom: var(--space-md);
  color: var(--color-text);
  line-height: var(--lh-relaxed);
  max-width: var(--container-reading);   /* limita líneas largas */
}

p:last-child {
  margin-bottom: 0;
}

/* Párrafo lead — intro de sección */
p.lead {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-regular);
}

strong,
b {
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

em,
i {
  font-style: italic;
}

small {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-snug);
}

mark {
  background-color: var(--color-accent-soft);
  color: var(--color-text);
  padding: 0 0.2em;
  border-radius: var(--radius-sm);
}

abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

sub,
sup {
  font-size: 0.7em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup { top: -0.5em; }
sub { bottom: -0.25em; }


/* ════════════════════════════════════════════════════════════════════════════
   4. ENLACES
   ════════════════════════════════════════════════════════════════════════════ */

a {
  color: var(--color-text-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--transition-fast),
              text-decoration-color var(--transition-fast);
}

a:hover {
  color: var(--color-text-link-hover);
  text-decoration-color: var(--color-text-link-hover);
}

a:active {
  color: var(--color-primary-dark);
}

a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Enlace sin decoración — para cuando se envuelven imágenes o botones */
a.no-underline {
  text-decoration: none;
}


/* ════════════════════════════════════════════════════════════════════════════
   5. LISTAS
   ════════════════════════════════════════════════════════════════════════════ */

/* Reset.css elimina list-style — lo restauramos para listas de contenido */
ul.content-list,
ol.content-list {
  padding-left: var(--space-lg);
  margin-bottom: var(--space-md);
}

ul.content-list {
  list-style: disc;
}

ol.content-list {
  list-style: decimal;
}

ul.content-list li,
ol.content-list li {
  margin-bottom: var(--space-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
}

ul.content-list li::marker,
ol.content-list li::marker {
  color: var(--color-primary);
}

/* Listas de navegación heredan el reset (sin bullet) */
nav ul,
nav ol {
  list-style: none;
  padding-left: 0;
}


/* ════════════════════════════════════════════════════════════════════════════
   6. SEPARADORES
   ════════════════════════════════════════════════════════════════════════════ */

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-2xl) 0;
}

hr.thick {
  border-top: 2px solid var(--color-primary-soft);
}

hr.accent {
  border-top: 2px solid var(--color-accent);
  width: 48px;
  margin-left: 0;
}


/* ════════════════════════════════════════════════════════════════════════════
   7. IMÁGENES, VIDEO E IFRAME
   ════════════════════════════════════════════════════════════════════════════ */

/* reset.css ya aplica display:block y max-width:100% a img y video */

img {
  height: auto;
  max-width: 100%;   /* evita que una imagen desborde su contenedor (scroll horizontal) */
}

img.rounded {
  border-radius: var(--radius-md);
}

img.card-img {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  width: 100%;
  object-fit: cover;
}

video {
  height: auto;
  border-radius: var(--radius-md);
}

/* Iframe responsive: el contenedor controla el ratio */
.iframe-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;   /* 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.iframe-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* iframe plano sin ratio (visor PDF) */
iframe.pdf-viewer {
  width: 100%;
  min-height: 600px;
  border: var(--border);
  border-radius: var(--radius-md);
}


/* ════════════════════════════════════════════════════════════════════════════
   8. CITAS Y CÓDIGO
   ════════════════════════════════════════════════════════════════════════════ */

blockquote {
  border-left: 3px solid var(--color-secondary);
  padding: var(--space-sm) var(--space-lg);
  margin: var(--space-xl) 0;
  background-color: var(--color-secondary-soft);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

blockquote p {
  font-family: var(--font-secondary);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  margin-bottom: 0;
  max-width: none;
}

blockquote cite {
  display: block;
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  font-style: normal;
  color: var(--color-text-muted);
}

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background-color: var(--color-bg-soft);
  color: var(--color-secondary);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
  border: var(--border-soft);
}

pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background-color: var(--color-bg-dark);
  color: #e2e8f0;
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  line-height: var(--lh-relaxed);
  margin: var(--space-xl) 0;
}

pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}


/* ════════════════════════════════════════════════════════════════════════════
   9. FORMULARIOS BASE
   ════════════════════════════════════════════════════════════════════════════ */

label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

input,
textarea,
select {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  line-height: var(--lh-base);
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-muted);
}

input:hover,
textarea:hover,
select:hover {
  border-color: var(--color-border-strong);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

textarea {
  resize: vertical;
  min-height: 120px;
}

fieldset {
  border: var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-md);
}

legend {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  padding: 0 var(--space-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}


/* ════════════════════════════════════════════════════════════════════════════
   10. BOTONES BASE
   ════════════════════════════════════════════════════════════════════════════ */

button,
[role="button"] {
  cursor: pointer;
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  border: none;
  background: none;
  transition: background-color var(--transition-fast),
              color var(--transition-fast),
              box-shadow var(--transition-fast);
}

button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}


/* ════════════════════════════════════════════════════════════════════════════
   11. TABLAS TÉCNICAS
   ════════════════════════════════════════════════════════════════════════════ */

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: var(--text-sm);
  background-color: var(--color-bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;   /* clip el border-radius en thead */
}

thead {
  background-color: var(--table-header-bg, #162C52);
}

th {
  padding: 0.75rem var(--space-lg);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  text-align: left;
  color: var(--table-header-text, #FFFFFF);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 2px solid rgba(255,255,255,0.12);
}

td {
  padding: 0.625rem var(--space-lg);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border-soft);
  vertical-align: top;
  line-height: var(--lh-snug);
  font-variant-numeric: tabular-nums;
}

tbody tr:last-child td {
  border-bottom: none;
}

/* Row headers (th scope="row") usan fondo claro → texto oscuro */
tbody th {
  color: var(--color-text-secondary);
  background-color: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-border-soft);
  white-space: nowrap;
}

/* Zebra striping — escaneo rápido en tablas densas */
tbody tr:nth-child(even) {
  background-color: var(--table-zebra-bg, rgba(27, 58, 107, 0.038));
}

tbody tr:hover {
  background-color: var(--color-primary-soft);
  transition: background-color var(--transition-fast);
}

tbody tr:hover td:first-child {
  border-left: 3px solid var(--color-accent);
  padding-left: calc(var(--space-lg) - 3px);
}

tfoot td {
  font-weight: var(--fw-medium);
  border-top: 2px solid var(--color-border);
  background-color: var(--color-bg-soft);
}

/* Tabla responsive: el wrapper controla el scroll horizontal */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.table-wrapper::-webkit-scrollbar { height: 5px; }
.table-wrapper::-webkit-scrollbar-track { background: var(--color-bg-soft); }
.table-wrapper::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: var(--radius-full); }
.table-wrapper::-webkit-scrollbar-thumb:hover { background: var(--color-primary-light); }

.table-wrapper table {
  border-radius: 0;   /* el wrapper ya tiene radius */
}


/* ════════════════════════════════════════════════════════════════════════════
   12. ACCESIBILIDAD
   ════════════════════════════════════════════════════════════════════════════ */

/* Focus visible global */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Elemento visualmente oculto pero accesible para lectores */
.visually-hidden,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Selección de texto — colores acordes al sistema */
::selection {
  background-color: var(--color-primary-soft);
  color: var(--color-primary-dark);
}

/* Reducir movimiento para usuarios con preferencia */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Skip-to-content — accesibilidad teclado */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-md);
  z-index: var(--z-toast);
  transition: top var(--transition-fast);
}

.skip-to-content:focus {
  top: var(--space-md);
}


/* ════════════════════════════════════════════════════════════════════════════
   13. CLASES BASE DE COMPLIANCE Y AVISOS TÉCNICOS
   Estas clases usan las variables --compliance-* de variables.css
   No son componentes finales — solo establece la base legible y consistente
   ════════════════════════════════════════════════════════════════════════════ */

.legal-note,
.technical-note,
.compliance-warning,
.claim-warning {
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  margin: var(--space-xl) 0;
  font-size: var(--text-sm);
  line-height: var(--lh-relaxed);
}

/* Aviso legal / disclaimer */
.legal-note {
  background-color: var(--compliance-legal-bg);
  border-left: 4px solid var(--compliance-legal-border);
  color: var(--compliance-legal-text);
}

.legal-note strong {
  color: var(--compliance-legal-text);
}

/* Nota técnica / científica */
.technical-note {
  background-color: var(--compliance-tech-bg);
  border-left: 4px solid var(--compliance-tech-border);
  color: var(--compliance-tech-text);
}

.technical-note strong {
  color: var(--compliance-tech-text);
}

/* Advertencia / precaución (no error, sino cuidado) */
.compliance-warning {
  background-color: var(--compliance-warn-bg);
  border-left: 4px solid var(--compliance-warn-border);
  color: var(--compliance-warn-text);
}

.compliance-warning strong {
  color: var(--compliance-warn-text);
}

/* Claim prohibido — alerta clara */
.claim-warning {
  background-color: var(--compliance-prohib-bg);
  border-left: 4px solid var(--compliance-prohib-border);
  color: var(--compliance-prohib-text);
}

.claim-warning strong {
  color: var(--compliance-prohib-text);
}

/* Badges de compliance — inline */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.2em 0.65em;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  border-radius: var(--radius-full);
  line-height: 1.4;
}

.badge-educativo   { background-color: var(--badge-educativo-bg);  color: var(--badge-educativo-text); }
.badge-fuente      { background-color: var(--badge-fuente-bg);     color: var(--badge-fuente-text); }
.badge-pendiente   { background-color: var(--badge-pendiente-bg);  color: var(--badge-pendiente-text); }
.badge-premium     { background-color: var(--badge-premium-bg);    color: var(--badge-premium-text); }
.badge-efsa        { background-color: var(--badge-efsa-bg);       color: var(--badge-efsa-text); }