/* ============================================================
   FABRICA · base.css — ESTRUCTURA TECNICA REUTILIZABLE
   ------------------------------------------------------------
   Esto NO define como se ve una web. Define el andamio:
   reset, tokens y primitivas de layout.

   Todo lo visual sale de variables (tokens) que el proyecto
   redefine en su propio estilo.css. Cambiar tipografia, color,
   escala, ritmo o composicion NO exige tocar este archivo.

   Regla: si algo es una decision de diseno, va en el proyecto.
   Si es infraestructura, va aca.
   ============================================================ */

:root {
  /* --- Color: el proyecto los pisa enteros --- */
  --fx-fondo: #ffffff;
  --fx-superficie: #f5f6f8;
  --fx-texto: #16191d;
  --fx-texto-suave: #5a6270;
  --fx-primario: #1f6feb;
  --fx-primario-texto: #ffffff;
  --fx-acento: #ff7a45;
  --fx-borde: #e3e6ea;
  --fx-error: #c0392b;
  --fx-ok: #1e7f4f;

  /* --- Tipografia --- */
  --fx-fuente: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fx-fuente-titulos: var(--fx-fuente);
  --fx-peso-titulo: 700;
  --fx-cuerpo: 1.0625rem;      /* 17px: legible en movil */
  --fx-alto-linea: 1.65;
  --fx-escala: 1.25;           /* razon de la escala tipografica */

  /* --- Ritmo y espacio (escala modular) --- */
  --fx-e1: .25rem;
  --fx-e2: .5rem;
  --fx-e3: 1rem;
  --fx-e4: 1.5rem;
  --fx-e5: 2.5rem;
  --fx-e6: 4rem;
  --fx-e7: 6rem;
  --fx-seccion: clamp(var(--fx-e5), 8vw, var(--fx-e7));

  /* --- Forma --- */
  --fx-radio: 12px;
  --fx-radio-chico: 8px;
  --fx-sombra: 0 1px 2px rgba(16, 20, 26, .06), 0 8px 24px rgba(16, 20, 26, .08);
  --fx-borde-ancho: 1px;

  /* --- Medidas --- */
  --fx-ancho: 1140px;          /* contenedor principal */
  --fx-ancho-texto: 68ch;      /* medida de lectura comoda */
  --fx-gutter: 20px;           /* respiracion lateral en movil */
  --fx-alto-header: 64px;
  --fx-transicion: .2s ease;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fx-fondo);
  color: var(--fx-texto);
  font-family: var(--fx-fuente);
  font-size: var(--fx-cuerpo);
  line-height: var(--fx-alto-linea);
  overflow-x: hidden;          /* red de seguridad, no excusa para desbordar */
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
img { background: var(--fx-superficie); }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4 { overflow-wrap: break-word; }

h1, h2, h3, h4 {
  font-family: var(--fx-fuente-titulos);
  font-weight: var(--fx-peso-titulo);
  line-height: 1.15;
  margin: 0 0 var(--fx-e3);
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 5vw + .5rem, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3vw + .5rem, 2.25rem); }
h3 { font-size: clamp(1.15rem, 1.5vw + .5rem, 1.5rem); }
p  { margin: 0 0 var(--fx-e3); max-width: var(--fx-ancho-texto); }

a { color: var(--fx-primario); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Foco visible SIEMPRE: si un proyecto lo quita, el auditor lo marca */
:focus-visible {
  outline: 3px solid var(--fx-acento);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Primitivas de layout ------------------------------------ */

.fx-contenedor {
  width: min(100% - var(--fx-gutter) * 2, var(--fx-ancho));
  margin-inline: auto;
}

.fx-seccion { padding-block: var(--fx-seccion); }

.fx-stack > * + * { margin-top: var(--fx-e3); }
.fx-stack-g > * + * { margin-top: var(--fx-e5); }

/* Grilla que nunca desborda: el minimo cede antes que el viewport */
.fx-grilla {
  display: grid;
  gap: var(--fx-e4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--fx-col, 280px)), 1fr));
}

.fx-fila { display: flex; flex-wrap: wrap; gap: var(--fx-e3); align-items: center; }
.fx-entre { justify-content: space-between; }
.fx-centro { text-align: center; }
.fx-centro p { margin-inline: auto; }

/* Solo para lectores de pantalla */
.fx-oculto-visual {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Salto al contenido: primer foco de la pagina */
.fx-saltar {
  position: absolute; left: var(--fx-e2); top: -100px; z-index: 200;
  background: var(--fx-primario); color: var(--fx-primario-texto);
  padding: var(--fx-e2) var(--fx-e3); border-radius: var(--fx-radio-chico);
  transition: top var(--fx-transicion);
}
.fx-saltar:focus { top: var(--fx-e2); }

/* Tabla que no rompe la pagina en movil */
.fx-tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}