/* ============================================================================
   sf-ui.css -- Sistema visual unico de SellerFlow
   19 ago 2026

   UN solo fichero para los 5 modulos del panel: Repricer (/), Overview,
   Board, ShippyFlow y Contabilidad. Antes cada uno traia su propia paleta,
   su propia tipografia y su propio estilo de tabla; se notaba que eran
   modulos distintos pegados.

   Se carga SIEMPRE como ultimo <link> del <head>, despues del <style> propio
   de cada pagina, para ganar la cascada sin tener que borrar nada de lo que
   ya habia. Esto es solo imagen: no cambia ni un dato, ni una ruta, ni una
   funcion.

   Lo que resuelve, por capas:
     1. TOKENS      la paleta de marca (turquesa #14b8a6 de sellerflow.pro)
     2. BASE        una sola tipografia y un solo fondo
     3. CHROME      cabecera, menu principal y menu lateral identicos
     4. COMPONENTES tablas, tarjetas, botones, formularios, KPIs, badges
     5. LEGADO      neutraliza los colores sueltos de cada modulo
   ========================================================================== */


/* ---------------------------------------------------------------------------
   1. TOKENS
   La marca de la web publica es turquesa sobre azul muy oscuro. El panel
   usaba indigo (#6366f1, #4f46e5, #5b4df7, #5144d8: cuatro morados distintos)
   y Contabilidad una paleta ajena entera. Aqui hay un solo juego de valores.
--------------------------------------------------------------------------- */
:root{
  /* superficies */
  --sf-bg:#0b1120;          /* fondo de pagina */
  --sf-chrome:#111c31;      /* cabecera y menu lateral */
  --sf-surface:#141f36;     /* tarjetas y paneles */
  --sf-surface-2:#1b2942;   /* hover, filas alternas, campos */
  --sf-surface-3:#24344f;   /* pulsado, pills inactivas */
  --sf-line:#25344d;        /* bordes */
  --sf-line-soft:#1b2740;   /* separadores de tabla */

  /* texto */
  --sf-text:#e8eef7;
  --sf-text-dim:#94a3b8;
  /* EL TENUE NO LLEGABA (4 sep 2026). #64748b daba 3,96:1 sobre el fondo de
     pagina y 3,45:1 sobre un panel: por debajo del 4,5:1 que pide el texto
     normal. Medido en el navegador, es la causa de la mayoria de los textos
     flojos del tema OSCURO -- "Salir", los titulos de grupo del menu, las
     unidades de los tiles. Este tono da 5,97:1 y 5,21:1 y sigue siendo,
     visiblemente, el gris de segundo plano. */
  --sf-text-faint:#8492a8;

  /* marca */
  --sf-brand:#14b8a6;
  --sf-brand-hi:#2dd4bf;
  --sf-brand-lo:#0d9488;
  --sf-brand-soft:rgba(20,184,166,.13);
  --sf-brand-line:rgba(20,184,166,.34);

  /* semaforo */
  --sf-ok:#22c55e;
  --sf-ok-soft:rgba(34,197,94,.13);
  --sf-warn:#f59e0b;
  --sf-warn-soft:rgba(245,158,11,.13);
  --sf-bad:#ef4444;
  --sf-bad-soft:rgba(239,68,68,.13);
  --sf-info:#38bdf8;
  --sf-info-soft:rgba(56,189,248,.13);

  /* forma */
  --sf-r-sm:6px;
  --sf-r:8px;
  --sf-r-lg:12px;
  --sf-r-pill:999px;
  --sf-shadow:0 1px 2px rgba(0,0,0,.28),0 8px 24px -12px rgba(0,0,0,.5);

  /* medidas del chrome: identicas en los 5 modulos */
  --sf-topbar-h:56px;
  --sf-sidebar-w:220px;

  /* ESCALA DE APILAMIENTO (23 ago 2026) ---------------------------------
     Hasta hoy cada panel se inventaba su numero (el de mercados llevaba un
     9999 escrito a mano) y aun asi salia por DEBAJO de los tiles: no era el
     numero, era que estaba encerrado en la barra. Los numeros viven aqui
     para que el proximo desplegable no tenga que adivinarlos.
       chrome     = cabecera (300) y submenu (290), que ya son sticky
       popover    = lo que un boton despliega: SIEMPRE por encima del chrome
       modal/toast= por encima de todo lo demas
     Un popover solo respeta este numero si NO esta metido dentro de un
     contenedor con overflow o con contexto de apilamiento propio: por eso
     el panel de mercados se saca al <body> al abrirse. */
  --sf-z-chrome:300;
  --sf-z-popover:1000;
  --sf-z-modal:2000;
  --sf-z-toast:3000;

  --sf-font:'Inter','Inter var',-apple-system,BlinkMacSystemFont,'Segoe UI',
            Roboto,'Helvetica Neue',Arial,sans-serif;
  --sf-font-num:'Inter',ui-monospace,'SF Mono','Cascadia Mono',Menlo,monospace;
}

/* Modo claro: lo usa el interruptor que ya tenia el Board (html.light).
   Mismos tokens, otros valores, para que el interruptor no saque al usuario
   del sistema visual.

   CLARO ES CLARO TODO (4 sep 2026) -----------------------------------------
   Hasta hoy `--sf-chrome` se quedaba en #0b1120 tambien en claro: era
   deliberado, pero el resultado es que la cabecera, la segunda barra y el
   menu lateral seguian negros con la pagina blanca. Medido con el auditor de
   contraste sobre las seis areas: 23 pantallas con `.topbar` oscura, 15 con
   `.sf-subnav` oscura y 5 con el lateral oscuro. Ahora el chrome tambien
   aclara y el logo cambia al oscuro (ya existia: sellerflow_logo_oscuro.png).

   Y el semaforo se OSCURECE en claro. Los verdes/ambar/rojo de arriba estan
   calculados para leerse sobre #0b1120; sobre blanco daban 1,7:1 (el verde
   #4ade80 aparecia 110 veces solo en el Board). Estos son los mismos colores
   bajados de luminosidad hasta pasar de 4,5:1 sobre blanco. */
html.light,html.sf-light{
  --sf-bg:#f4f6fa;
  --sf-chrome:#ffffff;
  --sf-surface:#ffffff;
  --sf-surface-2:#f1f5f9;
  --sf-surface-3:#e2e8f0;
  --sf-line:#e2e8f0;
  --sf-line-soft:#eef2f7;
  --sf-text:#0f172a;
  --sf-text-dim:#4a5c78;
  /* 4,40:1 sobre el fondo de pagina, justo por debajo del suelo */
  --sf-text-faint:#5a6a80;

  /* marca y semaforo, recalculados para fondo claro */
  /* #0d9488 se queda en 3,74:1 sobre blanco. Como relleno con texto blanco
     tampoco llegaba (3,74:1 al reves). Este es el mismo teal un paso mas
     oscuro: 5,47:1 en los dos sentidos. En claro coincide con --sf-brand-hi
     a proposito -- entre 5,47 y 5,47 no hay diferencia que defender. */
  --sf-brand:#0f766e;
  --sf-brand-hi:#0f766e;
  --sf-brand-lo:#115e59;
  --sf-brand-soft:rgba(13,148,136,.10);
  --sf-brand-line:rgba(13,148,136,.38);
  --sf-ok:#15803d;
  --sf-ok-soft:rgba(21,128,61,.10);
  --sf-warn:#b45309;
  --sf-warn-soft:rgba(180,83,9,.10);
  --sf-bad:#b91c1c;
  --sf-bad-soft:rgba(185,28,28,.09);
  --sf-info:#0369a1;
  --sf-info-soft:rgba(3,105,161,.10);

  --sf-shadow:0 1px 2px rgba(15,23,42,.06),0 8px 24px -14px rgba(15,23,42,.22);
}


/* ---------------------------------------------------------------------------
   2. BASE
   Antes convivian cuatro familias tipograficas (Inter, -apple-system, Arial y
   sans-serif a secas) y ademas nadie cargaba Inter: la declaraban y caia al
   fallback. Ahora se carga de verdad (el <link> va en cada pagina) y la pila
   es la misma en todas partes.
--------------------------------------------------------------------------- */
html,body{background:var(--sf-bg);color:var(--sf-text)}

body,body *,
input,select,textarea,button,table,th,td{
  font-family:var(--sf-font);
}
/* el monoespaciado deliberado se respeta */
code,pre,kbd,samp,.mono,[style*="font-family:monospace"]{
  font-family:var(--sf-font-num)!important;
}

body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

::selection{background:var(--sf-brand-soft);color:var(--sf-text)}

/* barra de scroll coherente con el resto */
*{scrollbar-width:thin;scrollbar-color:var(--sf-surface-3) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--sf-surface-3);border-radius:var(--sf-r-pill);border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--sf-line);background-clip:content-box}

a{color:var(--sf-brand-hi)}


/* ---------------------------------------------------------------------------
   3. CHROME -- cabecera, menu principal y menu lateral
   El Repricer tenia su propia cabecera y una segunda barra de enlaces a la
   que ademas le faltaba Settings; el Board apilaba dos barras de alturas
   distintas (56 y 52) y Contabilidad otras dos (56 y 48). Aqui las medidas
   son unicas.
--------------------------------------------------------------------------- */
.topbar{
  background:var(--sf-chrome)!important;
  border-bottom:1px solid var(--sf-line)!important;
  height:var(--sf-topbar-h)!important;
  min-height:var(--sf-topbar-h);
  padding:0 20px!important;
  display:flex;align-items:center;gap:20px;
  position:sticky;top:0;z-index:300;
}
.topbar-title{
  font-size:13px;font-weight:700;color:var(--sf-text-dim);
  letter-spacing:.02em;
}

.sf-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.sf-logo-img{
  background-image:url('/static/logos/sellerflow_logo_blanco.png');
  background-size:contain;background-position:left center;background-repeat:no-repeat;
  width:132px!important;height:34px!important;
}
html.light .sf-logo-img,html.sf-light .sf-logo-img{
  /* la cabecera ya no es oscura en claro: el logo blanco se quedaba invisible
     sobre blanco (se veia en la pantalla de login) */
  background-image:url('/static/logos/sellerflow_logo_oscuro.png');
}

/* Menu principal: los 5 modulos, mismo orden, mismo aspecto, en todas partes */
.sf-nav{display:flex;align-items:center;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.sf-nav::-webkit-scrollbar{display:none}
.sf-nav a{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--sf-text-dim)!important;text-decoration:none;
  padding:7px 13px!important;border-radius:var(--sf-r)!important;
  font-size:13px!important;font-weight:600!important;
  white-space:nowrap;flex-shrink:0;
  border:1px solid transparent;
  transition:background .14s,color .14s,border-color .14s;
}
.sf-nav a:hover{background:var(--sf-surface-2)!important;color:var(--sf-text)!important}
.sf-nav a.active{
  background:var(--sf-brand-soft)!important;
  color:var(--sf-brand-hi)!important;
  border-color:var(--sf-brand-line)!important;
}
.sf-nav a.soon{opacity:.38;pointer-events:none}
.sf-nav .sf-ico{font-size:13px;line-height:1;opacity:.9}

/* zona derecha de la cabecera: usuario, tema, salir */
.sf-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
.sf-user{font-size:12px;color:var(--sf-text-dim);white-space:nowrap}
.sf-user strong{color:var(--sf-text);font-weight:700}
.sf-logout,a.sf-logout{
  color:var(--sf-text-faint)!important;text-decoration:none;
  font-size:12px;font-weight:600;padding:6px 10px;border-radius:var(--sf-r);
}
.sf-logout:hover{background:var(--sf-bad-soft);color:var(--sf-bad)!important}

/* interruptor de tema: un solo aspecto en los 5 modulos */
.sf-theme,#themeToggle,#sfDarkBtn,#dkBtn{
  background:var(--sf-surface-2)!important;
  color:var(--sf-text-dim)!important;
  border:1px solid var(--sf-line)!important;
  border-radius:var(--sf-r)!important;
  padding:6px 12px!important;
  font-size:12px!important;font-weight:600!important;
  cursor:pointer;line-height:1.4;
}
.sf-theme:hover,#themeToggle:hover,#sfDarkBtn:hover,#dkBtn:hover{
  background:var(--sf-surface-3)!important;color:var(--sf-text)!important;
}

/* Submenu del modulo: la segunda fila (pestanas del Board, secciones de
   Contabilidad). Antes cada modulo la resolvia a su manera. */
.sf-subnav{
  display:flex;align-items:center;gap:2px;
  background:var(--sf-chrome);
  border-bottom:1px solid var(--sf-line);
  padding:0 20px;height:44px;
  position:sticky;top:var(--sf-topbar-h);z-index:290;
  overflow-x:auto;scrollbar-width:none;
}
.sf-subnav::-webkit-scrollbar{display:none}
.sf-subnav a,.sf-subnav .sf-subitem{
  color:var(--sf-text-dim);text-decoration:none;
  padding:6px 12px;border-radius:var(--sf-r-sm);
  font-size:12.5px;font-weight:600;white-space:nowrap;flex-shrink:0;
}
.sf-subnav a:hover{background:var(--sf-surface-2);color:var(--sf-text)}
.sf-subnav a.active{background:var(--sf-brand-soft);color:var(--sf-brand-hi)}
.sf-subnav-right{margin-left:auto;display:flex;gap:8px;align-items:center}

/* pestanas internas (Board: Tiles/Chart/P&L/...) */
.ttab{
  background:transparent!important;border:1px solid transparent!important;
  color:var(--sf-text-dim)!important;
  padding:6px 12px!important;border-radius:var(--sf-r-sm)!important;
  font-size:12.5px!important;font-weight:600!important;cursor:pointer;
}
.ttab:hover{background:var(--sf-surface-2)!important;color:var(--sf-text)!important}
.ttab.active{
  background:var(--sf-brand-soft)!important;color:var(--sf-brand-hi)!important;
  border-color:var(--sf-brand-line)!important;
}

/* Menu lateral: mismo ancho, mismo item, mismos titulos de grupo en el
   Repricer, el Board y ShippyFlow. */
.sb,nav.sb,aside.sb{
  background:var(--sf-chrome)!important;
  border-right:1px solid var(--sf-line)!important;
  width:var(--sf-sidebar-w);
}
.sb-logo,.sb .logo{
  color:var(--sf-text)!important;font-size:13px;font-weight:800;
  letter-spacing:.01em;
}
.sb-group-title,div.sb-group[onclick],.nav>div:not([class]){
  color:var(--sf-text-faint)!important;
  font-size:10.5px!important;font-weight:800!important;
  text-transform:uppercase;letter-spacing:.09em!important;
}
/* el contenedor de grupo no impone nada a sus hijos */
.sb-group:not([onclick]){text-transform:none}
.sb-item,.ni{text-transform:none!important;letter-spacing:0!important}
.sb-group-title:hover{background:var(--sf-surface-2)!important;color:var(--sf-text-dim)!important}
.sb-group-title.open{color:var(--sf-brand)!important}

.sb-item,.ni{
  display:block;
  color:var(--sf-text-dim)!important;text-decoration:none;
  padding:7px 12px!important;margin:1px 6px!important;
  border-radius:var(--sf-r)!important;
  font-size:13px!important;font-weight:500!important;
  border-left:2px solid transparent;
  transition:background .12s,color .12s;
}
.sb-item:hover,.ni:hover{background:var(--sf-surface-2)!important;color:var(--sf-text)!important}
.sb-item.active,.ni.active{
  background:var(--sf-brand-soft)!important;
  color:var(--sf-brand-hi)!important;
  border-left-color:var(--sf-brand)!important;
  font-weight:600!important;
}
.sb-badge{
  background:var(--sf-brand)!important;color:#04211d!important;
  border-radius:var(--sf-r-pill);padding:1px 7px;
  font-size:10px;font-weight:800;margin-left:6px;
}


/* ---------------------------------------------------------------------------
   4. COMPONENTES
   Habia cinco estilos de tabla distintos (Contabilidad llegaba a poner la
   cabecera en negro sobre blanco) y cuatro de boton. Aqui hay uno de cada.
--------------------------------------------------------------------------- */

/* --- tarjetas y paneles --- */
.card,.section,.pn,.panel,.kpi,.box{
  background:var(--sf-surface)!important;
  border:1px solid var(--sf-line)!important;
  border-radius:var(--sf-r-lg)!important;
}
.card-title,.section-title,.pt3,.h1{
  color:var(--sf-text)!important;
  font-size:14px;font-weight:700;letter-spacing:.01em;
}
.section-header{border-bottom:1px solid var(--sf-line-soft)}

/* --- KPI: la misma cifra al mismo tamano en los 5 modulos --- */
.kpi-label,.kl{
  color:var(--sf-text-faint)!important;
  font-size:11px!important;font-weight:700!important;
  text-transform:uppercase;letter-spacing:.06em;
}
.kpi-value,.kv,.val{
  color:var(--sf-text)!important;
  font-size:26px!important;font-weight:800!important;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.kpi-sub,.kp{color:var(--sf-text-dim)!important;font-size:12px!important}
.ki.hot{border-color:var(--sf-brand-line)!important}

/* --- tablas --- */
table{border-collapse:collapse;width:100%}
th{
  background:var(--sf-surface-2)!important;
  color:var(--sf-text-dim)!important;
  font-size:11px!important;font-weight:700!important;
  text-transform:uppercase;letter-spacing:.06em;
  text-align:left;padding:9px 12px!important;
  border-bottom:1px solid var(--sf-line)!important;
  white-space:nowrap;
}
td{
  color:var(--sf-text)!important;
  font-size:13px!important;
  padding:9px 12px!important;
  border-bottom:1px solid var(--sf-line-soft)!important;
  vertical-align:middle;
}
tbody tr:hover>td{background:var(--sf-surface-2)!important}
td.num,td[align="right"],th[align="right"]{font-variant-numeric:tabular-nums}

/* --- botones --- */
.btn,.btn-primary,button.primary,.sf-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--sf-brand)!important;color:#04211d!important;
  border:1px solid var(--sf-brand)!important;
  border-radius:var(--sf-r)!important;
  padding:8px 16px!important;
  font-size:13px!important;font-weight:700!important;
  text-decoration:none;cursor:pointer;line-height:1.35;
  transition:background .14s,border-color .14s,transform .06s;
}
.btn:hover,.btn-primary:hover,.sf-btn:hover{background:var(--sf-brand-hi)!important;border-color:var(--sf-brand-hi)!important}
.btn:active,.btn-primary:active,.sf-btn:active{transform:translateY(1px)}

.btn-ghost,.btn-secondary,.sf-btn-ghost{
  background:transparent!important;
  color:var(--sf-text-dim)!important;
  border:1px solid var(--sf-line)!important;
  border-radius:var(--sf-r)!important;
  padding:8px 14px!important;
  font-size:13px!important;font-weight:600!important;
  cursor:pointer;text-decoration:none;
}
.btn-ghost:hover,.btn-secondary:hover,.sf-btn-ghost:hover{
  background:var(--sf-surface-2)!important;color:var(--sf-text)!important;
  border-color:var(--sf-surface-3)!important;
}
.btn-danger,.sf-btn-danger{
  background:var(--sf-bad-soft)!important;color:var(--sf-bad)!important;
  border:1px solid rgba(239,68,68,.34)!important;
  border-radius:var(--sf-r)!important;padding:8px 14px!important;
  font-size:13px!important;font-weight:700!important;cursor:pointer;
}
.btn-danger:hover,.sf-btn-danger:hover{background:var(--sf-bad)!important;color:#fff!important}

/* --- formularios ---
   `input:not([type])` NO es un adorno (4 sep 2026). La lista de abajo iba por
   tipos, y un <input> sin atributo `type` no casa con `input[type=text]`: se
   quedaba con el blanco por defecto del navegador. Hay 60 asi en las seis
   areas -- 28 en el Board, 18 en ShippyFlow, 7 en el Repricer, 5 en
   Contabilidad, 2 en el Vigilante.

   Se veia de libro en "Nueva Factura" en modo oscuro: los cinco campos SIN
   type (Nº Factura, Proveedor, NIF, Concepto, Forma de Pago) salian blancos y
   los cinco CON type (fecha, numero, select...) salian oscuros, en la misma
   rejilla. Y en el login, USERNAME (sin type) contra PASSWORD (con type). */
input:not([type]),
input[type=text],input[type=number],input[type=date],input[type=search],
input[type=email],input[type=password],input[type=tel],input[type=url],
input[type=month],input[type=week],input[type=time],
input[type=datetime-local],select,textarea,.period-select{
  background:var(--sf-surface-2)!important;
  color:var(--sf-text)!important;
  border:1px solid var(--sf-line)!important;
  border-radius:var(--sf-r)!important;
  padding:8px 12px!important;
  font-size:13px!important;
  outline:none;
}
input::placeholder,textarea::placeholder{color:var(--sf-text-faint)}
input:focus,select:focus,textarea:focus{
  border-color:var(--sf-brand)!important;
  box-shadow:0 0 0 3px var(--sf-brand-soft)!important;
}
label{color:var(--sf-text-dim);font-size:12px;font-weight:600}

/* --- badges y pills de estado --- */
.badge,.pill,.tag,.chip{
  display:inline-flex;align-items:center;gap:5px;
  border-radius:var(--sf-r-pill);padding:2px 9px;
  font-size:11px;font-weight:700;letter-spacing:.01em;
  background:var(--sf-surface-3);color:var(--sf-text-dim);
}
.badge.ok,.pill.ok,.badge-ok{background:var(--sf-ok-soft);color:var(--sf-ok)}
.badge.warn,.pill.warn,.badge-warn{background:var(--sf-warn-soft);color:var(--sf-warn)}
.badge.bad,.pill.bad,.badge-bad{background:var(--sf-bad-soft);color:var(--sf-bad)}
.badge.info,.pill.info{background:var(--sf-info-soft);color:var(--sf-info)}

/* --- avisos --- */
.alert{
  background:var(--sf-bad-soft)!important;
  border:1px solid rgba(239,68,68,.3)!important;
  border-radius:var(--sf-r)!important;
  color:#fca5a5!important;font-size:13px;padding:12px 16px;
}

/* --- ancho de pagina: el mismo en los 5 --- */
.container,.ct{max-width:1560px;margin:0 auto;padding:22px 20px}
/* las tablas anchas (Contabilidad, Libro de Compras) se salian del
   contenedor y quedaban cortadas por la derecha sin manera de llegar */
.container{overflow-x:auto}


/* ---------------------------------------------------------------------------
   5. LEGADO
   Los cuatro morados sueltos y la paleta ajena de Contabilidad, redirigidos
   al turquesa de marca sin tocar el HTML que los declara.
--------------------------------------------------------------------------- */
[style*="#6366f1"],[style*="#5b4df7"],[style*="#4f46e5"],[style*="#5144d8"]{}

/* enlaces y acentos que venian en indigo */
.sb-item[style*="color:#64748b"]{color:var(--sf-text-faint)!important}

/* Contabilidad: cabecera de tabla negra sobre blanco y verde #00b894 */
th[style*="#2d3436"],th[style*="background:#2d3436"]{
  background:var(--sf-surface-2)!important;color:var(--sf-text-dim)!important;
}

/* barra de marca de tres trazos: pasa de naranja/verde/indigo a la gama
   turquesa, para que el simbolo no contradiga a la web publica */
.sf-b1{background:var(--sf-brand-hi)!important}
.sf-b2{background:var(--sf-brand)!important}
.sf-b3{background:var(--sf-brand-lo)!important}

/* estado "en vivo" del Repricer */
.live{color:var(--sf-ok)!important;font-size:11px;font-weight:700;letter-spacing:.04em}

/* cabecera interna del Repricer, para que case con la del resto */
.tb{
  background:var(--sf-chrome)!important;
  border-bottom:1px solid var(--sf-line)!important;
  height:44px!important;padding:0 20px!important;
  position:sticky;top:var(--sf-topbar-h)!important;z-index:290;
  display:flex;align-items:center;gap:12px;
}

/* El Repricer traia el menu lateral pegado al borde superior de la ventana
   (top:0) porque no tenia cabecera propia. Ahora si la tiene, como el resto,
   asi que el lateral empieza donde termina la cabecera. */
body.sf-repricer .sb{
  top:var(--sf-topbar-h)!important;
  background:var(--sf-chrome)!important;
  border-right:1px solid var(--sf-line)!important;
}
body.sf-repricer .sb .logo{
  border-bottom:1px solid var(--sf-line)!important;
  color:var(--sf-text)!important;font-size:13px!important;
  padding:0 12px!important;height:44px;display:flex;align-items:center;gap:8px;
}
body.sf-repricer .sbtog{
  background:transparent;border:none;color:var(--sf-text-faint);
  font-size:15px;cursor:pointer;padding:2px 4px;
}
body.sf-repricer .sbtog:hover{color:var(--sf-text)}
/* titulillos de grupo del lateral del Repricer */
.nst{
  padding:10px 14px 4px;color:var(--sf-text-faint);
  font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;
}
.sb.collapsed .nst{display:none}
/* el pie del lateral */
.sbf{border-top:1px solid var(--sf-line)!important;padding:10px!important}


/* ---------------------------------------------------------------------------
   6. MOVIL
--------------------------------------------------------------------------- */
@media (min-width:1025px){
  /* el boton hamburguesa venia con display:block fijo y se comia el titulo
     del menu lateral en escritorio */
  .sb-toggle{display:none!important}
}
@media (max-width:1024px){
  :root{--sf-sidebar-w:200px}
}
@media (max-width:768px){
  /* La altura fija de la cabecera aplastaba el diseno movil que ya existia
     en sf-movil.css: ahi la barra ENVUELVE a proposito, con el logo en su
     fila y los seis modulos debajo, para verlos todos sin arrastrar. */
  .topbar{
    height:auto!important;min-height:52px;
    padding:6px 12px 8px!important;gap:6px;
    flex-wrap:wrap!important;
  }
  .topbar .sf-logo{flex:0 0 100%!important;justify-content:center!important}
  .sf-logo-img{width:112px!important;height:28px!important;background-position:center!important}
  .sf-nav{flex:1 1 100%!important;flex-wrap:wrap!important;justify-content:center!important;row-gap:3px}
  .sf-nav a{padding:5px 9px!important;font-size:11.5px!important;gap:4px}
  .sf-actions{position:absolute;top:6px;right:10px;gap:6px}
  .sf-user{display:none}
  .sf-theme,#themeToggle,#sfDarkBtn,#dkBtn{padding:4px 8px!important;font-size:11px!important}
  /* El submenu del Board (Tiles/Chart/P&L/...) heredaba las reglas de la
     vieja segunda cabecera y se desparramaba en escalera junto al selector
     de periodo. Aqui va en tres bandas claras: nombre, pestanas y filtros. */
  .sf-subnav{
    height:auto;min-height:40px;top:0;
    flex-wrap:wrap!important;padding:6px 12px!important;row-gap:6px;
  }
  .sf-subnav .topbar-title{flex:0 0 100%!important;text-align:left}
  .sf-subnav .topbar-tabs,.topbar-tabs{
    flex:1 1 100%!important;flex-wrap:nowrap!important;
    overflow-x:auto!important;justify-content:flex-start!important;
    scrollbar-width:none;margin-left:0!important;
  }
  .topbar-tabs::-webkit-scrollbar{display:none}
  .sf-subnav .topbar-right,.topbar-right{
    flex:1 1 100%!important;justify-content:flex-start!important;
    flex-wrap:wrap;gap:6px;
  }
  .container,.ct{padding:16px 12px}
  .kpi-value,.kv,.val{font-size:22px!important}
  th,td{padding:8px 10px!important}
  /* El boton que abre el menu lateral estaba clavado arriba a la izquierda
     y, con la cabecera envuelta en dos filas, se montaba sobre los enlaces.
     Pasa a boton flotante abajo, donde no tapa nada y se alcanza con el
     pulgar. */
  .sb-toggle{
    top:auto!important;bottom:18px!important;left:14px!important;
    background:var(--sf-brand)!important;color:#08131f!important;
    border:none!important;border-radius:var(--sf-r-pill)!important;
    width:44px;height:44px;font-size:17px!important;
    box-shadow:0 6px 18px rgba(0,0,0,.45)!important;z-index:400!important;
  }
  .topbar{padding-left:12px!important}
}


/* ---------------------------------------------------------------------------
   7. REPRICER: botones
   La pantalla del Repricer llegaba a mostrar siete colores de boton a la vez
   (verde, naranja, rojo, violeta, turquesa, dorado y blanco) sin que el color
   dijera nada. Se reduce a tres papeles: accion principal, accion peligrosa
   y todo lo demas en secundario. Los textos y las acciones no cambian.
--------------------------------------------------------------------------- */
.fbt{
  background:transparent!important;
  border:1px solid var(--sf-line)!important;
  color:var(--sf-text-dim)!important;
  border-radius:var(--sf-r)!important;
  padding:8px 12px!important;font-size:12px!important;font-weight:600!important;
}
.fbt:hover{background:var(--sf-surface-2)!important;color:var(--sf-text)!important}
.fbt.active{
  background:var(--sf-brand-soft)!important;color:var(--sf-brand-hi)!important;
  border-color:var(--sf-brand-line)!important;font-weight:700!important;
}

.ab,.spb{
  background:transparent!important;
  border:1px solid var(--sf-line)!important;
  color:var(--sf-text-dim)!important;
  border-radius:var(--sf-r)!important;
  padding:8px 14px!important;font-size:12px!important;font-weight:700!important;
}
.ab:hover,.spb:hover{background:var(--sf-surface-2)!important;color:var(--sf-text)!important;opacity:1}
/* accion principal: la que de verdad mueve precios */
.ab[data-action="apply_recommended_prices"],
.ab[data-action="push_safe_prices"]{
  background:var(--sf-brand)!important;border-color:var(--sf-brand)!important;
  color:#04211d!important;
}
.ab[data-action="apply_recommended_prices"]:hover,
.ab[data-action="push_safe_prices"]:hover{background:var(--sf-brand-hi)!important;color:#04211d!important}
/* accion peligrosa: parar el repricer */
.ab[data-action="pause_repricing"]{
  background:var(--sf-bad-soft)!important;color:var(--sf-bad)!important;
  border-color:rgba(239,68,68,.34)!important;
}
.ab[data-action="pause_repricing"]:hover{background:var(--sf-bad)!important;color:#fff!important}
/* el badge de la cola de revision */
#rvqBtn{background:transparent!important}
#rvqBadge{background:var(--sf-brand)!important;color:#04211d!important;font-weight:800}

.bs2{
  background:var(--sf-brand)!important;color:#04211d!important;
  border:1px solid var(--sf-brand)!important;border-radius:var(--sf-r)!important;
}
.bo2{
  background:transparent!important;color:var(--sf-text-dim)!important;
  border:1px solid var(--sf-line)!important;border-radius:var(--sf-r)!important;
}
.bo2:hover{background:var(--sf-surface-2)!important;color:var(--sf-text)!important}
.sx,.ss3{
  background:var(--sf-surface-2)!important;color:var(--sf-text)!important;
  border:1px solid var(--sf-line)!important;
}
.tw{border-color:var(--sf-line)!important;border-radius:var(--sf-r-lg)!important}


/* ---------------------------------------------------------------------------
   8. SHIPPYFLOW
   Era el unico modulo, con Contabilidad, que se quedaba en claro. Su hoja
   propia declara body/main/card/sb en blanco; aqui se traen al mismo modo y
   a los mismos tokens que los demas. Ni un texto ni una accion cambian.
--------------------------------------------------------------------------- */
body{background:var(--sf-bg)!important;color:var(--sf-text)!important}
.wrap{background:var(--sf-bg)}
.main{background:var(--sf-bg)!important}
.sb{background:var(--sf-chrome)!important;border-right:1px solid var(--sf-line)!important}
.card h2{color:var(--sf-text)!important}
.card p,.sub{color:var(--sf-text-dim)!important}
.kpi .lbl{color:var(--sf-text-faint)!important}
.kpi .val{color:var(--sf-text)!important}
.kpi.accent .val{color:var(--sf-brand-hi)!important}
.kpi.green .val{color:var(--sf-ok)!important}
.h1{color:var(--sf-text)!important;font-size:20px!important;font-weight:800!important}

/* etiquetas de estado: mismas parejas fondo/texto en todo el panel */
.soon-tag,.b-pen{background:var(--sf-warn-soft)!important;color:var(--sf-warn)!important;border-radius:var(--sf-r-sm)!important}
.b-rec{background:var(--sf-ok-soft)!important;color:var(--sf-ok)!important;border-radius:var(--sf-r-sm)!important}
.b-inc,.b-err{background:var(--sf-bad-soft)!important;color:var(--sf-bad)!important;border-radius:var(--sf-r-sm)!important}
.b-env,.b-ok{background:var(--sf-info-soft)!important;color:var(--sf-info)!important;border-radius:var(--sf-r-sm)!important}

/* los titulos de grupo del lateral iban unos en mayusculas y otros no */
.sb .sb-group{
  color:var(--sf-text-faint)!important;
  font-size:10.5px!important;font-weight:800!important;
  text-transform:uppercase!important;letter-spacing:.09em!important;
  padding:14px 12px 6px!important;cursor:pointer;
}
.sb .sb-group:hover{color:var(--sf-text-dim)!important}

/* ---------------------------------------------------------------------------
   9. CONTABILIDAD
   Traia una paleta entera de otro sistema (gris marengo, verde menta, azul
   electrico) y las cabeceras de tabla en negro sobre blanco.
--------------------------------------------------------------------------- */
.sf-subnav .btn{padding:6px 12px!important;font-size:12px!important}


/* ---------------------------------------------------------------------------
   10. TEXTO OSCURO HEREDADO
   Los ficheros que pintan las tablas (board.js, shippyflow.js) escriben el
   color en el propio elemento, y venian de cuando esos paneles eran claros:
   nombres de cliente y fechas en #0f172a sobre un fondo que ahora es oscuro,
   es decir, ilegibles.

   No se tocan esos hex en el JS a proposito: los MISMOS ficheros generan
   albaranes, etiquetas y la pagina publica de seguimiento, que se ven sobre
   papel o sobre fondo blanco y ahi el texto oscuro es el correcto. Esas
   paginas no cargan esta hoja, asi que la correccion se queda dentro del
   panel. Se excluye cualquier elemento que declare su propio fondo claro
   (badges, chips), porque ahi el texto oscuro tambien es lo que toca.
--------------------------------------------------------------------------- */
[style*="color:#0f172a"]:not([style*="background:#f"]):not([style*="background:#e"]):not([style*="background:#d"]):not([style*="background:#c"]):not([style*="background:#b"]):not([style*="background:white"]):not([style*="background:#fff"]),
[style*="color:#0b1120"]:not([style*="background:#f"]):not([style*="background:#e"]):not([style*="background:#d"]):not([style*="background:#c"]):not([style*="background:#b"]):not([style*="background:white"]):not([style*="background:#fff"]){
  color:var(--sf-text)!important;
}
[style*="color:#1e293b"]:not([style*="background:#f"]):not([style*="background:#e"]):not([style*="background:#d"]):not([style*="background:#c"]):not([style*="background:white"]),
[style*="color:#141f36"]:not([style*="background:#f"]):not([style*="background:#e"]):not([style*="background:#d"]):not([style*="background:#c"]):not([style*="background:white"]),
[style*="color:#334155"]:not([style*="background:#f"]):not([style*="background:#e"]):not([style*="background:#d"]):not([style*="background:#c"]):not([style*="background:white"]),
[style*="color:#25344d"]:not([style*="background:#f"]):not([style*="background:#e"]):not([style*="background:#d"]):not([style*="background:#c"]):not([style*="background:white"]),
[style*="color:#374151"]:not([style*="background:#f"]):not([style*="background:#e"]):not([style*="background:#d"]):not([style*="background:#c"]):not([style*="background:white"]){
  color:var(--sf-text-dim)!important;
}
/* botones-icono sin color propio: heredaban el negro del navegador */
.main button[style*="background:none"],.main button[style*="background:transparent"],
.card button[style*="background:none"],.card button[style*="background:transparent"]{
  color:var(--sf-text-dim)!important;
}


/* ---------------------------------------------------------------------------
   11. CONTRASTE SOBRE COLOR
   Medido con un recorrido automatico por las 10 paginas del panel: habia
   ~3.100 textos por debajo de 3:1. Casi todos eran el mismo error repetido:
   texto BLANCO sobre un color saturado y claro (el turquesa de marca, el
   ambar de aviso, el azul de informacion). Sobre esos fondos el texto tiene
   que ser oscuro; el blanco solo funciona sobre los tonos profundos.
--------------------------------------------------------------------------- */
[style*="background:#14b8a6;"],[style*="background:#14b8a6\""],
[style*="background:#2dd4bf;"],[style*="background:#2dd4bf\""],
[style*="background:#38bdf8;"],[style*="background:#38bdf8\""],
[style*="background:#10b981;"],[style*="background:#10b981\""],
[style*="background:#22c55e;"],[style*="background:#22c55e\""],
[style*="background:#f59e0b;"],[style*="background:#f59e0b\""],
[style*="background:#fbbf24;"],[style*="background:#fbbf24\""],
[style*="background:#a29bfe;"],[style*="background:#a29bfe\""],
[style*="background:#94a3b8;"],[style*="background:#94a3b8\""],
[style*="background:#f97316;"],[style*="background:#f97316\""],
[style*="background:#ff8a00;"],[style*="background:#ff8a00\""],
[style*="background:#4ade80;"],[style*="background:#5eead4;"],
.am-btn.am-auto,.btn-save,.fba,.fbm,.apex,.bb-fba,.bb-fba_,
.am-apex,.es-apex,.am-auto,.es-auto{
  color:#08131f!important;
}
[style*="background:#14b8a6;"] *,[style*="background:#2dd4bf;"] *,
[style*="background:#38bdf8;"] *,[style*="background:#10b981;"] *,
[style*="background:#f59e0b;"] *,[style*="background:#94a3b8;"] *{
  color:#08131f!important;
}

/* etiquetas de estado que traian el par "verde sobre verde muy claro":
   el fondo pasa al tinte oscuro del sistema y el texto se lee */
[style*="background:#dcfce7"],[style*="background:#d1fae5"]{background:var(--sf-ok-soft)!important;color:var(--sf-ok)!important;border-color:rgba(34,197,94,.3)!important}
[style*="background:#fef3c7"],[style*="background:#fff3cd"]{background:var(--sf-warn-soft)!important;color:var(--sf-warn)!important;border-color:rgba(245,158,11,.3)!important}
[style*="background:#fee2e2"],[style*="background:#f8d7da"]{background:var(--sf-bad-soft)!important;color:var(--sf-bad)!important;border-color:rgba(239,68,68,.3)!important}
[style*="background:#dbeafe"]{background:var(--sf-info-soft)!important;color:var(--sf-info)!important}

/* la tarjeta KPI destacada del Repricer tenia fondo verde muy claro y la
   etiqueta en gris medio: sobre el verde oscuro de ahora no se leia */
.ki.hot{background:var(--sf-brand-soft)!important;border-color:var(--sf-brand-line)!important}
.ki.hot .kl{color:var(--sf-text-dim)!important}
.kl{color:var(--sf-text-faint)!important}
.pgsa,.pgsz.active{background:var(--sf-brand)!important;color:#08131f!important}
.live{background:transparent!important}
.pgsz,.ap2{background:var(--sf-surface-2)!important;color:var(--sf-text-dim)!important}
.pgsz.active{background:var(--sf-brand)!important;color:#08131f!important}
/* el gris mas oscuro de la escala no se lee sobre las superficies del panel */
[style*="color:#475569"]:not([style*="background:#f"]):not([style*="background:#e"]):not([style*="background:#d"]):not([style*="background:white"]),
[style*="color:#64748b"][class*="tile-item"],.tile-item-label{
  color:var(--sf-text-faint)!important;
}
/* #8ba3bd estaba escrito a mano y solo vale sobre azul oscuro: en claro daba
   2,60:1 en las 30 etiquetas de los tiles del Board. */
.tile-item-label{color:var(--sf-text-faint)!important}

/* restos de fondo claro dentro de paneles que ya son oscuros */
[style*="background:#f8fafc"],[style*="background:#f1f5f9"],
[style*="background:#f0fdf8"],[style*="background:#eef2ff"],
[style*="background:#e6fbf7"]{
  background:var(--sf-surface-2)!important;
  border-color:var(--sf-line)!important;
}
[style*="background:#f8fafc"] *,[style*="background:#f1f5f9"] *,
[style*="background:#f0fdf8"] *{color:var(--sf-text-dim)!important}
.pgc{background:var(--sf-surface-2)!important;color:var(--sf-text-dim)!important;border-color:var(--sf-line)!important}
/* el bloque de estado del pie del menu lateral del Repricer */
.sbf>div:first-child{
  background:var(--sf-ok-soft)!important;border:1px solid rgba(34,197,94,.3)!important;
}
.sbf>div:first-child div{color:var(--sf-ok)!important}

/* ============================================================
   ETIQUETA FBA / FBM — UNA SOLA DEFINICION PARA LOS DOS MODULOS
   (19 ago 2026)

   El Repricer marca el canal con `.fba` / `.fbm`; el Board, que se escribio
   aparte, con `.badge badge-fba` / `.badge badge-fbm`. Los colores que
   declaraba cada uno ya eran los MISMOS (#ff8a00 y #2563eb), asi que no habia
   que inventar nada: solo hacer que una misma regla sirva a los dos nombres.

   POR QUE EL BOARD SE VEIA GRIS. No era que le faltara la etiqueta -- la
   pintaba en sus cinco tablas. Lo que pasaba es que sus badges llevan tambien
   la clase generica `.badge`, y la regla `.badge{background:var(--sf-surface-3)}`
   de mas arriba en ESTE fichero tiene la misma especificidad que `.badge-fba`
   pero se carga DESPUES del <style> de board.html. A igual especificidad gana
   la ultima: FBA y FBM salian los dos con el mismo gris #24344f y la
   distincion desaparecia. Efecto colateral de la unificacion visual de hoy.

   El Repricer no se vio afectado porque `.fba`/`.fbm` no son `.badge`.

   TEXTO EN BLANCO. La lista de arriba que fuerza `color:#08131f` para leer
   sobre fondos claros incluia `.fba`,`.fbm` y `.bb-fba`: dejaba casi-negro
   sobre azul #2563eb, que se queda en 3,3:1 y no llega al minimo de 4,5:1.
   Blanco sobre ese azul da 5,9:1. Es ademas el color que declaraban los dos
   modulos en su origen. `.bb-fba_` NO entra aqui: su fondo es gris claro y ahi
   el texto oscuro es el correcto.

   Va al final del fichero a proposito: mas tarde + !important gana sin tener
   que editar la regla agrupada de arriba, que sirve a otras muchas etiquetas.
   ============================================================ */
.fba,.badge-fba,.bb-fba,
.fbm,.badge-fbm,.bb-fbm{
  display:inline-block!important;
  border-radius:3px!important;
  padding:2px 6px!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:0!important;
  color:#fff!important;
}
.fba,.badge-fba,.bb-fba{background:#ff8a00!important}
.fbm,.badge-fbm,.bb-fbm{background:#2563eb!important}

/* ============================================================
   SELECTOR DE MERCADOS DEL BOARD — UN SOLO BOTON Y SU PANEL
   (22 ago 2026, Elias)

   Antes las once banderas, el resumen y los botones Todos/Ninguno/Aplicar
   iban sueltos por la barra: dos lineas de cabecera y colores escritos a
   mano (#0b1120, #e2e8f0) que en tema claro quedaban negro sobre negro.
   Aqui esta TODO el aspecto del desplegable, con los tokens del sistema,
   asi que claro y oscuro salen solos y board.html no lleva ni un estilo.

   El punto naranja del boton no es decoracion: es la unica pista de que
   lo que se esta mirando NO es el reparto de mercados de siempre.
   ============================================================ */
.sf-mp{position:relative;display:inline-block}

.sf-mp-btn{
  display:inline-flex;align-items:center;gap:7px;
  height:32px;padding:0 11px;
  background:var(--sf-surface);
  border:1px solid var(--sf-line);
  border-radius:var(--sf-r);
  color:var(--sf-text);
  font-family:var(--sf-font);font-size:12px;font-weight:600;
  line-height:1;cursor:pointer;white-space:nowrap;
  transition:background .12s,border-color .12s;
}
.sf-mp-btn:hover{background:var(--sf-surface-2);border-color:var(--sf-surface-3)}
.sf-mp-btn:focus-visible{outline:2px solid var(--sf-brand);outline-offset:2px}
.sf-mp-btn .sf-mp-caret{font-size:10px;color:var(--sf-text-faint)}
/* seleccion distinta de la de por defecto: otro tono + punto */
.sf-mp-btn.sf-mp-off{
  background:var(--sf-warn-soft);
  border-color:var(--sf-warn);
  color:var(--sf-warn);
}
.sf-mp-btn.sf-mp-off .sf-mp-caret{color:var(--sf-warn)}
.sf-mp-dot{
  width:7px;height:7px;border-radius:var(--sf-r-pill);
  background:var(--sf-warn);flex:0 0 auto;
}

.sf-mp-panel{
  position:absolute;right:0;top:calc(100% + 6px);z-index:var(--sf-z-popover);
  width:320px;max-width:calc(100vw - 24px);
  background:var(--sf-surface);
  border:1px solid var(--sf-line);
  border-radius:var(--sf-r-lg);
  box-shadow:var(--sf-shadow);
  font-family:var(--sf-font);
  overflow:hidden;
}
.sf-mp-panel[hidden]{display:none}

.sf-mp-head{
  display:flex;gap:6px;padding:9px 10px;
  border-bottom:1px solid var(--sf-line);
  background:var(--sf-surface-2);
}
.sf-mp-mini{
  flex:1;padding:5px 6px;
  background:var(--sf-surface);
  border:1px solid var(--sf-line);
  border-radius:var(--sf-r-sm);
  color:var(--sf-text-dim);
  font-family:var(--sf-font);font-size:11px;font-weight:600;
  cursor:pointer;white-space:nowrap;
}
.sf-mp-mini:hover{background:var(--sf-surface-3);color:var(--sf-text)}
.sf-mp-mini:focus-visible{outline:2px solid var(--sf-brand);outline-offset:1px}

.sf-mp-list{max-height:min(46vh,340px);overflow-y:auto;padding:5px 4px}

.sf-mp-row{
  display:flex;align-items:center;gap:9px;
  padding:6px 8px;border-radius:var(--sf-r-sm);
  color:var(--sf-text);font-size:13px;cursor:pointer;
}
.sf-mp-row:hover{background:var(--sf-surface-2)}
.sf-mp-row input{cursor:pointer;accent-color:var(--sf-brand);margin:0;flex:0 0 auto}
.sf-mp-row input:focus-visible{outline:2px solid var(--sf-brand);outline-offset:2px}
.sf-mp-flag{font-size:15px;line-height:1;flex:0 0 auto}
.sf-mp-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sf-mp-venta{
  font-family:var(--sf-font-num);font-size:12px;
  color:var(--sf-text-dim);white-space:nowrap;flex:0 0 auto;
}
.sf-mp-venta.sf-mp-cero{color:var(--sf-text-faint)}

/* Los mercados que la configuracion deja FUERA del P&L van al final,
   detras de una linea, y con su motivo a la vista. Se pueden marcar. */
.sf-mp-sep{
  margin:6px 8px 4px;padding-top:7px;
  border-top:1px solid var(--sf-line);
  font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--sf-text-faint);
}
.sf-mp-row.sf-mp-fuera .sf-mp-name{color:var(--sf-warn)}

.sf-mp-foot{
  display:flex;align-items:center;gap:8px;
  padding:9px 10px;border-top:1px solid var(--sf-line);
  background:var(--sf-surface-2);
}
.sf-mp-count{flex:1;font-size:11px;color:var(--sf-text-dim)}
.sf-mp-apply{
  padding:6px 16px;border:none;border-radius:var(--sf-r-sm);
  background:var(--sf-brand);color:#062b27;
  font-family:var(--sf-font);font-size:12px;font-weight:800;cursor:pointer;
}
.sf-mp-apply:hover{background:var(--sf-brand-hi)}
.sf-mp-apply:focus-visible{outline:2px solid var(--sf-brand-hi);outline-offset:2px}

/* La etiqueta de contexto: fuera del boton, encima de los tiles.
   Es la que impide leer un numero sin saber que paises lleva dentro. */
.sf-mp-ctx{
  padding:2px 0 10px;
  font-size:11px;font-weight:600;color:var(--sf-text-faint);
}
.sf-mp-ctx.sf-mp-ctx-off{color:var(--sf-warn)}
.sf-mp-ctx:empty{display:none}

/* EL PANEL SE SACA AL <body> AL ABRIRSE (23 ago 2026) -------------------
   POR QUE. El boton vive en `.sf-subnav`, que es una barra de 44px de alto
   con `overflow-x:auto`. En CSS, poner un eje distinto de `visible` obliga
   al otro a pasar de `visible` a `auto`: la barra recortaba el panel por
   arriba y por abajo y solo asomaba la PRIMERA fila -- las otras diez
   quedaban detras de la tarjeta de los tiles. Subir el z-index no arreglaba
   nada (ya iba con 9999): estaba ENCERRADO, no debajo. Y de propina la
   barra es `position:sticky` con `z-index:290`, o sea un contexto de
   apilamiento propio, asi que ese 9999 nunca llego a competir con la
   pagina: valia 290.

   COMO. Al abrirlo, el JS lo mueve a <body> y lo posiciona con
   `position:fixed` bajo el boton, recolocandolo al hacer scroll y al
   cambiar el tamano de la ventana. Fuera de la barra ya no hay quien lo
   recorte ni contexto que lo encierre.

   El alto lo fija el JS segun el hueco que quede en pantalla; la lista
   crece o encoge dentro y hace scroll ELLA, para que la cabecera y el pie
   con "Aplicar" no se pierdan nunca. */
.sf-mp-panel.sf-mp-portal{
  position:fixed;right:auto;top:0;left:0;
  z-index:var(--sf-z-popover);
  display:flex;flex-direction:column;
  max-height:calc(100vh - 16px);
  overscroll-behavior:contain;
}
.sf-mp-panel.sf-mp-portal[hidden]{display:none}
.sf-mp-panel.sf-mp-portal .sf-mp-head,
.sf-mp-panel.sf-mp-portal .sf-mp-foot{flex:0 0 auto}
.sf-mp-panel.sf-mp-portal .sf-mp-list{
  flex:1 1 auto;min-height:0;max-height:none;
  -webkit-overflow-scrolling:touch;
}

/* En movil el panel no puede salirse: se ancla a la derecha del boton y se
   queda dentro del ancho de pantalla. `right:0` + este tope bastan; no hace
   falta sacarlo de flujo con position:fixed, que rompia el anclaje al boton. */
@media (max-width:640px){
  .sf-mp-panel{width:min(300px,calc(100vw - 20px))}
  .sf-mp-list{max-height:min(50vh,300px)}
}


/* ---------------------------------------------------------------------------
   10. TEMA COMPLETO -- lo que se quedaba del color contrario
   4 sep 2026

   Esta seccion sale de recorrer las seis areas (Overview, Board, Repricer,
   ShippyFlow, Contabilidad y Vigilante) en claro y en oscuro con un auditor
   que lee el estilo YA CALCULADO de cada elemento del DOM y mide el
   contraste real contra el fondo que le toca. Cada regla de abajo tapa un
   patron que se repetia en varias pantallas a la vez; nada de esto se ha
   arreglado pantalla por pantalla.
--------------------------------------------------------------------------- */

/* --- BOTONES SIN ESTILO PROPIO -----------------------------------------
   Un <button> al que nadie le pone fondo se queda con el del navegador
   (ButtonFace, #f1f2f6): un rectangulo gris claro, igual en los dos temas.
   Se veia en el lapiz de editar de Facturas y Vencimientos (96 + 178
   botones) y en la paginacion de ShippyFlow.
   Va con selector de UN elemento (0,0,1) y SIN !important a proposito:
   cualquier regla de modulo con clase o con estilo en linea le gana, asi
   que esto solo pinta lo que hoy no pinta nadie. */
button{
  background:var(--sf-surface-2);
  color:var(--sf-text);
  border:1px solid var(--sf-line);
  border-radius:var(--sf-r-sm);
  font-family:var(--sf-font);
  cursor:pointer;
}
button:hover{background:var(--sf-surface-3)}
button:disabled{opacity:.5;cursor:default}

/* --- CAMPOS QUE EL NAVEGADOR PINTA POR SU CUENTA ------------------------ */
input[type=file]{
  background:var(--sf-surface-2)!important;color:var(--sf-text)!important;
  border:1px solid var(--sf-line)!important;border-radius:var(--sf-r)!important;
  padding:7px 10px!important;font-size:13px!important;
}
input[type=file]::file-selector-button{
  background:var(--sf-surface-3);color:var(--sf-text);
  border:1px solid var(--sf-line);border-radius:var(--sf-r-sm);
  padding:5px 12px;margin-right:10px;font-weight:600;cursor:pointer;
}
input[type=checkbox],input[type=radio]{accent-color:var(--sf-brand)}
/* la lista desplegada de un <select> la pinta el sistema, no la pagina:
   sin esto salia blanca sobre blanco en oscuro en algunos navegadores */
select{color-scheme:dark}
html.light select,html.sf-light select{color-scheme:light}
option{background:var(--sf-surface);color:var(--sf-text)}

/* --- EL SEMAFORO EN MODO CLARO -----------------------------------------
   Las pastillas de estado traen fondo pastel y texto saturado del mismo
   tono. El texto por si solo daba 1,95:1 (ambar sobre ambar claro, 17 veces
   en ShippyFlow) y 1,77:1 (blanco sobre salmon, 24 veces en Facturas). El
   fondo se queda; lo que se corrige es el texto, que pasa al tono oscuro
   del token en vez de al claro. */
.badge,.pill,.tag,.chip,.b-pen,.b-ship,.b-canc,.soon-tag{font-weight:700}

/* La pastilla FBA es el caso mas repetido de todos: blanco sobre naranja
   #ff8a00 da 2,36:1 y aparece 414 veces entre Board, Repricer y Products.
   Es el naranja de Amazon y no se toca; lo que cambia es el texto, que pasa
   a negro -- 8,9:1 -- como lo escribe la propia Amazon en su interfaz. */
.badge-fba,.fba,.bb-fba,.badge.badge-fba,span.fba,span.bb-fba{color:#0d0d0d!important;font-weight:800}

/* --- MAPA DE CALOR DE TRENDS -------------------------------------------
   Cinco niveles, los mismos dos extremos en los dos temas: verde = arriba,
   rojo = abajo. En oscuro son los tonos de siempre; en claro, el pastel
   equivalente con el texto oscuro. board.html ya no manda color: manda el
   nivel y el color lo pone el tema. */
.sf-heat-a{background:#14532d!important;color:#bbf7d0!important}
.sf-heat-b{background:#166534!important;color:#dcfce7!important}
.sf-heat-c{background:#3f3a16!important;color:#fef9c3!important}
.sf-heat-d{background:#5c3a14!important;color:#ffedd5!important}
.sf-heat-e{background:#7c2d12!important;color:#ffe4d5!important}
html.light .sf-heat-a,html.sf-light .sf-heat-a{background:#dcfce7!important;color:#14532d!important}
html.light .sf-heat-b,html.sf-light .sf-heat-b{background:#e9f9ee!important;color:#166534!important}
html.light .sf-heat-c,html.sf-light .sf-heat-c{background:#fef9c3!important;color:#713f12!important}
html.light .sf-heat-d,html.sf-light .sf-heat-d{background:#ffedd5!important;color:#7c2d12!important}
html.light .sf-heat-e,html.sf-light .sf-heat-e{background:#fee2e2!important;color:#7f1d1d!important}

/* --- AVISOS: EL RECUADRO CAMBIA, EL SIGNIFICADO NO ---------------------
   Contabilidad traia tres recuadros con la paleta clara metida a mano
   (#fffbeb ambar, #fef2f2 rojo, #ecfdf5 verde). En oscuro quedaban como
   parches de crema en medio de la pagina, y peor: la tabla que va DENTRO
   del rojo hereda el texto claro del tema y quedaba en 1,07:1 -- 24 cifras
   del Modelo 303 ilegibles.

   OJO CON EL NOMBRE: `.aviso` a secas YA existe en el Vigilante, donde es la
   clase BASE de una alerta y el color se lo pone `.a-alta` / `.a-media`.
   Coger ese nombre aqui le habria pintado de ambar tambien las rojas. Por eso
   estas reglas van con el prefijo `.sf-` y contabilidad_routes.py usa los
   tokens en sus propias clases. Es el mismo tropiezo que ya documenta
   vigilante_routes.py con `.tb`. */
.sf-aviso{
  background:var(--sf-warn-soft)!important;color:var(--sf-text)!important;
  border-left:4px solid var(--sf-warn)!important;
}
.sf-malo{
  background:var(--sf-bad-soft)!important;color:var(--sf-text)!important;
  border-left:4px solid var(--sf-bad)!important;
}
.sf-bueno{
  background:var(--sf-ok-soft)!important;color:var(--sf-text)!important;
  border-left:4px solid var(--sf-ok)!important;
}
/* las tablas que van dentro de un aviso: sin fondo propio, para que no se
   coman el color del recuadro */
.sf-aviso table,.sf-malo table,.sf-bueno table{background:transparent}
.sf-aviso td,.sf-malo td,.sf-bueno td,
.sf-aviso th,.sf-malo th,.sf-bueno th{background:transparent!important;color:var(--sf-text)!important}

/* --- EL CHROME EN CLARO -------------------------------------------------
   Con --sf-chrome ya en blanco, la cabecera necesita un borde para no
   fundirse con la pagina, y el menu lateral tambien. */
html.light .topbar,html.sf-light .topbar,
html.light .sf-subnav,html.sf-light .sf-subnav,
html.light .tb,html.sf-light .tb{
  border-bottom:1px solid var(--sf-line)!important;
}
html.light .sb,html.sf-light .sb,
html.light #sidebar,html.sf-light #sidebar{
  border-right:1px solid var(--sf-line)!important;
}
/* el interruptor de tema, identico en las seis areas */
.sf-theme{
  background:transparent;border:1px solid var(--sf-line);
  color:var(--sf-text-dim);padding:6px 12px;border-radius:var(--sf-r);
  font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;
}
.sf-theme:hover{background:var(--sf-surface-2);color:var(--sf-text)}

/* --- SUELO DE LEGIBILIDAD ----------------------------------------------
   Ultimo recurso para los estilos en linea que quedan escritos a mano y no
   son de esta casa: si un bloque se declara con fondo blanco explicito, su
   texto no puede ser el del tema oscuro. */
html:not(.light) [style*="background:#fff"],
html:not(.light) [style*="background:#ffffff"],
html:not(.light) [style*="background: #fff"]{color:#0f172a}

/* --- LAS CINCO CABECERAS DE TILE DEL BOARD ------------------------------
   Today / Yesterday / Month to Date / Forecast / Last Month. Iban con el
   color escrito en el HTML: tres oscuros fijos, que en claro se quedaban
   negros con la pagina blanca, y dos por token, que en claro SI aclaraban y
   dejaban la fecha (blanca al 70%) sobre fondo claro a 1,07:1.
   Aqui la escala existe dos veces -- turquesa que se apaga hacia gris -- y
   el texto va con ella. */
.tile-header{background:var(--sf-brand-soft)}
.sf-th1{background:#0f766e!important}
.sf-th2{background:#115e59!important}
.sf-th3{background:#134e4a!important}
.sf-th4{background:#24344f!important}
.sf-th5{background:#1b2942!important}
.tile-header .tile-header-title{color:#fff}
.tile-header .tile-header-date{color:rgba(255,255,255,.72)}
html.light .sf-th1,html.sf-light .sf-th1{background:#99f6e4!important}
html.light .sf-th2,html.sf-light .sf-th2{background:#b9f8ee!important}
html.light .sf-th3,html.sf-light .sf-th3{background:#d5fbf4!important}
html.light .sf-th4,html.sf-light .sf-th4{background:#e2e8f0!important}
html.light .sf-th5,html.sf-light .sf-th5{background:#eef2f7!important}
html.light .tile-header .tile-header-title,html.sf-light .tile-header .tile-header-title{color:#0f172a}
html.light .tile-header .tile-header-date,html.sf-light .tile-header .tile-header-date{color:#44546b}


/* ---------------------------------------------------------------------------
   14. MODO CLARO: LOS FONDOS OSCUROS ESCRITOS A MANO   (4 sep 2026)

   POR QUE HAY QUE VOLVER A PASAR POR AQUI
   La pasada de esta manana recorrio las SEIS AREAS y dejo fuera "Analisis de
   Productos". No fue una pantalla olvidada: fue que la lista era de areas y
   no de SUBMODULOS. Solo el Board tiene 28 vistas dentro de una unica pagina,
   y ShippyFlow otras 26.

   Y hay una segunda razon, mas de fondo: los fallos que quedaban NO estan en
   HTML escrito de una pieza. Estan en estilos que arma el JS por trozos --

       '<button ... style="background:'
       + (activo ? '#0d9488' : '#141f36') + ';border:1px solid ' + (...)
       + ';color:var(--sf-text,#e2e8f0);padding:5px 12px;...'

   -- que no existen hasta que la pantalla carga sus datos. Leyendo el fichero
   no se ven, y con la pantalla vacia tampoco: sin proveedor elegido, Sourcing
   no llega a pintar ni un chip.

   EL PATRON, QUE ES UNO SOLO
   Fondo con un HEX OSCURO fijo + texto que sale de un token. En oscuro sale
   bien, porque --sf-text es claro. En claro, --sf-text pasa a #0f172a y queda
   NEGRO SOBRE NEGRO: los chips de Sourcing daban 1,09:1.

   POR QUE SE ARREGLA AQUI Y NO EN CADA SITIO
   Son 110 apariciones de 38 colores repartidas por 10 ficheros, y la mitad
   nacen dentro de una cadena de JS. Cambiarlas una a una deja el mismo agujero
   abierto para la siguiente pantalla que se escriba. Un selector por atributo
   las coge todas -- las de hoy y las que se escriban manana con el mismo color
   -- y solo en claro. Es el mismo recurso que ya usa "SUELO DE LEGIBILIDAD"
   mas arriba para el caso simetrico (fondo blanco a mano en tema oscuro).

   Y SI, ESTA MANANA SE QUITARON REGLAS PARECIDAS DE board.html.
   Se quitaron con razon y no se estan devolviendo: aquellas perseguian
   COLORES DE TEXTO sueltos, vivian dentro de UNA pantalla, y una de ellas
   ('color:#fff' -> oscuro) llegaba a estropear el blanco deliberado de las
   pastillas. Lo que queda de aquel trabajo -- que el color lo decidan los
   tokens -- sigue en pie y es lo correcto para todo lo que se escribe con
   `var(--sf-...)`.

   Lo que un token NO puede alcanzar es un hex escrito a pelo dentro de una
   cadena de JavaScript: ahi no hay variable que cambiar. Para eso, y solo
   para eso, esta esta seccion: en sf-ui.css (las seis areas, no una), sobre
   FONDOS (no sobre cualquier texto), y con la lista cerrada de colores que
   una medicion en el navegador senalo como ilegibles.

   La bandera `i` esta para que de igual como se escriba el hex.

   NO ENTRAN AQUI los colores de accion saturados (#ef4444, #0d9488, #3b82f6,
   #16a34a, #b91c1c...): esos llevan `color:#fff` escrito y se leen igual en
   los dos temas. Cambiarlos seria romper lo que funciona.
--------------------------------------------------------------------------- */

/* --- 14.1 PANELES NEUTROS: el azul marino del tema oscuro ---------------- */
html.light [style*="background:#0b1120" i],
html.light [style*="background:#0f172a" i],
html.light [style*="background:#111827" i],
html.light [style*="background:#111c33" i],
html.light [style*="background:#141f36" i],
html.light [style*="background:#1a2640" i],
html.light [style*="background:#1a2740" i],
html.light [style*="background:#1b2942" i],
html.light [style*="background:#1e293b" i],
html.light [style*="background:#1f2937" i],
html.light [style*="background:#24344f" i],
html.light [style*="background:#25344d" i],
html.light [style*="background:#27283a" i],
html.light [style*="background-color:#141f36" i],
html.light [style*="background-color:#0b1120" i]{
  background:var(--sf-surface-2)!important;
  color:var(--sf-text)!important;
}

/* --- 14.2 AVISO EN ROJO -------------------------------------------------- */
html.light [style*="background:#2a1215" i],
html.light [style*="background:#2a1414" i],
html.light [style*="background:#2a1416" i],
html.light [style*="background:#3b1d1d" i],
html.light [style*="background:#450a0a" i],
html.light [style*="background:#7f1d1d" i]{
  background:#fee2e2!important;
  color:#7f1d1d!important;
}

/* --- 14.3 AVISO EN AMBAR ------------------------------------------------- */
html.light [style*="background:#2a2312" i],
html.light [style*="background:#2a2416" i],
html.light [style*="background:#3a2c0a" i],
html.light [style*="background:#422006" i],
html.light [style*="background:#854d0e" i]{
  background:#fef3c7!important;
  color:#78350f!important;
}

/* --- 14.4 CONFIRMACION EN VERDE / TURQUESA ------------------------------- */
html.light [style*="background:#064e3b" i],
html.light [style*="background:#0f2e26" i],
html.light [style*="background:#0f3b38" i],
html.light [style*="background:#10403c" i],
html.light [style*="background:#14532d" i],
html.light [style*="background:#166534" i]{
  background:#dcfce7!important;
  color:#14532d!important;
}

/* --- 14.5 INFORMACION EN AZUL -------------------------------------------- */
html.light [style*="background:#1e3a5f" i],
html.light [style*="background:#385f7a" i]{
  background:#dbeafe!important;
  color:#1e40af!important;
}

/* --- 14.6 LO MISMO, PERO EN CLASES --------------------------------------
   board_products.html, settings.html y dashboard_flask.py declaran estos
   mismos fondos en su propio <style>, no en linea. `html.light .clase` gana
   por especificidad venga antes o despues, asi que no hace falta reordenar
   nada ni tocar esos ficheros. */
html.light .badge-fbm{background:#fef3c7!important;color:#78350f!important}
html.light .badge-trial,html.light .trial,html.light .plan{background:#dbeafe!important;color:#1e40af!important}
html.light .badge-active,html.light .active-badge,html.light .msg,
html.light .msg-ok,html.light .ok{background:#dcfce7!important;color:#14532d!important}
html.light .badge-suspended,html.light .suspended,html.light .msg-err,
html.light .bad,html.light .alert,html.light .stock-alert{background:#fee2e2!important;color:#7f1d1d!important}
html.light .inv-status.matched{background:#dcfce7!important;color:#14532d!important}
html.light tr:hover td{background:var(--sf-surface-2)!important}

/* --- 14.7 EL TEXTO PASTEL, LA OTRA MITAD DEL MISMO FALLO -----------------
   Los tonos pastel (#fca5a5, #93c5fd, #86efac, #e0e7ff...) estan calculados
   para leerse SOBRE los fondos de arriba. Al aclarar el fondo se quedarian
   claro sobre claro -- que es el mismo fallo con los papeles cambiados. Van
   juntos: si se aclara el fondo, se oscurece el texto.

   `color:#fff` NO entra: sus 128 apariciones estan sobre botones de color
   saturado que no cambian con el tema. */
html.light [style*="color:#fca5a5" i],
html.light [style*="color:#fecaca" i],
html.light [style*="color:#ef4444" i],
html.light [style*="color:#f87171" i]{color:#b91c1c!important}
html.light [style*="color:#fcd34d" i],
html.light [style*="color:#fde047" i],
html.light [style*="color:#fed7aa" i],
html.light [style*="color:#f59e0b" i],
html.light [style*="color:#f97316" i],
html.light [style*="color:#fbbf24" i]{color:#92400e!important}
/* EL SEMAFORO EN SU TONO MEDIO, USADO COMO TEXTO. Medido en la columna
   FBA/FBM de Analisis de Productos: el verde #22c55e da 2,28:1 sobre blanco
   y el salmon #f87171 2,65:1. Son los mismos colores del semaforo que ya
   tenian su version clara arriba en los tokens; lo que faltaba era el caso
   en que estan escritos a mano dentro de una cadena de JS. */
html.light [style*="color:#86efac" i],
html.light [style*="color:#6ee7b7" i],
html.light [style*="color:#4ade80" i],
html.light [style*="color:#22c55e" i],
html.light [style*="color:#10b981" i],
html.light [style*="color:#16a34a" i]{color:#15803d!important}
html.light [style*="color:#5eead4" i],
html.light [style*="color:#99f6e4" i],
html.light [style*="color:#14b8a6" i],
html.light [style*="color:#2dd4bf" i]{color:#0f766e!important}
html.light [style*="color:#93c5fd" i],
html.light [style*="color:#7dd3fc" i],
html.light [style*="color:#60a5fa" i],
html.light [style*="color:#3b82f6" i],
html.light [style*="color:#38bdf8" i]{color:#0369a1!important}
html.light [style*="color:#e0e7ff" i],
html.light [style*="color:#e2e8f0" i],
html.light [style*="color:#f1f5f9" i],
html.light [style*="color:#f8fafc" i],
html.light [style*="color:#d6d3d1" i],
html.light [style*="color:#cbd5e1" i]{color:var(--sf-text)!important}

html.light .tip{color:#0f766e!important}
html.light .warn{color:#92400e!important}
html.light .card h2,html.light thead th{color:var(--sf-text-dim)!important}


/* --- 14.11 EL MISMO ARREGLO, PARA CUANDO EL NAVEGADOR REESCRIBE EL style
   (12 sep 2026)
   ------------------------------------------------------------------------
   LO QUE PASABA. El boton "Enviar PO FINAL a <email>" de Sourcing -> Purchase
   Order era ILEGIBLE en modo claro. Medido en el navegador, componiendo el
   alfa contra los fondos de detras: **1,09:1** -- texto rgb(224,231,255)
   sobre rgb(231,244,243). No es que no hubiera regla: la seccion 14.7 ya
   cubre `color:#e0e7ff` desde la pasada anterior.

   POR QUE NO LE ENTRABA. Todas las reglas de las secciones 14.7 y 14.9 casan
   contra el TEXTO LITERAL del atributo `style`. Y en cuanto una linea de
   JavaScript escribe en `element.style` -- aunque sea para otra cosa
   completamente distinta -- el navegador REESCRIBE el atributo entero y
   normaliza lo que hay dentro:

       antes   style="...;color:#e0e7ff;padding:8px 16px;..."
       despues style="...; color: rgb(224, 231, 255); padding: 8px 16px; ..."

   El hexadecimal desaparece y aparece un espacio detras de cada `:`. El
   selector deja de casar y la correccion se cae sola, en silencio. En este
   boton lo dispara `refrescarDestinatarioPO`, que hace `b.style.opacity='1'`
   para habilitarlo: toca la opacidad y se lleva por delante el color.

   Por eso esta pantalla "se escapo" de la revision de la semana pasada: no se
   escapo por no recorrerse, se escapo porque la regla SI estaba y dejaba de
   aplicarse justo en los elementos que el JS habilita, deshabilita o renombra
   -- que son, precisamente, los botones de accion.

   LO QUE SE ANADE. El gemelo en `rgb(r, g, b)` de cada color que la 14.7 ya
   listaba, y el de los fondos por token de la 14.9. Se anaden, no se
   sustituyen: un elemento que el JS no ha tocado sigue con su hexadecimal y
   necesita las dos formas. La serializacion de CSSOM es determinista
   (`rgb(r, g, b)` con coma y espacio), asi que la forma nueva es exacta, no
   una aproximacion.
--------------------------------------------------------------------------- */
html.light [style*="color: rgb(252, 165, 165)" i],
html.light [style*="color: rgb(254, 202, 202)" i],
html.light [style*="color: rgb(239, 68, 68)" i],
html.light [style*="color: rgb(248, 113, 113)" i]{color:#b91c1c!important}
html.light [style*="color: rgb(252, 211, 77)" i],
html.light [style*="color: rgb(253, 224, 71)" i],
html.light [style*="color: rgb(254, 215, 170)" i],
html.light [style*="color: rgb(245, 158, 11)" i],
html.light [style*="color: rgb(249, 115, 22)" i],
html.light [style*="color: rgb(251, 191, 36)" i]{color:#92400e!important}
html.light [style*="color: rgb(134, 239, 172)" i],
html.light [style*="color: rgb(110, 231, 183)" i],
html.light [style*="color: rgb(74, 222, 128)" i],
html.light [style*="color: rgb(34, 197, 94)" i],
html.light [style*="color: rgb(16, 185, 129)" i],
html.light [style*="color: rgb(22, 163, 74)" i]{color:#15803d!important}
html.light [style*="color: rgb(94, 234, 212)" i],
html.light [style*="color: rgb(153, 246, 228)" i],
html.light [style*="color: rgb(20, 184, 166)" i],
html.light [style*="color: rgb(45, 212, 191)" i]{color:#0f766e!important}
html.light [style*="color: rgb(147, 197, 253)" i],
html.light [style*="color: rgb(125, 211, 252)" i],
html.light [style*="color: rgb(96, 165, 250)" i],
html.light [style*="color: rgb(59, 130, 246)" i],
html.light [style*="color: rgb(56, 189, 248)" i]{color:#0369a1!important}
html.light [style*="color: rgb(224, 231, 255)" i],
html.light [style*="color: rgb(226, 232, 240)" i],
html.light [style*="color: rgb(241, 245, 249)" i],
html.light [style*="color: rgb(248, 250, 252)" i],
html.light [style*="color: rgb(214, 211, 209)" i],
html.light [style*="color: rgb(203, 213, 225)" i]{color:var(--sf-text)!important}

html.light [style*="background: var(--sf-bg"][style*="color: rgb(255, 255, 255)"],
html.light [style*="background: var(--sf-surface"][style*="color: rgb(255, 255, 255)"],
html.light [style*="background: var(--sf-chrome"][style*="color: rgb(255, 255, 255)"],
html.light [style*="background: var(--sf-line"][style*="color: rgb(255, 255, 255)"]{
  color:var(--sf-text)!important;
  border:1px solid var(--sf-line)!important;
}

/* --- 14.8 EL MENU LATERAL Y SUS TITULOS DE GRUPO ------------------------
   Medido: el turquesa del grupo abierto daba 3,74:1 sobre blanco. Con el
   nuevo valor de --sf-brand en claro ya pasa, pero estos tres van con el
   tono mas oscuro porque son texto pequeno y en negrita sobre el chrome. */
html.light .sb-group-title.open,
html.light .sb-logo,
html.light .sb-item.active{color:var(--sf-brand-lo)!important}


/* --- 14.9 EL FALLO MAS REPETIDO DE TODOS: FONDO POR TOKEN + TEXTO BLANCO
   Medido en el navegador, no deducido: 1,08:1. Es el mismo boton escrito 22
   veces en ShippyFlow --

       style="background:var(--sf-bg,#0b1120);color:#fff;..."

   -- "Descargar Informe", "Anade Logo", "Nueva regla", "Ejecutar", "Check
   now", "Nueva direccion", "Ver formulario publico"... En oscuro es un boton
   negro con letra blanca y esta bien. En claro el token pasa a #f4f6fa y
   queda BLANCO SOBRE BLANCO: el boton sigue ahi, se puede pulsar, y no se
   lee nada. Es literalmente el "boton ilegible" del aviso, y no lo veia
   ninguna de las dos revisiones anteriores porque el color no esta escrito:
   lo pone el token, y el token hace lo que debe.

   Lo que se corrige es el texto, no el fondo: asi el boton se queda donde
   estaba, con la forma que tenia, y se lee. El borde es para que siga
   pareciendo un boton sobre una pagina del mismo color. */
html.light [style*="background:var(--sf-bg"][style*="color:#fff"],
html.light [style*="background:var(--sf-surface"][style*="color:#fff"],
html.light [style*="background:var(--sf-chrome"][style*="color:#fff"],
html.light [style*="background:var(--sf-line"][style*="color:#fff"]{
  color:var(--sf-text)!important;
  border:1px solid var(--sf-line)!important;
}

/* --- 14.10 DOS COLORES QUE FALTABAN EN LA SECCION 11 --------------------
   La seccion 11 ya hace esto -- blanco sobre un relleno de tono medio no se
   lee, asi que la letra pasa a oscura y el relleno se respeta. Aqui solo se
   anaden los dos tonos que su lista no incluia y que la medicion de hoy
   senalo: el azul cielo del boton redondo de "Vision general" (1,67:1, y
   falla en los DOS temas) y el verde de ShippyFlow (3,30:1).

   No se repiten los que ya estan arriba. Y NO entran los que quedan justos
   en las dos direcciones -- #ef4444 (3,76 -> 4,74), #3b82f6 (3,68 -> 4,85),
   #6366f1 (donde el blanco ya es lo mejor): cambiar un boton de borrar de
   blanco a negro por un punto de ratio es mas ruido que arreglo. Quedan
   apuntados, no arreglados. */
[style*="background:#7dd3fc"],[style*="background:#16a34a"]{
  color:#0d0d0d!important;
}

/* --- 14.11 LA PAGINA DE AYUDA ------------------------------------------
   help.html y help_es.html traen su paleta propia en un <style> anterior a
   este fichero. Tres cosas medidas en claro: el naranja de los h2 (2,80:1),
   y el texto pastel de .tip y .warn sobre su fondo translucido (1,15 y
   1,22:1) -- que en oscuro estan bien y por eso nadie los habia mirado. */
html.light .card h2,html.light h2{color:#c2410c}
html.light .tip{background:rgba(13,148,136,.10);border-color:rgba(13,148,136,.34);color:#0f766e}
html.light .warn{background:rgba(180,83,9,.10);border-color:rgba(180,83,9,.34);color:#92400e}
html.light .back-btn,html.light .lang-btn{color:var(--sf-brand-lo)}

/* --- 14.12 EL AVISO DE OVERVIEW ----------------------------------------
   `.alert` se declara con `color:var(--sf-text,#fca5a5)` sobre un fondo rojo
   translucido; en claro el token es casi negro y el fondo casi blanco, pero
   overview.html vuelve a declarar `.alert` DESPUES de este fichero. Con el
   prefijo del tema gana por especificidad sin tocar overview.html. */
html.light .alert,html.light .stock-alert{
  background:var(--sf-bad-soft)!important;color:#7f1d1d!important;
  border:1px solid var(--sf-bad)!important;
}


/* --- 14.13 EL RELLENO DE MARCA, AHORA QUE EN CLARO ES OSCURO ------------
   Consecuencia directa de bajar --sf-brand en claro de #0d9488 a #0f766e
   (ver el bloque de tokens). Todo lo que se rellena con el token y lleva
   letra CASI NEGRA -- botones primarios, el contador del menu, la pagina
   activa del paginador -- estaba calculado para el turquesa claro: con el
   nuevo tono se queda en 3,09:1. Medido en el navegador tras el cambio, no
   supuesto.

   No se vuelve atras el token: como TEXTO, #0d9488 daba 3,74:1 y ese era el
   fallo original ("Volver al Dashboard", los titulos de grupo del menu, el
   enlace de idioma). Lo que cambia es la letra de los rellenos, y solo en
   claro: blanco sobre #0f766e son 5,47:1. En oscuro el turquesa sigue siendo
   claro y la letra sigue siendo casi negra, que es como debe ser. */
html.light .btn,html.light .btn-primary,
html.light button.primary,html.light .sf-btn,
html.light .sb-badge,html.light #rvqBadge,
html.light .sb-toggle,html.light .bs2,html.light .sf-mp-apply,
html.light .ab[data-action="apply_recommended_prices"],
html.light .ab[data-action="push_safe_prices"],
html.light .ab[data-action="apply_recommended_prices"]:hover,
html.light .ab[data-action="push_safe_prices"]:hover,
html.light .pgsa,html.light .pgsz.active{
  color:#fff!important;
}
/* Los chips activos de Analisis de Productos llevan el teal a pelo y el
   texto por token: en oscuro daban 3,21:1. Con letra oscura son 4,77:1 en
   los DOS temas, que es como ya estan resueltos sus hermanos de arriba. */
[style*="background:#0d9488"]{color:#0f172a!important}
html.light .lang-btn.active{background:var(--sf-brand-lo);border-color:var(--sf-brand-lo);color:#fff}


/* --- 14.14 LAS PASTILLAS DE ESTADO DE ANALISIS DE PRODUCTOS -------------
   `srcPill()` pinta el mismo color tres veces: fondo al 13% (c+'22'), texto
   a pleno y borde al 33% (c+'55'). Sobre el panel oscuro funciona. Sobre
   blanco el fondo se queda casi blanco y el texto se sostiene solo: medido,
   3,14:1 el cian de "P3-COMPRA PEQUENA" y 4,18-4,29:1 el resto -- todos por
   debajo del 4,5 que pide un texto de 10,5 px.

   En claro el texto pasa al tono del sistema y el COLOR SIGUE ESTANDO: lo
   llevan el borde y el fondo, que es lo que distingue de un vistazo un
   ELIGIBLE de un NO COMPRAR. En oscuro no cambia nada. */
/* Mas especifico que las reglas por color de 14.7 a proposito: ahi el tono
   del semaforo se oscurece porque suele ser TEXTO sobre el fondo de la
   pagina; aqui el mismo tono es la identidad de la pastilla y quien manda
   es la clase. */
html.light span.sf-pill-estado{color:var(--sf-text)!important}
