/* ============================================================
   WebDesk · Dark glassmorphism design system
   ============================================================ */

:root {
    color-scheme: dark;
    --wd-bg: #030816;
    --wd-bg-2: #07152C;
    --wd-surface: rgba(255, 255, 255, 0.055);
    --wd-surface-strong: #0D1730;
    --wd-surface-hover: rgba(255, 255, 255, 0.085);
    --wd-border: rgba(125, 160, 255, 0.14);
    --wd-border-strong: rgba(147, 183, 255, 0.24);
    --wd-primary: #1877FF;
    --wd-primary-soft: rgba(24, 119, 255, 0.18);
    --wd-cyan: #22D3EE;
    --wd-success: #22C55E;
    --wd-success-soft: rgba(34, 197, 94, 0.14);
    --wd-danger: #FF4D5E;
    --wd-danger-soft: rgba(255, 77, 94, 0.14);
    --wd-warning: #FACC15;
    --wd-warning-soft: rgba(250, 204, 21, 0.14);
    --wd-info-soft: rgba(34, 211, 238, 0.14);
    --wd-text: #EAF2FF;
    --wd-muted: #9CA8BA;
    --wd-muted-2: #6F7E94;
    --wd-radius: 16px;
    --wd-radius-sm: 10px;
    --wd-blur: blur(18px);
    --wd-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 28px -16px rgba(10, 132, 255, 0.25);
    --wd-shadow-strong: 0 1px 0 rgba(255,255,255,0.06) inset, 0 16px 40px -16px rgba(10, 132, 255, 0.35);
    --wd-purple: #A855F7;
    --wd-panel: linear-gradient(145deg, rgba(18, 31, 70, 0.86), rgba(7, 15, 36, 0.92));
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background:
        radial-gradient(900px 620px at 20% -10%, rgba(24, 119, 255, 0.16), transparent 62%),
        radial-gradient(700px 520px at 80% 8%, rgba(168, 85, 247, 0.10), transparent 64%),
        radial-gradient(850px 540px at 86% 100%, rgba(34, 211, 238, 0.10), transparent 62%),
        var(--wd-bg);
    color: var(--wd-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

a { color: var(--wd-primary); text-decoration: none; }
a:hover { color: var(--wd-cyan); }

h1, h2, h3, h4 { color: var(--wd-text); margin: 0 0 12px; font-weight: 700; letter-spacing: 0; }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }
small, .muted { color: var(--wd-muted); }

/* ------------------------------------------------------------
   Layout
------------------------------------------------------------ */
.app {
    display: grid;
    grid-template-columns: 248px 1fr;
    min-height: 100vh;
}

.sidebar {
    background: linear-gradient(180deg, rgba(16, 26, 46, 0.85), rgba(11, 18, 32, 0.85));
    backdrop-filter: var(--wd-blur);
    -webkit-backdrop-filter: var(--wd-blur);
    border-right: 1px solid var(--wd-border);
    padding: 22px 16px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: sticky;
    top: 0;
    height: 100vh;
}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 16px;
    border-bottom: 1px solid var(--wd-border);
    margin-bottom: 6px;
    text-decoration: none;
    color: inherit;
}
.brand:hover { text-decoration: none; }
/* Logo principal: imagen real de WebDesk en lugar de la "W" provisional */
img.brand-logo {
    width: 40px; height: 40px;
    object-fit: contain;
    background: transparent;
    box-shadow: 0 6px 20px -10px rgba(10, 132, 255, 0.55);
    border-radius: 10px;
    display: block;
}
.brand-name {
    font-size: 18px; font-weight: 800; letter-spacing: -0.02em;
    color: var(--wd-text);
    line-height: 1;
}
.brand-name span { color: var(--wd-cyan); }

/* Variante grande para la pantalla de login (auth-card) */
.brand-auth {
    flex-direction: column;
    gap: 10px;
}
img.brand-logo-lg {
    width: 84px; height: 84px;
    border-radius: 18px;
    box-shadow: 0 18px 40px -14px rgba(10, 132, 255, 0.55);
}
.brand-name-lg { font-size: 30px; }
.brand-tagline {
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--wd-muted);
    text-align: center;
    margin-top: -2px;
}

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--wd-muted);
    font-weight: 500;
    transition: background .15s, color .15s;
}
.nav a:hover { background: var(--wd-surface-hover); color: var(--wd-text); }
.nav a.active {
    background: var(--wd-primary-soft);
    color: var(--wd-text);
    box-shadow: inset 0 0 0 1px rgba(10, 132, 255, 0.35);
}
.nav .ico { width: 18px; height: 18px; opacity: .8; }

.sidebar-footer {
    margin-top: auto;
    padding: 12px;
    background: var(--wd-surface);
    border: 1px solid var(--wd-border);
    border-radius: var(--wd-radius-sm);
    font-size: 12px;
    color: var(--wd-muted);
}
.sidebar-footer .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--wd-success); box-shadow: 0 0 12px var(--wd-success); margin-right: 8px; animation: pulse 2s infinite; }
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ------------------------------------------------------------
   Main content
------------------------------------------------------------ */
.main { padding: 22px 28px 60px; max-width: 1500px; }
.topbar {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 22px;
}
.topbar .search {
    flex: 1; max-width: 480px;
    background: var(--wd-surface);
    border: 1px solid var(--wd-border);
    border-radius: var(--wd-radius-sm);
    padding: 10px 14px;
    color: var(--wd-text);
    backdrop-filter: var(--wd-blur);
}
.topbar .spacer { flex: 1; }

/* ------------------------------------------------------------
   Buttons
------------------------------------------------------------ */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
    border: 1px solid var(--wd-border);
    background: var(--wd-surface);
    color: var(--wd-text);
    cursor: pointer;
    transition: all .15s;
    text-decoration: none;
    line-height: 1;
}
.btn:hover { background: var(--wd-surface-hover); border-color: var(--wd-border-strong); }
.btn-primary {
    background: linear-gradient(180deg, #1A8FFF, #0A84FF);
    border-color: rgba(10, 132, 255, 0.4);
    color: #fff;
    box-shadow: 0 8px 22px -10px rgba(10, 132, 255, 0.7);
}
.btn-primary:hover { background: linear-gradient(180deg, #2a9cff, #1a8fff); color:#fff; }
.btn-danger {
    background: var(--wd-danger-soft);
    color: var(--wd-danger);
    border-color: rgba(255, 77, 94, 0.35);
}
.btn-danger:hover { background: rgba(255, 77, 94, 0.22); }
.btn-ghost { background: transparent; }
.btn-sm { padding: 6px 10px; font-size: 12px; }

/* ------------------------------------------------------------
   Glass cards / panels
------------------------------------------------------------ */
.card {
    background: var(--wd-surface);
    border: 1px solid var(--wd-border);
    border-radius: var(--wd-radius);
    backdrop-filter: var(--wd-blur);
    -webkit-backdrop-filter: var(--wd-blur);
    padding: 20px;
    box-shadow: var(--wd-shadow);
}
.card.solid {
    background: var(--wd-surface-strong);
    box-shadow: var(--wd-shadow-strong);
}
.card-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.card-title { font-size: 14px; font-weight: 700; color: var(--wd-text); margin: 0; letter-spacing: 0.02em; text-transform: uppercase; }
.card-title small { font-weight: 500; color: var(--wd-muted); margin-left: 8px; text-transform: none; letter-spacing: 0; }

/* ------------------------------------------------------------
   KPI Cards
------------------------------------------------------------ */
.kpis {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px; margin-bottom: 22px;
}
.kpi {
    background: var(--wd-surface);
    border: 1px solid var(--wd-border);
    border-radius: var(--wd-radius);
    padding: 18px 20px;
    backdrop-filter: var(--wd-blur);
    position: relative;
    overflow: hidden;
}
.kpi::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(120px 60px at 80% -20%, rgba(10,132,255,0.15), transparent 70%);
    pointer-events: none;
}
.kpi-label { font-size: 12px; color: var(--wd-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
.kpi-value { font-size: 36px; font-weight: 800; margin-top: 6px; letter-spacing: -0.02em; }
.kpi-value small { font-size: 14px; font-weight: 500; color: var(--wd-muted); margin-left: 6px; }
.kpi-foot { font-size: 12px; color: var(--wd-muted); margin-top: 6px; }
.kpi.kpi-ok      { border-color: rgba(34, 197, 94, 0.25); }
.kpi.kpi-ok      .kpi-value { color: var(--wd-success); }
.kpi.kpi-danger  { border-color: rgba(255, 77, 94, 0.3); }
.kpi.kpi-danger  .kpi-value { color: var(--wd-danger); }
.kpi.kpi-warning { border-color: rgba(250, 204, 21, 0.3); }
.kpi.kpi-warning .kpi-value { color: var(--wd-warning); }
.kpi.kpi-info    { border-color: rgba(34, 211, 238, 0.3); }
.kpi.kpi-info    .kpi-value { color: var(--wd-cyan); }

/* ------------------------------------------------------------
   Tables
------------------------------------------------------------ */
.table-wrap { overflow-x: auto; border-radius: var(--wd-radius); }
table.glass {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
table.glass thead th {
    text-align: left;
    padding: 12px 14px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wd-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--wd-border);
    background: rgba(255,255,255,0.02);
}
table.glass tbody td {
    padding: 14px;
    border-bottom: 1px solid var(--wd-border);
    vertical-align: middle;
}
table.glass tbody tr:hover { background: var(--wd-surface-hover); }
table.glass tbody tr:last-child td { border-bottom: 0; }

.cell-domain { display: flex; flex-direction: column; gap: 2px; }
.cell-domain a { color: var(--wd-text); font-weight: 600; }
.cell-domain a:hover { color: var(--wd-cyan); }
.cell-domain small { color: var(--wd-muted); font-size: 12px; }

/* ------------------------------------------------------------
   Status chips / badges
------------------------------------------------------------ */
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 999px;
    line-height: 1;
    border: 1px solid var(--wd-border);
    background: var(--wd-surface);
    color: var(--wd-muted);
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wd-muted); }
.chip-ok      { background: var(--wd-success-soft); color: var(--wd-success); border-color: rgba(34, 197, 94, 0.35); }
.chip-ok .dot { background: var(--wd-success); box-shadow: 0 0 10px var(--wd-success); }
.chip-danger  { background: var(--wd-danger-soft);  color: var(--wd-danger);  border-color: rgba(255, 77, 94, 0.35); }
.chip-danger .dot { background: var(--wd-danger); box-shadow: 0 0 10px var(--wd-danger); }
.chip-warning { background: var(--wd-warning-soft); color: var(--wd-warning); border-color: rgba(250, 204, 21, 0.35); }
.chip-warning .dot { background: var(--wd-warning); }
.chip-warn    { background: rgba(245,158,11,0.15);  color: #F59E0B;          border-color: rgba(245,158,11,0.35); }
.chip-info    { background: var(--wd-info-soft);    color: var(--wd-cyan);    border-color: rgba(34, 211, 238, 0.35); }
.chip-info .dot { background: var(--wd-cyan); box-shadow: 0 0 10px var(--wd-cyan); }
.chip-muted   { color: var(--wd-muted); }

/* ------------------------------------------------------------
   Forms
------------------------------------------------------------ */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.form-grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; color: var(--wd-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.input, .select, .textarea, select.select, select {
    background: var(--wd-surface);
    border: 1px solid var(--wd-border);
    color: var(--wd-text);
    border-radius: 10px;
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
    width: 100%;
    transition: border-color .15s, box-shadow .15s;
    /* color-scheme indica al navegador que use widget en modo oscuro */
    color-scheme: dark;
}
.input:focus, .select:focus, .textarea:focus, select:focus {
    outline: none;
    border-color: rgba(10,132,255,0.6);
    box-shadow: 0 0 0 3px rgba(10,132,255,0.2);
}
.textarea { min-height: 90px; resize: vertical; }
.help { font-size: 12px; color: var(--wd-muted); }

/* ------------------------------------------------------------
   Select nativo: estilos para la flecha y la lista de opciones
   ------------------------------------------------------------
   Problema: en muchos navegadores (Chrome/Edge en Windows, Firefox
   con tema claro) las <option> heredaban un fondo blanco que hacía
   ilegible el texto al desplegar el <select>. Forzamos fondo oscuro
   y texto claro tanto para el control como para las options.
*/
.select, select.select, select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--wd-muted) 50%),
        linear-gradient(135deg, var(--wd-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 34px;
    cursor: pointer;
}
.select:disabled, select:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* Las <option> y <optgroup> se renderizan con el chrome del SO,
   pero la mayoría de navegadores respetan estos colores. */
.select option,
select option,
.select optgroup,
select optgroup {
    background-color: #101A2E;       /* var(--wd-surface-strong) */
    color: #EAF2FF;                  /* var(--wd-text) */
}
.select option:checked,
select option:checked,
.select option:hover,
select option:hover {
    background-color: #0A84FF;       /* var(--wd-primary) */
    color: #fff;
}

/* Selects multiples / con tamaño: no llevan flecha custom */
select[multiple],
select[size]:not([size="1"]) {
    background-image: none;
    padding-right: 12px;
}

/* ------------------------------------------------------------
   Alerts / flash
------------------------------------------------------------ */
.flashes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.alert {
    padding: 12px 16px;
    border-radius: var(--wd-radius-sm);
    border: 1px solid var(--wd-border);
    background: var(--wd-surface);
    font-size: 13px;
}
.alert-success { background: var(--wd-success-soft); color: var(--wd-success); border-color: rgba(34, 197, 94, 0.35); }
.alert-error   { background: var(--wd-danger-soft);  color: var(--wd-danger);  border-color: rgba(255, 77, 94, 0.35); }
.alert-info    { background: var(--wd-info-soft);    color: var(--wd-cyan);    border-color: rgba(34, 211, 238, 0.35); }

/* ------------------------------------------------------------
   Auth (login / 2fa)
------------------------------------------------------------ */
.auth-shell {
    min-height: 100vh; display: grid; place-items: center; padding: 24px;
}
.auth-card {
    width: 100%; max-width: 420px;
    background: var(--wd-surface-strong);
    border: 1px solid var(--wd-border);
    border-radius: var(--wd-radius);
    padding: 32px;
    backdrop-filter: var(--wd-blur);
    box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6), 0 0 0 1px rgba(10,132,255,0.04);
}
.auth-card .brand { border: 0; padding: 0 0 18px; margin: 0 0 18px; justify-content: center; }
.auth-card h1 { text-align: center; font-size: 22px; }
.auth-card .help-link { text-align: center; margin-top: 18px; font-size: 12px; color: var(--wd-muted); }

/* ------------------------------------------------------------
   Misc
------------------------------------------------------------ */
.row { display: flex; align-items: center; gap: 12px; }
.row.gap-sm { gap: 8px; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 6px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 6px; } .mt-2 { margin-top: 12px; } .mt-3 { margin-top: 18px; } .mt-4 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 12px; } .mb-3 { margin-bottom: 18px; }
.text-mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; }
.token-box {
    background: rgba(10, 132, 255, 0.06);
    border: 1px dashed rgba(10, 132, 255, 0.4);
    border-radius: 10px;
    padding: 12px 14px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    color: var(--wd-cyan);
    word-break: break-all;
    user-select: all;
}

/* ------------------------------------------------------------
   Mini bar (uptime distribution)
------------------------------------------------------------ */
.bar-stack {
    display: flex; height: 8px; border-radius: 999px; overflow: hidden;
    background: rgba(255,255,255,0.06);
}
.bar-stack > span { display: block; height: 100%; }
.bar-ok      { background: var(--wd-success); }
.bar-warning { background: var(--wd-warning); }
.bar-down    { background: var(--wd-danger); }

/* ------------------------------------------------------------
   Dashboard redesign
------------------------------------------------------------ */
.app {
    grid-template-columns: 220px minmax(0, 1fr);
}

.sidebar {
    background:
        linear-gradient(180deg, rgba(6, 18, 42, 0.94), rgba(4, 12, 28, 0.96)),
        radial-gradient(220px 220px at 35% 4%, rgba(34, 211, 238, 0.12), transparent 70%);
    padding: 26px 16px 22px;
    border-right-color: rgba(80, 126, 220, 0.22);
}

.brand {
    border-bottom: 0;
    padding: 0 10px 22px;
    margin-bottom: 4px;
}

img.brand-logo {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    box-shadow: 0 0 0 1px rgba(34, 211, 238, .35), 0 12px 32px -14px rgba(34, 211, 238, .8);
}

.brand-name {
    font-size: 20px;
}

.nav {
    gap: 8px;
}

.nav a {
    min-height: 46px;
    padding: 0 14px;
    gap: 12px;
    border-radius: 10px;
    color: #A8B5D1;
}

.nav a.active {
    background: linear-gradient(135deg, rgba(40, 84, 255, .30), rgba(24, 119, 255, .18));
    border: 1px solid rgba(72, 123, 255, .34);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 34px -26px rgba(24, 119, 255, .9);
}

.nav-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #A7B8FF;
}

.nav-icon svg {
    width: 21px;
    height: 21px;
    display: block;
}

.nav a:hover .nav-icon { color: #CFDBFF; }

.nav a.active .nav-icon {
    color: #E3EBFF;
    filter: drop-shadow(0 0 6px rgba(90, 140, 255, .55));
}

/* ------------------------------------------------------------
   Iconos SVG globales (wd-icons.js sustituye símbolos Unicode)
------------------------------------------------------------- */
.wdi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.2em;
    flex-shrink: 0;
}

.wdi svg {
    width: 100%;
    height: 100%;
    display: block;
}

.sidebar-footer {
    padding: 18px;
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
}

.main {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 34px 44px;
}

.topbar {
    min-height: 52px;
    margin-bottom: 28px;
}

.topbar-spacer {
    flex: 1;
}

.topbar-menu,
.topbar-alert,
.topbar-avatar,
.topbar-logout {
    width: 46px;
    height: 46px;
    display: inline-grid;
    place-items: center;
    border-radius: 11px;
    border: 1px solid var(--wd-border);
    background: rgba(255,255,255,.065);
    color: var(--wd-text);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.topbar-menu {
    font: inherit;
    cursor: pointer;
}

.topbar-search {
    width: min(100%, 260px);
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px 0 16px;
    border: 1px solid var(--wd-border);
    border-radius: 11px;
    background: rgba(255,255,255,.065);
    color: var(--wd-muted);
}

.topbar-search input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--wd-text);
    font: inherit;
}

.topbar-search kbd {
    padding: 4px 7px;
    border-radius: 7px;
    background: rgba(255,255,255,.07);
    color: #8794B3;
    font: 11px 'Inter', sans-serif;
}

.topbar-alert {
    position: relative;
    color: #F94760;
}

.topbar-alert em {
    position: absolute;
    top: -6px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #F94760;
    color: #fff;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.topbar-avatar {
    border-radius: 999px;
    font-weight: 800;
    background: linear-gradient(145deg, #283854, #151F34);
}

.topbar-user-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    color: var(--wd-text);
}

.topbar-user-copy strong {
    font-size: 13px;
}

.topbar-user-copy span {
    color: var(--wd-muted);
    font-size: 11px;
}

.topbar-logout {
    width: 26px;
    height: 26px;
    border: 0;
    background: transparent;
    color: var(--wd-muted);
}

.dashboard-shell {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dashboard-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.dashboard-hero h1 {
    margin: 0 0 6px;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.1;
}

.dashboard-hero p {
    margin: 0;
    color: #C1CADB;
    font-size: 16px;
}

.dashboard-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.dashboard-actions .btn {
    min-height: 52px;
    padding-inline: 22px;
}

.dash-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}

.dash-kpi {
    min-height: 214px;
    position: relative;
    overflow: hidden;
    padding: 24px 22px 18px;
    border: 1px solid var(--wd-border);
    border-radius: 16px;
    background: var(--wd-panel);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 55px -40px rgba(0,0,0,.95);
}

.dash-kpi::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .85;
    pointer-events: none;
}

.dash-kpi span,
.dash-kpi p {
    position: relative;
    z-index: 1;
}

.dash-kpi > span {
    display: block;
    min-height: 38px;
    color: #DFE7F8;
    font-size: 14px;
    font-weight: 600;
}

.dash-kpi strong {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 20px;
    font-size: 38px;
    line-height: 1;
    color: var(--wd-text);
}

.dash-kpi small {
    font-size: 18px;
    color: #CBD5E1;
}

.dash-kpi p {
    margin: 12px 0 0;
    color: #AAB7CF;
}

.dash-kpi-ok::before { background: radial-gradient(180px 140px at 80% 15%, rgba(8, 205, 130, .18), transparent 70%); }
.dash-kpi-danger::before { background: radial-gradient(180px 140px at 80% 15%, rgba(255, 77, 94, .18), transparent 70%); }
.dash-kpi-warning::before { background: radial-gradient(180px 140px at 80% 15%, rgba(250, 204, 21, .16), transparent 70%); }
.dash-kpi-purple::before { background: radial-gradient(180px 140px at 80% 15%, rgba(168, 85, 247, .18), transparent 70%); }
.dash-kpi-blue::before { background: radial-gradient(180px 140px at 80% 15%, rgba(24, 119, 255, .20), transparent 70%); }
.dash-kpi-ok strong { color: #27F08A; }
.dash-kpi-danger strong { color: #FF5064; }
.dash-kpi-warning strong { color: #FFD84A; }
.dash-kpi-purple strong { color: #BF6AFF; }
.dash-kpi-blue strong { color: #6EA7FF; }

.spark {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 22px;
    height: 42px;
}

.spark::before {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: polygon(0 72%, 12% 50%, 23% 58%, 34% 56%, 45% 76%, 58% 61%, 70% 52%, 82% 63%, 92% 42%, 100% 18%, 100% 100%, 0 100%);
    opacity: .24;
}

.spark::after {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: polygon(0 72%, 12% 50%, 23% 58%, 34% 56%, 45% 76%, 58% 61%, 70% 52%, 82% 63%, 92% 42%, 100% 18%, 100% 24%, 92% 48%, 82% 69%, 70% 58%, 58% 67%, 45% 82%, 34% 62%, 23% 64%, 12% 56%, 0 78%);
}

.spark-ok::before,
.spark-ok::after { background: #25E982; }
.spark-danger::before,
.spark-danger::after { background: #FF4D5E; }
.spark-warning::before,
.spark-warning::after { background: #FACC15; }
.spark-purple::before,
.spark-purple::after { background: #B85CFF; }

.mini-bars {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 22px;
    height: 54px;
    display: flex;
    align-items: flex-end;
    gap: 9px;
}

.mini-bars b {
    flex: 1;
    min-width: 5px;
    border-radius: 5px 5px 0 0;
    background: linear-gradient(180deg, #4898FF, #1C64D8);
    box-shadow: 0 0 18px rgba(24,119,255,.38);
}

.system-panel,
.dash-card,
.tip-card {
    border: 1px solid var(--wd-border);
    border-radius: 16px;
    background: var(--wd-panel);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 22px 70px -54px rgba(0,0,0,.95);
}

.system-panel {
    min-height: 200px;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 150px 1fr 1fr 260px;
    align-items: center;
    gap: 26px;
    padding: 34px 34px 34px 40px;
    background:
        radial-gradient(520px 220px at 18% 50%, rgba(25, 239, 139, .18), transparent 62%),
        linear-gradient(135deg, rgba(4, 82, 86, .46), rgba(12, 22, 48, .94) 45%, rgba(7, 92, 96, .48));
}

.system-panel-warning {
    background:
        radial-gradient(520px 220px at 18% 50%, rgba(250, 204, 21, .14), transparent 62%),
        linear-gradient(135deg, rgba(74, 35, 28, .48), rgba(12, 22, 48, .94) 45%, rgba(7, 92, 96, .42));
}

.system-heart {
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 5px solid rgba(39, 240, 138, .28);
    box-shadow: 0 0 42px rgba(39,240,138,.38), inset 0 0 28px rgba(39,240,138,.10);
}

.system-heart span {
    color: #27F08A;
    font-size: 62px;
    line-height: 1;
    text-shadow: 0 0 24px rgba(39,240,138,.9);
}

.system-copy span,
.system-side span {
    display: block;
    color: #D7E4F9;
    font-weight: 700;
    margin-bottom: 8px;
}

.system-copy strong {
    display: block;
    font-size: 30px;
    line-height: 1.1;
    margin-bottom: 10px;
}

.system-copy p,
.system-side p {
    margin: 0;
    color: #B8C4D8;
}

.system-grid-art {
    align-self: stretch;
    min-height: 130px;
    opacity: .55;
    background-image:
        radial-gradient(circle, rgba(34,211,238,.55) 1px, transparent 1.5px),
        linear-gradient(100deg, transparent 48%, rgba(34,211,238,.28), transparent 55%);
    background-size: 14px 14px, 100% 100%;
    mask-image: radial-gradient(ellipse at center, #000 0, transparent 72%);
}

.system-side {
    display: grid;
    gap: 10px;
    justify-items: stretch;
}

.system-side em {
    position: absolute;
    top: 48px;
    right: 40px;
    color: #27F08A;
    font-style: normal;
    font-weight: 800;
}

.system-side em i {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 999px;
    background: #27F08A;
    box-shadow: 0 0 14px #27F08A;
}

.system-side .btn,
.next-card .btn,
.tip-card .btn {
    justify-content: center;
    min-height: 56px;
    margin-top: 10px;
    background: rgba(255,255,255,.08);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, .95fr);
    gap: 20px;
}

.dash-card {
    padding: 24px;
}

.dash-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.dash-card-head h2 {
    margin: 0;
    font-size: 20px;
}

.pill-danger {
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,77,94,.20);
    color: #FF6B7A;
    font-size: 12px;
    font-weight: 800;
}

.attention-list {
    display: grid;
    gap: 10px;
}

.attention-item {
    min-height: 76px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) minmax(170px, .8fr) auto;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border: 1px solid rgba(125,160,255,.14);
    border-radius: 10px;
    background: rgba(255,255,255,.035);
    color: var(--wd-text);
}

.attention-item.is-critical {
    border-color: rgba(255,77,94,.46);
    background: linear-gradient(90deg, rgba(255,77,94,.18), rgba(255,255,255,.035));
}

.site-mark {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #fff;
    color: #12192B;
    font-weight: 900;
}

.attention-item strong,
.attention-item em {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-style: normal;
}

.attention-item strong {
    min-width: 0;
}

.attention-item strong small,
.attention-item em small,
.success-toast small {
    color: #AAB7CF;
    font-size: 12px;
    font-weight: 500;
}

.attention-item em {
    color: #FFD84A;
}

.attention-item.is-critical em {
    color: #FF6B7A;
}

.attention-item b {
    padding: 10px 15px;
    border-radius: 9px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    font-size: 12px;
}

.attention-item.is-critical b {
    background: linear-gradient(180deg, #FF5F69, #E93247);
}

.dash-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    color: #89B5FF;
    font-weight: 600;
}

.next-card {
    display: flex;
    flex-direction: column;
}

.next-date {
    min-height: 154px;
    display: grid;
    grid-template-columns: 90px 1fr;
    grid-template-rows: auto 1fr;
    align-items: center;
    gap: 0 18px;
    padding: 22px;
    border: 1px solid var(--wd-border);
    border-radius: 12px;
    background: rgba(255,255,255,.035);
}

.next-date strong {
    grid-row: span 2;
    color: #80AFFF;
    font-size: 50px;
    line-height: 1;
}

.next-date span {
    color: #BBD0F6;
    font-size: 18px;
    font-weight: 500;
}

.next-date p {
    margin: 0;
    color: #AAB7CF;
}

.next-date p b {
    display: block;
    color: var(--wd-text);
    margin-bottom: 3px;
}

.activity-card {
    min-height: 380px;
}

.activity-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 430px;
    gap: 24px;
    align-items: center;
}

.activity-list {
    display: grid;
    gap: 20px;
}

.activity-item {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 150px;
    gap: 12px;
    align-items: center;
}

.activity-item span {
    width: 15px;
    height: 15px;
    border-radius: 999px;
    background: #27D978;
    box-shadow: 0 0 16px rgba(39,217,120,.75);
}

.activity-item p {
    margin: 0;
    color: #9EADCA;
}

.activity-item p b {
    display: block;
    color: #E8F1FF;
    margin-top: 3px;
}

.activity-item time {
    color: #AAB7CF;
    font-size: 12px;
    text-align: right;
}

.activity-visual {
    position: relative;
    height: 270px;
}

.mock-window {
    position: absolute;
    inset: 20px 34px 0 0;
    border-radius: 12px;
    transform: perspective(900px) rotateY(-8deg) rotateX(4deg);
    background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 30px 60px -38px #000;
}

.mock-window > i {
    position: relative;
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 18px 0 0 9px;
    border-radius: 999px;
    background: #22C55E;
}

.mock-window > i:nth-child(2) { background: #FACC15; }
.mock-window > i:nth-child(3) { background: #A855F7; }

.mock-chart {
    position: absolute;
    left: 110px;
    top: 85px;
    width: 125px;
    height: 85px;
    border-left: 1px solid rgba(255,255,255,.1);
    border-bottom: 1px solid rgba(255,255,255,.1);
}

.mock-chart::before {
    content: "";
    position: absolute;
    inset: 12px 8px 14px;
    background: linear-gradient(130deg, transparent 0 18%, #25E982 19% 24%, transparent 25% 42%, #25E982 43% 49%, transparent 50% 66%, #25E982 67% 73%, transparent 74%);
    filter: drop-shadow(0 0 10px rgba(37,233,130,.6));
}

.mock-donut {
    position: absolute;
    right: 44px;
    top: 62px;
    width: 92px;
    height: 92px;
    border-radius: 999px;
    background: conic-gradient(#264BFF 0 34%, #22A6FF 34% 64%, #8A3FFC 64% 100%);
}

.mock-donut::after {
    content: "";
    position: absolute;
    inset: 22px;
    border-radius: inherit;
    background: #12192B;
}

.mock-card {
    position: absolute;
    left: -46px;
    top: 92px;
    width: 120px;
    height: 82px;
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
    box-shadow: 0 20px 40px -28px #000;
}

.mock-card::before,
.mock-card::after {
    content: "";
    position: absolute;
    left: 18px;
    height: 8px;
    border-radius: 999px;
    background: rgba(226,236,255,.65);
}

.mock-card::before {
    top: 24px;
    width: 56px;
}

.mock-card::after {
    top: 44px;
    width: 78px;
}

.success-toast {
    position: absolute;
    right: 0;
    bottom: 10px;
    width: 220px;
    min-height: 82px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(16px);
}

.success-toast b {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #22C55E;
    color: #07152C;
    font-size: 22px;
}

.success-toast span {
    display: flex;
    flex-direction: column;
    color: #fff;
    font-weight: 800;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.summary-box {
    min-height: 178px;
    padding: 20px;
    border: 1px solid var(--wd-border);
    border-radius: 10px;
    background: rgba(255,255,255,.035);
}

.summary-box h3 {
    margin-bottom: 18px;
    font-size: 14px;
    font-weight: 700;
}

.cms-box {
    display: grid;
    grid-template-columns: 116px 1fr;
    gap: 10px 20px;
    align-items: center;
}

.cms-box h3 {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

.cms-ring {
    width: 98px;
    height: 98px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: conic-gradient(#30D67A 0 calc(var(--wp) * 1%), #5765FF calc(var(--wp) * 1%) calc((var(--wp) + var(--ps)) * 1%), #22D3EE 0);
    position: relative;
}

.cms-ring::after {
    content: "";
    position: absolute;
    inset: 25px;
    border-radius: inherit;
    background: #101B38;
}

.cms-ring strong,
.cms-ring span {
    position: relative;
    z-index: 1;
    line-height: 1;
}

.cms-ring strong {
    align-self: end;
    font-size: 24px;
}

.cms-ring span {
    align-self: start;
    color: #AAB7CF;
    font-size: 11px;
}

.cms-box p {
    margin: 0 0 9px;
    color: #C8D4EA;
}

.cms-box p i {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 8px;
    border-radius: 999px;
}

.cms-box p b {
    float: right;
}

.legend-wp { background: #30D67A; }
.legend-ps { background: #5765FF; }

.health-line {
    height: 12px;
    margin: 34px 0 22px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
}

.health-line span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #24D877, #2FE992);
    box-shadow: 0 0 22px rgba(36,216,119,.5);
}

.health-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.gauge {
    width: 150px;
    height: 86px;
    margin: 28px auto 0;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.gauge span {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 150px;
    border-radius: 999px;
    background: conic-gradient(from 270deg, #2AD87A 0 72%, rgba(255,255,255,.18) 72% 100%);
}

.gauge span::after {
    content: "";
    position: absolute;
    inset: 13px;
    border-radius: inherit;
    background: #101B38;
}

.gauge strong,
.gauge small {
    position: relative;
    z-index: 1;
    display: block;
}

.gauge strong {
    padding-top: 44px;
    font-size: 20px;
}

.gauge small {
    color: #AAB7CF;
}

.compact-table {
    display: grid;
    gap: 8px;
}

.compact-table a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px 120px;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--wd-border);
    border-radius: 10px;
    background: rgba(255,255,255,.035);
}

.compact-table strong {
    color: var(--wd-text);
}

.compact-table span,
.compact-table em {
    color: var(--wd-muted);
    font-style: normal;
}

.tip-card {
    min-height: 102px;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 220px;
    gap: 20px;
    align-items: center;
    padding: 22px 26px;
}

.tip-card > span {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: radial-gradient(circle at 35% 25%, #62E6FF, #0A84FF 75%);
    box-shadow: 0 0 26px rgba(34,211,238,.4);
}

.tip-card p {
    margin: 0;
    color: #B8C4D8;
}

.tip-card strong {
    display: block;
    color: #fff;
    margin-bottom: 4px;
}

.empty-state {
    margin: 0;
    color: var(--wd-muted);
}

/* ------------------------------------------------------------
   Responsive
------------------------------------------------------------ */
@media (max-width: 980px) {
    /* El armazón de la aplicación en móvil (barra lateral como cajón,
       cabecera fija y compacta) vive al final de este fichero, en el
       bloque "Armazón responsive". Aquí solo quedan las rejillas de
       contenido. Antes .sidebar/.nav se aplanaban en una parrilla de
       enlaces sobre el contenido y el botón ☰ no hacía nada. */
    .form-grid, .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .dashboard-hero,
    .dashboard-actions { align-items: flex-start; justify-content: flex-start; }
    .dashboard-hero { flex-direction: column; }
    .dash-kpis,
    .dashboard-grid,
    .activity-layout,
    .summary-grid,
    .system-panel,
    .tip-card { grid-template-columns: 1fr; }
    .dash-kpi { min-height: 180px; }
    .system-panel { padding: 24px; }
    .system-grid-art { display: none; }
    .system-side em { position: static; }
    .attention-item { grid-template-columns: 34px minmax(0, 1fr); }
    .attention-item em,
    .attention-item b { grid-column: 2; }
    .activity-visual { display: none; }
    .activity-item { grid-template-columns: 24px minmax(0, 1fr); }
    .activity-item time { grid-column: 2; text-align: left; }
}

/* ------------------------------------------------------------
   ProjectSuite Picker (select con buscador)
------------------------------------------------------------ */
.ps-picker { position: relative; }
/* Cuando el picker está abierto, elevamos su stacking para que
 * el desplegable no se vea cortado por otros pickers/inputs que
 * vienen después en el formulario. */
.ps-picker.is-open { z-index: 50; }

.ps-picker-control {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--wd-surface);
    border: 1px solid var(--wd-border-strong);
    border-radius: 10px;
    padding: 6px 10px;
    cursor: pointer;
    transition: border-color .15s;
}
.ps-picker.is-open .ps-picker-control,
.ps-picker-control:focus-within {
    border-color: rgba(10, 132, 255, 0.6);
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.15);
}

.ps-picker-search {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--wd-text);
    font: inherit;
    font-size: 14px;
    min-width: 0;
    cursor: pointer;
}
.ps-picker-search:focus { cursor: text; }
.ps-picker-search::placeholder { color: var(--wd-muted-2); }

.ps-picker-toggle,
.ps-picker-clear,
.ps-picker-refresh {
    background: none;
    border: none;
    color: var(--wd-muted);
    cursor: pointer;
    padding: 4px 10px;
    font-size: 16px;
    line-height: 1;
    min-width: 34px;
    border-radius: 4px;
    transition: color .15s, background .15s, transform .15s ease;
}
.ps-picker-toggle:hover,
.ps-picker-clear:hover,
.ps-picker-refresh:hover { color: var(--wd-text); background: var(--wd-surface-hover); }
.ps-picker.is-open .ps-picker-toggle { transform: rotate(180deg); }
.ps-picker-refresh.is-loading {
    color: var(--wd-primary);
    animation: ps-picker-spin .8s linear infinite;
}
@keyframes ps-picker-spin { to { transform: rotate(360deg); } }
.ps-picker-refresh-link {
    color: var(--wd-primary);
    text-decoration: none;
    margin-left: 4px;
}
.ps-picker-refresh-link:hover { text-decoration: underline; }

/* Dropdown de resultados */
.ps-picker-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    z-index: 1000;
    background: #101a2e;
    border: 1px solid var(--wd-border-strong);
    border-radius: 12px;
    box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.7);
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
    /* Usamos block-layout para que max-height + overflow-y funcionen
     * de forma 100% predecible. Con flex-column en algunos navegadores
     * los hijos no respetaban el clip y "se salían" del dropdown,
     * dejando una línea/zona extraña entre items donde se veía el
     * siguiente input del formulario. */
}
.ps-picker-results .ps-picker-item + .ps-picker-item { margin-top: 2px; }
.ps-picker-results::-webkit-scrollbar { width: 6px; }
.ps-picker-results::-webkit-scrollbar-track { background: transparent; }
.ps-picker-results::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 99px; }

.ps-picker-item {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
    color: var(--wd-text);
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: background .1s;
}
.ps-picker-item:hover,
.ps-picker-item:focus { background: var(--wd-surface-hover); outline: none; }
.ps-picker-item strong { font-weight: 600; color: var(--wd-text); }
.ps-picker-meta { font-size: 11px; color: var(--wd-muted); }

.ps-picker-empty,
.ps-picker-footer {
    padding: 8px 10px;
    font-size: 12px;
    color: var(--wd-muted);
    text-align: center;
}
.ps-picker-footer { border-top: 1px solid var(--wd-border); margin-top: 4px; padding-top: 8px; }

/* ------------------------------------------------------------
   Tabs (dark)
------------------------------------------------------------ */
.tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--wd-border);
    margin-bottom: 18px;
    overflow-x: auto;
}
.tabs .tab {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--wd-muted);
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 0;
    transition: color .15s, border-color .15s, background .15s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.tabs .tab:hover { color: var(--wd-text); background: var(--wd-surface-hover); }
.tabs .tab.active {
    color: var(--wd-text);
    border-bottom-color: var(--wd-primary);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ------------------------------------------------------------
   Pagination
------------------------------------------------------------ */
.pagination {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
    padding: 12px 14px;
    flex-wrap: wrap;
}
.pagination a, .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--wd-muted);
    border: 1px solid var(--wd-border);
    background: var(--wd-surface);
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}
.pagination a:hover { color: var(--wd-text); background: var(--wd-surface-hover); border-color: var(--wd-border-strong); }
.pagination .current {
    background: var(--wd-primary-soft);
    border-color: rgba(10,132,255,0.4);
    color: var(--wd-text);
}
.pagination .disabled { opacity: .45; pointer-events: none; }
.pagination .info { border: 0; background: transparent; color: var(--wd-muted-2); font-size: 12px; }
.pagination .gap { border: 0; background: transparent; color: var(--wd-muted-2); }

/* Sortable headers */
th.sortable a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--wd-muted);
    text-decoration: none;
}
th.sortable a:hover { color: var(--wd-text); }
th.sortable .sort-arrow {
    font-size: 10px;
    opacity: .55;
}
th.sortable.is-active a { color: var(--wd-text); }
th.sortable.is-active .sort-arrow { opacity: 1; color: var(--wd-cyan); }

/* Botón icónico (sin borde) */
.btn-icon {
    padding: 6px 8px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--wd-border);
    color: var(--wd-muted);
    cursor: pointer;
    transition: all .15s;
    font-size: 13px;
    line-height: 1;
}
.btn-icon:hover { background: var(--wd-surface-hover); color: var(--wd-text); }

/* ------------------------------------------------------------
   Fix de overflow: la columna de contenido es un ítem de la
   rejilla .app. Sin min-width:0 su tamaño mínimo es el de su
   contenido, de modo que una tabla ancha empuja la rejilla y se
   sale de la pantalla en vez de dejar que el contenedor con
   overflow-x:auto haga scroll. min-width:0 solo relaja ese mínimo.
------------------------------------------------------------ */
.main { min-width: 0; }

/* ============================================================
   Premium operational views · Dashboard, Clients & Hosting
   ============================================================ */
.page-eyebrow {
    display: block;
    margin-bottom: 7px;
    color: #72A8FF;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

/* ------------------------------------------------------------
   Clients
------------------------------------------------------------ */
.clients-page { display: flex; flex-direction: column; gap: 20px; }
.clients-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
}
.clients-hero h1 { margin: 0 0 7px; font-size: clamp(28px, 3vw, 38px); letter-spacing: -.04em; }
.clients-hero p { margin: 0; color: #9EABC0; font-size: 15px; }
.clients-primary-action { min-height: 46px; padding-inline: 19px; }
.clients-overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.clients-overview article {
    position: relative;
    overflow: hidden;
    min-height: 104px;
    padding: 19px 21px;
    border: 1px solid rgba(126, 160, 219, .15);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(17,31,66,.82), rgba(8,16,37,.88));
    box-shadow: inset 0 1px rgba(255,255,255,.045);
}
.clients-overview article::after {
    content: "";
    position: absolute;
    right: -35px;
    top: -50px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: rgba(45, 120, 255, .11);
    filter: blur(2px);
}
.clients-overview span { display: block; color: #92A0B7; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.clients-overview strong { display: inline-block; margin: 7px 8px 0 0; font-size: 29px; line-height: 1; }
.clients-overview small { font-size: 12px; }
.clients-table-card {
    overflow: hidden;
    border: 1px solid rgba(126, 160, 219, .16);
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(13,26,55,.93), rgba(6,13,30,.96));
    box-shadow: inset 0 1px rgba(255,255,255,.045), 0 28px 70px -50px #000;
}
.clients-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 17px;
    border-bottom: 1px solid rgba(126,160,219,.13);
    background: rgba(255,255,255,.018);
}
.clients-search,
.hosting-search {
    min-width: 280px;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    padding: 0 11px 0 14px;
    border: 1px solid rgba(126,160,219,.18);
    border-radius: 10px;
    background: rgba(3,9,24,.52);
    color: #73819A;
}
.clients-search:focus-within,
.hosting-search:focus-within { border-color: rgba(72,143,255,.55); box-shadow: 0 0 0 3px rgba(24,119,255,.11); }
.clients-search input,
.hosting-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--wd-text); font: inherit; }
.clients-search kbd,
.hosting-search kbd { padding: 3px 6px; border-radius: 6px; background: rgba(255,255,255,.06); color: #6F7E96; font: 10px Inter,sans-serif; }
.clients-segments { display: flex; padding: 3px; border: 1px solid rgba(126,160,219,.15); border-radius: 10px; background: rgba(3,9,24,.45); }
.clients-segments button {
    min-height: 34px;
    padding: 0 11px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #8491A7;
    font: 600 11px Inter,sans-serif;
    cursor: pointer;
}
.clients-segments button b { margin-left: 3px; color: #B9C4D8; }
.clients-segments button.is-active { background: rgba(38,112,240,.18); color: #E6F0FF; box-shadow: inset 0 0 0 1px rgba(65,137,255,.22); }
.clients-visible,
.hosting-visible { white-space: nowrap; color: #77869D; font-size: 11px; }
.clients-visible b,
.hosting-visible b { color: #DDE8F9; }
.clients-table-wrap { border-radius: 0; }
.clients-table { width: 100%; min-width: 1000px; border-collapse: collapse; }
.clients-table th {
    height: 49px;
    padding: 0 13px;
    border-bottom: 1px solid rgba(126,160,219,.14);
    color: #74839B;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-align: left;
    text-transform: uppercase;
}
.clients-table th button { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.clients-table th[aria-sort] button { color: #B8C9E5; }
.clients-table th button > span { opacity: .45; }
.clients-table .metric-head { text-align: center; }
.clients-table .metric-head button { justify-content: center; width: 100%; }
.clients-table .metric-head i { width: 5px; height: 5px; border-radius: 50%; background: #508BFF; box-shadow: 0 0 8px currentColor; }
.clients-table .metric-head i.is-maint { background: #2DD47F; }
.clients-table .metric-head i.is-dev { background: #B46CFF; }
.clients-table .metric-head i.is-cert { background: #35D5E7; }
.clients-table .metric-head i.is-domain { background: #F6B94A; }
.clients-table .metric-head i.is-hosting { background: #8176FF; }
.clients-table td { height: 82px; padding: 12px 13px; border-bottom: 1px solid rgba(126,160,219,.10); text-align: center; vertical-align: middle; transition: background .16s; }
.clients-table tbody tr:last-child td { border-bottom: 0; }
.clients-table tbody .js-client-row:hover td { background: rgba(76,128,220,.055); }
.client-main-cell { min-width: 230px; display: flex; align-items: center; gap: 12px; text-align: left !important; }
.client-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(105,155,255,.32);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(54,120,239,.34), rgba(103,69,203,.23));
    color: #DDEAFF;
    font-size: 12px;
    font-weight: 800;
    box-shadow: inset 0 1px rgba(255,255,255,.08);
}
.client-identity { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.client-identity strong { max-width: 210px; overflow: hidden; color: #F2F6FF; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.client-identity small { max-width: 210px; overflow: hidden; color: #7F8CA3; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.client-identity em { margin-top: 4px; padding: 2px 6px; border-radius: 5px; background: rgba(42,128,255,.11); color: #6EA8FF; font-size: 8.5px; font-style: normal; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.client-count { min-width: 29px; height: 29px; display: inline-grid; place-items: center; border: 1px solid rgba(75,133,255,.22); border-radius: 9px; background: rgba(49,111,226,.10); color: #78A8FF; font-size: 11px; font-weight: 800; }
.client-count-link { display: inline-flex; border-radius: 9px; }
.client-count-link:hover .client-count { transform: translateY(-1px); border-color: currentColor; }
.client-count.is-green { background: rgba(45,212,127,.09); border-color: rgba(45,212,127,.20); color: #44D88B; }
.client-count.is-purple { background: rgba(180,108,255,.09); border-color: rgba(180,108,255,.20); color: #BD7BFF; }
.client-count.is-cyan { background: rgba(53,213,231,.09); border-color: rgba(53,213,231,.20); color: #47DCEB; }
.client-count.is-amber { background: rgba(246,185,74,.09); border-color: rgba(246,185,74,.20); color: #F6BE5A; }
.client-count.is-indigo { background: rgba(129,118,255,.10); border-color: rgba(129,118,255,.22); color: #9A91FF; }
.client-count.is-empty { border-color: transparent; background: transparent; color: #526078; font-weight: 500; }
.client-total { color: #F2F6FF; font-size: 13px; }
.client-status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: #A8B4C7; font-size: 10px; font-weight: 700; }
.client-status i { width: 6px; height: 6px; border-radius: 50%; background: #64748B; }
.client-status.is-active { color: #45D88A; }
.client-status.is-active i { background: #35DA83; box-shadow: 0 0 9px rgba(53,218,131,.7); }
.client-row-actions { white-space: nowrap; }
.client-row-actions form { display: inline; }
.client-icon-btn,
.hosting-icon-btn { width: 31px; height: 31px; display: inline-grid; place-items: center; padding: 0; border: 1px solid rgba(126,160,219,.15); border-radius: 8px; background: rgba(255,255,255,.025); color: #8D9BB1; cursor: pointer; }
.client-icon-btn:hover,
.hosting-icon-btn:hover { border-color: rgba(94,153,255,.35); background: rgba(61,125,236,.12); color: #CFE0FC; }
.client-icon-btn.is-danger:hover { border-color: rgba(255,77,94,.35); background: rgba(255,77,94,.10); color: #FF6B7A; }
.clients-empty-row td,
.clients-no-results td { height: 260px; padding: 40px !important; text-align: center !important; color: #8290A7; }
.clients-empty-row span { display: block; color: #6199F4; font-size: 32px; }
.clients-empty-row strong { display: block; margin-top: 8px; color: #E6EFFD; font-size: 18px; }
.clients-empty-row p { margin: 4px 0 18px; }

/* ------------------------------------------------------------
   Hosting
------------------------------------------------------------ */
.hosting-page { display: flex; flex-direction: column; gap: 18px; }
.hosting-hero {
    min-height: 172px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    padding: 30px 32px;
    border: 1px solid rgba(111,146,218,.18);
    border-radius: 20px;
    background:
        radial-gradient(450px 210px at 90% 15%, rgba(83,83,255,.20), transparent 65%),
        radial-gradient(430px 230px at 8% 110%, rgba(20,151,220,.14), transparent 70%),
        linear-gradient(135deg, rgba(17,35,74,.96), rgba(8,16,38,.97));
    box-shadow: inset 0 1px rgba(255,255,255,.06), 0 30px 70px -54px #000;
}
.hosting-hero-copy { max-width: 610px; position: relative; z-index: 2; }
.hosting-hero h1 { margin: 0 0 8px; font-size: clamp(30px,4vw,43px); letter-spacing: -.045em; }
.hosting-hero p { max-width: 590px; margin: 0; color: #9FADC4; font-size: 14px; }
.hosting-hero-actions { position: relative; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.hosting-hero-actions .btn { min-height: 42px; backdrop-filter: blur(12px); }
.hosting-hero-art { width: 260px; position: absolute; right: 26px; top: 17px; bottom: 17px; opacity: .19; transform: perspective(400px) rotateY(-12deg); }
.hosting-hero-art span { height: 38px; display: block; position: relative; margin: 8px 0; border: 1px solid #849DFF; border-radius: 8px; background: linear-gradient(90deg, transparent, rgba(132,157,255,.22)); }
.hosting-hero-art span::before { content: ""; width: 6px; height: 6px; position: absolute; left: 12px; top: 15px; border-radius: 50%; background: #53E9D0; box-shadow: 14px 0 #53E9D0, 28px 0 #849DFF; }
.hosting-stats { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
.hosting-stat {
    min-width: 0;
    min-height: 112px;
    display: grid;
    grid-template-columns: 38px minmax(0,1fr);
    align-items: center;
    gap: 0 12px;
    padding: 15px;
    border: 1px solid rgba(126,160,219,.14);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(15,28,58,.84), rgba(7,14,31,.9));
    color: #DDE8F8;
    transition: transform .16s,border-color .16s,background .16s;
}
.hosting-stat:hover,
.hosting-stat.is-selected { transform: translateY(-2px); border-color: rgba(89,145,255,.35); background: linear-gradient(145deg, rgba(24,45,88,.91), rgba(8,17,39,.94)); color: #fff; }
.hosting-stat > i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: rgba(82,135,255,.13); color: #74A5FF; font-style: normal; font-weight: 800; }
.hosting-stat span { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 5px; }
.hosting-stat small { color: #91A0B7; font-size: 9.5px; font-weight: 700; letter-spacing: .03em; line-height: 1.2; text-transform: uppercase; }
.hosting-stat strong { font-size: 23px; line-height: 1; }
.hosting-stat em { grid-column: 2; color: #66758D; font-size: 9.5px; font-style: normal; white-space: nowrap; }
.hosting-stat.is-danger > i { background: rgba(255,77,94,.12); color: #FF6575; }
.hosting-stat.is-amber > i { background: rgba(246,185,74,.11); color: #F6BE5A; }
.hosting-stat.is-cyan > i { background: rgba(53,213,231,.10); color: #47DCEB; }
.hosting-stat.is-purple > i { background: rgba(180,108,255,.10); color: #BD7BFF; }
.hosting-table-card { overflow: visible; border: 1px solid rgba(126,160,219,.16); border-radius: 18px; background: linear-gradient(160deg, rgba(13,26,55,.93), rgba(6,13,30,.96)); box-shadow: inset 0 1px rgba(255,255,255,.045), 0 28px 70px -50px #000; }
.hosting-toolbar { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid rgba(126,160,219,.13); }
.hosts-toolbar .dd { position: relative; }
.hosting-filter-button { min-height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 13px; list-style: none; border: 1px solid rgba(126,160,219,.18); border-radius: 10px; background: rgba(3,9,24,.48); color: #B7C5D9; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.hosting-filter-button::-webkit-details-marker { display: none; }
.hosts-toolbar details[open] { z-index: 100; }
.hosts-toolbar details[open] .hosting-filter-button { border-color: rgba(72,143,255,.48); background: rgba(29,87,187,.16); }
.hosts-toolbar .dd-menu { min-width: 235px; position: absolute; left: 0; top: calc(100% + 7px); z-index: 1000; padding: 6px; border: 1px solid rgba(126,160,219,.22); border-radius: 12px; background: #0B1630; box-shadow: 0 24px 60px -30px #000; }
.hosts-toolbar .dd-item { display: block; padding: 8px 10px; border-radius: 8px; color: #AAB8CD; font-size: 11px; }
.hosts-toolbar .dd-item:hover,
.hosts-toolbar .dd-item.is-active { background: rgba(56,119,226,.15); color: #E9F1FF; }
.hosting-client-filter { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid rgba(53,213,231,.22); border-radius: 9px; background: rgba(53,213,231,.07); color: #73DDE9; font-size: 10px; white-space: nowrap; }
.hosting-client-filter a { color: inherit; font-size: 15px; }
.hosting-table-surface { overflow: hidden; border-radius: 0 0 18px 18px; }
.hosting-table-wrap { border-radius: 0; }
.hosting-table { width: 100%; min-width: 1160px; border-collapse: collapse; }
.hosting-table th { height: 48px; padding: 0 14px; border-bottom: 1px solid rgba(126,160,219,.13); color: #74839B; font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-align: left; text-transform: uppercase; }
.hosting-table td { height: 102px; padding: 14px; border-bottom: 1px solid rgba(126,160,219,.10); vertical-align: middle; }
.hosting-table tbody .host-row:hover td { background: rgba(76,128,220,.05); }
.hosting-service-cell { width: 270px; display: flex; align-items: center; gap: 12px; }
.hosting-service-icon { width: 42px; height: 42px; flex: 0 0 42px; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 8px; border: 1px solid rgba(116,165,255,.28); border-radius: 11px; background: linear-gradient(145deg, rgba(64,124,233,.22), rgba(118,78,219,.16)); }
.hosting-service-icon i { height: 7px; position: relative; display: block; border: 1px solid rgba(174,201,255,.55); border-radius: 3px; }
.hosting-service-icon i::before { content: ""; width: 3px; height: 3px; position: absolute; left: 3px; top: 1px; border-radius: 50%; background: #5DE0C6; box-shadow: 5px 0 #729FFF; }
.hosting-service-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.hosting-service-copy a { max-width: 205px; overflow: hidden; color: #F1F6FF; font-size: 13px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.hosting-service-copy a:hover { color: #75B2FF; }
.hosting-service-copy small { max-width: 205px; overflow: hidden; color: #98A7BD; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.hosting-service-copy em { max-width: 205px; margin-top: 3px; overflow: hidden; color: #66768E; font-size: 9.5px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.hosting-status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid rgba(51,213,132,.2); border-radius: 8px; background: rgba(51,213,132,.075); color: #45D88A; font-size: 9.5px; font-weight: 800; white-space: nowrap; }
.hosting-status i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.hosting-status.is-danger { border-color: rgba(255,77,94,.24); background: rgba(255,77,94,.08); color: #FF6676; }
.hosting-status.is-warn { border-color: rgba(246,185,74,.22); background: rgba(246,185,74,.075); color: #F6BE5A; }
.hosting-status.is-muted { border-color: rgba(126,145,177,.17); background: rgba(126,145,177,.06); color: #7E8DA5; }
.hosting-next { min-width: 125px; display: flex; flex-direction: column; }
.hosting-next strong { color: #75A8FF; font-size: 12px; }
.hosting-next small { color: #738197; font-size: 9.5px; white-space: nowrap; }
.hosting-next.is-danger strong { color: #FF6676; }
.hosting-next.is-warn strong { color: #F6BE5A; }
.hosting-next.is-empty strong { color: #7A899F; }
.hosting-cycle { min-width: 330px; display: grid; grid-template-columns: repeat(3,1fr); position: relative; }
.hosting-cycle::before { content: ""; height: 1px; position: absolute; left: 11px; right: 11px; top: 5px; background: rgba(106,139,198,.22); }
.hosting-cycle > span { min-width: 0; position: relative; display: flex; flex-direction: column; padding: 15px 10px 0 0; }
.hosting-cycle > span > i { width: 9px; height: 9px; position: absolute; top: 1px; left: 0; z-index: 1; border: 2px solid #183061; border-radius: 50%; background: #789DDF; box-shadow: 0 0 0 3px #0C1833; }
.hosting-cycle > span > i.is-client { background: #46D9E7; }
.hosting-cycle > span > i.is-provider { background: #A77BFF; }
.hosting-cycle > span > small { color: #64748D; font-size: 8.5px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.hosting-cycle-date { display: flex; flex-direction: column; color: #C7D2E3; font-size: 10px; font-weight: 650; white-space: nowrap; }
.hosting-cycle-date small { color: #66768E !important; font-size: 8.5px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; }
.hosting-cycle-date.is-danger { color: #FF6676; }
.hosting-cycle-date.is-soon { color: #F6BE5A; }
.hosting-cycle-date.is-empty { color: #59677D; font-weight: 500; }
.hosting-project-cell { min-width: 155px; }
.hosting-project { max-width: 160px; display: flex; align-items: center; gap: 6px; overflow: hidden; color: #9CB6E2; font-size: 9.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.hosting-project i { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #4C91FF; box-shadow: 0 0 8px rgba(76,145,255,.6); }
.hosting-project.is-missing { color: #F6BE5A; }
.hosting-project.is-missing i { background: #F6BE5A; box-shadow: 0 0 8px rgba(246,190,90,.55); }
.hosting-assign-button { margin-top: 5px; padding: 0; border: 0; background: transparent; color: #6EA8FF; font: 700 9.5px Inter,sans-serif; cursor: pointer; }
.hosting-assign-button:hover { color: #9AC3FF; }
.hosting-sync-pending { display: block; margin-top: 4px; color: #F6BE5A; font-size: 8.5px; }
.hosting-actions-head { text-align: right !important; }
.hosting-row-actions { width: 90px; text-align: right; white-space: nowrap; }
.hosting-assign-panel { height: auto !important; padding: 18px 20px !important; background: rgba(32,79,158,.08); }
.hosting-assign-panel .form-grid { align-items: end; padding: 0; }
.hosting-empty-row td,
.hosting-no-results { height: 250px !important; padding: 40px !important; text-align: center; color: #7F8DA4; }
.hosting-empty-row span { display: block; color: #729FFF; font-size: 30px; }
.hosting-empty-row strong { display: block; margin-top: 7px; color: #E7EFFC; font-size: 17px; }
.hosting-empty-row p { margin: 4px 0 18px; }

/* ------------------------------------------------------------
   Command dashboard
------------------------------------------------------------ */
.command-dashboard { display: flex; flex-direction: column; gap: 18px; }
.command-hero {
    min-height: 310px;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0,1fr) 230px;
    align-items: center;
    gap: 40px;
    padding: 38px 42px;
    border: 1px solid rgba(87,133,219,.22);
    border-radius: 22px;
    background:
        radial-gradient(550px 300px at 82% 18%, rgba(59,104,255,.25), transparent 63%),
        radial-gradient(540px 300px at 8% 120%, rgba(22,188,177,.16), transparent 68%),
        linear-gradient(130deg, #10295A 0%, #0B1735 48%, #12163D 100%);
    box-shadow: inset 0 1px rgba(255,255,255,.075), 0 38px 90px -58px #000;
}
.command-hero.is-danger { background: radial-gradient(520px 290px at 84% 16%, rgba(255,67,98,.18), transparent 65%), radial-gradient(500px 300px at 8% 120%, rgba(65,94,255,.17), transparent 68%), linear-gradient(130deg,#241D4A,#111938 55%,#25152B); }
.command-hero.is-warning { background: radial-gradient(520px 290px at 84% 16%, rgba(246,185,74,.16), transparent 65%), radial-gradient(500px 300px at 8% 120%, rgba(24,145,230,.17), transparent 68%), linear-gradient(130deg,#172B53,#111938 55%,#22213C); }
.command-hero-copy { position: relative; z-index: 2; }
.command-overline { display: flex; align-items: center; gap: 14px; margin-bottom: 23px; color: #91A3C1; font-size: 10px; font-weight: 650; letter-spacing: .04em; }
.command-live { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; border: 1px solid rgba(62,222,149,.22); border-radius: 999px; background: rgba(62,222,149,.07); color: #5CE49D; font-weight: 800; text-transform: uppercase; }
.command-live i { width: 5px; height: 5px; border-radius: 50%; background: #4CE096; box-shadow: 0 0 9px #4CE096; }
.command-hero h1 { margin: 0 0 3px; color: #A9B9D4; font-size: 17px; font-weight: 550; }
.command-hero h2 { max-width: 680px; margin: 0 0 13px; font-size: clamp(31px,4.3vw,50px); line-height: 1.04; letter-spacing: -.052em; }
.command-hero p { max-width: 670px; margin: 0; color: #A5B3C9; font-size: 14px; line-height: 1.65; }
.command-hero-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.command-hero-actions .btn { min-height: 43px; padding-inline: 17px; }
.command-text-link { display: inline-flex; align-items: center; gap: 7px; padding: 10px; color: #A8C7FF; font-size: 11px; font-weight: 750; }
.command-health { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
.command-score { width: 142px; height: 142px; display: grid; place-items: center; position: relative; margin-bottom: 14px; border-radius: 50%; background: conic-gradient(#48E3A0 calc(var(--score)*1%), rgba(109,139,191,.18) 0); box-shadow: 0 0 48px rgba(72,227,160,.14); }
.command-score::before { content: ""; position: absolute; inset: 8px; border-radius: inherit; background: #111C3D; box-shadow: inset 0 0 30px rgba(30,75,146,.25); }
.command-score div { position: relative; z-index: 1; }
.command-score strong { font-size: 38px; letter-spacing: -.05em; }
.command-score span { color: #7686A1; font-size: 12px; }
.command-health > span { color: #8493AD; font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.command-health > strong { margin-top: 4px; font-size: 15px; }
.command-health > small { max-width: 180px; margin-top: 4px; color: #6F7F99; font-size: 9px; }
.command-hero-grid { position: absolute; inset: 0; opacity: .22; pointer-events: none; background-image: linear-gradient(rgba(129,158,221,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(129,158,221,.11) 1px,transparent 1px); background-size: 38px 38px; mask-image: radial-gradient(ellipse at 78% 25%,#000,transparent 58%); }
.command-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; }
.command-metric { min-height: 112px; display: grid; grid-template-columns: 40px minmax(0,1fr); align-items: center; gap: 12px; position: relative; padding: 17px; border: 1px solid rgba(126,160,219,.15); border-radius: 15px; background: linear-gradient(145deg,rgba(16,30,62,.88),rgba(7,14,32,.93)); color: #E5EDFB; transition: transform .16s,border-color .16s; }
.command-metric:hover { transform: translateY(-2px); border-color: rgba(91,148,255,.36); color: #fff; }
.command-metric-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: rgba(60,214,135,.11); color: #4BD990; }
.command-metric div { min-width: 0; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2px 7px; }
.command-metric small { grid-column: 1 / -1; overflow: hidden; color: #8392A9; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.command-metric strong { font-size: 25px; line-height: 1; }
.command-metric em { grid-column: 1 / -1; margin-top: 5px; overflow: hidden; color: #718097; font-size: 9.5px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.command-metric > b { position: absolute; right: 15px; top: 17px; color: #54DC97; font-size: 8.5px; font-weight: 800; text-transform: uppercase; }
.command-metric.is-red .command-metric-icon { background: rgba(255,77,94,.10); color: #FF6475; }
.command-metric.is-red > b { color: #FF7080; }
.command-metric.is-amber .command-metric-icon { background: rgba(246,185,74,.10); color: #F6BE5A; }
.command-metric.is-amber > b { color: #F6BE5A; }
.command-metric.is-purple .command-metric-icon { background: rgba(170,110,255,.10); color: #B77AFF; }
.command-metric.is-purple > b { color: #BC83FF; }
.command-main-grid { display: grid; grid-template-columns: minmax(0,1.75fr) minmax(280px,.75fr); gap: 18px; }
.command-card { border: 1px solid rgba(126,160,219,.15); border-radius: 18px; background: linear-gradient(155deg,rgba(14,28,58,.91),rgba(6,13,30,.95)); box-shadow: inset 0 1px rgba(255,255,255,.045),0 28px 70px -54px #000; }
.command-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.command-card-head h2 { margin: 0; font-size: 19px; letter-spacing: -.025em; }
.command-card-head p { margin: 5px 0 0; color: #7E8CA3; font-size: 11px; }
.command-count-badge { padding: 5px 9px; border: 1px solid rgba(255,91,112,.20); border-radius: 999px; background: rgba(255,77,94,.08); color: #FF7180; font-size: 9px; font-weight: 800; }
.command-priorities { padding: 23px; }
.command-priority-list { display: grid; gap: 8px; }
.command-priority { min-height: 67px; display: grid; grid-template-columns: 30px minmax(0,1fr) auto 24px; align-items: center; gap: 11px; padding: 10px 11px; border: 1px solid rgba(126,160,219,.11); border-radius: 11px; background: rgba(255,255,255,.022); color: #E9F0FB; }
.command-priority:hover { border-color: rgba(92,149,255,.28); background: rgba(65,116,205,.07); color: #fff; }
.command-priority-mark { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: rgba(246,185,74,.09); }
.command-priority-mark i { width: 6px; height: 6px; border-radius: 50%; background: #F6BE5A; box-shadow: 0 0 9px rgba(246,190,90,.6); }
.command-priority.is-danger .command-priority-mark { background: rgba(255,77,94,.09); }
.command-priority.is-danger .command-priority-mark i { background: #FF6676; box-shadow: 0 0 9px rgba(255,102,118,.6); }
.command-priority-copy { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 0 10px; }
.command-priority-copy small { grid-column: 1/-1; color: #8F9DB3; font-size: 8.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.command-priority-copy strong { overflow: hidden; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.command-priority-copy em { overflow: hidden; color: #6F7F98; font-size: 9.5px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.command-priority time { color: #8B9AB0; font-size: 9.5px; white-space: nowrap; }
.command-priority > b { color: #6683B4; font-size: 13px; }
.command-priorities footer { display: flex; gap: 22px; margin-top: 16px; }
.command-priorities footer a { color: #78A8FA; font-size: 10px; font-weight: 700; }
.command-success-state { min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; text-align: center; }
.command-success-state > span { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 12px; border-radius: 50%; background: rgba(53,218,131,.10); color: #45D88A; font-size: 18px; }
.command-success-state strong { font-size: 16px; }
.command-success-state p { max-width: 370px; margin: 5px 0 0; color: #7D8CA4; font-size: 11px; }
.command-success-state.is-compact { min-height: 150px; }
.command-pulse { padding: 23px; }
.command-live-dot { display: inline-flex; align-items: center; gap: 5px; color: #50DA94; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.command-live-dot i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.command-pulse-score { display: flex; align-items: baseline; gap: 9px; }
.command-pulse-score strong { font-size: 38px; letter-spacing: -.055em; }
.command-pulse-score span { color: #77869D; font-size: 10px; }
.command-check-bar { height: 7px; display: flex; gap: 2px; overflow: hidden; margin: 13px 0 20px; border-radius: 99px; background: #19243C; }
.command-check-bar i { min-width: 0; height: 100%; }
.command-check-bar .is-ok { background: #3CD98B; }
.command-check-bar .is-warn { background: #F6BE5A; }
.command-check-bar .is-error { background: #FF6676; }
.command-pulse-list { display: grid; gap: 1px; }
.command-pulse-list p { display: flex; justify-content: space-between; margin: 0; padding: 9px 0; border-bottom: 1px solid rgba(126,160,219,.09); color: #8290A7; font-size: 10px; }
.command-pulse-list p span { display: inline-flex; align-items: center; gap: 7px; }
.command-pulse-list p i { width: 5px; height: 5px; border-radius: 50%; background: #4B8FFF; }
.command-pulse-list p i.is-green { background: #3CD98B; }.command-pulse-list p i.is-amber { background: #F6BE5A; }.command-pulse-list p i.is-red { background: #FF6676; }
.command-pulse-list p strong { color: #DDE6F4; }
.command-integration { display: flex; justify-content: space-between; margin-top: 14px; padding: 10px; border: 1px solid rgba(126,160,219,.10); border-radius: 9px; background: rgba(255,255,255,.022); color: #8290A7; font-size: 9px; }
.command-integration span { display: inline-flex; align-items: center; gap: 6px; }.command-integration i { width: 5px; height: 5px; border-radius: 50%; background: #75839A; }.command-integration.is-connected i { background: #3CD98B; box-shadow: 0 0 7px #3CD98B; }.command-integration strong { color: #B9C5D8; }
.command-full-button { width: 100%; justify-content: center; margin-top: 13px; }
.command-renewals { padding: 24px; scroll-margin-top: 20px; }
.command-renewal-links { display: flex; gap: 6px; flex-wrap: wrap; }
.command-renewal-links a { padding: 7px 9px; border: 1px solid rgba(126,160,219,.12); border-radius: 8px; background: rgba(255,255,255,.025); color: #8998AE; font-size: 9.5px; font-weight: 650; }
.command-renewal-links b { margin-left: 4px; color: #D6E1F2; }
.command-renewal-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.command-renewal { min-width: 0; min-height: 105px; display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto auto auto; gap: 2px 10px; padding: 14px; border: 1px solid rgba(126,160,219,.12); border-radius: 12px; background: rgba(255,255,255,.022); color: #E9F1FC; }
.command-renewal:hover { border-color: rgba(90,148,255,.30); background: rgba(65,116,205,.065); color: #fff; }
.command-renewal-type { display: inline-flex; align-items: center; gap: 6px; color: #8C9BB0; font-size: 8.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.command-renewal-type i { width: 6px; height: 6px; border-radius: 50%; background: #47DCEB; box-shadow: 0 0 7px currentColor; }
.command-renewal.is-amber .command-renewal-type i,
.command-renewal.is-warning .command-renewal-type i { background: #F6BE5A; }.command-renewal.is-purple .command-renewal-type i { background: #B77AFF; }.command-renewal.is-danger .command-renewal-type i { background: #FF6676; }
.command-renewal > strong { grid-column: 1; overflow: hidden; margin-top: 5px; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.command-renewal > small { grid-column: 1; overflow: hidden; color: #6E7D94; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.command-renewal time { grid-column: 2; grid-row: 1/4; align-self: center; display: flex; flex-direction: column; align-items: flex-end; color: #6D7D94; font-size: 8.5px; white-space: nowrap; }.command-renewal time b { color: #9EB9E8; font-size: 10px; }.command-renewal.is-warning time b { color: #F6BE5A; }.command-renewal.is-danger time b { color: #FF6676; }
.command-renewal > em { display: none; }
.command-bottom-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 18px; }
.command-portfolio,
.command-activity { padding: 23px; }
.command-assets-total { font-size: 22px; }.command-assets-total small { font-size: 9px; font-weight: 600; }
.command-portfolio-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.command-portfolio-grid a { min-width: 0; min-height: 105px; display: flex; flex-direction: column; padding: 13px; border: 1px solid rgba(126,160,219,.11); border-radius: 11px; background: rgba(255,255,255,.022); color: #DCE6F6; }
.command-portfolio-grid a:hover { border-color: rgba(91,148,255,.28); color: #fff; }
.command-portfolio-grid span { color: #8291A8; font-size: 9px; font-weight: 750; text-transform: uppercase; }.command-portfolio-grid strong { margin-top: 8px; font-size: 25px; }.command-portfolio-grid small { margin-top: auto; color: #6F7F97; font-size: 8.5px; }
.command-portfolio-grid a::before { content: ""; width: 19px; height: 3px; margin-bottom: 10px; border-radius: 99px; background: #4B8FFF; }.command-portfolio-grid a.is-green::before { background: #3CD98B; }.command-portfolio-grid a.is-cyan::before { background: #47DCEB; }.command-portfolio-grid a.is-amber::before { background: #F6BE5A; }.command-portfolio-grid a.is-purple::before { background: #B77AFF; }
.command-activity-list { display: grid; gap: 2px; }
.command-activity-item { min-height: 45px; display: grid; grid-template-columns: 8px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid rgba(126,160,219,.08); }.command-activity-item > i { width: 6px; height: 6px; border-radius: 50%; background: #4B8FFF; box-shadow: 0 0 7px currentColor; }.command-activity-item.is-green > i { background: #3CD98B; }.command-activity-item.is-red > i { background: #FF6676; }.command-activity-item.is-cyan > i { background: #47DCEB; }.command-activity-item.is-purple > i { background: #B77AFF; }
.command-activity-item span { min-width: 0; display: flex; flex-direction: column; }.command-activity-item small { color: #6F7E95; font-size: 8.5px; }.command-activity-item strong { overflow: hidden; color: #C9D5E7; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }.command-activity-item time { color: #6B7A91; font-size: 8.5px; white-space: nowrap; }

@media (max-width: 1180px) {
    .hosting-stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .command-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .command-renewal-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .command-portfolio-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 760px) {
    .clients-hero,
    .hosting-hero { align-items: flex-start; flex-direction: column; }
    .clients-overview,
    .hosting-stats { grid-template-columns: 1fr; }
    .clients-toolbar,
    .hosting-toolbar { align-items: stretch; flex-direction: column; }
    .clients-search,
    .hosting-search { width: 100%; min-width: 0; }
    .clients-segments { width: 100%; }
    .clients-segments button { flex: 1; }
    .clients-visible,
    .hosting-visible { align-self: flex-end; }
    .hosting-hero { padding: 25px 23px; }
    .hosting-hero-actions { justify-content: flex-start; }
    .hosting-hero-art { display: none; }
    .command-hero { min-height: 0; grid-template-columns: 1fr; padding: 28px 24px; }
    .command-health { align-items: flex-start; text-align: left; }
    .command-score { width: 112px; height: 112px; }
    .command-score strong { font-size: 31px; }
    .command-overline { align-items: flex-start; flex-direction: column; gap: 8px; }
    .command-metrics,
    .command-main-grid,
    .command-renewal-list,
    .command-bottom-grid { grid-template-columns: 1fr; }
    .command-priority { grid-template-columns: 28px minmax(0,1fr) 18px; }
    .command-priority time { grid-column: 2; }
    .command-priority > b { grid-column: 3; grid-row: 1/3; }
    .command-priority-copy { grid-template-columns: 1fr; }
    .command-priority-copy em { margin-top: 2px; }
    .command-card-head { flex-direction: column; }
    .command-renewal-links { width: 100%; }
    .command-portfolio-grid { grid-template-columns: repeat(2,1fr); }
}

/* ============================================================
   Unified premium data lists
   Shared by Webs, Incidents, Maintenances, Developments,
   Domains, Hosting and Clients.
   ============================================================ */
.main {
    width: 100%;
    max-width: 1500px;
}

.data-list-page {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.data-list-header {
    min-width: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}
.data-list-copy { min-width: 0; max-width: 780px; }
.data-list-copy h1 {
    margin: 0 0 7px;
    color: #F3F7FF;
    font-size: clamp(27px, 3vw, 38px);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.08;
}
.data-list-copy p {
    margin: 0;
    color: #94A3BA;
    font-size: 14px;
    line-height: 1.55;
}
.data-list-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap;
}
.data-list-actions .btn { min-height: 42px; }

.data-summary-grid.kpis {
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    gap: 11px;
    margin: 0;
}
.data-summary-grid .kpi {
    min-height: 112px;
    padding: 17px 19px;
    border-color: rgba(126,160,219,.15);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(16,30,63,.84), rgba(7,15,34,.91));
    box-shadow: inset 0 1px rgba(255,255,255,.045);
}
.data-summary-grid .kpi-value { font-size: 30px; }
.data-summary-grid .kpi-label { font-size: 10px; font-weight: 800; letter-spacing: .08em; }

.data-table-card {
    width: 100%;
    min-width: 0;
    position: relative;
    overflow: visible;
    border: 1px solid rgba(126,160,219,.16);
    border-radius: 18px;
    background:
        radial-gradient(520px 180px at 15% 0, rgba(62,120,231,.055), transparent 70%),
        linear-gradient(160deg, rgba(13,26,55,.94), rgba(6,13,30,.97));
    box-shadow: inset 0 1px rgba(255,255,255,.045), 0 28px 70px -50px #000;
}
.data-table-card.is-filtering::after {
    content: "";
    position: absolute;
    z-index: 1200;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(90deg, transparent, #4C91FF, #46D9E7, transparent);
    background-size: 220% 100%;
    animation: data-loading 1s linear infinite;
}
@keyframes data-loading { to { background-position: -220% 0; } }

.data-toolbar {
    min-width: 0;
    min-height: 70px;
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0;
    padding: 13px 15px;
    border-bottom: 1px solid rgba(126,160,219,.13);
    background: rgba(255,255,255,.016);
    border-radius: 18px 18px 0 0;
}
.data-toolbar .dd { position: relative; flex: 0 0 auto; }
.data-filter-button,
.data-toolbar .dd > summary.data-filter-button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 13px;
    list-style: none;
    border: 1px solid rgba(126,160,219,.18);
    border-radius: 10px;
    background: rgba(3,9,24,.48);
    color: #B7C5D9;
    font-size: 11px;
    font-weight: 750;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .16s, background .16s, color .16s, box-shadow .16s;
}
.data-filter-button::-webkit-details-marker { display: none; }
.data-toolbar details[open] > .data-filter-button {
    border-color: rgba(72,143,255,.48);
    background: rgba(29,87,187,.16);
    color: #EAF2FF;
    box-shadow: 0 0 0 3px rgba(24,119,255,.08);
}
.data-filter-count {
    min-width: 18px;
    height: 18px;
    display: inline-grid;
    place-items: center;
    padding: 0 5px;
    border: 1px solid rgba(71,220,235,.22);
    border-radius: 99px;
    background: rgba(53,213,231,.09);
    color: #5EDCE9;
    font-size: 9px;
    font-weight: 800;
}
.data-filter-caret { margin-left: 1px; color: #60718D; font-size: 10px; }

.data-search {
    min-width: 260px;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1 1 360px;
    padding: 0 9px 0 13px;
    border: 1px solid rgba(126,160,219,.18);
    border-radius: 10px;
    background: rgba(3,9,24,.52);
    color: #73819A;
    transition: border-color .16s, box-shadow .16s, background .16s;
}
.data-search:focus-within {
    border-color: rgba(72,143,255,.58);
    background: rgba(4,12,31,.72);
    box-shadow: 0 0 0 3px rgba(24,119,255,.11);
}
.data-search > span:first-child { flex: 0 0 auto; font-size: 16px; line-height: 1; }
.data-search input,
.data-search input.input {
    min-width: 0;
    height: 40px;
    flex: 1;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    background-image: none;
    color: var(--wd-text);
    box-shadow: none;
    font: inherit;
}
.data-search input::-webkit-search-cancel-button { display: none; }
.data-search input::placeholder { color: #68778F; }
.data-search kbd {
    flex: 0 0 auto;
    padding: 3px 6px;
    border: 1px solid rgba(255,255,255,.045);
    border-radius: 6px;
    background: rgba(255,255,255,.055);
    color: #6F7E96;
    font: 10px Inter,sans-serif;
}
.data-search-clear {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #77869D;
    font: 15px/1 Inter,sans-serif;
    cursor: pointer;
}
.data-search-clear:hover { background: rgba(255,255,255,.07); color: #EAF2FF; }
.data-search-clear[hidden] { display: none; }

.data-segments {
    display: flex;
    flex: 0 0 auto;
    padding: 3px;
    border: 1px solid rgba(126,160,219,.15);
    border-radius: 10px;
    background: rgba(3,9,24,.45);
}
.data-segments button {
    min-height: 34px;
    padding: 0 11px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #8491A7;
    font: 650 11px Inter,sans-serif;
    cursor: pointer;
}
.data-segments button b { margin-left: 3px; color: #B9C4D8; }
.data-segments button:hover { color: #DCE7F8; }
.data-segments button.is-active {
    background: rgba(38,112,240,.18);
    color: #E6F0FF;
    box-shadow: inset 0 0 0 1px rgba(65,137,255,.22);
}

.data-inline-select {
    width: auto;
    min-width: 155px;
    min-height: 42px;
    padding-block: 0;
    background-color: rgba(3,9,24,.48);
    font-size: 11px;
}
.data-result-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    margin-left: auto;
    color: #77869D;
    font-size: 11px;
    white-space: nowrap;
}
.data-result-count b { color: #E3ECFA; font-size: 12px; }

.data-filter-chips {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    padding: 10px 15px;
    border-bottom: 1px solid rgba(126,160,219,.10);
    background: rgba(31,81,168,.035);
}
.data-filter-chips-label { color: #697991; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.data-filter-chip {
    min-height: 27px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 9px;
    border: 1px solid rgba(53,213,231,.19);
    border-radius: 8px;
    background: rgba(53,213,231,.065);
    color: #77D9E5;
    font-size: 10px;
    font-weight: 650;
}
.data-filter-chip:hover { border-color: rgba(53,213,231,.36); background: rgba(53,213,231,.11); color: #A3F0F7; }
.data-filter-chip .x { color: #62788D; font-size: 11px; }
.data-filter-clear { margin-left: 2px; color: #75859B; font-size: 10px; }

.data-toolbar .dd-menu {
    width: 350px;
    max-width: min(92vw, 350px);
    max-height: min(72vh, 620px);
    overflow-y: auto;
    position: absolute;
    z-index: 1300;
    left: 0;
    top: calc(100% + 8px);
    padding: 12px;
    border: 1px solid rgba(126,160,219,.24);
    border-radius: 13px;
    background: #0B1630;
    box-shadow: 0 28px 70px -28px rgba(0,0,0,.9), inset 0 1px rgba(255,255,255,.04);
}
.data-toolbar .dd-item { border-radius: 8px; color: #AAB8CD; font-size: 11px; }
.data-toolbar .dd-item:hover,
.data-toolbar .dd-item.is-active { background: rgba(56,119,226,.15); color: #E9F1FF; }
.data-toolbar .filter-section { margin-bottom: 12px; }
.data-toolbar .filter-section-title { margin-bottom: 6px; color: #75859D; font-size: 9.5px; font-weight: 800; letter-spacing: .075em; }
.data-toolbar .filter-section .input,
.data-toolbar .filter-section .select { min-height: 40px; font-size: 12px; }
.data-filter-actions {
    display: flex;
    gap: 8px;
    padding-top: 11px;
    border-top: 1px solid rgba(126,160,219,.12);
}

/* Shared details popovers, including row action menus. */
.dd { position: relative; }
.dd > summary { list-style: none; cursor: pointer; user-select: none; }
.dd > summary::-webkit-details-marker { display: none; }
.dd[open] { z-index: 1200; }
.dd-menu {
    min-width: 250px;
    position: absolute;
    z-index: 1300;
    left: 0;
    top: calc(100% + 7px);
    padding: 7px;
    border: 1px solid rgba(126,160,219,.22);
    border-radius: 12px;
    background: #0B1630;
    box-shadow: 0 24px 60px -28px rgba(0,0,0,.92), inset 0 1px rgba(255,255,255,.04);
}
.dd-item {
    width: 100%;
    display: block;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #AAB8CD;
    font: 600 11px/1.35 Inter,sans-serif;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.dd-item:hover { background: rgba(56,119,226,.15); color: #E9F1FF; }
.dd-sep { height: 1px; margin: 7px 3px; background: rgba(126,160,219,.13); }
.data-row-actions .dd { display: inline-block; }
.data-row-actions .dd-menu { right: 0; left: auto; }
.data-table-surface:has(.data-row-actions .dd[open]),
.data-table-scroll:has(.data-row-actions .dd[open]) { overflow: visible; }
.chk-row { display: flex; align-items: center; gap: 9px; color: #AAB8CD; font-size: 12px; cursor: pointer; }
.chk-row input { width: auto; accent-color: var(--wd-primary); }

.row-toggle {
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    border-radius: 7px;
    color: #73829A;
    text-decoration: none;
    vertical-align: middle;
}
.row-toggle:hover { background: rgba(63,122,225,.12); color: #BFD5F8; }
table.data-table tr.is-open > td { background: rgba(10,132,255,.055); }
.updates-detail { border-top: 1px solid rgba(126,160,219,.13); background: rgba(10,132,255,.035); }
.updates-detail h2 { color: var(--wd-text); }

.data-table-surface {
    min-width: 0;
    overflow: hidden;
    border-radius: 0 0 18px 18px;
}
.data-table-scroll {
    min-width: 0;
    position: relative;
    overflow-x: auto;
    overflow-y: visible;
    border-radius: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(93,135,205,.34) transparent;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}
.data-table-scroll::-webkit-scrollbar { height: 8px; }
.data-table-scroll::-webkit-scrollbar-track { background: transparent; }
.data-table-scroll::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 99px; background: rgba(93,135,205,.34); background-clip: padding-box; }
.data-table-scroll.is-scrollable:not(.is-at-end) { box-shadow: inset -22px 0 20px -24px rgba(86,139,230,.72); }
.data-table-scroll.is-scrollable:not(.is-at-start) { border-left: 1px solid rgba(91,145,235,.12); }

table.data-table,
table.glass.data-table,
.data-table {
    width: 100%;
    min-width: 860px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
    font-size: 12.5px;
}
table.data-table--wide { min-width: 1180px; }
table.data-table--compact { min-width: 780px; }
table.data-table--subtable { min-width: 920px; }
table.data-table thead th {
    height: 49px;
    padding: 0 14px;
    border-bottom: 1px solid rgba(126,160,219,.14);
    background: rgba(9,20,44,.96);
    color: #74839B;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .085em;
    line-height: 1.2;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}
table.data-table tbody td {
    min-height: 68px;
    padding: 13px 14px;
    border-bottom: 1px solid rgba(126,160,219,.10);
    background: transparent;
    vertical-align: middle;
    transition: background .16s, border-color .16s;
}
table.data-table tbody tr:last-child > td { border-bottom: 0; }
table.data-table tbody tr:not([hidden]):not(.data-empty-row):hover > td { background: rgba(76,128,220,.055); }
table.data-table tbody tr:focus-visible { outline: 2px solid rgba(72,143,255,.7); outline-offset: -2px; }
table.data-table tbody tr[hidden] { display: none; }
table.data-table a:focus-visible,
.data-icon-button:focus-visible,
.data-toolbar button:focus-visible,
.data-toolbar summary:focus-visible {
    outline: 2px solid rgba(78,157,255,.78);
    outline-offset: 2px;
}
.data-clickable-row { cursor: pointer; }
.data-primary-cell { min-width: 215px; }
.data-primary-cell > strong,
.data-primary-cell > a { color: #EEF4FF; font-weight: 720; }
.data-cell-title { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.data-cell-title > a,
.data-cell-title > strong { max-width: 250px; overflow: hidden; color: #EFF5FF; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.data-cell-title > small { max-width: 260px; overflow: hidden; color: #7F8DA4; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.data-cell-title > em { color: #65758D; font-size: 9.5px; font-style: normal; }
.data-row-actions { text-align: right !important; white-space: nowrap; }
.data-actions-head { text-align: right !important; }
.data-icon-button {
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(126,160,219,.15);
    border-radius: 8px;
    background: rgba(255,255,255,.025);
    color: #8D9BB1;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}
.data-icon-button:hover { border-color: rgba(94,153,255,.35); background: rgba(61,125,236,.12); color: #CFE0FC; }
.data-icon-button.is-danger:hover { border-color: rgba(255,77,94,.35); background: rgba(255,77,94,.10); color: #FF6B7A; }
.data-empty-row td,
.data-no-results td,
td.data-empty {
    height: 230px !important;
    padding: 38px !important;
    color: #7F8DA4 !important;
    text-align: center !important;
}
.data-empty-state { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.data-empty-state > i { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 4px; border: 1px solid rgba(102,153,255,.22); border-radius: 13px; background: rgba(71,126,230,.08); color: #71A2F5; font-size: 21px; font-style: normal; }
.data-empty-state strong { color: #E6EFFD; font-size: 15px; }
.data-empty-state p { max-width: 440px; margin: 0 0 10px; color: #75849B; font-size: 11px; }

.data-table-card .pagination {
    min-height: 58px;
    padding: 12px 15px;
    border-top: 1px solid rgba(126,160,219,.11);
    background: rgba(255,255,255,.012);
}
.data-table-card .pagination a,
.data-table-card .pagination span:not(.info):not(.gap) { min-width: 34px; height: 34px; border-radius: 9px; }
.data-table-card--secondary { margin-top: 0; }
.data-table-section-title { padding: 16px 17px; border-bottom: 1px solid rgba(126,160,219,.12); }
.data-table-section-title h2 { margin: 0; font-size: 13px; letter-spacing: .03em; }

/* Existing premium modules now share the exact same outer geometry. */
.clients-page,
.hosting-page { width: 100%; min-width: 0; }
.clients-table-card,
.hosting-table-card { width: 100%; min-width: 0; border-radius: 18px; }
.clients-toolbar,
.hosting-toolbar { min-height: 70px; }
.clients-search,
.hosting-search { min-height: 42px; }
.clients-table,
.hosting-table { border-collapse: separate; border-spacing: 0; }
.clients-table th,
.hosting-table th { background: rgba(9,20,44,.96); }
.clients-table td { height: 74px; }
.hosting-table td { height: 94px; }

/* Domains used to opt out of the global content width. Keep the card
   contained and let only its own table surface scroll horizontally. */
.main:has(.dom-card) { max-width: 1500px; }
.dom-card { max-width: 100%; min-width: 0; overflow: visible; }
.dom-table-wrap { overflow-x: auto; }
.dom-name-cell { max-width: 230px; }
.cert-nowrap,
.cert-date-cell { white-space: nowrap; }

@media (max-width: 1100px) {
    .data-list-header { align-items: flex-start; flex-direction: column; gap: 15px; }
    .data-list-actions { justify-content: flex-start; }
    .data-toolbar { align-items: stretch; flex-wrap: wrap; }
    .data-search { order: 1; flex-basis: calc(100% - 160px); }
    .data-result-count { order: 2; margin-left: 0; align-self: center; }
}

@media (max-width: 760px) {
    .data-list-page { gap: 14px; }
    .data-list-copy h1 { font-size: 29px; }
    .data-list-copy p { font-size: 12.5px; }
    .data-list-actions { width: 100%; }
    .data-list-actions .btn { flex: 1 1 auto; justify-content: center; }
    .data-summary-grid.kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .data-toolbar { min-height: 0; flex-direction: column; padding: 12px; }
    .data-toolbar > .dd,
    .data-toolbar > .dd .data-filter-button { width: 100%; }
    .data-toolbar > .dd .data-filter-button { justify-content: space-between; }
    .data-search { width: 100%; min-width: 0; order: 0; flex-basis: auto; }
    .data-inline-select { width: 100%; }
    .data-segments { width: 100%; overflow-x: auto; }
    .data-segments button { flex: 1 0 auto; }
    .data-result-count { align-self: flex-end; }
    .data-toolbar .dd-menu { width: 100%; max-width: 100%; position: static; margin-top: 8px; }
    .data-filter-chips { align-items: flex-start; flex-direction: column; }
    .data-filter-chip { max-width: 100%; }
    .data-summary-grid .kpi { min-height: 100px; padding: 15px; }
    .data-summary-grid .kpi-value { font-size: 27px; }
    .data-table-card { border-radius: 14px; }
    .data-table-surface { border-radius: 0 0 14px 14px; }
    table.data-table thead th { padding-inline: 11px; }
    table.data-table tbody td { padding: 12px 11px; }
}

@media (max-width: 470px) {
    /* Antes aquí los KPI pasaban a una sola columna y ocupaban media
       pantalla cada uno. Se mantienen en dos (ver el bloque
       "Contenido de los listados en móvil"). */
    .data-summary-grid.kpis { gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
    .data-table-card.is-filtering::after { animation: none; }
    table.data-table tbody td,
    .data-filter-button,
    .data-search { transition: none; }
}

/* ============================================================
   Topbar · Buscador global, avisos y menú de usuario
   ============================================================
   Sustituye al bloque antiguo (.topbar-search / .topbar-alert /
   .topbar-logout), que era un input inerte, un rombo enlazado a
   Incidencias y una flechita que cerraba la sesión sin avisar.

   Las reglas viejas se conservan más arriba en el fichero porque
   .topbar-avatar y .topbar-user-copy se siguen usando dentro del
   nuevo disparador de usuario.
   ------------------------------------------------------------ */

.topbar-tools {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ------------------------------------------------------------
   Disparador del buscador
   Parece un campo de texto, pero es un <button>: al pulsarlo se
   abre la paleta. Se le da un ancho generoso porque es el objeto
   más usado de la barra.
------------------------------------------------------------ */
.wd-search-trigger {
    width: min(100%, 330px);
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px 0 14px;
    border: 1px solid var(--wd-border);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
    color: var(--wd-muted);
    font: inherit;
    text-align: left;
    cursor: text;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.wd-search-trigger svg { width: 17px; height: 17px; flex: 0 0 auto; opacity: .8; }
.wd-search-trigger-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
}
.wd-search-trigger kbd {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.06);
    color: #8794B3;
    font: 600 11px/1 'Inter', sans-serif;
}
.wd-search-trigger:hover,
.wd-search-trigger:focus-visible {
    border-color: var(--wd-border-strong);
    background: linear-gradient(180deg, rgba(24,119,255,.16), rgba(255,255,255,.05));
    color: var(--wd-text);
    box-shadow: 0 0 0 4px rgba(24,119,255,.10), inset 0 1px 0 rgba(255,255,255,.08);
    outline: none;
}
.wd-search-trigger:hover svg { opacity: 1; color: var(--wd-cyan); }

/* ------------------------------------------------------------
   Botón redondo de la topbar (campana)
------------------------------------------------------------ */
.wd-icon-btn {
    position: relative;
    width: 46px;
    height: 46px;
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
    border: 1px solid var(--wd-border);
    background: rgba(255,255,255,.055);
    color: var(--wd-muted);
    cursor: pointer;
    transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.wd-icon-btn svg { width: 19px; height: 19px; }
.wd-icon-btn:hover { color: var(--wd-text); border-color: var(--wd-border-strong); background: rgba(255,255,255,.09); }
.dd[open] > .wd-icon-btn {
    color: var(--wd-text);
    border-color: rgba(24,119,255,.45);
    background: rgba(24,119,255,.16);
}
.wd-icon-btn.has-alerts { color: #FFD27A; }

/* Contador. El halo pulsante llama la atención sin llegar a molestar:
   dos segundos por ciclo y se detiene si el usuario pide menos
   movimiento en el sistema operativo. */
.wd-icon-btn em {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 2px solid #0A1223;
    background: linear-gradient(145deg, #FF5C6E, #E11D48);
    color: #fff;
    font: 800 10px/1 'Inter', sans-serif;
    font-style: normal;
    box-shadow: 0 0 0 0 rgba(255,77,94,.55);
    animation: wd-badge-pulse 2.4s ease-out infinite;
}
@keyframes wd-badge-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,77,94,.5); }
    70%  { box-shadow: 0 0 0 7px rgba(255,77,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,77,94,0); }
}

/* ------------------------------------------------------------
   Disparador del menú de usuario
------------------------------------------------------------ */
.wd-user-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 4px 4px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: rgba(255,255,255,.04);
    color: var(--wd-text);
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease;
}
.wd-user-trigger:hover { background: rgba(255,255,255,.08); border-color: var(--wd-border); }
.dd[open] > .wd-user-trigger {
    background: rgba(24,119,255,.14);
    border-color: rgba(24,119,255,.42);
}
.wd-user-trigger .topbar-avatar {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,.10);
}
.wd-user-caret {
    width: 15px; height: 15px;
    color: var(--wd-muted-2);
    transition: transform .2s ease;
}
.dd[open] > .wd-user-trigger .wd-user-caret { transform: rotate(180deg); color: var(--wd-text); }

/* ------------------------------------------------------------
   Paneles desplegables (avisos y usuario)
------------------------------------------------------------ */
.wd-pop { position: relative; }
.wd-menu {
    position: absolute;
    z-index: 1400;
    top: calc(100% + 10px);
    right: 0;
    width: 340px;
    padding: 8px;
    border: 1px solid rgba(126,160,219,.20);
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(18, 31, 70, .97), rgba(8, 16, 38, .98));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow:
        0 30px 70px -30px rgba(0,0,0,.95),
        0 0 0 1px rgba(255,255,255,.02) inset;
    animation: wd-menu-in .16s cubic-bezier(.2,.9,.3,1);
}
@keyframes wd-menu-in {
    from { opacity: 0; transform: translateY(-6px) scale(.985); }
    to   { opacity: 1; transform: none; }
}
.wd-menu > header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px 10px;
}
.wd-menu > header strong { font-size: 13px; color: var(--wd-text); }
.wd-menu-count { font-size: 11px; color: var(--wd-muted-2); }
.wd-menu > footer {
    padding: 8px 10px 4px;
    margin-top: 4px;
    border-top: 1px solid rgba(126,160,219,.13);
    text-align: center;
}
.wd-menu > footer a { font-size: 11.5px; font-weight: 600; color: var(--wd-muted); }
.wd-menu > footer a:hover { color: var(--wd-cyan); }
.wd-menu-scroll { max-height: 340px; overflow-y: auto; }
.wd-menu-sep { height: 1px; margin: 6px 8px; background: rgba(126,160,219,.13); }

/* --- Filas de aviso --------------------------------------- */
.wd-alert-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 11px;
    padding: 10px;
    border-radius: 12px;
    color: var(--wd-text);
    text-decoration: none;
    transition: background .14s ease;
}
.wd-alert-row:hover { background: rgba(56,119,226,.14); color: var(--wd-text); }
.wd-alert-row b {
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    font: 800 14px/1 'Inter', sans-serif;
}
.wd-alert-row.tone-danger  b { background: rgba(255,77,94,.16);  color: #FF8A96; border: 1px solid rgba(255,77,94,.26); }
.wd-alert-row.tone-warning b { background: rgba(250,204,21,.14); color: #FBD34D; border: 1px solid rgba(250,204,21,.24); }
.wd-alert-row.tone-info    b { background: rgba(34,211,238,.14); color: #67E8F9; border: 1px solid rgba(34,211,238,.24); }
.wd-alert-row span { min-width: 0; display: block; }
.wd-alert-row strong { display: block; font-size: 12.5px; font-weight: 650; }
.wd-alert-row em {
    display: block;
    margin-top: 2px;
    font-style: normal;
    font-size: 11px;
    line-height: 1.35;
    color: var(--wd-muted-2);
}
.wd-alert-go { width: 15px; height: 15px; color: var(--wd-muted-2); }
.wd-alert-row:hover .wd-alert-go { color: var(--wd-cyan); }

.wd-menu-empty { padding: 18px 16px 22px; text-align: center; }
.wd-menu-empty-icon {
    width: 42px; height: 42px;
    margin: 0 auto 10px;
    display: grid; place-items: center;
    border-radius: 999px;
    background: rgba(34,197,94,.13);
    border: 1px solid rgba(34,197,94,.26);
    color: #4ADE80;
}
.wd-menu-empty-icon svg { width: 20px; height: 20px; }
.wd-menu-empty strong { display: block; font-size: 13px; }
.wd-menu-empty p { margin: 5px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--wd-muted-2); }

/* --- Menú de usuario --------------------------------------- */
.wd-menu-user { width: 320px; }
.wd-menu-id {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 10px 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(126,160,219,.13);
}
.wd-menu-id-avatar { width: 44px; height: 44px; font-size: 16px; }
.wd-menu-id > span { min-width: 0; }
.wd-menu-id strong {
    display: block;
    font-size: 13.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wd-menu-id em {
    display: block;
    margin-top: 1px;
    font-style: normal;
    font-size: 11.5px;
    color: var(--wd-muted-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wd-role-pill {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(24,119,255,.35);
    background: rgba(24,119,255,.14);
    color: #8FC0FF;
    font: 700 10px/1.5 'Inter', sans-serif;
    font-style: normal;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.wd-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--wd-text);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
}
.wd-menu-item > svg {
    width: 18px; height: 18px;
    flex: 0 0 auto;
    color: var(--wd-muted);
}
.wd-menu-item > span { flex: 1; min-width: 0; }
.wd-menu-item strong { display: block; font-size: 12.5px; font-weight: 650; }
.wd-menu-item em {
    display: block;
    margin-top: 1px;
    font-style: normal;
    font-size: 11px;
    color: var(--wd-muted-2);
}
.wd-menu-item kbd {
    flex: 0 0 auto;
    padding: 3px 7px;
    border-radius: 6px;
    background: rgba(255,255,255,.07);
    color: #8794B3;
    font: 600 10px/1 'Inter', sans-serif;
}
.wd-menu-item:hover { background: rgba(56,119,226,.16); color: var(--wd-text); }
.wd-menu-item:hover > svg { color: var(--wd-cyan); }

/* Cerrar sesión: rojo, al final y separado. Además va dentro de un
   <form> con POST + CSRF y confirmación, así que no se puede disparar
   por accidente ni desde un prefetch del navegador. */
.wd-menu-logout { margin: 0; }
.wd-menu-item.is-danger { color: #FF8A96; }
.wd-menu-item.is-danger > svg { color: #FF8A96; }
.wd-menu-item.is-danger:hover { background: rgba(255,77,94,.15); color: #FFB3BB; }
.wd-menu-item.is-danger:hover > svg { color: #FF6B7C; }
.wd-menu-item.is-danger em { color: rgba(255,138,150,.62); }

/* ============================================================
   Paleta de búsqueda global (overlay centrado)
   ============================================================ */
body.wd-palette-lock { overflow: hidden; }

.wd-palette {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: grid;
    grid-template-rows: 1fr auto;
    justify-items: center;
    padding: clamp(48px, 11vh, 130px) 18px 24px;
    align-content: start;
    opacity: 0;
    transition: opacity .16s ease;
}
.wd-palette.is-open { opacity: 1; }
.wd-palette[hidden] { display: none; }

.wd-palette-backdrop {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(900px 500px at 50% 0%, rgba(24,119,255,.16), transparent 65%),
        rgba(2, 7, 18, .72);
    backdrop-filter: blur(7px) saturate(120%);
    -webkit-backdrop-filter: blur(7px) saturate(120%);
}

.wd-palette-dialog {
    position: relative;
    width: min(100%, 720px);
    max-height: min(70vh, 620px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(147,183,255,.22);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(19, 32, 70, .97), rgba(7, 14, 34, .985));
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow:
        0 46px 110px -40px rgba(0,0,0,.95),
        0 0 0 1px rgba(255,255,255,.03) inset,
        0 1px 0 rgba(255,255,255,.07) inset;
    transform: translateY(-14px) scale(.975);
    opacity: 0;
    transition: transform .2s cubic-bezier(.2,.9,.28,1), opacity .16s ease;
}
.wd-palette.is-open .wd-palette-dialog { transform: none; opacity: 1; }

/* Filo superior de color: el detalle que hace que el modal se sienta
   "de producto" y no un cuadro gris más. */
.wd-palette-dialog::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(34,211,238,.75), rgba(24,119,255,.75), transparent);
}

/* --- Campo de búsqueda ------------------------------------- */
.wd-palette-field {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 16px 20px;
    border-bottom: 1px solid rgba(126,160,219,.14);
    background: rgba(255,255,255,.02);
}
.wd-palette-glass { width: 20px; height: 20px; flex: 0 0 auto; color: var(--wd-muted); }
.wd-palette.is-loading .wd-palette-glass { color: var(--wd-cyan); }

.wd-palette-field input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--wd-text);
    font: 500 16px/1.4 'Inter', sans-serif;
    letter-spacing: -0.01em;
}
.wd-palette-field input::placeholder { color: #64748B; }

/* Indicador de carga: solo visible mientras hay una petición en vuelo. */
.wd-palette-spin {
    width: 15px; height: 15px;
    flex: 0 0 auto;
    border-radius: 999px;
    border: 2px solid rgba(147,183,255,.20);
    border-top-color: var(--wd-cyan);
    opacity: 0;
    transition: opacity .15s ease;
}
.wd-palette.is-loading .wd-palette-spin { opacity: 1; animation: wd-spin .7s linear infinite; }
@keyframes wd-spin { to { transform: rotate(360deg); } }

/* Botón "volver" de la paleta. Solo existe en móvil (ver el bloque
   responsive del final): en escritorio se cierra con Escape, con la
   pastilla "esc" o pulsando fuera del diálogo. */
.wd-palette-back {
    display: none;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    place-items: center;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--wd-text);
    cursor: pointer;
}
.wd-palette-back svg { width: 20px; height: 20px; }
.wd-palette-back:active { background: rgba(255, 255, 255, .09); }

.wd-palette-clear,
.wd-palette-esc {
    flex: 0 0 auto;
    border: 1px solid var(--wd-border);
    background: rgba(255,255,255,.05);
    color: var(--wd-muted-2);
    cursor: pointer;
    transition: color .14s ease, background .14s ease, border-color .14s ease;
}
.wd-palette-clear {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border-radius: 999px;
}
/* display:grid gana a [hidden], que solo aplica display:none de UA. */
.wd-palette-clear[hidden] { display: none; }
.wd-palette-clear svg { width: 13px; height: 13px; }
.wd-palette-esc {
    padding: 5px 10px;
    border-radius: 8px;
    font: 700 10px/1 'Inter', sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.wd-palette-clear:hover,
.wd-palette-esc:hover { color: var(--wd-text); background: rgba(255,255,255,.1); border-color: var(--wd-border-strong); }

/* --- Cuerpo de resultados ---------------------------------- */
.wd-palette-body {
    /* flex:0 1 auto y NO flex:1 — así el diálogo se encoge hasta el
       alto de sus resultados en lugar de dejar un vacío enorme cuando
       solo hay dos filas. El tope lo pone max-height del diálogo. */
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(147,183,255,.25) transparent;
}
.wd-palette-body::-webkit-scrollbar { width: 9px; }
.wd-palette-body::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: rgba(147,183,255,.24);
    background-clip: content-box;
}

.wd-res-group + .wd-res-group { margin-top: 6px; }
.wd-res-group > header {
    position: sticky;
    top: -8px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 6px;
    background: linear-gradient(180deg, rgba(10,18,40,.98) 65%, rgba(10,18,40,0));
    font: 800 10px/1 'Inter', sans-serif;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: #7E8CA6;
}
.wd-res-group > header i {
    font-style: normal;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    color: #93A2BC;
    letter-spacing: 0;
}
.wd-res-wipe {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: #7E8CA6;
    font: 700 10px/1 'Inter', sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
}
.wd-res-wipe:hover { color: var(--wd-cyan); }

/* --- Fila de resultado -------------------------------------- */
.wd-res {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 12px;
    color: var(--wd-text);
    text-decoration: none;
    scroll-margin: 46px 0 12px;
    transition: background .12s ease, box-shadow .12s ease;
}
.wd-res.is-active {
    background: linear-gradient(90deg, rgba(24,119,255,.20), rgba(24,119,255,.09));
    box-shadow: inset 0 0 0 1px rgba(120,175,255,.26);
}
.wd-res:hover { color: var(--wd-text); }

.wd-res-icon {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 11px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.05);
    color: var(--wd-muted);
}
.wd-res-icon svg { width: 18px; height: 18px; }
.wd-res.is-active .wd-res-icon { border-color: rgba(147,183,255,.28); }

/* Un color por módulo. Ayuda a distinguir de un vistazo si el
   resultado es una web, un dominio o un certificado sin tener que
   leer la cabecera del grupo. */
.wd-res-icon.g-sites        { color: #7DB8FF; background: rgba(24,119,255,.13); }
.wd-res-icon.g-clients      { color: #C4A6FF; background: rgba(168,85,247,.13); }
.wd-res-icon.g-domains      { color: #67E8F9; background: rgba(34,211,238,.12); }
.wd-res-icon.g-certificates { color: #6EE7A8; background: rgba(34,197,94,.12); }
.wd-res-icon.g-hosting      { color: #A5B4FC; background: rgba(129,140,248,.13); }
.wd-res-icon.g-incidents    { color: #FF95A2; background: rgba(255,77,94,.12); }
.wd-res-icon.g-maintenances { color: #FBD34D; background: rgba(250,204,21,.11); }
.wd-res-icon.g-developments { color: #7DD3FC; background: rgba(56,189,248,.12); }
.wd-res-icon.g-users        { color: #FDBA74; background: rgba(249,115,22,.12); }
.wd-res-icon.g-actions      { color: #FDE68A; background: rgba(250,204,21,.10); }
.wd-res-icon.g-recent       { color: #93A2BC; }

.wd-res-copy { min-width: 0; }
.wd-res-copy strong {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wd-res-copy em {
    display: block;
    margin-top: 2px;
    font-style: normal;
    font-size: 11.5px;
    color: var(--wd-muted-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Resaltado del tramo que coincide con lo escrito. */
.wd-res-copy mark {
    padding: 0 1px;
    border-radius: 3px;
    background: rgba(34,211,238,.22);
    color: #A5F3FC;
    font-weight: 700;
}
.wd-res-copy em mark { background: rgba(34,211,238,.16); color: #7DD3FC; font-weight: 600; }

.wd-res-tail {
    display: flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
}
.wd-res-meta { font-style: normal; font-size: 11px; color: #6F7E94; }
.wd-res-badge {
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid transparent;
    font: 700 10px/1.4 'Inter', sans-serif;
}
.wd-res-badge.tone-ok      { background: rgba(34,197,94,.14);  color: #6EE7A8; border-color: rgba(34,197,94,.24); }
.wd-res-badge.tone-danger  { background: rgba(255,77,94,.14);  color: #FF95A2; border-color: rgba(255,77,94,.26); }
.wd-res-badge.tone-warning { background: rgba(250,204,21,.13); color: #FBD34D; border-color: rgba(250,204,21,.24); }
.wd-res-badge.tone-info    { background: rgba(34,211,238,.13); color: #67E8F9; border-color: rgba(34,211,238,.24); }
.wd-res-badge.tone-muted   { background: rgba(255,255,255,.06); color: #93A2BC; border-color: rgba(255,255,255,.08); }

/* Icono "intro": solo se ve en la fila seleccionada, para dejar claro
   qué abrirá la tecla Enter. */
.wd-res-enter {
    width: 15px; height: 15px;
    color: #8FC0FF;
    opacity: 0;
    transform: translateX(-3px);
    transition: opacity .14s ease, transform .14s ease;
}
.wd-res.is-active .wd-res-enter { opacity: 1; transform: none; }

/* --- Estados (vacío / error / pocas letras) ----------------- */
.wd-palette-state { padding: 42px 28px 48px; text-align: center; }
.wd-palette-state-icon {
    width: 52px; height: 52px;
    margin: 0 auto 14px;
    display: grid; place-items: center;
    border-radius: 16px;
    border: 1px solid var(--wd-border);
    background: rgba(255,255,255,.04);
    color: var(--wd-muted-2);
}
.wd-palette-state-icon svg { width: 23px; height: 23px; }
.wd-palette-state.is-error .wd-palette-state-icon {
    border-color: rgba(255,77,94,.28);
    background: rgba(255,77,94,.10);
    color: #FF95A2;
}
.wd-palette-state strong { display: block; font-size: 14px; }
.wd-palette-state p {
    max-width: 380px;
    margin: 7px auto 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--wd-muted-2);
}

/* --- Pantalla inicial sin recientes -------------------------- */
.wd-palette-hints {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 8px 16px;
}
.wd-palette-hint {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px;
    border: 1px solid rgba(126,160,219,.13);
    border-radius: 13px;
    background: rgba(255,255,255,.025);
}
.wd-palette-hint > span:last-child { min-width: 0; }
.wd-palette-hint strong { display: block; font-size: 12.5px; }
.wd-palette-hint em {
    display: block;
    margin-top: 3px;
    font-style: normal;
    font-size: 11px;
    line-height: 1.4;
    color: var(--wd-muted-2);
}

/* --- Pie de atajos ------------------------------------------ */
.wd-palette-foot {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 18px;
    border-top: 1px solid rgba(126,160,219,.13);
    background: rgba(4, 10, 26, .6);
    font-size: 10.5px;
    color: #6F7E94;
}
.wd-palette-foot span { display: inline-flex; align-items: center; gap: 5px; }
.wd-palette-foot kbd {
    min-width: 19px;
    padding: 3px 5px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 6px;
    background: rgba(255,255,255,.06);
    color: #9FB0CC;
    font: 600 10px/1 'Inter', sans-serif;
}
.wd-palette-foot-brand {
    margin-left: auto;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #4A5A76;
}

/* ------------------------------------------------------------
   Accesibilidad y pantallas pequeñas
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .wd-palette,
    .wd-palette-dialog,
    .wd-menu,
    .wd-res,
    .wd-res-enter { transition: none; animation: none; }
    .wd-icon-btn em { animation: none; }
    .wd-palette.is-loading .wd-palette-spin { animation: none; }
}

/* ============================================================
   Armazón responsive
   ============================================================
   Móvil y tablet: la barra lateral pasa a ser un cajón deslizante y
   la cabecera se vuelve una barra fija y compacta.

   Punto de partida (lo que había): a partir de 980px la barra lateral
   se convertía en una parrilla de enlaces encima del contenido, el
   botón ☰ era decorativo — no tenía JavaScript detrás — y la cabecera
   se partía en dos filas con el buscador ocupando el ancho completo.
   Había que hacer scroll pasando doce enlaces para llegar al contenido
   de cualquier pantalla.

   Ahora:
     · La barra lateral es un cajón que entra desde la izquierda sobre
       un velo, con la misma navegación vertical que en escritorio.
     · La cabecera queda fija arriba: marca, buscador (solo el icono),
       avisos y perfil. Siempre a un toque, sin scroll.
     · Los desplegables de avisos y perfil se convierten en hojas
       inferiores, que es donde llega el pulgar.
     · La paleta de búsqueda pasa a pantalla completa.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   Tablet y móvil (≤ 980px)
------------------------------------------------------------ */
@media (max-width: 980px) {

    /* --- Cajón lateral ------------------------------------- */
    .app { grid-template-columns: 1fr; }

    .sidebar {
        position: fixed;
        z-index: 3200;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(86vw, 300px);
        height: 100dvh;
        height: 100vh;               /* respaldo para navegadores sin dvh */
        padding: 18px 14px 16px;
        gap: 14px;
        overflow-y: auto;
        overscroll-behavior: contain;
        border-right: 1px solid rgba(80, 126, 220, .28);
        box-shadow: 34px 0 70px -40px rgba(0, 0, 0, .95);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .26s cubic-bezier(.22, .9, .28, 1), visibility .26s;
    }
    body.wd-nav-open .sidebar { transform: none; visibility: visible; }

    /* La navegación NO se aplana: sigue siendo una lista vertical,
       que es como se lee y se toca bien en un móvil. */
    .nav { flex-direction: column; flex-wrap: nowrap; gap: 4px; }
    .nav a { min-height: 48px; }     /* objetivo táctil cómodo */

    .wd-nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 3100;
        background: rgba(2, 7, 18, .66);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        opacity: 0;
        transition: opacity .24s ease;
    }
    body.wd-nav-open .wd-nav-backdrop { opacity: 1; }
    body.wd-nav-open { overflow: hidden; }

    .brand { position: relative; padding-right: 44px; }
    .sidebar-close {
        position: absolute;
        top: -2px;
        right: 0;
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        border: 1px solid var(--wd-border);
        border-radius: 11px;
        background: rgba(255, 255, 255, .05);
        color: var(--wd-muted);
        cursor: pointer;
    }
    .sidebar-close svg { width: 16px; height: 16px; }
    .sidebar-close:active { background: rgba(255, 255, 255, .12); }

    /* --- Cabecera fija -------------------------------------- */
    .main { padding: 0 14px 40px; }

    .topbar {
        position: sticky;
        z-index: 1500;
        top: 0;
        min-height: 62px;
        margin: 0 -14px 16px;
        padding: 9px 14px;
        gap: 9px;
        flex-wrap: nowrap;
        isolation: isolate;
    }
    /* OJO: el desenfoque va en un ::before, NO en .topbar.
       Un elemento con backdrop-filter (o filter, o transform) se
       convierte en el bloque contenedor de sus descendientes
       position:fixed. Con el filtro puesto en .topbar, las hojas
       inferiores de avisos y perfil — que cuelgan de la cabecera —
       se anclaban al borde inferior de la PROPIA cabecera y salían
       pegadas arriba, fuera de la pantalla. En el pseudo-elemento
       el efecto se ve igual y las hojas vuelven a referirse a la
       ventana. */
    .topbar::before {
        content: '';
        position: absolute;
        z-index: -1;
        inset: 0;
        border-bottom: 1px solid rgba(126, 160, 219, .16);
        background: rgba(6, 13, 30, .88);
        backdrop-filter: blur(16px) saturate(130%);
        -webkit-backdrop-filter: blur(16px) saturate(130%);
    }
    .topbar-spacer { display: block; flex: 1; }

    .topbar-menu {
        display: inline-grid;
        width: 44px;
        height: 44px;
        flex: 0 0 auto;
        border-radius: 12px;
        color: var(--wd-text);
    }
    .topbar-menu svg { width: 20px; height: 20px; }

    .topbar-brand {
        display: flex;
        align-items: center;
        gap: 9px;
        min-width: 0;
        color: var(--wd-text);
        text-decoration: none;
    }
    .topbar-brand img {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        object-fit: contain;
        flex: 0 0 auto;
    }
    .topbar-brand span {
        font-size: 15px;
        font-weight: 800;
        letter-spacing: -.02em;
        white-space: nowrap;
    }
    .topbar-brand b { color: var(--wd-cyan); font-weight: 800; }

    /* El buscador se reduce a su icono: en 390px de ancho no caben un
       campo, la campana y el perfil sin que todo quede apretado. El
       overlay a pantalla completa hace el resto del trabajo. */
    .wd-search-trigger {
        width: 44px;
        min-height: 44px;
        flex: 0 0 auto;
        justify-content: center;
        padding: 0;
        border-radius: 12px;
        cursor: pointer;
    }
    .wd-search-trigger-label,
    .wd-search-trigger kbd { display: none; }
    .wd-search-trigger svg { width: 19px; height: 19px; opacity: 1; }

    .topbar-tools { gap: 7px; }
    .wd-icon-btn { width: 44px; height: 44px; }
    .wd-user-trigger { padding: 3px; gap: 0; }
    .wd-user-trigger .topbar-user-copy,
    .wd-user-caret { display: none; }
    .wd-user-trigger .topbar-avatar { width: 38px; height: 38px; }

    /* --- Paleta a pantalla completa -------------------------- */
    .wd-palette { padding: 0; grid-template-rows: 1fr; }
    .wd-palette-dialog {
        width: 100%;
        max-height: none;
        height: 100dvh;
        height: 100vh;
        border: 0;
        border-radius: 0;
        transform: translateY(12px);
    }
    .wd-palette-dialog::before { display: none; }
    .wd-palette-body { flex: 1; }
    .wd-palette-field {
        padding: calc(12px + env(safe-area-inset-top)) 12px 12px 8px;
        gap: 8px;
    }
    .wd-palette-back { display: grid; }
    .wd-palette-glass,
    .wd-palette-esc { display: none; }
    .wd-palette-body { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
    .wd-palette-hints { grid-template-columns: 1fr; }
    .wd-res { padding: 11px 12px; }         /* filas más altas: se tocan */
    .wd-palette-foot { display: none; }     /* no hay teclado que explicar */
}

/* ------------------------------------------------------------
   Móvil (≤ 620px): los desplegables pasan a hoja inferior
   ------------------------------------------------------------
   Un menú anclado arriba a la derecha obliga a estirar el pulgar
   hasta la esquina más incómoda de la pantalla. Anclado abajo, y
   ocupando todo el ancho, se usa con una mano.
------------------------------------------------------------ */
@media (max-width: 620px) {
    .wd-menu {
        position: fixed;
        z-index: 3400;
        top: auto;
        right: 0;
        left: 0;
        bottom: 0;
        width: auto;
        max-height: 82dvh;
        max-height: 82vh;
        display: flex;
        flex-direction: column;
        padding: 8px 10px calc(14px + env(safe-area-inset-bottom));
        border: 0;
        border-top: 1px solid rgba(147, 183, 255, .22);
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -26px 60px -26px rgba(0, 0, 0, .95);
        animation: wd-sheet-in .22s cubic-bezier(.2, .9, .3, 1);
    }
    /* Asa superior: la señal universal de "esto se desliza / se cierra". */
    .wd-menu::before {
        content: '';
        width: 42px;
        height: 4px;
        margin: 4px auto 8px;
        flex: 0 0 auto;
        border-radius: 999px;
        background: rgba(147, 183, 255, .30);
    }
    @keyframes wd-sheet-in {
        from { opacity: 0; transform: translateY(18px); }
        to   { opacity: 1; transform: none; }
    }
    .wd-menu-scroll { max-height: none; flex: 1; overflow-y: auto; }
    .wd-menu > header { padding: 4px 8px 8px; }
    .wd-menu-user { width: auto; }

    /* Velo propio de la hoja. El <details> no trae uno, así que se
       dibuja con un pseudo-elemento del contenedor abierto. */
    .dd.wd-pop[open]::after {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 3300;
        background: rgba(2, 7, 18, .58);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    /* Filas y objetivos táctiles algo más generosos. */
    .wd-alert-row { padding: 12px 10px; }
    .wd-menu-item { padding: 12px 10px; }
    .wd-menu-item strong { font-size: 13.5px; }
    .wd-menu-item em { font-size: 11.5px; }
    .wd-menu-item kbd { display: none; }
}

/* ------------------------------------------------------------
   Móvil estrecho (≤ 430px)
------------------------------------------------------------ */
@media (max-width: 430px) {
    .main { padding: 0 11px 34px; }
    .topbar { margin: 0 -11px 14px; padding: 8px 11px; gap: 6px; }
    .wd-res-tail .wd-res-meta { display: none; }
    .wd-palette-field input { font-size: 16px; } /* iOS no hace zoom con 16px */
    .wd-res { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; }
    .wd-res-icon { width: 34px; height: 34px; border-radius: 10px; }
    .wd-res-icon svg { width: 16px; height: 16px; }
    .wd-res-enter { display: none; }
    .sidebar { width: min(90vw, 292px); }
}

/* ------------------------------------------------------------
   Contenido de los listados en móvil
   ------------------------------------------------------------
   Dos cosas hacían que las pantallas de listado (Webs, Dominios,
   Hosting, Certificados…) fuesen incómodas en un teléfono:

   1. Los KPI se apilaban de uno en uno. Cinco tarjetas de 112px
      son casi una pantalla entera de scroll antes de ver el primer
      dato real. Pasan a dos columnas y a un tamaño compacto: la
      misma información en un cuarto del espacio.

   2. Las tablas son anchas (hasta nueve columnas) y hay que
      desplazarlas en horizontal, así que a los dos dedos ya no
      sabes de qué fila estás leyendo el dato. La primera columna
      —siempre el identificador: el dominio, la web, el cliente—
      se queda fija a la izquierda, con una sombra que marca el
      corte, y un degradado en el borde derecho avisa de que
      todavía queda tabla por ver.
------------------------------------------------------------ */
@media (max-width: 760px) {
    .data-summary-grid.kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .data-summary-grid .kpi {
        min-height: 0;
        padding: 12px 13px;
        border-radius: 13px;
    }
    .data-summary-grid .kpi-label { font-size: 9.5px; letter-spacing: .07em; }
    .data-summary-grid .kpi-value { margin-top: 3px; font-size: 25px; }
    .data-summary-grid .kpi-foot  { margin-top: 2px; font-size: 10.5px; line-height: 1.3; }

    /* --- Tabla con la primera columna congelada --- */
    .data-table-surface { position: relative; }

    table.data-table thead th:first-child,
    table.data-table tbody td:first-child {
        position: sticky;
        left: 0;
        z-index: 3;
        max-width: 168px;
        /* Fondo OPACO obligatorio: las celdas son transparentes y, al
           quedarse fijas, dejarían ver pasar el resto de la fila por
           debajo. */
        background: #0A1730;
        box-shadow: 14px 0 16px -14px rgba(0, 0, 0, .9);
    }
    table.data-table thead th:first-child { z-index: 4; background: #091428; }
    table.data-table tbody td:first-child > strong,
    table.data-table tbody td:first-child > a {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* La fila resaltada también tiñe su celda fija, si no el color se
       corta justo en la primera columna y parece un fallo de pintado. */
    table.data-table tbody tr:hover > td:first-child,
    table.data-table tbody tr.is-open > td:first-child { background: #0D1E3C; }

    table.data-table tbody td { padding: 11px 10px; }
    table.data-table thead th { height: 42px; padding: 0 10px; }

    /* Aviso de "hay más a la derecha". Se apaga al llegar al final
       (app.js marca .is-at-end en el contenedor con scroll). */
    .data-table-surface::after {
        content: '';
        position: absolute;
        z-index: 2;
        top: 0;
        right: 0;
        bottom: 0;
        width: 34px;
        pointer-events: none;
        background: linear-gradient(90deg, rgba(6, 13, 30, 0), rgba(6, 13, 30, .92));
        opacity: 0;
        transition: opacity .18s ease;
    }
    .data-table-surface:has(.data-table-scroll.is-scrollable)::after { opacity: 1; }
    .data-table-surface:has(.data-table-scroll.is-at-end)::after { opacity: 0; }

    /* Barra de desplazamiento siempre visible: en móvil no hay puntero
       que la revele al pasar por encima. */
    .data-table-scroll { scrollbar-width: thin; padding-bottom: 2px; }
    .data-table-scroll::-webkit-scrollbar { height: 7px; }
    .data-table-scroll::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(93, 135, 205, .38);
    }
}

/* ------------------------------------------------------------
   El cajón y la cabecera fija solo existen en móvil
------------------------------------------------------------ */
@media (min-width: 981px) {
    .topbar-menu,
    .topbar-brand,
    .sidebar-close,
    .wd-nav-backdrop { display: none !important; }
}

/* Pantallas muy estrechas (≤ 360px): solo el logotipo. */
@media (max-width: 360px) {
    .topbar-brand span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .wd-nav-backdrop { transition: none; }
    .wd-menu { animation: none; }
}

/* Dashboard: tareas concretas de renovaciones y operación */
.work-dashboard { display: flex; flex-direction: column; gap: 22px; }
.work-icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.work-dashboard svg:not(.work-icon-defs) { width: 21px; height: 21px; display: block; }
.work-header { position: relative; isolation: isolate; overflow: hidden; min-height: 212px; display: grid; grid-template-columns: minmax(0, 1fr) 220px; grid-template-rows: 1fr auto; column-gap: 20px; align-items: end; padding: 28px 34px; border: 1px solid rgba(115, 158, 241, .24); border-radius: 20px; background: radial-gradient(circle at 79% 10%, rgba(96, 77, 245, .23), transparent 29%), radial-gradient(circle at 58% 115%, rgba(21, 201, 210, .14), transparent 37%), linear-gradient(122deg, #122A58, #0B1736 58%, #1A1948); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 24px 58px -44px #000; }
.work-header::after { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .32; pointer-events: none; background-image: radial-gradient(circle, rgba(162, 186, 255, .38) 1px, transparent 1px); background-size: 19px 19px; mask-image: linear-gradient(90deg, transparent 48%, #000 100%); }
.work-header-copy { position: relative; z-index: 1; align-self: end; }
.work-header h1 { margin: 9px 0 8px; font-size: clamp(27px, 3.1vw, 38px); line-height: 1.12; letter-spacing: -.035em; }
.work-header p { max-width: 580px; margin: 0; color: #B7C9E3; font-size: 14px; line-height: 1.5; }
.work-header .btn { position: relative; z-index: 2; grid-column: 1; justify-self: start; min-height: 43px; margin-top: 18px; padding-inline: 19px; }
.work-header .btn span { margin-left: 8px; }
.work-hero-art { position: relative; z-index: 1; grid-column: 2; grid-row: 1 / 3; width: 190px; height: 160px; justify-self: center; align-self: center; }
.work-hero-orbit { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(145, 175, 255, .19); border-radius: 50%; transform: translate(-50%, -50%) rotate(-18deg); }
.work-hero-orbit.is-outer { width: 186px; height: 126px; }
.work-hero-orbit.is-inner { width: 128px; height: 128px; border-color: rgba(105, 226, 232, .23); }
.work-hero-core { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; display: grid; place-items: center; border: 1px solid rgba(122, 221, 255, .52); border-radius: 21px; background: linear-gradient(140deg, #1975C7, #3549B6 62%, #703BA8); color: #E8FBFF; box-shadow: 0 18px 45px rgba(23, 77, 219, .39), inset 0 1px rgba(255,255,255,.32); transform: translate(-50%, -50%) rotate(-10deg); }
.work-hero-core svg { width: 35px !important; height: 35px !important; transform: rotate(10deg); }
.work-hero-satellite { position: absolute; width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.26); border-radius: 12px; box-shadow: 0 10px 26px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.27); }
.work-hero-satellite.is-provider { top: 4px; left: 22px; background: linear-gradient(145deg, #A366E4, #623EA9); color: #fff; transform: rotate(-12deg); }
.work-hero-satellite.is-certificate { top: 4px; right: 11px; background: linear-gradient(145deg, #27C9D4, #15788F); color: #F2FFFF; transform: rotate(11deg); }
.work-hero-satellite.is-upcoming { bottom: 1px; right: 31px; background: linear-gradient(145deg, #F1B658, #C46D36); color: #FFF7E5; transform: rotate(-8deg); }
.work-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.work-summary-item { position: relative; min-height: 142px; display: flex; align-items: flex-start; gap: 14px; overflow: hidden; padding: 22px; border: 1px solid rgba(124, 159, 226, .18); border-radius: 17px; background: radial-gradient(circle at 95% 105%, var(--work-glow), transparent 58%), linear-gradient(140deg, rgba(22, 38, 72, .98), rgba(10, 21, 46, .97)); color: #EDF4FF; box-shadow: inset 0 1px rgba(255,255,255,.055); transition: transform .16s, border-color .16s, background .16s; }
.work-summary-item::before { content: ''; position: absolute; inset: auto -35px -80px auto; width: 180px; height: 180px; border-radius: 50%; background: var(--work-glow); filter: blur(28px); opacity: .7; pointer-events: none; }
.work-summary-item:hover { transform: translateY(-2px); border-color: var(--work-accent); color: #fff; }
.work-summary-item:focus-visible, .work-task:focus-visible, .work-panel-footer a:focus-visible, .work-small-list a:focus-visible { outline: 2px solid #88B5FF; outline-offset: 3px; }
.work-summary-item.is-provider { --work-accent: #B68AFF; --work-glow: rgba(141, 83, 255, .20); }
.work-summary-item.is-certificate { --work-accent: #61DFE9; --work-glow: rgba(42, 204, 226, .17); }
.work-summary-item.is-upcoming { --work-accent: #FFC36B; --work-glow: rgba(250, 178, 54, .16); }
.work-summary-icon { flex: none; width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--work-accent) 40%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--work-accent) 19%, transparent); color: var(--work-accent); box-shadow: 0 9px 25px -17px var(--work-accent); }
.work-summary-icon svg { width: 25px !important; height: 25px !important; }
.work-summary-copy { position: relative; min-width: 0; display: flex; flex-direction: column; }
.work-summary-copy small { color: #CBD6E7; font-size: 13px; font-weight: 700; }
.work-summary-copy strong { margin: 5px 0 3px; font-size: 35px; line-height: 1; letter-spacing: -.04em; }
.work-summary-copy em { color: #92A1B9; font-size: 11px; font-style: normal; line-height: 1.4; }
.work-summary-arrow { position: absolute; right: 18px; top: 19px; color: var(--work-accent); font-size: 18px; }
.work-primary-grid, .work-secondary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.work-panel { min-width: 0; display: flex; flex-direction: column; border: 1px solid rgba(124, 159, 226, .16); border-radius: 18px; background: linear-gradient(155deg, rgba(16, 31, 62, .96), rgba(8, 18, 39, .97)); box-shadow: inset 0 1px rgba(255,255,255,.045), 0 25px 60px -45px rgba(0,0,0,.7); scroll-margin-top: 24px; }
.work-dashboard #proveedor { border-top: 2px solid rgba(189, 142, 255, .58); background: radial-gradient(circle at 96% 0%, rgba(146, 76, 228, .12), transparent 42%), linear-gradient(155deg, rgba(16, 31, 62, .96), rgba(8, 18, 39, .97)); }
.work-dashboard #certificados { border-top: 2px solid rgba(109, 229, 235, .58); background: radial-gradient(circle at 96% 0%, rgba(52, 200, 214, .12), transparent 42%), linear-gradient(155deg, rgba(16, 31, 62, .96), rgba(8, 18, 39, .97)); }
.work-dashboard #por-gestionar { border-top: 2px solid rgba(255, 203, 124, .56); background: radial-gradient(circle at 96% 0%, rgba(234, 166, 68, .09), transparent 40%), linear-gradient(155deg, rgba(16, 31, 62, .96), rgba(8, 18, 39, .97)); }
.work-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 24px 19px; }
.work-section-label { display: inline-flex; align-items: center; gap: 10px; }
.work-section-icon { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(185, 141, 255, .31); border-radius: 9px; background: rgba(153, 94, 241, .15); color: #C49CFF; }
.work-section-icon svg { width: 18px !important; height: 18px !important; }
.work-section-icon.is-certificate { border-color: rgba(82, 223, 229, .32); background: rgba(65, 206, 216, .13); color: #78E4EB; }
.work-section-icon.is-upcoming, .work-section-icon.is-maintenance { border-color: rgba(250, 193, 99, .35); background: rgba(245, 169, 68, .13); color: #FFD188; }
.work-section-icon.is-incident { border-color: rgba(255, 114, 132, .32); background: rgba(255, 92, 113, .13); color: #FF99A7; }
.work-panel-head h2 { margin: 7px 0 4px; font-size: 21px; line-height: 1.2; letter-spacing: -.02em; }
.work-panel-head h3 { margin: 0 0 5px; font-size: 18px; letter-spacing: -.02em; }
.work-panel-head p { margin: 0; color: #9AAAC4; font-size: 12px; line-height: 1.5; }
.work-count { flex: none; min-width: 38px; height: 34px; display: grid; place-items: center; padding: 0 10px; border: 1px solid rgba(181, 138, 255, .26); border-radius: 9px; background: rgba(181, 138, 255, .10); color: #C7A4FF; font-size: 16px; font-weight: 750; }
.work-count.is-certificate { border-color: rgba(86, 219, 234, .25); background: rgba(86, 219, 234, .08); color: #7FE7F1; }
.work-count.is-upcoming, .work-count.is-maintenance { border-color: rgba(255, 195, 107, .26); background: rgba(255, 195, 107, .09); color: #FFD08B; }
.work-count.is-incident { border-color: rgba(255, 107, 127, .26); background: rgba(255, 107, 127, .09); color: #FF8E9D; }
.work-task-list { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 17px; }
.work-task { min-width: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 14px; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid rgba(132, 164, 223, .13); border-radius: 12px; background: rgba(255,255,255,.027); color: #E8F0FC; transition: border-color .16s, background .16s; }
.work-task:hover { border-color: rgba(102, 160, 255, .42); background: rgba(64, 112, 199, .11); color: #fff; }
.work-task-icon { --task-accent: #8FC0FF; --task-fill: rgba(68, 142, 235, .17); width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--task-accent) 28%, transparent); border-radius: 11px; background: var(--task-fill); color: var(--task-accent); }
.work-task-icon.is-domain { --task-accent: #58DCEB; --task-fill: rgba(44, 183, 206, .15); }
.work-task-icon.is-hosting { --task-accent: #AD9CFF; --task-fill: rgba(132, 109, 229, .16); }
.work-task-icon.is-license { --task-accent: #F4B875; --task-fill: rgba(225, 139, 72, .15); }
.work-task-icon.is-certificate { --task-accent: #71E6AC; --task-fill: rgba(55, 204, 127, .13); }
.work-task-icon.is-install { --task-accent: #66E1D7; --task-fill: rgba(38, 198, 186, .15); }
.work-task-icon.is-tech { --task-accent: #B89BFF; --task-fill: rgba(159, 111, 244, .16); }
.work-task:hover .work-task-icon { border-color: color-mix(in srgb, var(--task-accent) 60%, transparent); }
.work-task-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.work-task-action { color: #A6C6FC; font-size: 11px; font-weight: 750; }
.work-dashboard #proveedor .work-task-action { color: #C7ABFF; }
.work-dashboard #certificados .work-task-action { color: #83E8EA; }
.work-dashboard #por-gestionar .work-task-action { color: #FFD28D; }
.work-task-main strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.work-task-main small { overflow: hidden; color: #B0BED1; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.work-task-main em { overflow: hidden; color: #8091AB; font-size: 10px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.work-task-date { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: nowrap; }
.work-task-date b { color: #B7CFFF; font-size: 11px; }
.work-task-date small { color: #8999B1; font-size: 10px; }
.work-task-date.is-late b { color: #FF8798; }
.work-task-date.is-soon b { color: #FFD08B; }
.work-task-date.is-quiet b { color: #8999B1; }
.work-task-arrow { color: #8DA8D0; font-size: 17px; }
.work-panel-footer { margin-top: auto; padding: 15px 24px 19px; border-top: 1px solid rgba(132, 164, 223, .10); }
.work-panel-footer a { display: inline-flex; align-items: center; gap: 8px; color: #93BDFF; font-size: 12px; font-weight: 700; }
.work-panel-footer a:hover { color: #C7DDFF; }
.work-empty { min-height: 178px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 25px; text-align: center; }
.work-empty > span { width: 34px; height: 34px; display: grid; place-items: center; margin-bottom: 9px; border-radius: 50%; background: rgba(72, 213, 145, .11); color: #66DF9F; font-size: 18px; }
.work-empty > span svg { width: 19px !important; height: 19px !important; }
.work-empty strong { color: #D7E9F7; font-size: 14px; }
.work-empty p { margin: 5px 0 0; color: #8FA0B8; font-size: 11px; }
.work-upcoming .work-task-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.work-upcoming .work-empty { min-height: 120px; }
.work-other-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-top: 6px; }
.work-other-heading h2 { margin: 5px 0 0; font-size: 21px; }
.work-other-heading a { display: inline-flex; align-items: center; gap: 8px; color: #A7BFE8; font-size: 12px; font-weight: 650; }
.work-online-icon { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; background: rgba(59, 205, 143, .13); color: #5EE4AA; }
.work-online-icon svg { width: 16px !important; height: 16px !important; }
.work-other-heading a:hover { color: #D1E1FF; }
.work-compact .work-panel-head { padding-bottom: 15px; }
.work-small-list { display: flex; flex-direction: column; padding: 0 18px 16px; }
.work-small-list a { min-width: 0; display: grid; grid-template-columns: 31px minmax(0, 1fr) auto 12px; align-items: center; gap: 10px; padding: 10px 7px; border-top: 1px solid rgba(132, 164, 223, .10); color: #DAE5F6; }
.work-small-list a:hover { color: #fff; background: rgba(74, 121, 205, .06); }
.work-small-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; }
.work-small-icon.is-incident { background: rgba(255, 92, 113, .13); color: #FF99A7; }
.work-small-icon.is-maintenance { background: rgba(245, 169, 68, .13); color: #FFD188; }
.work-small-icon svg { width: 17px !important; height: 17px !important; }
.work-small-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.work-small-list strong, .work-small-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-small-list strong { font-size: 12px; }
.work-small-list small { color: #8B9DB7; font-size: 10px; }
.work-small-list em { color: #FFCC82; font-size: 10px; font-style: normal; font-weight: 700; white-space: nowrap; }
.work-small-list b { color: #86A7D8; font-size: 13px; }
.work-empty.is-small { min-height: 115px; }
@media (max-width: 1100px) {
    .work-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .work-summary-item { min-height: 154px; padding: 18px; }
    .work-summary-icon { width: 36px; height: 36px; }
    .work-summary-icon svg { width: 20px !important; height: 20px !important; }
}
@media (max-width: 780px) {
    .work-header { min-height: 0; grid-template-columns: 1fr; padding: 25px 23px; }
    .work-hero-art { display: none; }
    .work-summary, .work-primary-grid, .work-secondary-grid, .work-upcoming .work-task-list { grid-template-columns: 1fr; }
    .work-summary-item { min-height: 105px; }
    .work-other-heading { align-items: flex-start; flex-direction: column; gap: 7px; }
}
@media (max-width: 430px) {
    .work-panel-head { padding: 20px 18px 16px; }
    .work-task-list { padding-inline: 10px; }
    .work-task { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 9px; padding: 11px; }
    .work-task-icon { width: 32px; height: 32px; }
    .work-task-icon svg { width: 17px !important; height: 17px !important; }
    .work-task-arrow { display: none; }
    .work-task-date b { font-size: 10px; }
    .work-panel-footer { padding-inline: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .work-summary-item, .work-task { transition: none; }
}

/* WebDesk 1.12.0 · D abierta, identidad compartida con ProjectSuite. */
img.brand-logo {
    border-radius: 0;
    box-shadow: none;
}
.brand-name {
    font-weight: 700;
    letter-spacing: -.025em;
}
.brand-name span { color: #7dd3fc; }
img.brand-logo-lg {
    width: 84px;
    height: 84px;
    border-radius: 0;
    box-shadow: none;
}
.brand-name-lg { font-size: 30px; }
.topbar-brand img { border-radius: 0; }
.topbar-brand span { font-weight: 700; letter-spacing: -.025em; }
.topbar-brand b { color: #7dd3fc; font-weight: 700; }