/* Thoth Panel — hoja de estilo. Tokens tomados de Thoth Security Systems. */
:root{
    --th-red:#e51f36; --th-red-dark:#bd1e2d; --th-red-soft:#fdeced;
    --th-charcoal:#1d2327;
    --th-bg:#f6f7f9; --th-card:#fff; --th-card-soft:#fafbfc;
    --th-line:#e4e7ec; --th-line-strong:#d3d8e0;
    --th-text:#2c3338; --th-text-soft:#50575e; --th-muted:#8c93a0;
    --ok:#1a9b4e; --ok-soft:#e7f6ee;
    --amber:#b45309; --amber-soft:#fdf2e3;
    --blue:#2271b1; --blue-soft:#e8f1f8;
    --danger:#d63638; --danger-soft:#fbeaea;
    --r-lg:18px; --r-md:14px; --r-sm:10px;
    --sh:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.1);
    --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    background:var(--th-bg);color:var(--th-text);font-size:14px;line-height:1.5}
h1,h2{margin:0}
a{color:inherit;text-decoration:none}
code{background:var(--th-card-soft);border:1px solid var(--th-line);border-radius:6px;padding:1px 6px;font-size:.85em}
.muted{color:var(--th-muted)}
.mb{margin:0 0 10px}

/* Marca */
.brand-mark{font-style:italic;font-weight:800;color:var(--th-red);letter-spacing:.5px}
.brand-sub{font-size:.62rem;font-weight:700;letter-spacing:.22em;color:var(--th-muted)}

/* --- Login --- */
body.auth{display:flex;align-items:center;justify-content:center;min-height:100vh;
    background:radial-gradient(1200px 500px at 50% -10%,var(--th-red-soft),var(--th-bg))}
.login-card{background:var(--th-card);border:1px solid var(--th-line);border-top:3px solid var(--th-red);
    border-radius:var(--r-lg);box-shadow:var(--sh);padding:32px;width:340px;max-width:92vw}
.brand-lg{font-size:1.5rem;margin-bottom:4px}
.form{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.form label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.82rem;color:var(--th-text-soft)}
input{font:inherit;padding:10px 12px;border:1px solid var(--th-line-strong);border-radius:var(--r-sm);
    background:#fff;color:var(--th-text)}
input:focus{outline:none;border-color:var(--th-red);box-shadow:0 0 0 3px var(--th-red-soft)}

/* Botones */
.btn{display:inline-block;font:inherit;font-weight:600;padding:10px 16px;border-radius:var(--r-sm);
    border:1px solid transparent;cursor:pointer;transition:transform .16s var(--ease),filter .16s var(--ease)}
.btn:hover{filter:brightness(.97);transform:translateY(-1px)}
.btn-primary{background:var(--th-red);color:#fff}

/* Alertas */
.alert{border-radius:var(--r-sm);padding:10px 14px;margin:14px 0;font-size:.88rem;border:1px solid transparent}
.alert.error{background:var(--danger-soft);color:var(--danger);border-color:#f2c4c5}
.alert.info{background:var(--blue-soft);color:var(--blue);border-color:#c9e0f0}

/* --- App layout --- */
body.app{display:flex;min-height:100vh}
.sidebar{width:230px;flex:0 0 230px;background:var(--th-charcoal);color:#c9ced6;
    display:flex;flex-direction:column;padding:20px 14px;gap:4px}
.brand{display:flex;flex-direction:column;padding:6px 10px 18px}
.brand .brand-mark{font-size:1.35rem}
.nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-sm);
    color:#c9ced6;font-weight:600;font-size:.9rem;transition:background .16s var(--ease),color .16s var(--ease)}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.is-active{background:var(--th-red);color:#fff}
.nav-ico{width:20px;text-align:center;opacity:.9}
.nav-item.logout{margin-top:auto;color:#9aa1ab}
.nav-item.logout:hover{background:rgba(214,54,56,.16);color:#fff}

.content{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;
    padding:18px 28px;border-bottom:1px solid var(--th-line);background:#fff}
.topbar h1{font-size:1.15rem}
.user{color:var(--th-text-soft);font-weight:600;font-size:.86rem}
.page{padding:26px 28px;flex:1}
.foot{padding:14px 28px;color:var(--th-muted);font-size:.78rem;border-top:1px solid var(--th-line)}

/* Grids y cards */
.grid{display:grid;gap:16px;margin-bottom:16px}
.grid.kpis{grid-template-columns:repeat(4,1fr)}
.grid.two{grid-template-columns:1fr 1fr}
.card{background:var(--th-card);border:1px solid var(--th-line);border-radius:var(--r-md);
    box-shadow:var(--sh);padding:18px 20px}
.card h2{font-size:.95rem;margin-bottom:12px;color:var(--th-text)}
.toolbar{margin-bottom:16px}

/* KPI */
.kpi-label{color:var(--th-muted);font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.kpi-value{font-size:1.7rem;font-weight:800;margin-top:4px}
.kpi-sub{color:var(--th-muted);font-size:.78rem;margin-top:2px}
.meter{height:7px;border-radius:99px;background:var(--th-line);overflow:hidden;margin-top:8px}
.meter>span{display:block;height:100%;background:var(--th-red);border-radius:99px}
.meter-row{margin:12px 0}
.meter-row span{font-weight:600;font-size:.84rem}
.meter-row small{color:var(--th-muted)}

/* Tablas */
table.kv{width:100%;border-collapse:collapse}
table.kv td{padding:7px 0;border-bottom:1px solid var(--th-line);font-size:.88rem}
table.kv td:first-child{color:var(--th-muted);width:38%}
table.data{width:100%;border-collapse:collapse;font-size:.86rem}
table.data th{text-align:left;color:var(--th-muted);font-size:.74rem;text-transform:uppercase;
    letter-spacing:.06em;padding:8px 10px;border-bottom:1px solid var(--th-line-strong)}
table.data td{padding:9px 10px;border-bottom:1px solid var(--th-line)}
table.data tr:hover td{background:var(--th-card-soft)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;color:var(--th-text-soft)}

/* Servicios */
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.svc-grid.wide{grid-template-columns:repeat(4,1fr)}
.svc{display:flex;align-items:center;gap:8px;font-size:.86rem}
.svc em{color:var(--th-muted);font-style:normal;font-size:.78rem}
.dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px;background:var(--th-muted)}
.dot.ok{background:var(--ok)}
.dot.bad{background:var(--danger)}
.dot.muted{background:var(--th-muted)}

/* Badges */
.badge{display:inline-block;padding:2px 8px;border-radius:99px;font-size:.72rem;font-weight:700}
.badge.crit{background:var(--danger-soft);color:var(--danger)}
.badge.warn{background:var(--amber-soft);color:var(--amber)}

/* Form inline */
.form-inline{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.form-inline input{flex:1;min-width:280px}

@media(max-width:860px){
    .grid.kpis{grid-template-columns:1fr 1fr}
    .grid.two{grid-template-columns:1fr}
    .svc-grid.wide{grid-template-columns:1fr 1fr}
    .sidebar{width:64px;flex-basis:64px}
    .sidebar .brand,.nav-item span:not(.nav-ico){display:none}
}

/* Copiloto IA */
.badge.ai{background:#efe7fb;color:#6d28d9}
.ai-card{border-left:3px solid #6d28d9}
.ai-summary{font-size:.95rem;line-height:1.6;margin:6px 0 14px}
.ai-h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--th-muted);margin:0 0 8px}
.ai-actions{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ai-actions li{background:var(--th-charcoal);color:#dfe4ea;padding:9px 12px;border-radius:var(--r-sm);
    font-size:.82rem;overflow-x:auto}
.small{font-size:.8rem}

/* 2FA */
.twofa-setup{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start;margin-top:10px}
.twofa-manual{flex:1 1 300px}
.qraside{flex:0 0 auto}
.qrbox{background:#fff;padding:10px;border:1px solid var(--th-line);border-radius:var(--r-sm);
    width:202px;height:202px;display:flex;align-items:center;justify-content:center;text-align:center}
.keycode{font-size:1.05rem;letter-spacing:2px;background:var(--th-card-soft);border:1px dashed var(--th-line-strong);
    padding:10px 12px;border-radius:var(--r-sm);display:inline-block;margin:0 0 12px}

/* Formularios en rejilla + checklist */
.grid-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-form label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.82rem;color:var(--th-text-soft)}
.grid-form button{grid-column:1/-1;justify-self:start}
.checks{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:6px;font-size:.86rem}
@media(max-width:700px){.grid-form{grid-template-columns:1fr}}

/* Gestor de archivos */
.fm-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.crumbs{font-weight:600;color:var(--th-text)}
.fm-actions{display:flex;gap:10px;flex-wrap:wrap}
.inline{display:inline-flex;gap:6px;align-items:center;margin:0}
.fm-row-actions{display:flex;gap:12px;align-items:center;white-space:nowrap}
.small-btn{padding:6px 10px;font-size:.8rem;background:var(--th-card-soft);border:1px solid var(--th-line-strong);color:var(--th-text)}
.linklike{background:none;border:none;color:var(--danger);cursor:pointer;font:inherit;font-size:.82rem;padding:0}
.linklike:hover{text-decoration:underline}
.editor{width:100%;min-height:420px;border:1px solid var(--th-line-strong);border-radius:var(--r-sm);
    padding:12px;font-size:.82rem;line-height:1.5;background:#0f1115;color:#e6e9ef;resize:vertical}
.editor-actions{display:flex;gap:10px;margin-top:12px}
.btn:not(.btn-primary):not(.small-btn){background:var(--th-card-soft);border:1px solid var(--th-line-strong);color:var(--th-text)}

/* DNS · Correo · Deception */
.pill-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pill-list li{background:var(--th-card-soft);border:1px solid var(--th-line);border-radius:99px;padding:5px 12px;font-size:.82rem}
.codeblock{background:#0f1115;color:#e6e9ef;border-radius:var(--r-sm);padding:14px;font-size:.74rem;
    line-height:1.55;overflow-x:auto;white-space:pre;margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.decoy-hero{border-left:3px solid #6d28d9;background:linear-gradient(180deg,#faf8ff,#ffffff)}
.decoy-hero h2{font-size:1.15rem}
.decoy-hero p{margin:6px 0 0;color:var(--th-text-soft);line-height:1.6}
.term-presets{display:flex;flex-wrap:wrap;gap:8px}

/* Transaction Shield */
.badge.tx-allow{background:var(--ok-soft);color:var(--ok)}
.badge.tx-quar{background:#efe7fb;color:#6d28d9}
.tx-result{background:var(--th-card-soft);border:1px solid var(--th-line);border-radius:var(--r-sm);padding:14px;margin:6px 0 4px}
.tx-risk{margin-left:10px;color:var(--th-text-soft);font-size:.86rem}
select{font:inherit;padding:10px 12px;border:1px solid var(--th-line-strong);border-radius:var(--r-sm);background:#fff;color:var(--th-text)}
select:focus{outline:none;border-color:var(--th-red);box-shadow:0 0 0 3px var(--th-red-soft)}
textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* --- Versión siempre visible --- */
.brand-ver{display:block;font-size:.6rem;font-weight:700;letter-spacing:.04em;color:var(--th-red);margin-top:2px}
.auth-ver{position:fixed;bottom:14px;left:0;right:0;text-align:center;color:var(--th-muted);font-size:.74rem}

/* --- Estado del sistema --- */
.dot.warn{background:var(--amber)}
.mb0{margin:0}
.status-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.status-hero-main{flex:1 1 260px}
.status-hero-score{display:flex;flex-direction:column;align-items:center;gap:8px}
.score-ring{--pct:0;position:relative;width:92px;height:92px;border-radius:50%;
    background:conic-gradient(var(--ok) calc(var(--pct)*1%),var(--th-line) 0);
    display:flex;align-items:center;justify-content:center}
.score-ring::before{content:"";position:absolute;width:70px;height:70px;border-radius:50%;background:var(--th-card)}
.score-ring span{position:relative;font-weight:800;font-size:1.15rem;color:var(--th-text)}
.score-legend{font-size:.78rem;color:var(--th-text-soft)}
.grp-ico{display:inline-block;width:1.4em;text-align:center}
.status-list{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.status-item{display:flex;gap:10px;padding:9px 6px;border-bottom:1px solid var(--th-line)}
.status-item:last-child{border-bottom:none}
.status-item .dot{margin-top:6px}
.status-body{flex:1}
.status-label{font-weight:600}
.status-detail{font-weight:400;font-style:normal;color:var(--th-muted);margin-left:6px}
.status-hint{font-size:.82rem;color:var(--amber);margin-top:2px}

/* --- Crear cuenta de hosting --- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px}
.form-grid label{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:.9rem}
.form-grid label small{font-weight:400;color:var(--th-muted)}
.form-grid input[type=text],.form-grid input[type=email]{padding:9px 11px;border:1px solid var(--th-line-strong);border-radius:var(--r-sm);font-size:.95rem}
.form-grid .checks-row,.form-grid>div:last-child{grid-column:1 / -1}
.checks-row{display:flex;gap:22px;flex-wrap:wrap}
.checks-row label.inline{flex-direction:row;align-items:center;gap:7px;font-weight:500}
.notice{padding:10px 13px;border-radius:var(--r-sm);margin:0 0 12px;font-size:.9rem}
.notice.warn{background:var(--amber-soft);color:var(--amber);border:1px solid #f0d9a8}
.ok-text{color:var(--ok);font-weight:600}
.bad-text{color:var(--danger);font-weight:600}
.step{border:1px solid var(--th-line);border-radius:var(--r-sm);margin-bottom:8px;overflow:hidden}
.step-head{display:flex;align-items:center;gap:9px;padding:9px 12px;background:var(--th-card-soft)}
.step-head em{margin-left:auto;font-style:normal;font-size:.8rem;color:var(--th-muted)}
.step-log{margin:0;padding:9px 12px;background:#0d1117;color:#c9d1d9;font-size:.78rem;
    white-space:pre-wrap;word-break:break-word;max-height:220px;overflow:auto}
.creds{margin-top:14px;border:2px solid var(--ok);border-radius:var(--r-md);padding:14px;background:var(--ok-soft)}
.creds h3{margin:0 0 10px;font-size:.95rem}
.creds code{background:#fff}
.tbl{width:100%;border-collapse:collapse;margin-top:8px;font-size:.9rem}
.tbl th,.tbl td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--th-line)}
.tbl th{color:var(--th-muted);font-weight:600;font-size:.82rem}
@media(max-width:720px){.form-grid{grid-template-columns:1fr}}

/* --- Acciones del servidor (tipo WHM) --- */
.action-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:6px}
.action-card{border:1px solid var(--th-line);border-radius:var(--r-md);padding:13px;display:flex;
    flex-direction:column;gap:9px;background:var(--th-card-soft)}
.action-card.is-danger{border-color:#f2c4c5;background:var(--danger-soft)}
.action-body strong{display:block;font-size:.92rem}
.action-body small{color:var(--th-muted);font-size:.78rem;line-height:1.35}
.action-confirm{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--danger);font-weight:600}
.action-card .btn{margin-top:auto;text-align:center;font-size:.86rem;padding:8px 12px;border:none;cursor:pointer}
.btn-danger{background:var(--danger);color:#fff}

/* Logout como botón POST (THO-025) */
.logout-form{margin-top:auto}
button.nav-item{width:100%;background:none;border:none;cursor:pointer;font:inherit;text-align:left}

/* ===== File Manager ===== */
.fm{display:flex;flex-direction:column;gap:12px}
.fm-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fm-btn{background:#fff;border:1px solid var(--th-line-strong);color:var(--th-text)}
.small-btn{padding:6px 11px;font-size:.82rem}
.fm-search{margin-left:auto;min-width:200px;padding:8px 11px;border:1px solid var(--th-line-strong);border-radius:var(--r-sm)}
.fm-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:2px;font-size:.9rem;color:var(--th-text-soft)}
.fm-crumbs a{color:var(--blue);font-weight:600}
.fm-crumbs a:hover{text-decoration:underline}
.fm-crumbs .fm-sep{color:var(--th-muted)}
.fm-selbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--th-red-soft);
    border:1px solid #f2c4c5;border-radius:var(--r-sm);padding:8px 12px;font-size:.86rem;font-weight:600}
.fm-selbar span{margin-right:6px}
.fm-list-wrap{position:relative;background:#fff;border:1px solid var(--th-line);border-radius:var(--r-md);
    box-shadow:var(--sh);overflow:hidden;min-height:220px}
.fm-list-wrap.drag{outline:2px dashed var(--th-red);outline-offset:-6px}
.fm-list-wrap.drag .fm-drop-hint{display:flex}
.fm-drop-hint{display:none;position:absolute;inset:0;align-items:center;justify-content:center;
    background:rgba(229,31,54,.06);font-weight:800;color:var(--th-red);font-size:1.2rem;pointer-events:none;z-index:5}
.fm-table{width:100%;border-collapse:collapse;font-size:.88rem}
.fm-table thead th{text-align:left;color:var(--th-muted);font-size:.72rem;text-transform:uppercase;
    letter-spacing:.05em;padding:10px 12px;border-bottom:1px solid var(--th-line-strong);position:sticky;top:0;background:#fff}
.fm-c-check{width:34px}.fm-c-size{width:90px}.fm-c-perm{width:90px}.fm-c-date{width:130px}.fm-c-act{width:44px}
.fm-row td{padding:8px 12px;border-bottom:1px solid var(--th-line)}
.fm-row:hover td{background:var(--th-card-soft)}
.fm-row.sel td{background:var(--th-red-soft)}
.fm-name{display:inline-flex;align-items:center;gap:2px;color:var(--th-text);font-weight:600;cursor:pointer}
.fm-name:hover{color:var(--th-red)}
.fm-updir .fm-name{color:var(--th-muted);font-weight:500}
.fm-empty{padding:40px;text-align:center;color:var(--th-muted)}
/* menú por fila */
.fm-menu{position:relative}
.fm-menu-btn{background:none;border:none;cursor:pointer;font-size:1.1rem;color:var(--th-muted);padding:2px 6px;border-radius:6px}
.fm-menu-btn:hover{background:var(--th-line);color:var(--th-text)}
.fm-pop{position:absolute;right:0;top:100%;z-index:20;background:#fff;border:1px solid var(--th-line-strong);
    border-radius:var(--r-sm);box-shadow:0 6px 20px rgba(16,24,40,.16);min-width:170px;padding:5px;display:flex;flex-direction:column}
.fm-pop-item{background:none;border:none;text-align:left;padding:8px 10px;border-radius:6px;cursor:pointer;font:inherit;font-size:.85rem}
.fm-pop-item:hover{background:var(--th-card-soft)}
.fm-danger{color:var(--danger)}
/* modales */
.fm-modal{position:fixed;inset:0;z-index:100;background:rgba(16,24,40,.5);display:flex;align-items:center;justify-content:center;padding:20px}
.fm-modal[hidden]{display:none}
.fm-modal-box{background:#fff;border-radius:var(--r-md);box-shadow:0 20px 60px rgba(0,0,0,.3);width:min(680px,96vw);max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
.fm-editor-box{width:min(960px,96vw);height:82vh}
.fm-modal-head{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--th-line)}
.fm-grow{flex:1}
.fm-editor-area{flex:1;min-height:0;position:relative}
.fm-editor-area textarea{width:100%;height:100%;border:none;outline:none;resize:none;padding:14px;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem;line-height:1.5}
.fm-editor-area .CodeMirror{height:100%;font-size:.85rem}
.fm-trash-list{padding:10px 16px;overflow:auto}
.fm-trash-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--th-line)}
.fm-trash-row div{flex:1}.fm-trash-row small{color:var(--th-muted)}
/* toasts */
.fm-toasts{position:fixed;bottom:18px;right:18px;z-index:200;display:flex;flex-direction:column;gap:8px}
.fm-toast{background:var(--th-charcoal);color:#fff;padding:10px 15px;border-radius:var(--r-sm);font-size:.85rem;
    box-shadow:var(--sh);opacity:0;transform:translateY(10px);transition:opacity .25s,transform .25s;max-width:340px}
.fm-toast.show{opacity:1;transform:none}
.fm-toast.bad{background:var(--danger)}
@media(max-width:720px){.fm-c-perm,.fm-c-date{display:none}.fm-search{margin-left:0;width:100%}}

/* respetar el atributo hidden por encima de display:flex */
[hidden]{display:none!important}

/* ===== Sidebar con submenús ===== */
.brand-logo{max-width:170px;width:100%;height:auto;display:block;margin-bottom:2px}
.nav-group{margin:1px 0}
.nav-group-head{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--r-sm);
    color:#8f97a3;font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
    cursor:pointer;list-style:none;user-select:none}
.nav-group-head::-webkit-details-marker{display:none}
.nav-group-head::marker{content:''}
.nav-group-head:hover{background:rgba(255,255,255,.05);color:#c9ced6}
.nav-group-label{flex:1}
.nav-chev{font-size:.65rem;opacity:.55;transition:transform .18s var(--ease)}
.nav-group[open]>.nav-group-head .nav-chev{transform:rotate(90deg)}
.nav-group[open]>.nav-group-head{color:#c9ced6}
.nav-sub{padding-left:26px;font-size:.86rem}
.nav-sub .nav-ico{font-size:.9em;opacity:.85}
/* móvil: solo iconos, oculta textos del grupo y el logo grande */
@media(max-width:860px){
    .sidebar .brand-logo{display:none}
    .nav-group-label,.nav-chev,.nav-sub span:not(.nav-ico){display:none}
    .nav-sub{padding-left:12px}
}
/* RC5 · administración de cuentas */
.row-between{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.table-wrap{overflow-x:auto}
.kpi-val{font-size:1.7rem;font-weight:800;margin-top:4px}
.mt{margin-top:10px}
.badge.ok{background:var(--ok-soft);color:var(--ok)}

/* ── Tema oscuro del panel de operador · maqueta thoth-teams (2026-08-08) ────
 *
 * El salto de claro a oscuro NO se hace regla a regla: el panel entero esta
 * escrito sobre los tokens --th-*, asi que basta redefinirlos bajo body.app y
 * las ~340 lineas de arriba se retematizan solas. Debajo, solo los colores
 * que estaban CLAVADOS (#fff y bordes pastel) y no pasaban por un token.
 *
 * Va ANTES del marcador «Pantallas de acceso» a proposito: el test
 * acceso_diseno recorre de ese marcador al final exigiendo ambitos
 * body.auth/body.cliente-app, y esto es del panel, no del acceso.          */
body.app{
    color-scheme:dark;
    --th-bg:#050606; --th-card:#101213; --th-card-soft:#0b0c0d;
    --th-charcoal:#0a0b0b;
    --th-line:#2a2e30; --th-line-strong:#3a3e40;
    --th-text:#f3f3f5; --th-text-soft:#c7c9cd; --th-muted:#8f9196;
    --th-red-soft:rgba(255,16,43,.1);
    --ok:#31c43d; --ok-soft:rgba(49,196,61,.1);
    --amber:#f4ad00; --amber-soft:rgba(244,173,0,.09);
    --blue:#6ab0e3; --blue-soft:rgba(34,113,177,.16);
    --danger:#ff5a63; --danger-soft:rgba(214,54,56,.14);
    --sh:0 1px 2px rgba(0,0,0,.45),0 1px 3px rgba(0,0,0,.55);
}
/* La marca, con la letra manuscrita de la maqueta. */
body.app .brand-mark{
    font-family:"Segoe Script","Brush Script MT",cursive;letter-spacing:-1px;
}
/* Los #fff clavados. El qrbox NO se toca: un QR sobre fondo oscuro pierde
 * contraste y hay lectores que no lo escanean. */
body.app .topbar{background:#0a0b0b}
body.app input,body.app select,body.app textarea{
    background:#0d0f10;color:var(--th-text);border-color:var(--th-line-strong);
}
/* Media docena de plantillas escriben <a class="btn-primary"> SIN .btn, y esa
 * clase sola no trae caja: salian con padding 0 y, dentro de una tabla, se
 * apilaban y reventaban la fila (cuentas y crear-cuenta). Se les da la caja
 * AQUI, acotado a body.app, y no ensanchando la regla global .btn -- que es
 * justo lo que acceso_diseno vigila para que un rediseno no se derrame. */
body.app .btn-primary,body.app .btn-danger{
    display:inline-block;padding:10px 16px;border-radius:var(--r-sm);
    border:1px solid transparent;font-weight:600;cursor:pointer;
}
body.app .btn-primary{color:#fff}
body.app .creds code{background:#0d0f10}
body.app .fm-btn{background:#141617;color:var(--th-text)}
body.app .fm-list-wrap{background:var(--th-card)}
body.app .fm-list-wrap th{background:var(--th-card)}
body.app .decoy-hero{background:linear-gradient(180deg,#151020,#101213)}
/* Bordes pastel de avisos, a su equivalente oscuro. */
body.app .alert.error{border-color:#7a1420}
body.app .alert.info{border-color:#1c4a6e}
body.app .notice.warn{border-color:#7a5a12}
body.app .action-card.is-danger{border-color:#7a1420}

/* ── el armazon de la maqueta: barra superior + barra de categorias ─────── *
 * La barra lateral se fue: los accesos fijos viven en la barra superior y
 * los grupos son CATEGORIAS desplegables (details/summary, sin JavaScript). */
body.app{display:block}
body.app .content{display:block}
body.app .topbar{
    display:flex;align-items:center;gap:34px;min-height:66px;
    padding:0 28px;background:#050606;border-bottom:1px solid #17191b;
}
body.app .topbar .brand{flex-direction:row;align-items:baseline;gap:10px;padding:0}
body.app .brand-mark{color:var(--th-red);font-size:1.6rem}
body.app .brand-ver{color:var(--th-muted);font-size:.7rem}
body.app .brand-logo{max-height:40px;width:auto}
body.app .primary-nav{display:flex;gap:8px;min-width:0;overflow-x:auto}
body.app .nav-button{
    position:relative;display:inline-flex;align-items:center;gap:9px;
    min-height:44px;padding:0 16px;border:0;border-radius:0;background:none;
    color:#c7c9cd;font:inherit;font-weight:650;white-space:nowrap;
    text-decoration:none;cursor:pointer;
}
body.app .nav-button:hover{color:#fff}
body.app .nav-button.is-active{color:#fff}
body.app .nav-button.is-active::after{
    content:"";position:absolute;inset:auto 12px 4px 12px;height:3px;
    border-radius:2px;background:var(--th-red);
}
body.app .topbar .user{margin-left:auto;color:#c7c9cd;cursor:default}
body.app .sectionbar{background:#0b0c0d;border-bottom:1px solid #1c1f21}
/* SIN overflow aqui. Un contenedor con overflow RECORTA lo posicionado en
 * absoluto dentro de el, y eso dejaba los menus de categoria a medio pintar
 * y sus enlaces fuera de alcance: la barra parecia muerta. Con flex-wrap las
 * categorias bajan de linea en pantallas estrechas y el menu sigue saliendo. */
body.app .section-nav{display:flex;align-items:stretch;flex-wrap:wrap;padding:0 16px}
body.app .cat{position:relative}
body.app .cat>summary{list-style:none;min-height:56px;text-transform:uppercase;
    letter-spacing:.08em;font-size:.82rem}
body.app .cat>summary::-webkit-details-marker{display:none}
body.app .cat[open]>summary{color:#fff}
body.app .cat-menu{
    position:absolute;top:100%;left:0;z-index:40;min-width:240px;
    padding:8px;background:#101213;border:1px solid #2a2e30;border-radius:0 0 12px 12px;
    box-shadow:0 18px 40px rgba(0,0,0,.55);
}
body.app .cat-item{
    display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:8px;
    color:#c7c9cd;font-weight:600;font-size:.9rem;text-decoration:none;
}
body.app .cat-item:hover{background:rgba(255,255,255,.05);color:#fff}
body.app .cat-item.is-active{background:var(--th-red);color:#fff}
body.app .section-nav .logout-form{margin-left:auto;display:flex}
body.app .nav-button.logout{color:#9aa1ab}
body.app .nav-button.logout:hover{color:#fff}
body.app .pagehead{max-width:1240px;margin:0 auto;padding:26px 28px 0;width:100%}
body.app .pagehead h1{font-size:1.35rem;letter-spacing:-.3px}
body.app .page{max-width:1240px;margin:0 auto;width:100%}
body.app .foot{max-width:1240px;margin:0 auto;width:100%;border-top:0}
@media (max-width:760px){
    body.app .topbar{flex-wrap:wrap;gap:8px;padding:10px 14px}
    body.app .topbar .brand{width:100%}
    body.app .topbar .user{margin-left:0}
    body.app .pagehead,body.app .page{padding-left:16px;padding-right:16px}
}

/* ── el dashboard de la maqueta: Servidor, UPTIME, Recursos, Servicios ──── */
body.app .panel{
    border:1px solid var(--th-line);border-radius:12px;
    background:linear-gradient(118deg,rgba(255,255,255,.016),transparent 42%),
               linear-gradient(180deg,#101213,#0a0b0c);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.012);
}
body.app .panel-title{margin:0;font-size:20px;line-height:1;font-weight:720;letter-spacing:-.02em}
body.app .overview{display:grid;grid-template-columns:1.66fr 1fr;gap:clamp(14px,1.6vw,24px);margin-bottom:clamp(14px,1.6vw,24px)}
body.app .server-panel{padding:13px 20px 14px}
body.app .server-content{
    display:grid;grid-template-columns:112px minmax(0,1fr);gap:24px;
    align-items:center;min-height:0;
}
body.app .server-icon{width:94px;height:94px;justify-self:center;color:#aeb3bc;
    fill:none;stroke:currentColor;stroke-width:3}
body.app .server-icon .pf{fill:currentColor;stroke:none}
body.app .server-label,body.app .spec-label{color:var(--th-muted);font-size:14px;font-weight:500}
body.app .host-name{margin-top:2px;font-size:clamp(24px,2.15vw,34px);font-weight:760;letter-spacing:.035em;white-space:nowrap}
body.app .server-rule{height:1px;margin:5px 0 9px;background:#373c44}
body.app .server-specs{display:grid;grid-template-columns:1.12fr 1.05fr .78fr}
body.app .server-spec{min-width:0;padding:0 20px;border-left:1px solid #363b43}
body.app .server-spec:first-child{padding-left:0;border-left:0}
body.app .spec-value{margin-top:1px;color:#b8bdc7;font-size:15px;white-space:nowrap}
/* ── Wazuh: el asomo en vivo del dashboard y la tabla de su pagina ─────── */
body.app .wz-vivo{margin-top:16px;padding-top:14px;border-top:1px solid var(--th-line)}
body.app .wz-vivo-cab{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
body.app .wz-vivo-tit{color:var(--th-muted);font-size:14px;font-weight:600}
body.app .wz-vivo-mas{color:var(--th-red);font-size:14px;text-decoration:none}
body.app .wz-lista{margin:0;padding:0;list-style:none;display:grid;gap:4px}
body.app .wz-item{
    display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;
    gap:12px;padding:5px 0;font-size:14px;
}
body.app .wz-desc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.app .wz-hora{color:var(--th-muted);font-size:13px;white-space:nowrap;
    font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
body.app .wz-nivel{
    display:inline-grid;place-items:center;min-width:30px;padding:2px 6px;
    border-radius:6px;font-size:12px;font-weight:700;
    color:#d8dbe0;background:#2a2e30;
}
body.app .wz-nivel.nmedio{color:#ffdd9e;background:rgba(244,173,0,.16)}
body.app .wz-nivel.nalto{color:#fff0f1;background:linear-gradient(180deg,#c22733,#8f1721)}
body.app .wz-filtros{display:flex;gap:8px;flex-wrap:wrap}
body.app .nowrap{white-space:nowrap}

/* ── nucleos en vivo ────────────────────────────────────────────────────── */
body.app .cores-panel{padding:12px 18px 14px}
body.app .cores-cab{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
body.app .cores-tit{color:var(--th-muted);font-size:14px;font-weight:600}
body.app .cores-media{
    font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
    font-size:15px;font-weight:700;
}
body.app .cores-barras{display:flex;align-items:flex-end;gap:8px;height:74px}
body.app .core{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1;min-width:0;height:100%}
body.app .core-tubo{
    position:relative;width:100%;max-width:26px;flex:1;
    background:#1c1f21;border-radius:5px;overflow:hidden;
}
body.app .core-relleno{
    position:absolute;inset:auto 0 0 0;background:#31c43d;border-radius:5px;
    transition:height .45s ease,background-color .45s ease;
}
body.app .core-num{color:var(--th-muted);font-size:11px;line-height:1}

/* ── aviso de soporte ───────────────────────────────────────────────────── */
body.app .aviso-soporte{
    display:flex;align-items:center;gap:12px;padding:12px 18px;
    border-color:#7a5a12;background:rgba(244,173,0,.07);
    color:var(--th-text);text-decoration:none;
}
body.app .aviso-soporte:hover{background:rgba(244,173,0,.12)}
body.app .aviso-icono{color:#f4ad00;font-size:20px;line-height:1}
body.app .aviso-txt{min-width:0;font-size:15px}
body.app .aviso-mas{margin-left:auto;color:#f4ad00;font-weight:700;font-size:14px}
body.app .ticket-cuerpo{margin-top:6px;color:var(--th-text-soft);font-size:.9rem;white-space:pre-wrap}
body.app .ticket-hecho{opacity:.6}

/* La columna derecha del resumen: uptime arriba, datos de guardia abajo. */
body.app .side-stack{display:grid;grid-template-rows:auto;gap:clamp(12px,1.2vw,18px);min-width:0;align-content:start}
body.app .side-panel{padding:14px 20px}
body.app .side-row{
    display:flex;align-items:baseline;justify-content:space-between;gap:16px;
    padding:7px 0;border-top:1px solid var(--th-line);
}
body.app .side-row:first-child{border-top:0}
body.app .side-label{color:var(--th-muted);font-size:14px}
body.app .side-value{font-size:16px;font-weight:700;white-space:nowrap}
body.app .side-value.is-ok{color:#31c43d}
body.app .side-value.is-warn{color:#f4ad00}
body.app .uptime-panel{
    position:relative;display:flex;flex-direction:column;justify-content:center;
    padding:20px 34px;overflow:hidden;
}
body.app .uptime-panel::before{
    content:"";position:absolute;inset:0 auto 0 0;width:15px;
    background:#f20d2f;border-radius:7px 0 0 7px;
}
body.app .uptime-label{
    color:#f20d2f;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
    font-size:16px;font-weight:700;letter-spacing:-.03em;
}
body.app .uptime-value{
    margin-top:10px;padding-left:12px;color:#f20d2f;
    font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
    font-size:clamp(32px,3vw,42px);font-weight:650;line-height:1;
    letter-spacing:-.055em;white-space:nowrap;text-shadow:0 0 22px rgba(242,13,47,.08);
}
/* Mas de 24h en pie: la franja y los digitos pasan a verde. */
body.app .uptime-panel.is-ok::before{background:#31c43d}
body.app .uptime-panel.is-ok .uptime-label,
body.app .uptime-panel.is-ok .uptime-value{
    color:#31c43d;text-shadow:0 0 22px rgba(49,196,61,.1);
}
body.app .resources-panel,body.app .services-panel{
    padding:11px 16px 12px;margin-bottom:clamp(14px,1.6vw,24px);
}
body.app .resource-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:clamp(12px,1.5vw,22px);margin-top:8px;
}
body.app .resource-card{
    min-width:0;padding:9px 14px 8px;border:1px solid var(--th-line);border-radius:12px;
    background:linear-gradient(145deg,rgba(255,255,255,.012),rgba(0,0,0,.08));
}
body.app .resource-name{margin:0;font-size:13px;font-weight:750;letter-spacing:.02em}
body.app .resource-values{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:2px}
body.app .resource-main{font-size:29px;font-weight:720;line-height:1;letter-spacing:.025em}
body.app .resource-detail{color:var(--th-muted);font-size:14px;white-space:nowrap}
/* Acotado a .resource-card: system.php y shield.php usan .meter CONTINUO
 * (un span con width en linea) y un override suelto los dejaria en 40
 * columnas vacias. */
body.app .resource-card .meter{
    display:grid;grid-template-columns:repeat(40,minmax(2px,1fr));gap:4px;
    height:14px;margin-top:6px;overflow:hidden;background:none;border-radius:0;
}
body.app .resource-card .meter span{height:100%;width:auto;background:#383d45;border-radius:0;display:block}
body.app .resource-card .meter span.on{background:var(--th-red)}
body.app .meter-scale{display:flex;justify-content:space-between;margin-top:3px;color:var(--th-muted);font-size:12px}
body.app .service-grid{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px clamp(12px,1.45vw,22px);margin-top:8px;
}
body.app .service-row{
    display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;
    min-width:0;height:38px;padding:0 11px;border:1px solid var(--th-line);
    border-radius:12px;background:rgba(255,255,255,.008);
}
body.app .service-icon{width:27px;height:27px;color:#c1c5cd;
    fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body.app .service-name{overflow:hidden;font-size:15px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
body.app .vig-det{margin-left:8px;color:var(--th-muted);font-size:13px;font-style:normal;font-weight:500}
body.app .status{
    min-width:72px;padding:3px 10px 4px;border-radius:12px;color:#d8dbe0;
    background:linear-gradient(180deg,#3c3f44,#292c31);
    font-size:12px;font-weight:650;line-height:1;text-align:center;white-space:nowrap;
}
body.app .status.active{color:#f4fff5;background:linear-gradient(180deg,#35ae42,#208a2b)}
body.app .status.down{color:#fff0f1;background:linear-gradient(180deg,#c22733,#8f1721)}
@media (max-width:900px){
    body.app .overview{grid-template-columns:1fr}
    body.app .resource-grid,body.app .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
    body.app .server-content{grid-template-columns:1fr}
    body.app .server-icon{display:none}
    body.app .host-name{white-space:normal}
    body.app .server-specs{grid-template-columns:1fr;gap:8px}
    body.app .server-spec{padding:0;border-left:0}
    body.app .resource-grid,body.app .service-grid{grid-template-columns:1fr}
}

/* ── PARCHE: gestor de archivos del cliente (th-filemanager) ────────────── *
 * Portado de filemanager.patch.css (2026-08-08). Todo cuelga de
 * .th-filemanager, asi que no puede derramarse sobre el resto del panel.
 * Se omiten las reglas de paginacion, seleccion y orden: esos controles no
 * se pintaron porque detras no hay nada que los cumpla. */
/*
 * PARCHE VISUAL: File manager de /clientes
 * Encapsulado completamente bajo .th-filemanager.
 * No redefine body, :root ni clases existentes del panel.
 */
.th-filemanager {
  --th-fm-red: var(--th-red, #ff1429);
  --th-fm-bg: #071014;
  --th-fm-panel: #0a1317;
  --th-fm-panel-soft: #0e191e;
  --th-fm-line: #2c383e;
  --th-fm-line-soft: #263238;
  --th-fm-text: #f2f4f5;
  --th-fm-muted: #aeb5ba;
  --th-fm-blue: #36aef7;
  --th-fm-green: #66cf55;
  --th-fm-yellow: #ffc400;
  width: 100%;
  color: var(--th-fm-text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
}

.th-filemanager *,
.th-filemanager *::before,
.th-filemanager *::after { box-sizing: border-box; }

.th-filemanager button,
.th-filemanager input { font: inherit; }

.th-filemanager button,
.th-filemanager a { -webkit-tap-highlight-color: transparent; }

.th-filemanager a { color: inherit; text-decoration: none; }

.th-filemanager svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.th-fm-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.th-fm-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 24px;
}

.th-fm-heading-copy { min-width: 0; }

.th-fm-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  color: #bfc5c9;
  font-size: 13px;
}

.th-fm-back:hover { color: #fff; }
.th-fm-back svg { width: 15px; height: 15px; }

.th-fm-heading h1 {
  margin: 0;
  color: #f5f6f7;
  font-size: 30px;
  font-weight: 750;
  line-height: 1.08;
  letter-spacing: -.45px;
}

.th-fm-heading p {
  margin: 7px 0 0;
  color: var(--th-fm-muted);
  font-size: 14px;
}

.th-fm-actions {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 2px;
}

.th-fm-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 18px;
  color: #f0f2f3;
  background: rgba(8, 14, 17, .86);
  border: 1px solid #4a565c;
  border-radius: 6px;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.th-fm-button:hover { border-color: #737e84; background: #111c21; }
.th-fm-button:active { transform: translateY(1px); }
.th-fm-button svg { width: 21px; height: 21px; }

.th-fm-button-primary {
  color: #fff;
  background: linear-gradient(180deg, #ff1d35, #f71329);
  border-color: var(--th-fm-red);
  box-shadow: 0 7px 20px rgba(255, 20, 41, .1);
}

.th-fm-button-primary:hover { background: linear-gradient(180deg, #ff3045, #ff142b); border-color: #ff4254; }

.th-fm-protection {
  display: flex;
  min-height: 87px;
  align-items: center;
  gap: 20px;
  margin-bottom: 13px;
  padding: 16px 19px;
  background: linear-gradient(90deg, rgba(17, 31, 38, .92), rgba(10, 20, 25, .88));
  border: 1px solid var(--th-fm-line);
  border-radius: 7px;
}

.th-fm-protection-icon {
  display: grid;
  width: 47px;
  height: 47px;
  flex: 0 0 47px;
  place-items: center;
  color: var(--th-fm-blue);
  border: 1.5px solid var(--th-fm-blue);
  border-radius: 50%;
}

.th-fm-protection-icon svg { width: 28px; height: 28px; }

.th-fm-protection strong {
  display: block;
  margin-bottom: 6px;
  font-size: 17px;
  line-height: 1.2;
}

.th-fm-protection p { margin: 0; color: #c2c8cc; }

.th-fm-panel {
  overflow: hidden;
  background: linear-gradient(135deg, rgba(12, 23, 28, .96), rgba(7, 15, 18, .96));
  border: 1px solid var(--th-fm-line);
  border-radius: 7px;
}

.th-fm-toolbar {
  display: flex;
  min-height: 61px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 17px 0 0;
  border-bottom: 1px solid var(--th-fm-line);
}

.th-fm-path {
  display: flex;
  height: 49px;
  align-items: center;
  gap: 15px;
  padding-right: 16px;
}

.th-fm-home {
  display: grid;
  width: 52px;
  height: 49px;
  place-items: center;
  color: #d7dbde;
  border-right: 1px solid var(--th-fm-line);
}

.th-fm-home svg { width: 21px; height: 21px; }
.th-fm-path strong { font-size: 17px; }

.th-fm-toolbar-controls {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 13px;
}

.th-fm-search {
  position: relative;
  display: block;
  width: 240px;
}

.th-fm-search > svg {
  position: absolute;
  top: 50%;
  left: 15px;
  width: 20px;
  height: 20px;
  color: #c7ccd0;
  transform: translateY(-50%);
  pointer-events: none;
}

.th-fm-search input {
  width: 100%;
  height: 40px;
  padding: 0 13px 0 47px;
  color: #eef0f1;
  background: #091115;
  border: 1px solid #344249;
  border-radius: 5px;
  outline: 0;
}

.th-fm-search input::placeholder { color: #a7afb4; opacity: 1; }
.th-fm-search input:focus { border-color: #68767d; box-shadow: 0 0 0 2px rgba(104,118,125,.12); }

/* HUERFANO · declaraciones sin selector (2026-08-10).
   Rompian el analizador de CSS y hacian que se descartara TODO lo de abajo,
   incluida la seccion de acceso: por eso la pantalla de entrar salia blanca
   cuando su diseno es oscuro. No estilaban nada -- unas declaraciones sin
   selector no se aplican a ningun elemento -- y la seccion th-fm-* entera
   esta muerta: 32 clases definidas, 0 usadas por el gestor de ficheros.
   Se comentan en vez de borrarlas por si algun dia vuelve ese diseno. */
/*
  display: inline-flex;
  height: 40px;
  align-items: center;
  justify-content: center;
  gap: 11px;
  color: #ebedef;
  background: #091115;
  border: 1px solid #344249;
  border-radius: 5px;
  cursor: pointer;
}
*/

.th-fm-chevron { width: 15px !important; height: 15px !important; margin-left: auto; color: #8f989d; }
.th-fm-total { min-width: 120px; color: #afb6ba; text-align: right; white-space: nowrap; }

.th-fm-table-scroll { overflow-x: auto; }

.th-fm-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  table-layout: fixed;
}

.th-fm-table th,
.th-fm-table td {
  height: 43px;
  padding: 0 13px;
  border-bottom: 1px solid var(--th-fm-line-soft);
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.th-fm-table th {
  height: 42px;
  color: #eef0f1;
  background: rgba(18, 32, 38, .78);
  font-weight: 500;
}

.th-fm-table tbody tr { transition: background .14s ease; }
.th-fm-table tbody tr:hover { background: rgba(255,255,255,.025); }
.th-fm-table tbody tr:last-child td { border-bottom: 0; }

.th-fm-table th:nth-child(1),
.th-fm-table td:nth-child(1) { width: 57px; }
.th-fm-table th:nth-child(2),
.th-fm-table td:nth-child(2) { width: 36%; }
.th-fm-table th:nth-child(3),
.th-fm-table td:nth-child(3) { width: 15%; }
.th-fm-table th:nth-child(4),
.th-fm-table td:nth-child(4) { width: 20%; }
.th-fm-table th:nth-child(5),
.th-fm-table td:nth-child(5) { width: 19%; }
.th-fm-table th:nth-child(6),
.th-fm-table td:nth-child(6) { width: 55px; }

.th-fm-table td { color: #c7cdd1; }

.th-fm-table input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  background: #0a1317;
  border: 1px solid #879198;
  border-radius: 3px;
  vertical-align: middle;
  cursor: pointer;
}

.th-fm-table input[type="checkbox"]:checked {
  background: var(--th-fm-red);
  border-color: var(--th-fm-red);
  box-shadow: inset 0 0 0 3px #0a1317;
}

/* HUERFANO · declaraciones sin selector (2026-08-10).
   Rompian el analizador de CSS y hacian que se descartara TODO lo de abajo,
   incluida la seccion de acceso: por eso la pantalla de entrar salia blanca
   cuando su diseno es oscuro. No estilaban nada -- unas declaraciones sin
   selector no se aplican a ningun elemento -- y la seccion th-fm-* entera
   esta muerta: 32 clases definidas, 0 usadas por el gestor de ficheros.
   Se comentan en vez de borrarlas por si algun dia vuelve ese diseno. */
/*
  display: inline-grid;
  width: 15px;
  height: 15px;
  margin-left: 5px;
  place-items: center;
  color: #647078;
  border: 1px solid #3c484e;
  border-radius: 2px;
  font-size: 10px;
}
*/

.th-fm-file-name {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 15px;
  color: #eff1f2;
}

.th-fm-file-name strong {
  overflow: hidden;
  font-weight: 650;
  text-overflow: ellipsis;
}

.th-fm-file-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: #bac2c7;
}

.th-fm-folder { color: #41aef1; }
.th-fm-folder svg { fill: currentColor; stroke: currentColor; }

.th-fm-access {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #ecedef;
}

.th-fm-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--th-fm-green);
  box-shadow: 0 0 10px rgba(102,207,85,.15);
}

.th-fm-lock {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 17px;
  color: var(--th-fm-yellow);
  overflow: hidden;
  font-size: 0;
}

.th-fm-lock::before {
  content: "";
  position: absolute;
  right: 1px;
  bottom: 1px;
  left: 1px;
  height: 9px;
  background: var(--th-fm-yellow);
  border-radius: 2px;
}

.th-fm-lock::after {
  content: "";
  position: absolute;
  top: 0;
  left: 4px;
  width: 7px;
  height: 9px;
  border: 2px solid var(--th-fm-yellow);
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
}

.th-fm-menu-cell { color: #9ea7ac; text-align: center !important; }

.th-fm-row-menu {
  width: 28px;
  height: 28px;
  padding: 0;
  color: #e7e9ea;
  background: transparent;
  border: 0;
  border-radius: 4px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.th-fm-row-menu:hover { background: rgba(255,255,255,.06); }

/* HUERFANO · declaraciones sin selector (2026-08-10).
   Rompian el analizador de CSS y hacian que se descartara TODO lo de abajo,
   incluida la seccion de acceso: por eso la pantalla de entrar salia blanca
   cuando su diseno es oscuro. No estilaban nada -- unas declaraciones sin
   selector no se aplican a ningun elemento -- y la seccion th-fm-* entera
   esta muerta: 32 clases definidas, 0 usadas por el gestor de ficheros.
   Se comentan en vez de borrarlas por si algun dia vuelve ese diseno. */
/*
  display: flex;
  min-height: 47px;
  align-items: center;
  justify-content: space-between;
  padding: 0 13px 0 17px;
  color: #bdc3c7;
  border-top: 1px solid var(--th-fm-line-soft);
}
*/


/* HUERFANO · declaraciones sin selector (2026-08-10).
   Rompian el analizador de CSS y hacian que se descartara TODO lo de abajo,
   incluida la seccion de acceso: por eso la pantalla de entrar salia blanca
   cuando su diseno es oscuro. No estilaban nada -- unas declaraciones sin
   selector no se aplican a ningun elemento -- y la seccion th-fm-* entera
   esta muerta: 32 clases definidas, 0 usadas por el gestor de ficheros.
   Se comentan en vez de borrarlas por si algun dia vuelve ese diseno. */
/*
  display: grid;
  width: 62px;
  height: 32px;
  place-items: center;
  color: #eef0f1;
  background: #0a1216;
  border: 1px solid #536068;
  border-radius: 5px;
  cursor: pointer;
}
*/


@media (max-width: 1180px) {
  .th-fm-heading { align-items: flex-start; }
  .th-fm-actions { gap: 9px; }
  .th-fm-button { min-height: 40px; padding: 0 13px; font-size: 13px; }
  .th-fm-toolbar { gap: 14px; }
  .th-fm-search { width: 190px; }
  .th-fm-total { min-width: 94px; }
}

@media (max-width: 960px) {
  .th-fm-heading { display: block; }
  .th-fm-actions { margin-top: 18px; }
  .th-fm-toolbar { align-items: flex-start; padding: 10px 13px 10px 0; }
  .th-fm-toolbar-controls { flex-wrap: wrap; }
  .th-fm-total { align-self: center; }
}

/* Piezas que el parche no traia porque su maqueta las resolvia con JS: los
 * dos desplegables de «nueva carpeta / nuevo archivo» y el editor. */
.th-filemanager .th-fm-nuevo{position:relative}
.th-filemanager .th-fm-nuevo>summary{list-style:none;cursor:pointer}
.th-filemanager .th-fm-nuevo>summary::-webkit-details-marker{display:none}
.th-filemanager .th-fm-mini{
    position:absolute;top:calc(100% + 8px);right:0;z-index:30;width:min(340px,80vw);
    padding:16px 18px;background:#101213;border:1px solid #2a2e30;border-radius:12px;
    box-shadow:0 18px 40px rgba(0,0,0,.55);
}
.th-filemanager .th-fm-mini label{display:block;margin:0 0 10px;font-size:14px}
.th-filemanager .th-fm-editor{margin-bottom:18px;padding:18px 20px}
.th-filemanager .th-fm-editor h2{margin:0 0 12px;font-size:18px}
.th-filemanager .th-fm-editor textarea{width:100%;max-width:none;margin-bottom:12px}
.th-filemanager .th-fm-subir a{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.th-filemanager .th-fm-fecha{white-space:nowrap}


/* PARCHE: estado del sistema (th-system-status), portado 2026-08-08.
   Acotado a .th-system-status y a los radios de vista. */
/* Parche visual de Estado del sistema. No redefine estilos globales. */
.th-system-status {
  --th-ss-red: var(--th-red, #ff1435);
  --th-ss-bg: #070c0f;
  --th-ss-card: #0b1115;
  --th-ss-card-soft: #0d1519;
  --th-ss-line: #2b3439;
  --th-ss-line-soft: #252e33;
  --th-ss-text: #f3f4f5;
  --th-ss-muted: #aeb5ba;
  --th-ss-green: #3dcc5b;
  --th-ss-yellow: #ffc400;
  width: 100%;
  color: var(--th-ss-text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
}

.th-system-status *, .th-system-status *::before, .th-system-status *::after { box-sizing: border-box; }
.th-system-status button { font: inherit; }
.th-system-status svg { display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; }
.th-ss-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.th-ss-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:19px}
.th-ss-heading h1{margin:0;font-size:25px;line-height:1.1;letter-spacing:-.35px}
.th-ss-heading p{margin:7px 0 0;color:var(--th-ss-muted)}
.th-ss-meta{display:flex;align-items:center;gap:17px;color:#abb2b7;white-space:nowrap}
.th-ss-readonly{display:inline-flex;align-items:center;gap:9px}.th-ss-readonly svg{width:18px;height:18px}.th-ss-divider{width:1px;height:17px;background:var(--th-ss-line)}

.th-ss-hero{display:flex;min-height:122px;align-items:center;justify-content:space-between;gap:28px;margin-bottom:13px;padding:14px 20px;background:linear-gradient(115deg,rgba(14,21,25,.96),rgba(8,14,17,.96));border:1px solid var(--th-ss-line);border-radius:7px}
.th-ss-health-copy{display:flex;align-items:center;gap:24px}.th-ss-check{display:grid;width:56px;height:56px;flex:0 0 56px;place-items:center;color:var(--th-ss-green);border:3px solid var(--th-ss-green);border-radius:50%}.th-ss-check svg{width:38px;height:38px;stroke-width:3}
.th-ss-health-copy strong{display:block;margin-bottom:5px;font-size:21px}.th-ss-health-copy p{margin:0;color:#c3c8cc}
.th-ss-score-wrap{display:flex;align-items:center;gap:30px;min-width:490px;justify-content:center}.th-ss-score{display:grid;width:98px;height:98px;flex:0 0 98px;place-items:center;border-radius:50%;background:conic-gradient(var(--th-ss-green) 0 92%,#263036 92% 100%);position:relative}.th-ss-score::after{content:"";position:absolute;inset:8px;background:#0b1114;border-radius:50%}.th-ss-score-inner{position:relative;z-index:1;text-align:center}.th-ss-score-inner strong{display:block;font-size:18px}.th-ss-score-inner span{display:block;color:#c1c6c9;font-size:11px}.th-ss-score-wrap p{margin:0;color:#d8dbdd}.th-ss-score-wrap p span{margin:0 10px;color:#727c82}

.th-ss-tabs{display:flex;align-items:stretch;gap:19px;min-height:43px;margin-bottom:17px;border-bottom:1px solid var(--th-ss-line)}
.th-ss-tab{position:relative;display:inline-flex;align-items:center;gap:10px;padding:0 13px;color:#e5e7e8;background:transparent;border:0;cursor:pointer}.th-ss-tab::after{content:"";position:absolute;right:0;bottom:-1px;left:0;height:3px;background:transparent}.th-ss-tab.is-active{font-weight:700}.th-ss-tab.is-active::after{background:var(--th-ss-red)}
.th-ss-count{display:inline-grid;min-width:25px;height:20px;padding:0 6px;place-items:center;color:#e8ebed;background:#273137;border-radius:6px;font-size:12px;font-weight:700}.th-ss-count-warn{color:var(--th-ss-yellow);background:#17130a;border:1px solid #9c7600}

.th-ss-layout{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(360px,1fr);gap:20px}.th-ss-card{background:linear-gradient(135deg,rgba(12,19,23,.98),rgba(8,14,17,.98));border:1px solid var(--th-ss-line);border-radius:7px}.th-ss-card-heading{padding:18px 17px 13px}.th-ss-card h2{margin:0;font-size:18px}.th-ss-card-heading p{margin:3px 0 0;color:var(--th-ss-muted);font-size:13px}
.th-ss-table-scroll{overflow-x:auto}.th-ss-table{width:100%;min-width:690px;border-collapse:collapse;table-layout:fixed}.th-ss-table th,.th-ss-table td{height:46px;padding:0 11px;border-bottom:1px solid var(--th-ss-line-soft);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.th-ss-table th{height:38px;color:#d8dcde;font-weight:500}.th-ss-table tbody tr:last-child td{border-bottom:0}.th-ss-table tbody tr:hover{background:rgba(255,255,255,.02)}
.th-ss-table th:nth-child(1),.th-ss-table td:nth-child(1){width:42%}.th-ss-table th:nth-child(2),.th-ss-table td:nth-child(2){width:28%}.th-ss-table th:nth-child(3),.th-ss-table td:nth-child(3){width:25%}.th-ss-table th:nth-child(4),.th-ss-table td:nth-child(4){width:38px}
.th-ss-area{display:inline-flex;max-width:100%;align-items:center;gap:15px}.th-ss-area-icon{width:23px;height:23px;flex:0 0 23px;color:#d2d7da}.th-ss-area strong{overflow:hidden;text-overflow:ellipsis}
.th-ss-checks{display:flex;align-items:center;gap:13px}.th-ss-progress{display:block;width:104px;height:4px;overflow:hidden;background:#2d363b;border-radius:999px}.th-ss-progress i{display:block;width:var(--th-ss-progress);height:100%;background:var(--th-ss-green);border-radius:inherit}.th-ss-progress.is-empty i{background:transparent}
.th-ss-state{display:inline-flex;align-items:center;gap:9px}.th-ss-state i{width:10px;height:10px;border-radius:50%}.th-ss-state.is-ready i{background:var(--th-ss-green);box-shadow:0 0 8px rgba(61,204,91,.18)}.th-ss-state.is-pending i{background:var(--th-ss-yellow)}
.th-ss-detail{width:27px;height:30px;padding:0;color:#e3e6e8;background:transparent;border:0;font-size:24px;cursor:pointer}

.th-ss-side{display:grid;align-content:start;gap:13px}.th-ss-attention{padding:17px 19px 19px}.th-ss-side-title{display:flex;align-items:center;gap:14px;margin-bottom:13px}.th-ss-side-title h2{font-size:17px}.th-ss-attention h3{margin:0 0 10px;padding-left:11px;border-left:2px solid var(--th-ss-yellow);font-size:15px}
.th-ss-attention-list{overflow:hidden;border:1px solid var(--th-ss-line);border-radius:5px}.th-ss-attention-list>div{display:flex;min-height:42px;align-items:center;justify-content:space-between;gap:16px;padding:0 12px;border-top:1px solid var(--th-ss-line-soft)}.th-ss-attention-list>div:first-child{border-top:0}.th-ss-attention-list span{display:inline-flex;align-items:center;gap:13px}.th-ss-attention-list i{width:15px;height:15px;border:2px solid var(--th-ss-yellow);border-radius:50%}.th-ss-attention-list em{color:#c0c6ca;font-style:normal;white-space:nowrap}
.th-ss-notice{display:flex;align-items:center;gap:14px;margin-top:12px;padding:9px 13px;color:#ffd55e;background:rgba(95,64,0,.26);border:1px solid #725600;border-radius:5px}.th-ss-notice>span{display:grid;width:20px;height:20px;flex:0 0 20px;place-items:center;border:1px solid var(--th-ss-yellow);border-radius:50%;font-weight:700}.th-ss-notice p{margin:0}
.th-ss-requirements{min-height:34px;margin-top:12px;padding:0 20px;color:#f1f3f4;background:transparent;border:1px solid #68747a;border-radius:5px;cursor:pointer}.th-ss-requirements:hover{background:rgba(255,255,255,.04)}
.th-ss-about{padding:18px 19px 9px}.th-ss-about h2{margin-bottom:10px;font-size:17px}.th-ss-about dl{margin:0}.th-ss-about dl>div{display:flex;min-height:35px;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid var(--th-ss-line-soft)}.th-ss-about dl>div:first-child{border-top:0}.th-ss-about dt{color:#b9c0c4}.th-ss-about dd{margin:0;color:#f0f2f3;text-align:right}

@media(max-width:1120px){.th-ss-score-wrap{min-width:390px;gap:18px}.th-ss-layout{grid-template-columns:minmax(0,1.5fr) minmax(330px,1fr)}.th-ss-checks{gap:8px}.th-ss-progress{width:78px}.th-ss-table th:nth-child(1),.th-ss-table td:nth-child(1){width:40%}}
@media(max-width:930px){.th-ss-heading{align-items:flex-start}.th-ss-hero{align-items:flex-start}.th-ss-score-wrap{min-width:auto}.th-ss-layout{grid-template-columns:1fr}.th-ss-side{grid-template-columns:1fr 1fr}.th-ss-attention{min-width:0}.th-ss-about{min-width:0}}

/* Pestanas y anillo, que el parche resolvia con JS o con valores fijos. */
.th-ss-radio{position:absolute;opacity:0;pointer-events:none}
.th-ss-tab{cursor:pointer;user-select:none}
.th-ss-vista{display:none}
#th-ss-v1:checked~.th-ss-tabs label[for="th-ss-v1"],
#th-ss-v2:checked~.th-ss-tabs label[for="th-ss-v2"],
#th-ss-v3:checked~.th-ss-tabs label[for="th-ss-v3"]{color:#fff;border-color:#e51f36;background:rgba(229,31,54,.1)}
#th-ss-v1:checked~.th-ss-vista-1,
#th-ss-v2:checked~.th-ss-vista-2,
#th-ss-v3:checked~.th-ss-vista-3{display:block}
.th-system-status .th-ss-score{background:conic-gradient(#e51f36 calc(var(--th-ss-pct,0)*1%),#2a2e30 0)}
.th-system-status .th-ss-check.is-bad{color:#ff5a63;border-color:#7a1420}
.th-system-status .grp-ico{margin-right:8px}

/* PARCHE: detalle de cuenta (th-account-detail), portado 2026-08-08.
   Acotado a .th-account-detail: el resto del operador no se entera. */
/* Parche visual del detalle de cuenta. No redefine body, :root ni clases globales. */
.th-account-detail{--th-ad-red:var(--th-red,#ff1436);--th-ad-card:#0b1115;--th-ad-line:#2b3439;--th-ad-line-soft:#252e33;--th-ad-text:#f3f4f5;--th-ad-muted:#abb3b8;--th-ad-green:#3dcc65;--th-ad-yellow:#ffc400;--th-ad-blue:#4ba7ff;width:100%;color:var(--th-ad-text);font:14px/1.4 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
.th-account-detail *,.th-account-detail *::before,.th-account-detail *::after{box-sizing:border-box}.th-account-detail button{font:inherit}.th-account-detail a{color:inherit;text-decoration:none}.th-account-detail svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.th-ad-breadcrumb{display:flex;align-items:center;gap:12px;margin-bottom:18px;color:#b7bec2}.th-ad-breadcrumb a{color:#55b6ff}.th-ad-breadcrumb span:nth-child(2){color:#667177}
.th-ad-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;margin-bottom:27px}.th-ad-heading h1{margin:0;font-size:28px;line-height:1.08;letter-spacing:-.45px}.th-ad-product{margin:8px 0 10px}.th-ad-release{display:flex;align-items:center;gap:9px;margin:0;color:#bac1c5}.th-ad-release i{width:13px;height:13px;background:#899198;border-radius:50%}.th-ad-heading-actions{display:flex;gap:9px}
.th-ad-button,.th-ad-icon-button{display:inline-flex;min-height:37px;align-items:center;justify-content:center;padding:0 14px;color:#f2f3f4;background:transparent;border:1px solid #667177;border-radius:5px;cursor:pointer}.th-ad-button:hover,.th-ad-icon-button:hover{background:rgba(255,255,255,.04)}.th-ad-icon-button{width:38px;padding:0;font-size:23px}.th-ad-button-accent{color:var(--th-ad-red);border-color:var(--th-ad-red);padding-inline:20px}
.th-ad-tabs{display:flex;gap:31px;min-height:41px;border-bottom:1px solid var(--th-ad-line)}.th-ad-tab{position:relative;padding:0;color:#dce0e2;background:transparent;border:0;cursor:pointer}.th-ad-tab::after{content:"";position:absolute;right:0;bottom:-1px;left:0;height:3px;background:transparent}.th-ad-tab.is-active{font-weight:700}.th-ad-tab.is-active::after{background:var(--th-ad-red)}
.th-ad-status-strip{display:grid;grid-template-columns:repeat(4,1fr);min-height:74px;align-items:center;margin:12px 0 10px;background:linear-gradient(125deg,rgba(13,20,24,.98),rgba(8,14,17,.98));border:1px solid var(--th-ad-line);border-radius:7px}.th-ad-status-item{display:flex;align-items:center;justify-content:center;gap:18px;min-height:48px;border-left:1px solid var(--th-ad-line)}.th-ad-status-item:first-child{border-left:0}.th-ad-status-icon{width:36px;height:36px;color:#c9d0d4}.th-ad-status-icon.is-yellow{color:var(--th-ad-yellow)}.th-ad-status-item>div>span{display:block;color:#d9dddf}.th-ad-status-item strong{display:flex;align-items:center;gap:8px;margin-top:3px;font-weight:500}.th-ad-status-item strong i{width:11px;height:11px;border-radius:50%}.th-ad-status-item .is-pending i{background:var(--th-ad-yellow)}.th-ad-status-item .is-active i{background:var(--th-ad-green)}.th-ad-status-item .is-neutral i{background:#8b949a}
.th-ad-layout{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(360px,1fr);gap:20px}.th-ad-main-column,.th-ad-side-column{display:grid;align-content:start;gap:10px}.th-ad-card{background:linear-gradient(135deg,rgba(12,19,23,.98),rgba(8,14,17,.98));border:1px solid var(--th-ad-line);border-radius:7px}.th-ad-card h2{margin:0;font-size:16px}
.th-ad-pending{padding:18px 18px 0}.th-ad-pending>h2{padding-bottom:12px;border-bottom:1px solid var(--th-ad-line-soft)}.th-ad-action-row{display:grid;grid-template-columns:58px minmax(0,1fr) auto;min-height:82px;align-items:center;gap:18px;border-top:1px solid var(--th-ad-line-soft)}.th-ad-action-row:nth-of-type(1){border-top:0}.th-ad-action-icon{display:grid;width:48px;height:48px;place-items:center;color:#bcc4c8;border:1px solid #374248;border-radius:10px}.th-ad-action-icon svg{width:32px;height:32px}.th-ad-action-icon.is-yellow{color:var(--th-ad-yellow);background:rgba(103,69,0,.16);border-color:#725500}.th-ad-action-copy strong{display:block;margin-bottom:6px}.th-ad-action-copy p{margin:0;color:var(--th-ad-muted)}
.th-ad-activity{min-height:302px;padding:18px}.th-ad-activity h2{margin-bottom:13px}.th-ad-activity table{width:100%;border-collapse:collapse;table-layout:fixed}.th-ad-activity th,.th-ad-activity td{height:36px;padding:0;border-bottom:1px solid var(--th-ad-line-soft);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.th-ad-activity th{height:32px;color:#cbd1d4;font-weight:500}.th-ad-activity tbody tr:last-child td{border-bottom:0}.th-ad-activity th:nth-child(1),.th-ad-activity td:nth-child(1){width:37%}.th-ad-activity th:nth-child(2),.th-ad-activity td:nth-child(2){width:41%}.th-ad-operation{display:inline-flex;align-items:center;gap:9px}.th-ad-operation i{width:10px;height:10px;border-radius:50%}.th-ad-operation.is-complete i{background:var(--th-ad-green)}.th-ad-operation.is-process i{background:var(--th-ad-yellow)}.th-ad-activity-link{display:flex;justify-content:flex-end;gap:10px;margin-top:28px;color:#55b6ff}
.th-ad-resources{padding:16px 14px 13px}.th-ad-resources h2{margin-bottom:15px}.th-ad-resource-grid{display:grid;grid-template-columns:repeat(3,1fr)}.th-ad-resource-grid>div{padding:0 15px;border-left:1px solid var(--th-ad-line)}.th-ad-resource-grid>div:first-child{padding-left:0;border-left:0}.th-ad-resource-grid strong,.th-ad-resource-grid span{display:block}.th-ad-resource-grid strong{font-size:16px}.th-ad-resource-grid span{margin:3px 0 8px}.th-ad-resource-grid i{display:block;height:6px;overflow:hidden;background:#3a454c;border-radius:999px}.th-ad-resource-grid b{display:block;width:var(--th-ad-resource);height:100%;background:linear-gradient(90deg,#4da8ff,#489cf0);border-radius:inherit}.th-ad-resource-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:17px}
.th-ad-info{padding:15px 14px 8px}.th-ad-info h2{margin-bottom:9px}.th-ad-info dl{margin:0}.th-ad-info dl>div{display:flex;min-height:29px;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--th-ad-line-soft)}.th-ad-info dl>div:first-child{border-top:0}.th-ad-info dt{color:#bbc2c6}.th-ad-info dd{display:flex;align-items:center;gap:9px;margin:0;text-align:right}.th-ad-info code{color:#f2f3f4;background:transparent;font:13px ui-monospace,SFMono-Regular,Consolas,monospace}.th-ad-info dd button{width:22px;height:22px;padding:3px;color:#cdd2d5;background:transparent;border:0;cursor:pointer}
.th-ad-client{padding:14px}.th-ad-client-heading{display:flex;align-items:center;justify-content:space-between}.th-ad-client-heading span{padding:4px 9px;color:#68db78;background:#103f1b;border-radius:999px;font-size:12px;font-weight:650}.th-ad-client-profile{display:flex;align-items:center;gap:12px;margin-top:13px}.th-ad-client-icon{display:grid;width:45px;height:45px;flex:0 0 45px;place-items:center;color:#c5ccd0;border:1px solid #47535a;border-radius:50%}.th-ad-client-icon svg{width:31px;height:31px}.th-ad-client-profile strong{display:block}.th-ad-client-profile p{margin:4px 0 0;color:#b8c0c4}.th-ad-no-messages{margin:14px 0 0;color:#b9c1c5}
@media(max-width:1050px){.th-ad-layout{grid-template-columns:minmax(0,1.4fr) minmax(330px,1fr)}.th-ad-status-item{gap:10px}.th-ad-status-icon{width:30px;height:30px}.th-ad-action-row{grid-template-columns:50px minmax(0,1fr) auto;gap:12px}.th-ad-action-icon{width:43px;height:43px}.th-ad-resource-grid>div{padding-inline:10px}}
@media(max-width:900px){.th-ad-layout{grid-template-columns:1fr}.th-ad-side-column{grid-template-columns:1fr 1fr}.th-ad-client{grid-column:1/-1}.th-ad-status-strip{grid-template-columns:repeat(2,1fr)}.th-ad-status-item:nth-child(3){border-left:0;border-top:1px solid var(--th-ad-line)}.th-ad-status-item:nth-child(4){border-top:1px solid var(--th-ad-line)}}

/* Las doce secciones existentes heredan el aspecto del parche sin que haya
   que reescribir su marcado (ni sus CSRF). */
.th-account-detail .card{
    padding:20px 22px;border:1px solid var(--th-line);border-radius:14px;
    background:linear-gradient(118deg,rgba(255,255,255,.016),transparent 42%),
               linear-gradient(180deg,#101213,#0a0b0c);
    margin-bottom:16px;
}
.th-account-detail .card h2{margin:0 0 12px;font-size:19px;font-weight:720}
/* Cada columna apila sus tarjetas con aire y sin estirarlas. */
.th-account-detail .th-ad-main-column,
.th-account-detail .th-ad-side-column{
    display:flex;flex-direction:column;gap:16px;min-width:0;align-self:start;
}
.th-account-detail .card{margin-bottom:0}
/* Pestanas con radios: sin JavaScript, como en Estado. Los formularios de una
 * pestana oculta siguen EN el documento con su csrf; solo no se ven. */
.th-ad-radio{position:absolute;opacity:0;pointer-events:none}
.th-ad-tab{cursor:pointer;user-select:none}
.th-ad-vista{display:none}
#th-ad-t1:checked~.th-ad-tabs label[for="th-ad-t1"],
#th-ad-t2:checked~.th-ad-tabs label[for="th-ad-t2"],
#th-ad-t3:checked~.th-ad-tabs label[for="th-ad-t3"],
#th-ad-t4:checked~.th-ad-tabs label[for="th-ad-t4"]{color:#fff;border-bottom-color:var(--th-ad-red,#ff1436)}
#th-ad-t1:checked~.th-ad-vista-1,
#th-ad-t2:checked~.th-ad-vista-2,
#th-ad-t3:checked~.th-ad-vista-3,
#th-ad-t4:checked~.th-ad-vista-4{display:block}
/* «Editar limites» pliega el formulario largo en vez de llevarse la tarjeta. */
.th-ad-toggle{position:absolute;opacity:0;pointer-events:none}
.th-ad-limites-form{display:none;margin-top:14px;padding-top:14px;border-top:1px solid var(--th-ad-line,#2b3439)}
.th-ad-toggle:checked+.th-ad-limites-form{display:block}
.th-account-detail .th-ad-nada{color:var(--th-ad-muted,#abb3b8);margin:6px 0 0}
.th-account-detail .th-ad-resultado{margin-bottom:16px;padding:20px 22px}
.th-account-detail .th-ad-vence-form{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-top:12px}
.th-account-detail .th-ad-vence-form label{flex:1 1 180px}
.th-account-detail .th-ad-activity-link{cursor:pointer}
.th-account-detail .th-ad-operation.is-fail i{background:#ff5a63}
.th-account-detail .th-ad-ram{font-style:normal;color:var(--th-ad-muted,#abb3b8)}
.th-account-detail .th-ad-ram.is-warn{color:#ffc400}
.th-account-detail .th-ad-sobre{
    margin:10px 0 0;padding:10px 12px;border-radius:8px;
    border:1px solid #7a5a12;background:rgba(244,173,0,.07);
    color:#ffdd9e;font-size:13px;line-height:1.5;
}
.th-account-detail .th-ad-button{text-decoration:none;display:inline-flex;align-items:center;gap:8px}

/* ── PayPal ───────────────────────────────────────────────────────
   Sin nada en linea: la CSP de este panel no ejecuta <style> ni
   onclick, asi que un estilo pegado en la plantilla no se aplicaria
   y nadie sabria por que. */
.th-pp-modo{display:grid;gap:4px;padding:14px 16px;margin:0 0 18px;border-radius:8px;border:1px solid}
.th-pp-modo strong{font-size:15px;letter-spacing:.02em}
.th-pp-modo span{font-size:13px;line-height:1.5;opacity:.85}
.th-pp-modo.is-vivo{border-color:#2f7d4f;background:rgba(47,125,79,.12)}
.th-pp-modo.is-pruebas{border-color:#8a6d2f;background:rgba(138,109,47,.12)}
.th-pp-url{display:inline-block;padding:8px 10px;font-size:13px;word-break:break-all}
.th-pp-pasos{display:grid;gap:12px;margin:0 0 18px;padding-left:20px}
.th-pp-pasos li{line-height:1.5}
.th-pp-pasos strong{display:block}
.th-pp-pasos span{display:block;font-size:13px;opacity:.8}
.th-pp-registro{width:100%;border-collapse:collapse;font-size:13px}
.th-pp-registro th,.th-pp-registro td{padding:7px 9px;text-align:left;border-bottom:1px solid rgba(255,255,255,.08);vertical-align:top}
.th-pp-registro tr.is-malo td{color:#e88}
.th-pp-registro tr.is-ojo td{color:#e9c46a}
.th-pp-registro tr.is-bueno td{color:#8ecfa0}

/* ── Envíos ───────────────────────────────────────────────────────
   Va ANTES de la sección «Pantallas de acceso»: ahí todo tiene que
   empezar por body.auth y hay una prueba que monta guardia. */
.th-env-form{display:grid;gap:4px;max-width:620px}
.th-env-form label{display:grid;gap:5px;margin-top:12px;font-size:13px;color:#b8c0c5}
.th-env-form input[type=text],.th-env-form textarea,.th-env-form select,
.th-env-campo input{padding:9px 11px;font:inherit;color:#f0f2f3;background:#0a0d0e;
  border:1px solid #2b3438;border-radius:6px}
.th-env-form textarea{resize:vertical}
.th-env-fila{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.th-env-check{display:flex!important;align-items:flex-start;gap:8px;margin-top:14px}
.th-env-check input{margin-top:3px}
.th-env-campo{display:grid;gap:5px;margin-top:12px;font-size:13px;color:#b8c0c5}
.th-env-campo input{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.th-env-clave{letter-spacing:.12em;font-size:16px;color:#5cc9a7!important}
.th-env-tabla{width:100%;border-collapse:collapse;font-size:14px}
.th-env-tabla th,.th-env-tabla td{padding:9px 10px;text-align:left;
  border-bottom:1px solid rgba(255,255,255,.08);vertical-align:top}
.th-env-estado{display:inline-block;padding:2px 8px;font-size:12px;border-radius:999px;
  border:1px solid #4a565c}
.th-env-estado.is-vivo{color:#8ecfa0;border-color:#2f7d4f}
.th-env-estado.is-fin{color:#b6c0c6}
.th-env-estado.is-corte{color:#e88;border-color:#6b2b2b}
.th-env-mal{color:#e88;font-size:12px}
.th-env-inline{display:inline}

/* ── Botón de idioma ──────────────────────────────────────────────
   Va ANTES de la sección «Pantallas de acceso»: allí todo tiene que
   empezar por body.auth y hay una prueba que monta guardia. */
.th-idioma{display:inline-flex;margin:0 10px}
.th-idioma button{display:inline-flex;align-items:center;gap:0;padding:0;
  font:inherit;font-size:11px;font-weight:600;letter-spacing:.04em;
  color:#b8c0c5;background:transparent;border:1px solid #3a464c;border-radius:5px;
  overflow:hidden;cursor:pointer}
.th-idioma button:hover{border-color:#5a6a72}
.th-idioma-actual{padding:3px 7px;color:#0c1011;background:#8b969d}
.th-idioma-otro{padding:3px 7px}

/* ── Wazuh · resumen del dia ──────────────────────────────────────
   ANTES de «Pantallas de acceso», que alli todo va bajo body.auth. */
.th-wz-dia h3{margin:18px 0 8px;font-size:14px}
.th-wz-niveles{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.th-wz-nivel{display:grid;gap:1px;padding:8px 12px;border:1px solid #333e44;border-radius:7px;min-width:78px}
.th-wz-nivel strong{font-size:16px}
.th-wz-nivel span{font-size:11px;color:#8b969d}
.th-wz-nivel.is-alto{border-color:#6b2b2b;background:rgba(140,40,40,.12)}
.th-wz-nivel.is-alto strong{color:#f0b9b9}
.th-wz-nivel.is-medio{border-color:#7a5a12;background:rgba(200,150,30,.10)}
.th-wz-nivel.is-medio strong{color:#e9c46a}
.th-wz-tabla{width:100%;border-collapse:collapse;font-size:13px}
.th-wz-tabla th,.th-wz-tabla td{padding:6px 9px;text-align:left;border-bottom:1px solid rgba(255,255,255,.07)}
.th-wz-pill{display:inline-block;min-width:22px;padding:1px 6px;text-align:center;
  font-size:11px;border-radius:999px;border:1px solid #4a565c}
.th-wz-pill.is-alto{color:#f0b9b9;border-color:#6b2b2b}
.th-wz-pill.is-medio{color:#e9c46a;border-color:#7a5a12}

/* ── Pop-up de credencial de un solo uso ──────────────────────────
   ANTES de «Pantallas de acceso»: alli todo va bajo body.auth y hay
   una prueba que monta guardia.

   Se abre SOLO. Sin `:target` ni clases condicionales: una contrasena
   que se ensena una sola vez no puede depender de que una regla llegue
   viva al navegador. */
.th-cred-pop{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;
  justify-content:center;padding:24px;background:rgba(3,5,6,.82)}
.th-cred-caja{width:100%;max-width:520px;padding:26px 26px 22px;
  background:#0f1315;border:1px solid #2b3438;border-radius:12px;
  box-shadow:0 24px 70px rgba(0,0,0,.6)}
.th-cred-caja h2{margin:0 0 10px;font-size:18px}
.th-cred-aviso{margin:0 0 16px;padding:11px 13px;font-size:13px;line-height:1.5;
  color:#ffdd9e;border:1px solid #7a5a12;border-radius:7px;background:rgba(244,173,0,.07)}
.th-cred-tabla{width:100%;border-collapse:collapse;font-size:14px}
.th-cred-tabla td{padding:7px 4px;border-bottom:1px solid rgba(255,255,255,.07)}
.th-cred-tabla td:first-child{width:96px;color:#8b969d;font-size:13px}
.th-cred-tabla code{word-break:break-all}
.th-cred-clave{display:inline-block;padding:4px 8px;font-size:16px;letter-spacing:.04em;
  color:#5cc9a7;background:#080a0b;border-radius:5px;user-select:all}
.th-cred-botones{display:flex;gap:10px;margin-top:18px}
.th-cred-botones .btn{flex:1}
.th-cred-nota{margin:12px 0 0;font-size:13px;color:#8ecfa0}

/* ── Cortafuegos del host · zona a lo ancho ───────────────────────
   ANTES de «Pantallas de acceso»: alli todo va bajo body.auth y hay una
   prueba que monta guardia.

   Estaba apretado por dos motivos: los tres indicadores usaban la rejilla
   de CUATRO columnas del panel —dejando una vacia— y las dos tablas iban
   dentro de una tarjeta con padding, a dos columnas. Padding dentro de
   padding dentro de dos columnas. Ahora cada bloque es su propia tarjeta
   a lo ancho de la pagina. */
.th-fwh-zona{display:grid;gap:16px;margin-bottom:22px}
.th-fwh-cab h2{margin:0 0 4px;font-size:19px}
.th-fwh-cab p{margin:0;font-size:13px;color:#8b969d}
.th-fwh-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.th-fwh-kpi{display:grid;gap:5px;align-content:start;padding:18px 20px;
  background:#0f1315;border:1px solid #232a2e;border-radius:10px}
.th-fwh-kpi-tit{font-size:12px;letter-spacing:.03em;color:#8b969d}
.th-fwh-kpi strong{font-size:30px;line-height:1.1;font-weight:600}
.th-fwh-kpi-sub{font-size:12px;line-height:1.45;color:#78838a}
.th-fwh-kpi.is-ojo{border-color:#7a5a12}
.th-fwh-kpi.is-ojo strong{color:#e9c46a}
.th-fwh-bloque{padding:18px 20px}
.th-fwh-bloque h3{margin:0 0 12px;font-size:14px}
/* Las tablas anchas se desplazan DENTRO de su caja: la pagina no se mueve
   en horizontal, que es lo que rompe la lectura en una pantalla chica. */
.th-fwh-scroll{overflow-x:auto}
.th-fwh-tabla{width:100%;border-collapse:collapse;font-size:13.5px}
.th-fwh-tabla th{font-size:12px;color:#8b969d;font-weight:500}
.th-fwh-tabla th,.th-fwh-tabla td{padding:9px 12px;text-align:left;
  border-bottom:1px solid rgba(255,255,255,.07);vertical-align:middle}
.th-fwh-tabla tr:last-child td{border-bottom:0}
.th-fwh-reglas td:first-child{width:38px;color:#78838a}
.th-fwh-tabla tr.is-mundo td{background:rgba(200,140,40,.06)}
.th-fwh-mundo{color:#e9c46a;font-weight:500}
.th-fwh-accion{display:inline-block;padding:2px 9px;font-size:11.5px;
  border-radius:999px;border:1px solid #4a565c;white-space:nowrap}
.th-fwh-accion.is-allow{color:#8ecfa0;border-color:#2f7d4f}
.th-fwh-accion.is-deny,.th-fwh-accion.is-reject{color:#e88;border-color:#6b2b2b}
.th-fwh-dos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.th-fwh-pie{margin:0}
@media (max-width:1000px){.th-fwh-dos{grid-template-columns:1fr}
  .th-fwh-kpis{grid-template-columns:1fr}}

/* Telón de carga del panel de operador. Las reglas de más arriba están
   atadas a `body.cliente-app` y no llegaban aquí. */
.cargando-telon{
    position:fixed; inset:0; z-index:9999;
    display:flex; align-items:center; justify-content:center;
    background:rgba(15,18,25,.55);
    -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.cargando-caja{
    display:flex; align-items:center; gap:.7rem;
    padding:1rem 1.35rem; border-radius:.65rem;
    background:#fff; color:#1b2130;
    font-size:.95rem; font-weight:600;
    box-shadow:0 10px 40px rgba(0,0,0,.35);
    max-width:min(92vw,32rem);
}
.cargando-giro{
    width:1.15rem; height:1.15rem; flex:0 0 auto;
    border:2px solid rgba(0,0,0,.15); border-top-color:#2f6df6;
    border-radius:50%;
    animation:cargando-vuelta .8s linear infinite;
}
@keyframes cargando-vuelta{ to{ transform:rotate(360deg); } }


/* La dirección del pop-up de credencial: enlace, no adorno. Monoespaciada
   como el resto de datos copiables, y que parta si no cabe. */
.th-cred-enlace{
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:.92em; color:#2f6df6; text-decoration:underline;
    word-break:break-all;
}


/* Quien tenga el sistema puesto en «menos movimiento» ve el disco quieto:
   la señal sigue estando, sin la animación. */
@media (prefers-reduced-motion:reduce){
    .cargando-giro{ animation:none; border-top-color:#2f6df6; }
}

button[aria-busy="true"]{ opacity:.72; cursor:progress; }

/* ── Pantallas de acceso · diseño 2026-08 ────────────────────────────────────
 *
 * TODO va acotado a `body.auth`, y no es estilo: es lo que impide que el
 * rediseño del login se derrame sobre el panel. El diseño original tocaba
 * `.btn`, `.form` y `.login-card` en global, y esas tres clases aparecen en
 * decenas de plantillas del operador -- con `.btn{min-height:66px}` suelto,
 * cada boton del panel se volvia gigante.
 *
 * Las variables NO se redefinen aqui: layout_auth.php inyecta --th-red desde
 * brand('color') en un <style> posterior a esta hoja, y volver a declararlas
 * en :root le quitaria el color de marca al operador que lo haya cambiado.
 *
 * Y falta a proposito lo que el diseño traia y el sistema no tiene: no hay
 * «recordarme» --el login no lo implementa--, ni «olvidaste tu contraseña»
 * --no existe flujo de recuperacion-- ni «contactar soporte» --el soporte vive
 * DENTRO del panel de cliente, tras entrar--. Un control que no hace nada es
 * peor que su ausencia: el usuario lo pulsa y no pasa nada.
 */
body.auth{
  display:grid;grid-template-rows:auto 1fr auto;align-items:stretch;justify-content:stretch;
  min-height:100vh;min-height:100dvh;
  background:radial-gradient(circle at 50% 44%,rgba(31,33,34,.09),transparent 31%),
             linear-gradient(145deg,#050606 0%,#010202 70%);
}
/* El diseño llegaba con `min-width:760px` y `overflow:hidden` en el body. Eso
 * no es «le falta la pantalla de movil»: es que en un telefono la pagina se
 * sale y el desbordamiento queda escondido, asi que ni siquiera se puede
 * arrastrar para ver el boton de entrar. Aqui no se reproduce ninguno de los
 * dos, y por eso el acceso funciona en un movil sin necesitar otro diseño. */
body.auth .auth-header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 28px;border-bottom:1px solid #2f3234;background:rgba(2,3,3,.78);
}
body.auth .brand-logo{
  display:block;width:141px;height:58px;max-width:42vw;
  object-fit:contain;object-position:left center;mix-blend-mode:screen;
}
body.auth .header-context{display:flex;align-items:center;gap:14px;color:#e6e6e8;font-size:1.15rem}
body.auth .profile-icon{width:42px;height:42px;color:#bdc0c4;flex:0 0 auto}
body.auth .profile-icon svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
body.auth .auth-main{display:grid;place-items:center;min-height:0;padding:40px 24px}
body.auth .auth-card{
  width:560px;max-width:100%;padding:42px 44px 44px;
  background:linear-gradient(145deg,rgba(6,7,7,.96),rgba(2,3,3,.94));
  border:1px solid #444749;border-top:1px solid #444749;border-radius:12px;
  box-shadow:0 22px 60px rgba(0,0,0,.2);
}
body.auth .auth-card h1{margin:0;color:#f4f4f5;font-size:2.3rem;font-weight:400;line-height:1.1;letter-spacing:-.9px}
body.auth .auth-card .intro{margin:11px 0 30px;color:var(--th-muted);font-size:1.15rem}
body.auth .brand-line{display:flex;align-items:baseline;gap:11px;margin-bottom:4px}
body.auth .brand-short{color:var(--th-red);font-size:1.4rem;font-style:italic;font-weight:800}
body.auth .brand-tag{color:#92949a;font-size:.7rem;font-weight:700;letter-spacing:4px}
body.auth .auth-card .form{display:flex;flex-direction:column}
body.auth .field-label{display:block;margin-bottom:8px;color:#c7c8cb;font-size:1rem}
body.auth .field-wrap{position:relative;margin-bottom:20px}
body.auth .field-wrap input{
  display:block;width:100%;height:56px;padding:0 18px;color:#f2f2f3;caret-color:var(--th-red);
  background:#030404;border:1px solid #474a4c;border-radius:9px;outline:none;font:inherit;font-size:1.05rem;
  transition:border-color .18s ease,box-shadow .18s ease;
}
body.auth .field-wrap input::placeholder{color:#8e9095;opacity:1}
body.auth .field-wrap input:focus{border-color:var(--th-red);box-shadow:0 0 0 1px var(--th-red)}
body.auth .password-wrap input{padding-right:58px}
body.auth .password-toggle{
  position:absolute;top:0;right:0;display:grid;width:58px;height:56px;place-items:center;
  color:#d7d8da;background:transparent;border:0;cursor:pointer;
}
body.auth .password-toggle svg{display:block;width:26px;height:26px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
body.auth .auth-card .btn{
  display:inline-flex;min-height:58px;align-items:center;justify-content:center;padding:0 24px;
  width:100%;border:0;border-radius:9px;cursor:pointer;font:inherit;font-size:1.1rem;
}
body.auth .auth-card .btn-primary{
  color:#fff;background:linear-gradient(180deg,#ff151f,#f50714);
  box-shadow:0 12px 30px rgba(255,16,31,.09);transition:filter .16s ease,transform .16s ease;
}
body.auth .auth-card .btn-primary:hover{filter:brightness(1.06)}
body.auth .auth-card .btn-primary:active{transform:translateY(1px)}
body.auth .support-row{margin:26px 0 0;color:#96989c;font-size:.95rem;text-align:center}
body.auth .forgot-link{color:var(--th-red)}
body.auth .forgot-link:hover{text-decoration:underline;text-underline-offset:3px}
/* El aviso de error existe desde antes y el diseño no lo contemplaba. Sin esto
 * se pintaba con el estilo del panel dentro de una tarjeta oscura. */
body.auth .alert{margin:0 0 20px;border-radius:9px}
body.auth .auth-footer{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:18px 28px;color:#8e9094;font-size:.95rem;
}
/* El pie iba `position:fixed` en el diseño. En un movil en horizontal, o con
 * el teclado abierto, un pie fijo se come la tarjeta y tapa el boton de
 * entrar. En flujo normal se comporta en las dos orientaciones. */

@media (max-width:820px){
  body.auth .auth-header{padding:12px 18px}
  body.auth .brand-logo{width:112px;height:46px}
  body.auth .header-context{font-size:.95rem;gap:10px}
  body.auth .profile-icon{width:32px;height:32px}
  body.auth .auth-main{padding:24px 16px}
  body.auth .auth-card{padding:26px 20px 28px;border-radius:10px}
  body.auth .auth-card h1{font-size:1.75rem}
  body.auth .auth-card .intro{margin:8px 0 22px;font-size:1rem}
  body.auth .password-toggle{height:52px}
  body.auth .auth-footer{padding:14px 18px;font-size:.85rem}
  /* 16px exactos y no menos: por debajo, Safari de iOS hace zoom al enfocar
   * el campo y deja la pagina descuadrada y desplazada. */
  body.auth .field-wrap input{height:52px;font-size:16px}
}

/* ══ Panel de CLIENTE · armazon de aplicacion ═══════════════════════════════
 *
 * Portado de la maqueta thoth-clientes-mockup (2026-08-08).
 *
 * TODO va bajo `body.cliente-app`, y no es mania: esta hoja la comparten los
 * dos paneles, y el de OPERADOR es tema CLARO (--th-bg:#f6f7f9). Una sola
 * regla suelta aqui le cambiaria el fondo a medio panel del operador sin que
 * nadie lo pidiera. Con el prefijo, el tema oscuro no se puede escapar.
 *
 * Los colores se declaran aqui y no en :root por lo mismo: --th-* son los del
 * tema claro y siguen intactos.
 */
body.cliente-app{
    --c-line:#323638; --c-text:#f3f3f5; --c-muted:#aeb0b5;
    --c-red:#ff102b; --c-green:#31c43d; --c-yellow:#f4ad00;
    --c-sidebar:250px;
    color-scheme:dark;
    margin:0;min-height:100vh;color:var(--c-text);font-size:16px;
    background:
      radial-gradient(circle at 57% 12%,rgba(29,31,32,.12),transparent 35%),
      linear-gradient(140deg,#070808 0%,#020303 74%);
}
body.cliente-app *{box-sizing:border-box}
body.cliente-app button,body.cliente-app input,
body.cliente-app select,body.cliente-app textarea{font:inherit}
body.cliente-app a{color:#ff6b7a}

body.cliente-app .app-shell{
    display:grid;grid-template-columns:var(--c-sidebar) minmax(0,1fr);min-height:100vh;
}

/* ── barra lateral ──────────────────────────────────────────────────────── */
body.cliente-app .sidebar{
    position:fixed;inset:0 auto 0 0;z-index:5;display:flex;flex-direction:column;
    width:var(--c-sidebar);overflow-y:auto;
    background:linear-gradient(145deg,#0a0b0b,#070808 60%,#0c0d0d);
    border-right:1px solid var(--c-line);
}
body.cliente-app .brand{padding:29px 29px 20px}
body.cliente-app .brand-logo{
    display:block;width:160px;height:60px;object-fit:contain;
    object-position:left center;mix-blend-mode:screen;
}
/* Sin imagen -- una instalacion nueva no trae logo -- el nombre ocupa su
 * sitio con el mismo peso, en vez de dejar un hueco. */
body.cliente-app .brand-mark{
    display:block;color:var(--c-red);
    font-family:"Segoe Script","Brush Script MT",cursive;
    font-size:49px;font-style:italic;font-weight:800;letter-spacing:-5px;
    line-height:.96;transform:rotate(-2deg);transform-origin:left center;
}
body.cliente-app .brand-label{
    margin-top:13px;padding-left:9px;color:#a4a6aa;
    font-size:14px;font-weight:650;letter-spacing:6px;
}
body.cliente-app .sidebar-nav{display:grid;gap:8px}
body.cliente-app .nav-item,body.cliente-app .exit-item{
    position:relative;display:flex;align-items:center;gap:17px;
    width:100%;min-height:61px;padding:0 28px 0 37px;border:0;
    color:#dedee1;background:transparent;text-align:left;text-decoration:none;
    cursor:pointer;transition:color .18s var(--ease),background .18s var(--ease);
}
body.cliente-app .nav-item:hover,body.cliente-app .exit-item:hover{
    color:#fff;background:rgba(255,255,255,.035);
}
body.cliente-app .nav-item.active{
    color:#fff;background:linear-gradient(90deg,rgba(101,8,8,.78),rgba(77,12,12,.55));
}
body.cliente-app .nav-item.active::before{
    content:"";position:absolute;inset:0 auto 0 10px;width:4px;background:var(--c-red);
}
body.cliente-app .nav-icon{width:28px;height:28px;flex:0 0 28px;color:#c9cbd0}
body.cliente-app .nav-icon svg,body.cliente-app .profile-button svg{
    display:block;width:100%;height:100%;fill:none;stroke:currentColor;
    stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;
}
body.cliente-app .nav-label{white-space:nowrap;font-size:18px}
body.cliente-app .icon-wp{
    display:grid;width:29px;height:29px;flex:0 0 29px;place-items:center;
    color:#c9cbd0;border:1px solid currentColor;border-radius:50%;
    font-family:Georgia,serif;font-size:18px;font-weight:700;
}
body.cliente-app .sidebar-footer{
    margin-top:auto;border-top:1px solid var(--c-line);padding:15px 0 17px;
}

/* ── zona principal ─────────────────────────────────────────────────────── */
body.cliente-app .main{grid-column:2;min-width:0;padding:38px 42px 34px}
body.cliente-app .main-inner{width:min(100%,1255px);margin:0 auto}
body.cliente-app .page-header{
    display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:27px;
}
body.cliente-app h1{margin:0;font-size:31px;line-height:1.12;letter-spacing:-.7px}
body.cliente-app .domain-subtitle{margin:8px 0 0;color:var(--c-muted);font-size:20px}
body.cliente-app .profile-button{
    width:48px;height:48px;padding:0;color:#d5d6d9;background:transparent;border:0;
}

/* ── tarjeta de resumen ─────────────────────────────────────────────────── */
body.cliente-app .overview-card,
body.cliente-app .resource-card{
    background:linear-gradient(135deg,rgba(16,18,19,.84),rgba(7,8,8,.74));
    border:1px solid var(--c-line);border-radius:11px;
}
body.cliente-app .overview-card{
    display:grid;grid-template-columns:1.55fr 1fr .9fr .9fr .9fr;min-height:124px;
    align-items:center;margin-bottom:39px;padding:22px 32px;
}
body.cliente-app .overview-item{min-width:0;padding:0 31px;border-left:1px solid var(--c-line)}
body.cliente-app .overview-item:first-child{padding-left:0;border-left:0}
body.cliente-app .meta-label{margin-bottom:12px;color:var(--c-muted);font-size:17px}
body.cliente-app .meta-value{
    overflow:hidden;color:#f0f0f2;font-size:20px;font-weight:700;line-height:1.2;
    text-overflow:ellipsis;white-space:nowrap;
}
body.cliente-app .meta-value a{color:inherit}
body.cliente-app .status-value{display:inline-flex;align-items:center;gap:11px;color:var(--c-green)}
body.cliente-app .status-value.is-warn{color:var(--c-yellow)}
body.cliente-app .status-value.is-bad{color:var(--c-red)}
body.cliente-app .status-dot{
    width:15px;height:15px;border-radius:50%;background:currentColor;
    box-shadow:0 0 12px rgba(49,196,61,.2);
}
body.cliente-app .section-title{
    margin:0 0 12px 2px;font-size:23px;line-height:1.15;letter-spacing:-.35px;
}

/* ── medidores de recursos ──────────────────────────────────────────────── */
body.cliente-app .resource-card{overflow:hidden;margin-bottom:33px}
body.cliente-app .resource-row{
    display:grid;
    grid-template-columns:47px minmax(160px,1.1fr) minmax(190px,.75fr) minmax(190px,1.25fr) 59px;
    min-height:89px;align-items:center;gap:15px;padding:0 29px;
    border-top:1px solid var(--c-line);
}
body.cliente-app .resource-icon{width:39px;height:39px;color:#c7c9cd}
body.cliente-app .resource-icon svg{
    display:block;width:100%;height:100%;fill:none;stroke:currentColor;
    stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;
}
body.cliente-app .resource-row:first-child{border-top:0}
body.cliente-app .resource-name{font-size:19px}
body.cliente-app .resource-amount{
    color:#dedee1;font-size:18px;text-align:right;white-space:nowrap;
}
body.cliente-app .resource-meter{
    height:12px;overflow:hidden;background:#232526;border-radius:999px;
    box-shadow:inset 0 1px 1px rgba(255,255,255,.025);
}
/* max(7px,…): un 0% real se veria como un medidor roto, no como «vacio». */
body.cliente-app .resource-fill{
    display:block;width:max(7px,var(--usage-width,0%));height:100%;
    background:var(--usage-color,var(--c-green));border-radius:inherit;
}
body.cliente-app .resource-percent{font-size:18px;text-align:right}
/* El anuncio del promedio de RAM: pastilla junto al nombre que despliega su
 * explicacion. position:relative en la fila y absolute en el globo para que
 * abrirlo no empuje el medidor ni cambie la altura de la tarjeta. */
body.cliente-app .resource-row{position:relative}
body.cliente-app .ram-nota{display:inline-block;margin:0 0 0 10px;vertical-align:middle}
body.cliente-app .ram-pastilla{
    display:inline-block;padding:3px 11px 4px;border-radius:999px;
    border:1px solid var(--c-line);color:var(--c-muted);
    font-size:13px;font-weight:650;list-style:none;cursor:pointer;
    white-space:nowrap;transition:border-color .15s var(--ease),color .15s var(--ease);
}
body.cliente-app .ram-pastilla::-webkit-details-marker{display:none}
body.cliente-app .ram-pastilla:hover{color:var(--c-text)}
body.cliente-app .ram-pastilla.ok{color:#8fe39a;border-color:#2c6b33}
body.cliente-app .ram-pastilla.warn{color:#ffaf00;border-color:#d88d00}
body.cliente-app .ram-nota[open] .ram-pastilla{border-color:#5a5f62;color:var(--c-text)}
body.cliente-app .ram-globo{
    position:absolute;top:calc(50% + 20px);left:20px;z-index:20;
    display:block;width:min(430px,calc(100% - 40px));padding:14px 16px;
    background:#141617;border:1px solid #3a3f42;border-radius:10px;
    box-shadow:0 16px 34px rgba(0,0,0,.5);
    color:var(--c-text);font-size:15px;line-height:1.5;
}

/* ── el marcado que YA existia ──────────────────────────────────────────── *
 * Cada `hr` del panel abre una seccion y cada `h3` la titula. Se restilan en
 * vez de reescribir 265 lineas de formularios: cada linea reescrita seria una
 * ocasion de perder un CSRF o un campo oculto.                              */
/* width:auto ademas de max-width:none: la regla global del login trae
 * width:340px, y sin deshacerla el panel ENTERO vivia en una columna de
 * 340px -- el «todo en vertical» que se veia en produccion. */
body.cliente-app .login-card{width:auto;max-width:none;margin:0;padding:0;background:none;border:0;box-shadow:none}
body.cliente-app .login-card hr{height:0;margin:33px 0 0;border:0;border-top:1px solid var(--c-line)}
body.cliente-app .login-card h3{margin:26px 0 12px;font-size:23px;font-weight:700;letter-spacing:-.35px}
body.cliente-app .login-card p{margin:10px 0}

/* ── secciones en tarjetas ──────────────────────────────────────────────── *
 * La maqueta reparte las secciones en TARJETAS a dos columnas, no en una
 * columna corrida. min(340px,100%) y no un minimo fijo a secas: en una
 * pantalla mas angosta que la tarjeta, el minimo fijo desbordaria en vez de
 * encoger. Y 340 y no 430: con el escalado tipico de Windows (125-175%) el
 * area util baja de 800px y con 430 TODO caia a una columna -- el mismo
 * churro vertical que se queria quitar.                                     */
body.cliente-app .panel-secciones{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));
    gap:22px;align-items:start;
}
body.cliente-app .panel-card{
    min-width:0;padding:24px 28px;
    background:linear-gradient(135deg,rgba(16,18,19,.84),rgba(7,8,8,.74));
    border:1px solid var(--c-line);border-radius:11px;
}
/* La primera tarjeta solo lleva avisos y credenciales; casi siempre esta
 * vacia, y una caja vacia parece un fallo de pintado. */
body.cliente-app .panel-card:not(:has(*)){display:none}
body.cliente-app .panel-card h3{margin-top:0}
/* Lo que reclama atencion -- un badge ambar dentro -- borda su tarjeta como
 * en la maqueta (el certificado «Pendiente»). */
body.cliente-app .panel-card:has(.badge.warn){border-color:#7a5a12}

/* ── el dashboard de la maqueta: Seguridad + Accesos rapidos ────────────── */
body.cliente-app .bottom-grid{
    display:grid;grid-template-columns:.88fr 1.12fr;gap:32px;margin-top:33px;
}
body.cliente-app .security-card{
    display:grid;grid-template-columns:125px 1fr;min-height:234px;
    align-items:center;padding:25px;border:1px solid #e39900;border-radius:11px;
    background:radial-gradient(circle at 64% 50%,rgba(88,50,0,.13),transparent 58%),#090a0a;
}
body.cliente-app .security-card.is-ok{
    border-color:#2c6b33;
    background:radial-gradient(circle at 64% 50%,rgba(20,70,26,.13),transparent 58%),#090a0a;
}
body.cliente-app .security-symbol{
    display:grid;width:120px;height:120px;place-items:center;
    color:#ffa900;border:1px solid #e39900;border-radius:50%;
}
body.cliente-app .security-card.is-ok .security-symbol{color:#31c43d;border-color:#2c6b33}
body.cliente-app .security-symbol svg{
    width:68px;height:68px;fill:none;stroke:currentColor;stroke-width:2.4;
    stroke-linecap:round;stroke-linejoin:round;
}
body.cliente-app .security-content{padding-left:26px}
body.cliente-app .security-title-row{display:flex;flex-wrap:wrap;align-items:center;gap:13px}
body.cliente-app .security-title{font-size:21px;font-weight:750}
body.cliente-app .security-note{margin-top:15px;color:#b9b9bd;font-size:18px}
body.cliente-app .security-content .btn{margin-top:22px}
body.cliente-app .quick-card{
    overflow:hidden;
    background:linear-gradient(135deg,rgba(16,18,19,.84),rgba(7,8,8,.74));
    border:1px solid var(--c-line);border-radius:11px;
}
body.cliente-app .quick-form{margin:0}
body.cliente-app .quick-row{
    display:flex;min-height:75px;align-items:center;gap:18px;width:100%;
    padding:0 20px;color:var(--c-text);background:transparent;border:0;
    border-top:1px solid var(--c-line);text-align:left;text-decoration:none;
}
body.cliente-app .quick-card>:first-child .quick-row,
body.cliente-app .quick-card>a.quick-row:first-child{border-top:0}
body.cliente-app button.quick-row{cursor:pointer}
body.cliente-app a.quick-row:hover,body.cliente-app button.quick-row:hover{
    background:rgba(255,255,255,.025);
}
body.cliente-app .quick-icon-box{
    display:grid;width:48px;height:48px;flex:0 0 48px;place-items:center;
    color:#d0d1d4;background:linear-gradient(145deg,#17191a,#0b0c0d);
    border:1px solid #282b2d;border-radius:10px;
}
body.cliente-app .quick-icon-box svg,body.cliente-app .chevron svg{
    display:block;width:32px;height:32px;fill:none;stroke:currentColor;
    stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;
}
body.cliente-app .quick-label{font-size:18px}
body.cliente-app .chevron{width:13px;height:22px;margin-left:auto;color:#d8d9dc}
body.cliente-app .chevron svg{width:13px;height:22px;stroke-width:2.4}
body.cliente-app .wordpress-mark{
    display:grid;width:48px;height:48px;flex:0 0 48px;place-items:center;
    color:#d1d2d4;border:1px solid #414447;border-radius:50%;
    font-family:Georgia,serif;font-size:29px;font-weight:700;
}
body.cliente-app .wordpress-copy{min-width:0;font-size:18px;white-space:nowrap}
body.cliente-app .wordpress-copy span{color:#b0b1b5}
body.cliente-app .outline-quick{margin-left:auto}

/* ── las secciones de detalle son POP-UPS ───────────────────────────────── *
 * Sin JavaScript: la seccion vive display:none hasta que el ancla del menu
 * la hace :target. El telon es un box-shadow gigante -- no hace falta un
 * elemento de fondo -- y «cerrar» es un enlace a #resumen, que re-apunta el
 * :target. Con JS bloqueado todo esto sigue funcionando.                    */
body.cliente-app .panel-modal{display:none}
body.cliente-app .panel-modal:target,body.cliente-app .panel-modal.is-open{
    display:block;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
    z-index:60;width:min(680px,94vw);max-height:88vh;overflow:auto;
    background:#0b0c0d;box-shadow:0 0 0 100vmax rgba(2,3,3,.78);
}
body.cliente-app .modal-cerrar{
    position:sticky;top:0;float:right;margin:-6px -8px 0 12px;
    color:#aeb0b5;font-size:30px;line-height:1;text-decoration:none;
}
body.cliente-app .modal-cerrar:hover{color:#fff}

/* Resumen de seguridad del sitio del cliente. */
body.cliente-app .seg-resumen{
    display:flex;gap:28px;flex-wrap:wrap;margin:14px 0 4px;padding:14px 18px;
    background:#0d0f10;border:1px solid var(--c-line);border-radius:10px;
}
body.cliente-app .seg-resumen div{display:flex;flex-direction:column;gap:2px}
body.cliente-app .seg-resumen strong{font-size:24px;line-height:1.1}
body.cliente-app .seg-resumen strong.is-warn{color:var(--c-yellow)}
body.cliente-app .seg-resumen strong.is-bad{color:var(--c-red)}
body.cliente-app .seg-resumen span{color:var(--c-muted);font-size:14px}
body.cliente-app .seg-tabla thead td,body.cliente-app .seg-tabla th{
    color:var(--c-muted);font-size:14px;font-weight:600;text-align:left;
    padding:8px 14px;border-bottom:1px solid var(--c-line);
}
body.cliente-app .seg-tabla td{vertical-align:middle}

/* Zona de peligro: plegada, y con el boton en rojo pleno. Un borrado sin
 * vuelta atras no comparte aspecto con «guardar». */
body.cliente-app .zona-peligro{
    margin-top:26px;padding-top:18px;border-top:1px solid var(--c-line);
}
body.cliente-app .zona-peligro>summary{
    color:#ff6b7a;font-size:15px;cursor:pointer;list-style:none;
}
body.cliente-app .zona-peligro>summary::-webkit-details-marker{display:none}
body.cliente-app .zona-peligro>summary::before{content:"⚠ ";}
body.cliente-app .btn-peligro{
    color:#fff;background:linear-gradient(180deg,#c22733,#8f1721);border:0;font-weight:700;
}
body.cliente-app .btn-peligro:hover{background:linear-gradient(180deg,#d62f3c,#a01926)}

/* ── telon de «trabajando» (lo pinta cliente.js al enviar un formulario) ── */
body.cliente-app .cargando-telon{
    position:fixed;inset:0;z-index:80;display:grid;place-items:center;
    background:rgba(2,3,3,.7);
}
body.cliente-app .cargando-caja{
    display:flex;align-items:center;gap:14px;padding:22px 28px;
    background:#101213;border:1px solid var(--c-line);border-radius:12px;
    font-size:17px;
}
body.cliente-app .cargando-giro{
    width:22px;height:22px;flex:0 0 22px;border-radius:50%;
    border:3px solid #33383a;border-top-color:var(--c-red);
    animation:cliente-giro .8s linear infinite;
}
@keyframes cliente-giro{to{transform:rotate(360deg)}}
body.cliente-app .muted{color:var(--c-muted)}
body.cliente-app .small{font-size:15px;line-height:1.5}
body.cliente-app .mb{margin-bottom:14px}
body.cliente-app dl{margin:0}
body.cliente-app dt{margin-top:14px}
body.cliente-app dd{margin:5px 0 0;font-size:18px}

body.cliente-app .btn{
    display:inline-flex;align-items:center;min-height:49px;padding:0 20px;
    color:var(--c-red);background:transparent;border:1px solid var(--c-red);
    border-radius:9px;text-decoration:none;white-space:nowrap;cursor:pointer;
}
body.cliente-app .btn:hover{background:rgba(255,16,43,.07)}
body.cliente-app .btn-primary{
    color:#090909;background:linear-gradient(180deg,#ffb30e,#f29b00);border:0;
    box-shadow:0 5px 15px rgba(244,157,0,.1);font-weight:700;
}
body.cliente-app .btn-primary:hover{background:linear-gradient(180deg,#ffbe33,#ffa50d)}
body.cliente-app .btn:active{transform:translateY(1px)}

body.cliente-app label{display:block;margin:14px 0;color:var(--c-muted);font-size:15px}
body.cliente-app input,body.cliente-app select,body.cliente-app textarea{
    display:block;width:100%;max-width:520px;margin-top:7px;padding:12px 14px;
    color:var(--c-text);background:#0d0f10;border:1px solid var(--c-line);border-radius:8px;
}
body.cliente-app input[type=hidden]{display:none}
body.cliente-app input:focus,body.cliente-app select:focus,body.cliente-app textarea:focus{
    outline:0;border-color:#5a5f62;box-shadow:0 0 0 3px rgba(255,16,43,.12);
}
body.cliente-app textarea{min-height:96px;resize:vertical}

body.cliente-app .alert,body.cliente-app .notice{
    margin:14px 0;padding:14px 17px;border:1px solid var(--c-line);
    border-radius:10px;font-size:16px;
}
body.cliente-app .alert.ok{color:#b7f0bd;border-color:#2c6b33;background:rgba(49,196,61,.07)}
body.cliente-app .alert.error{color:#ffc4cb;border-color:#7a1420;background:rgba(255,16,43,.07)}
body.cliente-app .notice.warn{color:#ffdd9e;border-color:#7a5a12;background:rgba(244,173,0,.07)}
body.cliente-app .badge{
    display:inline-block;padding:6px 13px;color:var(--c-muted);
    border:1px solid var(--c-line);border-radius:999px;font-size:15px;
}
body.cliente-app .badge.ok{color:#8fe39a;border-color:#2c6b33}
body.cliente-app .badge.warn{color:#ffaf00;border-color:#d88d00}
body.cliente-app .bad-text{color:#ff6b7a}

body.cliente-app .kv{width:100%;border-collapse:collapse;margin:12px 0}
body.cliente-app .kv td{padding:12px 14px;border-top:1px solid var(--c-line);vertical-align:middle}
body.cliente-app .kv tr:first-child td{border-top:0}
body.cliente-app .kv td:first-child{color:var(--c-muted);white-space:nowrap}
body.cliente-app code{
    padding:3px 7px;background:#0d0f10;border:1px solid var(--c-line);border-radius:6px;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px;
}
/* Las credenciales se ensenan UNA vez: si el cliente pasa por alto el
 * recuadro no hay segunda oportunidad, asi que tiene que saltar a la vista. */
body.cliente-app .creds{
    margin:18px 0;padding:20px 22px;border:1px solid #d88d00;border-radius:11px;
    background:radial-gradient(circle at 64% 50%,rgba(88,50,0,.13),transparent 58%),#090a0a;
}
body.cliente-app .creds h3{margin-top:0;font-size:19px}
body.cliente-app details{margin:14px 0}
body.cliente-app details summary{cursor:pointer}

@media (max-width:1280px){
    body.cliente-app{--c-sidebar:205px}
    body.cliente-app .brand{padding:22px 21px 14px}
    body.cliente-app .brand-logo{width:130px;height:48px}
    body.cliente-app .brand-mark{font-size:41px}
    body.cliente-app .brand-label{margin-top:8px;font-size:11px;letter-spacing:5px}
    body.cliente-app .nav-item,body.cliente-app .exit-item{min-height:50px;gap:13px;padding-left:26px}
    body.cliente-app .nav-item.active::before{left:7px;width:3px}
    body.cliente-app .nav-icon{width:24px;height:24px;flex-basis:24px}
    body.cliente-app .nav-label{font-size:15px}
    body.cliente-app .main{padding:24px 27px 23px}
    body.cliente-app h1{font-size:26px}
    body.cliente-app .domain-subtitle{margin-top:5px;font-size:17px}
    body.cliente-app .overview-card{min-height:94px;margin-bottom:24px;padding:15px 23px}
    body.cliente-app .overview-item{padding:0 20px}
    body.cliente-app .meta-label{margin-bottom:8px;font-size:14px}
    body.cliente-app .meta-value{font-size:17px}
    body.cliente-app .section-title,body.cliente-app .login-card h3{font-size:19px}
    body.cliente-app .resource-row{
        grid-template-columns:36px minmax(130px,1.1fr) minmax(156px,.8fr) minmax(150px,1.25fr) 44px;
        min-height:67px;gap:12px;padding:0 20px;
    }
    body.cliente-app .resource-icon{width:30px;height:30px}
    body.cliente-app .bottom-grid{gap:20px;margin-top:26px}
    body.cliente-app .security-card{grid-template-columns:96px 1fr;min-height:0;padding:20px}
    body.cliente-app .security-symbol{width:92px;height:92px}
    body.cliente-app .security-symbol svg{width:52px;height:52px}
    body.cliente-app .resource-name,body.cliente-app .resource-amount,
    body.cliente-app .resource-percent{font-size:15px}
    body.cliente-app .resource-meter{height:9px}
    body.cliente-app .btn{min-height:39px;padding:0 16px;font-size:14px}
}

/* Por debajo de esto la barra lateral no cabe al lado del contenido: pasa
 * arriba, en horizontal. 180px de menu lateral en un movil se comen media
 * pantalla. */
@media (max-width:820px){
    body.cliente-app .app-shell{display:block}
    body.cliente-app .sidebar{position:static;width:auto;border-right:0;border-bottom:1px solid var(--c-line)}
    body.cliente-app .brand{padding:18px 18px 10px}
    body.cliente-app .sidebar-nav{grid-auto-flow:column;grid-auto-columns:max-content;gap:0;overflow-x:auto}
    body.cliente-app .nav-item{min-height:46px;padding:0 15px}
    body.cliente-app .nav-item.active::before{inset:auto 0 0 0;width:auto;height:3px}
    body.cliente-app .nav-label{font-size:14px}
    body.cliente-app .sidebar-footer{margin-top:0}
    body.cliente-app .exit-item{min-height:46px;padding-left:18px}
    body.cliente-app .main{grid-column:auto;padding:20px 16px 28px}
    body.cliente-app .overview-card{grid-template-columns:1fr 1fr;gap:14px 0;padding:16px 18px}
    body.cliente-app .overview-item{padding:0 14px}
    body.cliente-app .overview-item:nth-child(3){padding-left:0;border-left:0}
    body.cliente-app .resource-row{grid-template-columns:1fr auto;min-height:0;gap:6px 12px;padding:16px 18px}
    body.cliente-app .resource-icon{display:none}
    body.cliente-app .resource-meter{grid-column:1/-1}
    body.cliente-app .bottom-grid{grid-template-columns:1fr}
    body.cliente-app .security-card{grid-template-columns:1fr;justify-items:start;gap:14px}
    body.cliente-app .security-content{padding-left:0}
    body.cliente-app .wordpress-copy{white-space:normal}
    body.cliente-app input,body.cliente-app select,body.cliente-app textarea{max-width:none}
}