/* ══════════════════════════════════════════════════════════════════════════
   Tema OXXO — rojo solo como identidad, acción en carbón, neutros en gris cálido y amarillo como franja.
   Se carga por dominio (appsettings "TemasPorHost" → _TemaCss) DESPUÉS de las hojas base. Isaac 9-nov-2026
   (canvas "Venvers · Tyson Foods y OXXO"): login claro, barra superior con logo y menú lateral CLARO.
   Isaac 10-nov-2026 ("fondo neutro y más contraste"): los neutros pasan de crema a gris cálido.
   Isaac 11-nov-2026 ("Acción principal en carbón para temas con marca roja"): en Venvers el rojo ya significa
   alerta o error, así que la marca deja de pintar lo que se presiona. Tres papeles, tres tokens:
     --brand  #D0121F  identidad: indicador y fondo del ítem activo del menú, miga activa, decoración y
                       badge del login, íconos de las tarjetas. NUNCA en un botón ni en un enlace.
     --action #2B2321  (hover #463B38, texto #FFFFFF) botones principales, enlaces de texto (con subrayado),
                       pestaña activa, selector ES/EN, foco. --clr-primary y la escala --marca-* SON la acción.
     --danger #B42318  (hover #912018) errores, "No válido fiscal" y la acción destructiva dentro de su
                       confirmación. En las tablas "Rechazar"/"Eliminar" van neutros: el rojo aparece en el modal.

   Paleta:
     brand #D0121F · brand-soft #FDEBEC · ícono sobre soft #B30F1A · action #2B2321 · action-hover #463B38
     danger #B42318 · danger-hover #912018 · danger-bg #FEF3F2
     text #2A1515 · text-secondary #4A3430 · text-muted #5C4843 · placeholder #94867E
     bg #F7F5F3 · bg-inicio #F3F0ED · surface #FFFFFF · border #E7E2DE · input-border #DDD5D0
     borde de botón con contorno #D9CFC9 · divider #EFEAE6 · table-head #FAF8F7 · chip #EFEBE8 · hover #F5F1EE
     flecha #A39893 · accent (franja) #F0A929
   Contraste (WCAG AA ≥ 4.5:1 en texto), medido:
     blanco sobre action #2B2321 → 15.4 · blanco sobre action-hover #463B38 → 10.8 · action sobre blanco → 15.4
     blanco sobre danger #B42318 → 6.6 · danger sobre danger-bg → 6.0 · blanco sobre danger-hover → 8.7
     text-muted #5C4843 → 8.5 sobre blanco · 7.8 sobre bg · 7.5 sobre bg-inicio · 7.2 sobre chip
     brand #D0121F → 5.5 sobre blanco · 4.8 sobre soft (ítem activo del menú, miga)
     ícono #B30F1A sobre soft → 6.1
     flecha #A39893 → 2.8 sobre blanco: SOLO decorativa (aria-hidden), nunca texto.
   El rojo del logo es #E21C2A; la interfaz usa #D0121F porque el del logo con texto blanco no llega a 4.5:1.
   El amarillo NUNCA va en texto, en fondos ni en acciones (en el sistema el ámbar es "Pendiente"): solo la
   franja superior (4–6 px), las líneas y los puntos decorativos del login. Los badges de estatus y los colores
   de tipo de CFDI son semánticos y no se tocan.

   REGLA DEL ARCHIVO: los colores viven en los tokens de :root (y en .vv2 para el login). Abajo no se escriben
   hex a mano: un tono nuevo se da de alta como token y se usa con var().
   El menú lateral se fija aquí mismo (variables --mnu-* y fondos), sin depender de otros temas.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* — marca, acción y peligro — */
  --oxxo-rojo:     #d0121f;
  --oxxo-amarillo: #f0a929;
  --brand:         var(--oxxo-rojo);
  --brand-rgb:     208, 18, 31;
  --action:        #2b2321;
  --action-hover:  #463b38;
  --action-text:   #ffffff;
  --action-rgb:    43, 35, 33;
  --danger:        #b42318;
  --danger-hover:  #912018;
  --danger-rgb:    180, 35, 24;

  /* — tokens propios del tema (los mismos nombres que usan FEMA y HellermannTyton; también los usa el Inicio) — */
  --tema-primary-soft:        #fdebec;
  --tema-primary-soft-border: #f1c3c6;
  --tema-accent:              var(--oxxo-amarillo);
  --tema-text-2:              #4a3430;
  --tema-divider:             #efeae6;   /* líneas internas de tabla y track de barras */
  --tema-table-head-bg:       #faf8f7;
  --tema-chip-bg:             #efebe8;   /* pastilla de la empresa y chips neutros */
  --tema-chart-muted:         #e7848b;
  --tema-input-bg:            #ffffff;
  /* neutros en gris cálido (solo OXXO) */
  --tema-bg:                  #f7f5f3;   /* fondo de página */
  --tema-bg-inicio:           #f3f0ed;   /* fondo del Inicio (portal): un paso más oscuro para que las tarjetas resalten */
  --tema-border:              #e7e2de;   /* tarjetas y separadores */
  --tema-border-input:        #ddd5d0;   /* inputs y botones secundarios */
  --tema-border-input-hover:  #c4b9b3;
  --tema-border-boton:        #d9cfc9;   /* botón de tabla con contorno ("Editar") */
  --tema-sombra-accion:       0 8px 20px rgba(var(--action-rgb), .22);
  --tema-hover:               #f5f1ee;   /* hover del menú y de botones secundarios */
  --tema-icono:               #b30f1a;   /* ícono sobre primary-soft */
  --tema-flecha:              #a39893;   /* flechas del flujo: decorativas */
  --tema-placeholder:         #94867e;
  --tema-sombra-rgb:          60, 30, 25;

  /* — listados en tarjeta (Isaac 11-nov). La spec traía los tonos crema de antes del 10-nov; aquí van sus
       equivalentes en el gris cálido de hoy (borde, encabezado, separador y hover del tema). — */
  --lista-borde:         var(--tema-border);
  --lista-sombra:        0 1px 2px rgba(60, 30, 10, .04), 0 6px 18px rgba(60, 30, 10, .05);
  --lista-head-bg:       var(--tema-table-head-bg);
  --lista-head-linea:    var(--tema-border-input);
  --lista-fila-linea:    var(--tema-divider);
  --lista-hover:         var(--tema-hover);
  --lista-pie-bg:        #fcfbfa;
  --lista-chip-bg:       #eeeae7;
  --lista-chip-text:     #4a3f3b;
  --lista-boton-borde:   var(--tema-border-boton);

  /* — tokens base del design system — */
  /* --clr-primary es el color de ACCIÓN (botones, enlaces, pestañas, foco): carbón. Su "dark" es el hover. */
  --clr-primary:        var(--action);
  --clr-primary-dark:   var(--action-hover);
  --clr-primary-light:  var(--tema-chip-bg);
  --clr-danger:         var(--danger);
  --clr-danger-bg:      #fef3f2;
  --rojo-500:           var(--danger);        /* rojos de sistema de la hoja base */
  --rojo-600:           var(--danger);
  --rojo-700:           var(--danger-hover);
  --rojo-800:           var(--danger-hover);
  --clr-bg:             var(--tema-bg);
  --clr-card:           #ffffff;
  --clr-muted:          var(--tema-hover);
  --clr-accent:         var(--tema-chip-bg);
  --clr-border:         var(--tema-border);
  --clr-input-border:   var(--tema-border-input);
  --clr-text:           #2a1515;
  --clr-text-muted:     #5c4843;
  --clr-sidebar:        var(--action);   /* solo el botón ☰ del móvil y menús viejos; el menú lateral va claro (abajo) */
  --clr-sidebar-active: var(--action-hover);
  --clr-sidebar-border: var(--action-hover);
  --clr-table-head:     var(--tema-text-2);

  /* — escala índigo → carbón cálido (#2B2321 como 500). La hoja base y las vistas la usan para lo que se
       presiona o se selecciona; 600 es el hover (más claro que 500, a propósito) y 50–300 los tintes neutros. — */
  --marca-50:  var(--tema-hover);
  --marca-100: var(--tema-chip-bg);
  --marca-200: var(--tema-border-input);
  --marca-300: var(--tema-border-input-hover);
  --marca-400: #7a6a63;
  --marca-500: var(--action);
  --marca-600: var(--action-hover);
  --marca-700: var(--action);
  --marca-800: #241d1b;
  --marca-900: #1f1917;
  --marca-950: #1a1513;
  --marca-profundo:   #4a3430;
  --marca-profundo-2: #2a1515;
  --marca-tinte: var(--tema-table-head-bg);   /* encabezados de las tablas de detalle */

  /* — escala violeta → gris cálido (50–400) y tinta cálida (500–900) — */
  --acento-50:  var(--tema-hover);
  --acento-100: var(--tema-chip-bg);
  --acento-200: var(--tema-border);
  --acento-300: var(--tema-border-input);
  --acento-400: var(--tema-border-input-hover);
  --acento-500: #94867e;
  --acento-600: #7a6a63;
  --acento-700: #5c4843;
  --acento-800: #4a3430;
  --acento-900: #2a1515;

  /* tripletas RGB de los rgba(..., alfa) */
  --marca-500-rgb: var(--action-rgb);
  --marca-600-rgb: 70, 59, 56;
  --marca-profundo-rgb: 74, 52, 48;
}

/* Bóveda y el workspace traen un gris fijo de fondo: van en el gris cálido de página.
   El portal (Inicio del proveedor y del comprador) usa el tono un paso más oscuro. */
.pp-body { background: var(--clr-bg); }
body.portal-body { background: var(--tema-bg-inicio); }

/* ── Barra superior ───────────────────────────────────────────────────────────────────────────
   Franja amarilla de 4 px arriba de la barra y del menú lateral (juntas forman una sola franja de lado a lado). */
.top-header, .pp-header, .portal-header { background: var(--clr-card); border-top: 4px solid var(--tema-accent); border-bottom-color: var(--clr-border); }
.top-header__logo-sep { background: var(--clr-border); }
.breadcrumb__link { color: var(--clr-text-muted); }
.breadcrumb__link:hover { color: var(--action); }
/* La miga activa dice dónde estás: es identidad (rojo de marca), no una acción. */
.breadcrumb__current { color: var(--brand); font-weight: 600; }
/* Algunos layouts pintan la página actual como enlace (la raíz del módulo): la última miga también va en rojo. */
.top-header__breadcrumb > a.breadcrumb__link:last-child { color: var(--brand); font-weight: 600; }
.emp-switch__badge { background: var(--tema-chip-bg); color: var(--tema-text-2); }
.emp-switch__badge--btn:hover { background: var(--tema-border); }

/* ── Menú lateral claro ───────────────────────────────────────────────────────────────────────── */
.sidebar.mnu {
  --mnu-bg: var(--clr-card);
  --mnu-txt: var(--clr-text-muted);
  --mnu-dim: var(--clr-text-muted);
  --mnu-acento: var(--brand);
  --mnu-linea: var(--tema-border);
  --mnu-hover: var(--tema-hover);
  background: var(--clr-card); color: var(--clr-text-muted);
  border-right: 1px solid var(--clr-border); border-top: 4px solid var(--tema-accent);
}
html.mnu-riel .mnu__nav { background: var(--clr-card); }
html.mnu-riel .mnu--abierto .mnu__nav { box-shadow: 12px 0 32px rgba(var(--marca-profundo-rgb), .16); }
.mnu__mod { background: var(--tema-bg); color: var(--clr-text); }
button.mnu__mod:hover { background: var(--tema-chip-bg); }
.mnu__mod-ico { background: var(--tema-primary-soft); color: var(--brand); }
.mnu__item { color: var(--clr-text-muted); font-weight: 500; }
.mnu__item:hover { background: var(--tema-hover); color: var(--clr-text); }
/* El ítem activo es el indicador de dónde estás: fondo, barra e ícono en el rojo de marca; el texto, en el color
   de acción (Isaac 11-nov, listados §6). */
.mnu__item.is-activa, .mnu__item.is-activa:hover { background: var(--tema-primary-soft); color: var(--action); font-weight: 600; }
.mnu__item.is-activa .mnu__ico { color: var(--brand); }
.mnu__item.is-activa::before { background: var(--brand); }
.mnu__colapsar:hover { background: var(--tema-hover); color: var(--clr-text); }
/* "Cargar": es un botón, va en el color de acción. */
.mnu__accion { background: var(--action); color: var(--action-text); }
.mnu__accion:hover { background: var(--action-hover); color: var(--action-text); }
.mnu__accion.is-activa { box-shadow: 0 0 0 2px var(--clr-card), 0 0 0 4px var(--action); }
/* En el móvil el menú es un drawer; el botón ☰ (carbón, ícono blanco) queda sobre el drawer blanco. */
@media (max-width: 767px) { .sidebar.mnu { border-top: none; } }

/* ── Componentes ──────────────────────────────────────────────────────────────────────────────── */
/* Botón principal: carbón con hover visible (la base solo lo oscurecía 5 %, que sobre carbón no se nota). */
.btn--primary:hover, .lst-btn1:hover, .btn--primary-sm:hover { background: var(--action-hover); filter: none; opacity: 1; }
.lst-btn1:hover { border-color: var(--action-hover); }
.btn--primary-sm { background: var(--action); }
.lst-btn1.pvc-btn--ok:hover { border-color: var(--clr-success); }   /* "Aceptar" conserva su verde */
.btn--secondary { background: var(--clr-card); color: var(--tema-text-2); border-color: var(--tema-border-input); }
.btn--secondary:hover { background: var(--tema-hover); }
.btn--outline-sm { border-color: var(--tema-border-boton); color: var(--action); }
.btn--outline-sm:hover { border-color: var(--action); color: var(--action); background: var(--tema-hover); }
/* Pestañas en barra: la activa en carbón con subrayado de 2 px (en vez de la pastilla rellena). */
.tabs-bar .tab--active { background: transparent; color: var(--action); font-weight: 600; border-radius: 0; box-shadow: inset 0 -2px 0 var(--action); }
.lst-tab--activa { color: var(--action); border-bottom-color: var(--action); }
/* Enlaces de texto: carbón con subrayado (más grueso al pasar el cursor); sin el color, el subrayado es la pista.
   Los enlaces con color en línea de las vistas entran por el selector de atributo. Los del panel de Bóveda
   llevan ".fx" delante porque su hoja (boveda-panel.css) carga después del tema. */
.link-ver-todas, .pvd-link, .pvc-detalle, .fx :is(.fx-link, .fx-mov__t),
a:is([style*="color:var(--clr-primary"], [style*="color: var(--clr-primary"], [style*="color:var(--marca-"], [style*="color: var(--marca-"]):not([style*="background"], [style*="border"], [style*="padding"]) {
  color: var(--action); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
:is(.link-ver-todas, .pvd-link, .pvc-detalle):hover, .fx :is(.fx-link, .fx-mov__t):hover,
a:is([style*="color:var(--clr-primary"], [style*="color: var(--clr-primary"], [style*="color:var(--marca-"], [style*="color: var(--marca-"]):not([style*="background"], [style*="border"], [style*="padding"]):hover {
  text-decoration-thickness: 2px;
}
.fx .fx-link--mal { color: var(--danger); }
/* Folios e identificadores de las tablas (Isaac 11-nov, listados): color de acción y peso 600, SIN subrayado fijo;
   se subrayan al pasar el cursor. Ya no van en rojo. */
.link-numero, .lst-num, .req-num, .fx .fx-oc__folio { color: var(--action); text-decoration: none; }
:is(.link-numero, .lst-num, .req-num):hover, .fx .fx-oc__folio:hover { color: var(--action); text-decoration: underline; }
/* Destructivo: en las tablas "Rechazar" / "Eliminar" van neutros; el rojo (--danger) aparece en la confirmación. */
table :is(.btn--danger, .btn--red, .btn--red-outline, .uic-btn--danger) {
  background: var(--clr-card); color: var(--action); border: 1px solid var(--tema-border-boton);
}
table :is(.btn--danger, .btn--red, .btn--red-outline, .uic-btn--danger):hover { background: var(--tema-hover); border-color: var(--action); opacity: 1; }
.btn--danger:hover, .btn--red:hover, .vdlg-card--peligro .vdlg-ok:hover, .vdlg-card--error .vdlg-ok:hover { background: var(--danger-hover); opacity: 1; }
.btn--red-outline:hover { background: var(--clr-danger-bg); }
input::placeholder, textarea::placeholder { color: var(--tema-placeholder); }
/* Tablas: encabezado casi blanco y líneas internas más suaves que el borde de la tarjeta. */
.data-table thead tr, .cmp-table thead tr, .lst-tabla th { background: var(--tema-table-head-bg); }
.data-table td { border-bottom-color: var(--tema-divider); }
.lst-tabla td { border-top-color: var(--tema-divider); }
/* Track de las barras de avance. */
.progress-bar, .wiz-progress-bar, .eval-req-bar__track { background: var(--tema-divider); }
/* Íconos de las tarjetas: rosa claro con el ícono en rojo oscuro (el chip neutro queda para las pastillas). */
.portal-module__icon, .applauncher__ico, .lst-ctx__ico { background: var(--tema-primary-soft); color: var(--tema-icono); }

/* — Logo apaisado (2.1:1) en el panel del alta del proveedor, igual que Tyson. — */
.al-logo:has(img[src*="/temas/oxxo/"]) { width: 150px; }
.al-logo img[src*="/temas/oxxo/"] { max-width: 136px; }

/* ══ Login (portal de proveedores) ═════════════════════════════════════════════════════════════ */
body.vv2-body { background: var(--tema-bg); }
.vv2 {
  --ox-brand: var(--brand);            /* badge, cifras y decoración: identidad, nada que se presione */
  --ox-accent: var(--tema-accent);
  --ox-text-secondary: var(--tema-text-2);
  --ox-text-muted: var(--clr-text-muted);
  --ox-placeholder: var(--tema-placeholder);
  --ox-border: var(--tema-border);
  --ox-card-border: var(--tema-border);
  /* esfera decorativa (gris cálido) */
  --ox-esfera-a: #f4efec;
  --ox-esfera-b: #e8dfda;
  --ox-esfera-c: #d9ccc5;

  --vv2-bg: var(--tema-bg);
  --vv2-text: #2a1515;
  --vv2-text-rgb: 42, 21, 21;
  --vv2-accent: var(--action);        /* foco, cursor de texto y borde del campo activo */
  --vv2-accent-100: var(--tema-primary-soft);
  --vv2-accent-200: #f0b3b7;
  --vv2-accent-300: var(--brand);
  --vv2-accent-600: var(--action);
  --vv2-accent-700: var(--action-hover);
  --vv2-accent-800: #ffffff;
  --vv2-divider: var(--tema-border);
  --vv2-border: var(--tema-border);
  --vv2-link: var(--action);
  --vv2-link-hover: var(--action);
  --vv2-grad-a: var(--action);        /* sin degradado: los dos extremos son el mismo carbón */
  --vv2-grad-b: var(--action);
  --vv2-grad-lang: var(--action);
  --vv2-brillo-rgb: var(--action-rgb);
  --vv2-brillo2-rgb: var(--action-rgb);
  --vv2-halo: rgba(var(--brand-rgb), 0.18);
  --vv2-nebulosa-1: transparent;      /* fondo gris cálido liso */
  --vv2-nebulosa-2: transparent;
  --vv2-planeta-lg: var(--ox-esfera-a);
  --vv2-planeta-medio: var(--ox-esfera-b);
  --vv2-planeta-sm: rgba(var(--brand-rgb), 0.08);   /* círculo difuso */
  --vv2-carta-a: #ffffff;
  --vv2-carta-b: #ffffff;
  --vv2-carta-ring: transparent;
  --vv2-carta-sombra: rgba(var(--tema-sombra-rgb), 0.10);
  --vv2-input-bg: var(--tema-input-bg);
  --vv2-input-border: var(--tema-border-input);
  --vv2-lang-bg: #ffffff;
  --vv2-aviso-bg: var(--tema-primary-soft);
  --vv2-aviso-border: rgba(var(--brand-rgb), 0.35);
  --vv2-footer-border: var(--tema-border);
  --vv2-error-bg: var(--clr-danger-bg);
  --vv2-error-border: rgba(var(--danger-rgb), 0.4);
  --vv2-error-text: var(--danger);
}
/* Franja amarilla de 6 px a todo lo ancho. */
.vv2::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--ox-accent); z-index: 3; }

/* — header — */
.vv2-logo-img[src*="/temas/oxxo/"] { height: 56px; width: auto; }
.vv2 .lang-switch { box-shadow: 0 4px 14px rgba(var(--tema-sombra-rgb), 0.08); backdrop-filter: none; }
.vv2 .lang-switch__btn { color: var(--ox-text-muted); }
.vv2 .lang-switch__btn:hover { background: rgba(var(--action-rgb), 0.06); color: var(--vv2-text); }
.vv2 .lang-switch__btn--active,
.vv2 .lang-switch__btn--active:hover { background: var(--action); color: var(--action-text); box-shadow: none; }
/* Enlaces del login ("¿Olvidaste tu contraseña?", "Regístrate"): carbón con subrayado. */
.vv2-card a:not(.vv2-btn), .vv2-link-row a, .vv2-alt a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.vv2-card a:not(.vv2-btn):hover, .vv2-link-row a:hover, .vv2-alt a:hover { text-decoration-thickness: 2px; }

/* — card de login — */
.vv2-card {
  background: var(--vv2-carta-a);
  border: 1px solid var(--ox-card-border);
  border-radius: 18px;
  box-shadow: 0 24px 60px var(--vv2-carta-sombra);
  backdrop-filter: none;
}
.vv2-accent-line { width: 56px; height: 3px; background: var(--ox-accent); animation: none; }
.vv2-field > label { color: var(--ox-text-secondary); }
.vv2-input { min-height: 46px; border-radius: 10px; }
.vv2-input::placeholder { color: var(--ox-placeholder); }
.vv2-input:hover { border-color: var(--tema-border-input-hover); }
.vv2-eye { color: var(--ox-text-muted); }
.vv2-btn {
  min-height: 48px; border-radius: 10px;
  background: var(--action); color: var(--action-text); font-weight: 600;
  box-shadow: var(--tema-sombra-accion);
}
.vv2-btn:hover { background: var(--action-hover); box-shadow: var(--tema-sombra-accion); filter: none; }
.vv2-btn:active { filter: none; }
.vv2-divider { color: var(--ox-text-muted); }
.vv2-divider::before, .vv2-divider::after { background: var(--ox-border); }
.vv2-alt { color: var(--ox-text-muted); }
.vv2-hint { color: var(--ox-text-muted); }
.vv2-hint strong { color: var(--ox-text-secondary); }
.vv2 .vv2-notice p { color: var(--vv2-text); }
.vv2-notice-icon { color: var(--ox-brand); }

/* — hero — */
.vv2-tag-outline { background: var(--vv2-carta-a); border-color: var(--ox-brand); color: var(--ox-brand); border-radius: 8px; }
.vv2-hero h2 { color: var(--vv2-text); font-weight: 400; }
.vv2-hero h2 strong { font-weight: 800; }
.vv2-hero-rule { width: 120px; height: 3px; background: var(--ox-accent); }
.vv2-hero-sub { color: var(--ox-text-muted); }
.vv2-stat-value { color: var(--ox-brand); font-weight: 700; }
.vv2-stat-label { color: var(--ox-text-muted); }

/* — decoración de fondo: esfera gris cálido, círculo difuso rojo muy tenue, arco rojo y puntos rojos y amarillos alternados — */
.vv2-planet-lg { background: radial-gradient(circle at 35% 30%, var(--ox-esfera-a) 0%, var(--ox-esfera-b) 50%, var(--ox-esfera-c) 100%); }
.vv2-planet-sm { background: radial-gradient(circle at 60% 50%, var(--vv2-planeta-sm), transparent 70%); }
.vv2-planet-ring > div { border-width: 2px; border-top-color: var(--ox-brand); border-right-color: var(--ox-brand); opacity: .7; }
@keyframes vv2TwinkleOxxo { 0%, 100% { opacity: .6; } 50% { opacity: .4; } }
.vv2 .vv2-star { background: var(--ox-brand); animation-name: vv2TwinkleOxxo; }
.vv2 .vv2-star:nth-child(even) { background: var(--ox-accent); }
.vv2-comet { background: linear-gradient(90deg, transparent, rgba(var(--brand-rgb), 0.5)); }

/* — footer — */
.vv2-footer { background: transparent; color: var(--ox-text-muted); border-top-color: var(--ox-border); }
.vv2-footer a { color: var(--ox-text-secondary); }
.vv2-footer a:hover { color: var(--action); text-decoration: underline; }
.vv2-footer-version { color: var(--ox-brand); font-weight: 600; }
.vv2-footer-domain { color: var(--ox-text-secondary); }
/* Sello Venvers (blanco) en tinta oscura y chip "v2" en blanco con borde. */
.vv2 .vv2-prodmark img { filter: brightness(0) saturate(100%); opacity: .75; }
.vv2 .vv2-tag { background: var(--vv2-carta-a); border: 1px solid var(--ox-border); color: var(--ox-text-secondary); }

/* — responsive (< 900 px): una columna, el hero arriba, sin planeta ni arco — */
@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/oxxo/"] { height: 44px; } }

/* — Selección de empresa (Empresa/Elegir, sobre .vv2) en el fondo claro. La etiqueta y el nombre son decoración
     (marca); las tarjetas se presionan: su borde activo y la pastilla "última" van en el color de acción. — */
.el2-page .el2-badge { color: var(--ox-brand); border-color: rgba(var(--brand-rgb), 0.4); }
.el2-page .el2-name { background-image: linear-gradient(90deg, var(--ox-brand), var(--ox-brand)); }
.el2-page .el2-card { background: var(--vv2-carta-a); border-color: var(--ox-card-border); }
.el2-page .el2-card:hover { background: var(--vv2-carta-a); border-color: var(--action); }
.el2-page .el2-card--ultima { background: var(--vv2-carta-a); border-color: var(--action); }
.el2-page .el2-ultima { background: var(--action); color: var(--action-text); }
.el2-page .el2-pie svg { color: var(--ox-brand); }
.el2-page .el2-search { background: var(--tema-input-bg); border-color: var(--tema-border-input); }
.el2-page .el2-search::-webkit-search-cancel-button { filter: none; }