/* ══════════════════════════════════════════════════════════════════════════
   Tema HELLERMANNTYTON — azul HellermannTyton como color de acción y rojo de marca SOLO en líneas decorativas.
   Se carga por dominio (appsettings "TemasPorHost" → _TemaCss) DESPUÉS de las hojas base. Isaac 10-nov-2026
   (canvas "Venvers · Tyson Foods y OXXO", fila "HellermannTyton · Login y dashboard"). Misma plantilla que Tyson/OXXO:
   este archivo solo trae tokens y las reglas puntuales del login, la barra superior y el menú lateral.

   Paleta:
     primary #005AAA · primary-hover #00427D · primary-soft #E6F0FA · primary-soft-border #C6DAEF
     accent #ED1C24 (solo franjas y líneas) · sidebar #0A2F5C / activo #164A85 / texto #D3E0EF
     bg #F4F7FB · text #0E2238 · text-2 #33465C · text-muted #55667A · border #E2E9F1 · input-border #CFDAE6
     input-bg #FAFCFE · divider #EEF2F7 · table-head #F7F9FC · chip #E8EEF5 · chart-muted #A9C7E6
   Contraste (AA ≥ 4.5:1): primary/blanco 6.9 · hover/soft 8.8 · text/bg 15.0 · text-2/bg 9.0 · muted/bg 5.5 · muted/blanco 5.9 · sidebar-text/sidebar 10.0 · blanco/sidebar-activo 8.9
   Los colores de estado (error, advertencia, por vencer, éxito) son los semánticos de la base y no se tocan.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* — tokens base del design system — */
  --clr-primary:        #005aaa;
  --clr-primary-dark:   #00427d;
  --clr-primary-light:  #e6f0fa;
  --clr-bg:             #f4f7fb;
  --clr-card:           #ffffff;
  --clr-muted:          #eef2f7;
  --clr-accent:         #e8eef5;
  --clr-border:         #e2e9f1;
  --clr-input-border:   #cfdae6;
  --clr-text:           #0e2238;
  --clr-text-muted:     #55667a;
  --clr-sidebar:        #0a2f5c;
  --clr-sidebar-active: #164a85;
  --clr-sidebar-border: #164a85;
  --clr-table-head:     #33465c;
  --clr-status-closed:  #005aaa;

  /* — escala índigo → HellermannTyton (#005AAA como 500) — */
  --marca-50: #e6f0fa;
  --marca-100: #d1e1f0;
  --marca-200: #a3c4e0;
  --marca-300: #73a4d0;
  --marca-400: #387ebd;
  --marca-500: #005aaa;
  --marca-600: #004f96;
  --marca-700: #00427d;
  --marca-800: #003666;
  --marca-900: #00284c;
  --marca-950: #001b33;
  --marca-profundo:   #0a2f5c;
  --marca-profundo-2: #082345;
  --marca-tinte: #f7f9fc;

  /* — escala violeta → neutros del tema — */
  --acento-50: #f7f9fc;
  --acento-100: #eef2f7;
  --acento-200: #e2e9f1;
  --acento-300: #cfdae6;
  --acento-400: #9eacbb;
  --acento-500: #748395;
  --acento-600: #4c5e72;
  --acento-700: #55667a;
  --acento-800: #33465c;
  --acento-900: #0e2238;

  /* tripletas RGB de los rgba(..., alfa) */
  --marca-500-rgb: 0, 90, 170;
  --marca-600-rgb: 0, 79, 150;
  --marca-profundo-rgb: 10, 47, 92;

  /* — tokens propios del tema (también los usa el Inicio) — */
  --tema-primary-soft:        #e6f0fa;
  --tema-primary-soft-border: #c6daef;
  --tema-accent:              #ed1c24;
  --tema-text-2:              #33465c;
  --tema-divider:             #eef2f7;
  --tema-table-head-bg:       #f7f9fc;
  --tema-chip-bg:             #e8eef5;
  --tema-chart-muted:         #a9c7e6;
  --tema-input-bg:            #fafcfe;

  /* — Tipos de CFDI: única excepción a la paleta fija. El azul de Traslado (#1D4ED8) se confunde con el
     #005AAA de la marca, así que aquí Traslado va en verde azulado (5.5:1 sobre blanco). — */
  --cfdi-traslado:            #0f766e;
  --cfdi-traslado-tinte:      #edf7f6;

  /* — Menú lateral oscuro: el activo es un recuadro #164A85 con texto blanco. —
     El botón de acción del menú va en blanco con texto #005AAA: en #005AAA se perdería sobre el fondo. */
  --sidebar-bg:           #0a2f5c;
  --sidebar-text:         #d3e0ef;
  --sidebar-dim:          #d3e0ef;
  --sidebar-accent:       #ffffff;
  --sidebar-hover-bg:     rgba(255, 255, 255, .08);
  --sidebar-active-bg:    #164a85;
  --sidebar-active-text:  #ffffff;
  --sidebar-indicator:    #ffffff;
  --sidebar-divider:      rgba(255, 255, 255, .14);
  --sidebar-focus:        #ffffff;
  --sidebar-focus-offset: 2px;
  --sidebar-action-bg:    #ffffff;
  --sidebar-action-text:  #005aaa;
}

/* ── Barra superior: blanca, con el logo, separador y la miga actual en #005AAA ──────────────── */
.pp-body, body.portal-body { background: var(--clr-bg); }
.top-header, .pp-header, .portal-header { background: #fff; border-bottom-color: var(--clr-border); }
.top-header__logo img[src*="/temas/hellermanntyton/"] { height: 24px; }
.top-header__logo-sep { background: var(--clr-border); }
.breadcrumb__link { color: var(--clr-text-muted); }
.breadcrumb__link:hover { color: var(--clr-primary); }
.breadcrumb__current { color: var(--clr-primary); font-weight: 600; }
.top-header__breadcrumb > a.breadcrumb__link:last-child { color: var(--clr-primary); font-weight: 600; }
.emp-switch__badge { background: #e8eef5; color: #33465c; }
.emp-switch__badge--btn:hover { background: #e2e9f1; }

/* ── Componentes ──────────────────────────────────────────────────────────────────────────────── */
.btn--secondary { background: #fff; color: #33465c; border-color: #cfdae6; }
.btn--secondary:hover { background: #f4f7fb; }
.btn--outline-sm { border-color: #c6daef; color: #005aaa; }
.btn--outline-sm:hover { border-color: #005aaa; color: #00427d; background: #e6f0fa; }
.tabs-bar .tab--active { background: transparent; color: #005aaa; font-weight: 600; border-radius: 0; box-shadow: inset 0 -2px 0 #005aaa; }
.lst-tab--activa { color: #005aaa; border-bottom-color: #005aaa; }

/* — Logo apaisado en el panel del alta del proveedor (recuadro pensado para logos cuadrados). — */
.al-logo:has(img[src*="/temas/hellermanntyton/"]) { width: 150px; }
.al-logo img[src*="/temas/hellermanntyton/"] { max-width: 136px; }
.pp-sidebar__logo-img[src*="/temas/hellermanntyton/"] { width: 64px; height: auto; border-radius: 0; }

/* ══ Login (portal de proveedores) ═════════════════════════════════════════════════════════════ */
body.vv2-body { background: #f4f7fb; }
.vv2 {
  --ht-primary: #005aaa;
  --ht-primary-hover: #00427d;
  --ht-accent: #ed1c24;
  --ht-text-secondary: #33465c;
  --ht-text-muted: #55667a;
  --ht-border: #e2e9f1;

  --vv2-bg: #f4f7fb;
  --vv2-text: #0e2238;
  --vv2-text-rgb: 14, 34, 56;
  --vv2-accent: #005aaa;
  --vv2-accent-100: #e6f0fa;
  --vv2-accent-200: #c6daef;
  --vv2-accent-300: #005aaa;
  --vv2-accent-600: #005aaa;
  --vv2-accent-700: #00427d;
  --vv2-accent-800: #ffffff;
  --vv2-divider: #e2e9f1;
  --vv2-border: #e2e9f1;
  --vv2-link: #005aaa;
  --vv2-link-hover: #00427d;
  --vv2-grad-a: #005aaa;
  --vv2-grad-b: #005aaa;
  --vv2-grad-lang: #005aaa;
  --vv2-brillo-rgb: 0, 90, 170;
  --vv2-brillo2-rgb: 0, 90, 170;
  --vv2-halo: rgba(0, 90, 170, 0.18);
  --vv2-nebulosa-1: transparent;
  --vv2-nebulosa-2: transparent;
  --vv2-planeta-lg: #eef4fb;
  --vv2-planeta-medio: #d4e4f4;
  --vv2-planeta-sm: rgba(169, 199, 230, 0.35);
  --vv2-carta-a: #ffffff;
  --vv2-carta-b: #ffffff;
  --vv2-carta-ring: transparent;
  --vv2-carta-sombra: rgba(14, 34, 56, 0.12);
  --vv2-input-bg: #fafcfe;
  --vv2-input-border: #cfdae6;
  --vv2-lang-bg: #ffffff;
  --vv2-aviso-bg: #e6f0fa;
  --vv2-aviso-border: rgba(0, 90, 170, 0.35);
  --vv2-footer-border: #e2e9f1;
  --vv2-error-bg: #fdecea;
  --vv2-error-border: rgba(180, 35, 24, 0.4);
  --vv2-error-text: #b42318;
}
/* Franja de 6 px en #005AAA a todo lo ancho y, debajo, una línea de 3 px en el acento sobre el 22 % del ancho. */
.vv2::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--ht-primary); z-index: 3; }
.vv2::after { content: ""; position: absolute; top: 6px; left: 0; width: 22%; height: 3px; background: var(--ht-accent); z-index: 3; }

/* — header — */
.vv2-logo-img[src*="/temas/hellermanntyton/"] { height: 40px; width: auto; }
.vv2 .lang-switch { box-shadow: 0 4px 14px rgba(14, 34, 56, 0.08); backdrop-filter: none; }
.vv2 .lang-switch__btn { color: var(--ht-text-muted); }
.vv2 .lang-switch__btn:hover { background: rgba(0, 90, 170, 0.06); color: var(--vv2-text); }
.vv2 .lang-switch__btn--active,
.vv2 .lang-switch__btn--active:hover { background: var(--ht-primary); color: #fff; box-shadow: none; }

/* — card de login — */
.vv2-card {
  background: #fff;
  border: 1px solid var(--ht-border);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(14, 34, 56, 0.12);
  backdrop-filter: none;
}
.vv2-title { font-weight: 800; }
.vv2-accent-line { width: 56px; height: 3px; background: var(--ht-accent); animation: none; }
.vv2-field > label { color: var(--ht-text-secondary); }
.vv2-input { min-height: 46px; border-radius: 10px; }
.vv2-input::placeholder { color: var(--ht-text-muted); }
.vv2-input:hover { border-color: #c6daef; }
.vv2-eye { color: var(--ht-text-muted); }
.vv2-btn { min-height: 48px; border-radius: 10px; background: var(--ht-primary); box-shadow: 0 10px 24px rgba(0, 90, 170, 0.28); }
.vv2-btn:hover { background: var(--ht-primary-hover); box-shadow: 0 10px 24px rgba(0, 90, 170, 0.28); filter: none; }
.vv2-btn:active { filter: none; }
.vv2-divider { color: var(--ht-text-muted); }
.vv2-divider::before, .vv2-divider::after { background: var(--ht-border); }
.vv2-alt, .vv2-hint { color: var(--ht-text-muted); }
.vv2-hint strong { color: var(--ht-text-secondary); }
.vv2 .vv2-notice p { color: var(--vv2-text); }
.vv2-notice-icon { color: var(--ht-primary); }

/* — hero — */
.vv2-tag-outline { background: #fff; border-color: var(--ht-primary); color: var(--ht-primary); border-radius: 8px; }
.vv2-hero h2 { color: var(--vv2-text); font-weight: 400; }
.vv2-hero h2 strong { font-weight: 800; }
.vv2-hero-rule { height: 3px; background: var(--ht-accent); }
.vv2-hero-sub { color: var(--ht-text-muted); }
.vv2-stat-value { color: var(--ht-primary); font-weight: 700; }
.vv2-stat-label { color: var(--ht-text-muted); }

/* — decoración de fondo: círculo difuso, esfera, curva y puntos con primary, accent y el orbe del tema — */
.vv2-planet-lg { background: radial-gradient(circle at 35% 30%, #eef4fb 0%, #d4e4f4 45%, #a9c7e6 100%); opacity: .7; }
.vv2-planet-sm { background: radial-gradient(circle at 60% 50%, rgba(169, 199, 230, 0.35), transparent 70%); }
.vv2-planet-ring > div { border-width: 2px; border-top-color: var(--ht-primary); border-right-color: var(--ht-accent); opacity: .7; }
@keyframes vv2TwinkleHellermanntyton { 0%, 100% { opacity: .6; } 50% { opacity: .4; } }
.vv2 .vv2-star { background: var(--ht-primary); animation-name: vv2TwinkleHellermanntyton; }
.vv2-comet { background: linear-gradient(90deg, transparent, rgba(0, 90, 170, 0.5)); }

/* — footer — */
.vv2-footer { background: transparent; color: var(--ht-text-muted); border-top-color: var(--ht-border); }
.vv2-footer a { color: var(--ht-text-secondary); }
.vv2-footer a:hover { color: var(--ht-primary); }
.vv2-footer-version { color: var(--ht-primary); font-weight: 600; }
.vv2-footer-domain { color: var(--ht-text-secondary); }
.vv2 .vv2-prodmark img { filter: brightness(0) saturate(100%); opacity: .75; }
.vv2 .vv2-tag { background: #fff; border: 1px solid var(--ht-border); color: var(--ht-text-secondary); }

/* — responsive (< 900 px): una columna, el hero arriba, sin decoraciones grandes, título a 40 px — */
@media (max-width: 900px) {
  .vv2-main { flex-direction: column; align-items: stretch; gap: 32px; }
  .vv2-hero { order: -1; flex-basis: auto; }
  .vv2-card { flex-basis: auto; }
  .vv2-hero h2 { font-size: 40px; }
  .vv2-planet-lg, .vv2-planet-ring { display: none; }
}
@media (max-width: 520px) { .vv2-logo-img[src*="/temas/hellermanntyton/"] { height: 32px; } }

/* — Selección de empresa (Empresa/Elegir, sobre .vv2) en el fondo claro — */
.el2-page .el2-badge { color: var(--ht-primary); border-color: rgba(0, 90, 170, 0.4); }
.el2-page .el2-name { background-image: linear-gradient(90deg, #005aaa, #00427d); }
.el2-page .el2-card { background: #fff; border-color: var(--ht-border); }
.el2-page .el2-card:hover, .el2-page .el2-card--ultima { background: #fff; border-color: var(--ht-primary); }
.el2-page .el2-ultima { background: var(--ht-primary); color: #fff; }
.el2-page .el2-pie svg { color: var(--ht-primary); }
.el2-page .el2-search { background: #fafcfe; border-color: #cfdae6; }
.el2-page .el2-search::-webkit-search-cancel-button { filter: none; }