/* ══════════════════════════════════════════════════════════════════════════
   Tema TYSON FOODS — login claro con un solo acento: el rojo Tyson.
   Se carga por dominio (appsettings "TemasPorHost" → _TemaCss) DESPUÉS de auth-v2.css.
   Isaac 6-nov-2026 (diseño aprobado en el canvas "Venvers · Tyson Foods"): login claro, y el
   mismo día "que sea en todas las pantallas": los tokens de :root repintan todo el portal
   (comprador y proveedor), igual que Doña Tota. El amarillo del logo NO se usa en la interfaz.

   Paleta:
     bg #FBF6EE · surface #FFFFFF · primary #CB122D · primary-hover #9E0E23
     text #2B1414 · text-secondary #4A3632 · text-muted #6B5A55 · placeholder #9A8A84
     border #EADFD3 · card-border #F0E2D4 · input-border #E3D3C6 · input-bg #FFFCF8
   Superficies oscuras (sidebar, encabezados de tabla): vino muy oscuro derivado del rojo, para
   que el logo y los botones rojos contrasten. Escalas 50-950 derivadas del rojo (marca) y de
   la crema/tinta (acento), conservando el papel de cada peldaño del diseño original.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* — tokens base del design system — */
  --clr-primary:        #cb122d;
  --clr-primary-dark:   #9e0e23;
  --clr-primary-light:  #fdebed;
  --clr-bg:             #fbf6ee;
  --clr-muted:          #f6efe6;
  --clr-accent:         #f0e6da;
  --clr-border:         #eadfd3;
  --clr-input-border:   #e3d3c6;
  --clr-text-muted:     #6b5a55;
  --clr-sidebar:        #3a0c13;   /* vino oscuro derivado del rojo Tyson */
  --clr-sidebar-active: #57111c;
  --clr-sidebar-border: #651320;
  --clr-table-head:     #330a11;
  --clr-status-closed:  #cb122d;

  /* — escala índigo → rojo Tyson (#CB122D como 500) — */
  --marca-50:  #fdecee;
  --marca-100: #fbd9dd;
  --marca-200: #f6b3bc;
  --marca-300: #ee8191;
  --marca-400: #df4a60;
  --marca-500: #cb122d;
  --marca-600: #b30f27;
  --marca-700: #9e0e23;
  --marca-800: #7f0b1c;
  --marca-900: #600816;
  --marca-950: #3d050e;
  --marca-profundo:   #330a11;
  --marca-profundo-2: #26070d;
  --marca-tinte: #fdf9f6;

  /* — escala violeta → crema y tinta cálida — */
  --acento-50:  #faf5ef;
  --acento-100: #f4ece3;
  --acento-200: #eadfd3;
  --acento-300: #e3d3c6;
  --acento-400: #c9b3a5;
  --acento-500: #a8918a;
  --acento-600: #8a756f;
  --acento-700: #6b5a55;
  --acento-800: #4a3632;
  --acento-900: #2b1414;

  /* tripletas RGB de los rgba(..., alfa) */
  --marca-500-rgb: 203, 18, 45;
  --marca-600-rgb: 179, 15, 39;
  --marca-profundo-rgb: 51, 10, 17;

  --tyson-rojo: #cb122d;
}

/* — Logo apaisado (2.1:1) en el sidebar angosto del proveedor (80 px): a lo ancho, no en el cuadro de 38 px. — */
.pp-sidebar__logo-img[src*="/temas/tyson/"] { width: 64px; height: auto; border-radius: 0; }
/* — Panel del alta: el recuadro pensado para logos cuadrados se ensancha (igual que Doña Tota). — */
.al-logo:has(img[src*="/temas/tyson/"]) { width: 150px; }
.al-logo img[src*="/temas/tyson/"] { max-width: 136px; }

body.vv2-body { background: #fbf6ee; }
.vv2 {
  --ty-primary: #cb122d;
  --ty-primary-hover: #9e0e23;
  --ty-text-secondary: #4a3632;
  --ty-text-muted: #6b5a55;
  --ty-placeholder: #9a8a84;
  --ty-border: #eadfd3;
  --ty-card-border: #f0e2d4;

  --vv2-bg: #fbf6ee;
  --vv2-text: #2b1414;
  --vv2-text-rgb: 43, 20, 20;
  --vv2-accent: #cb122d;
  --vv2-accent-100: #fdebed;
  --vv2-accent-200: #f1b9c0;
  --vv2-accent-300: #cb122d;
  --vv2-accent-600: #cb122d;
  --vv2-accent-700: #9e0e23;
  --vv2-accent-800: #ffffff;
  --vv2-divider: #eadfd3;
  --vv2-border: #eadfd3;
  --vv2-link: #cb122d;
  --vv2-link-hover: #9e0e23;
  --vv2-grad-a: #cb122d;              /* sin degradado: los dos extremos son el mismo rojo */
  --vv2-grad-b: #cb122d;
  --vv2-grad-lang: #cb122d;
  --vv2-brillo-rgb: 203, 18, 45;
  --vv2-brillo2-rgb: 203, 18, 45;
  --vv2-halo: rgba(203, 18, 45, 0.18);
  --vv2-nebulosa-1: transparent;      /* fondo crema liso */
  --vv2-nebulosa-2: transparent;
  --vv2-planeta-lg: #fdebed;
  --vv2-planeta-medio: #f9dcdf;
  --vv2-planeta-sm: rgba(241, 185, 192, 0.35);
  --vv2-carta-a: #ffffff;
  --vv2-carta-b: #ffffff;
  --vv2-carta-ring: transparent;
  --vv2-carta-sombra: rgba(120, 40, 20, 0.12);
  --vv2-input-bg: #fffcf8;
  --vv2-input-border: #e3d3c6;
  --vv2-lang-bg: #ffffff;
  --vv2-aviso-bg: #fdebed;
  --vv2-aviso-border: rgba(203, 18, 45, 0.35);
  --vv2-footer-border: #eadfd3;
  --vv2-error-bg: #fdebed;
  --vv2-error-border: rgba(203, 18, 45, 0.4);
  --vv2-error-text: #9e0e23;
}

/* — header — */
.vv2-logo-img[src*="/temas/tyson/"] { height: 64px; }
.vv2 .lang-switch { box-shadow: 0 4px 14px rgba(203, 18, 45, 0.08); backdrop-filter: none; }
.vv2 .lang-switch__btn { color: var(--ty-text-muted); }
.vv2 .lang-switch__btn:hover { background: rgba(203, 18, 45, 0.06); color: var(--vv2-text); }
.vv2 .lang-switch__btn--active,
.vv2 .lang-switch__btn--active:hover { background: var(--ty-primary); color: #fff; box-shadow: none; }

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

/* — hero — */
.vv2-tag-outline { background: #fff; border-color: var(--ty-primary); color: var(--ty-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(--ty-primary); }
.vv2-hero-sub { color: var(--ty-text-muted); }
.vv2-stat-value { color: var(--ty-primary); font-weight: 700; }
.vv2-stat-label { color: var(--ty-text-muted); }

/* — decoración de fondo — */
.vv2-planet-lg {
  background: radial-gradient(circle at 35% 30%, #fdebed 0%, #f9dcdf 45%, #f1b9c0 100%);
  opacity: .7;
}
.vv2-planet-sm { background: radial-gradient(circle at 60% 50%, rgba(241, 185, 192, 0.35), transparent 70%); }
.vv2-planet-ring > div { border-width: 2px; border-top-color: var(--ty-primary); border-right-color: var(--ty-primary); opacity: .7; }
/* Puntos rojos tenues: el parpadeo se queda entre .4 y .6 (el de base llega a .85). */
@keyframes vv2TwinkleTyson { 0%, 100% { opacity: .6; } 50% { opacity: .4; } }
.vv2 .vv2-star { background: var(--ty-primary); animation-name: vv2TwinkleTyson; }
.vv2-comet { background: linear-gradient(90deg, transparent, rgba(203, 18, 45, 0.5)); }

/* — footer — */
.vv2-footer { background: transparent; color: var(--ty-text-muted); border-top-color: var(--ty-border); }
.vv2-footer a { color: var(--ty-text-secondary); }
.vv2-footer a:hover { color: var(--ty-primary); }
.vv2-footer-version { color: var(--ty-primary); font-weight: 600; }
.vv2-footer-domain { color: var(--ty-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: #fff; border: 1px solid var(--ty-border); color: var(--ty-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/tyson/"] { height: 48px; } }

/* — Selección de empresa (Empresa/Elegir, sobre .vv2) en el fondo claro: acentos en rojo y tinta. — */
.el2-page .el2-badge { color: var(--ty-primary); border-color: rgba(203, 18, 45, 0.4); }
.el2-page .el2-name { background-image: linear-gradient(90deg, #cb122d, #9e0e23); }
.el2-page .el2-card { background: #fff; border-color: var(--ty-card-border); }
.el2-page .el2-card:hover { background: #fff; border-color: var(--ty-primary); }
.el2-page .el2-card--ultima { background: #fff; border-color: var(--ty-primary); }
.el2-page .el2-ultima { background: var(--ty-primary); color: #fff; }
.el2-page .el2-pie svg { color: var(--ty-primary); }
.el2-page .el2-search { background: #fffcf8; border-color: #e3d3c6; }
.el2-page .el2-search::-webkit-search-cancel-button { filter: none; }