/* «🎤 Ventas» en Barbara Brows Academy: el guion de la llamada + la vista de llamadas y análisis,
   con la marca de Bárbara Cabrera (negro tinta, crema, Jost + Playfair).
   Las variables del guion se definen solo dentro de esta sección, para no tocar el resto de la app. */
.gl,.v-an,.v-tabs{--ink:#F4F1EA;--texto:#DCD5C6;--muted:#B9B2A3;--panel:#141414;--panel2:#222;--linea:rgba(239,232,224,.28);--oro:#EFE8E0;--oro-marca:#EFE8E0;--verde:#8DBF76;--rojo:#E8735C;--azul:#9DC0E8;--gradiente:#EFE8E0;--radio:18px;--sombra:0 14px 34px -18px rgba(0,0,0,.85)}
@keyframes brillo{0%{background-position:200% 0}100%{background-position:-200% 0}}
.gl .oro,.v-an .oro{background:var(--gradiente);-webkit-background-clip:text;background-clip:text;color:transparent}
.gl .hola,.v-an .hola{margin:4px 0 16px}
.gl .hola small,.v-an .hola small{display:block;font-weight:800;color:var(--oro);letter-spacing:2px;font-size:13px;text-transform:uppercase}
.gl .hola h1,.v-an .hola h1{font-size:clamp(26px,5vw,40px);line-height:1.1;margin:6px 0 4px}
.v-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 16px}
.v-tabs button{border:1.5px solid rgba(244,241,234,.45);background:transparent;color:var(--ink);border-radius:14px;padding:12px 8px;font-weight:800;font-size:15px;line-height:1.25}
.v-tabs button.activo{background:var(--oro);border-color:var(--oro);color:#111}
.gl .g-nueva-f{display:grid;gap:8px;margin-top:10px}
/* análisis */
.v-datos{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:0 0 14px}
@media (min-width:700px){.v-datos{grid-template-columns:repeat(4,1fr)}}
.v-dato{background:var(--panel);border:1px solid #2A2A2A;border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:2px}
.v-dato b{font-size:24px;font-weight:900;color:var(--oro-marca)}
.v-dato small{color:var(--muted);font-weight:600}
.v-graf{width:100%;height:auto;margin-top:6px}
.v-g-l{stroke:var(--linea);stroke-width:1}
.v-g-t{font:600 11px Jost,sans-serif;fill:var(--muted)}
.v-g-linea{fill:none;stroke:var(--oro);stroke-width:3;stroke-linejoin:round}
.v-g-pt{fill:#1A1A1A;stroke:var(--oro);stroke-width:2.5}
.v-g-gan{fill:var(--verde);stroke:#1A1A1A;stroke-width:2}
.v-evo h4{margin:14px 0 6px}
.v-espera h3{margin-bottom:4px}
.v-con{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.v-con li{display:flex;flex-direction:column;gap:2px;background:#101010;border:1px dashed var(--linea);border-radius:12px;padding:10px 12px}
.v-con li b{font-size:15px;color:var(--ink)}
.v-con li small{font-size:13px;color:var(--muted);font-weight:600}
.v-con li.ok{border-style:solid;border-color:rgba(141,191,118,.45)}
.v-ll{border:1px solid #2A2A2A;border-radius:16px;margin:0 0 10px;background:#141414}
.v-ll>summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px}
.v-ll>summary::-webkit-details-marker{display:none}
.v-ll-f{font-weight:800;color:var(--oro-marca);min-width:58px}
.v-ll-n{flex:1;min-width:140px}
.v-chip{border-radius:999px;padding:3px 10px;font-size:12px;font-weight:800;background:#222;color:var(--texto)}
.v-chip.verde{background:rgba(141,191,118,.16);color:#B5DBA0}.v-chip.oro{background:rgba(239,232,224,.16);color:var(--oro-marca)}.v-chip.azul{background:rgba(157,192,232,.14);color:var(--azul)}.v-chip.rojo{background:rgba(232,115,92,.16);color:#F3A593}.v-chip.gris{background:#222;color:var(--muted)}
.v-ll-c{padding:0 14px 14px}
.v-ll-b{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.v-ll-b .btn{padding:10px 14px;font-size:14px}
.v-md{font-size:15px;line-height:1.55}
.v-md-h{font-size:17px;margin:10px 0 6px}
.v-md-p{margin:6px 0}
.v-md-ul{margin:4px 0 8px;padding-left:20px}
.v-md-ul li{margin:6px 0}
.v-md a,.v-evo a{color:var(--oro-marca);font-weight:700}
.v-estado{background:rgba(239,232,224,.08);border:1px dashed var(--linea);border-radius:12px;padding:10px 12px;margin:0 0 10px;color:var(--texto)}
.v-graba{display:flex;gap:8px;flex-wrap:wrap}
.v-graba input{flex:1;min-width:200px}
.v-graba .btn{padding:12px 16px;font-size:15px}
.v-notas{margin-top:10px}
.v-notas summary{cursor:pointer;font-weight:800}
.v-notas pre{white-space:pre-wrap;font:14px/1.5 Jost,sans-serif;background:var(--panel2);border-radius:12px;padding:12px;color:var(--texto);overflow-wrap:anywhere}
/* ---- el guion (mismas piezas que el original, en negro y dorado) ---- */
.gl{--g-letra:21px;font-size:var(--g-letra);line-height:1.55;color:var(--ink)}
.gl .g-p{font-size:var(--g-letra);margin:14px 0 8px;font-weight:600}
.gl .g-di{font-size:calc(var(--g-letra) + 2px);font-weight:700;color:var(--ink);background:var(--panel2);border-left:6px solid var(--oro);border-radius:12px;padding:14px 18px;margin:10px 0}
.gl .g-quien{display:block;font-size:15px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--oro-marca);margin-bottom:4px}
.gl .g-nota{font-size:calc(var(--g-letra) - 2px);font-weight:700;color:var(--texto);background:rgba(239,232,224,.12);border:1px solid rgba(239,232,224,.22);border-radius:12px;padding:12px 16px;margin:10px 0}
.gl .g-falta{background:var(--rojo);color:#fff;border-radius:6px;padding:0 6px}
.gl .g-rojo{color:#FFB4A3}
.gl .completar{background:#FFE566;color:#111;padding:1px 6px;border-radius:6px}
.g-barra{position:sticky;z-index:20;background:#000;color:#fff;border:1px solid var(--linea);border-radius:18px;padding:14px 16px 12px;margin:10px 0 18px;box-shadow:var(--sombra);display:grid;grid-template-columns:1fr auto;gap:10px 14px;align-items:center}
.g-barra.tarde{box-shadow:0 0 0 4px var(--rojo)}
.g-reloj{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;min-width:0}
.g-reloj #g-t{font-size:40px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--oro-marca);line-height:1}
.g-reloj small{font-size:17px;font-weight:700}
.g-btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.g-b{background:none;border:2px solid rgba(255,255,255,.4);color:#fff;border-radius:999px;padding:8px 14px;font-weight:800;font-size:16px}
.g-b.oro-b{background:var(--gradiente);color:#111;border:0}
.g-linea{grid-column:1/-1;position:relative;display:flex;gap:3px;height:30px}
.g-linea a{display:grid;place-items:center;background:#262626;border-radius:6px;text-decoration:none;color:#fff;font-size:14px;font-weight:800;min-width:0}
.g-linea a.paso{background:#5A554E}
.g-linea a.ahora{background:var(--oro-marca);color:#111}
.g-linea i{position:absolute;top:-4px;bottom:-4px;width:3px;background:#fff;border-radius:2px;left:0;transition:left 1s linear}
.g-indice{list-style:none;padding:0;margin:0 0 22px;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.g-indice a{display:flex;flex-direction:column;text-decoration:none;background:var(--panel);border:1px solid #2A2A2A;border-radius:12px;padding:10px 14px}
.g-indice b{font-size:17px}.g-indice span{font-size:15px;font-weight:700;color:var(--muted)}
.g-fase{border:1px solid var(--linea);border-radius:var(--radio);padding:18px 20px 20px;margin:0 0 22px;background:#121212}
.g-fase.ahora{border-color:var(--oro-marca);box-shadow:0 0 0 4px rgba(239,232,224,.25)}
.g-fase.paso{opacity:.6}
.g-fase header{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.g-fase h2{margin:0;font-size:calc(var(--g-letra) + 9px);font-family:'Playfair Display',Georgia,serif}
.g-num{width:48px;height:48px;border-radius:50%;background:#000;border:1.5px solid var(--oro);color:var(--oro-marca);display:grid;place-items:center;font-weight:800;font-size:22px;flex:none}
.g-tiempo{font-size:17px;font-weight:800;color:var(--oro-marca)}
.g-estado{margin-left:auto;font-size:16px;font-weight:800;color:var(--verde)}
.g-fase.ahora .g-estado{color:#111;background:var(--oro-marca);border-radius:999px;padding:4px 12px}
.g-tono{font-size:calc(var(--g-letra) - 2px);font-weight:700;color:var(--azul);margin:12px 0 4px}
.g-fin{margin-top:10px}
.gl .g-h3{font-size:calc(var(--g-letra) + 3px);font-weight:800;margin:22px 0 6px;color:var(--ink)}
.gl .g-obj{border-top:2px dashed var(--linea);padding-top:12px;margin-top:16px}
.gl .g-objt{font-size:calc(var(--g-letra) + 4px);font-weight:800;color:var(--oro-marca)}
/* elegir la llamada + notas en rojo que completan el guion */
.gl{--g-tinta:#FF8577}
.g-llam{background:#000;color:#fff;border:1px solid var(--linea);border-radius:18px;padding:16px 18px;margin:14px 0 6px;scroll-margin-top:120px}
.g-llam .g-qt{font-size:19px;font-weight:800;color:var(--oro-marca)}
.g-llam .g-ayuda{font-size:16px;font-weight:600;color:#ddd;margin:6px 0 10px}
.g-llam.on{display:grid;grid-template-columns:1fr auto;gap:8px 14px;align-items:center}
.g-llam.on .g-ayuda{grid-column:1/-1;margin:2px 0 0}
.g-llam-c{display:flex;flex-direction:column;gap:2px;min-width:0}
.g-llam-n{font-size:28px;font-weight:800;line-height:1.15;overflow-wrap:anywhere}
.g-llam-c small{font-size:15px;font-weight:700;color:#ccc}
.g-llam-b{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.g-q{background:#1A1A1A;border:1.5px solid var(--oro);color:var(--ink);border-radius:999px;padding:10px 22px;font-weight:800;font-size:19px}
.g-llam .g-q{text-decoration:none;font-size:16px;padding:8px 16px}
.g-rojo-t{color:#FF8577}
.g-ags{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin:8px 0}
.g-ag{display:flex;flex-direction:column;align-items:flex-start;text-align:left;background:#1A1A1A;color:var(--ink);border:1px solid #2A2A2A;border-radius:12px;padding:10px 14px;font-size:17px;cursor:pointer}
.g-ag b{font-weight:800}.g-ag small{font-size:14px;font-weight:700;color:var(--muted)}
.g-ag:disabled{opacity:.5}
.gl .g-nueva-f input{width:100%;box-sizing:border-box;margin:0;padding:13px 14px;border-radius:14px;border:1px solid #3a3a3a;background:#181818;color:var(--ink);font:600 17px Jost,sans-serif;outline:none}
.gl .g-nueva-f input:focus{border-color:var(--oro);box-shadow:0 0 0 3px rgba(239,232,224,.2)}
.gl .g-nueva-f input::placeholder{color:#7a7468}
.g-nueva{margin-top:8px}
.g-nueva summary{cursor:pointer;font-size:17px;font-weight:800;color:var(--oro-marca);padding:8px 0}
.g-nueva-f .g-b{justify-self:start;margin-top:6px;font-size:18px;padding:10px 20px}
.gl .g-anota-w{display:block;margin:8px 0 14px}
.gl .g-anota-l{display:block;font-size:14px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--g-tinta);margin-bottom:4px}
.gl .g-anota{width:100%;box-sizing:border-box;resize:vertical;min-height:52px;border:2px dashed rgba(255,133,119,.45);background:rgba(255,133,119,.06);border-radius:12px;padding:10px 14px;font:700 var(--g-letra)/1.45 Jost,sans-serif;color:var(--g-tinta);overflow:hidden;box-shadow:none}
.gl .g-anota:focus{outline:none;border-style:solid;border-color:var(--g-tinta);background:#140c0b}
.gl .g-anota:disabled{background:#141414;border-color:#333}
.gl .g-anota::placeholder{color:#a87a73;font-weight:600}
.gl .g-ph{color:#8f8676;font-style:italic}
.gl .g-ph.lleno{color:var(--g-tinta);font-style:normal;text-decoration:underline;text-decoration-color:rgba(255,133,119,.35);text-underline-offset:4px}
.gl .g-res{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
.gl .g-r{background:#1A1A1A;color:var(--ink);border:1.5px solid var(--linea);border-radius:999px;padding:8px 16px;font-weight:800;font-size:17px;cursor:pointer}
.gl .g-r.on{background:var(--g-tinta);border-color:var(--g-tinta);color:#111}
.gl .g-terminar{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid var(--linea)}
.gl .g-terminar .g-b{font-size:19px;padding:12px 22px}
.gl .g-gest{font-size:16px;font-weight:700;color:var(--muted)}
/* el reloj del guion va pegado debajo del encabezado (que en la app queda fijo arriba) */
.gl .g-barra{top:70px}
.g-fase{scroll-margin-top:200px}
/* las cajas del precio, el downsell y las objeciones en botones */
.gl .g-ticket{border:2px solid var(--oro);border-radius:18px;padding:14px 18px;margin:16px 0;background:rgba(239,232,224,.06);scroll-margin-top:200px}
.gl .g-tk-t{font-size:calc(var(--g-letra) + 2px);font-weight:800;margin-bottom:6px}
.gl .g-t35{display:none;border-color:#777;background:#151515}
.gl.g-es-down .g-t35{display:block}
.gl.g-es-down .g-t7{opacity:.55}
.gl.g-es-down .g-t7 .g-hacer-down{display:none}
.gl .g-escalera,.gl .g-dif,.gl .g-pasos{font-size:var(--g-letra);font-weight:600;padding-left:1.4em;margin:8px 0}
.gl .g-escalera li,.gl .g-dif li,.gl .g-pasos li{margin:8px 0}
.gl .g-down-b{margin:14px 0 4px}
.gl .g-down-b .g-b{background:#000;color:var(--oro-marca);border:1.5px solid var(--oro);font-size:19px;padding:12px 22px;cursor:pointer}
.gl .g-down-b .g-volver-alto{background:transparent;color:var(--ink);border:1.5px solid rgba(244,241,234,.5)}
.gl .g-objs{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 14px}
.gl .g-objb{background:#1A1A1A;border:1.5px solid var(--linea);border-radius:999px;padding:10px 16px;font:800 17px Jost,sans-serif;color:var(--ink);cursor:pointer}
.gl .g-objb.on{background:var(--oro-marca);color:#111;border-color:var(--oro-marca)}
.gl .g-objp{border:1.5px solid var(--oro);border-radius:16px;padding:14px 18px;margin:10px 0;background:#101010;scroll-margin-top:200px}
.gl .g-objp .g-objt{margin-bottom:6px}
.gl .g-detras{font-size:calc(var(--g-letra) - 2px);font-weight:600;background:rgba(239,232,224,.12);border-radius:12px;padding:10px 14px;margin:6px 0 10px}
@media (max-width:640px){
  .gl .g-barra{top:68px}.g-barra{grid-template-columns:1fr;padding:10px 12px;gap:8px}.g-linea{display:none}.g-reloj{align-items:baseline;gap:10px}.g-reloj #g-t{font-size:30px}.g-reloj small{font-size:15px}.g-btns{gap:6px;justify-content:flex-start}.g-b{padding:6px 10px;font-size:15px}
  .g-fase{padding:16px 14px;scroll-margin-top:190px}.g-llam.on{grid-template-columns:1fr}.g-llam-b{justify-content:flex-start}.g-llam-n{font-size:24px}
  .gl .g-objb{flex:1 1 45%;font-size:16px;padding:10px 12px}.gl .g-ticket,.gl .g-objp{padding:12px}
  .gl .g-di{padding:12px 14px}.gl .g-nota{padding:10px 12px}
}