@import url('https://fonts.googleapis.com/css2?family=Prociono&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
/* IMPORTANTE: solo emitimos tokens de IDENTIDAD de marca que son iguales en claro y oscuro
   (acento, verde, tipografías). NO tocamos --soft/--cream/--accent-soft/--paper: esos son
   tokens de SUPERFICIE que el tema oscuro del CRM (styles.css) redefine; si los pisáramos
   aquí (esta hoja carga después) las superficies oscuras se volverían claras (burbujas blancas).
   La excepción es una marca que declare 'modo' => 'claro': ahí SÍ queremos revertir el tema
   oscuro entero, y se hace abajo en bloque (tokens de superficie + assets/theme-light.css). */
:root{
  --accent:#b5895f; --accent-d:#9c7350; --accent-dd:#7e5b3e;
  --green:#7a8b76; --green-l:#8b9a87;
  --font-head:'Prociono',Georgia,serif; --font-body:'Poppins',-apple-system,Segoe UI,Roboto,sans-serif;
  --accent-rgb:181,137,95;   /* el acento en componentes, para los rgba() del CSS */
  --accent-l:#ddb699;       /* variante clara del acento (hover/realce) */
}
/* Proporción real del logotipo (el CSS base trae la de TrainingBoutique, 1182/184). */
.tb-topbar-logo img{aspect-ratio:900/277}

/* ============================================================
   MODO CLARO — solo para marcas con 'modo' => 'claro'.
   Revierte el tema oscuro v63 de styles.css. Va aquí (no con @import) para quedar al
   final de la cascada y poder pisar incluso las reglas marcadas !important del CSS base.
   ============================================================ */
:root{
  --text:#212121; --ink-soft:#5b5350; --muted:#706666;
  --paper:#ffffff;
  --soft:#f9f6f2; --cream:#f4ede6;
  --line:#e1ddda; --line-2:#ece8e4;
  --accent-soft:#f3e5d7;
  --dark:#212121; --dark-2:#2e2a27; --dark-3:#3d3733;
  --brand-bg:#fffdf9; --brand-bg-grad:radial-gradient(1000px 600px at 84% -10%, rgba(221,182,153,.20), transparent 60%),radial-gradient(850px 520px at -6% 108%, rgba(181,137,95,.13), transparent 55%),#fffdf9;
  --shadow:0 1px 2px rgba(33,33,33,.05), 0 18px 40px -24px rgba(33,33,33,.22);
  --shadow-lg:0 30px 70px -24px rgba(33,33,33,.30);
}
/* ============================================================
   TEMA CLARO (white-label) — se sirve SOLO para las marcas que declaran
   'modo' => 'claro' en su bloque de inc/brands.php. Lo inyecta brand.css.php
   al final de la cascada, así que puede revertir el tema oscuro "v63" de
   styles.css (incluidas sus reglas con !important).

   REGLA DE ORO: aquí no hay ni un color de marca. Todo sale de los tokens que
   brand.css.php acaba de emitir (--accent, --accent-l, --accent-rgb, --text,
   --paper, --soft, --cream, --line, --line-2, --dark, --muted, --st-*), de modo
   que este archivo sirve igual para Onfitt que para cualquier marca clara futura.
   Como TrainingBoutique no declara 'modo', nunca llega a servirse: TB no cambia.
   ============================================================ */

/* ===== Base ===== */
body{
  background:var(--brand-bg-grad);
  background-attachment:fixed;
  color:var(--text);
}
::selection{background:var(--accent-soft);color:var(--text)}
h1,h2,h3{font-weight:400}          /* las serif de logotipo suelen traer un solo grosor:
                                      el "negrita" simulado del navegador las ensucia */

/* ===== Barra superior ===== */
.tb-topbar{
  background:var(--paper);
  box-shadow:inset 0 -1px 0 var(--line), 0 8px 24px -20px rgba(33,33,33,.5);
}
.tb-topbar .tb-user{color:var(--ink-soft)}
.tb-topbar .tb-icon-btn{color:var(--ink-soft)}
.tb-topbar .tb-icon-btn:hover{background:var(--soft);color:var(--text)}
.tb-sep{background:var(--line)}

/* ===== Rail lateral (y su versión barra inferior en móvil) ===== */
.tb-side{
  background:var(--paper);
  border-right:1px solid var(--line);
}
@media(max-width:760px){ .tb-side{border-right:0;border-top:1px solid var(--line)} }
.tb-side .nav-link,.tb-side-gear,.nav-gbtn{color:var(--ink-soft)}
.tb-side .nav-link:hover,.tb-side-gear:hover,.nav-gbtn:hover{background:var(--soft);color:var(--text)}
.tb-side .nav-link.is-active,
.nav-group.is-active .nav-gbtn,
.tb-side .nav-fly .nav-link.is-active{
  background:rgba(var(--accent-rgb),.16);
  color:var(--accent-dd);
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.38);
}
.nav-group.is-open .nav-gbtn{background:var(--cream);color:var(--text)}
.tb-side-gear.gear-active{background:rgba(var(--accent-rgb),.18);color:var(--accent-dd)}
.nav-gdot{box-shadow:0 0 0 2px var(--paper)}

/* Panel desplegable del rail */
.nav-fly{
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:0 22px 50px -22px rgba(33,33,33,.35);
}
.nav-fly-h{color:var(--muted)}
.tb-side .nav-fly .nav-link{color:var(--ink-soft)}
.tb-side .nav-fly .nav-link:hover{background:var(--soft);color:var(--text)}

/* ===== Migas ===== */
.crumb{color:var(--muted)}
.crumb-root{color:var(--ink-soft)}
.crumb-sep{color:var(--line)}

/* ===== Hero ===== */
.hero{color:var(--text)}
.hero-badge{border-color:var(--line);color:var(--ink-soft);background:var(--paper)}
.hero-stats{border-top:1px solid var(--line)}
.sect-head h2{color:var(--text)}
.sect-head .sect-sub,.perf-note{color:var(--muted)}
.perf-note b{color:var(--ink-soft)}
.count,.contab-dash{color:var(--muted)}
.geo-check{color:var(--ink-soft)}
.app-foot{color:var(--muted)}

/* ===== Burbujas KPI ===== */
.kpi{
  background:var(--paper);
  border:1px solid var(--line) !important;
  box-shadow:var(--shadow);
  backdrop-filter:none;
}
.kpi::after{background:radial-gradient(circle,rgba(var(--accent-rgb),.10),transparent 70%)}
.kpi:hover{transform:none;box-shadow:var(--shadow)}
.kpi .v{color:var(--text);text-shadow:none}
.kpi .l{color:var(--ink-soft)}
.kpi .s{color:var(--muted)}
.kpi.accent .v{color:var(--accent-dd)}
.kpi.good .v,.gk.is-ok .gk-v{color:var(--st-venta)}
.kpi.warn .v{color:var(--st-espera)}
.kpi.warn{border-color:rgba(194,145,47,.45) !important}
.kpi-ic{background:rgba(var(--accent-rgb),.14);border-color:rgba(var(--accent-rgb),.28);color:var(--accent-dd)}
.kpi.good .kpi-ic{color:var(--st-venta);background:rgba(47,107,69,.12);border-color:rgba(47,107,69,.26)}
.kpi.warn .kpi-ic{color:var(--st-espera);background:rgba(194,145,47,.14);border-color:rgba(194,145,47,.3)}
.kpi.accent .kpi-ic{color:var(--accent-dd);background:rgba(var(--accent-rgb),.14);border-color:rgba(var(--accent-rgb),.28)}
.gk.is-pend .gk-v,.gk.is-rev .gk-v{color:var(--st-perdido)}

/* ===== Tarjetas y paneles ===== */
.card,.channel-card{
  background:var(--paper) !important;
  border:1px solid var(--line) !important;
  box-shadow:var(--shadow);
}
.gk{border:1px solid var(--line) !important}
.card::after,.channel-card::after{background:radial-gradient(170px 130px at 100% 0%, rgba(var(--accent-rgb),.09), transparent 70%)}
.card:not(.no-pad):hover,.channel-card:hover{border-color:rgba(var(--accent-rgb),.42) !important}
.ban-kpi,.ban-panel{border-color:var(--line)}

/* ===== Tablas: hovers y selección ===== */
.queue-item:hover,
.leads-table tbody tr:hover td,
.perf-row:hover td,
.perf-detail td,
.perf-table tbody tr.renov-row:hover td,
.perf-table tbody tr.fact-row:hover td,
.ap-row:hover,
.ap-ev:hover{background:var(--soft)}
.perf-row.open td{background:var(--cream)}
.perf-table tr.is-sel td{background:rgba(var(--accent-rgb),.12)}
.prog-tbl tbody tr:nth-child(even){background:rgba(33,33,33,.02)}
.ap-cell:hover,.cal-cell:not(.cal-empty):hover{background:var(--soft)}

/* ===== Botones ===== */
/* Principal: el arena de marca con texto oscuro (sobre crema, el arena contrasta
   mucho mejor que el clay en relleno grande). */
.btn-gold{
  background:var(--accent-l,var(--accent));
  border-color:var(--accent-l,var(--accent));
  color:var(--dark);
  box-shadow:0 2px 8px -4px rgba(33,33,33,.35);
}
.btn-gold:hover{background:var(--accent);border-color:var(--accent);color:var(--dark)}
/* Secundario (el más usado): papel con borde, no cristal sobre oscuro. */
.btn-ghost,.btn-ghost-light{
  background:var(--paper);
  border-color:var(--line);
  color:var(--text);
}
.btn-ghost:hover,.btn-ghost-light:hover{
  background:var(--cream);
  border-color:var(--accent);
  color:var(--text);
}
.btn-dark{background:var(--dark);border-color:var(--dark);color:var(--paper)}
.btn-dark:hover{background:#000;border-color:#000;color:var(--paper)}
.btn-light{background:var(--paper);border-color:var(--line);color:var(--text);box-shadow:none}
.btn-light:hover{background:var(--cream);color:var(--text)}
.btn-primary{background:var(--green);border-color:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-l);border-color:var(--green-l);color:#fff}

/* ===== Chips, segmentos y pestañas ===== */
.centro-chip,.ap-nb,.prog-tab,.pl-opt{
  background:var(--paper);
  border-color:var(--line);
  color:var(--text);
}
.centro-chip:hover,.ap-nb:hover,.prog-tab:hover,.pl-opt:hover{
  background:var(--cream);
  border-color:var(--accent);
  color:var(--text);
}
.centro-chip.is-on{
  background:var(--accent-l,var(--accent));
  border-color:var(--accent-l,var(--accent));
  color:var(--dark);
}
.prog-tab.is-active{background:var(--accent-l,var(--accent));border-color:var(--accent-l,var(--accent));color:var(--dark)}
.subtabs,.pl-seg{background:var(--soft);border-color:var(--line)}
.subtab,.pl-seg button{color:var(--ink-soft)}
.subtab:hover:not(.is-active){color:var(--text)}
.pl-seg button:hover{color:var(--text);background:var(--paper)}
.subtab.is-active,.pl-seg button.is-on{background:var(--accent-l,var(--accent));color:var(--dark)}

/* ===== Formularios ===== */
input[type=date]::-webkit-calendar-picker-indicator{filter:none}
.input:focus,.ban-input:focus{box-shadow:0 0 0 3px rgba(var(--accent-rgb),.22)}
select.input:focus,select.ban-input:focus{box-shadow:0 0 0 3px rgba(var(--accent-rgb),.22)}
.timp-bar{background:var(--soft)}

/* ===== Login ===== */
.login-wrap{background:var(--brand-bg-grad)}
.login-card{background:var(--paper);border:1px solid var(--line);box-shadow:0 30px 70px -30px rgba(33,33,33,.35)}
.login-card input{background:var(--soft)}
.login-card input:focus{background:var(--paper);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.22)}

/* ============================================================
   Pastillas y textos de estado. El tema oscuro los pinta en tonos claros
   (#74c493, #e08e83, #d8ab55…) que sobre papel no se leen: aquí vuelven a los
   colores de estado sobrios del CSS base (--st-*), que ya eran para fondo claro.
   ============================================================ */
/* — correcto / venta — */
.rec-boost,.maint-badge.ok,.gasto-check.is-ok,.gasto-estado.is-ok,
.timp-msg.ok,.kpi.good .v,.cal-has.cal-ok .cal-ses,.fi-chip-ok,
.ef-coach-btn.filled,.ef-res-venta.on,.edp-lestado.le-venta,
.wa-tpl-src.ok,.wa-dup-ok,.wa-meta-st.ok,.dia-stat.good .dia-stat-n,
.fact-estado-sel[data-v="Enviada"]{color:var(--st-venta)}
/* — error / pérdida — */
.rec-cut,.gasto-check.is-bad,.subtab-n.is-rev,.needs-banner,.gasto-estado.is-pend,
.timp-msg.err,.gasto-del:hover,.ini-count.past,.ef-res-no.on,.edp-lestado.le-no,
.wa-hbtn.is-on,.wa-stop,.wa-ctx-stop,.wa-tpl-edit-err,.edp-filtro-pill,
.fi-chip-bad,.ag-no,.ag-av-alta .ag-av-l,.pl-prio-alta,.pl-fecha.is-late,
.pl-adj-x:hover,.cal-has.cal-no .cal-ses,.dia-td-urg,.wa-meta-st.bad,
.dia-urgente .dia-n,.dia-urgente .dia-ic{color:var(--st-perdido)}
.gasto-aviso{color:var(--st-perdido)}
.gasto-aviso b{color:var(--st-perdido)}
/* — pendiente / aviso — */
.ini-count.next,.kpi.warn .v,select.gasto-estado.is-pago,.wa-tpl-src.alt,
.wa-tpl-edit-warn,.edp-t-lead,.edp-seguir-chip,.edp-lestado.le-nuevo,
.edp-lestado.le-seg,.fi-chip-warn,.ag-av-media .ag-av-l,.pl-prio-media,
.cal-has.cal-pend .cal-ses,.dia-td-warn,.dia-warn .dia-n,.dia-warn .dia-ic,
.wa-meta-st.pend,.fact-estado-sel[data-v="Pendiente"]{color:var(--st-espera)}
/* — informativo — */
.perm-sel.lvl-read,.ini-count.week{color:var(--st-nuevo)}
/* — neutro / de marca — */
.rec-keep{background:rgba(var(--accent-rgb),.14);color:var(--accent-dd)}
.rec-watch,.gasto-check.is-none{background:var(--soft);color:var(--muted)}
.ini-count,.subtab-n{background:var(--soft);color:var(--accent-dd)}
.mac-c{background:rgba(var(--accent-rgb),.14);color:var(--accent-dd)}
.pay-other{color:var(--accent-dd);background:rgba(var(--accent-rgb),.14);border-color:rgba(var(--accent-rgb),.4)}
/* Flecha del selector de estado de gastos (el oscuro la pinta clara) */
select.gasto-estado{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23706666' stroke-width='1.6'/%3E%3C/svg%3E")}

/* ===== Gráficos SVG ===== */
.chart-guide{stroke:var(--accent)}
.chart-tip b{color:var(--accent-l,var(--accent))}

select.input, select.ban-input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 2l4.5 4 4.5-4' fill='none' stroke='%237e5b3e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
select.input:hover, select.ban-input:hover{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 2l4.5 4 4.5-4' fill='none' stroke='%23b5895f' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}