/* ==========================================================================
   base.css — reset, tipografía, layout y controles.
   Mobile-first: lo que está sin media query es la versión de celular.
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: var(--txt-md);
  line-height: var(--alto-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-semi);
  line-height: var(--alto-apretado);
  letter-spacing: -0.015em;
  margin: 0 0 var(--e-3);
  color: var(--texto);
  text-wrap: balance;
}

h1 { font-size: var(--txt-3xl); }
h2 { font-size: var(--txt-2xl); }
h3 { font-size: var(--txt-xl); }
h4 { font-size: var(--txt-lg); }

p { margin: 0 0 var(--e-4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--acento-osc);
  text-decoration: none;
  transition: color var(--transicion);
}
a:hover { color: var(--acento-mas-osc); text-decoration: underline; }

ul, ol { margin: 0 0 var(--e-4); padding-left: var(--e-5); }

hr { border: 0; border-top: 1px solid var(--borde); margin: var(--e-6) 0; }

small { font-size: var(--txt-sm); }

/* Foco visible SIEMPRE: se navega con teclado. */
:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
  border-radius: var(--radio-sm);
}

/* --------------------------------------------------------------------------
   LAYOUT
   -------------------------------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--pad-lateral);
}

.seccion { padding-block: var(--e-7); }
.seccion--suave { background: var(--fondo-suave); }
.seccion--crudo { background: var(--fondo-crudo); }

.seccion-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  margin-bottom: var(--e-5);
}
.seccion-cabecera h2 { margin: 0; }

.grilla { display: grid; gap: var(--e-4); }
.grilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grilla--auto { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.apilado { display: flex; flex-direction: column; gap: var(--e-3); }
.fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }
.fila--fin { justify-content: flex-end; }
.fila--entre { justify-content: space-between; }

.texto-centro { text-align: center; }
.texto-suave { color: var(--texto-suave); }
.texto-chico { font-size: var(--txt-sm); }
.texto-mini { font-size: var(--txt-xs); }
.sin-margen { margin: 0; }
.oculto { display: none !important; }

/* Sólo para lectores de pantalla. */
.solo-lector {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.saltar-al-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--acento);
  color: var(--acento-contraste);
  padding: var(--e-3) var(--e-4);
  z-index: var(--z-modal);
  border-radius: 0 0 var(--radio) 0;
}
.saltar-al-contenido:focus { left: 0; }

/* --------------------------------------------------------------------------
   BOTONES
   Alto mínimo 44px: se usa desde el celular, con guantes de obra a veces.
   -------------------------------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 46px;
  padding: 0 var(--e-5);
  border: 1px solid transparent;
  border-radius: var(--radio);
  background: var(--fondo-suave);
  color: var(--texto);
  font-family: inherit;
  font-size: var(--txt-base);
  font-weight: var(--peso-semi);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion),
              border-color var(--transicion), transform var(--transicion),
              box-shadow var(--transicion);
}
.boton:hover { text-decoration: none; }
.boton:active { transform: translateY(1px); }
.boton[disabled], .boton.esta-cargando { opacity: 0.6; pointer-events: none; }

/* El ícono acompaña al texto: en em, así el botón chico lleva ícono chico y
   el grande lo lleva grande, sin escribir una medida por cada variante.
   flex:none para que no se estire cuando el botón es de ancho completo. */
.boton svg {
  width: 1.2em;
  height: 1.2em;
  flex: none;
}

.boton--primario {
  background: var(--acento);
  color: var(--acento-contraste);
  box-shadow: var(--sombra-sm);
}
.boton--primario:hover { background: var(--acento-osc); color: var(--acento-contraste); }

.boton--secundario {
  background: var(--blanco);
  color: var(--acento-osc);
  border-color: var(--borde-fuerte);
}
.boton--secundario:hover { border-color: var(--acento); background: var(--acento-claro); color: var(--acento-mas-osc); }

.boton--fantasma { background: transparent; color: var(--texto-medio); }
.boton--fantasma:hover { background: var(--fondo-suave); color: var(--texto); }

.boton--wa { background: var(--whatsapp); color: #0B2E17; }
.boton--wa:hover { background: var(--whatsapp-osc); color: var(--blanco); }

.boton--peligro { background: var(--error); color: var(--blanco); }
.boton--peligro:hover { background: #8E1E17; color: var(--blanco); }

.boton--bloque { width: 100%; }
.boton--chico { min-height: 38px; padding: 0 var(--e-3); font-size: var(--txt-sm); }
.boton--grande { min-height: 54px; padding: 0 var(--e-6); font-size: var(--txt-lg); }

/* --------------------------------------------------------------------------
   FORMULARIOS
   font-size 16px en móvil: menos y iOS hace zoom al enfocar.
   -------------------------------------------------------------------------- */
.campo { display: block; margin-bottom: var(--e-4); }

.campo > label,
.campo-etiqueta {
  display: block;
  margin-bottom: var(--e-1);
  font-size: var(--txt-sm);
  font-weight: var(--peso-semi);
  color: var(--texto-medio);
}

.campo-ayuda {
  display: block;
  margin-top: var(--e-1);
  font-size: var(--txt-xs);
  color: var(--texto-suave);
}

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], input[type="search"], input[type="date"], input[type="url"],
select, textarea {
  width: 100%;
  min-height: 46px;
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-sm);
  background: var(--blanco);
  color: var(--texto);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

textarea { min-height: 110px; resize: vertical; padding-top: var(--e-3); }

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

input[aria-invalid="true"], .campo--error input, .campo--error textarea, .campo--error select {
  border-color: var(--error);
}

select {
  appearance: none;
  padding-right: var(--e-6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236E6E6E' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--e-3) center;
  background-size: 12px;
}

.campo-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--e-2);
  margin-bottom: var(--e-3);
  font-size: var(--txt-base);
}
.campo-checkbox input { width: 20px; height: 20px; min-height: 0; margin-top: 2px; flex: none; accent-color: var(--acento); }
.campo-checkbox label { font-weight: var(--peso-normal); color: var(--texto); margin: 0; }

fieldset { border: 0; padding: 0; margin: 0 0 var(--e-5); }
legend { padding: 0; font-weight: var(--peso-semi); font-size: var(--txt-sm); color: var(--texto-medio); margin-bottom: var(--e-2); }

/* Trampa anti-spam: invisible para personas, visible para bots tontos. */
.trampa {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   AVISOS
   -------------------------------------------------------------------------- */
.aviso {
  display: flex;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--borde);
  border-left-width: 4px;
  border-radius: var(--radio-sm);
  background: var(--fondo-crudo);
  font-size: var(--txt-base);
  margin-bottom: var(--e-4);
}
.aviso p { margin: 0; }
.aviso--ok    { background: var(--ok-claro);    border-color: var(--ok);    color: #14532A; }
.aviso--error { background: var(--error-claro); border-color: var(--error); color: #7A1912; }
.aviso--alerta{ background: var(--alerta-claro);border-color: var(--alerta);color: #6B4304; }
.aviso--info  { background: var(--info-claro);  border-color: var(--info);  color: var(--marca-teal-mas-osc); }

.aviso ul { margin: var(--e-1) 0 0; padding-left: var(--e-4); }

/* --------------------------------------------------------------------------
   ETIQUETAS / BADGES
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: 3px var(--e-2);
  border-radius: var(--radio-full);
  background: var(--fondo-suave);
  color: var(--texto-medio);
  font-size: var(--txt-xs);
  font-weight: var(--peso-semi);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.badge--acento     { background: var(--acento-claro); color: var(--acento-mas-osc); }
.badge--secundario { background: var(--secundario-claro); color: var(--secundario); }
.badge--ok         { background: var(--ok-claro); color: #14532A; }
.badge--alerta     { background: var(--alerta-claro); color: #6B4304; }
.badge--error      { background: var(--error-claro); color: #7A1912; }

/* --------------------------------------------------------------------------
   ESTADOS DE CARGA Y VACÍOS
   -------------------------------------------------------------------------- */
.cargando {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: girar 700ms linear infinite;
  vertical-align: -3px;
}
@keyframes girar { to { transform: rotate(360deg); } }

.vacio {
  padding: var(--e-7) var(--e-4);
  text-align: center;
  color: var(--texto-suave);
  background: var(--fondo-crudo);
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio-md);
}
.vacio h3 { color: var(--texto-medio); margin-bottom: var(--e-2); }

/* --------------------------------------------------------------------------
   PÁGINA DE ERROR (autocontenida, ver util.php > pagina_error)
   -------------------------------------------------------------------------- */
/* min-height doble a propósito: en el celular 100vh mide la ventana sin la
   barra del navegador y deja blanco de sobra abajo. 100dvh mide la de verdad;
   la línea anterior queda de red para quien no la entienda. */
.pagina-error { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; background: var(--fondo-suave); }
.bloque-error { text-align: center; max-width: 32rem; padding: var(--e-6) var(--e-4); }
.error-codigo {
  font-family: var(--fuente-titulo);
  font-size: 5rem;
  line-height: 1;
  color: var(--acento);
  margin: 0 0 var(--e-2);
  opacity: 0.5;
}
.error-texto { color: var(--texto-suave); margin-bottom: var(--e-5); }

/* --------------------------------------------------------------------------
   TABLAS (ficha técnica, panel)
   -------------------------------------------------------------------------- */
.tabla-envoltorio { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--txt-base);
}
.tabla th, .tabla td {
  padding: var(--e-3);
  text-align: left;
  border-bottom: 1px solid var(--borde-suave);
  vertical-align: top;
}
.tabla th { font-weight: var(--peso-semi); color: var(--texto-medio); font-size: var(--txt-sm); }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla--rayada tbody tr:nth-child(odd) { background: var(--fondo-crudo); }
.tabla .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   PAGINADO
   -------------------------------------------------------------------------- */
.paginado { display: flex; flex-wrap: wrap; gap: var(--e-2); justify-content: center; margin-top: var(--e-6); }
.paginado a, .paginado span {
  min-width: 42px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--e-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  color: var(--texto-medio);
  font-size: var(--txt-sm);
  font-weight: var(--peso-medio);
}
.paginado a:hover { border-color: var(--acento); background: var(--acento-claro); text-decoration: none; }
.paginado .actual { background: var(--acento); border-color: var(--acento); color: var(--acento-contraste); }

/* --------------------------------------------------------------------------
   DESKTOP
   -------------------------------------------------------------------------- */
@media (min-width: 48rem) {
  .contenedor { padding-inline: var(--pad-lateral-md); }
  .seccion { padding-block: var(--e-8); }
  .grilla--auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--e-5); }
}

@media (min-width: 64rem) {
  .seccion--amplia { padding-block: var(--e-9); }
}

/* --------------------------------------------------------------------------
   IMPRESIÓN
   -------------------------------------------------------------------------- */
@media print {
  .sitio-header, .sitio-pie, .wa-flotante, .no-imprimir { display: none !important; }
  body { font-size: 11pt; color: #000; background: #fff; }
  a { color: #000; text-decoration: none; }
}