/* ==========================================================================
   Albunea — base y componentes mínimos. Requiere tokens.css antes.
   Clases con prefijo alb- para no chocar con estilos de las tiendas.
   ========================================================================== */

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

/* `hidden` siempre oculta, aunque la clase del elemento ponga display (p. ej. .pn-rango o el pie del sitio). */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--alb-fondo);
  color: var(--alb-texto);
  font-family: var(--alb-fuente-texto);
  font-size: var(--alb-tam-m);
  line-height: var(--alb-interlineado);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--alb-espacio-3);
  font-family: var(--alb-fuente-titulo);
  font-weight: var(--alb-peso-fuerte);
  line-height: var(--alb-interlineado-titulo);
  letter-spacing: -0.01em;
  color: var(--alb-texto);
}
h1 { font-size: var(--alb-tam-3xl); }
h2 { font-size: var(--alb-tam-2xl); }
h3 { font-size: var(--alb-tam-xl); }
h4 { font-size: var(--alb-tam-l); font-family: var(--alb-fuente-texto); }
p { margin: 0 0 var(--alb-espacio-4); }
small { font-size: var(--alb-tam-s); }

a { color: var(--alb-primario); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--alb-primario-hover); text-decoration-thickness: 2px; }

code, kbd, pre { font-family: var(--alb-fuente-mono); font-size: 0.92em; }
pre {
  margin: 0 0 var(--alb-espacio-4);
  padding: var(--alb-espacio-4);
  overflow: auto;
  background: var(--alb-superficie-2);
  border: 1px solid var(--alb-borde);
  border-radius: var(--alb-radio-m);
}

img, svg { max-width: 100%; height: auto; }
hr { border: 0; border-top: 1px solid var(--alb-borde); margin: var(--alb-espacio-6) 0; }

:focus-visible { outline: 2px solid var(--alb-foco); outline-offset: 2px; }

::selection { background: var(--alb-primario-suave); color: var(--alb-texto); }

.alb-visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.alb-contenedor { width: min(100% - 2 * var(--alb-espacio-5), var(--alb-ancho-max)); margin-inline: auto; }
.alb-texto-2 { color: var(--alb-texto-2); }
.alb-texto-tenue { color: var(--alb-texto-tenue); }
.alb-cifras { font-variant-numeric: tabular-nums; }

/* --- Botón ------------------------------------------------------------- */
.alb-boton {
  --_fondo: var(--alb-primario);
  --_texto: var(--alb-sobre-primario);
  --_borde: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--alb-espacio-2);
  min-height: 40px;
  padding: var(--alb-espacio-2) var(--alb-espacio-4);
  font: inherit; font-size: var(--alb-tam-s); font-weight: var(--alb-peso-medio); line-height: 1.2;
  color: var(--_texto);
  background: var(--_fondo);
  border: 1px solid var(--_borde);
  border-radius: var(--alb-radio-m);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--alb-transicion), box-shadow var(--alb-transicion), transform var(--alb-transicion);
}
.alb-boton:hover { --_fondo: var(--alb-primario-hover); color: var(--_texto); text-decoration: none; }
.alb-boton:active { transform: translateY(1px); }
.alb-boton:disabled, .alb-boton[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.alb-boton > svg { width: 1.1em; height: 1.1em; flex: none; }

.alb-boton--acento { --_fondo: var(--alb-acento); --_texto: var(--alb-sobre-acento); }
.alb-boton--acento:hover { --_fondo: var(--alb-acento); box-shadow: var(--alb-sombra-halo); }
.alb-boton--secundario { --_fondo: var(--alb-superficie); --_texto: var(--alb-texto); --_borde: var(--alb-borde-fuerte); }
.alb-boton--secundario:hover { --_fondo: var(--alb-superficie-2); }
.alb-boton--fantasma { --_fondo: transparent; --_texto: var(--alb-primario); }
.alb-boton--fantasma:hover { --_fondo: var(--alb-primario-suave); }
.alb-boton--peligro { --_fondo: var(--alb-peligro); --_texto: var(--alb-superficie); }
.alb-boton--peligro:hover { --_fondo: var(--alb-peligro); filter: brightness(0.92); }
.alb-boton--chico { min-height: 32px; padding: var(--alb-espacio-1) var(--alb-espacio-3); font-size: var(--alb-tam-xs); }
.alb-boton--grande { min-height: 48px; padding: var(--alb-espacio-3) var(--alb-espacio-5); font-size: var(--alb-tam-m); }

/* --- Tarjeta ---------------------------------------------------------- */
.alb-tarjeta {
  background: var(--alb-superficie);
  border: 1px solid var(--alb-borde);
  border-radius: var(--alb-radio-l);
  box-shadow: var(--alb-sombra-1);
  padding: var(--alb-espacio-5);
}
.alb-tarjeta--elevada { box-shadow: var(--alb-sombra-2); }
.alb-tarjeta--destacada { border-color: var(--alb-acento); box-shadow: var(--alb-sombra-halo); }
.alb-tarjeta__titulo {
  margin: 0 0 var(--alb-espacio-2);
  font-family: var(--alb-fuente-texto);
  font-size: var(--alb-tam-s); font-weight: var(--alb-peso-medio);
  color: var(--alb-texto-2);
}
.alb-tarjeta__cifra {
  font-family: var(--alb-fuente-titulo);
  font-size: var(--alb-tam-3xl); line-height: 1.1;
  color: var(--alb-texto);
}

/* --- Insignia ----------------------------------------------------------- */
.alb-insignia {
  --_fondo: var(--alb-superficie-2);
  --_texto: var(--alb-texto-2);
  display: inline-flex; align-items: center; gap: var(--alb-espacio-1);
  padding: 2px var(--alb-espacio-2);
  font-size: var(--alb-tam-xs); font-weight: var(--alb-peso-medio); line-height: 1.5;
  color: var(--_texto); background: var(--_fondo);
  border-radius: var(--alb-radio-pleno);
  white-space: nowrap;
}
.alb-insignia > svg { width: 12px; height: 12px; flex: none; }
.alb-insignia--primario { --_fondo: var(--alb-primario-suave); --_texto: var(--alb-primario); }
.alb-insignia--acento { --_fondo: var(--alb-acento); --_texto: var(--alb-sobre-acento); }
.alb-insignia--exito { --_fondo: var(--alb-exito-fondo); --_texto: var(--alb-exito); }
.alb-insignia--alerta { --_fondo: var(--alb-alerta-fondo); --_texto: var(--alb-alerta); }
.alb-insignia--peligro { --_fondo: var(--alb-peligro-fondo); --_texto: var(--alb-peligro); }
.alb-insignia--info { --_fondo: var(--alb-info-fondo); --_texto: var(--alb-info); }

/* --- Campo ------------------------------------------------------------- */
.alb-campo { display: grid; gap: var(--alb-espacio-1); margin-bottom: var(--alb-espacio-4); }
.alb-campo > label, .alb-campo__etiqueta { font-size: var(--alb-tam-s); font-weight: var(--alb-peso-medio); color: var(--alb-texto); }
.alb-campo input, .alb-campo select, .alb-campo textarea, .alb-entrada {
  width: 100%;
  min-height: 40px;
  padding: var(--alb-espacio-2) var(--alb-espacio-3);
  font: inherit; font-size: var(--alb-tam-m);
  color: var(--alb-texto);
  background: var(--alb-superficie);
  border: 1px solid var(--alb-borde-fuerte);
  border-radius: var(--alb-radio-m);
  transition: border-color var(--alb-transicion), box-shadow var(--alb-transicion);
}
.alb-campo textarea { min-height: 96px; resize: vertical; }
.alb-campo input::placeholder, .alb-campo textarea::placeholder { color: var(--alb-texto-tenue); }
.alb-campo input:focus-visible, .alb-campo select:focus-visible, .alb-campo textarea:focus-visible, .alb-entrada:focus-visible {
  outline: none; border-color: var(--alb-foco); box-shadow: 0 0 0 3px var(--alb-primario-suave);
}
.alb-campo__ayuda { font-size: var(--alb-tam-xs); color: var(--alb-texto-tenue); }
.alb-campo__error { font-size: var(--alb-tam-xs); color: var(--alb-peligro); font-weight: var(--alb-peso-medio); }
.alb-campo [aria-invalid="true"] { border-color: var(--alb-peligro); }

/* --- Aviso (banda de estado dentro de la página) ------------------------- */
.alb-aviso {
  --_fondo: var(--alb-info-fondo);
  --_texto: var(--alb-info);
  display: flex; gap: var(--alb-espacio-3); align-items: flex-start;
  padding: var(--alb-espacio-3) var(--alb-espacio-4);
  color: var(--alb-texto); background: var(--_fondo);
  border-left: 3px solid var(--_texto);
  border-radius: var(--alb-radio-m);
}
.alb-aviso__titulo { margin: 0; font-weight: var(--alb-peso-fuerte); color: var(--_texto); }
.alb-aviso--exito { --_fondo: var(--alb-exito-fondo); --_texto: var(--alb-exito); }
.alb-aviso--alerta { --_fondo: var(--alb-alerta-fondo); --_texto: var(--alb-alerta); }
.alb-aviso--peligro { --_fondo: var(--alb-peligro-fondo); --_texto: var(--alb-peligro); }

/* --- Estado vacío -------------------------------------------------------- */
.alb-vacio {
  display: grid; justify-items: center; gap: var(--alb-espacio-3);
  padding: var(--alb-espacio-7) var(--alb-espacio-5);
  text-align: center; color: var(--alb-texto-2);
  border: 1px dashed var(--alb-borde-fuerte);
  border-radius: var(--alb-radio-l);
}
.alb-vacio > img, .alb-vacio > svg { width: 96px; opacity: 0.9; }
.alb-vacio__titulo { margin: 0; font-family: var(--alb-fuente-titulo); font-size: var(--alb-tam-xl); color: var(--alb-texto); }

/* --- Tabla --------------------------------------------------------------- */
.alb-tabla { width: 100%; border-collapse: collapse; font-size: var(--alb-tam-s); }
.alb-tabla th, .alb-tabla td { padding: var(--alb-espacio-3); text-align: left; border-bottom: 1px solid var(--alb-borde); }
.alb-tabla th { font-weight: var(--alb-peso-medio); color: var(--alb-texto-2); background: var(--alb-superficie-2); }
.alb-tabla td.alb-cifras, .alb-tabla th.alb-cifras { text-align: right; }
.alb-tabla tbody tr:hover { background: var(--alb-superficie-2); }

/* --- Puntaje de intención (0–100) ------------------------------------------ */
.alb-puntaje {
  display: inline-flex; align-items: center; gap: var(--alb-espacio-2);
  font-variant-numeric: tabular-nums; font-weight: var(--alb-peso-fuerte); font-size: var(--alb-tam-s);
}
.alb-puntaje__barra {
  width: 64px; height: 6px; border-radius: var(--alb-radio-pleno);
  background: var(--alb-superficie-2); overflow: hidden;
}
.alb-puntaje__barra > span { display: block; height: 100%; border-radius: inherit; background: var(--alb-primario); }
.alb-puntaje--alto .alb-puntaje__barra > span { background: var(--alb-acento); }

/* --- Mostrar algo solo en un tema (p. ej. logo normal vs. negativo) ------- */
.alb-solo-oscuro { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .alb-solo-claro { display: none !important; }
  :root:not([data-tema="claro"]) .alb-solo-oscuro { display: revert !important; }
}
:root[data-tema="oscuro"] .alb-solo-claro { display: none !important; }
:root[data-tema="oscuro"] .alb-solo-oscuro { display: revert !important; }