/* redes Enhance — tema oscuro con la paleta de Notion (dark mode).
   Fondos de etiqueta y colores de texto copiados de Notion para que la lectura sea la misma. */
:root{
  --bg:#191919; --side:#202020; --panel:#252525; --pop:#2f2f2f;
  --txt:rgba(255,255,255,.81); --txt2:rgba(255,255,255,.46); --txt3:rgba(255,255,255,.282);
  --line:rgba(255,255,255,.094); --hover:rgba(255,255,255,.055); --sel:rgba(35,131,226,.28);
  --blue:#2383e2;
  /* fondos de etiqueta (select / multi-select / status) */
  --t-default:#373737; --t-gray:#5a5a5a; --t-brown:#603b2c; --t-orange:#854c1d; --t-yellow:#89632a;
  --t-green:#2b593f; --t-blue:#28456c; --t-purple:#492f64; --t-pink:#69314c; --t-red:#6e3630;
  /* color de texto (punto del status, acentos) */
  --c-default:rgba(255,255,255,.45); --c-gray:#9b9b9b; --c-brown:#ba856f; --c-orange:#c77d48; --c-yellow:#ca9849;
  --c-green:#529e72; --c-blue:#5e87c9; --c-purple:#9d68d3; --c-pink:#d15796; --c-red:#df5452;
  --font:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Helvetica,"Apple Color Emoji",Arial,sans-serif,"Segoe UI Emoji","Segoe UI Symbol";
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--txt);font:14px/1.5 var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--sel)}

/* ---------- estructura ---------- */
.app{display:flex;min-height:100vh}
.side{width:240px;flex:0 0 240px;background:var(--side);border-right:1px solid var(--line);position:sticky;top:0;height:100vh;overflow:auto;padding:8px 6px 24px}
.side .ws{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;font-weight:600;color:var(--txt)}
.side .ws .logo{width:22px;height:22px;border-radius:4px;background:linear-gradient(135deg,#5e87c9,#9d68d3);display:grid;place-items:center;font-size:12px;color:#fff}
.side h6{margin:18px 10px 4px;font-size:12px;font-weight:500;color:var(--txt2)}
.side a.it{display:flex;align-items:center;gap:8px;padding:3px 10px;margin:1px 0;border-radius:6px;text-decoration:none;color:var(--txt2);font-size:14px;line-height:24px}
.side a.it:hover{background:var(--hover);color:var(--txt)}
.side a.it.on{background:rgba(255,255,255,.08);color:var(--txt);font-weight:500}
.side a.it .ic{width:20px;text-align:center;flex:0 0 20px}
.side .pie{margin:22px 10px 0;font-size:12px;color:var(--txt3)}
.main{flex:1;min-width:0}
.top{height:44px;display:flex;align-items:center;gap:6px;padding:0 12px;position:sticky;top:0;background:var(--bg);z-index:20}
.top .ruta{color:var(--txt2);font-size:14px;display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;white-space:nowrap}
.top .ruta b{color:var(--txt);font-weight:400}
.top .der{margin-left:auto;display:flex;gap:4px}
.burger{display:none}
.btn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:6px;border:0;background:transparent;color:var(--txt2);cursor:pointer;text-decoration:none;font-size:14px;white-space:nowrap}
.btn:hover{background:var(--hover);color:var(--txt)}
.btn.prim{background:var(--blue);color:#fff;font-weight:500}
.btn.prim:hover{background:#0077d4}
.pagina{padding:28px 96px 80px;max-width:100%}
.cab .icono{font-size:56px;line-height:1;margin:8px 0 6px}
.cab h1{font-size:32px;line-height:1.2;font-weight:700;margin:0 0 4px;color:rgba(255,255,255,.9)}
.cab .desc{color:var(--txt2);margin:0 0 18px}

/* ---------- vistas y barra de herramientas ---------- */
.vistas{display:flex;align-items:center;gap:2px;border-bottom:1px solid var(--line);margin-bottom:6px;overflow-x:auto;scrollbar-width:none}
.vistas a{display:flex;align-items:center;gap:6px;padding:6px 8px 7px;color:var(--txt2);text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px;font-size:14px}
.vistas a:hover{color:var(--txt)}
.vistas a.on{color:var(--txt);border-bottom-color:var(--txt)}
.herr{display:flex;align-items:center;gap:4px;padding:4px 0 8px;flex-wrap:wrap}
.herr .esp{flex:1}
.herr form{display:flex}
.herr select,.herr input[type=search]{height:28px;border-radius:6px;border:1px solid var(--line);background:transparent;padding:0 8px;color:var(--txt2);font-size:13px}
.herr select:focus,.herr input:focus{outline:none;border-color:var(--blue);color:var(--txt)}
.herr input[type=search]{width:180px}
.chip-f{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:12px;background:rgba(35,131,226,.15);color:#529cca;font-size:12px;text-decoration:none}
.cuenta-n{color:var(--txt2);font-size:13px;margin-left:4px}

/* ---------- tabla tipo base de datos ---------- */
.db{overflow-x:auto;margin:0 -96px;padding:0 96px;scrollbar-color:#444 transparent}
table.nt{border-collapse:separate;border-spacing:0;font-size:14px;min-width:100%}
.nt th,.nt td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:0 8px;height:34px;text-align:left;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:var(--w,200px);min-width:var(--w,200px);width:var(--w,200px)}
.nt th:last-child,.nt td:last-child{border-right:0}
.nt thead th{color:var(--txt2);font-weight:400;font-size:14px;border-top:1px solid var(--line);background:var(--bg)}
.nt thead th a{color:inherit;text-decoration:none;display:flex;align-items:center;gap:6px}
.nt thead th a:hover{color:var(--txt)}
.nt thead th svg{flex:0 0 14px;opacity:.7}
.nt tbody tr:hover td{background:var(--hover)}
.nt td.num,.nt th.num{text-align:right;font-variant-numeric:tabular-nums}
.nt th.num a{justify-content:flex-end}
.nt td .vacio{color:var(--txt3)}
.nt td.tit{font-weight:500}
.nt td.tit .t{display:flex;align-items:center;gap:6px;cursor:pointer}
.nt td.tit .t .doc{opacity:.6;flex:0 0 auto}
.nt td.tit .t span.x{overflow:hidden;text-overflow:ellipsis}
.nt td.tit .abrir{display:none;margin-left:auto;font-size:11px;font-weight:500;color:var(--txt2);border:1px solid var(--line);background:var(--panel);border-radius:4px;padding:0 6px;line-height:20px;flex:0 0 auto}
.nt tr:hover td.tit .abrir{display:inline-block}
.nt td a.url{color:var(--txt2);text-decoration:underline;text-decoration-color:var(--txt3)}
.nt tfoot td{color:var(--txt3);font-size:12px;border-bottom:0;height:30px}
.fila-nueva td{color:var(--txt3);cursor:pointer}
.fila-nueva td:hover{color:var(--txt2)}

/* ---------- etiquetas ---------- */
.tag{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 6px;border-radius:3px;font-size:13px;line-height:20px;color:rgba(255,255,255,.81);background:var(--t-default);margin-right:4px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.tag.st{border-radius:10px;padding:0 8px 0 7px}
.tag.st::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--dot,var(--c-default));flex:0 0 7px}
.tag.default{background:var(--t-default);--dot:var(--c-default)}
.tag.gray{background:var(--t-gray);--dot:var(--c-gray)}
.tag.brown{background:var(--t-brown);--dot:var(--c-brown)}
.tag.orange{background:var(--t-orange);--dot:var(--c-orange)}
.tag.yellow{background:var(--t-yellow);--dot:var(--c-yellow)}
.tag.green{background:var(--t-green);--dot:var(--c-green)}
.tag.blue{background:var(--t-blue);--dot:var(--c-blue)}
.tag.purple{background:var(--t-purple);--dot:var(--c-purple)}
.tag.pink{background:var(--t-pink);--dot:var(--c-pink)}
.tag.red{background:var(--t-red);--dot:var(--c-red)}
.persona{display:inline-flex;align-items:center;gap:6px;margin-right:6px}
.persona i{width:20px;height:20px;border-radius:50%;background:#5a5a5a;display:grid;place-items:center;font-style:normal;font-size:11px;color:#fff}

/* ---------- calendario ---------- */
.cal-cab{display:flex;align-items:center;gap:6px;margin:4px 0 8px}
.cal-cab b{font-size:14px;font-weight:600;margin-right:6px}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cal .dn{color:var(--txt2);font-size:12px;padding:4px 8px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.cal .d{min-height:118px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:4px 6px;min-width:0}
.cal .d.fuera{background:rgba(255,255,255,.015)}
.cal .d.fuera .n{color:var(--txt3)}
.cal .d.hoy .n{background:#eb5757;color:#fff;border-radius:50%;width:22px;height:22px;display:inline-grid;place-items:center}
.cal .n{font-size:13px;color:var(--txt2);text-align:right;margin-bottom:4px;display:flex;justify-content:flex-end}
.cal .ev{display:block;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:3px 6px;margin-bottom:4px;font-size:12px;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.cal .ev:hover{background:var(--pop)}
.cal .ev .et{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--txt);font-weight:500}
.cal .ev .tag{height:17px;line-height:17px;font-size:11px;margin-top:2px}

/* ---------- panel lateral (peek) y página ---------- */
.peek-fondo{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:50;display:none}
.peek{position:fixed;top:0;right:0;bottom:0;width:min(780px,100%);background:var(--bg);border-left:1px solid var(--line);box-shadow:-12px 0 32px rgba(0,0,0,.4);z-index:51;transform:translateX(100%);transition:transform .18s ease;overflow:auto}
.peek.abierto{transform:none}
.peek-fondo.abierto{display:block}
.peek .peek-bar{position:sticky;top:0;background:var(--bg);display:flex;gap:4px;padding:8px 12px;z-index:2}
.doc-pag{padding:24px 64px 80px;max-width:900px}
.peek .doc-pag{padding:12px 56px 80px}
.doc-pag .tit-ed{font-size:32px;font-weight:700;line-height:1.2;color:rgba(255,255,255,.9);border:0;background:transparent;width:100%;resize:none;padding:0;margin:4px 0 14px;outline:none;overflow:hidden}
.props{margin:0 0 18px}
.prop{display:flex;align-items:flex-start;min-height:34px;padding:2px 0}
.prop .pn{flex:0 0 160px;display:flex;align-items:center;gap:6px;color:var(--txt2);padding:6px 6px;border-radius:4px;min-height:30px}
.prop .pn svg{opacity:.7}
.prop .pv{flex:1;min-width:0;border-radius:4px;padding:5px 8px;min-height:30px;cursor:pointer;position:relative}
.prop .pv:hover{background:var(--hover)}
.prop .pv .vacio{color:var(--txt3)}
.prop .pv textarea,.prop .pv input{width:100%;background:transparent;border:0;outline:none;color:var(--txt);resize:none;padding:0}
.prop .pv textarea{min-height:22px;overflow:hidden;line-height:1.5}
.prop .pv .fecha-ed{display:flex;gap:8px;align-items:center}
.prop .pv .fecha-ed input{width:auto;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:2px 6px;color-scheme:dark}
.prop.largo .pv{white-space:pre-wrap}
.guardando{position:absolute;right:6px;top:6px;font-size:11px;color:var(--txt3)}
.sep{height:1px;background:var(--line);margin:16px 0}
.menu{position:absolute;z-index:60;background:var(--pop);border-radius:6px;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 8px 24px rgba(0,0,0,.5);padding:6px;min-width:220px;max-height:340px;overflow:auto}
.menu .mh{font-size:12px;color:var(--txt2);padding:4px 8px}
.menu .op{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:4px;cursor:pointer}
.menu .op:hover,.menu .op.act{background:var(--hover)}
.menu .op .ck{margin-left:auto;color:var(--txt2)}
.h2{font-size:18px;font-weight:600;margin:28px 0 8px;color:rgba(255,255,255,.9)}

/* ---------- métricas ---------- */
.tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:6px 0 14px}
.tarjeta{border:1px solid var(--line);border-radius:6px;padding:10px 12px;background:var(--panel)}
.tarjeta .k{color:var(--txt2);font-size:12px}
.tarjeta .v{font-size:22px;font-weight:600;margin-top:2px;font-variant-numeric:tabular-nums}
.tarjeta .s{color:var(--txt3);font-size:12px}
.nota{color:var(--txt2);font-size:13px;border-left:3px solid var(--txt3);padding:2px 0 2px 10px;margin:4px 0 14px}
.pag{display:flex;gap:6px;align-items:center;margin-top:10px;color:var(--txt2);font-size:13px}

/* ---------- login ---------- */
.login{max-width:340px;margin:16vh auto;padding:0 16px;text-align:center}
.login .logo{width:44px;height:44px;border-radius:8px;background:linear-gradient(135deg,#5e87c9,#9d68d3);margin:0 auto 14px;display:grid;place-items:center;color:#fff;font-size:20px}
.login h1{font-size:22px;margin:0 0 18px}
.login input{width:100%;height:36px;border-radius:6px;border:1px solid var(--line);background:var(--panel);padding:0 10px;margin-bottom:10px}
.login button{width:100%;height:36px}
.login .err{color:var(--c-red);font-size:13px;margin-bottom:8px}

/* ---------- celular ---------- */
@media (max-width:820px){
  .side{position:fixed;left:0;top:0;z-index:40;transform:translateX(-100%);transition:transform .18s;box-shadow:8px 0 24px rgba(0,0,0,.4)}
  .side.abierto{transform:none}
  .burger{display:inline-flex}
  .pagina{padding:16px 16px 60px}
  .db{margin:0 -16px;padding:0 16px}
  .cab .icono{font-size:40px}
  .cab h1{font-size:26px}
  .doc-pag,.peek .doc-pag{padding:12px 16px 60px}
  .prop{flex-direction:column}
  .prop .pn{flex:none;padding:4px 0 0}
  .prop .pv{width:100%;padding:4px 0}
  .herr input[type=search]{width:100%}
  .nt td.tit,.nt th:first-child{--w:210px !important}
  .cal{grid-template-columns:1fr}
  .cal .dn{display:none}
  .cal .d{min-height:0}
  .cal .d.fuera,.cal .d.vacia{display:none}
  .cal .n{justify-content:flex-start}
}