:root[data-tema="claro"]{
  --fondo:#f5f6f8; --panel:#ffffff; --panel2:#f0f2f5; --panel3:#e6e9ee;
  --borde:#e2e5ea; --borde2:#d3d8e0;
  --texto:#161a20; --medio:#4c5563; --suave:#7b8593;
  --acento:#3b6fd4; --acento2:#2b57ad;
  --verde:#1c9c66; --ambar:#b8801a; --rojo:#c94b48;
  --sombra:0 1px 2px rgba(16,24,40,.06);
}
:root{
  --fondo:#0b0d11; --panel:#13161c; --panel2:#1a1e26; --panel3:#212630;
  --borde:#242a34; --borde2:#2f3641;
  --texto:#e8ebf0; --medio:#a3adbb; --suave:#6f7986;
  --acento:#5b8def; --acento2:#7aa5ff;
  --verde:#35c88a; --ambar:#e8ae3c; --rojo:#ec6360;
  --r:10px; --sombra:0 1px 3px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--fondo);color:var(--texto);
  font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
.oculto{display:none !important}

/* ---------------------------------------------------------------- controles */
button,.boton{background:var(--acento);color:#fff;border:0;padding:8px 15px;border-radius:8px;
  cursor:pointer;font:inherit;font-size:13.5px;font-weight:500;text-decoration:none;
  display:inline-block;transition:background .12s,border-color .12s}
button:hover,.boton:hover{background:var(--acento2)}
button:active{transform:translateY(.5px)}
button:disabled{opacity:.45;cursor:default}
.secundario{background:var(--panel3);color:var(--medio);border:1px solid var(--borde2)}
.secundario:hover{background:var(--borde);color:var(--texto)}
input,textarea,select{font:inherit;font-size:13.5px;background:var(--fondo);color:var(--texto);
  border:1px solid var(--borde2);border-radius:8px;padding:8px 11px;transition:border-color .12s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--acento)}
input::placeholder,textarea::placeholder{color:var(--suave)}
textarea{resize:vertical;line-height:1.5}

/* ------------------------------------------------------------------ cabecera */
header{display:flex;align-items:center;gap:18px;padding:0 22px;height:56px;
  background:var(--panel);border-bottom:1px solid var(--borde);position:sticky;top:0;z-index:20}
.marca{font-weight:650;font-size:15px;letter-spacing:-.2px;white-space:nowrap}
#form-buscar{display:flex;align-items:center;gap:8px;flex:1;max-width:640px}
#q{flex:1;height:34px}
.check{display:flex;align-items:center;gap:6px;color:var(--medio);font-size:12.5px;
  white-space:nowrap;cursor:pointer;user-select:none}
.check input{accent-color:var(--acento);width:14px;height:14px}
#btn-buscar{height:34px}
.fuentes{display:flex;gap:5px;margin-left:auto}
.fuentes span{padding:2px 9px;border-radius:20px;font-size:10.5px;letter-spacing:.2px;
  border:1px solid var(--borde2);color:var(--suave)}
.fuentes span.on{color:var(--verde);border-color:rgba(53,200,138,.35);
  background:rgba(53,200,138,.07)}

/* -------------------------------------------------------------------- pestañas */
nav{display:flex;align-items:center;gap:2px;padding:0 22px;height:46px;
  border-bottom:1px solid var(--borde);background:var(--panel)}
nav button{background:none;color:var(--suave);padding:6px 13px;border-radius:7px;font-weight:500}
nav button:hover{background:var(--panel2);color:var(--medio)}
nav button.activa{background:var(--panel3);color:var(--texto)}
.hueco{flex:1}
.contador{color:var(--suave);font-size:12px}
.creditos{font-size:12px;font-weight:500;padding:4px 11px;border-radius:20px;
  background:var(--panel3);border:1px solid var(--borde2);color:var(--medio);
  margin-left:12px;cursor:pointer}
.creditos:hover{border-color:var(--acento);color:var(--texto)}
.creditos.pocos{color:var(--ambar);border-color:rgba(232,174,60,.4);background:rgba(232,174,60,.08)}
.salir{background:none;color:var(--suave);font-size:12px;padding:5px 9px;margin-left:2px}
.salir:hover{background:var(--panel2);color:var(--texto)}

/* --------------------------------------------------------------------- trabajo */
.trabajo{margin:14px 22px 0;padding:12px 14px;background:var(--panel);
  border:1px solid var(--borde);border-radius:var(--r);font-size:13px}
.barra{height:3px;background:var(--panel3);border-radius:3px;overflow:hidden;margin-bottom:9px}
.barra span{display:block;height:100%;background:var(--acento);width:0;transition:width .3s}
#trabajo-texto{color:var(--medio)}
#trabajo-log{margin:8px 0 0;padding-left:16px;color:var(--suave);font-size:12px;
  max-height:150px;overflow:auto}
details summary{cursor:pointer;color:var(--suave);font-size:12px;margin-top:6px}

/* ----------------------------------------------------------------------- vistas */
main{padding:22px;max-width:1180px;margin:0 auto}
.vista{animation:aparece .14s ease}
@keyframes aparece{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}
h2.titulo{font-size:16px;margin:0 0 16px;font-weight:600}

/* Las tarjetas se reparten el ancho, pero solo dentro del panel: si la rejilla
   se aplica a la seccion entera, la barra de subpestanas acaba en una columna. */
#panel-negocio:not(.oculto),#panel-servidor:not(.oculto),
#panel-importar:not(.oculto){display:grid;gap:var(--e3);
  grid-template-columns:repeat(auto-fit,minmax(330px,1fr));align-items:start}

.tarjeta{background:var(--panel);border:1px solid var(--borde);border-radius:12px;
  padding:20px 22px;box-shadow:var(--sombra)}
.tarjeta h2{margin:0 0 5px;font-size:14.5px;font-weight:600;letter-spacing:-.1px}
.ayuda{color:var(--suave);font-size:12.5px;margin:0 0 16px;line-height:1.5}
.tarjeta label{display:block;margin-bottom:13px;font-size:11.5px;color:var(--medio);
  font-weight:500;letter-spacing:.1px}
.tarjeta label input,.tarjeta label textarea,.tarjeta>input{width:100%;margin-top:5px}
.tarjeta label.check{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;
  white-space:normal;color:var(--medio);line-height:1.45}
.tarjeta label.check input{width:14px;height:14px;margin:2px 0 0;flex:0 0 auto}
.fila{display:flex;gap:8px;margin-bottom:12px}
.fila input{flex:1}
.ok{color:var(--verde);font-size:12px;margin-left:10px}

/* ----------------------------------------------------------------------- tabla */
.filtros{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
.filtros input[type=search]{min-width:230px}
#tabla{background:var(--panel);border:1px solid var(--borde);border-radius:12px;
  overflow:hidden;box-shadow:var(--sombra)}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;
  color:var(--suave);padding:11px 14px;background:var(--panel2);font-weight:600;
  border-bottom:1px solid var(--borde)}
td{padding:11px 14px;border-bottom:1px solid var(--borde);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr{cursor:pointer;transition:background .1s}
tbody tr:hover{background:var(--panel2)}
.punt{display:inline-block;min-width:32px;text-align:center;padding:2px 7px;border-radius:6px;
  font-weight:600;font-size:12px;background:var(--panel3);color:var(--suave)}
.punt.alta{background:rgba(53,200,138,.14);color:var(--verde)}
.punt.media{background:rgba(232,174,60,.14);color:var(--ambar)}
.nombre{font-weight:550;letter-spacing:-.1px}
.sub{color:var(--suave);font-size:12px;margin-top:1px}
.gancho{color:var(--medio);font-size:12.5px;max-width:480px;line-height:1.45}
.pastilla{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;
  background:var(--panel3);border:1px solid var(--borde2);color:var(--suave)}
.pastilla.contactado{color:var(--acento2);border-color:rgba(91,141,239,.4);background:rgba(91,141,239,.08)}
.pastilla.respondido,.pastilla.interesado{color:var(--ambar);border-color:rgba(232,174,60,.4);
  background:rgba(232,174,60,.08)}
.pastilla.cliente{color:var(--verde);border-color:rgba(53,200,138,.4);background:rgba(53,200,138,.08)}
.pastilla.descartado{opacity:.45}

/* ---------------------------------------------------------------------- embudo */
.columnas{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px}
.columna{min-width:215px;flex:1;background:var(--panel);border:1px solid var(--borde);
  border-radius:12px;padding:12px}
.columna h3{margin:0 0 11px;font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;
  color:var(--suave);font-weight:600}
.tarj{background:var(--panel2);border:1px solid var(--borde);border-radius:8px;padding:9px 11px;
  margin-bottom:7px;cursor:pointer;font-size:13px;transition:border-color .12s}
.tarj:hover{border-color:var(--acento)}

/* --------------------------------------------------------------------- importar */
.soltar{border:1.5px dashed var(--borde2);border-radius:10px;padding:30px 20px;text-align:center;
  color:var(--suave);cursor:pointer;margin:14px 0 10px;font-size:13px;transition:.12s}
.soltar:hover{border-color:var(--suave)}
.soltar.encima{border-color:var(--acento);color:var(--texto);background:rgba(91,141,239,.05)}

/* ------------------------------------------------------------------------ hoy */
.hoy-item{display:flex;align-items:center;gap:12px;padding:13px 15px;background:var(--panel);
  border:1px solid var(--borde);border-radius:10px;margin-bottom:8px}
.hoy-item .crece{flex:1;min-width:0}
.vacio{color:var(--suave);padding:56px 20px;text-align:center;background:var(--panel);
  border:1px solid var(--borde);border-radius:12px;font-size:13.5px}

/* ---------------------------------------------------------------------- ficha */
.velo{position:fixed;inset:0;background:rgba(4,6,9,.6);z-index:30;
  backdrop-filter:blur(1.5px);animation:aparece .15s ease}
.ficha{position:fixed;top:0;right:0;width:min(560px,94vw);height:100vh;background:var(--panel);
  border-left:1px solid var(--borde);overflow-y:auto;padding:24px 26px 40px;z-index:40;
  animation:entra .18s ease}
@keyframes entra{from{transform:translateX(16px);opacity:.6}to{transform:none;opacity:1}}
.ficha h2{margin:0 0 3px;font-size:19px;font-weight:600;letter-spacing:-.3px}
.ficha h3{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--suave);
  margin:24px 0 9px;font-weight:600}
.ficha select{margin-right:6px}
.enlaces{display:flex;gap:12px;flex-wrap:wrap;font-size:12.5px;margin-top:10px;align-items:center}
.enlaces a{color:var(--acento2);text-decoration:none}
.enlaces a:hover{text-decoration:underline}
.senal{padding:9px 12px;background:var(--panel2);border:1px solid var(--borde);border-radius:8px;
  margin-bottom:6px;font-size:12.5px;line-height:1.5;color:var(--medio)}
.senal b{color:var(--ambar);font-weight:600;margin-right:5px}
.mensaje{background:var(--panel2);border:1px solid var(--borde);border-radius:10px;padding:12px;
  margin-bottom:10px}
.mensaje .canal{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--suave);
  margin-bottom:7px;font-weight:600}
.mensaje textarea{width:100%;min-height:92px;font-size:13px}
.acciones{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap;align-items:center}
.acciones button,.acciones .boton{font-size:12.5px;padding:6px 12px}
.info{color:var(--medio);font-size:12.5px;line-height:1.55}
.ficha textarea#notas{width:100%;font-size:13px}

/* --------------------------------------------------------------------- entrada */
.puerta{position:fixed;inset:0;background:var(--fondo);z-index:100;display:flex;
  align-items:center;justify-content:center;padding:20px}
.puerta-caja{width:min(380px,100%);background:var(--panel);border:1px solid var(--borde);
  border-radius:14px;padding:34px 32px;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.puerta-caja h1{margin:0 0 6px;font-size:21px;font-weight:650;letter-spacing:-.3px}
.puerta-caja label{display:block;margin-bottom:14px;font-size:11.5px;color:var(--medio);
  font-weight:500}
.puerta-caja label input{width:100%;margin-top:5px;padding:9px 11px}
.puerta-caja button{width:100%;margin-top:4px;padding:10px}
.p-error{color:var(--rojo);font-size:12.5px;min-height:17px;margin-bottom:4px}
.p-cambio{margin-top:18px;text-align:center;font-size:12.5px}
/* Cada enlace entero o en su linea: partido por la mitad se lee fatal. */
.p-cambio a{display:inline-block;color:var(--acento2);text-decoration:none}

/* ---------------------------------------------------------------------- packs */
.packs{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin-top:4px}
.pack{background:var(--panel2);border:1px solid var(--borde2);border-radius:10px;padding:16px;
  text-align:center;cursor:pointer;transition:.12s}
.pack:hover{border-color:var(--acento);background:var(--panel3)}
.pack .n{font-size:22px;font-weight:650;letter-spacing:-.5px}
.pack .cual{font-size:11px;color:var(--suave);text-transform:uppercase;letter-spacing:.5px;
  margin-top:2px}
.pack .precio{margin-top:10px;font-size:15px;font-weight:600;color:var(--acento2)}
.pack .leads{font-size:11.5px;color:var(--suave);margin-top:3px}

@media (max-width:720px){
  header{flex-wrap:wrap;height:auto;padding:10px 14px;gap:10px}
  .fuentes{margin-left:0}
  main{padding:14px}
  nav{padding:0 12px;overflow-x:auto}
}

.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  background:rgba(4,6,9,.66);backdrop-filter:blur(2px);padding:20px;animation:aparece .15s ease}
.modal-caja{width:min(560px,100%);background:var(--panel);border:1px solid var(--borde);
  border-radius:14px;padding:26px;box-shadow:0 18px 50px rgba(0,0,0,.5)}
.modal-caja h2{margin:0 0 5px;font-size:16px;font-weight:600}
.pastilla.dir{color:var(--suave);border-color:var(--borde2);font-size:10px;
  text-transform:uppercase;letter-spacing:.4px;vertical-align:1px}

/* ------------------------------------------------------------------ opciones */
.opciones{display:flex;align-items:center;gap:12px;padding:0 22px;height:40px;
  background:var(--panel);border-bottom:1px solid var(--borde);font-size:12.5px;
  overflow-x:auto;white-space:nowrap}
.opciones .etiqueta{color:var(--suave);font-size:11px;text-transform:uppercase;
  letter-spacing:.5px;font-weight:600}
.opciones .sep{width:1px;height:16px;background:var(--borde2);flex:0 0 auto}
.opciones select{padding:4px 8px;font-size:12.5px}
.opciones .check{color:var(--medio)}
#aviso-fuente{color:var(--ambar);text-transform:none;letter-spacing:0;font-weight:400}
.descartado{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--panel);
  border:1px solid var(--borde);border-radius:10px;margin-bottom:7px;font-size:13px}
.descartado .crece{flex:1;min-width:0}
.motivo{color:var(--suave);font-size:12px;margin-top:2px}
.opciones .num{width:58px;padding:4px 6px;text-align:center;font-size:12.5px}
#coste-estimado{text-transform:none;letter-spacing:0;font-weight:400}

/* --------------------------------------------------------------------- admin */
.kpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  margin-bottom:16px}
.kpi{background:var(--panel);border:1px solid var(--borde);border-radius:12px;padding:16px 18px;
  box-shadow:var(--sombra)}
.kpi-et{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--suave);
  font-weight:600}
.kpi-val{font-size:24px;font-weight:650;letter-spacing:-.6px;margin-top:6px}
.kpi-nota{font-size:12px;color:var(--suave);margin-top:3px}
.tarjeta.ancha{max-width:none;margin-bottom:20px;padding:16px}
.tarjeta.ancha table{margin:-4px 0}
.tarjeta.ancha th{background:transparent;border-bottom:1px solid var(--borde)}
.gr{width:100%;height:130px;display:block;background:var(--panel2);border-radius:8px}
.gr-pie{display:flex;gap:16px;font-size:11.5px;color:var(--suave);margin-top:8px;
  align-items:center}
.gr-pie .der{margin-left:auto}
.pt{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px}

/* --------------------------------------------------------------- onboarding */
.onboarding{display:flex;align-items:center;gap:16px;margin:14px 22px 0;padding:13px 16px;
  background:rgba(91,141,239,.08);border:1px solid rgba(91,141,239,.35);border-radius:10px;
  font-size:13px;color:var(--medio)}
.onboarding strong{color:var(--texto);display:block;margin-bottom:2px}
.onboarding button{flex:0 0 auto}
th.ord{cursor:pointer;user-select:none}
th.ord:hover{color:var(--texto)}
.vacio em{color:var(--medio);font-style:normal}

/* ------------------------------------------------------------- adaptable */
/* Regla de oro: la pagina nunca se desplaza en horizontal. Lo que no cabe
   —tablas anchas, barras de opciones— se desplaza dentro de su propia caja. */
html,body{max-width:100%;overflow-x:hidden}
main{max-width:1180px;width:100%}
#tabla,.tarjeta.ancha{overflow-x:auto;-webkit-overflow-scrolling:touch}
#tabla table,.tarjeta.ancha table{min-width:620px}
.tarjeta{max-width:100%}
.columnas{scrollbar-width:thin}
.gr{max-width:100%}
.kpi-val{overflow-wrap:anywhere}
.enlaces{overflow-wrap:anywhere}
.mensaje textarea{max-width:100%}

@media (max-width:1000px){
  main{padding:16px}
  .gancho{max-width:280px}
}
@media (max-width:860px){
  header{flex-wrap:wrap;height:auto;padding:10px 14px;gap:10px}
  #form-buscar{order:2;max-width:none;width:100%}
  .fuentes{order:1;margin-left:auto}
  .opciones{padding:8px 14px;height:auto;flex-wrap:nowrap}
  nav{padding:0 14px}
  th.oculta-movil,td.oculta-movil{display:none}
}
@media (max-width:640px){
  .marca{font-size:14px}
  main{padding:12px}
  .kpis{grid-template-columns:1fr 1fr}
  .kpi{padding:13px 14px}
  .kpi-val{font-size:20px}
  .ficha{width:100vw;padding:18px 16px}
  .hoy-item,.descartado{flex-wrap:wrap}
  .contador{display:none}
  .trabajo{margin:10px 14px 0}
  .onboarding{margin:10px 14px 0;flex-wrap:wrap}
}

/* ------------------------------------------------------------------ campañas */
.campanas{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  align-items:start;margin-bottom:20px}
.tarjeta.camp{margin:0}
.tarjeta.camp.nueva{border-style:dashed}
.senal-cab,.senal-fila{display:grid;gap:8px;align-items:center;
  grid-template-columns:minmax(220px,1fr) 150px 130px 90px 62px 34px 34px}
.senal-cab{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--suave);
  font-weight:600;padding:0 2px 8px;border-bottom:1px solid var(--borde);margin-bottom:10px}
.senal-fila{padding:5px 0}
.senal-fila input,.senal-fila select{width:100%;font-size:12.5px;padding:6px 8px}
.senal-fila .del{padding:5px 8px;font-size:12px}
.senal-fila .check{justify-content:center}
@media (max-width:900px){
  .senal-cab{display:none}
  .senal-fila{grid-template-columns:1fr 1fr;padding:10px;background:var(--panel2);
    border-radius:8px;margin-bottom:8px}
  .senal-fila .txt{grid-column:1/-1}
}

/* -------------------------------------------------------------- subpestañas */
.subpes{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--borde)}
.subpes button{background:none;color:var(--suave);padding:8px 14px;border-radius:0;
  border-bottom:2px solid transparent;font-weight:500}
.subpes button.activa{color:var(--texto);border-bottom-color:var(--acento)}
.subpes span{opacity:.6;font-size:11.5px}

/* ------------------------------------------------------------ selección lote */
.cel-sel{width:34px;text-align:center}
.cel-sel input{width:14px;height:14px;accent-color:var(--acento);cursor:pointer}
tr.elegida td{background:rgba(91,141,239,.08)}
.barra-lote{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;
  padding:10px 14px;background:rgba(91,141,239,.1);border:1px solid rgba(91,141,239,.35);
  border-radius:10px;font-size:13px}
.barra-lote select{padding:5px 8px;font-size:12.5px}
.etiqs{margin-top:4px;display:flex;gap:4px;flex-wrap:wrap}
.etiq{font-size:10.5px;padding:1px 7px;border-radius:20px;background:var(--panel3);
  border:1px solid var(--borde2);color:var(--medio)}

/* ---------------------------------------------------------------- arrastrar */
.columna .soltable{min-height:60px}
.columna.encima{border-color:var(--acento);background:rgba(91,141,239,.06)}
.tarj{position:relative;cursor:grab}
.tarj:active{cursor:grabbing}
.tarj.arrastrando{opacity:.4}
.tarj .punt{position:absolute;top:8px;right:8px;font-size:10.5px;min-width:26px}
.pack.actual{border-color:var(--verde);background:rgba(53,200,138,.07)}
.etiq{cursor:pointer;user-select:none}
.etiq.on{background:rgba(91,141,239,.18);border-color:var(--acento);color:var(--acento2)}
.etiq.nueva{border-style:dashed}

/* ----------------------------------------------------------------- secuencias */
.fila-tit{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.fila-tit h2{margin:0}
.paso{display:grid;gap:10px;align-items:start;grid-template-columns:28px 120px 150px 1fr 34px;
  padding:10px 0;border-top:1px solid var(--borde)}
.paso-n{width:24px;height:24px;border-radius:50%;background:var(--panel3);color:var(--medio);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}
.paso .espera{font-size:12px;color:var(--suave);display:flex;align-items:center;gap:5px}
.paso .dias{width:52px;text-align:center;padding:4px 6px}
.paso textarea{width:100%;font-size:12.5px;min-height:62px}
.paso select{width:100%}
@media (max-width:820px){
  .paso{grid-template-columns:28px 1fr}
  .paso textarea{grid-column:1/-1}
}
.sub-tit{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--suave);
  font-weight:600;margin:20px 0 10px}
.hoy-seq{background:var(--panel);border:1px solid var(--borde);border-radius:10px;
  padding:14px 16px;margin-bottom:10px}
.hoy-seq textarea{width:100%;font-size:13px;background:var(--panel2)}
.hoy-seq .paso-n{width:30px;height:30px;font-size:11px;flex:0 0 auto}
.aviso-falta{font-size:12px;color:var(--ambar);background:rgba(232,174,60,.08);
  border:1px solid rgba(232,174,60,.3);border-radius:6px;padding:7px 10px;margin-bottom:8px}
.aviso-falta code{background:rgba(0,0,0,.25);padding:1px 5px;border-radius:4px;font-size:11px}

/* ------------------------------------------------------- buscador rápido */
#rapido{align-items:flex-start;padding-top:14vh}
#rapido .modal-caja{width:min(560px,100%)}
#r-txt{width:100%;font-size:15px;padding:11px 13px}
.r-res{max-height:46vh;overflow-y:auto;margin-top:10px}
.r-item{padding:9px 11px;border-radius:8px;cursor:pointer}
.r-item:hover,.r-item.on{background:var(--panel3)}
.sep-v{display:inline-block;width:1px;height:11px;background:var(--borde2);margin:0 9px;
  vertical-align:-1px}


/* --------------------------------------------------------------------- tema */
.tema{background:none;color:var(--suave);font-size:14px;padding:5px 8px;margin-left:2px;
  line-height:1}
.tema:hover{background:var(--panel2);color:var(--texto)}
:root[data-tema="claro"] .gr{background:var(--panel2)}
:root[data-tema="claro"] .puerta-caja{box-shadow:0 12px 40px rgba(16,24,40,.12)}
:root[data-tema="claro"] .velo{background:rgba(16,24,40,.35)}
:root[data-tema="claro"] .modal{background:rgba(16,24,40,.4)}
.pie-legal{padding:18px 22px 40px;color:var(--suave);font-size:12px;text-align:center}
.pie-legal a{color:var(--suave);text-decoration:none;margin:0 7px}
.pie-legal a:hover{color:var(--texto);text-decoration:underline}

/* ----------------------------------------------------------------- informes */
.fila-barra{display:grid;grid-template-columns:110px 1fr 56px;gap:10px;align-items:center;
  margin-bottom:8px;font-size:12.5px}
.fila-barra .et{color:var(--medio);text-transform:capitalize}
.fila-barra .num{text-align:right;color:var(--texto);font-weight:600}
.barrita{height:8px;background:var(--panel3);border-radius:4px;overflow:hidden}
.barrita span{display:block;height:100%;border-radius:4px;transition:width .3s}
.dos-col{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  align-items:start}
.dos-col .tarjeta{margin-bottom:0}
.check.apagado{opacity:.45;cursor:not-allowed}
.check.apagado input{cursor:not-allowed}

/* ==========================================================================
   Repaso de armonía visual
   Tres reglas que antes no se cumplían y por eso todo bailaba:
   1. Un solo sistema de alturas: 30 px los controles compactos, 34 los de la
      cabecera. Antes cada control media una cosa y las filas quedaban rotas.
   2. Una escala de espacios: 8, 12, 16, 24. Nada de valores sueltos.
   3. Las barras de arriba ocupan lo mínimo: el contenido es lo que importa.
   ========================================================================== */

:root{ --e1:8px; --e2:12px; --e3:16px; --e4:24px; --alto:30px; --alto-g:34px; }

/* --- menos cromo antes del contenido --- */
header{height:52px;gap:14px}
#q{height:var(--alto-g)}
#btn-buscar{height:var(--alto-g);padding:0 18px}
.opciones{height:36px;gap:10px;font-size:12px}
.opciones select,.opciones .num{height:var(--alto);padding:0 8px}
.opciones .num{width:52px}
.opciones .sep{height:14px;margin:0 2px}
nav{height:42px}
nav button{padding:5px 12px;font-size:13px}

/* --- el aviso de arranque no debe robar la pantalla --- */
.onboarding{margin:var(--e2) 22px 0;padding:10px 14px;font-size:12.5px;gap:12px}
.onboarding strong{display:inline;margin-right:4px}
.onboarding button{padding:6px 12px;font-size:12.5px}
.cerrar-aviso{background:none;color:var(--suave);padding:4px 6px;font-size:15px;line-height:1}
.cerrar-aviso:hover{background:var(--panel2);color:var(--texto)}

/* --- todos los controles de filtro a la misma altura y en una sola fila --- */
main{padding:var(--e4) 22px 0}
.filtros{gap:var(--e1);margin-bottom:var(--e3);align-items:center}
.filtros input,.filtros select,.filtros button,.filtros .boton{height:var(--alto);
  padding:0 10px;font-size:12.5px;display:inline-flex;align-items:center}
.filtros input[type=search]{min-width:200px;flex:1 1 200px;max-width:280px}
.filtros .check{height:var(--alto);padding:0 4px;white-space:nowrap}
.barra-lote{padding:8px 12px;gap:var(--e1)}
.barra-lote select,.barra-lote button{height:var(--alto);padding:0 10px;font-size:12.5px}

/* --- ritmo vertical: los títulos de sección respiran igual en todas partes --- */
.titulo{margin:var(--e4) 0 var(--e2);font-size:15px}
.vista > .titulo:first-child{margin-top:0}
.sub-tit{margin:var(--e4) 0 var(--e2)}
.tarjeta,.tarjeta.ancha{margin-bottom:var(--e3)}
.kpis{margin-bottom:var(--e3);gap:var(--e2)}
.subpes{margin-bottom:var(--e3)}

/* --- tabla: todas las filas con la misma altura, con etiquetas o sin ellas --- */
td{padding:10px 14px;height:56px}
.etiqs{margin-top:3px}
.datos-lead{display:flex;gap:6px;align-items:center}
.datos-lead i{font-style:normal;font-size:11px;padding:2px 6px;border-radius:5px;
  background:var(--panel3);color:var(--medio);line-height:1.5}
.datos-lead i.no{opacity:.28}

/* --- embudo: caben todas las columnas y se ve que hay más a la derecha --- */
.columnas{gap:var(--e1);padding-bottom:var(--e1)}
.columna{min-width:180px;padding:10px}
.columna h3{margin-bottom:var(--e1)}
.columna .soltable{min-height:80px}
.tarj{padding:8px 10px;margin-bottom:6px}
.embudo-nota{font-size:11.5px;color:var(--suave);margin:-4px 0 var(--e2)}

/* --- informes: la barra no miente cuando los números son pequeños --- */
.fila-barra{grid-template-columns:104px 1fr 44px;gap:var(--e1);margin-bottom:6px}
.barrita{height:6px}
.dos-col{gap:var(--e3)}

/* --- el pie legal, siempre abajo del todo y separado --- */
.pie-legal{margin-top:var(--e4);padding:var(--e3) 22px var(--e4)}

/* --- ficha: mismo ritmo que el resto --- */
.ficha h3{margin:var(--e4) 0 var(--e1)}
.ficha .acciones{margin-top:var(--e1)}
.proyecto{height:var(--alto);padding:0 8px;font-size:12.5px;max-width:190px;
  background:var(--panel2);border-color:var(--borde2);color:var(--medio)}
.proyecto:hover{color:var(--texto)}
.panel{animation:aparece .12s ease}

/* La barra de subpestanas siempre a lo ancho, pase lo que pase con el panel. */
.subpes{width:100%;flex-wrap:wrap}
.panel{width:100%}

/* ==========================================================================
   Adaptación progresiva
   El fallo no era que desbordara: era que pasaba de "bien" a "roto" de golpe.
   Ahora cada franja de ancho tiene su reparto, y los controles se reagrupan
   en vez de encogerse hasta quedar inservibles.
   ========================================================================== */

/* La cabecera nunca aprieta el buscador: o cabe, o se va a su propia línea. */
header{flex-wrap:wrap;row-gap:8px}
#form-buscar{flex:1 1 320px;min-width:0}
#q{min-width:0}
.marca{flex:0 0 auto}
.proyecto{flex:0 0 auto}
.fuentes{flex:0 0 auto}

/* La barra de opciones se reparte en líneas en vez de desplazarse a ciegas:
   un control cortado por la derecha es un control que no existe. */
.opciones{flex-wrap:wrap;height:auto;min-height:36px;padding-block:6px;row-gap:6px;
  overflow:visible;white-space:normal}
.opciones .hueco{flex:1 1 auto}
#aviso-fuente,#coste-estimado{flex:0 0 auto}

/* Los filtros se colocan solos: cada uno ocupa lo que necesita y bajan de línea
   ordenados, sin dejar un botón suelto al final. */
.filtros{flex-wrap:wrap;row-gap:8px}
.filtros > *{flex:0 0 auto}
.filtros input[type=search]{flex:1 1 220px;max-width:340px;min-width:160px}
.filtros select{flex:0 1 auto;min-width:132px}

@media (max-width:1180px){
  .gancho{max-width:340px}
}

@media (max-width:1000px){
  header{gap:10px}
  .fuentes{order:3;margin-left:auto}
  #form-buscar{order:4;flex:1 1 100%}
  .gancho{max-width:260px}
  .kpis{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
}

@media (max-width:900px){
  /* En esta franja la tabla ya no cabe entera: el gancho se lee en la ficha. */
  th.oculta-media,td.oculta-media{display:none}
  .columna{min-width:168px}
  .senal-cab{display:none}
}

@media (max-width:860px){
  .opciones{padding-inline:14px}
  nav{padding-inline:14px}
  main{padding-inline:14px}
  .onboarding,.trabajo{margin-inline:14px}
  .pie-legal{padding-inline:14px}
}

@media (max-width:680px){
  .marca{font-size:15px}
  .proyecto{max-width:130px}
  .opciones .etiqueta{display:none}
  .filtros input[type=search]{flex:1 1 100%;max-width:none}
  .filtros select{flex:1 1 45%;min-width:0}
  .filtros button,.filtros .boton{flex:1 1 45%;justify-content:center}
  .barra-lote select,.barra-lote button{flex:1 1 45%}
  .subpes{gap:0;overflow-x:auto;flex-wrap:nowrap}
  .subpes button{padding:8px 10px;font-size:12.5px;white-space:nowrap}
  .dos-col,.campanas,.packs{grid-template-columns:1fr}
}

@media (max-width:520px){
  header{padding:10px 12px}
  .cel-sel{width:28px}
  td,th{padding:9px 10px}
  .kpis{grid-template-columns:1fr}
  .fila-barra{grid-template-columns:88px 1fr 40px}
  .acciones{gap:5px}
  .acciones button,.acciones .boton{flex:1 1 auto;justify-content:center}
}

/* La cabecera crece si su contenido baja de línea. Con altura fija, el buscador
   se montaba encima de la barra de opciones al estrecharse la ventana. */
header{height:auto;min-height:52px;padding-block:9px;align-items:center}
.opciones{min-height:auto}

/* --- barra de opciones plegable en pantallas estrechas --- */
.plegable{display:none;height:var(--alto-g);padding:0 12px;font-size:13px;flex:0 0 auto}
.plegable::after{content:" ▾";font-size:10px;opacity:.7}
body.opciones-abiertas .plegable::after{content:" ▴"}

@media (max-width:1000px){
  .plegable{display:inline-flex;align-items:center}
  .opciones{display:none}
  body.opciones-abiertas .opciones{display:flex}
  /* Con el buscador en su línea, el botón de opciones va a su lado. */
  #form-buscar{flex:1 1 260px;order:4}
  .plegable{order:5}
}

/* --- filtros y acciones, cada uno a lo suyo --- */
/* Antes iban mezclados en una sola fila y al estrecharse salían cuatro líneas
   con un botón suelto en cada una. Ahora son dos grupos que se reparten. */
.filtros{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--e2)}
.filtros-campos,.filtros-acciones{display:flex;flex-wrap:wrap;gap:var(--e1);
  align-items:center}
.filtros-campos{flex:1 1 auto;min-width:0}
.filtros-acciones{flex:0 0 auto;justify-content:flex-end}
.filtros-campos > *,.filtros-acciones > *{height:var(--alto);padding:0 10px;
  font-size:12.5px;display:inline-flex;align-items:center}
.filtros-campos input[type=search]{flex:1 1 190px;max-width:300px;min-width:150px}
.filtros-campos select{min-width:126px}
.filtros-campos .check{padding:0 4px;white-space:nowrap}

@media (max-width:1000px){
  .fuentes{display:none}           /* el estado de las fuentes vive en Opciones */
  .filtros{flex-direction:column;align-items:stretch}
  .filtros-acciones{justify-content:flex-start}
}
@media (max-width:680px){
  .filtros-campos > *{flex:1 1 45%;min-width:0}
  .filtros-campos input[type=search]{flex:1 1 100%;max-width:none}
  .filtros-acciones > *{flex:1 1 auto;justify-content:center}
}

/* --- últimos ajustes de pantalla estrecha --- */
@media (max-width:560px){
  /* La chapa de créditos no necesita la palabra: el número se entiende solo. */
  .creditos{font-size:11.5px;padding:3px 8px;margin-left:6px}
  .creditos::after{content:""}
  /* Y la tabla enseña lo esencial sin obligar a desplazarse tanto. */
  #tabla table{min-width:440px}
  th.oculta-estrecha,td.oculta-estrecha{display:none}
  .datos-lead i{padding:1px 4px;font-size:10px}
  nav button{padding:5px 9px;font-size:12.5px}
}
@media (max-width:420px){
  .marca{font-size:14px}
  .proyecto{max-width:104px;font-size:12px}
  #tabla table{min-width:380px}
}

@media (max-width:430px){
  .p-cambio{display:flex;flex-direction:column;gap:9px}
  .p-cambio .sep-v{display:none}
}