/* DTE DOWNLOADER — BINARK
   Estructura tipo cliente de correo: barra de íconos + panel de cuentas (pizarra oscura) + área clara. */
:root{
  --rail:#1f262f; --side:#2a323d; --side2:#333c48; --side-line:#3b4553; --side-txt:#e9eef4; --side-muted:#8c98a9;
  --bg:#eef1f5; --card:#fff; --line:#e4e8ee; --line2:#d6dce4; --txt:#28313c; --muted:#8a94a3; --dim:#b3bcc7;
  --accent:#29b6f6; --accent-d:#0e9ad8; --blue:#1e88e5;
  --ok:#43a047; --hot:#ec407a; --warn:#ffa726; --err:#e53935;
  --r:10px; --sh:0 1px 2px rgba(20,30,45,.06),0 4px 14px rgba(20,30,45,.06);
  --font:'Roboto',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'Roboto Mono','Cascadia Code',Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%}
body{font:14px/1.5 var(--font);color:var(--txt);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
code{font-family:var(--mono);font-size:12px;background:#f1f4f8;border:1px solid var(--line);padding:1px 6px;border-radius:5px;color:#37506b;word-break:break-all}
.muted{color:var(--muted)}
.hint{font-size:12px;color:var(--muted)}
.hint:empty{display:none}
.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ================= Estructura ================= */
.app{display:grid;grid-template-columns:64px 280px minmax(0,1fr);height:100vh;overflow:hidden}

/* Barra de íconos */
.rail{background:var(--rail);display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 0;border-right:1px solid #161b22;z-index:30}
.rail-logo{position:relative;display:grid;place-items:center;width:44px;height:44px;margin-bottom:14px;border-radius:12px;transition:transform .2s}
.rail-logo img{width:36px;height:36px;display:block}
.rail-logo::after{content:"";position:absolute;left:8px;right:8px;bottom:-9px;height:1px;background:#3b4553}
.rail-logo:hover{transform:scale(1.06)}
.rail-avatar{width:40px;height:40px;border-radius:50%;border:2px solid #3b4553;padding:2px;background:none;cursor:pointer;margin-bottom:14px;transition:border-color .2s}
.rail-avatar span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:linear-gradient(135deg,#29b6f6,#1e88e5);color:#fff;font-weight:700;font-size:13px}
.rail-avatar:hover{border-color:var(--accent)}
.rail-btn{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;color:#7d8a9c;background:none;border:0;cursor:pointer;transition:color .15s,background .15s}
.rail-btn .ic{width:21px;height:21px;stroke-width:1.7}
.rail-btn:hover{color:#dfe6ee;background:#2a323d}
.rail-btn.active{color:#fff;background:#2f3844}
.rail-btn.active::before{content:"";position:absolute;left:-10px;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
.rail-dot{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--hot);color:#fff;font:700 10px/18px var(--font);font-style:normal;text-align:center;box-shadow:0 0 0 2px var(--rail)}
.rail-bottom{margin-top:auto}

/* Panel de cuentas */
.side{background:var(--side);color:var(--side-txt);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;z-index:25}
.side::-webkit-scrollbar{width:6px}.side::-webkit-scrollbar-thumb{background:#3b4553;border-radius:3px}
.side-head{display:flex;align-items:center;justify-content:space-between;padding:20px 18px 12px}
.side-head h2{font-size:17px;font-weight:500;letter-spacing:.2px}
.side-edit{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--side2);border:1px solid var(--side-line);color:var(--side-txt);cursor:pointer}
.side-edit:hover{border-color:var(--accent);color:var(--accent)}
.acc-list{display:flex;flex-direction:column;border-top:1px solid var(--side-line)}
.acc{position:relative;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 18px;color:var(--side-txt);border-bottom:1px solid var(--side-line);transition:background .15s}
.acc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c);opacity:.9}
.acc:hover{background:#303945}
.acc.active{background:#394351}
.acc.active::after{content:"";position:absolute;right:0;top:50%;margin-top:-7px;border:7px solid transparent;border-right-color:var(--bg)}
.acc-av{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--c);color:#fff;font-weight:700;font-size:12px;box-shadow:0 0 0 2px rgba(255,255,255,.08)}
.acc-av .ic{width:17px;height:17px}
.acc-all{background:#3d4755;color:var(--accent)}
.acc-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.acc-txt b{font-weight:500;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc-txt small{font-size:11.5px;color:var(--side-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc-badge{flex:none;min-width:24px;height:20px;padding:0 7px;border-radius:10px;background:#1f262f;color:#cfd8e3;font-size:11px;font-weight:500;line-height:20px;text-align:center}
.acc-rep{position:absolute;right:10px;top:8px;width:7px;height:7px;border-radius:50%;background:var(--hot)}
.acc-add{align-self:center;display:grid;place-items:center;width:40px;height:40px;margin:18px 0 8px;border-radius:50%;border:1.5px solid #4a5563;background:none;color:#8c98a9;cursor:pointer;transition:.2s}
.acc-add:hover{border-color:var(--accent);color:var(--accent);transform:rotate(90deg)}
.labels{margin-top:18px;border-top:1px solid var(--side-line);padding-top:10px}
.labels h3{font-size:11px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;color:var(--side-muted);padding:6px 18px 8px}
.label{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px 10px 22px;color:var(--side-txt);font-size:13.5px;border-top:1px solid var(--side-line)}
.label::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--c)}
.label em{font-style:normal;font-size:11.5px;color:var(--side-muted)}
.label:hover{background:#303945}
.label.active{background:#394351}
.label.active em{color:#fff}
.dl-folder{margin-top:18px;border-top:1px solid var(--side-line);padding:10px 12px 4px}
.dl-folder h3{font-size:11px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;color:var(--side-muted);padding:6px 6px 8px}
.dl-btn{position:relative;display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px 10px 14px;border-radius:10px;border:1px solid var(--side-line);background:var(--side2);color:var(--side-txt);cursor:pointer;text-align:left;font:inherit;overflow:hidden;transition:background .15s,border-color .15s}
.dl-btn::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent)}
.dl-btn:hover{background:#394351;border-color:#4a5563}
.dl-btn.falta::before{background:var(--warn)}
.dl-ic{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:8px;background:var(--rail);color:var(--accent)}
.dl-btn.falta .dl-ic{color:var(--warn)}
.dl-txt{display:flex;flex-direction:column;min-width:0}
.dl-txt b{font-weight:500;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-txt small{font-size:11.5px;color:var(--side-muted)}
.head-folder{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.folder-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:14px;border:1px solid var(--line2);background:#fff;color:var(--txt);font:500 12.5px var(--font);cursor:pointer}
.folder-chip .ic{width:15px;height:15px;color:var(--accent-d)}
.folder-chip:hover{border-color:var(--accent);color:var(--accent-d)}
.folders-list .cargando{grid-column:1/-1;color:var(--muted);font-size:12.5px}
.side-foot{margin-top:auto;padding:22px 18px 16px;font-size:10.5px;letter-spacing:.6px;color:#6b778a;text-transform:uppercase}
.side-scrim{display:none}

/* Área principal */
.main{display:flex;flex-direction:column;min-width:0;height:100vh;overflow:hidden;background:var(--bg)}
.bar{display:none;align-items:center;gap:12px;height:54px;padding:0 14px;background:#fff;border-bottom:1px solid var(--line);flex:none}
.bar-menu{display:grid;place-items:center;width:38px;height:38px;border-radius:9px;border:0;background:none;color:var(--txt);cursor:pointer}
.bar-menu:hover{background:var(--bg)}
.bar-brand{font-weight:300;letter-spacing:1.2px;font-size:14px}
.bar-brand b{font-weight:700;color:var(--accent-d)}
.bar-title{margin-left:auto;font-size:13px;color:var(--muted)}
.page{flex:1;overflow-y:auto;padding:30px 34px 50px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.page-head h1{font-size:26px;font-weight:400;letter-spacing:.1px}
.page-head p{margin-top:4px;font-size:13px}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.section-title{font-size:13px;font-weight:500;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);margin:26px 0 12px}

/* ================= Botones ================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 16px;border-radius:8px;border:1px solid transparent;font:500 13px/1 var(--font);cursor:pointer;white-space:nowrap;color:var(--txt);transition:background .15s,border-color .15s,box-shadow .15s,transform .1s}
.btn .ic{width:16px;height:16px}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 2px 8px -2px rgba(41,182,246,.6)}
.btn-primary:hover:not(:disabled){background:var(--accent-d)}
.btn-ghost{background:#fff;border-color:var(--line2)}
.btn-ghost:hover:not(:disabled){border-color:var(--accent);color:var(--accent-d)}
.btn-sm{height:32px;padding:0 12px;font-size:12.5px}
.btn-block{width:100%}
.btn.loading{pointer-events:none;opacity:.75}
.btn.loading::after{content:"";width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.icon-btn{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;border:1px solid transparent;background:none;color:var(--muted);cursor:pointer;transition:.15s}
.icon-btn:hover{background:var(--bg);border-color:var(--line);color:var(--txt)}
.icon-btn.danger:hover{color:var(--err);border-color:#f5c6c6;background:#fff5f5}

/* ================= Resumen ================= */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:12px}
.kpi{position:relative;background:#fff;border-radius:var(--r);padding:16px 18px 14px;box-shadow:var(--sh);overflow:hidden}
.kpi::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--c)}
.kpi span{display:block;font-size:26px;font-weight:300;font-variant-numeric:tabular-nums;color:var(--txt)}
.kpi label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;font-weight:500}
.kpi-hot span{color:var(--hot);font-weight:400}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
.card{position:relative;background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:18px 18px 16px 22px;display:flex;flex-direction:column;gap:14px;transition:box-shadow .2s,transform .2s}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;border-radius:var(--r) 0 0 var(--r);background:var(--c)}
.card:hover{box-shadow:0 2px 4px rgba(20,30,45,.06),0 12px 28px rgba(20,30,45,.1);transform:translateY(-1px)}
.card-head{display:flex;align-items:center;gap:12px}
.avatar{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--c);color:#fff;font-weight:700;font-size:15px}
.card-title{min-width:0;flex:1}
.card-title h3{font-size:16px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-title p{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu{display:flex}
.stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.stats div{padding:8px 10px;border-right:1px solid var(--line)}
.stats div:last-child{border-right:0}
.stats b{display:block;font-size:19px;font-weight:400;font-variant-numeric:tabular-nums}
.stats span{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.stats .hot b{color:var(--hot)}
.stats .ok b{color:var(--ok)}
.meter{height:4px;background:#edf0f4;border-radius:4px;overflow:hidden}
.meter i{display:block;height:100%;background:linear-gradient(90deg,#8bc34a,#29b6f6);border-radius:4px}
.meta{display:grid;gap:5px;font-size:12.5px}
.meta div{display:flex;justify-content:space-between;gap:12px}
.meta dt{color:var(--muted)}
.meta dd{text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis}
.card-foot{display:flex;gap:8px;margin-top:auto;flex-wrap:wrap}
.card-foot .btn-primary{margin-left:auto}
.empty{text-align:center;padding:56px 20px;background:#fff;border-radius:var(--r);box-shadow:var(--sh);margin-top:20px}
.empty-ic{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#e8f6fe;color:var(--accent-d);margin-bottom:14px}
.empty-ic .ic{width:30px;height:30px;stroke-width:1.5}
.empty h2{font-size:19px;font-weight:500;margin-bottom:6px}
.empty p{max-width:460px;margin:0 auto 18px}

/* ================= Documentos (lista + lector) ================= */
.mail{flex:1;display:grid;grid-template-columns:minmax(360px,440px) minmax(0,1fr);min-height:0}
.list{display:flex;flex-direction:column;background:#fff;border-right:1px solid var(--line);min-height:0}
.list-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:18px 16px 12px 20px}
.list-title{display:flex;align-items:center;gap:10px;min-width:0}
.list-title .dot{width:12px;height:12px;border-radius:50%;flex:none}
.list-title h1{font-size:19px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-title p{font-size:12px;color:var(--muted)}
.hot{color:var(--hot)}
.list-actions{display:flex;align-items:center;gap:2px;flex:none}
.list-actions .btn{margin-left:6px}
.search{position:relative;margin:0 16px 0 20px}
.search .ic{position:absolute;left:12px;top:50%;margin-top:-9px;color:var(--muted)}
.search input{width:100%;height:38px;border-radius:19px;border:1px solid var(--line2);background:#f5f7fa;padding:0 14px 0 38px;font:inherit;color:var(--txt);outline:none;transition:.15s}
.search input:focus{background:#fff;border-color:var(--accent);box-shadow:0 0 0 3px rgba(41,182,246,.15)}
.filters{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px 16px 8px 20px}
.filters select,.filters input{height:32px;font-size:12.5px;padding:0 8px;border-radius:7px}
.rep-alert{display:block;margin:4px 16px 6px 20px;padding:8px 12px;border-radius:8px;border:0;background:#fdecf3;color:#ad1457;font:12.5px/1.45 var(--font);text-align:left;cursor:pointer}
.rep-alert span{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--hot);margin-right:6px}
.rep-alert u{font-weight:500;margin-left:4px;white-space:nowrap}
.list-count{padding:4px 20px 8px;font-size:11.5px;color:var(--muted);border-bottom:1px solid var(--line)}
.items{flex:1;overflow-y:auto}
.items::-webkit-scrollbar{width:6px}.items::-webkit-scrollbar-thumb{background:#d6dce4;border-radius:3px}
.item{position:relative;display:flex;gap:12px;padding:14px 18px 14px 20px;border-bottom:1px solid var(--line);cursor:pointer;outline:none;transition:background .12s}
.item:hover{background:#f7f9fb}
.item:focus-visible{box-shadow:inset 0 0 0 2px rgba(41,182,246,.5)}
.item.sel{background:#eef6fc}
.item.sel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.item.is-rep::after,.item.is-orig::after{content:"";position:absolute;right:0;top:0;bottom:0;width:5px}
.item.is-rep::after{background:var(--hot)}
.item.is-orig::after{background:#b39ddb}
.item-av{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;color:#fff;font-weight:500;font-size:14px;letter-spacing:.3px;box-shadow:0 0 0 3px #fff,0 0 0 4px var(--line)}
.item-av.lg{width:52px;height:52px;font-size:17px}
.item-body{min-width:0;flex:1}
.item-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.item-from{font-weight:500;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-top time{flex:none;font-size:11px;color:var(--muted)}
.item-sub{display:flex;justify-content:space-between;gap:8px;font-size:13px}
.item-tipo{font-weight:500}
.item-total{font-variant-numeric:tabular-nums;color:var(--txt);font-weight:500}
.item-prev{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.item-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.tag{font-size:10.5px;font-weight:500;padding:1px 7px;border-radius:4px;letter-spacing:.3px;border:1px solid}
.tag-pdf{color:#d32f2f;border-color:#f6c8c8;background:#fff6f6}
.tag-json{color:#2e7d32;border-color:#c8e6c9;background:#f4fbf4}
.tag-off{color:var(--dim);border-color:var(--line);text-decoration:line-through}
.tag-rep{color:#fff;background:var(--hot);border-color:var(--hot)}
.tag-orig{color:#5e35b1;border-color:#d1c4e9;background:#f6f2fd}
.tag-ok{color:#2e7d32;border-color:transparent;background:#e8f5e9}
.tag-acc{color:var(--txt);border-color:var(--line);background:#fff;box-shadow:inset 3px 0 0 var(--c)}
.item-bubble{position:absolute;right:14px;bottom:14px;display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#e3e7ec;color:#5b6572;font-size:11px;font-weight:700}
.items-empty{padding:30px 20px;text-align:center;color:var(--muted)}
.empty-list{margin:20px;box-shadow:none;border:1px dashed var(--line2)}

.reader{background:var(--bg);overflow-y:auto;min-height:0}
.reader-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--muted);padding:30px;text-align:center}
.reader-doc{margin:22px 26px 30px;background:#fff;border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;animation:rise .2s ease}
@keyframes rise{from{opacity:0;transform:translateY(6px)}}
.reader-head{display:flex;align-items:center;gap:14px;padding:20px 22px 16px}
.reader-back{display:none}
.reader-who{min-width:0;flex:1}
.reader-who h2{font-size:19px;font-weight:500;line-height:1.3}
.reader-who p{font-size:12.5px;color:var(--muted)}
.reader-total{text-align:right;flex:none}
.reader-total b{display:block;font-size:26px;font-weight:300;font-variant-numeric:tabular-nums}
.reader-total span{font-size:12.5px;font-weight:500}
.reader-stripe{height:3px}
.reader-body{padding:18px 22px 22px}
.rep-box{background:#fdecf3;border-radius:8px;padding:10px 14px;margin-bottom:16px;font-size:12.5px;color:#880e4f}
.rep-box b{display:block;margin-bottom:4px;font-size:13px}
.rep-box ol{margin-left:18px}
.rep-box li.yo{font-weight:500}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin-bottom:18px}
.fields div{min-width:0}
.fields .full{grid-column:1/-1}
.fields dt{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:500;margin-bottom:2px}
.fields dd{font-size:13.5px;overflow-wrap:anywhere}
.fields dd small{display:block;color:var(--muted);font-size:12px}
.mono{font-family:var(--mono);font-size:12.5px}
.small{font-size:11.5px}
.mini{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:6px;border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;vertical-align:middle}
.mini .ic{width:13px;height:13px}
.mini:hover{color:var(--accent-d);border-color:var(--accent)}
.reader-actions{display:flex;gap:8px;margin-bottom:14px}
.pdf-frame{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#f5f7fa;height:62vh;min-height:360px}
.pdf-frame iframe{width:100%;height:100%;border:0;display:block}

/* ================= Libro de compras ================= */
.libro-filtros{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px}
.libro-filtros label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:500;color:var(--muted)}
.libro-filtros select{min-width:220px}
.libro-filtros input[type=month]{width:180px}
.contrib-card{position:relative;display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:14px 18px 14px 22px;margin-bottom:12px;overflow:hidden}
.contrib-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--c)}
.contrib-datos{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:6px 22px;flex:1;min-width:0}
.contrib-datos span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:500}
.contrib-datos b{font-weight:500;font-size:14px}
.alerta-libro{background:#fff4e5;color:#8a5200;border-radius:8px;padding:10px 14px;font-size:13px;margin-bottom:12px}
.kpis-libro{margin:14px 0 16px}
.kpis-libro .kpi span{font-size:21px}
.libro-wrap{background:#fff;border-radius:var(--r);box-shadow:var(--sh);overflow:auto;max-height:calc(100vh - 330px)}
.libro{border-collapse:collapse;font-size:12px;min-width:1900px;width:100%}
.libro th{position:sticky;top:0;background:var(--side);color:var(--side-txt);font-weight:500;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;padding:8px 8px;border:1px solid #3b4553;text-align:center;line-height:1.25}
.libro thead tr:nth-child(2) th{top:33px;background:var(--side2)}
.libro td{padding:7px 8px;border-bottom:1px solid var(--line);border-right:1px solid #eef1f5;vertical-align:top}
.libro tbody tr:hover{background:#f7f9fb}
.libro .c{text-align:center}
.libro .r{text-align:right}
.libro .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.libro .b{font-weight:600}
.libro .prov{min-width:200px}
.libro .sm{font-size:10.5px}
.libro .cero{color:var(--dim)}
.libro tr.es-nc td{color:#ad1457}
.libro tfoot td{position:sticky;bottom:0;background:#eef6fc;font-weight:700;border-top:2px solid var(--accent);padding:9px 8px}
.libro-vacio{text-align:center;color:var(--muted);padding:34px!important}
.tipo-mini{display:inline-block;font:700 10px var(--font);letter-spacing:.4px;padding:0 5px;border:1px solid currentColor;border-radius:4px;vertical-align:1px}
.excluidos{margin-top:16px;background:#fff;border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.excluidos summary{cursor:pointer;padding:12px 18px;font-size:13px;color:var(--txt)}
.excluidos summary b{color:var(--hot)}
.tabla-exc{width:100%;border-collapse:collapse;font-size:12.5px}
.tabla-exc th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:8px 12px;background:#f5f7fa;border-top:1px solid var(--line)}
.tabla-exc td{padding:8px 12px;border-top:1px solid var(--line)}
.tabla-exc .n{text-align:right;white-space:nowrap}
fieldset.contrib{border:1px solid var(--line);border-radius:10px;padding:10px 14px 12px;display:flex;flex-direction:column;gap:10px}
fieldset.contrib legend{padding:0 6px;font-size:13px;font-weight:500;color:var(--txt)}
fieldset.contrib legend small{color:var(--muted);font-weight:400}
.btn[aria-disabled=true]{opacity:.45;pointer-events:none}
@media (max-width:760px){.contrib-datos{grid-template-columns:1fr 1fr}.libro-filtros select{min-width:0;width:100%}.libro-filtros label{flex:1 1 100%}}

/* ================= Formularios ================= */
.form{display:flex;flex-direction:column;gap:14px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:500;color:var(--muted);letter-spacing:.2px}
input,select{font:inherit;font-size:14px;color:var(--txt);background:#fff;border:1px solid var(--line2);border-radius:8px;height:40px;padding:0 12px;outline:none;width:100%;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(41,182,246,.15)}
input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}
.form label.check{flex-direction:row;align-items:center;gap:8px;font-weight:400;color:var(--txt);font-size:13px;align-self:end;height:40px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.span2{grid-column:span 2}
.input-prefix{display:flex}
.input-prefix span{display:grid;place-items:center;padding:0 10px;background:#f1f4f8;border:1px solid var(--line2);border-right:0;border-radius:8px 0 0 8px;font-family:var(--mono);font-size:12px;color:var(--muted);font-weight:400}
.input-prefix input{border-radius:0 8px 8px 0}
.folders{border:1px solid var(--line);border-radius:10px;padding:12px;background:#f8fafc}
.folders-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;font-size:13px}
.folders-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px 12px;max-height:190px;overflow:auto}
.folders-list label{flex-direction:row;align-items:center;gap:8px;font-weight:400;color:var(--txt);font-size:13px;padding:3px 0}
.folders-list p{grid-column:1/-1;font-size:12.5px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{background:#fff;border:1px solid var(--line2);color:var(--txt);border-radius:16px;padding:5px 12px;font:inherit;font-size:12px;cursor:pointer}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.rango-ayuda{font-size:12.5px;padding:8px 12px;border-radius:8px;background:#eef6fc;color:#0b6b99}
.rango-ayuda.aviso{background:#fff4e5;color:#9a5b00}
.chip:hover{border-color:var(--accent);color:var(--accent-d)}
.alert{padding:11px 14px;border-radius:8px;font-size:13px}
.alert-err{background:#fdecea;color:#b71c1c}

/* ================= Modales ================= */
.modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;background:rgba(23,30,40,.55);backdrop-filter:blur(3px);animation:fade .15s ease}
@keyframes fade{from{opacity:0}}
.modal-box{width:min(660px,100%);max-height:calc(100vh - 40px);display:flex;flex-direction:column;background:#fff;border-radius:14px;box-shadow:0 30px 70px -20px rgba(10,20,35,.5);animation:pop .18s ease;overflow:hidden}
@keyframes pop{from{transform:translateY(8px) scale(.98);opacity:0}}
.modal-sm{width:min(440px,100%)}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:var(--side);color:var(--side-txt)}
.modal-head h3{font-size:16px;font-weight:500}
.x{background:none;border:0;color:var(--side-muted);font-size:24px;line-height:1;cursor:pointer;width:32px;height:32px;border-radius:8px}
.x:hover{background:var(--side2);color:#fff}
.modal-body{padding:18px 20px;overflow:auto}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding-top:6px}
.prog-cuenta{font-weight:500}
.bar-prog{height:8px;margin:10px 0 8px;background:#edf0f4;border-radius:4px;overflow:hidden}
.bar-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,#8bc34a,#29b6f6);border-radius:4px;transition:width .35s ease}
.prog-nums{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.log{margin:14px 0 8px;max-height:220px;overflow:auto;background:#1f262f;border-radius:8px;padding:10px 12px;font:12px/1.6 var(--mono);color:#9aa6b6;overflow-wrap:anywhere}
.log:empty{display:none}
.log .ok{color:#9ccc65}.log .err{color:#ef9a9a}.log .warn{color:#ffcc80}.log .inf{color:#4fc3f7}
.json{font:12px/1.55 var(--mono);white-space:pre-wrap;word-break:break-word;color:#cfd8e3;background:#1f262f;border-radius:8px;padding:14px;max-height:62vh;overflow:auto;margin-top:12px}

/* Toasts */
#toasts{position:fixed;right:20px;bottom:20px;z-index:100;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--side);color:var(--side-txt);border-left:4px solid var(--accent);padding:11px 16px;border-radius:8px;max-width:420px;font-size:13px;box-shadow:0 10px 30px -10px rgba(0,0,0,.4);animation:pop .2s ease}
.toast.err{border-left-color:#ef5350}
.toast.ok{border-left-color:#8bc34a}

/* ================= Login (pantalla completa, paleta del panel de cuentas) ================= */
.login-body{min-height:100vh;color:var(--side-txt);
  background:radial-gradient(900px 620px at 50% 42%,#2f3843 0,var(--side) 55%,var(--rail) 100%) fixed,var(--side)}
.login{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px 24px}
.login-box{width:min(340px,100%);display:flex;flex-direction:column;align-items:center;margin-top:auto}
.login-logo{display:block;width:84px;height:84px;padding:6px;border-radius:50%;background:var(--rail);box-shadow:0 0 0 3px var(--side-line);animation:caer .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes caer{from{opacity:0;transform:translateY(-14px)}}
.login-name{margin:16px 0 64px;font-size:13px;font-weight:300;letter-spacing:4px;color:var(--side-muted)}
.login-name b{font-weight:700;color:var(--side-txt)}
.login-error{position:relative;width:100%;margin:-36px 0 16px;padding:10px 14px 10px 18px;border-radius:10px;font-size:13px;
  background:var(--side2);border:1px solid var(--side-line);color:#ffc1d6;overflow:hidden}
.login-error::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--hot)}
.login-form{width:100%;display:flex;flex-direction:column;gap:12px}
.lf{position:relative;display:block;border-radius:10px;background:var(--side2);border:1px solid var(--side-line);overflow:hidden;transition:background .15s,border-color .15s}
.lf::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent);transform:scaleY(0);transition:transform .2s ease}
.lf:hover{background:#39424f}
.lf:focus-within{background:#394351;border-color:#4a5563}
.lf:focus-within::before{transform:none}
.lf span{position:absolute;left:18px;top:11px;font-size:10.5px;font-weight:500;letter-spacing:1.3px;color:var(--side-muted);pointer-events:none;transition:color .2s}
.lf:focus-within span{color:var(--accent)}
.lf input{height:62px;padding:22px 52px 6px 18px;border:0;border-radius:0;background:transparent;color:var(--side-txt);font-size:16px;letter-spacing:.3px;box-shadow:none}
.lf input:focus{box-shadow:none}
.lf input:-webkit-autofill{-webkit-text-fill-color:#e9eef4;-webkit-box-shadow:0 0 0 40px #394351 inset;caret-color:#fff}
.lf-eye{position:absolute;right:12px;top:50%;margin-top:-16px;display:grid;place-items:center;width:32px;height:32px;border-radius:8px;
  border:1px solid var(--side-line);background:var(--side);color:var(--side-muted);cursor:pointer;transition:.15s}
.lf-eye svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.lf-eye:hover{border-color:var(--accent);color:var(--accent)}
.lf-eye.on{border-color:var(--accent);color:var(--accent)}
.login-btn{height:54px;margin-top:10px;border:0;border-radius:10px;cursor:pointer;font:500 16px var(--font);letter-spacing:.4px;color:#fff;
  background:var(--accent);transition:background .15s,transform .1s}
.login-btn:hover{background:var(--accent-d)}
.login-btn:active{transform:translateY(1px)}
.login-foot{margin-top:auto;padding-top:40px;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:#6b778a}

/* ================= Responsivo ================= */
@media (max-width:1180px){
  .app{grid-template-columns:64px 240px minmax(0,1fr)}
  .mail{grid-template-columns:minmax(320px,380px) minmax(0,1fr)}
}
@media (max-width:980px){
  .app{grid-template-columns:64px minmax(0,1fr)}
  .side{position:fixed;left:64px;top:0;bottom:0;width:280px;transform:translateX(calc(-100% - 64px));transition:transform .25s ease;box-shadow:10px 0 40px rgba(0,0,0,.3)}
  .app.side-open .side{transform:none}
  .app.side-open .side-scrim{display:block;position:fixed;inset:0;z-index:20;background:rgba(23,30,40,.4)}
  .bar{display:flex}
  .mail{grid-template-columns:minmax(0,1fr);position:relative}
  .reader{position:absolute;inset:0;z-index:5;transform:translateX(100%);transition:transform .25s ease}
  .mail.leyendo .reader{transform:none}
  .reader-back{display:grid}
  .reader-doc{margin:12px}
}
@media (max-width:640px){
  .app{grid-template-columns:minmax(0,1fr)}
  .rail{position:fixed;left:0;right:0;bottom:0;top:auto;height:58px;flex-direction:row;justify-content:space-around;padding:0 6px;border-right:0;border-top:1px solid #161b22}
  .rail-logo{display:none}
  .rail-avatar{width:36px;height:36px;margin:0}
  .rail-btn.active::before{left:10px;right:10px;top:auto;bottom:-7px;width:auto;height:3px;border-radius:3px 3px 0 0}
  .rail-bottom{margin-top:0}
  .main{height:calc(100vh - 58px)}
  .side{left:0;bottom:58px}
  .page{padding:20px 16px 40px}
  .cards{grid-template-columns:1fr}
  .grid2,.grid3{grid-template-columns:1fr}
  .span2{grid-column:auto}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats div:nth-child(2){border-right:0}
  .stats div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .fields{grid-template-columns:1fr}
  .reader-head{flex-wrap:wrap}
  .reader-total{text-align:left;width:100%;padding-left:66px}
  .list-head{flex-wrap:wrap}
}