/* Kit compartido por las páginas de herramientas (módulos). Solo tokens de app.css. */
.mod-title{display:flex;align-items:center;gap:12px}
.mod-title .ic{width:26px;height:26px;color:var(--cyan)}
.mod-body{display:flex;flex-direction:column;gap:var(--s4)}
.mod-lock{max-width:560px;margin:24px auto;text-align:center}
.mod-lock h2{font:700 20px var(--display);margin:12px 0 8px}
.mod-lock .actions{justify-content:center}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.stack{display:flex;flex-direction:column;gap:var(--s3)}
.rowflex{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.spacer{flex:1}
@media (max-width:900px){.grid3,.grid4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.grid2,.grid3,.grid4{grid-template-columns:1fr}}
.mcard{padding:var(--s5)}
.btn-danger{background:linear-gradient(90deg,#ff5a74,#ff3b5c);color:#2a0710}
.btn-danger:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn .ic{width:16px;height:16px}

/* interruptor */
.switch{width:42px;height:24px;border-radius:99px;background:#ffffff1f;border:1px solid var(--line-2);position:relative;flex:none;transition:background var(--t-fast) var(--ease)}
.switch i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform var(--t-fast) var(--ease)}
.switch[aria-checked=true]{background:linear-gradient(90deg,var(--cyan),var(--violet));border-color:transparent}
.switch[aria-checked=true] i{transform:translateX(18px)}
.switch:disabled{opacity:.5;cursor:not-allowed}

/* etiquetas */
.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:99px;font:700 10.5px var(--body);letter-spacing:.05em;border:1px solid var(--line-2);white-space:nowrap}
.b-ok{color:var(--ok);border-color:#35f0a188}.b-warn{color:var(--warn);border-color:#f5a52488}.b-bad{color:var(--bad);border-color:#ff5a7488}
.b-info{color:var(--cyan);border-color:#ffd40088}.b-violet{color:var(--violet);border-color:#ffb21f88}.b-muted{color:var(--muted)}

/* progreso */
.progress{height:8px;border-radius:99px;background:#ffffff12;overflow:hidden}
.progress i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--cyan),var(--violet));transition:width 400ms var(--ease)}
.progress.indet i{width:38%!important;animation:indet 2.4s cubic-bezier(.77,0,.175,1) infinite}
@keyframes indet{0%{transform:translateX(-110%)}100%{transform:translateX(280%)}}
.spinner{width:16px;height:16px;border-radius:50%;border:2px solid #ffffff26;border-top-color:var(--cyan);animation:rot 1.6s linear infinite;display:inline-block}
@keyframes rot{to{transform:rotate(360deg)}}
.spin-row{display:flex;align-items:center;gap:10px;color:var(--muted)}
.empty{text-align:center;padding:36px 16px;color:var(--text)}.empty .muted{margin-top:6px}

/* estadísticas */
.stat{display:flex;flex-direction:column;gap:4px;padding:var(--s4);border-radius:var(--r-md);background:#ffffff08;border:1px solid var(--line)}
.stat .k{color:var(--muted);font-size:12.5px}.stat .v{font:700 22px var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}.stat .s{color:var(--muted);font-size:12px}

/* formularios */
.input{width:100%;padding:11px 14px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:#ffffff0a;color:var(--text);font:inherit;user-select:text}
.input:focus{outline:2px solid var(--cyan);outline-offset:1px}
select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px}
select.input option{background:#0e0e16;color:var(--text)}
.check{display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.check input{position:absolute;opacity:0;width:0;height:0}
.check .box{width:18px;height:18px;border-radius:6px;border:1.5px solid var(--line-2);background:#ffffff0a;display:inline-grid;place-items:center;transition:background var(--t-fast),border-color var(--t-fast)}
.check input:checked+.box{background:linear-gradient(135deg,var(--cyan),var(--violet));border-color:transparent}
.check input:checked+.box::after{content:"";width:9px;height:5px;border-left:2px solid #14100a;border-bottom:2px solid #14100a;transform:rotate(-45deg) translate(1px,-1px)}
.check input:focus-visible+.box{outline:2px solid var(--cyan);outline-offset:2px}

/* lista de filas (tablas ligeras) */
.rows{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.rows>.r{display:flex;align-items:center;gap:var(--s3);padding:12px 16px;border-bottom:1px solid #ffffff0a;background:#ffffff05}
.rows>.r:last-child{border-bottom:0}
.rows>.r:hover{background:#ffffff0c}
.rows .grow{flex:1;min-width:0}.rows .t{font-weight:700}.rows .d{color:var(--muted);font-size:12.5px;word-break:break-word}

/* modal */
.modal-back{position:fixed;inset:0;background:#05050999;backdrop-filter:blur(6px);display:grid;place-items:center;z-index:50;animation:fade var(--t-fast) var(--ease) both}
.modal-back.out{opacity:0;transition:opacity 150ms}
.modal{width:min(520px,calc(100vw - 32px));background:linear-gradient(160deg,#161621,#0b0b12);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:var(--s5);box-shadow:0 30px 80px #000a;animation:rise var(--t-med) var(--ease) both}
.modal h2{font:700 18px var(--display);margin-bottom:var(--s3)}
.modal-body{color:var(--muted);margin-bottom:var(--s4);max-height:50vh;overflow:auto}
.modal-body p+p{margin-top:8px}
.modal-actions{display:flex;justify-content:flex-end;gap:var(--s2)}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* toasts */
#toasts{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:8px;z-index:60}
.toast2{background:#0e0e16;border:1px solid var(--line-2);border-left:3px solid var(--cyan);padding:12px 16px;border-radius:12px;box-shadow:0 12px 40px #0008;max-width:380px;animation:rise var(--t-med) var(--ease) both}
.toast2.t-ok{border-left-color:var(--ok)}.toast2.t-warn{border-left-color:var(--warn)}.toast2.t-bad{border-left-color:var(--bad)}
.toast2.out{opacity:0;transform:translateY(6px);transition:all 240ms}