/* =====================================================================================================================
   PULIDO 2 (13-oct). Lo que la primera pasada (pulido.css) no tocó, con el mismo lenguaje: lienzo sin fichas, relieve
   suave, paleta tonal, Schibsted en la app y Newsreader en lo público, movimiento con medida. Va DESPUÉS de pulido.css y
   solo actúa donde la plantilla lo pide (otra pasada arregla en paralelo los navegadores sobre app.css, escena.css y
   pulido.css; aquí no se repite nada de eso):
     · pantallas de la app → su primer bloque lleva .p2 (y .pul-p, para heredar los mandos, campos y tablas comunes)
         Mensajes, Personas, Resumen del informe, Cartera, ficha del consultor, Avisos, Mi cuenta, Metodología…
     · consola           → body.p2-admin        · acceso y /verificar → body.p2-pub
   Accesible: contraste AA, foco visible, objetivos táctiles de 44 px en el móvil y prefers-reduced-motion respetado.
   ===================================================================================================================== */

/* ---------------------------------------------------------------- 0. piezas comunes */
body.app{--p2-papel:linear-gradient(180deg,#fdfdfc,#f6f7f8);
  --p2-sombra-hoja:0 0 0 1px rgba(20,28,42,.05),0 1px 1px rgba(20,28,42,.04),0 10px 22px -12px rgba(20,28,42,.22),0 36px 60px -36px rgba(20,28,42,.38);
  --p2-filete:linear-gradient(90deg,var(--p-hilo-2,rgba(28,35,51,.14)),var(--p-hilo,rgba(28,35,51,.08)) 60%,transparent)}
/* iniciales de una persona: una ficha de nácar con la letra en el acento; el equipo de Odilo, en tinta del banco */
.p2-avatar{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font:600 .9rem/1 var(--f-sans);color:#3b5a96;
  background:radial-gradient(circle at 34% 28%,#fff 0,#eef1f6 55%,#dfe4ec 100%);
  box-shadow:inset 0 0 0 1px rgba(20,28,42,.07),inset 0 -2px 3px rgba(20,28,42,.05),0 1px 2px rgba(20,28,42,.08),0 6px 12px -8px rgba(20,28,42,.32)}
.p2-avatar-equipo,.p2-avatar-titular{color:#fff;background:radial-gradient(circle at 34% 26%,#6c88c2 0,#4a67a4 48%,#34508a 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 0 0 1px rgba(20,35,70,.25),0 1px 2px rgba(20,28,42,.12),0 8px 14px -8px rgba(40,60,110,.55)}
.p2-avatar-pend{color:#8d5f1c;background:radial-gradient(circle at 34% 28%,#fffaf0 0,#f4ead8 60%,#e9dcc2 100%)}
/* dos burbujas de conversación dibujadas (estado vacío de Mensajes): un objeto, no un icono en un círculo */
.p2-burbujas{position:relative;flex:none;width:86px;height:64px}
.p2-burbujas i{position:absolute;display:block;border-radius:14px 14px 14px 5px;
  background:linear-gradient(rgba(28,35,51,.16),rgba(28,35,51,.16)) 12px 13px/58% 3px no-repeat,
             linear-gradient(rgba(28,35,51,.1),rgba(28,35,51,.1)) 12px 21px/38% 3px no-repeat,linear-gradient(180deg,#fff,#f1f3f6);
  box-shadow:0 0 0 1px rgba(20,28,42,.07),0 8px 16px -10px rgba(20,28,42,.4)}
.p2-burbujas i:first-child{left:0;top:0;width:62px;height:36px}
.p2-burbujas i:last-child{right:0;bottom:0;width:50px;height:30px;border-radius:14px 14px 5px 14px;
  background:linear-gradient(rgba(255,255,255,.75),rgba(255,255,255,.75)) 11px 13px/52% 3px no-repeat,linear-gradient(180deg,#5a77b3,#405c97);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 18px -10px rgba(40,60,110,.6)}
@media (prefers-reduced-motion:no-preference){
  .p2-burbujas i:last-child{animation:p2-llega .7s .25s var(--p-curva,ease) both}
}
@keyframes p2-llega{from{opacity:0;transform:translateY(8px) scale(.94)}}

/* ---------------------------------------------------------------- 1. Mensajes (cliente) */
body.app.shell .app-contenido .p2-conv{display:flex;flex-direction:column;max-width:900px}
body.app.shell .p2-conv-cab{display:flex;align-items:center;gap:14px;padding:2px 0 18px;background:var(--p2-filete) 0 100%/100% 1px no-repeat}
body.app.shell .p2-conv-quien{flex:1;min-width:0}
body.app.shell .p2-conv-quien h3{margin:0;font:600 var(--p-fs-titulo,1.04rem)/1.3 var(--f-sans);letter-spacing:-.012em;color:var(--f-tinta)}
body.app.shell .p2-conv-quien p{margin:2px 0 0;font:450 .8rem/1.45 var(--f-sans);color:var(--f-tenue);overflow-wrap:anywhere}
body.app.shell .p2-conv-quien p b{font-weight:600;color:var(--f-tinta-2)}
body.app.shell .p2-conv-n{flex:none;font:550 .76rem var(--f-sans);color:var(--f-tenue)}
body.app.shell .p2-hilo{list-style:none;margin:0;padding:24px 0 6px;display:flex;flex-direction:column;gap:16px}
body.app.shell .p2-msg{display:flex;flex-direction:column;align-items:flex-start;max-width:min(640px,88%)}
body.app.shell .p2-msg-mio{align-self:flex-end;align-items:flex-end}
body.app.shell .p2-msg-autor{margin:0 8px 6px;font:450 .74rem/1.3 var(--f-sans);color:var(--f-tenue)}
body.app.shell .p2-msg-autor b{font-weight:600;color:var(--f-tinta-2)}
body.app.shell .p2-msg-autor time{margin-left:6px}
body.app.shell .p2-burbuja{margin:0;padding:12px 16px;border-radius:18px 18px 18px 6px;white-space:pre-wrap;overflow-wrap:anywhere;
  font:450 .93rem/1.58 var(--f-sans);color:var(--f-tinta);background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(245,247,250,.96));
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(20,28,42,.06),0 1px 2px rgba(20,28,42,.05),0 10px 22px -16px rgba(20,28,42,.35)}
body.app.shell .p2-msg-mio .p2-burbuja{border-radius:18px 18px 6px 18px;color:#fff;background:linear-gradient(180deg,#5874b1,#3f5a95);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 1px rgba(38,56,98,.28),0 12px 22px -14px rgba(40,60,110,.6)}
body.app.shell .p2-msg-cliente .p2-burbuja{background:linear-gradient(180deg,rgba(236,240,247,.96),rgba(229,234,243,.96))}
@media (prefers-reduced-motion:no-preference){
  body.app.shell .p2-msg{animation:p-entra var(--p-t-entra,.46s) var(--p-curva,ease) both}
  body.app.shell .p2-msg:nth-last-child(1){animation-delay:60ms}
}
body.app.shell .p2-vacio-conv{display:flex;align-items:center;gap:24px;padding:34px 0 26px}
body.app.shell .p2-vacio-conv b{display:block;font:600 1rem/1.35 var(--f-sans);color:var(--f-tinta)}
body.app.shell .p2-vacio-conv p{margin:6px 0 0;max-width:52ch;font:450 .88rem/1.6 var(--f-sans);color:var(--f-suave)}
/* el redactor: un carril hundido con el botón dentro; el foco ilumina el carril entero */
body.app.shell .p2-redactor{display:flex;align-items:flex-end;gap:10px;margin-top:20px;padding:7px 7px 7px 16px;border-radius:20px;
  background:linear-gradient(180deg,#eef1f5,#f8f9fb);
  box-shadow:inset 0 1px 2px rgba(20,28,42,.09),inset 0 0 0 1px rgba(20,28,42,.09),0 1px 0 rgba(255,255,255,.9);
  transition:box-shadow var(--p-t2,.2s) var(--p-curva,ease),background var(--p-t2,.2s)}
body.app.shell .p2-redactor:focus-within{background:#fff;box-shadow:inset 0 0 0 1px rgba(59,90,150,.55),var(--p-foco,0 0 0 3px rgba(59,90,150,.22))}
body.app.shell .app-contenido .p2-redactor textarea:not(#p){flex:1;min-width:0;min-height:44px;max-height:220px;margin:0;padding:11px 0!important;resize:none;field-sizing:content;
  border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;outline:0;font:450 .95rem/1.5 var(--f-sans)}
body.app.shell .p2-redactor .btn{flex:none;min-height:42px;border-radius:14px;padding:8px 16px}

/* lo compartido por el equipo: una línea de tiempo con el canal de cada cosa */
body.app.shell .p2-rail{list-style:none;margin:10px 0 0;padding:0;position:relative}
body.app.shell .p2-rail::before{content:"";position:absolute;left:15.5px;top:12px;bottom:12px;width:1px;background:linear-gradient(rgba(59,90,150,.35),rgba(28,35,51,.06))}
body.app.shell .p2-rail>li{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;padding:10px 0 14px}
body.app.shell .p2-rail-ico{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:var(--f-acento);
  background:radial-gradient(circle at 35% 30%,#fff,#eef1f6);box-shadow:0 0 0 1px rgba(20,28,42,.08),0 0 0 5px #f1f3f6,0 4px 10px -6px rgba(20,28,42,.3)}
body.app.shell .p2-rail-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:5px 0 4px;font:450 .76rem/1.4 var(--f-sans);color:var(--f-tenue)}
body.app.shell .p2-rail-meta b{font:600 .9rem var(--f-sans);color:var(--f-tinta)}
body.app.shell .p2-rail-txt{margin:0;max-width:72ch;white-space:pre-wrap;overflow-wrap:anywhere;font:450 .9rem/1.6 var(--f-sans);color:var(--f-tinta-2)}
body.app.shell .p2-adjunto{display:inline-flex;align-items:center;gap:6px;margin:8px 12px 0 0;font:550 .82rem var(--f-sans);color:var(--f-acento)}

/* ---------------------------------------------------------------- 2. Personas (cliente) */
body.app.shell .ajustes.p2-personas{grid-template-columns:minmax(0,1fr)}            /* sin índice: el cuerpo ocupa todo el ancho */
body.app.shell .p2-personas .cuenta-form.p2-col{display:flex;flex-direction:column;align-items:stretch;gap:16px;min-width:0;max-width:760px}
body.app.shell .p2-gente{list-style:none;margin:0;padding:0}
body.app.shell .p2-gente>li{display:flex;align-items:center;gap:14px;padding:12px 0;background:linear-gradient(90deg,var(--p-hilo),transparent 92%) 0 100%/100% 1px no-repeat}
body.app.shell .p2-gente>li:first-child{padding-top:2px}
body.app.shell .p2-gente-quien{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
body.app.shell .p2-gente-quien b{font:600 .92rem/1.35 var(--f-sans);color:var(--f-tinta);overflow-wrap:anywhere}
body.app.shell .p2-gente-quien small{font:450 .78rem/1.45 var(--f-sans);color:var(--f-tenue)}
body.app.shell .p2-papel{display:inline-block;font-weight:650;color:var(--f-tinta-2)}
body.app.shell .p2-papel::first-letter{text-transform:uppercase}
body.app.shell .p2-papel-titular{color:var(--f-acento)}
body.app.shell .p2-gente-accion{flex:none;margin:0}
body.app.shell .p2-sub{margin:6px 0 -6px;font:600 .8rem var(--f-sans);color:var(--f-tinta-2)}
body.app.shell .p2-invitar{display:flex;flex-direction:column;gap:7px;padding-top:16px;background:linear-gradient(90deg,var(--p-hilo),transparent 85%) 0 0/100% 1px no-repeat}
body.app.shell .p2-invitar>label{font:550 .8rem var(--f-sans);color:var(--f-tinta-2)}
body.app.shell .p2-invitar-fila{display:flex;gap:10px;align-items:stretch;max-width:560px}
body.app.shell .p2-invitar-fila input{flex:1;min-width:0}
body.app.shell .p2-invitar>small{max-width:62ch;font:450 .76rem/1.5 var(--f-sans);color:var(--f-tenue)}
body.app.shell .p2-enlace code{display:block;margin:4px 0;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.7);
  font-size:.78rem;overflow-wrap:anywhere;box-shadow:inset 0 0 0 1px rgba(59,90,150,.18)}
body.app.shell .p2-consultor{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
body.app.shell .p2-consultor .btn{margin-left:auto}

/* ---------------------------------------------------------------- 3. Resumen del informe (cliente): una hoja con membrete */
body.app.shell .p2-resumen-rejilla{display:grid;grid-template-columns:minmax(0,740px) minmax(200px,270px);gap:44px;align-items:start}
body.app.shell .p2-hoja{position:relative;padding:30px 38px 26px;border-radius:8px;background:var(--p2-papel);box-shadow:var(--p2-sombra-hoja);overflow:hidden}
body.app.shell .p2-hoja::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#3b5a96,#6f8cc4 55%,rgba(111,140,196,0))}
body.app.shell .p2-hoja-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:16px;margin-bottom:20px;
  background:linear-gradient(90deg,var(--p-hilo-2),var(--p-hilo) 70%,transparent) 0 100%/100% 1px no-repeat}
body.app.shell .p2-hoja-marca b{font-size:1rem}
body.app.shell .p2-hoja-marca small{font-size:.5rem}
body.app.shell .p2-hoja-fecha{font:500 .74rem var(--f-sans);color:var(--f-tenue)}
body.app.shell .p2-hoja-tit{margin:0;font:600 1.28rem/1.25 var(--f-sans);letter-spacing:-.02em;color:var(--f-tinta);text-wrap:balance}
body.app.shell .p2-hoja-emp{margin:4px 0 18px;font:450 .86rem var(--f-sans);color:var(--f-suave)}
body.app.shell .p2-datos{margin:0;display:flex;flex-direction:column}
body.app.shell .p2-datos>div{display:grid;grid-template-columns:minmax(150px,38%) minmax(0,1fr);gap:4px 22px;padding:12px 0;
  background:linear-gradient(90deg,var(--p-hilo),var(--p-hilo) 70%,transparent) 0 100%/100% 1px no-repeat}
body.app.shell .p2-datos dt{font:550 .78rem/1.45 var(--f-sans);color:var(--f-tenue)}
body.app.shell .p2-datos dd{margin:0;font:550 .95rem/1.45 var(--f-sans);color:var(--f-tinta);font-variant-numeric:lining-nums}
body.app.shell .p2-datos .p2-datos-solo{grid-template-columns:1fr}
body.app.shell .p2-dos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px 30px;margin-top:22px}
body.app.shell .p2-dos-col{padding-top:12px;background:linear-gradient(90deg,var(--p2-c,#3b5a96) 0 40px,var(--p-hilo) 40px 80%,transparent) 0 0/100% 2px no-repeat}
body.app.shell .p2-dos-warn{--p2-c:#b07a2a}
body.app.shell .p2-dos-col h4{margin:0 0 8px;font:600 .8rem var(--f-sans);color:var(--f-tinta-2)}
body.app.shell .p2-dos-col ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
body.app.shell .p2-dos-col li{position:relative;padding-left:16px;font:450 .88rem/1.5 var(--f-sans);color:var(--f-tinta-2)}
body.app.shell .p2-dos-col li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--p2-c,#3b5a96);opacity:.85}
body.app.shell .p2-hoja-bancos{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:22px 0 0;font:450 .84rem var(--f-sans);color:var(--f-tinta-2)}
body.app.shell .p2-hoja-bancos span{font:550 .76rem var(--f-sans);color:var(--f-tenue)}
body.app.shell .p2-hoja-bancos b{font-weight:600}
body.app.shell .p2-hoja-bancos b{white-space:nowrap}
body.app.shell .p2-hoja-bancos b+b::before{content:"·";margin-right:14px;color:var(--f-tenue);font-weight:400}
body.app.shell .p2-hoja-pie{margin:24px 0 0;padding-top:12px;background:linear-gradient(90deg,var(--p-hilo),transparent 80%) 0 0/100% 1px no-repeat}
body.app.shell .p2-hoja-vacia{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:240px;justify-content:center}
body.app.shell .p2-hoja-vacia h3{margin:6px 0 0;font:600 1.1rem var(--f-sans);color:var(--f-tinta)}
body.app.shell .p2-hoja-vacia .vacio{padding:0;max-width:46ch}
body.app.shell .p2-vacio-ico{display:grid;place-items:center;color:var(--f-acento)}
body.app.shell .p2-resumen-lado{padding-top:6px}
body.app.shell .p2-resumen-lado h4{margin:0 0 12px;font:600 .84rem var(--f-sans);color:var(--f-tinta-2)}
body.app.shell .p2-resumen-lado ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
body.app.shell .p2-resumen-lado li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;font:450 .83rem/1.55 var(--f-sans);color:var(--f-suave)}
body.app.shell .p2-resumen-lado li .ico{margin-top:2px;color:var(--f-acento)}
@media (prefers-reduced-motion:no-preference){
  body.app.shell .p2-hoja{animation:p2-hoja .6s var(--p-curva,ease) both}
}
@keyframes p2-hoja{from{opacity:0;transform:translateY(12px) rotate(-.4deg)}}

/* ---------------------------------------------------------------- móvil: pantallas del cliente */
@media (max-width:980px){
  body.app.shell .p2-resumen-rejilla{grid-template-columns:minmax(0,1fr);gap:26px}
}
@media (max-width:640px){
  body.app.shell .p2-msg{max-width:92%}
  body.app.shell .p2-vacio-conv{flex-direction:column;align-items:flex-start;gap:16px;padding:24px 0 14px}
  body.app.shell .p2-redactor{padding:6px 6px 6px 14px}
  body.app.shell .p2-redactor .btn{min-height:44px;padding:8px 13px}
  body.app.shell .p2-redactor .btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  body.app.shell .p2-gente>li{flex-wrap:wrap}
  body.app.shell .p2-gente-accion{width:100%;padding-left:52px}
  body.app.shell .p2-gente-accion .btn{min-height:44px}
  body.app.shell .p2-invitar-fila{flex-direction:column}
  body.app.shell .p2-invitar-fila .btn{width:100%}
  body.app.shell .p2-consultor .btn{margin-left:0;width:100%}
  body.app.shell .p2-hoja{padding:22px 20px 20px}
  body.app.shell .p2-datos>div{grid-template-columns:1fr;gap:3px}
}

/* ---------------------------------------------------------------- 4. Equipo: barra lateral, cartera y ficha del consultor */
/* «Equipo Odilo · consultor» en la barra: una línea con su distintivo, no una tarjeta blanca */
body.app.shell .sb .sb-empresa.sb-equipo{box-shadow:none;border:0;padding:8px 10px 12px;gap:10px;align-items:center;border-radius:0;
  font:550 .8rem/1.35 var(--f-sans);color:var(--f-tinta-2);
  background:linear-gradient(90deg,rgba(28,35,51,.12),rgba(28,35,51,.04) 70%,transparent) 0 100%/100% 1px no-repeat}
body.app.shell .sb .sb-empresa.sb-equipo .sb-emp-ini{width:30px;height:30px;border-radius:9px}

/* la tabla de la cartera: la empresa con sus iniciales y una flecha que avanza; la fila entera lleva a la ficha */
body.app.shell .p2-emp{display:flex;align-items:center;gap:12px;min-width:0}
body.app.shell .p2-emp .p2-avatar{width:34px;height:34px;font-size:.82rem}
body.app.shell .p2-emp-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
body.app.shell .p2-emp-txt b{overflow-wrap:anywhere}
body.app.shell .p2-cartera tbody tr{position:relative}
body.app.shell .p2-cartera td.et a{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
body.app.shell .p2-cartera td.et a::after{content:"";position:absolute;inset:0;z-index:1}          /* la fila entera es el enlace */
body.app.shell .p2-cartera td.et a:focus-visible{outline:0}
body.app.shell .p2-cartera tr:has(a:focus-visible){outline:2px solid rgba(59,90,150,.6);outline-offset:-2px;border-radius:10px}
body.app.shell .p2-cartera .p2-ir{flex:none;color:var(--f-acento);opacity:0;transform:translateX(-4px);transition:opacity var(--p-t2,.2s),transform var(--p-t2,.2s) var(--p-curva,ease)}
body.app.shell .p2-cartera tr:hover .p2-ir,body.app.shell .p2-cartera tr:focus-within .p2-ir{opacity:1;transform:none}
body.app.shell .p2-cartera tbody tr:hover{background:linear-gradient(90deg,rgba(255,255,255,.8),rgba(255,255,255,.45) 70%,rgba(255,255,255,.2))}
body.app.shell .p2-cartera td{padding-top:14px!important;padding-bottom:14px!important}
/* la nota: la letra de la banda en su tinta y el grado al lado, como en la escala */
body.app.shell .p2-nota{display:inline-flex;align-items:baseline;gap:5px;font:600 .95rem/1 var(--f-sans);color:var(--f-tinta);font-variant-numeric:lining-nums}
body.app.shell .p2-nota i{font-style:normal;font-weight:650}
body.app.shell .p2-nota b{font-weight:600}
body.app.shell .p2-nota b::before{content:"·";margin-right:5px;color:var(--f-tenue);font-weight:400}
body.app.shell .p2-delta{display:inline-block;margin-left:6px;font:650 .74rem/1 var(--f-sans);letter-spacing:.01em}
body.app.shell .p2-ahorro b{display:block;font-weight:600;color:var(--f-tinta)}
body.app.shell .p2-ahorro small{display:block;margin-top:2px;white-space:nowrap;font:450 .74rem var(--f-sans)}
body.app.shell .p2-cartera-vacia .portada-entradilla{max-width:56ch}

/* la ficha: el histórico de informes como hojas pequeñas del mes; el bocadillo marca los que llevan tu comentario */
body.app.shell .app-contenido .informes-hist.p2-meses{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:0 28px;margin-top:12px}
body.app.shell .app-contenido .p2-meses a span{white-space:nowrap}
body.app.shell .app-contenido .p2-meses li{display:flex;align-items:baseline;gap:10px;padding:9px 0;background:linear-gradient(90deg,var(--p-hilo),transparent 95%) 0 100%/100% 1px no-repeat}
body.app.shell .app-contenido .p2-meses a{display:inline-flex;align-items:center;gap:8px;min-width:0;font:600 .86rem/1.3 var(--f-sans);color:var(--f-tinta);text-decoration:none!important;
  transition:color var(--p-t1,.15s)}
body.app.shell .app-contenido .p2-meses a:hover{color:var(--f-acento)}
body.app.shell .app-contenido .p2-meses a .ico{flex:none;color:var(--f-acento);transition:transform var(--p-t2,.2s) var(--p-curva,ease)}
body.app.shell .app-contenido .p2-meses a:hover .ico{transform:translateY(-1px)}
body.app.shell .app-contenido .p2-meses .p2-con-comentario{display:inline-grid;place-items:center;color:var(--f-acento);opacity:.75}
body.app.shell .app-contenido .p2-meses small{margin:0 0 0 auto;white-space:nowrap;font:450 .72rem var(--f-sans);color:var(--f-tenue)}
/* formularios de la ficha: cada campo con su anchura y el botón alineado con los campos, no con las etiquetas */
body.app.shell .app-contenido .p2-fila-campos{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 14px}
body.app.shell .app-contenido .p2-fila-campos>label{display:flex;flex-direction:column;gap:6px;flex:0 1 200px;min-width:150px}
body.app.shell .app-contenido .p2-fila-campos>.btn{min-height:40px}
body.app.shell .app-contenido .p2-fila-campos>small.tenue{flex:1 1 220px;align-self:center;margin-bottom:0}

/* la línea de tiempo: selector de canal segmentado, carril con el icono de cada canal y lo antiguo plegado */
body.app.shell .p2-filtros{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 2px;padding:4px;border-radius:13px;width:fit-content;max-width:100%;
  background:linear-gradient(180deg,#e9ecf1,#f1f3f6);box-shadow:inset 0 1px 2px rgba(20,28,42,.08),inset 0 0 0 1px rgba(20,28,42,.05),0 1px 0 #fff}
body.app.shell .p2-filtros a{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:5px 12px;border-radius:9px;font:550 .8rem var(--f-sans);color:var(--f-suave);
  text-decoration:none;transition:background var(--p-t2,.2s),color var(--p-t1,.15s),box-shadow var(--p-t2,.2s)}
body.app.shell .p2-filtros a b{font:600 .72rem var(--f-sans);color:var(--f-tenue)}
body.app.shell .p2-filtros a:hover{color:var(--f-tinta)}
body.app.shell .p2-filtros a.on{color:var(--f-tinta);background:linear-gradient(180deg,#fff,#f7f8fa);
  box-shadow:0 0 0 1px rgba(20,28,42,.07),0 1px 2px rgba(20,28,42,.08),0 4px 10px -6px rgba(20,28,42,.25)}
body.app.shell .p2-filtros a.on b{color:var(--f-acento)}
body.app.shell .p2-redactor-linea{margin-top:10px;align-items:center}
body.app.shell .app-contenido .p2-redactor-linea input:not(#p){flex:1;min-width:0;min-height:42px;padding:0!important;border:0!important;background:none!important;
  box-shadow:none!important;outline:0;font:450 .92rem var(--f-sans)}
body.app.shell .p2-solo-lectura{display:flex;align-items:center;gap:8px;margin:8px 0 0;font:450 .82rem var(--f-sans);color:var(--f-tenue)}
body.app.shell .p2-registrar{margin-top:6px}
body.app.shell .p2-tl-lista{margin-top:8px}
body.app.shell .p2-tl-lista>li{padding:9px 0 12px}
body.app.shell .p2-tl-lista .p2-rail-txt{font-size:.88rem}
body.app.shell .p2-tl-aviso .p2-rail-ico{color:#8d5f1c;background:radial-gradient(circle at 35% 30%,#fffaf1,#f5ecdc)}
body.app.shell .p2-tl-expediente .p2-rail-ico,body.app.shell .p2-tl-documento .p2-rail-ico{color:var(--f-tenue)}
body.app.shell .p2-tl-compartida .p2-rail-ico{color:#fff;background:radial-gradient(circle at 34% 26%,#6c88c2,#3f5a95)}
body.app.shell .p2-vis{font:550 .72rem var(--f-sans);color:var(--f-tenue)}
body.app.shell .p2-vis::before{content:"";display:inline-block;width:6px;height:6px;margin:0 6px 1px 0;border-radius:50%;background:rgba(28,35,51,.28);vertical-align:middle}
body.app.shell .p2-vis-compartida{color:var(--f-acento)}
body.app.shell .p2-vis-compartida::before{background:var(--f-acento);box-shadow:0 0 0 3px rgba(59,90,150,.14)}
body.app.shell .p2-tl-mas{margin-top:4px}
body.app.shell .p2-tl-mas>summary{display:flex;align-items:center;gap:10px;width:fit-content;min-height:40px;padding:0 14px 0 46px;
  list-style:none;cursor:pointer;font:600 .84rem var(--f-sans);color:var(--f-acento)}
body.app.shell .p2-tl-mas>summary::-webkit-details-marker{display:none}
body.app.shell .p2-tl-mas>summary::after{display:none}
body.app.shell .p2-tl-mas>summary small{font:450 .76rem var(--f-sans);color:var(--f-tenue)}
body.app.shell .p2-tl-mas[open]>summary{display:none}

/* equipo y personas: sin caja, los subtítulos con aire; las asignaciones con iniciales */
body.app.shell .p2-equipo .p2-estado-emp{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:2px 0 4px}
body.app.shell .p2-equipo .p2-asig td{vertical-align:middle}
body.app.shell .p2-equipo .p2-emp-txt small{display:block;font:450 .74rem var(--f-sans)}
body.app.shell .p2-equipo .p2-emp .p2-avatar{width:30px;height:30px;font-size:.76rem}
body.app.shell .p2-h4{margin:22px 0 2px;padding-top:16px;font:600 .9rem var(--f-sans);color:var(--f-tinta);
  background:linear-gradient(90deg,var(--p-hilo-2),var(--p-hilo) 55%,transparent) 0 0/100% 1px no-repeat}
body.app.shell .p2-equipo .p2-gente .p2-avatar{width:32px;height:32px;font-size:.78rem}
body.app.shell .p2-avatar-baja{opacity:.5;filter:grayscale(1)}
/* los formularios de la consola en una rejilla: cada campo en su columna y la acción al final de la fila */
body.app.shell .p2-rejilla-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 16px;align-items:end;margin-top:14px;padding-top:14px;
  background:linear-gradient(90deg,var(--p-hilo),transparent 80%) 0 0/100% 1px no-repeat}
body.app.shell .p2-rejilla-form>label{display:flex;flex-direction:column;gap:6px;min-width:0;font:550 .8rem var(--f-sans);color:var(--f-tinta-2)}
body.app.shell .p2-rejilla-form :is(select,input){width:100%;min-width:0;max-width:100%}
body.app.shell .p2-rejilla-form .p2-ancho-2{grid-column:span 2}
body.app.shell .p2-rejilla-form .p2-ancho-3{grid-column:span 3}
body.app.shell .p2-rejilla-form .p2-form-tit{grid-column:1 / -1;margin:0;font:600 .84rem var(--f-sans);color:var(--f-tinta)}
body.app.shell .p2-rejilla-form .p2-form-acc{display:flex;justify-content:flex-start}
body.app.shell details.pliegue>.p2-rejilla-form{background:none;padding-top:4px}

@media (max-width:760px){
  body.app.shell .p2-cartera .p2-ir{display:none}
  body.app.shell .p2-cartera tbody tr:hover{background:linear-gradient(90deg,var(--p-hilo-2),var(--p-hilo) 60%,transparent) 0 100%/100% 1px no-repeat}
  body.app.shell .p2-cartera td{padding:0!important}
  body.app.shell .p2-rejilla-form{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.app.shell .p2-rejilla-form .p2-ancho-3{grid-column:1 / -1}
  /* las asignaciones: cada una, una ficha de dos columnas con su etiqueta */
  body.app.shell .p2-equipo .table-scroll:has(>.p2-asig){overflow:visible;-webkit-mask-image:none;mask-image:none}
  body.app.shell .p2-equipo .p2-asig,body.app.shell .p2-equipo .p2-asig tbody{display:block;width:100%;min-width:0!important}
  body.app.shell .p2-equipo .p2-asig thead{display:none}
  body.app.shell .p2-equipo .p2-asig tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;padding:14px 0;
    background:linear-gradient(90deg,var(--p-hilo-2),var(--p-hilo) 60%,transparent) 0 100%/100% 1px no-repeat}
  body.app.shell .p2-equipo .p2-asig td{display:block;padding:0!important;border:0!important;text-align:left!important;background:none!important;position:static!important;min-width:0!important}
  body.app.shell .p2-equipo .p2-asig td.et{grid-column:1 / -1}
  body.app.shell .p2-equipo .p2-asig td[data-et]::before{content:attr(data-et);display:block;margin-bottom:2px;font:550 .72rem var(--f-sans);color:var(--f-tenue)}
}
@media (max-width:640px){
  body.app.shell .p2-filtros{width:100%}
  body.app.shell .p2-filtros a{min-height:40px;flex:1 1 auto;justify-content:center}
  body.app.shell .p2-rejilla-form{grid-template-columns:minmax(0,1fr)}
  body.app.shell .p2-rejilla-form :is(.p2-ancho-2,.p2-ancho-3){grid-column:auto}
  body.app.shell .p2-rejilla-form .btn,body.app.shell .p2-fila-campos .btn{width:100%;min-height:44px}
  body.app.shell .app-contenido .p2-fila-campos>label{flex:1 1 100%}
  body.app.shell .p2-tl-mas>summary{padding-left:0;min-height:44px}
}

/* ---------------------------------------------------------------- 5. Consola de operación (body.p2-admin) */
/* el bloque «Equipo y personas» dentro de la consola: sin la caja blanca y con su aire respecto a las acciones */
body.app.shell.p2-admin .p2-equipo.relieve{margin-top:38px;padding:0;border-radius:0;background:none;box-shadow:none;transform:none}
body.app.shell.p2-admin .p2-equipo.relieve::after{display:none}
body.app.shell.p2-admin .p2-equipo>.w-cab{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 18px;margin-bottom:8px}
body.app.shell.p2-admin .p2-equipo>.w-cab h3{margin:0;font:600 var(--p-fs-titulo,1.04rem)/1.3 var(--f-sans);color:var(--f-tinta)}
body.app.shell.p2-admin .p2-equipo>.w-cab .tenue{font:450 .8rem var(--f-sans);color:var(--f-tenue)}
body.app.shell.p2-admin .admin-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
/* el número de altas pendientes: una cifra que se enciende si hay trabajo */
body.app.shell.p2-admin .p2-cuenta{display:inline-grid;place-items:center;min-width:24px;height:22px;margin-left:8px;padding:0 7px;border-radius:999px;vertical-align:2px;
  font:650 .74rem/1 var(--f-sans);color:var(--f-tenue);background:rgba(28,35,51,.06);box-shadow:inset 0 0 0 1px rgba(28,35,51,.06)}
body.app.shell.p2-admin .p2-cuenta-on{color:#fff;background:linear-gradient(180deg,#5572af,#405c97);box-shadow:0 0 0 3px rgba(59,90,150,.14)}
/* los mandos dentro de la tabla, a la medida: el selector no empuja la tabla fuera de la lámina */
body.app.shell.p2-admin .p2-asignar{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
body.app.shell.p2-admin .p2-asignar select:not(#p){width:auto;max-width:240px;min-width:0}
body.app.shell.p2-admin .p2-celda-form{white-space:nowrap}
body.app.shell.p2-admin .p2-apila :is(th,td):first-child{width:auto;white-space:normal}
body.app.shell.p2-admin .p2-bandeja td,body.app.shell.p2-admin .p2-carga td{vertical-align:middle}
body.app.shell.p2-admin .p2-bandeja .p2-emp-txt .fine{font-size:.74rem}
body.app.shell.p2-admin .p2-emp .p2-avatar{width:32px;height:32px;font-size:.78rem}
/* la carga de cada consultor: su cifra y una regla que se llena hacia los 25 clientes */
body.app.shell.p2-admin .p2-carga-v{display:inline-flex;flex-direction:column;align-items:flex-end;gap:6px}
body.app.shell.p2-admin .p2-barra{display:block;position:relative;width:76px;height:4px;border-radius:3px;background:rgba(28,35,51,.08);overflow:hidden}
body.app.shell.p2-admin .p2-barra>i{position:absolute;left:0;top:0;bottom:0;border-radius:inherit;background:linear-gradient(90deg,#6f8cc4,#3b5a96)}
body.app.shell.p2-admin .p2-barra>i.p2-barra-warn{background:linear-gradient(90deg,#d3a35a,#b07a2a)}
body.app.shell.p2-admin .p2-barra>i.p2-barra-ko{background:linear-gradient(90deg,#c97a6e,#a8493c)}
body.app.shell.p2-admin .p2-nota-pie{max-width:92ch;margin-top:12px}
/* la barra de navegación de la consola en el móvil: se desliza y lo avisa con un fundido a la derecha */
@media (max-width:860px){
  body.app.shell.p2-admin .app-side .app-nav{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);
    padding-right:30px;scrollbar-width:none}
  body.app.shell.p2-admin .app-side .app-nav::-webkit-scrollbar{display:none}
  body.app.shell.p2-admin .app-side .app-nav a{min-height:44px}
  body.app.shell.p2-admin .app-side-pie a{display:inline-flex;align-items:center;min-height:44px}
  body.app.shell.p2-admin .app-cabecera{flex-direction:column;align-items:stretch}
  body.app.shell.p2-admin .app-acciones{display:flex;flex-direction:column;align-items:stretch;gap:6px}
  body.app.shell.p2-admin .admin-buscar input{width:100%}
  body.app.shell.p2-admin .rejilla-2{grid-template-columns:minmax(0,1fr);gap:0}
  body.app.shell.p2-admin .admin-acciones>form{width:100%}
  body.app.shell.p2-admin .admin-acciones .btn{width:100%;justify-content:center;min-height:44px}
  body.app.shell.p2-admin .p2-asignar{flex-wrap:wrap;width:100%}
  body.app.shell.p2-admin .p2-asignar label{display:flex;flex-direction:column;gap:6px;width:100%}
  body.app.shell.p2-admin .p2-asignar>select:not(#p){flex:1 1 160px;width:100%;max-width:none;min-height:44px}
  body.app.shell.p2-admin .p2-asignar label select:not(#p){flex:none;width:100%;max-width:none;min-height:44px}
  body.app.shell.p2-admin .p2-asignar .btn{flex:0 0 auto;width:auto!important;min-height:44px;padding-inline:18px}
}
/* en el móvil, las tablas de la bandeja y de la carga: cada fila, una ficha con la etiqueta encima de cada dato */
@media (max-width:760px){
  body.app.shell.p2-admin .dash-scroll:has(>.p2-apila){overflow:visible;-webkit-mask-image:none;mask-image:none}
  body.app.shell.p2-admin .p2-apila,body.app.shell.p2-admin .p2-apila tbody{display:block;width:100%;min-width:0!important}
  body.app.shell.p2-admin .p2-apila thead{display:none}
  body.app.shell.p2-admin .p2-apila tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;padding:16px 0;
    background:linear-gradient(90deg,var(--p-hilo-2),var(--p-hilo) 60%,transparent) 0 100%/100% 1px no-repeat}
  body.app.shell.p2-admin .p2-apila td{display:block;padding:0!important;border:0!important;text-align:left!important;background:none!important;
    position:static!important;min-width:0!important;width:auto!important;white-space:normal}
  body.app.shell.p2-admin .p2-apila td:first-child{grid-column:1 / -1}
  body.app.shell.p2-admin .p2-apila td.p2-celda-form{grid-column:1 / -1}
  body.app.shell.p2-admin .p2-apila td[data-et]::before{content:attr(data-et);display:block;margin-bottom:3px;font:550 .72rem var(--f-sans);color:var(--f-tenue)}
  body.app.shell.p2-admin .p2-apila .p2-carga-v{align-items:flex-start}
  body.app.shell.p2-admin .p2-apila .p2-celda-form .btn{width:100%;min-height:44px}
}

/* ---------------------------------------------------------------- 6. Acceso: doble factor, invitación y /verificar (body.p2-pub) */
body.app.publico.p2-pub{background-color:#e9ecf1}            /* lo que asoma por debajo del fondo animado, del mismo tono */
/* el móvil con la aplicación de autenticación: un objeto claro, de nácar, con su código de seis cifras */
body.app.publico.p2-pub .p2-movil{position:relative;width:184px;margin:18px 0 0;padding:12px;border-radius:30px;
  background:linear-gradient(160deg,#f7f8fa,#dfe4eb 55%,#cfd6df);
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(20,28,42,.08),0 2px 4px rgba(20,28,42,.08),0 30px 50px -24px rgba(20,28,42,.45);
  transform:rotate(-3deg)}
body.app.publico.p2-pub .p2-movil::before{content:"";position:absolute;top:18px;left:50%;width:44px;height:5px;margin-left:-22px;border-radius:3px;background:rgba(20,28,42,.14)}
body.app.publico.p2-pub .p2-movil-pantalla{display:flex;flex-direction:column;gap:8px;min-height:250px;padding:34px 16px 18px;border-radius:21px;
  background:radial-gradient(120% 70% at 50% 0%,#fff,rgba(255,255,255,0) 70%),linear-gradient(180deg,#f8f9fb,#eceff4);
  box-shadow:inset 0 0 0 1px rgba(20,28,42,.07),inset 0 2px 6px rgba(20,28,42,.06)}
body.app.publico.p2-pub .p2-movil-app{display:flex;align-items:center;gap:6px;font:600 .68rem var(--f-sans);letter-spacing:.02em;color:var(--f-tenue)}
body.app.publico.p2-pub .p2-movil-app .ico{color:#3b5a96}
body.app.publico.p2-pub .p2-movil-cuenta{margin-top:22px;font:550 .78rem var(--f-sans);color:var(--f-tinta-2)}
body.app.publico.p2-pub .p2-movil-codigo{display:block;white-space:nowrap;font:600 1.62rem/1.1 var(--f-sans);letter-spacing:.04em;color:#3b5a96;font-variant-numeric:tabular-nums lining-nums}
body.app.publico.p2-pub .p2-movil-codigo .ico{color:#2f7a68}
body.app.publico.p2-pub .p2-movil-reloj{display:flex;flex-direction:column;gap:6px;margin-top:auto;font:500 .66rem var(--f-sans);color:var(--f-tenue)}
body.app.publico.p2-pub .p2-movil-reloj i{display:block;height:4px;border-radius:2px;background:linear-gradient(90deg,#3b5a96,#6f8cc4);transform-origin:left;transform:scaleX(.62)}
body.app.publico.p2-pub .p2-movil-ok .p2-movil-reloj i{background:linear-gradient(90deg,#2f7a68,#5fa391);transform:none}
@media (prefers-reduced-motion:no-preference){
  body.app.publico.p2-pub .p2-movil{animation:obj-flota 9s ease-in-out infinite}
  body.app.publico.p2-pub .p2-movil:not(.p2-movil-ok) .p2-movil-reloj i{animation:p2-reloj 30s linear infinite}
}
@keyframes p2-reloj{from{transform:scaleX(1)}to{transform:scaleX(0)}}
/* la invitación: una tarjeta de papel con la empresa que invita, como un talón de entrada */
body.app.publico.p2-pub .p2-invita{position:relative;display:flex;flex-direction:column;gap:14px;width:min(330px,100%);margin:18px 0 0;padding:22px 24px 34px;border-radius:14px;
  background:repeating-linear-gradient(135deg,rgba(59,90,150,.035) 0 1px,transparent 1px 7px),
    radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.95),rgba(255,255,255,0) 60%),linear-gradient(165deg,#fdfdfb,#eef0f4);
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(20,28,42,.08),0 3px 6px rgba(20,28,42,.1),0 28px 50px -22px rgba(20,28,42,.45);transform:rotate(-1.6deg)}
body.app.publico.p2-pub .p2-invita::before{content:"";position:absolute;left:-1px;top:16px;bottom:16px;width:8px;border-radius:0 6px 6px 0;
  background:linear-gradient(180deg,#5572af,#3b5690)}
body.app.publico.p2-pub .p2-invita-marca{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:12px;
  background:linear-gradient(90deg,rgba(28,35,51,.14),rgba(28,35,51,.04) 80%,transparent) 0 100%/100% 1px no-repeat}
body.app.publico.p2-pub .p2-invita-marca .marca-logo b{font-size:.95rem}
body.app.publico.p2-pub .p2-invita-marca .marca-logo small{font-size:.48rem}
body.app.publico.p2-pub .p2-invita-marca i{font:600 .66rem var(--f-sans);font-style:normal;letter-spacing:.02em;color:var(--f-tenue)}
body.app.publico.p2-pub .p2-invita-emp{display:flex;align-items:center;gap:12px}
body.app.publico.p2-pub .p2-invita-emp b{font:500 1.25rem/1.2 var(--f-serif);letter-spacing:-.01em;color:var(--f-tinta)}
body.app.publico.p2-pub .p2-invita-para{font:450 .8rem/1.4 var(--f-sans);color:var(--f-suave);overflow-wrap:anywhere}
body.app.publico.p2-pub .p2-invita-para b{font-weight:600;color:var(--f-tinta-2)}
body.app.publico.p2-pub .p2-invita-micro{position:absolute;left:24px;right:16px;bottom:12px;overflow:hidden;white-space:nowrap;font:600 .44rem var(--f-sans);
  font-style:normal;letter-spacing:.18em;color:rgba(59,90,150,.38)}
@media (prefers-reduced-motion:no-preference){body.app.publico.p2-pub .p2-invita{animation:obj-flota 10s ease-in-out infinite}}
/* el alta en dos pasos: el número en una tecla y el contenido de cada paso a su lado */
body.app.publico.p2-pub .p2-pasos{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:20px}
body.app.publico.p2-pub .p2-pasos>li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;align-items:start}
body.app.publico.p2-pub .p2-paso-n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font:600 .8rem var(--f-sans);color:#22408f;
  background:linear-gradient(180deg,#fff,#eef1f5);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(20,28,42,.08),0 4px 10px -4px rgba(20,28,42,.35)}
body.app.publico.p2-pub .p2-pasos>li>div{display:flex;flex-direction:column;gap:12px;min-width:0}
body.app.publico.p2-pub .p2-pasos>li>div>b{margin-top:4px;font:600 .96rem/1.35 var(--f-sans);color:var(--f-tinta)}
body.app.publico.p2-pub .p2-pasos form{display:flex;flex-direction:column;gap:14px}
/* el QR en su marco: blanco (lo pide el lector del móvil), con marcas de registro en las esquinas */
body.app.publico.p2-pub .p2-qr{position:relative;align-self:flex-start;width:184px;padding:8px;border-radius:14px;background:#fff;
  box-shadow:0 0 0 1px rgba(20,28,42,.08),0 2px 4px rgba(20,28,42,.06),0 16px 30px -18px rgba(20,28,42,.45)}
body.app.publico.p2-pub .p2-qr::before{content:"";position:absolute;inset:-7px;border-radius:18px;pointer-events:none;
  background:linear-gradient(#3b5a96,#3b5a96) 0 0/16px 2px,linear-gradient(#3b5a96,#3b5a96) 0 0/2px 16px,
    linear-gradient(#3b5a96,#3b5a96) 100% 0/16px 2px,linear-gradient(#3b5a96,#3b5a96) 100% 0/2px 16px,
    linear-gradient(#3b5a96,#3b5a96) 0 100%/16px 2px,linear-gradient(#3b5a96,#3b5a96) 0 100%/2px 16px,
    linear-gradient(#3b5a96,#3b5a96) 100% 100%/16px 2px,linear-gradient(#3b5a96,#3b5a96) 100% 100%/2px 16px;background-repeat:no-repeat;opacity:.5}
body.app.publico.p2-pub .p2-qr svg{display:block;width:100%;height:auto}
body.app.publico.p2-pub .p2-clave{margin:0;font:450 .82rem/1.55 var(--f-sans);color:var(--f-suave)}
body.app.publico.p2-pub .p2-clave code.clave{display:block;width:fit-content;max-width:100%;margin-top:6px;padding:8px 12px;border-radius:10px;
  font:600 .8rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.03em;color:var(--f-tinta);word-spacing:.05em;
  background:linear-gradient(180deg,#e9edf2,#f3f5f8);box-shadow:inset 0 1px 2px rgba(20,28,42,.08),inset 0 0 0 1px rgba(20,28,42,.06),0 1px 0 #fff}
/* el código: grande, centrado, en cifras tabulares */
body.app.publico.p2-pub .auth-form input.p2-otp:not(#p){min-height:58px;text-align:center;font:600 1.55rem/1 var(--f-sans)!important;letter-spacing:.32em;
  padding:10px 14px 10px calc(14px + .32em)!important;font-variant-numeric:tabular-nums lining-nums}
body.app.publico.p2-pub .auth-form input.p2-otp::placeholder{color:#c3c9d3;letter-spacing:.32em}
body.app.publico.p2-pub .p2-estado-df{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0;font:450 .86rem var(--f-sans);color:var(--f-suave)}
body.app.publico.p2-pub .p2-estado-df .estado{font:600 .8rem var(--f-sans)}
/* la lámina del alta, más alta que el resto: el lado del objeto se centra con ella */
body.app.publico.p2-2fa-alta main.auth{align-items:center}
/* /verificar: la cadena de hechos, eslabones de papel que se sellan unos a otros */
body.app.publico.p2-pub .p2-cadena{display:flex;flex-direction:column;gap:14px;margin:6px 0 0;padding-left:2px}
body.app.publico.p2-pub .p2-eslabon{position:relative;display:flex;align-items:baseline;gap:12px;width:fit-content;padding:9px 14px;border-radius:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(244,246,249,.9));box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(20,28,42,.07),0 8px 16px -12px rgba(20,28,42,.4)}
body.app.publico.p2-pub .p2-eslabon+.p2-eslabon::before{content:"";position:absolute;left:22px;top:-15px;width:1px;height:15px;background:linear-gradient(rgba(59,90,150,.2),rgba(59,90,150,.6))}
body.app.publico.p2-pub .p2-eslabon:nth-child(2){margin-left:18px}
body.app.publico.p2-pub .p2-eslabon:nth-child(3){margin-left:36px}
body.app.publico.p2-pub .p2-eslabon small{font:600 .66rem var(--f-sans);letter-spacing:.02em;color:var(--f-tenue)}
body.app.publico.p2-pub .p2-eslabon code{font:500 .76rem ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--f-tinta-2)}
body.app.publico.p2-pub .p2-eslabon-tu{box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(59,90,150,.35),0 0 0 4px rgba(59,90,150,.08),0 10px 18px -12px rgba(40,60,110,.5)}
body.app.publico.p2-pub .p2-eslabon-tu small{color:#3b5a96}
/* (sin animación de entrada: al redimensionar la ventana, la lámina de escena.js la reiniciaba y dejaba los eslabones a medias) */
@media (max-width:980px){
  body.app.publico.p2-pub .p2-movil,body.app.publico.p2-pub .p2-invita,body.app.publico.p2-pub .p2-cadena{display:none}
}
@media (max-width:640px){
  /* doble factor e invitación en el móvil: el formulario primero, sin la explicación larga de la izquierda */
  body.app.publico.p2-acceso main.auth{grid-template-columns:minmax(0,1fr)}
  body.app.publico.p2-acceso .auth-lado{display:none}
  body.app.publico.p2-acceso .auth-form{padding-top:0!important;background:none!important}
  body.app.publico.p2-pub .p2-qr{width:min(220px,100%)}
  body.app.publico.p2-pub .p2-pasos>li{grid-template-columns:24px minmax(0,1fr);gap:12px}
  body.app.publico.p2-pub .p2-paso-n{width:24px;height:24px;font-size:.74rem}
  body.app.publico.p2-pub .auth-pie a{display:inline-flex;align-items:center;min-height:44px}
}

/* ---------------------------------------------------------------- 7. Metodología (app): el PDF como documento, capítulos numerados */
body.app.shell .p2-doc-pdf{display:flex;align-items:center;gap:20px;width:fit-content;max-width:100%;margin-top:26px;padding:12px 22px 12px 12px;border-radius:16px;
  text-decoration:none;color:inherit;background:linear-gradient(90deg,rgba(59,90,150,.08),rgba(59,90,150,.02) 70%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(59,90,150,.12);
  transition:background var(--p-t2,.2s),box-shadow var(--p-t2,.2s),transform var(--p-t2,.2s) var(--p-curva,ease)}
body.app.shell .p2-doc-pdf:hover{transform:translateY(-1px);background:linear-gradient(90deg,rgba(59,90,150,.13),rgba(59,90,150,.04) 70%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 0 0 1px rgba(59,90,150,.24),0 12px 22px -16px rgba(40,60,110,.5)}
body.app.shell .p2-doc-pdf:focus-visible{outline:2px solid rgba(59,90,150,.6);outline-offset:3px}
body.app.shell .p2-doc-hoja{position:relative;flex:none;display:flex;flex-direction:column;gap:5px;width:82px;height:108px;padding:10px 9px;border-radius:4px;
  background:radial-gradient(120% 60% at 50% -10%,#fff,rgba(255,255,255,0) 60%),linear-gradient(180deg,#fff,#f1f3f6);
  box-shadow:0 0 0 1px rgba(20,28,42,.07),0 2px 3px rgba(20,28,42,.06),0 14px 22px -14px rgba(20,28,42,.5);transform:rotate(-3deg);
  transition:transform .45s var(--p-curva,ease)}
body.app.shell .p2-doc-pdf:hover .p2-doc-hoja{transform:rotate(0) translateY(-3px)}
body.app.shell .p2-doc-hoja::after{content:"";position:absolute;right:6px;top:6px;width:16px;height:16px;border-radius:50%;
  background:repeating-radial-gradient(circle,rgba(59,90,150,.35) 0 .6px,transparent .6px 2px)}         /* el sello, en pequeño */
body.app.shell .p2-doc-hoja .marca-logo b{font-size:.5rem}
body.app.shell .p2-doc-hoja .marca-logo small{font-size:.26rem;letter-spacing:.2em}
body.app.shell .p2-doc-hoja>b{margin-top:8px;font:600 .52rem/1.2 var(--f-sans);color:var(--f-tinta)}
body.app.shell .p2-doc-hoja>small{font:500 .42rem var(--f-sans);color:var(--f-tenue)}
body.app.shell .p2-doc-renglones{display:block;flex:1;margin-top:4px;
  background:repeating-linear-gradient(180deg,rgba(28,35,51,.12) 0 1px,transparent 1px 6px) 0 0/100% 100% no-repeat;opacity:.8;
  -webkit-mask-image:linear-gradient(90deg,#000 70%,transparent);mask-image:linear-gradient(90deg,#000 70%,transparent)}
body.app.shell .p2-doc-txt{display:flex;flex-direction:column;gap:5px;min-width:0}
body.app.shell .p2-doc-txt b{display:flex;align-items:center;gap:8px;font:600 .95rem var(--f-sans);color:var(--f-acento)}
body.app.shell .p2-doc-txt small{font:450 .8rem/1.45 var(--f-sans);color:var(--f-suave)}
/* capítulos numerados, como en el documento: 01, 02… delante de cada título */
body.app.shell .app-contenido:has(>.metodo-portada){counter-reset:p2cap}
body.app.shell .app-contenido:has(>.metodo-portada)>.seccion{counter-increment:p2cap}
body.app.shell .app-contenido:has(>.metodo-portada)>.seccion>.seccion-cab h3::before{content:counter(p2cap,decimal-leading-zero);
  display:inline-block;min-width:2.1em;margin-right:6px;font:300 1.25em/1 var(--f-serif);color:rgba(59,90,150,.6);vertical-align:-.06em}
/* la columna de grados de la tabla de calibración, con el color de su banda */
body.app.shell .p2-gd{display:inline-block;width:8px;height:8px;margin-right:10px;border-radius:50%;vertical-align:1px;background:var(--p2-gd,#3b5a96)}
body.app.shell .p2-gd-A{--p2-gd:#2f4c87}body.app.shell .p2-gd-B{--p2-gd:#7f97c4}body.app.shell .p2-gd-C{--p2-gd:#c49248}body.app.shell .p2-gd-D{--p2-gd:#a8493c}
@media (max-width:640px){
  body.app.shell .p2-doc-pdf{width:100%;gap:14px;padding:10px 14px 10px 10px}
  body.app.shell .p2-doc-hoja{width:64px;height:84px}
  body.app.shell .p2-doc-hoja>b{font-size:.44rem}
}

/* ---------------------------------------------------------------- 8. Glosario y Mi cuenta: detalles */
/* el índice de letras: teclas pequeñas con su relieve; en el móvil, de 44 px */
body.app.shell .glosario-letras{display:flex;flex-wrap:wrap;gap:6px}
body.app.shell .glosario-letras a{display:grid;place-items:center;min-width:32px;height:32px;padding:0 6px;border-radius:9px;font:600 .82rem var(--f-sans);
  color:var(--f-acento);text-decoration:none;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(243,245,248,.85));
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(20,28,42,.07),0 3px 8px -6px rgba(20,28,42,.35);
  transition:transform var(--p-t1,.15s) var(--p-curva,ease),box-shadow var(--p-t2,.2s),color var(--p-t1,.15s)}
body.app.shell .glosario-letras a:hover{transform:translateY(-1px);color:var(--f-tinta);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(59,90,150,.25),0 6px 12px -8px rgba(20,28,42,.4)}
body.app.shell .glosario-letras a:focus-visible{outline:2px solid rgba(59,90,150,.6);outline-offset:2px}
/* Mi cuenta: el nombre del fichero en una línea, con puntos suspensivos (el nombre entero, al pasar) */
body.app.shell .p2-fichero{display:inline-flex;align-items:center;gap:8px;max-width:100%;min-width:0}
body.app.shell .p2-fichero .ico{flex:none;color:var(--f-acento)}
body.app.shell .p2-fichero span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.app.shell .ajuste .dash-t td.et:has(.p2-fichero){max-width:0;width:60%}
@media (max-width:640px){
  body.app.shell .glosario-letras{gap:4px}
  body.app.shell .glosario-letras a{min-width:44px;height:44px}
  body.app.shell .app-contenido .p2-meses li{padding:0}
  body.app.shell .app-contenido .p2-meses a{min-height:44px}
  body.app.shell .p2-cartera td.et a{min-height:44px}
}

/* ---------------------------------------------------------------- 9. Móvil: objetivos táctiles de 44 px en mis pantallas
   (en pulido.css la regla del móvil pierde frente a la general de 40 px por especificidad: aquí se asegura) */
@media (max-width:640px){
  body.app.shell .app-contenido:has(>.p2) :is(input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),select):not(#p):not(#q){min-height:44px}
  body.app.shell .app-contenido:has(>.p2) .btn:not(#p){min-height:44px}
  body.app.shell .app-contenido:has(>.p2) details>summary{display:flex;align-items:center;min-height:44px}
  body.app.shell .p2-filtros a{min-height:44px}
  body.app.shell.p2-admin .app-cuerpo .dash-t td :is(select,input,.btn):not(#p):not(#q){min-height:44px}
  body.app.shell.p2-admin .app-cuerpo .enlace-mas{display:inline-flex;align-items:center;min-height:44px}
  body.app.shell.p2-admin .app-cuerpo .dash-t td a:not(.btn){display:inline-flex;align-items:center;min-height:44px}
}