:root{--bg:#0b1114;--side:#0e171a;--card:#121c20;--card2:#17242a;--tx:#e8eef0;--mut:#8497a0;--pri:#2fc4a9;--pri2:#1b8f7b;--ok:#3ddc97;--warn:#e8b04a;--err:#f0605d;--bd:#1f2f35;color-scheme:dark}
*{box-sizing:border-box}body{margin:0;font:14px/1.45 Inter,system-ui,Segoe UI,sans-serif;background:radial-gradient(1200px 500px at 70% -10%,#10312f 0,transparent 60%),var(--bg);background-attachment:fixed;color:var(--tx)}
a{color:var(--pri)}
.app{display:flex;min-height:100vh}
.side{width:216px;flex:none;background:var(--side);border-right:1px solid var(--bd);padding:16px 12px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;overflow-y:auto}
.side .marca{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;padding:4px 8px 16px}
.side .marca i{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--pri),var(--pri2));display:grid;place-items:center;color:#06231e;font-style:normal;font-weight:800}
.side .sec{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);padding:14px 10px 4px}
.side a.nav{display:flex;align-items:center;gap:10px;color:#b7c5cb;text-decoration:none;padding:8px 10px;border-radius:8px;border:1px solid transparent}
.side a.nav:hover{background:var(--card2);color:#fff}.side a.nav.on{background:var(--card2);border-color:var(--bd);color:#fff;box-shadow:inset 3px 0 0 var(--pri)}
.side a.nav .ic{width:18px;text-align:center;opacity:.9}
.side .pie{margin-top:auto;border-top:1px solid var(--bd);padding-top:10px;display:flex;flex-direction:column;gap:8px}
.side .pie select{width:100%}.side .pie button{width:100%}
.cont{flex:1;min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:12px;padding:12px 24px;border-bottom:1px solid var(--bd);background:rgba(14,23,26,.6);backdrop-filter:blur(6px);position:sticky;top:0;z-index:5}
.top .pill{background:var(--card2);border:1px solid var(--bd);border-radius:20px;padding:4px 12px;font-size:12.5px;color:var(--mut)}
.top .sp{flex:1}.top .yo{color:var(--tx);text-decoration:none;display:flex;align-items:center;gap:8px}
.top .av{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#e8b04a,#f0605d);display:grid;place-items:center;color:#1a1208;font-weight:700;font-size:12px}
main{padding:22px 24px;max-width:1320px;width:100%}
h1{font-size:1.45rem;margin:.1em 0 .9em;font-weight:600;letter-spacing:-.01em}h2{font-size:1rem;margin:1.2em 0 .5em;font-weight:600}
.card{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:16px;margin-bottom:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:6px}
.kpi{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:14px 16px;position:relative;overflow:hidden}
.kpi:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--k,var(--pri))}
.kpi span{display:block;color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:.06em}.kpi b{display:block;font-size:1.55rem;font-weight:600;margin-top:4px;letter-spacing:-.01em}
.kpi:nth-child(2){--k:#e8b04a}.kpi:nth-child(3){--k:#7c8cf8}.kpi:nth-child(4){--k:#3ddc97}.kpi:nth-child(5){--k:#f0605d}.kpi:nth-child(6){--k:#8497a0}
table{width:100%;border-collapse:collapse;background:var(--card);border-radius:10px;overflow:hidden}th,td{padding:8px 10px;border-bottom:1px solid var(--bd);text-align:left;vertical-align:top}
tr:hover td{background:rgba(255,255,255,.02)}
th{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);background:var(--card2);font-weight:600}td.n,th.n{text-align:right;white-space:nowrap}.scroll{overflow-x:auto}
input,select,textarea,button{font:inherit;padding:8px 10px;border:1px solid var(--bd);border-radius:9px;background:#0c1417;color:var(--tx);max-width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(47,196,169,.45);border-color:var(--pri)}
button,.btn{background:var(--pri);color:#04221d;font-weight:600;border:0;cursor:pointer;text-decoration:none;display:inline-block;padding:8px 14px;border-radius:9px}
button:hover,.btn:hover{filter:brightness(1.08)}
button.sec,.btn.sec{background:transparent;color:var(--pri);border:1px solid var(--pri2);font-weight:500}button.pel{background:var(--err);color:#fff}
label{display:block;font-size:.8rem;color:var(--mut);margin:6px 0 2px}.fila{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}.fila>div{flex:1;min-width:150px}
.msg{padding:10px 14px;border-radius:10px;margin-bottom:10px;border:1px solid}.msg.ok{background:#0f2a1f;border-color:#1e6b49;color:#aef0cf}.msg.err{background:#341618;border-color:#8a2f2f;color:#f7c4c2}.msg.warn{background:#322812;border-color:#8a6a22;color:#f4dba0}
.tag{display:inline-block;padding:1px 9px;border-radius:10px;font-size:.75rem;background:var(--card2);color:var(--mut);border:1px solid var(--bd)}.tag.ok{background:#0f2a1f;color:#8ee8b9;border-color:#1e6b49}.tag.err{background:#341618;color:#f7a9a6;border-color:#8a2f2f}.tag.warn{background:#322812;color:#f4d58b;border-color:#8a6a22}
.c-ok{background:rgba(61,220,151,.14)}.c-par{background:rgba(232,176,74,.2)}.c-no{background:rgba(240,96,93,.2)}.mut{color:var(--mut)}.big{font-size:1.5rem}
.login{max-width:380px;margin:9vh auto;background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:22px}.login input{width:100%}small{color:var(--mut)}code{background:var(--card2);padding:1px 6px;border-radius:5px}
.linea{display:grid;grid-template-columns:1.2fr 1.4fr .8fr 1.2fr 1fr;gap:6px;margin-bottom:6px}@media(max-width:700px){.linea{grid-template-columns:1fr 1fr}}
table.mensual{font-size:12.5px;min-width:980px}table.mensual th{font-size:.66rem;line-height:1.2}
table.mensual td.e,table.mensual th.e{background:rgba(61,220,151,.1)}table.mensual td.s,table.mensual th.s{background:rgba(240,96,93,.1)}
table.mensual tr.sel td{background:rgba(47,196,169,.14)}table.mensual tr.tot td{font-weight:700;border-top:2px solid var(--pri2)}
.graficas{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:14px;margin:14px 0}.graficas .card{margin:0}.graficas h2{margin:0 0 8px;font-size:.95rem}
.graficas svg{width:100%;height:auto;display:block}.ax{font-size:10.5px;fill:var(--mut)}.gl{stroke:var(--bd);stroke-width:1}.cen{font-size:15px;font-weight:600;fill:var(--tx)}.lab{font-size:12.5px;fill:var(--tx)}
.leyenda{display:flex;gap:14px;font-size:.8rem;color:var(--mut);margin-top:6px}.leyenda i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px}
@media(max-width:820px){.app{flex-direction:column}.side{width:auto;height:auto;position:static;flex-direction:row;flex-wrap:wrap;align-items:center}.side .sec,.side .pie{display:none}main{padding:14px}}
.estatutos{max-width:900px;line-height:1.6}.estatutos h2.parte{color:var(--pri);border-bottom:1px solid var(--bd);padding-bottom:6px;margin-top:1.6em}.estatutos h3{margin:1.4em 0 .4em}.estatutos p{margin:.5em 0}
.cruce{max-width:640px;margin:0 auto}.cruce h1{font-size:1.25rem}.cruce p{line-height:1.6}.cruce input:not([type=checkbox]){width:100%}
canvas.firma{width:100%;max-width:600px;height:auto;aspect-ratio:600/220;background:#fff;border-radius:10px;touch-action:none;display:block;border:2px dashed #888}