/* VozAI · diseño de la bandeja (extensión y teléfono).
   Una sola apariencia oscura y deliberada: tinta casi negra con brillo violeta, superficies de vidrio,
   tipografía del sistema (SF en Mac/iPhone), números tabulares y un solo acento violeta→fucsia. */
:root{
  color-scheme:dark;
  --bg:#08080c; --bg2:#0d0c14;
  --glass:rgba(255,255,255,.035); --glass2:rgba(255,255,255,.06); --glass3:rgba(255,255,255,.09);
  --hair:rgba(255,255,255,.08); --hair2:rgba(255,255,255,.14);
  --ink:#f5f4fa; --ink2:#c8c5d6; --muted:#8a869c; --faint:#5d5a6d;
  --v1:#8b5cf6; --v2:#d946ef; --vglow:rgba(139,92,246,.35);
  --heart:#f43f7a; --heart-bg:rgba(244,63,122,.12);
  --alma:#a78bfa; --alma-bg:rgba(139,92,246,.14);
  --fight:#f87171; --fight-bg:rgba(248,113,113,.12);
  --ok:#34d399; --warn:#fbbf24;
  --r-sm:10px; --r:14px; --r-lg:20px;
  --ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;font-family:var(--ui);font-size:14px;line-height:1.5;color:var(--ink);-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(900px 500px at 12% -10%, rgba(139,92,246,.20), transparent 60%),
    radial-gradient(700px 420px at 100% 0%, rgba(217,70,239,.12), transparent 60%),
    linear-gradient(180deg,var(--bg2),var(--bg) 40%);
  background-attachment:fixed}
::selection{background:rgba(139,92,246,.45)}
button,input,select,textarea{font:inherit;color:inherit}
a{color:#c4b5fd;text-decoration:none} a:hover{text-decoration:underline}

/* ---------- Estructura ---------- */
.shell{display:grid;grid-template-columns:268px minmax(0,1fr);min-height:100%}
.side{position:sticky;top:0;height:100vh;padding:22px 16px;display:flex;flex-direction:column;gap:20px;border-right:1px solid var(--hair);
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.01));backdrop-filter:blur(18px)}
.brand{display:flex;align-items:center;gap:11px;padding:0 6px}
.mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:17px;color:#fff;
  background:linear-gradient(140deg,var(--v1),var(--v2));box-shadow:0 6px 22px var(--vglow), inset 0 1px 0 rgba(255,255,255,.35)}
.brand b{font-family:var(--display);font-size:17px;letter-spacing:-.01em;display:block;line-height:1.1}
.brand span{font-size:12px;color:var(--muted)}
.slabel{font-size:11px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);padding:0 8px;margin-bottom:6px}
.main{min-width:0}
.content{max-width:880px;margin:0 auto;padding-inline:28px;padding-block:22px 80px;display:flex;flex-direction:column;gap:16px}

/* ---------- Barra superior ---------- */
.topbar{position:sticky;top:0;z-index:5;padding-block:14px;margin-inline:-28px;padding-inline:28px;
  background:linear-gradient(180deg,rgba(8,8,12,.92),rgba(8,8,12,.72));backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid var(--hair);
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.hero{display:flex;align-items:baseline;gap:12px}
.hero h1{margin:0;font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:-.02em}
#count{font-variant-numeric:tabular-nums;font-size:13px;font-weight:600;color:#fff;padding:3px 10px;border-radius:999px;
  background:linear-gradient(140deg,var(--v1),var(--v2));box-shadow:0 4px 14px var(--vglow)}
.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ---------- Botones ---------- */
button{cursor:pointer;border:1px solid var(--hair);background:var(--glass2);border-radius:var(--r-sm);padding:8px 13px;font-size:13.5px;font-weight:550;
  transition:background .15s var(--ease),border-color .15s var(--ease),transform .15s var(--ease),box-shadow .15s var(--ease)}
button:hover{background:var(--glass3);border-color:var(--hair2)}
button:active{transform:scale(.98)}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--v1);outline-offset:2px}
button:disabled{opacity:.5;cursor:wait}
button.main{border-color:transparent;color:#fff;background:linear-gradient(140deg,var(--v1),var(--v2));
  box-shadow:0 6px 20px rgba(139,92,246,.28), inset 0 1px 0 rgba(255,255,255,.25)}
button.main:hover{filter:brightness(1.08);box-shadow:0 8px 26px rgba(139,92,246,.38), inset 0 1px 0 rgba(255,255,255,.3)}
button.heart{border-color:rgba(244,63,122,.35);background:var(--heart-bg);color:#ffd1e0}
button.heart:hover{background:rgba(244,63,122,.2)}
button.icon{width:36px;height:36px;padding:0;display:grid;place-items:center;border-radius:11px}
.ghost{background:transparent;border-color:transparent}
.ghost:hover{background:var(--glass2)}

/* ---------- Navegación de redes ---------- */
.plats{display:flex;flex-direction:column;gap:3px}
.ptab{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border-radius:11px;border:1px solid transparent;background:transparent;text-align:left}
.ptab:hover{background:var(--glass2)}
.ptab[aria-pressed="true"]{background:var(--glass3);border-color:var(--hair2);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.ptab .pi{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:15px;background:var(--glass2)}
.ptab .pl{flex:1;font-size:14px;font-weight:550;color:var(--ink2)}
.ptab[aria-pressed="true"] .pl{color:var(--ink)}
.ptab .pn{font-size:12px;font-weight:650;font-variant-numeric:tabular-nums;min-width:24px;text-align:center;padding:1px 8px;border-radius:999px;color:var(--faint);background:transparent}
.ptab .pn.on{color:#fff;background:linear-gradient(140deg,#f43f7a,#d946ef)}

/* ---------- Robot ---------- */
.robot{border:1px solid var(--hair);background:var(--glass);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:10px;font-size:12.5px;color:var(--ink2)}
.robot .rt{display:flex;gap:9px;align-items:flex-start}
.dot{width:9px;height:9px;border-radius:50%;background:var(--faint);flex:none;margin-top:5px}
.dot.on{background:var(--ok);box-shadow:0 0 0 4px rgba(52,211,153,.15)}
.dot.busy{background:var(--warn);box-shadow:0 0 0 4px rgba(251,191,36,.15);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(251,191,36,.05)}}
.robot .rb{display:flex;gap:6px}
.robot .rb button{flex:1;font-size:12.5px;padding:7px 9px}
.sidefoot{margin-top:auto;display:flex;flex-direction:column;gap:4px}

/* ---------- Vistas y filtros ---------- */
.views{display:inline-flex;padding:3px;border-radius:12px;background:var(--glass);border:1px solid var(--hair)}
.view{border:0;background:transparent;border-radius:9px;padding:7px 14px;color:var(--muted)}
.view[aria-pressed="true"]{background:var(--glass3);color:var(--ink);box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 2px 10px rgba(0,0,0,.35)}
.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border-radius:999px;padding:6px 12px;font-size:13px;color:var(--ink2);background:var(--glass);border-color:var(--hair)}
.chip b{font-variant-numeric:tabular-nums;margin-left:6px;color:var(--muted);font-weight:650}
.chip[aria-pressed="true"]{color:#fff;border-color:rgba(139,92,246,.6);background:linear-gradient(140deg,rgba(139,92,246,.35),rgba(217,70,239,.22))}
.chip[aria-pressed="true"] b{color:#fff}
select,input[type="search"],input[type="url"],.idea input{background:var(--glass);border:1px solid var(--hair);border-radius:var(--r-sm);padding:8px 11px;color:var(--ink)}
input[type="search"]{flex:1;min-width:180px}
select option{background:#15141c}
.postf{font-size:13px;display:flex;gap:10px;align-items:center;justify-content:space-between;border:1px solid rgba(139,92,246,.45);background:rgba(139,92,246,.12);border-radius:var(--r);padding:8px 12px}
.old{font-size:13px;color:var(--muted);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.keys{font-size:12px;color:var(--faint);display:flex;flex-wrap:wrap;gap:6px 12px}
kbd{font-family:var(--ui);font-size:11px;font-weight:650;color:var(--ink2);background:var(--glass2);border:1px solid var(--hair2);border-bottom-width:2px;border-radius:6px;padding:0 6px;margin-right:4px}
.err{color:#fca5a5;font-size:13px}

/* ---------- Grupos (publicaciones) ---------- */
.group{border:1px solid var(--hair);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 20px 50px -30px rgba(0,0,0,.8)}
.ghead{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--hair)}
.ghead .t{display:flex;align-items:center;gap:10px;min-width:0;flex:1;font-family:var(--display);font-size:15.5px;font-weight:650;letter-spacing:-.01em}
.ghead .t > span:not(.plat):not(.new){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ghead .m{font-size:12.5px;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.plat{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:7px;flex:none}
.plat.facebook{background:rgba(59,130,246,.16);color:#9cc2ff} .plat.instagram{background:rgba(236,72,153,.16);color:#ffb3d6}
.plat.youtube{background:rgba(239,68,68,.16);color:#ffb0b0} .plat.tiktok{background:rgba(45,212,191,.14);color:#99f6e4}
.new{font-size:11px;font-weight:650;color:#bbf7d0;background:rgba(52,211,153,.14);padding:2px 8px;border-radius:999px;flex:none}
.ghead .work{margin-left:auto;padding:8px 14px}
.items{display:flex;flex-direction:column}

/* ---------- Comentario ---------- */
.c{position:relative;padding:16px 18px 16px 20px;display:flex;flex-direction:column;gap:11px;border-top:1px solid var(--hair);
  transition:background .2s var(--ease),opacity .25s var(--ease),transform .25s var(--ease)}
.items .c:first-child{border-top:0}
.c::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--faint);opacity:.6}
.c.k-alma::before{background:linear-gradient(180deg,var(--v1),var(--v2));opacity:1}
.c.k-corazon::before{background:var(--heart);opacity:1}
.c.k-conflicto::before{background:var(--fight);opacity:1}
.c:hover{background:rgba(255,255,255,.018)}
.c.sel{background:rgba(139,92,246,.07);box-shadow:inset 0 0 0 1px rgba(139,92,246,.45)}
.c:focus{outline:none}
.c.done{opacity:.45}
.c.leaving{opacity:0;transform:translateX(18px)}
.top{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:13px;font-weight:700;color:#fff;letter-spacing:.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.who{display:flex;flex-direction:column;min-width:0;flex:1}
.who b{font-size:14.5px;font-weight:650;line-height:1.2}
.meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--muted);margin-top:2px}
.tag{font-size:11.5px;padding:1px 8px;border-radius:999px;background:var(--glass2);color:var(--ink2);border:1px solid var(--hair)}
.prop{font-size:12px;font-weight:650;padding:4px 10px;border-radius:999px;border:1px solid transparent;flex:none}
.prop.alma{background:var(--alma-bg);color:#ddd6fe;border-color:rgba(139,92,246,.35)}
.prop.corazon{background:var(--heart-bg);color:#ffc2d6;border-color:rgba(244,63,122,.35)}
.prop.conflicto{background:var(--fight-bg);color:#fecaca;border-color:rgba(248,113,113,.35)}
.prop.none{background:var(--glass2);color:var(--ink2);border-color:var(--hair)}
.text{white-space:pre-wrap;font-size:15px;line-height:1.55;color:var(--ink);max-height:220px;overflow:auto;padding-left:44px}
.flag{font-size:12px;color:var(--warn);padding-left:44px}
.c textarea{margin-left:44px;width:calc(100% - 44px);min-height:64px;resize:vertical;border-radius:12px;border:1px solid rgba(139,92,246,.35);
  background:linear-gradient(180deg,rgba(139,92,246,.08),rgba(139,92,246,.03));padding:11px 13px;line-height:1.5;font-size:14.5px;color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.c textarea:focus{border-color:rgba(167,139,250,.7);box-shadow:0 0 0 4px rgba(139,92,246,.15)}
.quick{display:flex;gap:6px;flex-wrap:wrap;padding-left:44px}
.qp{font-size:12.5px;padding:4px 11px;border-radius:999px;color:var(--ink2);background:transparent;border:1px dashed var(--hair2);font-weight:500}
.qp:hover{border-style:solid;color:var(--ink)}
.acts{display:flex;gap:8px;flex-wrap:wrap;padding-left:44px}
.acts button:not(.main):not(.heart){min-width:40px}
.more{display:flex;flex-direction:column;gap:8px;padding-left:44px}
.more > button{align-self:flex-start}
.idea{display:flex;gap:6px}
.idea input{flex:1;min-width:0}

/* ---------- Publicaciones ---------- */
.post{border:1px solid var(--hair);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));border-radius:var(--r-lg);padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.post .h{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.post .h b{font-family:var(--display);font-size:15.5px;min-width:0;overflow:hidden;text-overflow:ellipsis}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.stat{background:var(--glass);border:1px solid var(--hair);border-radius:12px;padding:9px 11px;display:flex;flex-direction:column;gap:2px}
.stat span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.stat b{font-family:var(--display);font-variant-numeric:tabular-nums;font-size:19px;font-weight:700;letter-spacing:-.01em}
.post .acts{padding-left:0;align-items:center}
#link{flex:1;min-width:220px}

/* ---------- Estados ---------- */
.empty{padding:56px 20px;text-align:center;color:var(--muted);border:1px dashed var(--hair2);border-radius:var(--r-lg);background:var(--glass)}
.empty::before{content:"✦";display:block;font-size:30px;margin-bottom:10px;background:linear-gradient(140deg,var(--v1),var(--v2));-webkit-background-clip:text;background-clip:text;color:transparent}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:20;max-width:92vw;padding:11px 16px;border-radius:999px;font-size:13.5px;
  background:rgba(24,22,34,.92);border:1px solid var(--hair2);backdrop-filter:blur(14px);box-shadow:0 14px 40px rgba(0,0,0,.55);animation:rise .25s var(--ease)}
@keyframes rise{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
.list{display:flex;flex-direction:column;gap:18px}

/* ---------- Teléfono / ventana angosta ---------- */
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--hair);padding:14px 16px;gap:12px;backdrop-filter:none}
  .side .slabel,.sidefoot .sf-label{display:none}
  .plats{flex-direction:row;overflow-x:auto;gap:6px;scrollbar-width:none;margin-inline:-4px;padding-inline:4px}
  .plats::-webkit-scrollbar{display:none}
  .ptab{flex:none;width:auto;padding:7px 11px;gap:7px;border:1px solid var(--hair);background:var(--glass)}
  .content{padding-inline:16px}
  .topbar{margin-inline:-16px;padding-inline:16px}
  .sidefoot{flex-direction:row;margin-top:0}
}
@media (max-width:560px){
  .text,.flag,.quick,.acts,.more{padding-left:0}
  .c textarea{margin-left:0;width:100%}
  .hero h1{font-size:22px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .acts .main,.acts .heart{flex:1}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- Detalles ---------- */
.ptab .pi{font-weight:800;color:#fff}
.pi.p-all{background:linear-gradient(140deg,var(--v1),var(--v2))}
.pi.p-facebook{background:linear-gradient(140deg,#3b82f6,#1d4ed8);font-family:Georgia,serif;font-size:17px}
.pi.p-instagram{background:linear-gradient(140deg,#f59e0b,#ec4899 55%,#8b5cf6)}
.pi.p-youtube{background:linear-gradient(140deg,#ef4444,#b91c1c);font-size:11px}
.pi.p-tiktok{background:linear-gradient(140deg,#14b8a6,#0f172a 70%,#f43f5e)}
.ghead .m a{font-weight:600}
.ghead .m .ghost{padding:4px 9px;font-size:12.5px;color:var(--muted)}
.post .t b{font-family:var(--display);font-size:15.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.postf span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidefoot .ghost{color:var(--ink2);font-weight:500}
.c .acts .main,.c .acts .heart{padding-inline:16px}
.list .empty{margin-top:6px}
@media (max-width:900px){ .ptab .pi{width:22px;height:22px;border-radius:7px} .ptab .pi.p-facebook{font-size:14px} }
.ghead .t{flex:1 1 100%}
.ghead .t > span:not(.plat):not(.new){min-width:0}
.ghead .m{flex:1}
.chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-block:2px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none}
.topbar{background:transparent;border-bottom:0;backdrop-filter:none;
  border-image:linear-gradient(rgba(10,9,15,.82),rgba(10,9,15,.82)) fill 0 / / 0 100vw}
.topbar::after{content:"";position:absolute;left:-100vw;right:-100vw;bottom:0;height:1px;background:var(--hair)}
.main{overflow-x:clip}
@supports (backdrop-filter:blur(1px)){.topbar{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}}
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{flex-direction:row;flex-wrap:wrap;align-items:center}
  .side > div:nth-child(2){order:5;flex:1 1 100%;min-width:0}
  .side > div:nth-child(3){order:6;flex:1 1 100%}
  .brand{flex:1}
  .robot{flex-direction:row;align-items:center;padding:8px 10px}
  .robot .rt{flex:1;min-width:0}
  .robot .rt span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .robot .dot{margin-top:0}
  .robot .rb button{flex:none}
  .keys{display:none}
}
.chips{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);padding-right:24px}
@media (max-width:560px){ .ghead .work{flex:1 1 100%;margin-left:0} .ghead .m{flex:1 1 100%} }
.robot .rt{align-items:center}
.acts button{white-space:nowrap}
@media (max-width:560px){ .acts{flex-wrap:nowrap} .acts .main,.acts .heart{min-width:0;overflow:hidden;text-overflow:ellipsis} .acts button:not(.main):not(.heart){padding-inline:11px} .topbar{padding-block:10px} }

/* ---------- Panel lateral de Chrome (angosto, al lado de Facebook) ---------- */
.panel .shell{grid-template-columns:minmax(0,1fr)}
.panel .side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--hair);padding:12px 12px;gap:10px;flex-direction:row;flex-wrap:wrap;align-items:center;backdrop-filter:none}
.panel .slabel,.panel .sf-label,.panel .brand span,.panel .keys{display:none}
.panel .brand{flex:1;padding:0}
.panel .mark{width:28px;height:28px;font-size:14px;border-radius:9px}
.panel .side > div:nth-child(2){order:5;flex:1 1 100%;min-width:0}
.panel .side > div:nth-child(3){order:6;flex:1 1 100%}
.panel .sidefoot{flex-direction:row;margin-top:0;gap:2px}
.panel .sidefoot button{width:34px;height:34px;padding:0;display:grid;place-items:center}
.panel .plats{flex-direction:row;overflow-x:auto;gap:6px;scrollbar-width:none}
.panel .plats::-webkit-scrollbar{display:none}
.panel .ptab{flex:none;width:auto;padding:6px 9px;gap:6px;border:1px solid var(--hair);background:var(--glass)}
.panel .ptab .pl{display:none}
.panel .ptab .pi{width:22px;height:22px;border-radius:7px;font-size:13px}
.panel .robot{flex-direction:row;align-items:center;padding:7px 9px}
.panel .robot .rt{flex:1;min-width:0}
.panel .robot .rt span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel .robot .rb button{flex:none;padding:5px 9px}
.panel .content{padding-inline:12px;gap:12px}
.panel .topbar{margin-inline:-12px;padding-inline:12px;padding-block:10px}
.panel .hero h1{font-size:20px}
.panel .view{padding:6px 10px}
.panel .ghead{padding:12px 12px}
.panel .c{padding:14px 12px 14px 14px}
.panel .text,.panel .flag,.panel .quick,.panel .acts,.panel .more{padding-left:0}
.panel .c textarea{margin-left:0;width:100%}
.panel .text{font-size:14px}
.panel .acts{flex-wrap:nowrap}
.panel .acts .main,.panel .acts .heart{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.panel .acts button:not(.main):not(.heart){padding-inline:10px}
.panel .ghead .work,.panel .ghead .m{flex:1 1 100%;margin-left:0}
.panel .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.side > div,.robot,.robot .rt{min-width:0}
.side > .robot{min-width:0}