/* Estudio HUGLE · identidad del 11-11-2026 (logo que mandó Eduardo): negro profundo, neón azul → violeta, H plateada con
   trazo dorado y el lema «Crea · Automatiza · Conecta». Tema oscuro único (es la marca). */
:root{
  --fondo:#06060c; --panel:#0d0e1a; --tarjeta:#12142a; --tarjeta2:#181b36; --borde:rgba(125,140,255,.16); --borde2:rgba(125,140,255,.34);
  --texto:#eef0fb; --suave:#9aa1c2; --azul:#2f7bff; --cian:#38c6ff; --violeta:#a23bff; --rosa:#e04bd0; --oro:#f6b530; --oro2:#ffd66b;
  --verde:#35d39a; --rojo:#ff5d6c; --neon:linear-gradient(120deg,#2f7bff,#a23bff); --r:20px; color-scheme:dark;
}
*{box-sizing:border-box} html,body{margin:0;height:100%}
body{font:14px/1.5 "Segoe UI Variable","Segoe UI",system-ui,sans-serif;color:var(--texto);overflow:hidden;
  background:radial-gradient(900px 520px at 92% -10%,rgba(162,59,255,.20),transparent 62%),radial-gradient(900px 560px at -8% 108%,rgba(47,123,255,.20),transparent 60%),var(--fondo)}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
button,input,textarea,select{font:inherit;color:inherit}
a{color:var(--cian);text-decoration:none;cursor:pointer}a:hover{color:#fff}
:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:rgba(125,140,255,.25);border-radius:99px;border:2px solid transparent;background-clip:padding-box}
.suave{color:var(--suave)}
.marco{height:100vh;display:flex;flex-direction:column;padding:14px;gap:14px}
.barra{display:flex;align-items:center;gap:16px;padding:2px 6px}
.marca{display:flex;align-items:center;gap:12px}
.logo{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:none;background:#090a16;border:1.5px solid transparent;
  background-image:linear-gradient(#090a16,#090a16),var(--neon);background-origin:border-box;background-clip:padding-box,border-box;box-shadow:0 0 18px rgba(90,90,255,.45)}
.logo svg{width:30px;height:30px;stroke:none}
.rotulo{display:flex;flex-direction:column;line-height:1.05}
.rotulo small{letter-spacing:.42em;font-size:10px;color:#cfd3ee}
.rotulo b{font-size:21px;font-weight:800;letter-spacing:.04em;background:linear-gradient(180deg,#fff,#b9bfd8);-webkit-background-clip:text;background-clip:text;color:transparent}
.lema{font-size:10.5px;letter-spacing:.3em;color:var(--suave);margin-left:6px;padding-left:16px;border-left:1px solid var(--oro)}.lema i{font-style:normal;color:var(--oro)}
.estado{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.pildora{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;background:var(--tarjeta);border:1px solid var(--borde);font-size:12.5px}
.pildora i{width:8px;height:8px;border-radius:50%;background:#555a78}.pildora.ok i{background:var(--verde);box-shadow:0 0 8px var(--verde)}.pildora.mal i{background:var(--rojo);box-shadow:0 0 8px var(--rojo)}
.redondo{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--tarjeta);border:1px solid var(--borde);color:var(--texto);cursor:pointer}.redondo:hover{border-color:var(--borde2)}
.cuerpo{flex:1;display:flex;gap:14px;min-height:0}
.menu{width:224px;flex:none;background:rgba(13,14,26,.8);border:1px solid var(--borde);border-radius:var(--r);padding:16px 12px;display:flex;flex-direction:column;gap:2px;overflow:auto}
.menu small{margin:14px 10px 4px;color:var(--suave);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;color:#cfd3ee}
.menu a:hover{background:rgba(125,140,255,.1);color:#fff}
.menu a.activo{background:var(--neon);color:#fff;box-shadow:0 6px 22px rgba(110,80,255,.4)}
.menu a em{margin-left:auto;font-style:normal;font-size:11.5px;background:var(--oro);color:#1a1200;font-weight:700;border-radius:99px;padding:1px 7px}.menu a em:empty{display:none}
.menu-pie{margin-top:auto;font-size:12px;padding:8px;color:var(--suave)}
main{flex:1;min-width:0;overflow:auto;border-radius:var(--r)}
.caja{background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--r);padding:18px}
.caja h3{margin:0;font-size:15px;font-weight:600}.caja-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.titulo{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:4px 4px 16px;flex-wrap:wrap}
.titulo h1{margin:0;font-size:26px;font-weight:700;letter-spacing:.01em}.titulo p{margin:4px 0 0;max-width:760px}
.rejilla{display:grid;gap:14px}.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.dos{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
.kpi .k-cab{color:var(--suave);font-size:13px}.kpi b{display:block;font-size:30px;font-weight:700;margin:8px 0 2px;letter-spacing:-.02em}
.kpi.neon{background:linear-gradient(135deg,rgba(47,123,255,.28),rgba(162,59,255,.28)),var(--tarjeta);border-color:var(--borde2);box-shadow:0 0 28px rgba(110,80,255,.2)}.kpi.neon b{color:var(--oro2)}
.boton{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--borde2);background:var(--tarjeta2);border-radius:99px;padding:8px 15px;cursor:pointer;color:var(--texto);white-space:nowrap}
.boton:hover{border-color:var(--cian)}.boton.neon{background:var(--neon);border-color:transparent;color:#fff;font-weight:600;box-shadow:0 4px 18px rgba(110,80,255,.4)}
.boton.oro{background:linear-gradient(120deg,var(--oro),var(--oro2));border-color:transparent;color:#1a1200;font-weight:700}
.boton.peligro{color:var(--rojo);border-color:rgba(255,93,108,.4)}.boton:disabled{opacity:.4;cursor:default;box-shadow:none}
.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{padding:6px 12px;border-radius:99px;background:var(--tarjeta2);border:1px solid var(--borde);cursor:pointer;font-size:13px}
.chip.activo{background:var(--neon);color:#fff;border-color:transparent}
table{width:100%;border-collapse:collapse}th{font-weight:500;color:var(--suave);text-align:left;font-size:12.5px;padding:6px 8px}td{padding:9px 8px;border-top:1px solid var(--borde);vertical-align:middle}
.n{text-align:right;font-variant-numeric:tabular-nums}
.trabajo{display:grid;grid-template-columns:330px minmax(0,1fr);gap:14px;height:100%}
.lista{background:rgba(13,14,26,.8);border:1px solid var(--borde);border-radius:var(--r);padding:14px;overflow:auto}
.lista-cab h2{margin:2px 4px 10px;font-size:20px;font-weight:700}
.tarj{background:var(--tarjeta);border:1px solid var(--borde);border-radius:16px;padding:12px;margin-bottom:10px;cursor:pointer}
.tarj:hover{border-color:var(--borde2)}.tarj.activo{border-color:transparent;background-image:linear-gradient(var(--tarjeta2),var(--tarjeta2)),var(--neon);background-origin:border-box;background-clip:padding-box,border-box;border:1.5px solid transparent;box-shadow:0 0 20px rgba(110,80,255,.25)}
.tarj-cab{display:flex;align-items:center;gap:10px}.tarj-cab b{display:block}.tarj-pie{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px}
.ficha{background:var(--panel);border:1px solid var(--borde);border-radius:var(--r);overflow:auto;padding:14px 18px 18px}
.herr{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:12px;border-bottom:1px solid var(--borde)}
.cab-ficha{display:flex;align-items:center;gap:16px;margin:18px 4px}.cab-ficha h2{margin:0 0 6px;font-size:23px;font-weight:700}
.av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;color:#fff;flex:none;background:var(--neon);box-shadow:0 0 14px rgba(110,80,255,.45)}.av.g{width:64px;height:64px;font-size:20px}
textarea,select,input[type=text],input[type=datetime-local]{width:100%;border:1px solid var(--borde2);border-radius:12px;padding:9px 12px;background:#0a0b17;outline:0}
textarea{resize:vertical}textarea:focus,select:focus,input:focus{border-color:var(--cian)}
label.campo{display:grid;gap:4px;font-size:12.5px;color:var(--suave)}
.fila{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}.fila>*{flex:1;min-width:160px}.fila>.boton,.fila>.casilla{flex:none;min-width:0}
.casilla{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:13px}.casilla input{width:17px;height:17px;accent-color:#7a5cff;margin:0}
.ia{white-space:pre-wrap;background:rgba(56,198,255,.07);border:1px solid rgba(56,198,255,.22);border-radius:14px;padding:12px}
.nota{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;flex:none;background:conic-gradient(var(--c,var(--oro)) calc(var(--v,0)*10%),rgba(125,140,255,.16) 0)}
.nota span{width:34px;height:34px;border-radius:50%;background:var(--tarjeta);display:grid;place-items:center}.nota.g{width:72px;height:72px;font-size:22px}.nota.g span{width:58px;height:58px}
.est{display:inline-block;padding:2px 9px;border-radius:99px;font-size:11.5px;background:rgba(125,140,255,.14);border:1px solid var(--borde);white-space:nowrap}
.est.e-aprobada,.est.e-programada,.est.e-terminada,.est.e-lista,.est.e-publicado{background:rgba(53,211,154,.14);color:#7af0c4;border-color:rgba(53,211,154,.35)}
.est.e-error,.est.e-cortada,.est.e-parada{background:rgba(255,93,108,.13);color:#ff9aa4;border-color:rgba(255,93,108,.35)}
.est.e-escribiendo,.est.e-corrigiendo,.est.e-en-cola,.est.e-en-marcha,.est.e-montando,.est.e-generando{background:rgba(246,181,48,.14);color:var(--oro2);border-color:rgba(246,181,48,.4)}
.maestro{border:1px solid var(--borde);border-radius:16px;padding:12px;background:var(--tarjeta);margin-top:10px}
.maestro .m-cab{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}.maestro ul{margin:6px 0;padding-left:18px}.maestro li{margin:2px 0}
.leccion{display:flex;gap:10px;align-items:flex-start;padding:10px 4px;border-top:1px solid var(--borde)}.leccion:first-child{border-top:0}.leccion p{margin:0;flex:1}.leccion.off p{opacity:.45;text-decoration:line-through}
.x{border:0;background:none;cursor:pointer;color:var(--suave);padding:2px 6px}.x:hover{color:var(--rojo)}
.flecha{display:flex;align-items:center;gap:10px}.flecha i{font-style:normal;color:var(--suave)}
.antes-despues{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}.antes-despues>div{white-space:pre-wrap;font-size:13px;border:1px solid var(--borde);border-radius:14px;padding:10px;background:#0a0b17}
.antes-despues small{display:block;color:var(--suave);margin-bottom:4px}
.banda{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:linear-gradient(120deg,rgba(47,123,255,.22),rgba(162,59,255,.22));border:1px solid var(--borde2);margin-bottom:14px}
.banda .punto{width:9px;height:9px;border-radius:50%;background:var(--oro);box-shadow:0 0 10px var(--oro);animation:late 1.2s ease-in-out infinite}@keyframes late{50%{opacity:.3}}
.persona{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.aviso{padding:10px 14px;border-radius:14px;background:rgba(255,93,108,.1);color:#ffb3ba;border:1px solid rgba(255,93,108,.3);margin-bottom:14px;white-space:pre-wrap}
.aviso.oro{background:rgba(246,181,48,.1);color:var(--oro2);border-color:rgba(246,181,48,.35)}
.dato{padding:7px 0;border-bottom:1px solid var(--borde)}.dato small{display:block;color:var(--suave);font-size:11.5px}
.vacio{padding:36px;text-align:center;color:var(--suave)}
.medios{display:flex;gap:10px;overflow:auto;padding:4px 0 10px}.medios img,.medios video{height:340px;border-radius:14px;border:1px solid var(--borde);background:#000;flex:none}
.medios.peq img{height:150px}
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.galeria figure{margin:0;background:var(--tarjeta2);border:1px solid var(--borde);border-radius:14px;overflow:hidden;position:relative}
.galeria img,.galeria video{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;background:#000}.galeria figcaption{padding:8px 10px;font-size:12px}
.galeria .x{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.6);border-radius:50%;width:26px;height:26px;color:#fff}
.red{display:flex;align-items:center;gap:8px;font-weight:600}.red i{width:10px;height:10px;border-radius:3px}
.productos{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px 14px;max-height:230px;overflow:auto}
details summary{cursor:pointer;padding:4px 0}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(90px);background:var(--neon);color:#fff;padding:10px 18px;border-radius:99px;transition:transform .25s;z-index:9;box-shadow:0 6px 24px rgba(110,80,255,.5);max-width:80vw}
#toast.ver{transform:translateX(-50%)}
@media (max-width:1200px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.dos,.tres{grid-template-columns:1fr}.lema{display:none}}
@media (max-width:860px){body{overflow:auto}.marco{height:auto}.menu{width:auto;flex-direction:row;flex-wrap:wrap}.menu small,.menu-pie{display:none}.cuerpo{flex-direction:column}.trabajo{grid-template-columns:1fr;height:auto}.antes-despues{grid-template-columns:1fr}.medios img,.medios video{height:240px}}
@media (prefers-reduced-motion:reduce){.banda .punto{animation:none}#toast{transition:none}}

/* Dirección: recomendaciones, organigrama, bandeja de autorización y gráfico (12-11-2026) */
.rec{display:flex;gap:12px;align-items:flex-start;padding:12px 2px;border-top:1px solid var(--borde)}.rec:first-child{border-top:0}
.rec .num{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:rgba(125,140,255,.16);flex:none}
.rec p{margin:2px 0 8px}.rec b{display:block}
.delta{font-size:12.5px;color:var(--suave)}
.org{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:14px;position:relative}
.org-jefa{max-width:420px;margin:0 auto}
.agente{background:var(--tarjeta2);border:1px solid var(--borde);border-radius:16px;padding:14px;text-align:center}
.agente .av{margin:0 auto 8px;width:48px;height:48px}.agente b{display:block}.agente p{margin:6px 0 0;font-size:12.5px;color:var(--suave)}
.agente.activo{border-color:var(--oro);box-shadow:0 0 18px rgba(246,181,48,.25)}.agente.jefa{background:linear-gradient(135deg,rgba(47,123,255,.22),rgba(162,59,255,.22)),var(--tarjeta2);border-color:var(--borde2)}
.agente .haciendo{display:inline-block;margin-top:8px;font-size:11.5px;color:var(--oro2)}
.aut{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:16px;align-items:start}
.aut .medios img,.aut .medios video{height:250px}
.grafico{display:flex;align-items:flex-end;gap:6px;height:170px;padding:22px 0 0;border-bottom:1px solid var(--borde2)}
.grafico div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;position:relative;min-width:0}
.grafico i{display:block;width:100%;max-width:22px;min-height:2px;border-radius:4px 4px 0 0;background:#5b8cff}
.grafico div:hover i,.grafico div:focus-visible i{background:#9db9ff}
.grafico span{position:absolute;top:-2px;font-size:11.5px;white-space:nowrap;background:#0a0b17;border:1px solid var(--borde2);border-radius:8px;padding:2px 7px;opacity:0;pointer-events:none;z-index:2}
.grafico div:hover span,.grafico div:focus-visible span{opacity:1}
.eje{display:flex;gap:6px;margin-top:6px}.eje small{flex:1;text-align:center;font-size:10.5px;color:var(--suave);min-width:0;overflow:hidden}
.horas{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}.horas div{background:var(--tarjeta2);border:1px solid var(--borde);border-radius:12px;padding:8px;text-align:center}
.horas small{display:block;color:var(--suave);font-size:11px;text-transform:capitalize}.horas b{font-size:16px}
.parte{white-space:pre-wrap;line-height:1.6}
.pregunta{display:flex;gap:8px;margin-top:10px}.pregunta input{flex:1}
@media (max-width:1200px){.org{grid-template-columns:repeat(2,minmax(0,1fr))}.aut{grid-template-columns:1fr}.horas{grid-template-columns:repeat(4,minmax(0,1fr))}}