@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');
/* ===========================================================================
   FUENTE DE VERDAD de la identidad visual de hiff. Esta hoja se sirve como
   /asset/style.css y la usan las TRES mitades del panel: las paginas del
   publisher, el login (panel_api.py) y el CRM (crm.py).

   Regla: ningun color, tipografia, radio ni sombra se escribe a pelo fuera de
   aqui. Si una pantalla necesita una variante, se añade un token en :root y se
   usa; asi un cambio de identidad sigue siendo un cambio en un solo sitio.
   =========================================================================== */
:root{
  /* marca */
  --p:#8D5EF6;--p2:#6E3FE8;--p-soft:#F1EBFF;--p-line:#E4D9FF;
  --grad:linear-gradient(135deg,#8D5EF6 0%,#A57BFF 55%,#C2A4FF 100%);
  /* superficies y texto */
  --bg:#FAF9FE;--bg-alt:#F6F4FB;--card:#fff;--line:#ECE8F6;
  --txt:#1D1830;--txt-soft:#5A5378;--mut:#7A7394;
  --pill-bg:#F3F1FA;--scroll:#DDD6F0;
  /* estados: cada uno con su tono fuerte, su fondo suave y su borde */
  --ok:#1FA971;--ok-soft:#E4F7EE;--ok-line:#CBEBD9;--ok2:#178A5E;
  --bad:#E5484D;--bad-soft:#FDECEC;
  --warn:#B7791F;--warn-soft:#FDF3E0;--warn-line:#F0D9A8;
  /* radios: --r es la tarjeta estandar; el resto son la misma escala */
  --r:18px;--r-lg:22px;--r-md:14px;--r-sm:12px;--r-xs:9px;--pill:999px;
  /* sombras */
  --sh:0 10px 30px rgba(101,64,204,.09);
  --sh-lift:0 14px 34px rgba(101,64,204,.14);
  --sh-modal:0 24px 60px rgba(101,64,204,.16);
  --sh-btn:0 8px 20px rgba(141,94,246,.35);
  /* tipografia */
  --disp:'Fredoka','Hanken Grotesk',sans-serif;--body:'Hanken Grotesk',system-ui,sans-serif;
  --fs:14.5px;
  /* aire entre bloques de una pagina (en el panel lo da el margen de los h2) */
  --sp:24px}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
::selection{background:var(--p-line)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:var(--pill)}
::-webkit-scrollbar-track{background:transparent}
a,button{transition:background .15s,color .15s,border-color .15s,box-shadow .18s,transform .18s}
:focus-visible{outline:2px solid var(--p);outline-offset:2px;border-radius:6px}
/* comun a las tres mitades: mismo fondo, mismo color, misma tipografia */
body{background:var(--bg);color:var(--txt);font:var(--fs)/1.6 var(--body);min-height:100vh;
  background-image:radial-gradient(760px 400px at 92% -6%,rgba(141,94,246,.14),transparent 62%),
  radial-gradient(620px 380px at -8% 104%,rgba(141,94,246,.08),transparent 60%)}
body.app{display:flex}                      /* panel: sidebar + main */
body.auth{display:flex;align-items:center;justify-content:center;padding:24px}  /* login */
a{color:inherit;text-decoration:none}
h1,h2,h3,.k,.when,.stat .k,.pill,.btn,nav a,.cal .mh,.wd,.irow .m b,dialog b{font-family:var(--disp)}
aside{width:225px;position:fixed;inset:0 auto 0 0;padding:26px 18px;border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:26px;background:rgba(255,255,255,.72)}
.brand{display:flex;align-items:center;gap:8px;margin-left:8px}
.brand .logo{height:32px}
.brand .ver{font:500 10px var(--disp);background:var(--p-soft);color:var(--p2);
  border-radius:var(--pill);padding:2px 8px;text-transform:lowercase}
nav{display:flex;flex-direction:column;gap:7px}
nav a{display:flex;align-items:center;gap:11px;padding:10px 15px;border-radius:var(--pill);
  color:var(--mut);font-weight:500;font-size:14.5px}
nav a svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
nav a:hover{color:var(--p2);background:var(--p-soft)}
nav a.on{color:#fff;background:var(--grad);box-shadow:0 7px 18px rgba(141,94,246,.35)}
.acct{margin-top:auto;padding:13px 15px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);font-size:12.5px;box-shadow:var(--sh);
  display:flex;align-items:center;gap:11px}
.acct .avp{width:40px;height:40px;border-radius:13px;object-fit:cover;flex:none;
  background:var(--p-soft)}
.acct .acd{min-width:0}
.acct b{display:block;font-weight:700}
.acct span{color:var(--mut)}
.acct .acd{line-height:1.45}
.acct .switch{display:block;margin-top:1px;font-size:11px;color:var(--p2);font-weight:700}
main{margin-left:225px;flex:1;padding:36px 48px;min-width:0}
header.top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:30px;
  padding-bottom:18px;border-bottom:1px solid var(--line)}
header.top h1{font-size:31px;font-weight:600;letter-spacing:-.01em}
.hsub{color:var(--mut);font-size:14.5px;margin-top:4px}
.hsub b{color:var(--p2)}
header.top .stamp{color:var(--mut);font-size:12px}
h2{font-size:16px;font-weight:500;margin:36px 0 14px;display:flex;align-items:center;gap:9px;text-transform:lowercase}
h2::before{content:"";width:7px;height:7px;border-radius:var(--pill);background:var(--p);
  box-shadow:0 0 0 4px rgba(141,94,246,.16);flex:none}
h2.alert{color:var(--bad)}h2.alert::before{background:var(--bad);box-shadow:0 0 0 4px rgba(229,72,77,.15)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:17px 19px;box-shadow:var(--sh)}
.stat .l{font-size:13px;font-weight:500;color:var(--mut);text-transform:lowercase}
.stat .k{font-size:32px;font-weight:500;margin:3px 0 1px}
.stat .d{font-size:12.5px;color:var(--mut)}
.stat.hero{background:var(--grad);border:0;color:#fff;box-shadow:0 12px 30px rgba(141,94,246,.35)}
.stat.hero .l,.stat.hero .d{color:rgba(255,255,255,.85)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:15px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;
  display:flex;gap:13px;align-items:flex-start;box-shadow:var(--sh);cursor:pointer;
  transition:transform .18s,box-shadow .18s;scroll-margin-top:24px}
.card:hover{transform:translateY(-2px);box-shadow:var(--sh-lift)}
.card img{width:74px;border-radius:11px;object-fit:cover;flex:none;background:var(--p-soft)}
img.h{aspect-ratio:4/5}img.v{aspect-ratio:9/16}
.pill{display:inline-block;border-radius:var(--pill);padding:2.5px 11px;font-size:11.5px;font-weight:500;
  background:var(--pill-bg);color:var(--txt-soft);margin-right:6px}
.pill.pending{background:var(--p-soft);color:var(--p2)}
.pill.publishing{background:var(--p-soft);color:var(--p2)}
.pill.done{background:var(--ok-soft);color:var(--ok)}
.pill.failed,.pill.needs_review{background:var(--bad-soft);color:var(--bad)}
.when{font-size:16px;font-weight:500;margin-top:6px}
.cap{color:var(--mut);font-size:12.5px;margin-top:2px}
.id{color:#B3ACCB;font-size:10.5px;margin-top:6px;font-family:ui-monospace,monospace;word-break:break-all}
.id a{color:var(--p2);font-family:var(--body);font-weight:700}
.err{color:var(--bad);font-size:12px;margin-top:6px}
.empty{color:var(--mut);padding:20px;border:1.5px dashed var(--p-line);border-radius:var(--r);background:rgba(255,255,255,.5)}
.acts{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}
.acts button{background:var(--pill-bg);color:#4A4468;border:0;border-radius:var(--pill);
  padding:4.5px 13px;font:500 11.5px var(--disp);cursor:pointer}
.acts button:hover{background:var(--p-soft);color:var(--p2)}
.acts button.danger:hover{background:var(--bad-soft);color:var(--bad)}
.btn{display:inline-block;background:var(--grad);color:#fff;border:0;border-radius:var(--pill);
  padding:8px 18px;font:500 13.5px var(--disp);cursor:pointer;box-shadow:0 7px 18px rgba(141,94,246,.3)}
.btn.big{width:100%;padding:12px;font-size:15px;font-weight:600;box-shadow:var(--sh-btn)}
.btn.ico{display:inline-flex;align-items:center;gap:8px}
/* Chevron en linea para botones de navegacion (atras/adelante, mes anterior).
   Mismo trazo que los iconos del menu lateral, para que se vean de la misma
   familia. Regla nueva: no altera nada de lo que ya habia. */
.chev{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;display:block;margin:0 auto}
/* Icono en linea dentro de un boton o pestaña. Mismo trazo que el menu lateral,
   y hereda el color del texto: nada de emojis, que cada sistema pinta a su aire. */
.ic{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.btn.ghost{background:var(--card);color:var(--txt);border:1.5px solid var(--line);box-shadow:none}
.btn.danger{background:var(--bad-soft);color:var(--bad);box-shadow:none}
.btn.sm{padding:8px 15px;font-size:13px}
/* calendario */
.cal{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  margin-bottom:18px;box-shadow:var(--sh)}
.cal .mh{padding:15px 19px;font:500 17px var(--disp);border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center}
.cal .mh small{color:var(--mut);font:500 12px var(--body);text-transform:lowercase}
.calnav{display:flex;align-items:center;justify-content:center;gap:16px;margin:2px 0 16px}
.calnav b{font:600 17px var(--disp);min-width:160px;text-align:center;text-transform:lowercase}
.cbtn{width:34px;height:34px;border-radius:var(--pill);border:1px solid var(--line);background:var(--card);
  color:var(--txt);font-size:18px;line-height:1;cursor:pointer;box-shadow:var(--sh);transition:background .15s}
.cbtn:hover{background:var(--bg-alt)}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr)}
.calgrid .wd{padding:9px 11px;font-size:11px;font-weight:500;color:var(--mut);
  border-bottom:1px solid var(--line);text-align:left;text-transform:lowercase;background:#FBFAFE}
.day{min-height:94px;padding:7px 8px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);
  transition:background .15s}
.day:hover{background:#FBFAFE}
.day.today{background:#FAF7FF}
.day:nth-child(7n){border-right:0}
.day .n{font-size:11.5px;color:var(--mut);font-weight:600}
.day.out{background:var(--bg-alt)}
.day.out .n{color:#CDC7E0}
.day.today .n{background:var(--grad);color:#fff;border-radius:var(--pill);padding:2px 8px;font-weight:600}
.ev{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;color:var(--txt);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xs);padding:4px 7px;margin-top:5px;
  box-shadow:0 2px 8px rgba(101,64,204,.07)}
.ev img{width:24px;height:24px;border-radius:6px;object-fit:cover;background:var(--p-soft)}
.ev .dot{width:7px;height:7px;border-radius:var(--pill);background:var(--p);margin-left:auto;flex:none}
.ev.done{opacity:.8}.ev.done .dot{background:var(--ok)}
.ev.failed .dot,.ev.needs_review .dot{background:var(--bad)}
.ev:hover{border-color:var(--p-line)}
/* insights */
.igrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:15px}
.icard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);overflow:hidden;transition:transform .18s,box-shadow .18s;scroll-margin-top:24px}
.icard:hover{transform:translateY(-2px);box-shadow:var(--sh-lift)}
.icard .tw img{transition:transform .35s}
.icard:hover .tw img{transform:scale(1.04)}
.icard .tw{display:block;position:relative;aspect-ratio:4/5;background:var(--grad)}
.icard .tw .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:500 34px var(--disp);color:rgba(255,255,255,.9)}
.icard .tw img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.icard .ib{padding:12px 14px}
.icard .v{font:500 21px var(--disp)}
.icard .v small{font:500 12px var(--body);color:var(--mut)}
.icard .mm{display:flex;flex-wrap:wrap;gap:3px 12px;font-size:11.5px;color:var(--mut);margin-top:3px}
.icard .mm b{color:var(--txt);font-weight:600}
.icard .dt{font-size:11px;color:var(--mut);margin-top:7px}
.note{color:var(--mut);font-size:12px;margin-top:8px}
dialog{background:var(--card);color:var(--txt);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;width:min(500px,92vw);box-shadow:0 24px 60px rgba(29,24,48,.25)}
dialog::backdrop{background:rgba(29,24,48,.35)}
dialog b{font-size:17px;font-weight:500}
dialog textarea{width:100%;height:150px;background:var(--bg);color:var(--txt);border:1.5px solid var(--line);
  border-radius:var(--r-sm);padding:11px;font:13.5px/1.5 var(--body);margin:12px 0;outline-color:var(--p)}
dialog menu{display:flex;gap:8px;justify-content:flex-end}
dialog button{background:var(--pill-bg);color:var(--txt);border:0;border-radius:var(--pill);padding:7px 17px;
  font:500 12.5px var(--disp);cursor:pointer}
dialog button[value=ok]{background:var(--grad);color:#fff}
/* crear contenido */
.day{position:relative;cursor:pointer}
.day .add{position:absolute;top:6px;right:8px;width:20px;height:20px;border-radius:var(--pill);
  background:var(--p-soft);color:var(--p2);font:600 15px var(--disp);line-height:19px;
  text-align:center;opacity:0;transition:.15s}
.day:hover .add{opacity:1}
.ev.more{display:none}.day.exp .ev.more{display:flex}
.moretog{margin-top:5px;width:100%;background:none;border:0;color:var(--p2);
  font:600 11px var(--body);cursor:pointer;text-align:left;padding:2px 0}
.moretog:hover{text-decoration:underline}
.fab{position:fixed;right:34px;bottom:30px;z-index:50;border:0;cursor:pointer;
  background:var(--grad);color:#fff;font:500 15px var(--disp);border-radius:var(--pill);
  padding:14px 24px;box-shadow:0 12px 30px rgba(141,94,246,.45)}
.fab:hover{transform:translateY(-2px)}
#cdlg{width:min(560px,94vw);max-height:90vh;overflow:auto;margin:auto}
.ctabs{display:flex;gap:8px;margin-bottom:18px;background:var(--pill-bg);padding:5px;border-radius:var(--r-md)}
.ct{flex:1;border:0;background:none;border-radius:10px;padding:9px;cursor:pointer;
  font:500 14px var(--disp);color:var(--mut)}
.ct.on{background:#fff;color:var(--p2);box-shadow:0 2px 8px rgba(101,64,204,.1)}
#cdlg label{display:block;text-align:left;font-size:13px;font-weight:600;color:var(--txt-soft);margin:14px 0 6px}
#cdlg label.drop{display:flex;text-align:center;margin:0;font-weight:400;color:var(--mut)}
#cdlg textarea,#cdlg input[type=date],#cdlg input[type=time]{width:100%;padding:11px 13px;
  border:1.5px solid var(--line);border-radius:var(--r-sm);font:14.5px var(--body);background:var(--bg);
  outline-color:var(--p)}
#cdlg textarea{height:110px;resize:vertical;font-family:var(--body)}
#cdlg input[type=file]{width:100%;font-size:13px;color:var(--mut)}
#cdlg input[type=file]::file-selector-button{border:0;background:var(--p-soft);color:var(--p2);
  font:600 12px var(--disp);padding:8px 14px;border-radius:var(--pill);margin-right:10px;cursor:pointer}
.row{display:flex;gap:12px}.row>div{flex:1}
.chk{display:flex!important;align-items:center;gap:9px;font-weight:500!important;
  color:var(--txt)!important;cursor:pointer;margin-top:16px!important}
.chk input{width:18px;height:18px;accent-color:var(--p)}
.thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.thumbs img{width:54px;height:68px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
#cdlg menu{margin-top:22px}
#cdlg .primary{background:var(--grad);color:#fff}
#cdlg .primary:disabled{opacity:.6;cursor:wait}
/* mi cuenta */
.fl{display:block;font-size:13px;font-weight:600;color:var(--txt-soft);margin:14px 0 6px}
.fi{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  font:14.5px var(--body);background:var(--bg);outline-color:var(--p)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.two .col{display:block}
.ctitle{font:600 16px var(--disp);margin-bottom:4px}
.hint{color:var(--mut);font-size:12.5px;margin-bottom:12px;line-height:1.4}
@media(max-width:720px){.two{grid-template-columns:1fr}}
/* plan Pro: violeta profundo -> dorado (premium) */
.pro{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:26px 28px;color:#fff;
  background:linear-gradient(140deg,#241B3E 0%,#4E3A7A 46%,#C79A46 130%);
  box-shadow:0 18px 44px rgba(60,40,20,.4);border:1px solid rgba(231,199,122,.35)}
.pro-glow{position:absolute;top:-70px;right:-50px;width:240px;height:240px;border-radius:var(--pill);
  background:radial-gradient(circle,rgba(231,199,122,.5),transparent 68%)}
.pro-top{display:flex;align-items:center;gap:12px;position:relative}
.pro-name{font:500 24px var(--disp)}.pro-name b{font-weight:700;color:#F0D68C}
.pro-badge{background:linear-gradient(135deg,#F0D68C,#D9A94A);color:#3A2B0E;border-radius:var(--pill);
  padding:3px 12px;font:700 11px var(--disp);text-transform:lowercase}
.pro-tag{margin:8px 0 16px;color:rgba(255,255,255,.92);font-size:14.5px;position:relative}
.pro-feat{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:20px;position:relative}
.pro-feat li{font-size:14px;color:rgba(255,255,255,.95)}
.pro-btn{background:linear-gradient(135deg,#F0D68C,#D9A94A)!important;color:#3A2B0E!important;
  box-shadow:0 8px 20px rgba(201,154,70,.4)!important;position:relative;font-weight:700}
.pro-btn:disabled{opacity:.9;cursor:not-allowed}
/* composer: origen y picker de biblioteca */
.srctog{display:flex;gap:6px;background:var(--pill-bg);padding:5px;border-radius:var(--r-sm);margin-bottom:10px}
.srcbtn,.kbtn{flex:1;border:0;background:none;border-radius:var(--r-xs);padding:8px;cursor:pointer;
  font:600 12.5px var(--disp);color:var(--mut)}
.srcbtn.on,.kbtn.on{background:#fff;color:var(--p2);box-shadow:0 2px 8px rgba(101,64,204,.1)}
.libbox .empty{grid-column:1/-1}
.libbox{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px;
  max-height:260px;overflow:auto;padding:4px}
.libpick{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:8px;cursor:pointer;
  border:2.5px solid transparent;transition:.12s}
.libpick:hover{border-color:var(--p-line)}
.libpick.sel{border-color:var(--p);box-shadow:0 0 0 2px var(--p-soft)}
/* pagina Biblioteca */
.upl{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin-bottom:8px}
.upl .ctitle{font:600 16px var(--disp)}
.upl-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:14px 0}
.upl-bar .srctog{margin-bottom:0;flex:1}
.upl-bar .btn{white-space:nowrap;padding:12px 34px;font-size:14.5px}
.upl .thumbs{margin-top:10px}.upl .thumbs img{width:52px;height:66px;object-fit:cover;border-radius:7px}
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.lt{position:relative;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line);background:#0B0A10}
.lt img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.lt[data-kind=story] img{aspect-ratio:9/16}
.lt-act{position:absolute;inset:auto 0 0 0;display:flex;gap:6px;padding:8px;
  background:linear-gradient(transparent,rgba(0,0,0,.72));opacity:0;transition:.15s}
.lt:hover .lt-act{opacity:1}
.lt-act button{flex:1;border:0;border-radius:8px;padding:6px;cursor:pointer;font:600 11px var(--disp);
  background:#fff;color:var(--p2)}
.lt-act button.danger{flex:none;width:30px;background:rgba(255,255,255,.85);color:var(--bad)}
.cnt{font:600 12px var(--body);color:var(--mut)}
.upl-bar .kbtn{padding:9px 10px}
@media(max-width:600px){.upl-bar{flex-direction:column;align-items:stretch}.upl-bar .srctog{max-width:none}}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:2px dashed var(--line);border-radius:var(--r-md);padding:24px;cursor:pointer;text-align:center;
  color:var(--mut);transition:.15s;background:var(--bg)}
.drop:hover,.drop.over{border-color:var(--p);background:var(--p-soft);color:var(--p2)}
.drop b{font-family:var(--disp);color:var(--txt);font-size:13.5px}
.drop span{font-size:12px}
.drop input{display:none}
.th{position:relative;display:inline-block;line-height:0}
.thx{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:var(--pill);background:var(--bad);color:#fff;border:2px solid #fff;font-size:9px;line-height:1;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}
.thx:hover{transform:scale(1.15)}
.sel-lbl{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mut);margin:12px 0 6px}
/* mini-calendario multi-dia */
.mcal{margin-top:12px;border:1px solid var(--line);border-radius:var(--r-sm);padding:0 12px}
.mcal summary{cursor:pointer;padding:11px 0;font:600 13px var(--disp);color:var(--p2);list-style:none}
.mcal summary::-webkit-details-marker{display:none}
.mcal[open] summary{border-bottom:1px solid var(--line);margin-bottom:10px}
.mcal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.mcal-h span{font:600 14px var(--disp)}
.mcal-h button{background:var(--p-soft);color:var(--p2);border:0;border-radius:8px;
  width:30px;height:30px;cursor:pointer;font-size:16px}
.mcal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;padding-bottom:10px}
.mcal-g .wd{text-align:center;font-size:10px;font-weight:700;color:var(--mut);padding:3px 0}
.mcal-g .cd{aspect-ratio:1;border:0;background:none;border-radius:8px;cursor:pointer;
  font:500 12.5px var(--body);color:var(--txt)}
.mcal-g .cd:hover{background:var(--p-soft)}
.mcal-g .cd.sel{background:var(--p);color:#fff;font-weight:700}
.mcal-g .cd.past{color:#C9C4DC;cursor:default}
.mcal-n{font-size:12px;color:var(--mut);padding-bottom:11px}
.lgrid .empty{grid-column:1/-1}
.pgnav{display:flex;align-items:center;gap:12px;margin-top:14px}
.pgnav button{background:var(--card);border:1px solid var(--line);color:var(--p2);border-radius:var(--pill);
  padding:8px 16px;font:600 12.5px var(--disp);cursor:pointer}
.pgnav button:hover:not(:disabled){border-color:var(--p-line);background:var(--p-soft)}
.pgnav button:disabled{opacity:.4;cursor:default}
.pgi{font:600 12.5px var(--disp);color:var(--mut)}
/* ---------- visor (lightbox estilo Instagram) ---------- */
.lb{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center}
.lb-bg{position:absolute;inset:0;background:rgba(20,16,32,.88);backdrop-filter:blur(3px)}
.lb-stage{position:relative;z-index:1;max-width:min(560px,92vw);max-height:88vh;
  display:flex;align-items:center;justify-content:center;border-radius:16px;overflow:hidden;
  background:#0B0A10;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lb-stage img{display:block;max-width:100%;max-height:88vh;width:auto;height:auto;object-fit:contain}
.lb-x{position:fixed;top:20px;right:22px;z-index:201;width:40px;height:40px;border-radius:var(--pill);
  border:0;background:rgba(255,255,255,.14);color:#fff;font-size:17px;cursor:pointer;
  backdrop-filter:blur(6px);transition:background .15s,transform .15s}
.lb-x:hover{background:rgba(255,255,255,.28);transform:scale(1.05)}
.lb-prev,.lb-next{position:fixed;top:50%;transform:translateY(-50%);z-index:201;width:44px;height:44px;
  border-radius:var(--pill);border:0;background:rgba(255,255,255,.14);color:#fff;font-size:22px;line-height:1;
  cursor:pointer;backdrop-filter:blur(6px);transition:background .15s,transform .15s}
.lb-prev{left:18px}.lb-next{right:18px}
.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.28)}
.lb-dots{position:fixed;left:0;right:0;bottom:24px;z-index:201;display:flex;gap:7px;justify-content:center}
.lb-dots span{width:7px;height:7px;border-radius:var(--pill);background:rgba(255,255,255,.4);
  cursor:pointer;transition:background .15s,transform .15s}
.lb-dots span.on{background:#fff;transform:scale(1.3)}
@media(max-width:600px){
  .lb-x{top:12px;right:12px;width:36px;height:36px;font-size:15px}
  .lb-prev,.lb-next{width:38px;height:38px;font-size:19px}
  .lb-prev{left:8px}.lb-next{right:8px}
  .lb-stage{max-width:96vw;max-height:82vh}
  .lb-stage img{max-height:82vh}
  .lb-dots{bottom:16px}
}
footer{margin-top:44px;color:#C4BDD9;font-size:11.5px}
/* ---------- responsive ---------- */
#mnav,.burger{display:none}   /* hamburguesa: solo existe en movil */
@media(max-width:880px){
  body{display:block}
  /* cabecera de app: hamburguesa + logo; la nav es un desplegable */
  /* OJO: sin backdrop-filter aqui — crearia containing block y encerraria
     el menu fixed dentro de la cabecera */
  aside{position:sticky;top:0;z-index:40;width:auto;inset:auto;flex-direction:row;
    align-items:center;border-right:0;border-bottom:1px solid var(--line);
    padding:13px 16px;background:#fff}
  .brand{margin-left:0;gap:8px}
  .brand .logo{height:27px}
  /* logo a la izquierda, hamburguesa a la derecha (patron app) */
  .burger{display:flex;position:fixed;right:10px;top:7px;z-index:3;
    align-items:center;justify-content:center;width:40px;height:40px;
    border-radius:var(--r-sm);cursor:pointer;color:var(--txt);flex:none}
  .burger svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
  .burger:active,#mnav:checked~.brand .burger{background:var(--p-soft);color:var(--p2)}
  /* hamburguesa <-> aspa */
  .burger .ix{display:none}
  #mnav:checked~.brand .burger .ib{display:none}
  #mnav:checked~.brand .burger .ix{display:block}
  .brand{position:relative;z-index:2}
  aside .acct{display:none}
  /* menu a pantalla completa */
  nav{display:none;position:fixed;inset:0;z-index:1;flex-direction:column;gap:4px;
    background:#fff;padding:78px 20px 120px;overflow-y:auto}
  #mnav:checked~nav{display:flex;animation:mnav .2s ease}
  @keyframes mnav{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  nav a{padding:15px 18px;font-size:16.5px;gap:14px}
  nav a svg{width:19px;height:19px}
  /* la cuenta cierra el menu, como en la sidebar */
  #mnav:checked~.acct{display:flex;position:fixed;left:20px;right:20px;bottom:24px;z-index:1;
    margin:0;padding:15px 18px;font-size:13px}
  main{margin:0;padding:22px 18px 90px}
  /* hero con mas presencia: titular grande y compacto, stamp como detalle */
  header.top{flex-wrap:wrap;gap:2px;margin-bottom:24px;padding:10px 0 20px}
  header.top h1{font-size:31px;line-height:1.15;letter-spacing:-.02em}
  .hsub{font-size:15.5px;margin-top:8px}
  header.top .stamp{width:100%;order:3;margin-top:10px;font-size:11px}
}
@media(max-width:600px){
  main{padding:18px 13px 90px}
  .stats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
  .stat{padding:13px 15px}
  .stat .k{font-size:26px}
  .grid,.igrid{grid-template-columns:1fr 1fr;gap:10px}
  .grid{grid-template-columns:1fr}
  .card img{width:62px}
  /* calendario: en pantallas estrechas se desplaza en horizontal, no se aplasta */
  .cal{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .calgrid{min-width:604px}
  .day{min-height:78px}
  .day .add{opacity:1}          /* sin hover en tactil: el + siempre visible */
  .ev img{width:20px;height:20px}
  .fab{right:16px;bottom:16px;padding:12px 20px;font-size:14px}
  dialog,#cdlg{width:min(560px,96vw);padding:16px}
  .row{flex-wrap:wrap}.row>div{flex:1 1 130px}
  .lgrid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px}
  .lt-act{opacity:1}            /* acciones de biblioteca visibles sin hover */
  .libbox{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}
  .acts button{padding:6px 13px}   /* dedos, no punteros */
  .pgnav{justify-content:center}
  footer{margin-top:30px}
  /* iOS hace zoom al enfocar inputs <16px */
  #cdlg textarea,#cdlg input[type=date],#cdlg input[type=time],dialog textarea,.fi{font-size:16px}
}
/* ---------- tu marca: banner de inicio ---------- */
.bbar{display:flex;align-items:center;gap:16px;margin-bottom:22px;padding:16px 20px;
  border-radius:var(--r);color:#fff;background:var(--grad);
  box-shadow:0 12px 30px rgba(141,94,246,.35);transition:transform .18s,box-shadow .18s}
.bbar:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(141,94,246,.45)}
.bbar .bico{font-size:26px;flex:none}
.bbar b{display:block;font:600 16px var(--disp)}
.bbar span{font-size:12.5px;color:rgba(255,255,255,.88)}
.bbar .bprog{display:flex;gap:5px;margin-top:6px}
.bbar .bprog i{width:34px;height:5px;border-radius:var(--pill);background:rgba(255,255,255,.35)}
.bbar .bprog i.on{background:#fff}
.bbar .bbtn{margin-left:auto;flex:none;background:#fff;color:var(--p2);border-radius:var(--pill);
  padding:9px 20px;font:600 13px var(--disp);box-shadow:0 4px 12px rgba(29,24,48,.18)}
/* ---------- tu marca: asistente ---------- */
.okpill{display:inline-flex;align-items:center;gap:5px;background:var(--ok-soft);color:var(--ok);
  border-radius:var(--pill);padding:3px 12px;font:600 11.5px var(--disp)}
.warnpill{display:inline-flex;align-items:center;gap:5px;background:var(--p-soft);color:var(--p2);
  border-radius:var(--pill);padding:3px 12px;font:600 11.5px var(--disp)}
.wtwo{display:grid;grid-template-columns:1fr 1fr;gap:4px 34px;align-items:start}
.pv{border-radius:16px;padding:26px 24px;margin-top:14px;transition:background .2s;
  border:1px solid var(--line)}
.pv .pv-t{font-size:30px;line-height:1.15;overflow-wrap:anywhere}
.pv .pv-s{font-size:14.5px;margin-top:6px;opacity:.85}
.pv .pv-a{display:block;width:46px;height:6px;border-radius:var(--pill);margin-top:14px}
.pv-lbl{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mut);margin:16px 0 0}
.wsteps{display:flex;gap:8px;margin-bottom:22px}
.ws{flex:1;display:flex;align-items:center;gap:9px;border:1.5px solid var(--line);background:var(--card);
  border-radius:var(--r-md);padding:11px 13px;cursor:pointer;text-align:left;font:500 12.5px var(--disp);
  color:var(--mut)}
.ws .n{width:24px;height:24px;border-radius:var(--pill);background:var(--pill-bg);color:var(--mut);flex:none;
  display:flex;align-items:center;justify-content:center;font:600 12px var(--disp)}
.ws.on{border-color:var(--p);color:var(--p2);box-shadow:0 6px 16px rgba(141,94,246,.16)}
.ws.on .n{background:var(--grad);color:#fff}
.ws.done .n{background:var(--ok-soft);color:var(--ok)}
.wpane{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 26px;box-shadow:var(--sh)}
.wpane h3{font:500 19px var(--disp);margin-bottom:2px}
.wpane .wsub{color:var(--mut);font-size:13px;margin-bottom:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--line);background:var(--bg);border-radius:var(--pill);padding:7px 15px;
  cursor:pointer;font:500 12.5px var(--disp);color:var(--mut);transition:.12s}
.chip:hover{border-color:var(--p-line);color:var(--p2)}
.chip.on{background:var(--p-soft);border-color:var(--p);color:var(--p2)}
.crow{display:flex;align-items:center;gap:12px;margin-top:10px}
.crow input[type=color]{width:46px;height:46px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:3px;background:var(--card);cursor:pointer;flex:none}
.crow .fi{flex:1}
.crow .cl{width:110px;flex:none;font-size:12.5px;font-weight:600;color:var(--txt-soft)}
.fontgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:9px}
.fontcard{border:1.5px solid var(--line);background:var(--bg);border-radius:var(--r-md);padding:13px 15px;
  cursor:pointer;text-align:left;transition:.12s}
.fontcard:hover{border-color:var(--p-line)}
.fontcard.on{border-color:var(--p);background:var(--p-soft);box-shadow:0 6px 16px rgba(141,94,246,.14)}
.fontcard .fs{display:block;font-size:19px;line-height:1.25;color:var(--txt)}
.fontcard .fn{display:block;font:600 10.5px var(--disp);color:var(--mut);margin-top:5px;
  text-transform:uppercase;letter-spacing:.08em}
.freqrow{display:flex;gap:8px;flex-wrap:wrap}
.freqbtn{min-width:64px;border:1.5px solid var(--line);background:var(--bg);border-radius:var(--r-md);
  padding:10px 12px;cursor:pointer;font:500 13px var(--disp);color:var(--mut);text-align:center}
.freqbtn b{display:block;font-size:19px;color:var(--txt)}
.freqbtn.on{border-color:var(--p);background:var(--p-soft);color:var(--p2)}
.freqbtn.on b{color:var(--p2)}
.logoprev{display:flex;align-items:center;gap:14px;margin-top:10px}
.logoprev img{width:76px;height:76px;object-fit:contain;border-radius:var(--r-md);border:1px solid var(--line);
  background:repeating-conic-gradient(var(--pill-bg) 0 25%,#fff 0 50%) 0 0/16px 16px}
.refgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:9px;margin-top:10px}
.refgrid .th img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:10px;
  border:1px solid var(--line)}
.wnav{display:flex;gap:10px;justify-content:flex-end;margin-top:24px}
.wnav .ghost{background:var(--pill-bg);color:#4A4468;border:0;border-radius:var(--pill);padding:9px 18px;
  font:500 13px var(--disp);cursor:pointer}
.wdone-banner{display:flex;align-items:center;gap:12px;background:var(--ok-soft);color:var(--ok);
  border-radius:var(--r);padding:13px 18px;margin-bottom:18px;font:500 13.5px var(--disp)}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);z-index:99;
  background:var(--txt);color:#fff;border-radius:var(--pill);padding:11px 22px;font:500 13px var(--disp);
  opacity:0;pointer-events:none;transition:.25s}
.toast.show,.toast.on{opacity:1;transform:translateX(-50%)}  /* .on lo usa el CRM */
@media(max-width:860px){.wtwo{grid-template-columns:1fr}}
@media(max-width:720px){
  .bbar{flex-wrap:wrap;padding:15px 16px}
  .bbar .bbtn{margin-left:0;width:100%;text-align:center}
  .wsteps{flex-direction:column}
  .ws{flex:none}
  .wpane{padding:18px 16px}
  .crow{flex-wrap:wrap}.crow .cl{width:100%}
  .wnav{flex-direction:column-reverse}.wnav .btn,.wnav .ghost{width:100%;text-align:center}
  .wiz .fi,.wiz textarea,.wiz select{font-size:16px}
}

/* --------------------------------------------------------------------------
   Autenticacion: login y selector de cuentas (paginas de panel_api.py).
   Viven aqui, y no en panel_api.py, para que la identidad completa siga
   saliendo de un unico sitio. El marcado lo pone panel_api; los estilos, esta
   hoja.
   -------------------------------------------------------------------------- */
.box{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:38px 34px;width:min(400px,100%);box-shadow:var(--sh-modal);text-align:center}
.box .logo{height:40px;margin-bottom:6px}
.box h1{font-size:22px;font-weight:500;margin-bottom:4px}
.box p.s{color:var(--mut);font-size:13.5px;margin-bottom:24px}
.box label{display:block;text-align:left;font-size:13px;font-weight:600;
  color:var(--txt-soft);margin:12px 0 5px}
.box .fi{font-size:16px}                     /* 16px evita el zoom de iOS */
.box .err{background:var(--bad-soft);color:var(--bad);border-radius:var(--r-sm);
  padding:10px;font-size:13px;margin-bottom:16px}
.box .btn{margin-top:22px}
.tlist{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.tlist a{display:flex;align-items:center;gap:12px;padding:14px 16px;
  border:1.5px solid var(--line);border-radius:var(--r-md);text-align:left;font-weight:600}
.tlist a:hover{border-color:var(--p-line);background:var(--p-soft)}
.tlist .av{width:38px;height:38px;border-radius:var(--r-sm);background:var(--grad);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-size:17px;flex:none;position:relative;overflow:hidden}
.tlist .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tlist small{display:block;color:var(--mut);font-weight:400}
a.logout{display:inline-block;margin-top:18px;color:var(--mut);font-size:13px}