/* ══════════════════════════════════════════════════════════════════════════
   Tema TRANSPORTES FEMA — guinda FEMA como color de acción y gris carbón como acento (solo 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 "Transportes FEMA · 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 #98012E · primary-hover #730123 · primary-soft #F8E9ED · primary-soft-border #EBC6D0
     accent #3B3436 (solo franjas y líneas) · sidebar #5E0A22 / activo #7E1534 / texto #F1D9DF
     bg #F8F5F4 · text #2A1A1E · text-2 #4A3A3E · text-muted #6A5A5E · border #EEE5E7 · input-border #E0D2D5
     input-bg #FFFCFC · divider #F3ECEE · table-head #FAF7F7 · chip #F1EAEB · chart-muted #E3A9B8
   Contraste (AA ≥ 4.5:1): primary/blanco 8.8 · hover/soft 10.2 · text/bg 15.3 · text-2/bg 9.8 · muted/bg 6.0 · muted/blanco 6.5 · sidebar-text/sidebar 10.2 · blanco/sidebar-activo 10.3
   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:        #98012e;
  --clr-primary-dark:   #730123;
  --clr-primary-light:  #f8e9ed;
  --clr-bg:             #f8f5f4;
  --clr-card:           #ffffff;
  --clr-muted:          #f3ecee;
  --clr-accent:         #f1eaeb;
  --clr-border:         #eee5e7;
  --clr-input-border:   #e0d2d5;
  --clr-text:           #2a1a1e;
  --clr-text-muted:     #6a5a5e;
  --clr-sidebar:        #5e0a22;
  --clr-sidebar-active: #7e1534;
  --clr-sidebar-border: #7e1534;
  --clr-table-head:     #4a3a3e;
  --clr-status-closed:  #98012e;

  /* — escala índigo → Transportes FEMA (#98012E como 500) — */
  --marca-50: #f8e9ed;
  --marca-100: #ecd1d9;
  --marca-200: #daa4b4;
  --marca-300: #c6738c;
  --marca-400: #af395c;
  --marca-500: #98012e;
  --marca-600: #860128;
  --marca-700: #730123;
  --marca-800: #5b011c;
  --marca-900: #440015;
  --marca-950: #2e000e;
  --marca-profundo:   #5e0a22;
  --marca-profundo-2: #46081a;
  --marca-tinte: #faf7f7;

  /* — escala violeta → neutros del tema — */
  --acento-50: #faf7f7;
  --acento-100: #f3ecee;
  --acento-200: #eee5e7;
  --acento-300: #e0d2d5;
  --acento-400: #b1a2a5;
  --acento-500: #88787c;
  --acento-600: #625256;
  --acento-700: #6a5a5e;
  --acento-800: #4a3a3e;
  --acento-900: #2a1a1e;

  /* tripletas RGB de los rgba(..., alfa) */
  --marca-500-rgb: 152, 1, 46;
  --marca-600-rgb: 134, 1, 40;
  --marca-profundo-rgb: 94, 10, 34;

  /* — tokens propios del tema (también los usa el Inicio) — */
  --tema-primary-soft:        #f8e9ed;
  --tema-primary-soft-border: #ebc6d0;
  --tema-accent:              #3b3436;
  --tema-text-2:              #4a3a3e;
  --tema-divider:             #f3ecee;
  --tema-table-head-bg:       #faf7f7;
  --tema-chip-bg:             #f1eaeb;
  --tema-chart-muted:         #e3a9b8;
  --tema-input-bg:            #fffcfc;

  /* — Menú lateral oscuro: el activo es un recuadro #7E1534 con texto blanco. —
     El botón de acción del menú va en blanco con texto #98012E: en #98012E se perdería sobre el fondo. */
  --sidebar-bg:           #5e0a22;
  --sidebar-text:         #f1d9df;
  --sidebar-dim:          #f1d9df;
  --sidebar-accent:       #ffffff;
  --sidebar-hover-bg:     rgba(255, 255, 255, .08);
  --sidebar-active-bg:    #7e1534;
  --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:  #98012e;
}

/* ── Barra superior: blanca, con el logo, separador y la miga actual en #98012E ──────────────── */
.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/fema/"] { height: 36px; }
.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: #f1eaeb; color: #4a3a3e; }
.emp-switch__badge--btn:hover { background: #eee5e7; }

/* ── Componentes ──────────────────────────────────────────────────────────────────────────────── */
.btn--secondary { background: #fff; color: #4a3a3e; border-color: #e0d2d5; }
.btn--secondary:hover { background: #f8f5f4; }
.btn--outline-sm { border-color: #ebc6d0; color: #98012e; }
.btn--outline-sm:hover { border-color: #98012e; color: #730123; background: #f8e9ed; }
.tabs-bar .tab--active { background: transparent; color: #98012e; font-weight: 600; border-radius: 0; box-shadow: inset 0 -2px 0 #98012e; }
.lst-tab--activa { color: #98012e; border-bottom-color: #98012e; }

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

/* ══ Login (portal de proveedores) ═════════════════════════════════════════════════════════════ */
body.vv2-body { background: #f8f5f4; }
.vv2 {
  --fe-primary: #98012e;
  --fe-primary-hover: #730123;
  --fe-accent: #3b3436;
  --fe-text-secondary: #4a3a3e;
  --fe-text-muted: #6a5a5e;
  --fe-border: #eee5e7;

  --vv2-bg: #f8f5f4;
  --vv2-text: #2a1a1e;
  --vv2-text-rgb: 42, 26, 30;
  --vv2-accent: #98012e;
  --vv2-accent-100: #f8e9ed;
  --vv2-accent-200: #ebc6d0;
  --vv2-accent-300: #98012e;
  --vv2-accent-600: #98012e;
  --vv2-accent-700: #730123;
  --vv2-accent-800: #ffffff;
  --vv2-divider: #eee5e7;
  --vv2-border: #eee5e7;
  --vv2-link: #98012e;
  --vv2-link-hover: #730123;
  --vv2-grad-a: #98012e;
  --vv2-grad-b: #98012e;
  --vv2-grad-lang: #98012e;
  --vv2-brillo-rgb: 152, 1, 46;
  --vv2-brillo2-rgb: 152, 1, 46;
  --vv2-halo: rgba(152, 1, 46, 0.18);
  --vv2-nebulosa-1: transparent;
  --vv2-nebulosa-2: transparent;
  --vv2-planeta-lg: #fbeff2;
  --vv2-planeta-medio: #f2d3db;
  --vv2-planeta-sm: rgba(227, 169, 184, 0.35);
  --vv2-carta-a: #ffffff;
  --vv2-carta-b: #ffffff;
  --vv2-carta-ring: transparent;
  --vv2-carta-sombra: rgba(42, 26, 30, 0.12);
  --vv2-input-bg: #fffcfc;
  --vv2-input-border: #e0d2d5;
  --vv2-lang-bg: #ffffff;
  --vv2-aviso-bg: #f8e9ed;
  --vv2-aviso-border: rgba(152, 1, 46, 0.35);
  --vv2-footer-border: #eee5e7;
  --vv2-error-bg: #fdecea;
  --vv2-error-border: rgba(180, 35, 24, 0.4);
  --vv2-error-text: #b42318;
}
/* Franja de 6 px en #98012E 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(--fe-primary); z-index: 3; }
.vv2::after { content: ""; position: absolute; top: 6px; left: 0; width: 22%; height: 3px; background: var(--fe-accent); z-index: 3; }

/* — header — */
.vv2-logo-img[src*="/temas/fema/"] { height: 64px; width: auto; }
.vv2 .lang-switch { box-shadow: 0 4px 14px rgba(42, 26, 30, 0.08); backdrop-filter: none; }
.vv2 .lang-switch__btn { color: var(--fe-text-muted); }
.vv2 .lang-switch__btn:hover { background: rgba(152, 1, 46, 0.06); color: var(--vv2-text); }
.vv2 .lang-switch__btn--active,
.vv2 .lang-switch__btn--active:hover { background: var(--fe-primary); color: #fff; box-shadow: none; }

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

/* — hero — */
.vv2-tag-outline { background: #fff; border-color: var(--fe-primary); color: var(--fe-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(--fe-accent); }
.vv2-hero-sub { color: var(--fe-text-muted); }
.vv2-stat-value { color: var(--fe-primary); font-weight: 700; }
.vv2-stat-label { color: var(--fe-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%, #fbeff2 0%, #f2d3db 45%, #e3a9b8 100%); opacity: .7; }
.vv2-planet-sm { background: radial-gradient(circle at 60% 50%, rgba(227, 169, 184, 0.35), transparent 70%); }
.vv2-planet-ring > div { border-width: 2px; border-top-color: var(--fe-primary); border-right-color: var(--fe-accent); opacity: .7; }
@keyframes vv2TwinkleFema { 0%, 100% { opacity: .6; } 50% { opacity: .4; } }
.vv2 .vv2-star { background: var(--fe-primary); animation-name: vv2TwinkleFema; }
.vv2-comet { background: linear-gradient(90deg, transparent, rgba(152, 1, 46, 0.5)); }

/* — footer — */
.vv2-footer { background: transparent; color: var(--fe-text-muted); border-top-color: var(--fe-border); }
.vv2-footer a { color: var(--fe-text-secondary); }
.vv2-footer a:hover { color: var(--fe-primary); }
.vv2-footer-version { color: var(--fe-primary); font-weight: 600; }
.vv2-footer-domain { color: var(--fe-text-secondary); }
.vv2 .vv2-prodmark img { filter: brightness(0) saturate(100%); opacity: .75; }
.vv2 .vv2-tag { background: #fff; border: 1px solid var(--fe-border); color: var(--fe-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/fema/"] { height: 48px; } }

/* — Selección de empresa (Empresa/Elegir, sobre .vv2) en el fondo claro — */
.el2-page .el2-badge { color: var(--fe-primary); border-color: rgba(152, 1, 46, 0.4); }
.el2-page .el2-name { background-image: linear-gradient(90deg, #98012e, #730123); }
.el2-page .el2-card { background: #fff; border-color: var(--fe-border); }
.el2-page .el2-card:hover, .el2-page .el2-card--ultima { background: #fff; border-color: var(--fe-primary); }
.el2-page .el2-ultima { background: var(--fe-primary); color: #fff; }
.el2-page .el2-pie svg { color: var(--fe-primary); }
.el2-page .el2-search { background: #fffcfc; border-color: #e0d2d5; }
.el2-page .el2-search::-webkit-search-cancel-button { filter: none; }