/* carbon-tokens.css — tokens de Carbon Design System v11 para la web pública.
   ───────────────────────────────────────────────────────────────────────────
   Origen: @carbon/styles@1.115.0 · css/styles.min.css (jsDelivr), los mismos
   valores que la app vendoriza en ~/Dev/SEOdeck. Aquí solo viajan los tokens
   (color por tema, tipografía, espaciado); los componentes de Carbon no se
   cargan: la web es superficie de marketing y sus piezas viven en site.css,
   construidas únicamente con estas variables. Regla: ningún hex fuera de este
   archivo.

   Temas. Igual que la app: g10 en toda la superficie (lienzo gris, tiles
   blancos), g100 en la barra superior y el pie, white como zona cuando una
   banda blanca necesita tiles grises. Se aplican por clase en el contenedor
   (.theme-white, .theme-g100); :root lleva g10.

   Marca. Los tokens que APEspider redefine sobre Carbon son los de
   static/apespider-theme.css de la app (sesión de colores 2026-09-22): lima
   solo en el botón primario, azul en enlaces, foco, selección y bordes
   interactivos. Hover y active del lima y del azul siguen provisionales allí
   y aquí (pasos 60 » 70 » 80 de Carbon). */

:root, .theme-g10 {
  /* ── Carbon g10 ─────────────────────────────────────────── */
  --cds-background: #f4f4f4;
  --cds-background-hover: hsla(0, 0%, 55.3%, .12);
  --cds-background-active: hsla(0, 0%, 55.3%, .5);
  --cds-background-selected: hsla(0, 0%, 55.3%, .2);
  --cds-background-inverse: #393939;
  --cds-background-inverse-hover: #474747;
  --cds-layer-01: #fff;
  --cds-layer-02: #f4f4f4;
  --cds-layer-accent-01: #e0e0e0;
  --cds-layer-hover-01: #e8e8e8;
  --cds-layer-selected-01: #e0e0e0;
  --cds-layer-selected-inverse: #161616;
  --cds-field-01: #fff;
  --cds-border-subtle-00: #c6c6c6;
  --cds-border-subtle-01: #e0e0e0;
  --cds-border-strong-01: #8d8d8d;
  --cds-border-tile-01: #a8a8a8;
  --cds-border-inverse: #161616;
  --cds-border-disabled: #c6c6c6;
  --cds-text-primary: #161616;
  --cds-text-secondary: #525252;
  --cds-text-helper: #6f6f6f;
  --cds-text-placeholder: rgba(22, 22, 22, .4);
  --cds-text-disabled: rgba(22, 22, 22, .25);
  --cds-text-on-color: #fff;
  --cds-text-inverse: #fff;
  --cds-text-error: #da1e28;
  --cds-icon-primary: #161616;
  --cds-icon-secondary: #525252;
  --cds-icon-on-color: #fff;
  --cds-icon-inverse: #fff;
  --cds-button-secondary: #393939;
  --cds-button-secondary-hover: #474747;
  --cds-support-error: #da1e28;
  --cds-support-success: #24a148;
  --cds-support-warning: #f1c21b;
  --cds-support-info: #0043ce;
  --cds-support-caution-major: #ff832b;
  --cds-notification-background-info: #edf5ff;
  --cds-notification-background-success: #defbe6;
  --cds-notification-background-warning: #fdf6dd;
  --cds-skeleton-background: #e8e8e8;
  --cds-skeleton-element: #c6c6c6;
  --cds-tag-background-blue: #d0e2ff;
  --cds-tag-color-blue: #0043ce;
  --cds-focus-inset: #fff;
  --cds-overlay: rgba(0, 0, 0, .6);

  /* ── Tema APEspider sobre Carbon (static/apespider-theme.css) ── */
  --cds-interactive: #202d85;
  --cds-button-primary: #bdf226;
  --cds-button-primary-hover: #9bcd0c;
  --cds-button-primary-active: #779e09;
  --cds-text-on-primary: #161616;          /* texto oscuro sobre el lima (13,7:1) */
  --cds-button-tertiary: #202d85;
  --cds-button-tertiary-hover: #141c52;
  --cds-button-tertiary-active: #0a0e2a;
  --cds-link-primary: #202d85;
  --cds-link-primary-hover: #141c52;
  --cds-border-interactive: #202d85;
  --cds-focus: #202d85;
  --cds-highlight: #e5e8f4;
  --cds-background-brand: #202d85;
  --cds-tag-background-green: #edffcc;
  --cds-tag-color-green: #497000;
  --cds-tag-background-red: #ffdacc;
  --cds-tag-color-red: #701e00;
  --cds-tag-background-gray: #e0e0e0;
  --cds-tag-color-gray: #525252;

  /* ── Tipografía: estilos de tipo de Carbon ───────────────── */
  --cds-font-sans: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", sans-serif;
  --cds-font-mono: "IBM Plex Mono", system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", monospace;
  --cds-heading-01-font-size: 0.875rem; --cds-heading-01-font-weight: 600; --cds-heading-01-line-height: 1.42857; --cds-heading-01-letter-spacing: 0.16px;
  --cds-heading-02-font-size: 1rem;     --cds-heading-02-font-weight: 600; --cds-heading-02-line-height: 1.5;     --cds-heading-02-letter-spacing: 0;
  --cds-heading-03-font-size: 1.25rem;  --cds-heading-03-font-weight: 400; --cds-heading-03-line-height: 1.4;     --cds-heading-03-letter-spacing: 0;
  --cds-heading-04-font-size: 1.75rem;  --cds-heading-04-font-weight: 400; --cds-heading-04-line-height: 1.28572; --cds-heading-04-letter-spacing: 0;
  --cds-heading-05-font-size: 2rem;     --cds-heading-05-font-weight: 400; --cds-heading-05-line-height: 1.25;    --cds-heading-05-letter-spacing: 0;
  --cds-heading-06-font-size: 2.625rem; --cds-heading-06-font-weight: 300; --cds-heading-06-line-height: 1.199;   --cds-heading-06-letter-spacing: 0;
  --cds-heading-07-font-size: 3.375rem; --cds-heading-07-font-weight: 300; --cds-heading-07-line-height: 1.19;    --cds-heading-07-letter-spacing: 0;
  --cds-body-01-font-size: 0.875rem; --cds-body-01-font-weight: 400; --cds-body-01-line-height: 1.42857; --cds-body-01-letter-spacing: 0.16px;
  --cds-body-02-font-size: 1rem;     --cds-body-02-font-weight: 400; --cds-body-02-line-height: 1.5;     --cds-body-02-letter-spacing: 0;
  --cds-body-compact-01-font-size: 0.875rem; --cds-body-compact-01-font-weight: 400; --cds-body-compact-01-line-height: 1.28572; --cds-body-compact-01-letter-spacing: 0.16px;
  --cds-body-compact-02-font-size: 1rem;     --cds-body-compact-02-font-weight: 400; --cds-body-compact-02-line-height: 1.375;   --cds-body-compact-02-letter-spacing: 0;
  --cds-expressive-paragraph-01-font-size: 1.5rem; --cds-expressive-paragraph-01-font-weight: 300; --cds-expressive-paragraph-01-line-height: 1.334; --cds-expressive-paragraph-01-letter-spacing: 0;
  --cds-label-01-font-size: 0.75rem;  --cds-label-01-font-weight: 400; --cds-label-01-line-height: 1.33333; --cds-label-01-letter-spacing: 0.32px;
  --cds-label-02-font-size: 0.875rem; --cds-label-02-font-weight: 400; --cds-label-02-line-height: 1.28572; --cds-label-02-letter-spacing: 0.16px;
  --cds-helper-text-01-font-size: 0.75rem; --cds-helper-text-01-line-height: 1.33333; --cds-helper-text-01-letter-spacing: 0.32px;
  --cds-code-01-font-size: 0.75rem;  --cds-code-01-font-weight: 400; --cds-code-01-line-height: 1.33333; --cds-code-01-letter-spacing: 0.32px;
  --cds-code-02-font-size: 0.875rem; --cds-code-02-font-weight: 400; --cds-code-02-line-height: 1.42857; --cds-code-02-letter-spacing: 0.32px;
  --cds-legal-01-font-size: 0.75rem; --cds-legal-01-font-weight: 400; --cds-legal-01-line-height: 1.33333; --cds-legal-01-letter-spacing: 0.32px;

  /* ── Espaciado: escala de Carbon ─────────────────────────── */
  --cds-spacing-01: 0.125rem;
  --cds-spacing-02: 0.25rem;
  --cds-spacing-03: 0.5rem;
  --cds-spacing-04: 0.75rem;
  --cds-spacing-05: 1rem;
  --cds-spacing-06: 1.5rem;
  --cds-spacing-07: 2rem;
  --cds-spacing-08: 2.5rem;
  --cds-spacing-09: 3rem;
  --cds-spacing-10: 4rem;
  --cds-spacing-11: 5rem;
  --cds-spacing-12: 6rem;
  --cds-spacing-13: 10rem;

  /* ── Retícula 2x de Carbon ───────────────────────────────── */
  --cds-grid-gutter: 2rem;
  --cds-grid-margin: 1rem;
  --cds-grid-columns: 4;
  --cds-grid-max: 99rem;

  /* ── Movimiento (Carbon motion, productive) ──────────────── */
  --cds-duration-fast-01: 70ms;
  --cds-duration-fast-02: 110ms;
  --cds-easing-standard: cubic-bezier(.2, 0, .38, .9);
}

/* Zona white: tiles grises sobre blanco (bandas blancas con tarjetas) */
.theme-white {
  --cds-background: #fff;
  --cds-layer-01: #f4f4f4;
  --cds-layer-02: #fff;
  --cds-layer-hover-01: #e8e8e8;
  --cds-field-01: #f4f4f4;
  --cds-border-subtle-00: #e0e0e0;
  --cds-border-subtle-01: #c6c6c6;
  --cds-border-tile-01: #c6c6c6;
  --cds-focus-inset: #fff;
}

/* Zona g100: barra superior y pie, Carbon tal cual (como la cabecera de la app) */
.theme-g100 {
  --cds-background: #161616;
  --cds-background-hover: hsla(0, 0%, 55.3%, .16);
  --cds-background-active: hsla(0, 0%, 55.3%, .4);
  --cds-background-inverse: #f4f4f4;
  --cds-layer-01: #262626;
  --cds-layer-02: #393939;
  --cds-layer-accent-01: #393939;
  --cds-layer-hover-01: #333;
  --cds-layer-selected-01: #393939;
  --cds-layer-selected-inverse: #f4f4f4;
  --cds-field-01: #262626;
  --cds-border-subtle-00: #393939;
  --cds-border-subtle-01: #525252;
  --cds-border-strong-01: #6f6f6f;
  --cds-border-inverse: #f4f4f4;
  --cds-border-interactive: #4589ff;
  --cds-text-primary: #f4f4f4;
  --cds-text-secondary: #c6c6c6;
  --cds-text-helper: #a8a8a8;
  --cds-text-placeholder: hsla(0, 0%, 95.7%, .4);
  --cds-text-inverse: #161616;
  --cds-icon-primary: #f4f4f4;
  --cds-icon-secondary: #c6c6c6;
  --cds-icon-inverse: #161616;
  --cds-link-primary: #78a9ff;
  --cds-link-primary-hover: #a6c8ff;
  --cds-interactive: #4589ff;
  --cds-focus: #fff;
  --cds-focus-inset: #161616;
  --cds-highlight: #001d6c;
  --cds-button-tertiary: #fff;
  --cds-button-tertiary-hover: #f4f4f4;
  --cds-button-tertiary-active: #c6c6c6;
  --cds-support-error: #fa4d56;
  --cds-support-success: #42be65;
  --cds-support-info: #4589ff;
  --cds-skeleton-background: #292929;
  --cds-skeleton-element: #393939;
  --cds-tag-background-gray: #525252;
  --cds-tag-color-gray: #f4f4f4;
  /* Decisión de la web: el CTA de la barra conserva el lima del primario
     (en Carbon g100 el primario sería azul 60). Pendiente de ratificar. */
  --cds-button-primary: #bdf226;
  --cds-button-primary-hover: #9bcd0c;
  --cds-button-primary-active: #779e09;
  --cds-text-on-primary: #161616;
}

/* Breakpoints de la retícula 2x: sm 320 · md 672 · lg 1056 · xlg 1312 · max 1584 */
@media (min-width: 42rem) { :root { --cds-grid-columns: 8; --cds-grid-margin: 1rem; } }
@media (min-width: 66rem) { :root { --cds-grid-columns: 16; --cds-grid-margin: 1rem; } }
@media (min-width: 99rem) { :root { --cds-grid-margin: 1.5rem; } }

/* ══ Diseño 2.0.0 (2026-10-05): tokens propios de la web sobre los de Carbon ══
   Degradados siempre de un color hacia blanco o hacia un tono de su misma
   familia; nunca lima con azul. Radios y sombras solo a través de estas
   variables. Muestra: /sistema/. Documento: .claude/sistema-visual.md */
:root {
  --ape-blue: #202d85;
  --ape-blue-mid: #5365ac;
  --ape-blue-light: #3a4aa6;
  --ape-blue-text-on: #d6daf0;
  --ape-tint-blue: #e5e8f4;
  --ape-tint-blue-soft: #f2f4fa;
  --ape-tint-blue-faint: #f7f8fc;
  --ape-line: #e8eaf3;
  --ape-line-blue: #d6dbee;
  --ape-tint-lime: #f3fbd9;
  --ape-lime-light: #d4f766;
  --ape-lime-glow: rgba(189, 242, 38, 0.40);
  --ape-ink-soft: #3d3d3d;
  --ape-radius: 14px;
  --ape-radius-sm: 10px;
  --ape-radius-btn: 6px;
  --ape-shadow-card: 0 18px 44px rgba(32, 45, 133, 0.08);
  --ape-shadow-card-lg: 0 24px 60px rgba(32, 45, 133, 0.12);
  --ape-shadow-price: 0 30px 70px rgba(22, 22, 22, 0.12);
  --ape-shadow-device: drop-shadow(0 30px 50px rgba(32, 45, 133, 0.22));
  --ape-grad-text: linear-gradient(90deg, #202d85 0%, #5365ac 100%);
  --ape-grad-card: linear-gradient(180deg, #ffffff 0%, #f2f4fa 100%);
  --ape-grad-card-gray: linear-gradient(180deg, #ffffff 0%, #f4f4f4 100%);
  --ape-grad-band: linear-gradient(180deg, #ffffff 0%, #f7f8fc 100%);
  --ape-grad-band-up: linear-gradient(180deg, #f7f8fc 0%, #ffffff 100%);
  --ape-grad-icon: linear-gradient(180deg, #ffffff 0%, #e5e8f4 100%);
  --ape-grad-primary: linear-gradient(180deg, #d4f766 0%, #bdf226 100%);
  --ape-grad-blue: linear-gradient(135deg, #202d85 0%, #3a4aa6 100%);
  --ape-grad-footer: linear-gradient(180deg, #1c1c1c 0%, #161616 100%);
  --ape-glow-blue-tr: radial-gradient(70% 70% at 85% 10%, #e5e8f4 0%, #ffffff 65%);
  --ape-glow-blue-bottom: radial-gradient(50% 80% at 50% 100%, #e5e8f4 0%, #ffffff 70%);
  --ape-glow-lime-left: radial-gradient(60% 80% at 15% 50%, #f3fbd9 0%, #ffffff 70%);
  --ape-glow-lime-right: radial-gradient(60% 70% at 85% 60%, #f3fbd9 0%, #ffffff 65%);
  --ape-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23202d85' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
}
/* La barra superior y el panel del menú pasan a blanco en 2.0.0: se anulan
   aquí los tokens de zona que el HTML sigue declarando (theme-g100). */
.hdr.theme-g100 {
  --cds-background: #ffffff;
  --cds-text-primary: #161616;
  --cds-text-secondary: #525252;
  --cds-icon-primary: #161616;
  --cds-border-subtle-00: #e8eaf3;
  --cds-border-subtle-01: #c6c6c6;
  --cds-border-inverse: #c6c6c6;
  --cds-layer-hover-01: #f2f4fa;
  --cds-layer-selected-inverse: #161616;
  --cds-text-inverse: #ffffff;
  --cds-focus: #202d85;
  --cds-link-primary: #202d85;
  --cds-border-interactive: #202d85;
}