@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Raleway:wght@200;300;400;500;600;700&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:#bdad98; --accent-d:#a2896a; --accent-dd:#8a7358;
  --green:#4b5951; --green-l:#5a665f;
  --font-head:'Libre Baskerville',Georgia,serif; --font-body:'Raleway',-apple-system,Segoe UI,Roboto,sans-serif;
}

/* ============================================================
   ESTILO BOOTIX (white-label) — el DISEÑO del CRM de THE BOOTIX GROUP
   (crm.bootix.es) aplicado a este CRM: arquitectura de rail a toda altura con
   monograma + barra superior con el filtro de centros, cabeceras de vista a la
   izquierda, tarjetas planas, botones y selectores en píldora, etiquetas en
   versalitas y tablas limpias.

   Lo sirve brand.css.php (el último de la cascada) solo a las marcas con
   'estilo' => 'bootix'. REGLA: aquí no se define NI UN COLOR NI UNA FUENTE.
   Todo sale de los tokens de la marca (--paper, --soft, --cream, --text,
   --muted, --line, --accent, --accent-rgb, --font-head, --font-body…), así que
   cada marca conserva su paleta y su tipografía, en oscuro o en claro.
   ============================================================ */
:root{
  --estilo:bootix;               /* app.js lo lee para recolocar el filtro de centros en la barra */
  --side-w:76px; --top-h:64px;
  --bx-r:18px;
  --bx-tint:color-mix(in srgb, var(--text) 5%, transparent);
  --bx-tint-2:color-mix(in srgb, var(--text) 9%, transparent);
  --bx-shadow:0 1px 2px rgba(0,0,0,.22), 0 8px 30px rgba(0,0,0,.16);
}

/* Cifras de caja alta en todo el CRM (Raleway trae por defecto las de estilo antiguo). Va por
   font-feature-settings: las reglas con tabular-nums del CSS base reiniciarían font-variant. */
*,*::before,*::after{font-feature-settings:"lnum" 1}

/* ============================================================
   ARQUITECTURA
   ============================================================ */
/* Rail: a toda altura, con el monograma de la marca arriba (como la ✕ de Bootix) */
.tb-side{background:var(--paper);border-right:1px solid var(--line);box-shadow:none}
@media(min-width:761px){
  .tb-side{top:0;padding:14px 0 16px}
  .tb-side::before{
    content:"";flex:0 0 auto;width:38px;height:38px;border-radius:12px;margin:0 0 14px;
    background-color:var(--accent);background-position:center;background-size:62%;background-repeat:no-repeat;
  }
}
.tb-side .nav-link,.tb-side-gear,.nav-gbtn{width:48px;height:48px;border-radius:12px;color:var(--muted);box-shadow:none}
.tb-side .nav-link:hover,.tb-side-gear:hover,.nav-gbtn:hover{background:var(--bx-tint);color:var(--text)}
.tb-side .nav-link.is-active,
.nav-group.is-active .nav-gbtn,
.tb-side .nav-fly .nav-link.is-active,
.tb-side-gear.gear-active{background:var(--accent-soft);color:var(--accent);box-shadow:none}
/* Marca vertical de la pestaña activa */
@media(min-width:761px){
  .tb-side-nav > .nav-link.is-active::before,
  .nav-group.is-active > .nav-gbtn::before,
  .tb-side-gear.gear-active::before{
    content:"";display:block !important;position:absolute;left:-14px;top:12px;bottom:12px;width:3px;height:auto;margin:0;
    border-radius:0 3px 3px 0;background:var(--accent);
  }
}
.nav-group.is-open .nav-gbtn{background:var(--bx-tint-2);color:var(--text)}
.nav-fly{border-radius:16px;border:1px solid var(--line);background:var(--paper);box-shadow:var(--shadow-lg)}
.nav-fly-h{font-family:var(--font-body);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.tb-side .nav-fly .nav-link{width:100%;height:auto;border-radius:10px}
.tb-side .nav-link::after,.tb-side-gear::after{border-radius:8px}

/* Barra superior: empieza a la derecha del rail, plana, con filete inferior */
.tb-topbar{height:var(--top-h);background:var(--paper);box-shadow:none;border-bottom:1px solid var(--line);padding:0 24px;gap:20px}
@media(min-width:761px){ .tb-topbar{left:var(--side-w)} }
.tb-main{padding-top:var(--top-h)}
.tb-topbar-logo img{height:20px}
.tb-topbar-right{gap:12px}
.tb-user{color:var(--muted);font-size:13.5px}
.tb-icon-btn{border-radius:999px}
.tb-icon-btn:hover{background:var(--bx-tint)}
.tb-cta{background:transparent;color:var(--text);border:1px solid var(--line);border-radius:999px;
  font-weight:600;font-size:12.5px;padding:7px 15px;box-shadow:none;transition:border-color .18s}
.tb-cta:hover{background:transparent;border-color:var(--text);color:var(--text)}

/* Filtro de centros dentro de la barra (app.js lo mueve ahí), tras un separador como el selector de sociedad de Bootix */
.tb-topbar .centro-chips{flex:1 1 auto;min-width:0;margin:0;flex-wrap:nowrap;align-items:center;gap:6px;
  overflow-x:auto;scrollbar-width:none}
.tb-topbar .centro-chips::-webkit-scrollbar{display:none}
.tb-topbar .centro-chips::before{content:"";flex:0 0 auto;width:1px;height:20px;background:var(--line);margin-right:14px}
.tb-topbar .centro-chip{flex:0 0 auto;padding:6px 13px;font-size:12px}
@media(max-width:760px){
  .tb-topbar{padding:0 14px;gap:12px}
  .tb-topbar-logo img{height:16px}
  .tb-topbar .tb-user{display:none}
  .tb-topbar .centro-chips::before{margin-right:8px}
}

/* Cabecera de cada vista: a la izquierda, título + subtítulo (como las páginas de Bootix) */
.hero::before{display:none}
.hero-inner{max-width:1200px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:28px 24px 2px}
.hero-title{order:1;margin:0;font-size:clamp(26px,2.6vw,32px);line-height:1.12;letter-spacing:-.01em}
.hero-badge{order:2;margin-top:6px;padding:0;border:0;background:none;box-shadow:none;border-radius:0;
  font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted)}
.hero-inner > .centro-chips{order:3;margin:16px 0 0}
.hero-stats{order:4;width:100%;margin-top:20px;padding-top:0;border-top:0 !important}
.container{max-width:1200px;padding:20px 24px 40px}
.crumb{max-width:1200px}

/* ============================================================
   COMPONENTES
   ============================================================ */
/* Tarjetas: planas, filete fino, radio 18, sombra suave */
.card,.channel-card{background:var(--paper) !important;border:1px solid var(--line) !important;
  border-radius:var(--bx-r);box-shadow:var(--bx-shadow)}
.card::before,.card::after,.channel-card::before,.channel-card::after{display:none}
.card:not(.no-pad):hover,.channel-card:hover{border-color:var(--bx-tint-2) !important;transform:none}
.card-head{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:16px}
.card-head h2{font-family:var(--font-body);font-weight:600;font-size:15.5px;letter-spacing:-.005em}
.card-head h2::before,.sect-head h2::before{display:none}
.card-head .sect-sub{font-size:12px}
.sect-head h2{font-size:22px;font-weight:400;letter-spacing:-.01em}

/* KPIs: tarjeta pequeña con la cifra en semibold y la etiqueta en versalitas */
.kpi{background:var(--paper) !important;border:1px solid var(--line) !important;border-radius:var(--bx-r);
  box-shadow:var(--bx-shadow);backdrop-filter:none;-webkit-backdrop-filter:none}
.kpi::before,.kpi::after{display:none}
.kpi:hover{transform:none;box-shadow:var(--bx-shadow)}
.kpi .v{font-family:var(--font-body);font-weight:600;letter-spacing:-.02em;text-shadow:none}
.kpi .l{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.kpi-ic{border-radius:12px}

/* Botones: píldoras planas (mismos colores de siempre, sin degradados ni brillos) */
.btn{border-radius:999px;font-weight:600;letter-spacing:.005em;box-shadow:none;
  transition:background-color .18s,border-color .18s,color .18s,filter .18s}
.btn-gold{background:var(--accent);border-color:var(--accent);box-shadow:none}
.btn-gold:hover{background:var(--accent);filter:brightness(1.07)}
.btn-ghost,.btn-ghost-light,.btn-light{border-width:1px;border-style:solid;box-shadow:none}
.btn-ghost,.btn-ghost-light{background:transparent;border-color:var(--line);color:var(--text)}
.btn-ghost:hover,.btn-ghost-light:hover{background:transparent;border-color:var(--text);color:var(--text)}
.btn-primary{box-shadow:none}

/* Chips y selectores segmentados en píldora */
.centro-chip{border-radius:999px;box-shadow:none;font-size:12px}
.subtabs,.pl-seg,.edp-segs,.caja-segs{border-radius:999px;padding:4px;border:0;background:var(--bx-tint)}
.subtab,.pl-seg button,.edp-seg,.caja-seg,.prog-tab{border-radius:999px;box-shadow:none}
.chip,.sat-chip{border-radius:999px}

/* Formularios */
.input,.ban-input{border-radius:10px;box-shadow:none}
.input:focus,.ban-input:focus,
select.input:focus,select.ban-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb,189,173,152),.22)}
.field label,.prog-form label,.caja-form label,.pr-form label,.baja-field label,.renov-fp label,.dl-label,.cb-label,.ban-k-label{
  font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* Tablas: cabecera en versalitas sin banda de fondo, filas con filete y tinte al pasar */
.perf-table thead th{background:transparent;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.1em;
  border-bottom:1px solid var(--line)}
.perf-table td,.leads-table td{font-variant-numeric:tabular-nums}
.leads-table tbody tr:hover td,.perf-row:hover td,.queue-item:hover{background:var(--bx-tint)}

/* Modales */
.modal{border-radius:var(--bx-r);border:1px solid var(--line)}
.modal h2{letter-spacing:-.01em}
.modal .sub{font-size:10.5px;font-weight:600;letter-spacing:.14em}
.modal-close{border-radius:999px}

/* Portada: alertas */
.alertas-hd{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.alerta-card{border-radius:14px;box-shadow:none}
.alerta-card:hover{transform:none}

/* Login: tarjeta alineada a la izquierda, como el acceso de Bootix */
.login-card{border-radius:var(--bx-r);border:1px solid var(--line);text-align:left;box-shadow:var(--shadow-lg)}
.login-card h1{text-align:left;letter-spacing:-.01em}
.login-card label{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.login-card label.login-remember{text-transform:none;letter-spacing:0;font-weight:500;font-size:12.5px}
.login-card input:not([type=checkbox]){border-radius:10px}
.login-card .btn{border-radius:999px}
.login-wrap .hero-badge{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  background:none;border:0;padding:0;margin:4px 0 16px}

/* Pie */
.app-foot{letter-spacing:.22em;font-size:10px;font-weight:600}

.tb-side::before{background-image:url('brand-asset.php?a=mark')}