/* ==========================================================================
   PANEL DE ADVISORS
   Misma paleta que la web pública: no es otro producto, es la misma casa.
   Una columna, tarjetas que se leen de un vistazo, y la acción evidente.
   Sin menú, sin pestañas, sin configuración: nada que aprender.
   ========================================================================== */

.pnl{background:var(--ink);color:var(--cream);min-height:100vh}

/* --- Cabecera --- */
.pn-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;
  justify-content:space-between;gap:var(--s9);
  padding:var(--s7) var(--s10);background:rgba(6,19,30,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--rule-soft)}
.pn-brand{display:flex;align-items:center;gap:var(--s5);font-weight:700;
  letter-spacing:.04em}
.pn-mark{width:9px;height:9px;border-radius:50%;background:var(--copper-lit);
  box-shadow:0 0 10px 1px rgba(227,148,99,.7);flex:0 0 auto;
  animation:pn-live 2.6s ease-in-out infinite}
.pn-who{font-family:var(--mono);font-size:var(--t-1);letter-spacing:.14em;
  text-transform:uppercase;color:var(--mist-dim);font-weight:400;
  margin-left:var(--s5)}
.pn-top-r{display:flex;align-items:center;gap:var(--s7)}
.pn-copy{background:none;border:1px solid var(--rule);color:var(--mist);
  padding:var(--s5) var(--s8);font-size:var(--t-3);cursor:pointer;
  font-family:var(--sans);transition:border-color var(--m-fast),color var(--m-fast)}
.pn-copy:hover{border-color:var(--copper);color:var(--cream)}
.pn-out{font-size:var(--t-3);color:var(--mist-dim)}
.pn-out:hover{color:var(--cream)}

.pn-main{max-width:860px;margin:0 auto;padding:var(--s16) var(--s10) var(--s22)}

/* --- El agente habla primero --- */
.pn-agent{border:1px solid var(--rule);border-left:2px solid var(--copper);
  background:var(--ink-2);padding:var(--s10) var(--s12);margin-bottom:var(--s14)}
.pn-agent-h{display:flex;align-items:center;gap:var(--s4);font-family:var(--mono);
  font-size:var(--t-1);letter-spacing:.18em;text-transform:uppercase;
  color:var(--mist-dim);margin-bottom:var(--s6)}
.pn-dot{width:6px;height:6px;border-radius:50%;background:var(--copper-lit);
  box-shadow:0 0 8px 1px rgba(227,148,99,.7);animation:pn-live 2.4s ease-in-out infinite}
@keyframes pn-live{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.pn-dot{animation:none}}
.pn-agent-t{font-size:var(--t-8);color:var(--cream);
  line-height:1.4;letter-spacing:-.012em;font-weight:520}
.pn-avisos{list-style:none;padding:0;margin:var(--s9) 0 0;display:grid;gap:var(--s2);
  counter-reset:av}
.pn-avisos li{counter-increment:av;display:flex;gap:var(--s6);align-items:baseline;
  padding:var(--s5) 0;border-top:1px solid var(--rule-soft)}
.pn-avisos li::before{content:counter(av,decimal-leading-zero);
  font-family:var(--mono);font-size:var(--t-1);letter-spacing:.1em;
  color:var(--copper-lit);flex:0 0 auto}
.pn-avisos a{color:var(--mist);font-size:var(--t-4);line-height:1.6}
.pn-avisos a:hover{color:var(--cream)}
.pn-avisos strong{color:var(--copper-lit);font-weight:600}

/* --- Tarjeta de cliente --- */
.pn-c{border:1px solid var(--rule-soft);background:var(--ink-2);
  padding:var(--s10) var(--s12);margin-bottom:var(--s7)}
.pn-c:target{border-color:var(--copper)}

.pn-c-n{font-size:var(--t-6);font-weight:600;color:var(--cream)}
.pn-c-m{font-size:var(--t-3);color:var(--mist-dim);margin-top:var(--s2)}

/* Estados: seis botones, el activo en cobre. Sin desplegables. */
.pn-est{display:flex;gap:var(--s1);flex-wrap:wrap}
.pn-e{background:none;border:1px solid var(--rule-soft);color:var(--mist-dim);
  padding:var(--s3) var(--s6);font-size:var(--t-1);font-family:var(--mono);
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  transition:border-color var(--m-fast),color var(--m-fast),background var(--m-fast)}
.pn-e:hover{color:var(--cream);border-color:var(--steel)}
.pn-e.on{border-color:var(--copper);color:var(--cream);background:rgba(176,80,30,.16)}

/* El mapa que dibujó el agente */
.pn-mapa{margin-top:var(--s9);padding:var(--s9) var(--s10);background:var(--ink);
  border-left:2px solid var(--copper);white-space:pre-wrap;
  font-size:var(--t-4);line-height:1.75;color:var(--cream)}
.pn-mapa-go{margin-top:var(--s9);display:flex;align-items:center;gap:var(--s7);
  flex-wrap:wrap}
.pn-hint{font-size:var(--t-3);color:var(--mist-dim)}

.pn-det{margin-top:var(--s9);border-top:1px solid var(--rule-soft);
  padding-top:var(--s7)}
.pn-det summary{cursor:pointer;font-size:var(--t-3);color:var(--mist-dim);
  list-style:none}
.pn-det summary::-webkit-details-marker{display:none}
.pn-det summary::before{content:"+ ";color:var(--copper)}
.pn-det[open] summary::before{content:"− "}
.pn-det summary:hover{color:var(--cream)}
.pn-raw{white-space:pre-wrap;font-family:var(--mono);font-size:var(--t-2);
  line-height:1.75;color:var(--mist);margin-top:var(--s7);
  padding:var(--s8);background:var(--ink);overflow-x:auto}
.pn-meta{margin-top:var(--s5);font-size:var(--t-2);color:var(--mist-dim);
  font-family:var(--mono);letter-spacing:.06em}
.pn-warn{color:var(--copper-lit)}





/* --- Estado vacío: dibujado, no un párrafo suelto. Es la primera pantalla
   que ve un advisor nuevo y no debería ser un hueco. --- */
.pn-empty{color:var(--mist);font-size:var(--t-5);line-height:1.75;
  border:1px dashed var(--rule);padding:var(--s16) var(--s12);text-align:center}
.pn-empty img{width:200px;height:auto;margin:0 auto var(--s10);display:block;
  opacity:.9}
.pn-empty .pn-hint{margin-top:var(--s8);font-family:var(--mono);
  font-size:var(--t-2);color:var(--copper-lit);word-break:break-all}
.pn-prep img{flex:0 0 auto;opacity:.85}

/* --- Acceso --- */
.pn-login{min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:var(--s10);position:relative;overflow:hidden}
/* Un solo gesto: el halo de cobre que respira detrás de la tarjeta. Es la
   marca reconocible antes de leer una palabra. */
.pn-login::before{content:"";position:absolute;width:min(620px,90vw);
  height:min(620px,90vw);border-radius:50%;
  background:radial-gradient(circle,rgba(176,80,30,.16),transparent 62%);
  filter:blur(10px);animation:pn-halo 9s ease-in-out infinite}
@keyframes pn-halo{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.12);opacity:1}}
@media (prefers-reduced-motion:reduce){.pn-login::before{animation:none}}
.pn-card{width:100%;max-width:380px;border:1px solid var(--rule);
  background:linear-gradient(180deg,rgba(14,58,90,.28),var(--ink-2) 55%);
  padding:var(--s16);position:relative;z-index:1;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.95),
    inset 0 1px 0 rgba(255,255,255,.05)}
.pn-card .pn-brand{margin-bottom:var(--s12)}
.pn-h1{font-size:var(--t-7);font-weight:600;margin-bottom:var(--s12)}
.pn-card p{margin-bottom:var(--s9)}
.pn-err{color:var(--copper-lit);font-size:var(--t-4);
  border-left:2px solid var(--copper);padding-left:var(--s6)}
.pn-note{margin-top:var(--s12);font-size:var(--t-3);color:var(--mist-dim)}

@media (max-width:719px){
  .pn-top{padding:var(--s6) var(--s7);flex-wrap:wrap;gap:var(--s5)}
  .pn-main{padding:var(--s12) var(--s7) var(--s20)}
  .pn-c{padding:var(--s9) var(--s8)}
  .pn-e{min-height:44px;display:inline-flex;align-items:center}
  .pn-copy{min-height:44px}
}

/* --- Filtros y búsqueda: con veinte clientes la lista deja de servir --- */
.pn-filtros{display:flex;flex-wrap:wrap;gap:var(--s6);align-items:center;
  margin-bottom:var(--s10)}
.pn-buscar{flex:1;min-width:220px;background:var(--ink-2);
  border:1px solid var(--rule-soft);color:var(--cream);
  padding:var(--s5) var(--s7);font-size:var(--t-4);font-family:var(--sans)}
.pn-buscar:focus{border-color:var(--copper-lit);outline:none}
.pn-chips{display:flex;gap:var(--s2);flex-wrap:wrap}
.pn-f{background:none;border:1px solid var(--rule-soft);color:var(--mist-dim);
  padding:var(--s4) var(--s7);font-size:var(--t-1);font-family:var(--mono);
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  transition:border-color var(--m-fast),color var(--m-fast)}
.pn-f:hover{color:var(--cream)}
.pn-f.on{border-color:var(--copper);color:var(--cream);background:rgba(176,80,30,.14)}

/* --- Alta a mano --- */
.pn-add{border:1px dashed var(--rule);padding:var(--s9) var(--s10);
  margin-bottom:var(--s12)}
.pn-add summary{cursor:pointer;color:var(--mist);font-size:var(--t-4);
  list-style:none}
.pn-add summary::-webkit-details-marker{display:none}
.pn-add summary::before{content:"+ ";color:var(--copper)}
.pn-add[open] summary::before{content:"− "}
.pn-add summary:hover{color:var(--cream)}
.pn-add form{margin-top:var(--s9)}

/* --- Próxima acción: lo que convierte el panel en herramienta --- */





/* --- El agente, por cliente --- */
.pn-ask{margin-top:var(--s9);padding-top:var(--s7);
  border-top:1px solid var(--rule-soft)}
.pn-ask label{font-size:var(--t-3);color:var(--mist-dim);display:block;
  margin-bottom:var(--s4)}
.pn-ask-row{display:flex;gap:var(--s4)}
.pn-ask-row input{flex:1}
.pn-ask-row .btn{margin:0;white-space:nowrap}
.pn-ask-out:not(:empty){margin-top:var(--s6);padding:var(--s7) var(--s8);
  background:var(--ink);border-left:2px solid var(--copper);
  font-size:var(--t-4);line-height:1.7;color:var(--cream)}

@media (max-width:719px){
  .pn-prox{gap:var(--s4)}
  .pn-prox input{flex:1;min-width:0}
  .pn-ask-row{flex-direction:column}
  .pn-ask-row .btn{min-height:44px}
  .pn-f{min-height:44px;display:inline-flex;align-items:center}
}

/* --- Filtro por estado: el embudo, sin montar embudos --- */
.pn-filt{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s10)}
.pn-filt a{border:1px solid var(--rule-soft);padding:var(--s4) var(--s7);
  font-family:var(--mono);font-size:var(--t-1);letter-spacing:.1em;
  text-transform:uppercase;color:var(--mist-dim);
  transition:border-color var(--m-fast),color var(--m-fast)}
.pn-filt a:hover{color:var(--cream);border-color:var(--steel)}
.pn-filt a.on{border-color:var(--copper);color:var(--cream);
  background:rgba(176,80,30,.16)}
.pn-filt b{color:var(--copper-lit);font-weight:600;margin-left:var(--s2)}
.cjk .pn-filt a{letter-spacing:.04em}

/* --- Ya hay base para su oficio: la fábrica, hecha argumento --- */
.pn-base{margin-top:var(--s7);display:inline-flex;align-items:center;gap:var(--s4);
  padding:var(--s4) var(--s7);border:1px solid var(--copper);
  background:rgba(176,80,30,.12);font-size:var(--t-2);color:var(--copper-lit);
  font-family:var(--mono);letter-spacing:.06em}
.pn-base::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--copper-lit)}

@media (max-width:719px){.pn-filt a{min-height:44px;display:inline-flex;align-items:center}}

/* ==========================================================================
   TARJETAS PLEGABLES, AGRUPADAS POR URGENCIA
   Cerrada se escanea; abierta se trabaja. Un panel de veinte cajas iguales
   obliga a leerlo entero — este se lee en diagonal.
   ========================================================================== */

/* --- Grupos --- */
.pn-g{margin-bottom:var(--s14)}
.pn-g-h{display:flex;align-items:center;gap:var(--s5);margin-bottom:var(--s6);
  padding-bottom:var(--s4);border-bottom:1px solid var(--rule-soft);
  font-size:var(--t-1);letter-spacing:.2em;text-transform:uppercase;
  color:var(--mist-dim)}
.pn-g-h span{color:var(--mist-dim);opacity:.6}
.pn-g-hoy .pn-g-h{color:var(--copper-lit);border-bottom-color:var(--copper)}
.pn-g-marcha .pn-g-h,.pn-g-cerrado .pn-g-h{opacity:.62}
.cjk .pn-g-h{letter-spacing:.08em}

/* --- La tarjeta: canto de color por estado, para escanear --- */
.pn-c{border:1px solid var(--rule-soft);border-left:3px solid var(--rule);
  background:var(--ink-2);padding:0;margin-bottom:var(--s2);
  transition:border-color var(--m-fast)}
.pn-c[data-e="enviado"]{border-left-color:var(--steel)}
.pn-c[data-e="rellenado"]{border-left-color:var(--steel-lit)}
.pn-c[data-e="visto"]{border-left-color:var(--copper-lit)}
.pn-c[data-e="activo"]{border-left-color:var(--jade-lit)}
.pn-c[data-e="parado"]{border-left-color:var(--rule)}
.pn-c.on{border-color:var(--rule)}
.pn-c:target{border-color:var(--copper)}

/* --- Fila plegada --- */
.pn-row{width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s7);
  padding:var(--s8) var(--s10);font-family:var(--sans);color:inherit;
  transition:background var(--m-fast)}
.pn-row:hover{background:var(--ink-3)}
.pn-row-m{min-width:0}
.pn-c-n{display:block;font-size:var(--t-6);font-weight:600;color:var(--cream);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-c-m{display:block;font-size:var(--t-2);color:var(--mist-dim);margin-top:var(--s1)}
/* La última anotación en la fila cerrada: saber por dónde ibas sin abrir. */
.pn-c-u{display:block;font-size:var(--t-3);color:var(--mist);margin-top:var(--s3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52ch}
.pn-mapok{color:var(--copper-lit);font-size:var(--t-2)}
.pn-row-r{display:flex;align-items:center;gap:var(--s6);flex:0 0 auto}
.pn-date{font-size:var(--t-1);letter-spacing:.08em;color:var(--mist)}
.pn-badge{font-family:var(--mono);font-size:var(--t-1);letter-spacing:.12em;
  text-transform:uppercase;color:var(--mist-dim);border:1px solid var(--rule-soft);
  padding:var(--s2) var(--s5);white-space:nowrap}
.pn-caret{width:8px;height:8px;border-right:1.5px solid var(--mist-dim);
  border-bottom:1.5px solid var(--mist-dim);transform:rotate(45deg);
  transition:transform var(--m-base);flex:0 0 auto}
.pn-c.on .pn-caret{transform:rotate(-135deg)}

/* --- Cuerpo desplegado --- */
.pn-body{padding:0 var(--s10) var(--s10);border-top:1px solid var(--rule-soft)}
.pn-body > *:first-child{margin-top:var(--s9)}

/* --- Registrar: una accion, un guardado --- */
.pn-act{margin-top:var(--s9);padding:var(--s8) var(--s9);background:var(--ink);
  border:1px solid var(--rule-soft)}
.pn-act-h{font-size:var(--t-1);letter-spacing:.18em;text-transform:uppercase;
  color:var(--mist-dim);margin-bottom:var(--s6)}
.pn-act .pn-est{margin-bottom:var(--s7)}
.pn-act-row{display:flex;gap:var(--s5);align-items:flex-end;flex-wrap:wrap}
.pn-act-row .fld{flex:0 0 auto}
.pn-act-log{flex:1 1 240px}
.pn-act-row .btn{margin:0;white-space:nowrap}
.pn-act-msg:not(:empty){margin-top:var(--s6);font-size:var(--t-3);color:var(--mist-dim)}
.pn-act-msg.ok{color:var(--jade-lit)}
.pn-act-msg.bad{color:var(--copper-lit)}

/* --- El diario: lo que pasó el martes sigue ahí el viernes --- */
.pn-diario{margin-top:var(--s9);padding:var(--s7) var(--s8);background:var(--ink);
  border-left:2px solid var(--rule);white-space:pre-wrap;font-size:var(--t-3);
  line-height:1.85;color:var(--mist);max-height:220px;overflow-y:auto}

@media (max-width:719px){
  /* La cabecera medía 470px en una pantalla de 390: la página se movía de
     lado. Se envuelve y el enlace de copiar pasa a ocupar su propia línea. */
  .pn-top{flex-wrap:wrap;row-gap:var(--s4)}
  .pn-brand{flex:1 1 100%}
  .pn-top-r{flex:1 1 100%;flex-wrap:wrap;gap:var(--s5);
    justify-content:flex-start;min-width:0}
  .pn-copy{order:-1;flex:1 1 100%;text-align:center}
  .pn-out{font-size:var(--t-2)}
  /* Los cinco que fallaban al operarlo con el dedo: enlaces de cabecera a
     20px, el buscador a 39 y el desplegable de alta a 23. */
  .pn-out{min-height:44px;display:inline-flex;align-items:center;
    padding:0 var(--s4)}
  .pn-buscar{min-height:48px}
  .pn-add summary{min-height:44px;display:flex;align-items:center}
  .pn-det summary{min-height:44px;display:flex;align-items:center}
  .pn-row{padding:var(--s7) var(--s7);min-height:60px}
  /* 886px de preámbulo antes del primer cliente en móvil. El alta a mano se
     usa una vez de cada veinte: se pliega hasta abajo. */
  .pn-add{order:99;margin-top:var(--s12);margin-bottom:0}
  /* 886px de preámbulo otra vez tras añadir el botón de lote. En móvil los
     filtros se pliegan: con doce clientes se usa el buscador, no las seis
     pastillas de estado. */
  .pn-chips{display:none}
  .pn-filtros{margin-bottom:var(--s7)}
  .pn-agent{padding:var(--s7) var(--s8)}
  .pn-avisos li{padding:var(--s4) 0}
  .pn-prep{margin-top:var(--s7);padding-top:var(--s6)}
  .pn-main{display:flex;flex-direction:column}
  .pn-agent{padding:var(--s8) var(--s9)}
  .pn-agent-t{font-size:var(--t-5)}
  .pn-filtros{margin-bottom:var(--s8)}
  .pn-body{padding:0 var(--s7) var(--s8)}
  .pn-row-r{gap:var(--s4)}
  .pn-date{display:none}
  .pn-act-row{flex-direction:column;align-items:stretch}
  .pn-act-row .btn{min-height:48px}
  .pn-e{min-height:44px;display:inline-flex;align-items:center}
}

/* ==========================================================================
   FORMACIÓN
   Escalera de cinco niveles. Sin porcentajes de avance ni rachas: el objetivo
   es saber por dónde ibas, no engancharte a volver.
   ========================================================================== */
.fo-d{color:var(--mist);font-size:var(--t-4);line-height:1.7;margin-top:var(--s6)}
.fo-p{margin-top:var(--s7);font-size:var(--t-1);letter-spacing:.14em;
  text-transform:uppercase;color:var(--mist-dim)}
.fo-n{margin-bottom:var(--s16)}
.fo-n-h{display:flex;gap:var(--s7);align-items:baseline;margin-bottom:var(--s8);
  padding-bottom:var(--s5);border-bottom:1px solid var(--rule-soft)}
.fo-n-num{font-size:var(--t-7);color:var(--copper-lit);flex:0 0 auto;line-height:1}
.fo-n-t{display:block;font-size:var(--t-6);font-weight:600;color:var(--cream)}
.fo-n-d{display:block;font-size:var(--t-3);color:var(--mist-dim);margin-top:var(--s2)}
.fo-l{border:1px solid var(--rule-soft);border-left:2px solid var(--rule);
  background:var(--ink-2);margin-bottom:var(--s2)}
.fo-l.vista{border-left-color:var(--jade-lit);opacity:.72}
.fo-l summary{display:flex;justify-content:space-between;align-items:center;
  gap:var(--s7);padding:var(--s7) var(--s9);cursor:pointer;list-style:none}
.fo-l summary::-webkit-details-marker{display:none}
.fo-l summary:hover{background:var(--ink-3)}
.fo-l-t{font-size:var(--t-5);color:var(--cream);font-weight:520}
.fo-l-s{font-size:var(--t-1);letter-spacing:.12em;text-transform:uppercase;
  color:var(--mist-dim);flex:0 0 auto}
.fo-l.vista .fo-l-s{color:var(--jade-lit)}
.fo-b{padding:0 var(--s9) var(--s7);white-space:pre-wrap;font-size:var(--t-4);
  line-height:1.8;color:var(--mist)}
.fo-di,.fo-no{margin:0 var(--s9) var(--s5);padding:var(--s6) var(--s8);
  font-size:var(--t-4);line-height:1.65}
.fo-di{background:var(--jade-wash);border-left:2px solid var(--jade-lit);color:var(--cream)}
.fo-no{background:rgba(176,80,30,.12);border-left:2px solid var(--copper);color:var(--cream)}
.fo-di .mono,.fo-no .mono{font-size:var(--t-1);letter-spacing:.14em;
  text-transform:uppercase;display:block;margin-bottom:var(--s2)}
.fo-di .mono{color:var(--jade-lit)}
.fo-no .mono{color:var(--copper-lit)}
.fo-f{padding:0 var(--s9) var(--s8)}
.fo-f .btn{margin:0}
@media (max-width:719px){
  .fo-l summary{padding:var(--s7);min-height:52px}
  .fo-b{padding:0 var(--s7) var(--s6)}
  .fo-di,.fo-no{margin:0 var(--s7) var(--s5)}
  .fo-f{padding:0 var(--s7) var(--s7)}
  .fo-f .btn{min-height:44px}
}

/* --- La escalera de tres peldaños: gradación real de luz y peso.
   El primero está apagado y hundido; el tercero, iluminado y elevado. La
   distancia entre ellos ES el argumento, así que se ve antes de leerse. --- */
.fo-esc{margin:var(--s9) var(--s9) var(--s7);display:grid;gap:var(--s2)}
.fo-esc-p{padding:var(--s8) var(--s9);position:relative;
  border-left:2px solid var(--rule);transition:transform var(--m-base)}
.fo-esc-1{background:var(--ink);opacity:.55;
  border-left-color:var(--rule-soft)}
.fo-esc-2{background:linear-gradient(90deg,rgba(44,110,155,.14),var(--ink) 70%);
  border-left-color:var(--steel);margin-left:var(--s5)}
.fo-esc-3{background:linear-gradient(90deg,rgba(176,80,30,.18),var(--ink) 72%);
  border-left-color:var(--copper);margin-left:var(--s10);
  box-shadow:0 14px 34px -20px rgba(0,0,0,.9)}
.fo-esc-n{font-size:var(--t-1);letter-spacing:.24em;color:var(--mist-dim);
  margin-bottom:var(--s4)}
.fo-esc-2 .fo-esc-n{color:var(--steel-lit)}
.fo-esc-3 .fo-esc-n{color:var(--copper-lit)}
.fo-esc-t{font-size:var(--t-6);font-weight:600;color:var(--mist);line-height:1.3}
.fo-esc-2 .fo-esc-t{color:var(--cream)}
.fo-esc-3 .fo-esc-t{font-size:var(--t-7);color:var(--cream);letter-spacing:-.012em}
.fo-esc-b{margin-top:var(--s5);font-size:var(--t-3);color:var(--mist-dim);
  line-height:1.7}
.fo-esc-3 .fo-esc-b{color:var(--mist)}

/* --- Tabla comparativa --- */
.fo-tw{margin:var(--s7) var(--s9);overflow-x:auto}
.fo-t{width:100%;border-collapse:collapse;font-size:var(--t-3);min-width:520px}
.fo-t th{text-align:left;padding:var(--s5) var(--s6);border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:var(--t-1);letter-spacing:.12em;
  text-transform:uppercase;color:var(--mist-dim);font-weight:400}
.fo-t td{padding:var(--s6);border-bottom:1px solid var(--rule-soft);
  color:var(--mist);line-height:1.6;vertical-align:top}
.fo-t tr td:first-child{color:var(--cream);font-weight:520}
.fo-t-ok{color:var(--cream) !important;border-left:2px solid var(--copper)}

/* --- Progreso por nivel --- */
.fo-n-x{flex:1;min-width:0}
.fo-n-p{flex:0 0 auto;font-size:var(--t-1);letter-spacing:.1em;color:var(--mist-dim);
  border:1px solid var(--rule-soft);padding:var(--s2) var(--s5)}
.fo-n-p.full{color:var(--jade-lit);border-color:var(--jade-lit)}

@media (max-width:719px){
  .fo-esc,.fo-tw{margin-left:var(--s7);margin-right:var(--s7)}
  .fo-t{min-width:440px}
}

/* --- Índice de la formación: 36 lecciones abiertas eran 19 pantallas --- */
.fo-ix{display:grid;gap:var(--s1);margin-bottom:var(--s16)}
.fo-ix-i{display:flex;align-items:center;gap:var(--s7);padding:var(--s5) var(--s8);
  border:1px solid var(--rule-soft);border-left:2px solid var(--rule);
  background:var(--ink-2);color:var(--mist);
  transition:border-color var(--m-fast),color var(--m-fast)}
.fo-ix-i:hover{border-color:var(--rule);color:var(--cream)}
.fo-ix-i.full{border-left-color:var(--jade-lit)}
.fo-ix-i.full .fo-ix-t{color:var(--mist-dim)}
.fo-ix-n{color:var(--copper-lit);font-size:var(--t-2);flex:0 0 auto;min-width:14px}
.fo-ix-t{flex:1;font-size:var(--t-4)}
.fo-ix-p{font-size:var(--t-1);letter-spacing:.1em;color:var(--mist-dim);flex:0 0 auto}
.fo-ix-i.full .fo-ix-p{color:var(--jade-lit)}
.fo-n{scroll-margin-top:var(--s18)}
@media (max-width:719px){
  .fo-ix-i{min-height:48px}
  .fo-ix-t{font-size:var(--t-3)}
}

/* --- Preparar mapas en lote: la accion que faltaba en la agenda --- */
.pn-prep{margin-top:var(--s9);padding-top:var(--s7);
  border-top:1px solid var(--rule-soft);display:flex;align-items:center;
  gap:var(--s7);flex-wrap:wrap}
.pn-prep .btn{margin:0}

/* --- Llamar y escribir: el advisor esta en la calle con el movil --- */
.pn-cta{margin-top:var(--s9);display:flex;gap:var(--s5);flex-wrap:wrap}
.pn-cta .btn{margin:0}

@media (max-width:719px){
  .pn-cta{flex-direction:column}
  .pn-cta .btn{min-height:48px;text-align:center}
  .pn-prep .btn{width:100%;min-height:48px}
}

/* ==========================================================================
   EN REUNIÓN
   Esto se abre con el cliente delante. Todo lo que hay que decir va en verde
   y entre comillas: se lee literal. Lo que no hay que decir, en cobre.
   ========================================================================== */
.re-buscar{width:100%;margin-top:var(--s8);background:var(--ink);
  border:1px solid var(--rule);color:var(--cream);padding:var(--s7) var(--s8);
  font-size:var(--t-5);font-family:var(--sans)}
.re-buscar:focus{border-color:var(--copper-lit);outline:none}
.re-b{margin-bottom:var(--s16)}
.re-r{border:1px solid var(--rule-soft);background:var(--ink-2);
  margin-bottom:var(--s1)}
.re-r summary{padding:var(--s7) var(--s9);cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:var(--s5)}
.re-r summary::-webkit-details-marker{display:none}
.re-r summary::before{content:"?";font-family:var(--mono);font-size:var(--t-2);
  color:var(--copper-lit);flex:0 0 auto}
.re-r summary:hover{background:var(--ink-3)}
.re-p{font-size:var(--t-5);color:var(--cream)}
.re-rr{padding:0 var(--s9) var(--s7) var(--s14);font-size:var(--t-4);
  line-height:1.75;color:var(--mist)}
.re-ojo{margin:0 var(--s9) var(--s8) var(--s14);padding:var(--s5) var(--s7);
  background:rgba(176,80,30,.12);border-left:2px solid var(--copper);
  font-size:var(--t-3);line-height:1.6;color:var(--cream)}
.re-ojo .mono,.re-di .mono{font-size:var(--t-1);letter-spacing:.14em;
  text-transform:uppercase;display:block;margin-bottom:var(--s2)}
.re-ojo .mono{color:var(--copper-lit)}
.re-nada{padding:var(--s9);color:var(--mist-dim);font-size:var(--t-4);
  border:1px dashed var(--rule);text-align:center}

/* --- El guion --- */
.re-p-i{border-left:2px solid var(--rule);padding:var(--s7) 0 var(--s9) var(--s9);
  margin-bottom:var(--s2);position:relative}
.re-p-i::before{content:"";position:absolute;left:-5px;top:var(--s9);
  width:8px;height:8px;border-radius:50%;background:var(--copper)}
.re-min{font-size:var(--t-1);letter-spacing:.14em;color:var(--mist-dim)}
.re-t{font-size:var(--t-6);font-weight:600;color:var(--cream);margin-top:var(--s2)}
.re-b-t{margin-top:var(--s4);font-size:var(--t-4);line-height:1.75;color:var(--mist)}
.re-di{margin-top:var(--s6);padding:var(--s6) var(--s8);
  background:var(--jade-wash);border-left:2px solid var(--jade-lit);
  font-size:var(--t-5);line-height:1.6;color:var(--cream)}
.re-di .mono{color:var(--jade-lit)}

@media (max-width:719px){
  .re-buscar{min-height:52px}
  .re-r summary{min-height:52px;padding:var(--s6) var(--s7)}
  .re-rr{padding-left:var(--s7);padding-right:var(--s7)}
  .re-ojo{margin-left:var(--s7);margin-right:var(--s7)}
  .re-p-i{padding-left:var(--s7)}
}

/* ==========================================================================
   PROFUNDIDAD Y ACABADO
   El panel era correcto y plano: bordes de 1px sobre fondo liso, todo al
   mismo nivel. Esto le da jerarquía física — lo que importa flota, lo
   cerrado se hunde — sin añadir una sola decoración.
   ========================================================================== */

/* Fondo con la misma rejilla técnica del hero público: el panel deja de
   parecer una hoja en blanco oscura y pertenece a la misma casa. */
.pnl{background:
  linear-gradient(var(--rule-soft) 1px, transparent 1px) 0 0/64px 64px,
  linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px) 0 0/64px 64px,
  radial-gradient(ellipse 90% 60% at 50% -10%, rgba(14,58,90,.42), transparent 70%),
  var(--ink);
  background-attachment:fixed}

/* La agenda es lo primero que se lee: se eleva del resto. */
.pn-agent{box-shadow:0 12px 32px -18px rgba(0,0,0,.9),
  inset 0 1px 0 rgba(255,255,255,.035)}

/* Tarjetas: sombra sutil que crece al abrir. Lo abierto está «encima». */
.pn-c{box-shadow:0 1px 0 rgba(0,0,0,.28);
  transition:border-color var(--m-fast), box-shadow var(--m-base),
    transform var(--m-fast)}
.pn-c:hover{border-color:var(--rule)}
.pn-c.on{box-shadow:0 18px 40px -22px rgba(0,0,0,.95),
  inset 0 1px 0 rgba(255,255,255,.04);position:relative;z-index:2}

/* El grupo de hoy respira más que los demás: jerarquía por aire. */
.pn-g-hoy{margin-bottom:var(--s18)}
.pn-g-hoy .pn-c{background:linear-gradient(180deg,
  rgba(176,80,30,.05), var(--ink-2) 60%)}

/* Botones y pastillas: el estado activo se hunde ligeramente, como una
   tecla pulsada. Es la única metáfora física del panel y es universal. */
.pn-e.on,.pn-f.on{box-shadow:inset 0 1px 3px rgba(0,0,0,.45)}
.pn-e:active,.pn-f:active,.pn-copy:active{transform:translateY(1px)}

/* El instrumento de registrar: hundido, como un panel de control. */
.pn-act{box-shadow:inset 0 2px 8px -4px rgba(0,0,0,.75)}

/* Lecciones y respuestas: la abierta se separa de la pila. */
.fo-l[open],.re-r[open]{box-shadow:0 14px 34px -22px rgba(0,0,0,.9);
  position:relative;z-index:1}

/* Entrada escalonada de los grupos al cargar. Explica el orden: primero
   aparece lo urgente. Se desactiva con reduced-motion. */
@media (prefers-reduced-motion:no-preference){
  .pn-g{animation:pn-in var(--m-slow) var(--ease) both}
  .pn-g:nth-child(2){animation-delay:.04s}
  .pn-g:nth-child(3){animation-delay:.08s}
  .pn-g:nth-child(4){animation-delay:.12s}
  @keyframes pn-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}

/* --- Ilustración de la formación: progreso como algo que sube --- */
.fo-ill{display:block;width:180px;height:auto;margin-top:var(--s9);opacity:.75}
@media (max-width:719px){.fo-ill{width:140px}}