/* ============================================================
  TLV2 — components-map.css
  ------------------------------------------------------------
  Propósito:
  - MAPEAR roles/tokens → variables de componentes (NO pinta).
  - La “pintura” (propiedades reales) vive en assets/css/base.css
    (component painter) y en assets/css/landing.css (layout/página).
  - assets/css/presets.css solo define variables (inputs) que el painter consume.

  Regla:
  - En este archivo NO se usan propiedades como background-color, border,
    box-shadow, etc. Solo se declaran variables CSS.
============================================================ */

/* ------------------------------------------------------------
  1) CTA (map roles → vars de componente)
------------------------------------------------------------ */

:root{
  /* Defaults del componente CTA (ajustables por presets/landing) */
  --cta-min-h: 52px;
  --cta-pad-x: 20px;
  --cta-border-width: 1px;

  /* Overlays del CTA (desktop/móvil)
     - Por defecto, se mapean desde roles.
     - Presets pueden sobrescribir --cta-overlay-desktop / --cta-overlay-mobile. */
  --cta-overlay-desktop: var(--role-cta-overlay-desktop, none);
  --cta-overlay-mobile: var(--role-cta-overlay-mobile, none);
}

/* Selectores: CTA principal + aliases del sistema */
.cta,
.cta-desktop,
.cta-mobile,
.tlv2-cta,
.boton-comprar{
  /* Colores y efectos (variables) */
  --cta-bg: var(--role-cta-surface, var(--role-primary, #111));
  --cta-fg: var(--role-cta-foreground, #fff);
  --cta-border: var(--role-cta-border, transparent);
  --cta-shadow: var(--role-cta-shadow, none);
}

/* ------------------------------------------------------------
  2) Variantes de CTA (solo variables)
------------------------------------------------------------ */

/* Secundario */
.cta--secondary{
  --cta-bg: var(--role-surface, #fff);
  --cta-fg: var(--role-primary, #111);
  --cta-border: var(--role-border, rgba(0,0,0,.12));
}

/* Ghost / transparente */
.cta--ghost{
  --cta-bg: transparent;
  --cta-fg: var(--role-primary, #111);
  --cta-border: transparent;
  --cta-shadow: none;
}

/* CTA sobre fondo oscuro */
.cta--on-dark{
  --cta-bg: rgba(255,255,255,.12);
  --cta-fg: #fff;
  --cta-border: rgba(255,255,255,.18);
}

/* (Sin sección legacy: los aliases ya están incluidos en el selector base.) */