/* ===== EliSentinel global styles ===== */
:root {
    --eli-radius: 14px;
    --eli-radius-sm: 10px;
    --eli-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.06);
    --eli-shadow-card-hover: 0 2px 4px rgba(15, 23, 42, 0.05), 0 10px 28px rgba(15, 23, 42, 0.10);
    --eli-success: #16A34A;
    --eli-warning: #F59E0B;
    --eli-error: #EF4444;
    --eli-neutral: #9CA3AF;
    --eli-primary: #3B6CF6; --eli-primary-rgb: 59,108,246; --eli-primary-dark: #2F5BE0;
}

html, body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* clip y no hidden: los dos impiden el scroll horizontal, pero «hidden» convierte a html y a body en
       contenedores con scroll propio, y entonces ningún «position: sticky» de dentro vuelve a funcionar —el
       índice de la ayuda se iba hacia arriba con el resto de la página—. «clip» recorta sin crear scroll. */
    overflow-x: hidden;   /* navegadores que no entienden clip */
    overflow-x: clip;
}

body { margin: 0; }

h1:focus { outline: none; }

/* ----- App shell ----- */
.app-bar {
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--mud-palette-divider);
}

.app-brand { text-decoration: none; color: inherit; }
.app-brand-text { font-weight: 700; letter-spacing: -0.01em; font-size: 1.1rem; }
.app-avatar { font-weight: 600; cursor: pointer; }

.app-drawer { border-right: 1px solid var(--mud-palette-divider); }

.app-nav { padding: 12px 10px; }
.app-nav .mud-nav-link { border-radius: var(--eli-radius-sm); margin-bottom: 2px; font-weight: 500; }
.app-nav .mud-nav-link.active { font-weight: 600; }
.app-nav-section {
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--mud-palette-text-secondary); padding: 16px 14px 6px;
}

.app-main { min-height: 100vh; display: flex; flex-direction: column; }
.app-main > .mud-container { flex: 1 1 auto; }
.app-content { padding-top: 24px; padding-bottom: 32px; }

.app-footer {
    display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
    padding: 16px; font-size: 0.75rem; color: var(--mud-palette-text-secondary);
    border-top: 1px solid var(--mud-palette-divider);
}
.app-footer-sep { opacity: 0.5; }

.app-logout-form { margin: 0; }
.app-logout-btn {
    width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
    display: flex; align-items: center; padding: 8px 16px; font: inherit; color: inherit;
}
.app-logout-btn:hover { background: var(--mud-palette-action-default-hover); }

/* ----- Page header ----- */
.page-header {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin-bottom: 24px;
}
.page-title { margin: 0; }
.page-subtitle { margin-top: 4px; }
.page-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ----- Cards ----- */
.app-card {
    border-radius: var(--eli-radius) !important;
    box-shadow: var(--eli-shadow-card) !important;
    border: 1px solid var(--mud-palette-divider);
    transition: box-shadow .2s ease, transform .2s ease;
}
.app-card-hover:hover { box-shadow: var(--eli-shadow-card-hover) !important; transform: translateY(-1px); }

.kpi-card { display: flex; gap: 14px; align-items: center; padding: 18px 20px; }
.kpi-icon {
    width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.kpi-primary { background: rgba(var(--eli-primary-rgb),0.12); color: var(--mud-palette-primary); }
.kpi-success { background: rgba(22,163,74,0.12); color: var(--mud-palette-success); }
.kpi-warning { background: rgba(245,158,11,0.14); color: var(--mud-palette-warning); }
.kpi-error { background: rgba(239,68,68,0.12); color: var(--mud-palette-error); }
.kpi-info { background: rgba(14,165,233,0.12); color: var(--mud-palette-info); }
.kpi-default, .kpi-secondary, .kpi-tertiary, .kpi-dark, .kpi-surface, .kpi-transparent, .kpi-inherit { background: rgba(156,163,175,0.15); color: var(--mud-palette-text-secondary); }
.kpi-body { min-width: 0; }
.kpi-title { line-height: 1.2; display: block; color: var(--mud-palette-text-secondary); }
.kpi-value { margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ----- Empty state ----- */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px 16px; gap: 8px; }
.empty-state-icon {
    width: 72px; height: 72px; border-radius: 22px; display: flex; align-items: center; justify-content: center;
    background: rgba(var(--eli-primary-rgb),0.10); color: var(--mud-palette-primary); margin-bottom: 8px;
}
.empty-state-title { margin: 0; }
.empty-state-text { max-width: 440px; }
.empty-state-actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* ----- Status colors (consistent across the site) ----- */
.status-ok { color: var(--eli-success); }
.status-warn { color: var(--eli-warning); }
.status-error { color: var(--eli-error); }
.status-off { color: var(--eli-neutral); }
.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent); }

/* ----- Loading ----- */
.app-loading { display: flex; justify-content: center; padding: 64px; }
.app-loading-spinner {
    width: 36px; height: 36px; border-radius: 50%; border: 3px solid rgba(var(--eli-primary-rgb),0.2); border-top-color: var(--eli-primary);
    animation: eli-spin .8s linear infinite;
}
@keyframes eli-spin { to { transform: rotate(360deg); } }

/* ----- Blazor error UI ----- */
#blazor-error-ui {
    color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,0.2);
    box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

/* ===== Login / static pages ===== */
.login-shell {
    box-sizing: border-box;
    min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 24px 16px; position: relative; overflow: hidden;
    background: #F4F6FB; color: #0F172A;
}
html.theme-dark .login-shell { background: #0B1220; color: #E2E8F0; }

.login-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.login-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; }
.login-orb-1 { width: 420px; height: 420px; background: #8FB0FF; top: -140px; left: -120px; }
.login-orb-2 { width: 380px; height: 380px; background: #C4B5FD; bottom: -160px; right: -120px; }
html.theme-dark .login-orb-1 { background: #1E3A8A; opacity: .6; }
html.theme-dark .login-orb-2 { background: #4C1D95; opacity: .5; }

.login-card {
    box-sizing: border-box;
    position: relative; width: 100%; max-width: 400px; padding: 36px 32px 28px;
    background: #FFFFFF; border-radius: 20px; border: 1px solid #E6E9F2;
    box-shadow: 0 2px 4px rgba(15,23,42,0.04), 0 20px 50px rgba(15,23,42,0.12);
}
html.theme-dark .login-card { background: #131C31; border-color: #1E293B; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }

.login-brand { text-align: center; margin-bottom: 24px; }
.login-brand h1 { margin: 12px 0 4px; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; }
.login-brand p { margin: 0; color: #64748B; font-size: .9rem; }
html.theme-dark .login-brand p { color: #94A3B8; }

.login-form { display: flex; flex-direction: column; gap: 16px; }
.login-field { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; font-weight: 500; color: #334155; }
html.theme-dark .login-field { color: #CBD5E1; }
.login-field input {
    width: 100%; box-sizing: border-box;
    font: inherit; font-size: 1rem; font-weight: 400; padding: 12px 14px; border-radius: 12px;
    border: 1px solid #CBD2E1; background: #FFFFFF; color: inherit; outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.login-field input:focus { border-color: var(--eli-primary); box-shadow: 0 0 0 4px rgba(var(--eli-primary-rgb),0.15); }
html.theme-dark .login-field input { background: #0F172A; border-color: #334155; }
.login-field input.invalid { border-color: #EF4444; }
.login-validation { color: #EF4444; font-size: .78rem; font-weight: 400; }

/* ----- Lo que rellena el navegador en la pantalla de acceso -----
   El color del texto autorrellenado lo fija el navegador y solo se puede cambiar con -webkit-text-fill-color.
   La regla general usa la variable de texto de MudBlazor; aqui se fijan los colores de esta pantalla para que
   el usuario y la contrasena recordados se lean tanto en claro como en oscuro, hayan cargado o no las
   variables del tema. */
.login-field input:-webkit-autofill,
.login-field input:-webkit-autofill:hover,
.login-field input:-webkit-autofill:focus,
.login-field input:-webkit-autofill:active {
    -webkit-text-fill-color: #0F172A;
    caret-color: #0F172A;
}
html.theme-dark .login-field input:-webkit-autofill,
html.theme-dark .login-field input:-webkit-autofill:hover,
html.theme-dark .login-field input:-webkit-autofill:focus,
html.theme-dark .login-field input:-webkit-autofill:active {
    -webkit-text-fill-color: #E2E8F0;
    caret-color: #E2E8F0;
}


.login-remember { display: flex; align-items: center; gap: 10px; font-size: .85rem; color: #475569; cursor: pointer; }
html.theme-dark .login-remember { color: #94A3B8; }
.login-remember input { width: 18px; height: 18px; accent-color: var(--eli-primary); }

.login-submit {
    width: 100%; box-sizing: border-box;
    margin-top: 4px; font: inherit; font-weight: 600; font-size: .95rem; padding: 13px 16px; border-radius: 12px; border: 0;
    background: linear-gradient(135deg, var(--eli-primary), var(--eli-primary-dark)); color: #fff; cursor: pointer;
    box-shadow: 0 6px 16px rgba(var(--eli-primary-rgb),0.35); transition: transform .1s, box-shadow .15s, filter .15s;
    display: block; text-align: center; text-decoration: none;
}
.login-submit:hover { filter: brightness(1.05); box-shadow: 0 8px 22px rgba(var(--eli-primary-rgb),0.45); }
.login-submit:active { transform: translateY(1px); }
.login-link { margin-top: 12px; }

.login-alert {
    display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; margin-bottom: 16px;
    background: rgba(239,68,68,0.10); color: #B91C1C; font-size: .85rem; border: 1px solid rgba(239,68,68,0.25);
}
html.theme-dark .login-alert { color: #FCA5A5; }
.login-alert-icon {
    flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: #EF4444; color: #fff;
    font-weight: 700; font-size: .75rem; display: flex; align-items: center; justify-content: center;
}
.login-hint { text-align: center; color: #64748B; font-size: .85rem; }
.login-hint code { font-size: .8rem; }

.login-footer { position: relative; margin-top: 24px; font-size: .75rem; color: #94A3B8; }

/* ----- Mobile ----- */
@media (max-width: 600px) {
    .app-content { padding-top: 16px; padding-left: 12px; padding-right: 12px; }
    .page-header { margin-bottom: 16px; }
    .page-title { font-size: 1.5rem; }
    .kpi-card { padding: 14px 14px; gap: 10px; }
    .kpi-icon { width: 38px; height: 38px; }
    .kpi-value { font-size: 1.15rem; }
    .login-card { padding: 28px 22px 22px; }
}

/* ----- Client cards ----- */
.client-card { padding: 18px 20px; cursor: pointer; }
.client-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.client-card-title { flex: 1; min-width: 0; }
.client-card-title .mud-typography { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-avatar { font-weight: 700; }
.client-card-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
@media (max-width: 599px) { .client-card-stats { grid-template-columns: 1fr; } }
.client-stat { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--mud-palette-text-secondary); }
.client-stat b { color: var(--mud-palette-text-primary); }

/* ----- Host rows (list that becomes cards on mobile) ----- */
.host-list { display: flex; flex-direction: column; gap: 6px; }
.host-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 12px 14px; border-radius: var(--eli-radius-sm); text-decoration: none; color: inherit;
    border: 1px solid var(--mud-palette-divider); transition: background .15s, border-color .15s;
}
a.host-row:hover { background: var(--mud-palette-table-hover); border-color: var(--mud-palette-lines-inputs); }
.host-row-main { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 240px; }
.host-row-main .mud-typography { overflow: hidden; text-overflow: ellipsis; }
.host-row-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.host-os-icon { color: var(--mud-palette-text-secondary); flex-shrink: 0; }
.host-filter { min-width: 260px; flex: 1; }
.host-filter-sm { min-width: 180px; }

/* ----- Key/value tables ----- */
.kv-table td:first-child { color: var(--mud-palette-text-secondary); width: 40%; }
.kv-table code { font-size: .8rem; word-break: break-all; }

/* ----- Wizard ----- */
.wizard-actions { display: flex; align-items: center; gap: 8px; width: 100%; padding-top: 8px; }
.os-options { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .os-options { grid-template-columns: 1fr 1fr; } }
.os-option {
    display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--eli-radius);
    border: 2px solid var(--mud-palette-divider); cursor: pointer; position: relative; transition: border-color .15s, background .15s;
}
.os-option.selected { border-color: var(--mud-palette-primary); background: rgba(var(--eli-primary-rgb),0.06); }
.os-option.disabled { opacity: .55; cursor: not-allowed; }
.os-option .os-icon { font-size: 36px; color: var(--mud-palette-text-secondary); flex-shrink: 0; }
.os-option.selected .os-icon { color: var(--mud-palette-primary); }
.os-check { position: absolute; top: 10px; right: 10px; display: none; }
.os-option.selected .os-check { display: block; }

.install-cmd {
    background: #0F172A; color: #E2E8F0; border-radius: var(--eli-radius-sm); padding: 14px 16px;
    font-family: Consolas, 'Cascadia Mono', monospace; font-size: .8rem; line-height: 1.5; overflow-x: auto; white-space: pre-wrap; word-break: break-all;
}
.install-cmd code { color: inherit; background: none; }

.storage-bar { height: 14px !important; }

/* ----- Audit ----- */
.audit-list { display: flex; flex-direction: column; }
.audit-row { display: flex; gap: 12px; padding: 10px 6px; border-bottom: 1px solid var(--mud-palette-divider); }
.audit-row:last-child { border-bottom: 0; }
.audit-icon { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(var(--eli-primary-rgb),0.10); color: var(--mud-palette-primary); flex-shrink: 0; }
.audit-body { min-width: 0; }
.audit-body code { font-size: .72rem; }

.host-tabs .mud-tabs-toolbar { border-bottom: 1px solid var(--mud-palette-divider); }

/* Stepper: on narrow screens show only the active step label */
@media (max-width: 700px) {
    .wizard-stepper .mud-stepper-nav .mud-step { padding: 12px 8px; }
    .wizard-stepper .mud-stepper-nav .mud-step:not(.active) .mud-step-label-content { display: none; }
    .wizard-stepper .mud-stepper-nav .mud-stepper-nav-connector { min-width: 10px; margin: 0 -4px; }
    .wizard-stepper .mud-stepper-content { padding: 0 4px; }
}

/* ----- Esperando al agente ----- */
.agent-wait {
    display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px;
    padding: 10px 14px; border-radius: var(--eli-radius-sm);
    border: 1px solid var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}
.agent-wait-text { min-width: 0; }
.agent-wait-line { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: .9rem; }
.agent-wait-elapsed { font-variant-numeric: tabular-nums; font-size: .8rem; color: var(--mud-palette-text-secondary); }
.agent-wait-why { font-size: .78rem; margin-top: 2px; line-height: 1.35; }

/* ----- Presence + disks ----- */
.presence-chip { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 600; padding: 4px 10px 4px 8px; border-radius: 999px; background: color-mix(in srgb, currentColor 10%, transparent); white-space: nowrap; }
/* Una fila es: [seleccion] [identificacion, que crece] [discos] [estado y acciones]. En rejilla, la casilla
   de seleccion que solo ve un administrador contaba como columna y descolocaba todo lo demas: el estado se
   caia a una fila propia y en el movil cada chip acababa en un renglon para el solo. La fila ya es flexible
   en .host-row, asi que aqui solo hay que decir quien crece y quien no. */
.host-row-rich { align-items: center; gap: 12px; }
.host-row-rich .host-row-disks, .host-row-rich .host-row-meta { flex: 0 0 auto; }
.host-row-text { min-width: 0; }
.host-client { font-weight: 400; font-size: .85rem; }
.host-row-disks { display: flex; gap: 10px; flex-wrap: wrap; }
.disk-mini { display: flex; align-items: center; gap: 4px; font-size: .72rem; color: var(--mud-palette-text-secondary); }
.disk-mini-label { font-weight: 600; width: 14px; }
.disk-mini-bar { display: inline-block; width: 46px; height: 6px; border-radius: 3px; background: var(--mud-palette-lines-default); overflow: hidden; }
.disk-mini-fill { display: block; height: 100%; background: currentColor; border-radius: 3px; }
/* Las dos lineas de debajo del nombre son «caption», que en MudBlazor es un <span>: sin esto se pegaban en un
   solo parrafo y se leia «...1809 · v1.0.43 Ultima copia correcta hace 3 h» del tiron. */
.host-row-text > .mud-typography { display: block; }
/* Un equipo sin datos del agente no tiene discos que enseñar ni ultima copia que contar: sin esto se quedaba
   un renglon en blanco en la tarjeta, que en el movil es justo el sitio donde menos sobra. */
.host-row-text > .mud-typography:empty, .host-row-disks:empty { display: none; }
/* El menu de tres puntos y la flecha van siempre juntos y al final de la fila de estado. */
.host-row-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }

/* En el movil no cabe todo en una linea: identificacion arriba, discos debajo y el estado en UNA sola linea,
   con el menu y la flecha a la derecha, que es donde el pulgar los busca. Antes eran siete renglones. */
@media (max-width: 700px) {
    .host-row-rich { gap: 8px 10px; }
    .host-row-rich .host-row-main { flex: 1 1 auto; }
    .host-row-rich .host-row-disks { flex: 1 1 100%; gap: 16px; }
    .host-row-rich .host-row-meta { flex: 1 1 100%; row-gap: 6px; }
}

/* ----- Host detail: disks + logs ----- */
.disk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.disk-card { padding: 12px 14px; border: 1px solid var(--mud-palette-divider); border-radius: var(--eli-radius-sm); }
.disk-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.disk-card-name { font-weight: 700; }
.disk-card-pct { font-size: .8rem; color: var(--mud-palette-text-secondary); }
.log-view { font-family: Consolas, 'Cascadia Mono', monospace; font-size: .76rem; line-height: 1.45; background: #0F172A; color: #CBD5E1; border-radius: var(--eli-radius-sm); padding: 12px; max-height: 60vh; overflow: auto; }
.log-line { display: grid; grid-template-columns: 78px 36px minmax(0, 1fr); gap: 8px; padding: 1px 0; white-space: pre-wrap; word-break: break-word; }
.log-line .log-time { color: #64748B; }
.log-line .log-level { font-weight: 700; }
.log-Information .log-level { color: #60A5FA; }
.log-Warning .log-level { color: #FBBF24; }
.log-Error .log-level, .log-Critical .log-level { color: #F87171; }
.log-Debug .log-level, .log-Trace .log-level { color: #94A3B8; }
/* Mejora 4: coincidencia de la busqueda dentro del log; el ambar del tema sobre el fondo oscuro del visor. */
.log-line mark { background: #FBBF24; color: #0F172A; border-radius: 3px; padding: 0 1px; }
.diag-section { margin-bottom: 12px; }
.diag-section pre { font-size: .75rem; white-space: pre-wrap; word-break: break-word; background: var(--mud-palette-background-gray); padding: 10px; border-radius: 8px; margin: 4px 0 0; max-height: 320px; overflow: auto; }
.browse-list { border: 1px solid var(--mud-palette-divider); border-radius: var(--eli-radius-sm); max-height: 50vh; overflow: auto; }
.browse-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--mud-palette-divider); cursor: default; }
.browse-row.dir { cursor: pointer; }
.browse-row.dir:hover { background: var(--mud-palette-table-hover); }
.browse-row:last-child { border-bottom: 0; }
.browse-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browse-meta { font-size: .75rem; color: var(--mud-palette-text-secondary); white-space: nowrap; }
.browse-list-tall { max-height: 62vh; }
.browse-name-file { cursor: default; }

/* ----- Runs ----- */
.run-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--mud-palette-background-gray); flex-shrink: 0; }
.spin { animation: eli-spin 1.2s linear infinite; }

/* ----- Alerts ----- */
.alert-bell .mud-badge { font-size: .65rem; }
.alert-row.alert-critical { border-left: 3px solid var(--eli-error); }
.alert-row.alert-warning { border-left: 3px solid var(--eli-warning); }
.alert-row.alert-info { border-left: 3px solid var(--eli-primary); }

/* ----- Timeline ----- */
.timeline-scroll { overflow-x: auto; }
.timeline-grid { display: flex; flex-direction: column; gap: 4px; position: relative; }
/* Arrastrar para acercarse: el rectangulo lo pinta el navegador mientras se mueve el raton. */
.timeline-zoomable { cursor: crosshair; touch-action: pan-y; }
.timeline-zoomable .timeline-bar { cursor: pointer; }
.timeline-select {
    position: absolute; top: 0; bottom: 0; pointer-events: none; z-index: 2;
    background: rgba(var(--eli-primary-rgb), .18);
    border-left: 2px solid rgba(var(--eli-primary-rgb), .9);
    border-right: 2px solid rgba(var(--eli-primary-rgb), .9);
}
.timeline-head, .timeline-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: 8px; }
.timeline-compact .timeline-head, .timeline-compact .timeline-row { grid-template-columns: 100px minmax(0, 1fr); }
.timeline-label { font-size: .82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; flex-direction: column; line-height: 1.2; }
.timeline-label a { color: inherit; text-decoration: none; }
.timeline-client { font-size: .7rem; font-weight: 400; }
.timeline-track { position: relative; height: 28px; border-radius: 8px; background: var(--mud-palette-background-gray); overflow: hidden; }
.timeline-compact .timeline-track { height: 20px; }
.timeline-ticks { background: none; height: 22px; overflow: visible; }
.timeline-tick { position: absolute; top: 0; transform: translateX(-50%); font-size: .68rem; color: var(--mud-palette-text-secondary); white-space: nowrap; }
.timeline-gridline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--mud-palette-divider); }
.timeline-bar { position: absolute; top: 5px; bottom: 5px; border-radius: 4px; display: block; min-width: 3px; opacity: .95; }
.timeline-compact .timeline-bar { top: 3px; bottom: 3px; }
.timeline-bar:hover { opacity: 1; box-shadow: 0 0 0 2px rgba(0,0,0,.15); }
.bar-succeeded { background: var(--eli-success); }
.bar-succeededwithwarnings { background: var(--eli-warning); }
.bar-failed { background: var(--eli-error); }
.bar-running { background: #0EA5E9; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 6px, transparent 6px 12px); }
.bar-missed { background: repeating-linear-gradient(45deg, var(--eli-error) 0 4px, transparent 4px 8px); }
.bar-cancelled, .bar-queued { background: var(--eli-neutral); }
.timeline-busy { position: absolute; top: 18px; height: 4px; border-radius: 2px; background: var(--eli-error); opacity: .7; }
.timeline-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: .72rem; color: var(--mud-palette-text-secondary); }
.timeline-legend i { display: inline-block; width: 14px; height: 8px; border-radius: 3px; margin-right: 4px; vertical-align: middle; }
.timeline-busy-legend { background: var(--eli-error); opacity: .7; height: 4px !important; }
.timeline-range { min-width: 150px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-card .mud-chart { margin-top: 8px; }
.chart-card .mud-chart-legend { flex-wrap: wrap; }

/* Chips inside key/value tables may wrap on narrow screens */
.kv-table .mud-chip { white-space: normal; height: auto; min-height: 24px; line-height: 1.3; padding: 2px 8px; }

/* ---- Account / 2FA ---- */
.qr-box { display: flex; justify-content: center; padding: 12px; background: #fff; border-radius: 14px; border: 1px solid rgba(0,0,0,0.08); max-width: 240px; margin: 0 auto; }
.qr-box svg { width: 100%; height: auto; display: block; }
.totp-key { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95rem; letter-spacing: .05em; word-break: break-all; padding: 6px 10px; border-radius: 8px; background: rgba(15,23,42,0.06); }
html.theme-dark .totp-key { background: rgba(255,255,255,0.08); }
.recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.recovery-codes code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95rem; padding: 8px 10px; border-radius: 8px; background: rgba(15,23,42,0.06); text-align: center; letter-spacing: .04em; }
html.theme-dark .recovery-codes code { background: rgba(255,255,255,0.08); }

/* ---- Tags & global search (backlog 9) ---- */
.tag-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.tag-chip { display: inline-block; font-size: .72rem; font-weight: 600; line-height: 1.5; padding: 1px 8px; border-radius: 999px; background: rgba(var(--eli-primary-rgb),0.10); color: var(--mud-palette-primary); text-decoration: none; white-space: nowrap; }
a.tag-chip:hover { background: rgba(var(--eli-primary-rgb),0.22); }
html.theme-dark .tag-chip { background: rgba(143,176,255,0.16); }
.host-filter { min-width: 220px; flex: 1 1 220px; }
.global-search { display: flex; align-items: center; }
.global-search-box { width: 0; overflow: hidden; transition: width .2s ease; }
.global-search.open .global-search-box { width: min(420px, 60vw); overflow: visible; }
.global-search-input .mud-input-root { background: var(--mud-palette-surface); border-radius: 10px; }
.global-search-input .mud-input.mud-input-outlined { padding-top: 0; }
.search-hit { display: flex; align-items: center; gap: 10px; padding: 2px 0; }
.search-hit-icon { color: var(--mud-palette-primary); flex: 0 0 auto; }
.search-hit-text { display: flex; flex-direction: column; min-width: 0; }
.search-hit-title { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-hit-sub { font-size: .75rem; color: var(--mud-palette-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 960px) {
    .global-search-toggle { display: none; }
    .global-search-box { width: 320px; overflow: visible; }
}
@media (max-width: 959px) {
    .global-search.open .global-search-box { position: absolute; left: 8px; right: 8px; top: 56px; width: auto; z-index: 20; padding: 8px; background: var(--mud-palette-surface); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.18); }
}

/* ---- Help (backlog 10) ---- */
.page-help { color: var(--mud-palette-text-secondary); margin-left: 6px; vertical-align: middle; display: inline-flex; opacity: .7; }
.page-help:hover { color: var(--mud-palette-primary); opacity: 1; }
.help-tip { color: var(--mud-palette-text-secondary); vertical-align: middle; cursor: help; opacity: .8; }
.help-tip-link { display: inline-flex; vertical-align: middle; }
.help-tip-link:hover .help-tip { color: var(--mud-palette-primary); opacity: 1; }
.help-tip-text { max-width: 320px; font-size: .82rem; line-height: 1.4; text-align: left; }
.help-body section { scroll-margin-top: 80px; padding: 8px 0 18px; border-bottom: 1px solid var(--mud-palette-divider); }
.help-body section:last-child { border-bottom: 0; }
.help-body h4, .help-body .mud-typography-h4 { margin-bottom: 8px; }
.help-body p, .help-body li { line-height: 1.55; }
.help-body ul, .help-body ol { padding-left: 22px; margin: 6px 0; }
.help-body code { font-size: .85em; background: rgba(15,23,42,0.06); padding: 1px 5px; border-radius: 5px; }
html.theme-dark .help-body code { background: rgba(255,255,255,0.08); }
/* El índice de la ayuda se queda arriba al bajar por la guía. Lo pegado es la columna (.help-index-col, más
   abajo); esta caja sólo necesita no pasarse de alto y scrollear por dentro, porque con veintisiete apartados
   es más alta que la pantalla y si no se iría igual. */

/* ===== Backlog 12: compact, aligned, no overlaps ===== */
.app-content { padding-top: 16px; padding-bottom: 24px; }
.page-header { margin-bottom: 14px; }
.page-subtitle { margin-top: 2px; }
.app-card.pa-4 { padding: 14px !important; }
@media (min-width: 600px) { .app-card.pa-sm-6 { padding: 18px 20px !important; } }
.mud-grid.mud-grid-spacing-xs-3 { margin: -8px; width: calc(100% + 16px); }
.mud-grid.mud-grid-spacing-xs-3 > .mud-grid-item { padding: 8px; }
/* KPI cards: same height in a row, one-line title, value always at the same place */
.kpi-card { height: 100%; box-sizing: border-box; padding: 12px 14px; gap: 10px; align-items: center; }
.kpi-icon { width: 38px; height: 38px; border-radius: 10px; }
.kpi-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-value { font-size: 1.25rem; line-height: 1.2; }
.kpi-body { display: flex; flex-direction: column; justify-content: center; min-height: 40px; }
/* Rows: tighter, status stays on the right, texts truncate instead of overlapping */
.host-list { gap: 5px; }
.host-row { padding: 9px 12px; gap: 10px; }
.host-row-main { gap: 10px; }
.run-row, .alert-row { flex-wrap: nowrap; }
.run-row .host-row-meta, .alert-row .host-row-meta { flex: 0 0 auto; flex-wrap: nowrap; }
.host-row-text .mud-typography-subtitle1 { white-space: normal; overflow-wrap: anywhere; }
.host-row-meta .mud-chip { margin: 0; }
.run-icon { width: 32px; height: 32px; }
.presence-chip { font-size: .74rem; padding: 3px 9px 3px 7px; }
.tag-chip { font-size: .68rem; padding: 0 7px; }
.timeline-legend { gap: 8px 12px; margin-top: 8px; }
.client-card { padding: 14px 16px; }
.client-card-head { margin-bottom: 10px; }
.kv-table td { padding: 5px 10px !important; }
.host-tabs .mud-tab { min-height: 42px; padding: 0 14px; font-size: .78rem; }
.mud-dialog .mud-dialog-title { font-size: 1.05rem; padding: 14px 20px 8px; }
.mud-dialog .mud-dialog-content { padding: 8px 20px; }
.mud-dialog .mud-dialog-actions { padding: 8px 16px 12px; }
.mud-snackbar { font-size: .82rem; }
@media (max-width: 600px) {
    .app-content { padding-top: 12px; padding-left: 10px; padding-right: 10px; }
    .page-header { margin-bottom: 12px; gap: 8px; }
    .page-title { font-size: 1.35rem; }
    .page-subtitle { font-size: .8rem; }
    .kpi-card { padding: 10px 12px; gap: 8px; }
    .kpi-icon { width: 34px; height: 34px; }
    .kpi-value { font-size: 1.1rem; }
    .kpi-title { font-size: .62rem; }
    .app-card.pa-4 { padding: 12px !important; }
    .host-row { padding: 8px 10px; }
    .mud-dialog .mud-dialog-content { padding: 6px 14px; }
    .mud-dialog .mud-dialog-title { padding: 12px 14px 6px; }
    .mud-appbar .mud-toolbar { padding-left: 4px; padding-right: 6px; }
}
/* Timeline fits the phone width (no horizontal scroll): narrower label column, half the ticks */
@media (max-width: 600px) {
    .timeline-grid { min-width: 0 !important; }
    .timeline-head, .timeline-row { grid-template-columns: 68px minmax(0, 1fr); gap: 6px; }
    .timeline-compact .timeline-head, .timeline-compact .timeline-row { grid-template-columns: 60px minmax(0, 1fr); }
    .timeline-label { font-size: .74rem; }
    .timeline-tick:nth-of-type(even) { display: none; }
    .timeline-track { height: 24px; }
    .host-tabs .mud-tab { padding: 0 8px; min-width: 0; font-size: .7rem; min-height: 40px; }
    .host-tabs .mud-tab .mud-icon-root { margin-right: 4px; font-size: 1.1rem; }
}
.host-client { margin-left: 3px; }
.timeline-scroll { scrollbar-width: thin; }
/* Long paths/ids never overflow their card; tabs fit better on phones */
.host-row-text, .host-row-text .mud-typography { overflow-wrap: anywhere; word-break: break-word; }
.host-row-text code, .browse-meta, .kv-table code { overflow-wrap: anywhere; }
@media (max-width: 600px) {
    .host-tabs .mud-tab { padding: 0 7px; font-size: .66rem; letter-spacing: 0; }
    .host-tabs .mud-tab .mud-icon-root { margin-right: 3px; font-size: 1rem; }
    .host-tabs .mud-tabs-scroll-button { min-width: 28px; width: 28px; }
    .host-row-meta .mud-icon-button { padding: 6px; }
    .host-row-meta .mud-button-root { min-width: 0; }
}
.login-card-wide { max-width: 520px; }
/* Storage quota */
.storage-usage { min-width: 0; flex: 1; }
.storage-usage-main { font-size: .82rem; }
.storage-usage-pct { font-size: .78rem; font-weight: 600; }
.storage-usage-free { display: block; font-size: .72rem; margin-top: 2px; }
.client-stat-wide { grid-column: 1 / -1; flex-wrap: wrap; align-items: flex-start; }
/* La prediccion de espacio va DEBAJO de la barra, no a su lado: en la misma fila, el texto
   ("supera la cuota en ~4 dias") no encogia y aplastaba la barra hasta partir "165,2 GB" en
   cuatro lineas. Ocupando fila entera, la barra recupera su ancho. */
.client-stat-wide > .forecast-line { flex-basis: 100%; min-width: 0; margin-top: 4px; padding-left: 28px; }
.client-stat-wide > .forecast-line > span { min-width: 0; }
.client-stat .storage-usage .mud-progress-linear { width: 100%; }

/* ===== Backlog 15: help cards everywhere ===== */
.help-tip-wrap { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 4px; position: relative; line-height: 1; }
.help-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 0; background: transparent; color: var(--mud-palette-text-secondary); cursor: pointer; opacity: .75; padding: 0; transition: background .15s, color .15s, opacity .15s; }
.help-btn .mud-icon-root { font-size: 1.1rem; width: 1.1rem; height: 1.1rem; }
.help-btn:hover, .help-btn:focus-visible, .help-btn-open { color: var(--mud-palette-primary); background: rgba(var(--mud-palette-primary-rgb), .12); opacity: 1; outline: none; }
.page-title .help-tip-wrap { margin-left: 6px; }
.page-title .help-btn { width: 26px; height: 26px; }
.page-title .help-btn .mud-icon-root { font-size: 1.25rem; width: 1.25rem; height: 1.25rem; }
.kpi-title-row { display: flex; align-items: center; gap: 2px; min-width: 0; }
.kpi-title-row .kpi-title { flex: 0 1 auto; }
.kpi-help { margin-left: 0; }
.kpi-help .help-btn { width: 18px; height: 18px; }
.kpi-help .help-btn .mud-icon-root { font-size: .95rem; width: .95rem; height: .95rem; }
.help-card.mud-popover { width: 340px; max-width: calc(100vw - 24px); padding: 16px 16px 14px; border-radius: 16px; background: var(--mud-palette-surface); box-shadow: 0 24px 60px rgba(15,23,42,.30), 0 2px 0 rgba(var(--eli-primary-rgb), .6) inset; border: 1px solid rgba(var(--eli-primary-rgb), .35); }
.help-card-grip { display: none; }
.help-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.help-card-icon { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(var(--mud-palette-primary-rgb), .18), rgba(var(--mud-palette-secondary-rgb), .18)); color: var(--mud-palette-primary); flex: 0 0 auto; }
.help-card-title { font-weight: 700; font-size: .95rem; flex: 1; min-width: 0; line-height: 1.25; }
.help-card-close { margin: -6px -8px 0 0; }
.help-card-text { font-size: .86rem; line-height: 1.5; color: var(--mud-palette-text-primary); white-space: normal; }
.help-card-tip { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(245,158,11,.13); color: var(--mud-palette-text-primary); font-size: .8rem; line-height: 1.45; }
.help-card-tip .mud-icon-root { color: #d97706; flex: 0 0 auto; margin-top: 1px; }
.help-card-extra { margin-top: 10px; font-size: .82rem; }
.help-card-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-size: .82rem; font-weight: 600; color: var(--mud-palette-primary); text-decoration: none; }
.help-card-link:hover { text-decoration: underline; }
.help-overlay { background: rgba(15,23,42,.18) !important; }
@media (max-width: 600px) {
    /* Hoja inferior: tiene que leerse como una ventana encima de la pagina, no como otra tarjeta mas. */
    .help-card.mud-popover {
        position: fixed !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important;
        transform: none !important; width: auto; max-width: none;
        border-radius: 22px 22px 0 0; padding: 10px 18px calc(18px + env(safe-area-inset-bottom, 0px));
        background: var(--mud-palette-surface);
        border: none; border-top: 3px solid var(--eli-primary);
        box-shadow: 0 -20px 60px rgba(15,23,42,.45);
        max-height: 82vh; overflow-y: auto;
        animation: help-sheet-in .18s ease-out;
    }
    /* Asa superior, como en cualquier hoja inferior del movil. */
    .help-card-grip { display: block; width: 42px; height: 4px; border-radius: 2px; margin: 2px auto 10px; background: var(--mud-palette-lines-default); }
    .help-card-head { margin-bottom: 10px; }
    .help-card-text { font-size: .9rem; }
    /* Fondo mas oscuro: la pagina se retira y queda claro que hay algo delante. */
    .help-overlay { background: rgba(15,23,42,.55) !important; backdrop-filter: blur(2px); }
}
@keyframes help-sheet-in { from { transform: translateY(14px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
/* KPI help button in the corner so the title keeps its full width */
.kpi-card { position: relative; }
.kpi-card .kpi-help { position: absolute; top: 5px; right: 5px; margin: 0; }
.kpi-card .kpi-title { padding-right: 14px; }

/* ===== Backlog 16: language links on the login page ===== */
.login-langs { position: relative; display: flex; justify-content: center; gap: 6px; margin-top: 18px; }
.login-lang { font-size: .78rem; color: #94A3B8; text-decoration: none; padding: 4px 10px; border-radius: 999px; border: 1px solid transparent; }
.login-lang:hover { color: #E2E8F0; }
.login-lang.active { color: #E2E8F0; border-color: rgba(148,163,184,.45); background: rgba(148,163,184,.12); }

/* ===== Backlog 17: users page, audit filters ===== */
.users-search { min-width: 220px; }
.user-row .host-row-main { min-width: 0; }
.audit-user { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.audit-user:hover { color: var(--mud-palette-primary); }
/* folder tree picker + path checks */
.tree { border: 1px solid var(--mud-palette-divider); border-radius: var(--eli-radius-sm); max-height: 50vh; overflow: auto; font-size: .86rem; }
.tree-row { display: flex; align-items: center; gap: 4px; padding: 3px 8px 3px 0; border-bottom: 1px solid var(--mud-palette-divider); }
.tree-row:last-child { border-bottom: 0; }
.tree-row.selected { background: rgba(var(--mud-palette-primary-rgb), .12); }
.tree-row.file { opacity: .75; }
.tree-toggle { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; color: var(--mud-palette-text-secondary); }
.tree-label { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 1; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.tree-row.dir .tree-label:hover { background: var(--mud-palette-table-hover); }
.tree-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-meta { color: var(--mud-palette-text-secondary); font-size: .75rem; white-space: nowrap; }
.tree-error { color: var(--mud-palette-error); }
.tree-selection { padding: 8px 10px; border-radius: 10px; background: rgba(var(--mud-palette-primary-rgb), .06); }
.tree-selected-path { font-size: .8rem; word-break: break-all; }
.path-check { display: flex; align-items: center; gap: 6px; font-size: .78rem; padding: 0 0 4px 6px; color: var(--mud-palette-text-secondary); }
.path-check.bad { color: var(--mud-palette-error); }

/* ===== Backlog 18 ===== */
.forecast-line { display: flex; align-items: center; gap: 6px; font-size: .8rem; margin-top: 6px; }
.forecast-line.forecast-warn { color: #B45309; }
.forecast-line.forecast-danger { color: var(--mud-palette-error); font-weight: 600; }
.maint-chip { max-width: 100%; }
.app-logo-custom { display: block; }
.brand-preview { display: inline-flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px dashed var(--mud-palette-lines-default); border-radius: 12px; }

/* backlog 19 */
.plain-list { margin: 0; padding-left: 18px; font-size: .8rem; color: var(--mud-palette-text-secondary); }
.plain-list li { margin: 2px 0; }
.digest-preview { white-space: pre-wrap; font-size: .78rem; background: var(--mud-palette-background-gray); border-radius: 12px; padding: 12px; max-height: 420px; overflow: auto; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow { text-align: center; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mud-palette-text-secondary); padding: 4px 0; }
.cal-day { min-height: 64px; border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; padding: 4px 6px; cursor: pointer; background: var(--mud-palette-surface); transition: background .15s; overflow: hidden; }
.cal-day:hover { background: var(--mud-palette-background-gray); }
.cal-week .cal-day { min-height: 160px; }
.cal-today { border-color: var(--eli-primary); box-shadow: inset 0 0 0 1px var(--eli-primary); }
.cal-selected { background: rgba(var(--eli-primary-rgb), .08); }
.cal-other { opacity: .45; }
.cal-daynum { font-size: .78rem; font-weight: 600; margin-bottom: 4px; }
.cal-dots { display: flex; flex-wrap: wrap; gap: 3px; }
.cal-dot { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; border-radius: 9px; font-size: .66rem; font-weight: 600; color: #fff; padding: 0 5px; }
.cal-dot-lg { min-width: 12px; width: 12px; height: 12px; padding: 0; margin-right: 8px; }
.cal-ok { background: #16A34A; } .cal-warn { background: #F59E0B; } .cal-error { background: #EF4444; } .cal-running { background: #0EA5E9; } .cal-planned { background: #9CA3AF; } .cal-off { background: transparent; border: 1.5px dashed #9CA3AF; }
.cal-item { font-size: .7rem; border-radius: 6px; padding: 1px 6px; margin: 2px 0; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-item .cal-time { opacity: .85; margin-right: 4px; }
.cal-more { font-size: .68rem; color: var(--mud-palette-text-secondary); }
.cal-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: .74rem; color: var(--mud-palette-text-secondary); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend .cal-dot { min-width: 12px; width: 12px; height: 12px; padding: 0; }
.cal-title { min-width: 160px; text-align: center; text-transform: capitalize; }
@media (max-width: 600px) {
    .cal-day { min-height: 52px; padding: 3px 4px; }
    .cal-item { font-size: .62rem; padding: 0 3px; }
    /* La vista de semana en siete columnas deja unos 45 px por dia en un telefono: dentro solo cabe el
       principio de la hora y ni el nombre de la tarea. Apilada se lee, que es de lo que se trata. El mes se
       queda en rejilla a proposito: ahi lo que se mira es la forma, no el detalle de cada dia. */
    .cal-week .cal-grid { grid-template-columns: 1fr; }
    .cal-week .cal-dow { display: none; }
    .cal-week .cal-day { min-height: 0; }
    .cal-week .cal-item { white-space: normal; }
}

/* ---------------------------------------------------------------- página pública de producto (backlog 22) */
.public-shell { min-height: 100vh; background: #F4F6FB; color: #0F172A; }
html.theme-dark .public-shell { background: #0B1220; color: #E2E8F0; }
.pr-page { max-width: 1080px; margin: 0 auto; padding: 0 20px 48px; }

.pr-hero { padding: 56px 0 40px; text-align: center; }
.pr-hero-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.15rem; margin-bottom: 28px; }
.pr-kicker { margin: 0 0 10px; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--eli-primary); }
.pr-hero h1 { margin: 0 auto 16px; max-width: 18ch; font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.12; letter-spacing: -0.025em; font-weight: 800; }
.pr-lead { margin: 0 auto; max-width: 62ch; font-size: 1.02rem; line-height: 1.65; color: #475569; }
html.theme-dark .pr-lead { color: #94A3B8; }
.pr-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 26px 0 30px; }
.pr-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: rgba(var(--eli-primary-rgb), .10); color: var(--eli-primary); font-size: .82rem; font-weight: 600; }
.pr-pill .mud-icon-root { font-size: 1rem; width: 1rem; height: 1rem; }
.pr-hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.pr-btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 26px; border-radius: 12px; font-size: .92rem; font-weight: 700; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease; }
.pr-btn:hover { transform: translateY(-1px); }
.pr-btn-primary { background: linear-gradient(135deg, var(--eli-primary), var(--eli-primary-dark)); color: #fff; box-shadow: 0 10px 26px rgba(var(--eli-primary-rgb), .35); }
.pr-btn-ghost { background: transparent; color: var(--eli-primary); border: 1px solid rgba(var(--eli-primary-rgb), .45); }

.pr-section { padding: 44px 0; }
.pr-section > h2 { margin: 0 0 8px; font-size: clamp(1.4rem, 3.4vw, 1.9rem); font-weight: 750; letter-spacing: -0.02em; }
.pr-section-lead { margin: 0 0 26px; max-width: 70ch; color: #475569; line-height: 1.6; font-size: .95rem; }
html.theme-dark .pr-section-lead { color: #94A3B8; }
.pr-section-alt { background: #FFFFFF; border-radius: 22px; padding: 40px 28px; margin: 12px 0; box-shadow: 0 2px 10px rgba(15,23,42,.05); }
html.theme-dark .pr-section-alt { background: #131C31; box-shadow: none; }
.pr-section-dark { background: linear-gradient(150deg, #101B33, #1B2A4A); color: #E2E8F0; border-radius: 22px; padding: 40px 28px; margin: 12px 0; }
.pr-section-dark .pr-section-lead { color: #B6C4DA; }

.pr-cards { display: grid; gap: 16px; }
.pr-cards-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.pr-cards-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pr-card { background: #FFFFFF; border: 1px solid #E6E9F2; border-radius: 16px; padding: 22px; }
html.theme-dark .pr-card { background: #0F172A; border-color: #1E293B; }
.pr-section-alt .pr-card { background: #F8FAFF; }
html.theme-dark .pr-section-alt .pr-card { background: #0F172A; }
.pr-card > .mud-icon-root { color: var(--eli-primary); font-size: 1.7rem; width: 1.7rem; height: 1.7rem; margin-bottom: 10px; }
.pr-card h3 { margin: 0 0 8px; font-size: 1rem; font-weight: 700; line-height: 1.3; }
.pr-card p { margin: 0; font-size: .89rem; line-height: 1.6; color: #475569; }
html.theme-dark .pr-card p { color: #94A3B8; }
.pr-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pr-card-head h3 { margin: 0; }
.pr-card-head .mud-icon-root { color: var(--eli-primary); }
.pr-card-warn > .mud-icon-root { color: #D97706; }
.pr-card-dark { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.pr-card-dark p { color: #B6C4DA; }
.pr-card-dark > .mud-icon-root { color: #8FB0FF; }
.pr-step-icon { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: rgba(var(--eli-primary-rgb), .12); margin-bottom: 12px; }
.pr-step-icon .mud-icon-root { color: var(--eli-primary); }

.pr-list { margin: 12px 0 0; padding-left: 18px; font-size: .85rem; line-height: 1.6; color: #475569; }
html.theme-dark .pr-list { color: #94A3B8; }
.pr-list li { margin: 5px 0; }
.pr-list-check { list-style: none; padding-left: 0; }
.pr-list-check li { position: relative; padding-left: 22px; }
.pr-list-check li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: #16A34A; font-weight: 700; }

.pr-prose { max-width: 72ch; }
.pr-prose p { margin: 0 0 12px; font-size: .93rem; line-height: 1.7; color: #334155; }
html.theme-dark .pr-prose p { color: #CBD5E1; }
.pr-highlight { display: flex; gap: 16px; margin-top: 24px; padding: 22px; border-radius: 16px; background: rgba(22,163,74,.10); border: 1px solid rgba(22,163,74,.28); }
.pr-highlight > .mud-icon-root { color: #16A34A; font-size: 2rem; width: 2rem; height: 2rem; flex: 0 0 auto; }
.pr-highlight h3 { margin: 0 0 6px; font-size: 1.02rem; font-weight: 750; }
.pr-highlight p { margin: 0; font-size: .9rem; line-height: 1.62; }

.pr-notes { margin-top: 18px; display: grid; gap: 8px; }
.pr-notes p { display: flex; gap: 9px; align-items: flex-start; margin: 0; font-size: .88rem; line-height: 1.6; color: #475569; }
html.theme-dark .pr-notes p { color: #94A3B8; }
.pr-notes .mud-icon-root { color: var(--eli-primary); flex: 0 0 auto; margin-top: 2px; }
.pr-closing { margin: 22px 0 0; font-size: .9rem; line-height: 1.6; color: #B6C4DA; }

.pr-tables { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.pr-table-block h3 { margin: 0 0 10px; font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--eli-primary); }
.pr-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.pr-table th, .pr-table td { text-align: left; vertical-align: top; padding: 9px 0; border-bottom: 1px solid #E6E9F2; line-height: 1.55; }
html.theme-dark .pr-table th, html.theme-dark .pr-table td { border-color: #1E293B; }
.pr-table th { width: 38%; font-weight: 650; padding-right: 14px; }
.pr-table td { color: #475569; }
html.theme-dark .pr-table td { color: #94A3B8; }

.pr-faq { display: grid; gap: 10px; max-width: 80ch; }
.pr-faq-item { background: #F8FAFF; border: 1px solid #E6E9F2; border-radius: 14px; padding: 4px 18px; }
html.theme-dark .pr-faq-item { background: #0F172A; border-color: #1E293B; }
.pr-faq-item summary { cursor: pointer; padding: 13px 0; font-weight: 650; font-size: .92rem; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.pr-faq-item summary::-webkit-details-marker { display: none; }
.pr-faq-item summary::after { content: "+"; color: var(--eli-primary); font-weight: 700; font-size: 1.15rem; line-height: 1; }
.pr-faq-item[open] summary::after { content: "\2212"; }
.pr-faq-item p { margin: 0 0 14px; font-size: .89rem; line-height: 1.65; color: #475569; }
html.theme-dark .pr-faq-item p { color: #94A3B8; }

.pr-cta { text-align: center; padding: 52px 24px; margin-top: 22px; border-radius: 22px; background: linear-gradient(135deg, rgba(var(--eli-primary-rgb), .12), rgba(var(--eli-primary-rgb), .04)); }
.pr-cta h2 { margin: 0 0 8px; font-size: clamp(1.4rem, 3.4vw, 1.9rem); font-weight: 750; }
.pr-cta > p { margin: 0 auto 24px; max-width: 60ch; color: #475569; line-height: 1.6; font-size: .95rem; }
html.theme-dark .pr-cta > p { color: #94A3B8; }

.pr-langs { display: flex; justify-content: center; gap: 6px; margin-top: 30px; }
.pr-lang { padding: 6px 12px; border-radius: 999px; font-size: .78rem; font-weight: 600; text-decoration: none; color: #64748B; }
.pr-lang.active { background: rgba(var(--eli-primary-rgb), .12); color: var(--eli-primary); }
.pr-footer { margin-top: 16px; text-align: center; font-size: .75rem; color: #94A3B8; }

/* Resumen de producto en la pantalla de acceso */
.login-pitch { position: relative; margin-top: 22px; padding-top: 18px; border-top: 1px solid #E6E9F2; }
html.theme-dark .login-pitch { border-color: #1E293B; }
.login-pitch h2 { margin: 0 0 10px; font-size: .8rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #64748B; }
html.theme-dark .login-pitch h2 { color: #94A3B8; }
.login-pitch ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.login-pitch li { position: relative; padding-left: 22px; font-size: .82rem; line-height: 1.5; color: #475569; }
html.theme-dark .login-pitch li { color: #94A3B8; }
.login-pitch li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: #16A34A; font-weight: 700; }
.login-pitch-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 14px; font-size: .82rem; font-weight: 650; color: var(--eli-primary); text-decoration: none; }
.login-pitch-link:hover { text-decoration: underline; }

@media (max-width: 600px) {
    .pr-page { padding: 0 14px 36px; }
    .pr-hero { padding: 34px 0 26px; }
    .pr-section { padding: 30px 0; }
    .pr-section-alt, .pr-section-dark { padding: 28px 16px; border-radius: 18px; }
    .pr-card { padding: 18px; }
    .pr-table th { width: 44%; }
    .pr-btn { width: 100%; }
    .pr-highlight { flex-direction: column; gap: 10px; }
}

/* KPI que enlaza (mejora 38) */
.kpi-card-link { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.kpi-card-link:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15,23,42,.10); }
.kpi-card-link:focus-visible { outline: 2px solid var(--eli-primary); outline-offset: 2px; }

/* Tabla ancha que no rompe el ancho de la pagina (mejora 45) */
.table-scroll { overflow-x: auto; }
.table-scroll table { min-width: 720px; }

/* Mejora 4: la tira de copias limpias, dudosas y contaminadas de cada tarea. Un punto por copia: con noventa
   dias a la vista, lo que importa no es leer cada uno sino ver donde cambia el color. */
.hygiene-strip { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.hygiene-dot { width: 10px; height: 18px; border-radius: 3px; cursor: pointer; background: var(--mud-palette-lines-default); transition: transform .08s ease; }
.hygiene-dot:hover { transform: scaleY(1.25); }
.hygiene-clean { background: var(--mud-palette-success); }
.hygiene-doubtful { background: var(--mud-palette-warning); }
.hygiene-tainted { background: var(--mud-palette-error); }
.hygiene-unknown { background: var(--mud-palette-lines-default); }

/* La huella y su boton de copiar, juntos y sin partir la linea en el movil. */
.doc-hash { display: flex; align-items: center; gap: 4px; }
.doc-hash code { overflow-wrap: anywhere; }

/* Mejora 19: la fila de totales de Facturacion, separada de las filas de clientes para que no parezca uno mas.
   Las notas de debajo de cada cifra (cerrado / prevision, coste) van en peso normal para no competir con el total. */
.pr-table .billing-totals td { font-weight: 650; color: inherit; border-top: 2px solid #CBD5E1; border-bottom: 0; }
html.theme-dark .pr-table .billing-totals td { color: inherit; border-top-color: #334155; }
.billing-totals .totals-note { font-weight: 400; }

/* ----- Tarjetas que son un enlace -----
   Un <a> por fuera de la tarjeta: navega sin JavaScript (la politica de seguridad del sitio prohibe el
   JavaScript escrito dentro de los atributos), se abre en otra pestaña y se alcanza con el tabulador. */
.card-link { display: block; text-decoration: none; color: inherit; height: 100%; }
.card-link:focus-visible { outline: 2px solid var(--eli-primary); outline-offset: 3px; border-radius: var(--eli-radius); }

/* ----- Los cinco indicadores de la ficha del cliente en una sola fila -----
   La rejilla de MudBlazor tiene doce columnas, asi que cinco tarjetas no caben a partes iguales: la quinta
   se caia a una linea ella sola. Aqui se reparten por igual las que haya. */
.kpi-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
@media (min-width: 960px) { .kpi-row-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 960px) { .kpi-row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ----- Indice de la ayuda -----
   La columna se queda fija al hacer scroll. El indice tiene casi treinta entradas y es mas alto que la
   pantalla, asi que ademas scrollea por dentro: si no, «sticky» no sirve de nada porque se va igual. */
.help-index-col { align-self: flex-start; position: sticky; top: 80px; z-index: 1; }
.help-index { max-height: calc(100vh - 110px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 959px) {
    .help-index-col { position: static; }
    .help-index { max-height: none; overflow: visible; }
}

/* ----- Autorrelleno del navegador -----
   Chrome pinta de amarillo lo que ha rellenado el. El <input> es un rectangulo dentro de un marco con las
   esquinas redondeadas, asi que ese amarillo asomaba por las cuatro esquinas; y en modo oscuro, encima,
   dejaba el texto casi ilegible. El truco de la transicion eterna hace que ese color no llegue a pintarse. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--mud-palette-text-primary);
    caret-color: var(--mud-palette-text-primary);
    transition: background-color 100000s ease-in-out 0s;
    border-radius: inherit;
}

/* ----- Chapa del numero de alertas -----
   Con solape, la chapa se coloca 12 px por encima del borde del boton; el boton mide 48 px dentro de una
   barra de 56, asi que la chapa se salia por arriba y la barra la cortaba. Se la mete dentro del boton. */
.alert-bell > .mud-badge.mud-badge-top.right.mud-badge-overlap { inset: 3px 3px auto auto; }
.alert-bell > .mud-badge { font-size: .62rem; height: 17px; min-width: 17px; padding: 3px 4px; }

/* ----- Huella de los documentos -----
   La celda era un contenedor flexible, asi que la huella se encogia hasta no dejar ver ni los dieciseis
   caracteres que se pintan. Ahora la columna tiene ancho propio y se leen treinta y dos. */
.doc-hash { white-space: nowrap; min-width: 300px; }
.doc-hash-inner { display: inline-flex; align-items: center; gap: 4px; }
.doc-hash code { overflow-wrap: normal; font-size: .82rem; }
@media (max-width: 599px) { .doc-hash { min-width: 0; } }

/* ----- Dialogos anchos (ficha del cliente, asistente de tareas) -----
   Un formulario largo en una columna de 600 px son cuatro pantallas de scroll con el resto del monitor en
   blanco. A partir de tableta se reparte en dos columnas dentro de un dialogo ancho. */
.wide-dialog .mud-dialog { max-width: min(1100px, calc(100vw - 32px)); }
.dialog-fixed-body { min-height: 60vh; max-height: 72vh; overflow-y: auto; }
@media (max-width: 599px) { .dialog-fixed-body { min-height: 0; max-height: none; overflow: visible; } }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 700px) { .form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form-grid .form-span { grid-column: 1 / -1; }

/* ----- Asistente de tareas: alto estable -----
   El diálogo crecía y encogía en cada paso (el paso de las bases de datos mide el triple que el del nombre),
   así que los botones de abajo saltaban de sitio mientras se usaba. El área de contenido tiene ahora un alto
   fijo y es ella la que scrollea cuando el paso es largo. */
.wizard-stepper .mud-stepper-content { min-height: min(430px, 52vh); max-height: 62vh; overflow-y: auto; }

/* La comprobación previa de SQL usa estas filas en verde; lo que falla va en una alerta roja. */
.path-check.ok { color: var(--mud-palette-success); font-size: .82rem; }

/* MudToggleGroup no tiene parámetro Rounded (se colaba al HTML como atributo inventado): las esquinas
   redondeadas de los selectores de vista se piden por CSS. */
.toggle-rounded { border-radius: var(--eli-radius-sm); overflow: hidden; }

/* ----- Pantallas de acceso: recuperar y restablecer la contraseña ----- */
.login-help { font-size: .86rem; color: var(--mud-palette-text-secondary); margin: 0 0 4px; line-height: 1.5; }
.login-note { background: rgba(var(--eli-primary-rgb), .08); border: 1px solid rgba(var(--eli-primary-rgb), .25); border-radius: var(--eli-radius-sm); padding: 14px 16px; margin-bottom: 16px; }
.login-note p { margin: 0 0 6px; font-size: .88rem; line-height: 1.55; }
.login-note p:last-child { margin-bottom: 0; }
.login-back { display: inline-block; margin-top: 14px; font-size: .85rem; color: var(--mud-palette-text-secondary); text-decoration: none; }
.login-back:hover { color: var(--eli-primary); text-decoration: underline; }
.login-submit-link { display: block; text-align: center; text-decoration: none; box-sizing: border-box; }

/* ----- Menú de la cuenta (la inicial de arriba a la derecha) -----
   Es un <details> de HTML, no un menú de la librería: lo abre y lo cierra el navegador, así que funciona
   siempre, con o sin JavaScript y con o sin circuito conectado. Es el único camino a la contraseña, a la
   verificación en dos pasos y a cerrar sesión, y como menú de la librería no llegaba a abrirse. */
.app-user { position: relative; margin-left: 4px; }
.app-user > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; border-radius: 50%; }
.app-user > summary::-webkit-details-marker { display: none; }
.app-user > summary::marker { content: ""; }
.app-user > summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.app-user .app-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--mud-palette-primary); color: var(--mud-palette-primary-text);
    font-weight: 600; font-size: .95rem; user-select: none;
}
.app-user-panel {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 1500;
    min-width: 264px; max-width: calc(100vw - 24px); padding: 6px;
    background: var(--mud-palette-surface); color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-divider); border-radius: 14px;
    box-shadow: 0 24px 60px rgba(15,23,42,.28);
}
.app-user-head { padding: 10px 12px 8px; display: flex; flex-direction: column; gap: 2px; }
.app-user-head strong { font-size: .9rem; font-weight: 600; word-break: break-all; }
.app-user-head span { font-size: .76rem; color: var(--mud-palette-text-secondary); }
.app-user-panel a, .app-user-panel button {
    display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
    padding: 9px 12px; border: 0; border-radius: 9px; background: none; cursor: pointer;
    color: inherit; text-decoration: none; font: inherit; font-size: .88rem; text-align: left;
}
.app-user-panel a:hover, .app-user-panel button:hover { background: var(--mud-palette-action-default-hover); }
.app-user-panel a:focus-visible, .app-user-panel button:focus-visible { outline: 2px solid var(--eli-primary); outline-offset: -2px; }
.app-user-sep { height: 1px; background: var(--mud-palette-divider); margin: 6px 4px; }
.app-user-label { display: flex; align-items: center; gap: 8px; padding: 8px 12px 4px; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mud-palette-text-secondary); }
.app-user-current { font-weight: 600; }
.app-user-dot { opacity: 0; }
.app-user-panel .app-logout-form { margin: 0; }
@media (max-width: 599px) { .app-user-panel { min-width: 240px; } }

/* ----- Chapas del menu -----
   El enlace de MudBlazor ya es flex; el texto se estira para ocupar lo que queda y asi la chapa se pega al
   borde derecho en vez de quedarse pegada a la palabra. */
.app-nav .mud-nav-link { display: flex; align-items: center; }
.app-nav .mud-nav-link > .mud-nav-link-text { flex: 1 1 auto; display: flex; align-items: center; min-width: 0; }
.nav-count {
    margin-left: auto; flex: none;
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
    font-size: .72rem; font-weight: 700; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    color: #FFFFFF;
}
.nav-count-error { background: #EF4444; }
.nav-count-warn  { background: #F59E0B; color: #1F2937; }
.nav-count-info  { background: rgba(var(--eli-primary-rgb), .95); }

/* ----- Menu de la pantalla de configuracion -----
   Se queda a la vista al bajar, porque la seccion de paquetes es mas alta que la pantalla y si no habria
   que subir del todo para cambiar de sitio. En movil se pone arriba y en fila, que es donde cabe. */
.settings-menu { position: sticky; top: 84px; }
.settings-link {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 10px;
    color: inherit; text-decoration: none; font-size: .92rem; font-weight: 500;
    transition: background-color .12s, color .12s;
}
.settings-link:hover { background: var(--mud-palette-action-default-hover); }
.settings-link.active { background: rgba(var(--eli-primary-rgb), .12); color: var(--eli-primary); font-weight: 600; }
@media (max-width: 959px) {
    .settings-menu { position: static; display: flex; flex-wrap: wrap; gap: 4px; }
    .settings-link { padding: 8px 12px; }
}

/* ----- Quien ocupa el almacen ----- */
.reparto-lista { display: flex; flex-direction: column; gap: 2px; }
.reparto-fila { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--mud-palette-divider); font-size: .88rem; }
.reparto-fila:last-child { border-bottom: 0; }
.reparto-color { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.reparto-nombre { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reparto-valor { font-weight: 600; font-variant-numeric: tabular-nums; }
.reparto-pct { width: 56px; text-align: right; font-variant-numeric: tabular-nums; }

/* ----- Tablas de la pantalla de rendimiento ----- */
.perf-table { font-size: .84rem; }
.perf-table th { font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .4px; color: var(--mud-palette-text-secondary); }
.perf-table td, .perf-table th { padding: 6px 8px; }
.perf-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Novedades: la fila y, a su lado, el boton de «visto» de esa sola novedad. El boton va FUERA del enlace
   para que pulsarlo no navegue a la ficha. */
.news-item { display: flex; align-items: center; gap: 4px; }
.news-item > .host-row { flex: 1 1 auto; min-width: 0; }
.news-item > .news-dismiss { flex: 0 0 auto; }

/* Tarjetas de /clientes todas igual de altas: la prevision de cuota va compacta junto a la barra
   (icono y «~N d», frase entera en el tooltip) y cada tarjeta llena el alto de su fila. */
.client-card { height: 100%; }
.forecast-compact { display: inline-flex; align-items: center; gap: 2px; flex: none; font-size: .78rem; font-weight: 600; white-space: nowrap; color: var(--mud-palette-text-secondary); }
.forecast-compact.forecast-warn { color: #B45309; }
.forecast-compact.forecast-danger { color: var(--mud-palette-error); }
.forecast-link { margin-left: 8px; font-weight: 600; color: var(--mud-palette-primary); text-decoration: none; white-space: nowrap; }
.forecast-link:hover { text-decoration: underline; }

/* ----- /crecimiento ----- */
.growth-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: .8rem; }
.growth-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.growth-head, .growth-row { display: grid; grid-template-columns: 88px minmax(0, 1fr) 84px 84px 84px; align-items: center; gap: 10px; }
.growth-row-nobox { grid-template-columns: 88px minmax(0, 1fr) 84px 84px; }
.growth-head { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mud-palette-text-secondary); padding: 0 8px 6px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.growth-row { padding: 8px; border-radius: var(--eli-radius-sm); cursor: pointer; font-size: .85rem; }
.growth-row:hover, .growth-row-open { background: rgba(var(--mud-palette-primary-rgb), .06); }
.growth-row .num, .growth-head .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.growth-day { white-space: nowrap; text-transform: capitalize; }
.growth-added { font-weight: 600; }
.growth-net, .growth-box { color: var(--mud-palette-text-secondary); }
.growth-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: rgba(148,163,184,.15); min-width: 0; }
.growth-bar > span { display: block; height: 100%; min-width: 2px; }
.growth-mobile-label { display: none; }
.growth-detail { padding: 4px 8px 12px 20px; }
.growth-owner { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: var(--eli-radius-sm); text-decoration: none; color: inherit; }
.growth-owner + .growth-owner { border-top: 1px solid var(--mud-palette-lines-default); }
.growth-owner:hover { background: rgba(var(--mud-palette-primary-rgb), .06); }
.growth-owner-name { flex: 1; min-width: 0; font-size: .88rem; }
.growth-owner-sub { display: block; font-size: .76rem; }
.growth-owner-val { display: flex; flex-direction: column; align-items: flex-end; font-size: .85rem; white-space: nowrap; }
.growth-owner-val .mud-text-secondary { font-size: .75rem; }
@media (max-width: 599px) {
    .growth-head { display: none; }
    .growth-row, .growth-row-nobox { grid-template-columns: 1fr auto; grid-template-areas: "day added" "bar bar" "net box"; row-gap: 6px; }
    .growth-row .growth-day { grid-area: day; }
    .growth-row .growth-bar { grid-area: bar; }
    .growth-row .growth-added { grid-area: added; }
    .growth-row .growth-net { grid-area: net; text-align: left; font-size: .76rem; }
    .growth-row .growth-box { grid-area: box; font-size: .76rem; }
    .growth-mobile-label { display: inline; }
    .growth-row + .growth-row, .growth-detail + .growth-row { border-top: 1px solid var(--mud-palette-lines-default); border-radius: 0; }
}

/* Filtros de /crecimiento en una franja: atajos, rango, cliente y agrupacion. En el movil, dos filas:
   atajos y agrupacion arriba, rango y cliente a medias abajo. */
.growth-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.growth-filters .mud-input-control { margin: 0 !important; }
.growth-quick { display: flex; flex-wrap: nowrap; gap: 2px; order: 1; }
.growth-quick .mud-chip { margin: 0 2px; }
.growth-range { order: 2; flex: 0 1 240px; min-width: 0; }
.growth-client { order: 3; flex: 0 1 220px; min-width: 0; }
.growth-group { order: 4; flex: none; margin-left: auto; }
@media (max-width: 599px) {
    .growth-group { order: 2; }
    .growth-range { order: 3; flex: 1 1 200px; }
    .growth-client { order: 4; flex: 1 1 110px; }
}

/* ----- Modo demo ----- */
.app-bar .mud-toolbar { position: relative; }
.demo-badge {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
    padding: 4px 14px; border: 0; border-radius: 999px; cursor: pointer;
    background: #DC2626; color: #fff; font: 800 .82rem/1.2 Inter, sans-serif; letter-spacing: .14em;
    box-shadow: 0 4px 14px rgba(220, 38, 38, .35);
}
.demo-badge:hover, .demo-badge:focus-visible { background: #B91C1C; outline: none; }
@media (max-width: 599px) { .demo-badge { padding: 3px 10px; font-size: .74rem; } }
.demo-welcome-row { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; font-size: .92rem; }
.demo-welcome-row + .demo-welcome-row { border-top: 1px solid var(--mud-palette-lines-default); }
.demo-login { margin-top: 18px; padding: 14px 16px; border-radius: 14px; border: 1px dashed rgba(220, 38, 38, .45); background: rgba(220, 38, 38, .05); }
.demo-login p { margin: 0 0 10px; font-size: .86rem; }
@media (max-width: 599px) { .app-bar-demo .app-brand-text { display: none; } }
.login-demo-cred { display: inline-block; margin-top: 4px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .8rem; opacity: .8; }
.login-submit.demo-submit { background: linear-gradient(135deg, #EF4444, #B91C1C); box-shadow: 0 6px 16px rgba(220, 38, 38, .3); }
/* Demos: etiqueta y botón de restablecer, juntos y centrados en la cabecera. */
.demo-pill { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; display: inline-flex; align-items: center; gap: 0; border-radius: 999px; box-shadow: 0 4px 14px rgba(220, 38, 38, .35); }
.demo-pill .demo-badge { position: static; transform: none; box-shadow: none; border-radius: 999px 0 0 999px; }
.demo-reset { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px 4px 10px; border: 0; border-left: 1px solid rgba(255,255,255,.35); border-radius: 0 999px 999px 0; cursor: pointer; background: #FEE2E2; color: #991B1B; font: 700 .78rem/1.2 Inter, sans-serif; }
.demo-reset:hover, .demo-reset:focus-visible { background: #FECACA; outline: none; }
.demo-reset[disabled] { opacity: .7; cursor: progress; }
@media (max-width: 599px) { .demo-reset-text { display: none; } .demo-reset { padding: 3px 8px; } }

/* ----- /demos ----- */
.demo-list { display: flex; flex-direction: column; gap: 12px; }
.demo-card { padding: 16px 18px; }
.demo-card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.demo-card-title { display: flex; flex-direction: column; flex: 1; min-width: 180px; }
.demo-card-title b { overflow-wrap: anywhere; }
.demo-card-title span { font-size: .82rem; }
.demo-state { font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.demo-state.ok { background: rgba(22,163,74,.12); color: #15803D; }
.demo-state.warn { background: rgba(245,158,11,.14); color: #B45309; }
.demo-state.error { background: rgba(220,38,38,.12); color: #B91C1C; }
.demo-state.off { background: rgba(148,163,184,.18); color: var(--mud-palette-text-secondary); }
.demo-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 12px; margin-bottom: 12px; }
.demo-stats div { display: flex; flex-direction: column; min-width: 0; }
.demo-stats span { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mud-palette-text-secondary); }
.demo-stats b { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 899px) { .demo-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.demo-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.demo-activity { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--mud-palette-lines-default); }
.demo-changes { font-size: .84rem; display: flex; flex-direction: column; gap: 3px; }
.demo-session { border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; padding: 8px 12px; margin-bottom: 6px; }
.demo-session summary { cursor: pointer; font-size: .86rem; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.demo-session-pages { margin-top: 8px; font-size: .82rem; display: flex; flex-direction: column; gap: 2px; padding-left: 4px; }
.demo-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 599px) { .demo-kinds { grid-template-columns: 1fr; } }
.demo-kind { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 12px 14px; border-radius: 12px; cursor: pointer;
    border: 2px solid var(--mud-palette-lines-default); background: transparent; color: inherit; font: inherit; }
.demo-kind span { font-size: .8rem; color: var(--mud-palette-text-secondary); }
.demo-kind.selected { border-color: var(--mud-palette-primary); background: rgba(var(--mud-palette-primary-rgb), .06); }
.demo-kind .mud-icon-root { color: var(--mud-palette-primary); }

/* ----- Pedir una demo (pantalla de acceso) ----- */
.demo-request-cta { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 14px 16px; border-radius: 14px; text-decoration: none; color: #fff;
    background: linear-gradient(135deg, #7C3AED, #DB2777); box-shadow: 0 10px 24px rgba(124, 58, 237, .30); transition: transform .12s ease, box-shadow .15s ease; }
.demo-request-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(124, 58, 237, .38); }
.demo-request-cta div { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.demo-request-cta b { font-size: .98rem; }
.demo-request-cta span { font-size: .82rem; opacity: .92; }
.demo-request-icon { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.2); font-size: 1.1rem !important; opacity: 1 !important; }
.demo-request-go { flex: none; font-size: 1.3rem !important; opacity: 1 !important; }
.demo-request-done { background: linear-gradient(135deg, #16A34A, #0D9488); box-shadow: 0 10px 24px rgba(22, 163, 74, .25); }
.demo-modal { display: none; position: fixed; inset: 0; z-index: 2000; align-items: center; justify-content: center; padding: 16px; }
.demo-toggle { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.demo-toggle:checked + .demo-modal { display: flex; }
.demo-request-cta, .demo-modal-close { cursor: pointer; }
.demo-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px); }
.demo-modal-card { position: relative; width: 100%; max-width: 460px; max-height: calc(100vh - 32px); overflow-y: auto; box-sizing: border-box;
    padding: 26px 24px 20px; border-radius: 20px; background: var(--login-card-bg, #fff); color: inherit; box-shadow: 0 24px 60px rgba(15, 23, 42, .35); }
.demo-modal-card h2 { margin: 0 0 4px; font-size: 1.3rem; }
.demo-modal-sub { margin: 0 0 14px; font-size: .88rem; opacity: .75; }
.demo-modal-close { position: absolute; top: 12px; right: 14px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; text-decoration: none; color: inherit; opacity: .6; }
.demo-modal-close:hover { opacity: 1; background: rgba(148, 163, 184, .18); }
.demo-kind-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; }
.demo-kind-pick label { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; cursor: pointer; border: 2px solid rgba(148, 163, 184, .45); font-size: .8rem; }
.demo-kind-pick label:has(input:checked) { border-color: #7C3AED; background: rgba(124, 58, 237, .07); }
.demo-kind-pick input { position: absolute; opacity: 0; pointer-events: none; }
.demo-kind-pick b { font-size: .9rem; }
.demo-kind-pick span { opacity: .75; }
@media (max-width: 420px) { .demo-kind-pick { grid-template-columns: 1fr; } }
.demo-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.demo-modal-legal { margin: 8px 0 0; font-size: .74rem; opacity: .6; text-align: center; }
.demo-modal .login-submit.demo-submit { background: linear-gradient(135deg, #7C3AED, #DB2777); box-shadow: 0 6px 16px rgba(124, 58, 237, .3); }
html.theme-dark .demo-modal-card { background: #131C31; color: #E2E8F0; }
.demo-request-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 0; }
.demo-request-row + .demo-request-row { border-top: 1px solid var(--mud-palette-lines-default); }
.demo-request-who { display: flex; flex-direction: column; flex: 1; min-width: 200px; font-size: .88rem; }
.demo-request-who span { font-size: .8rem; overflow-wrap: anywhere; }

/* Reglas de alerta en tres grupos: comunes, servidores y estaciones de trabajo. */
.rule-group + .rule-group { margin-top: 22px; }
.rule-group-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.rule-group-head b { font-size: .95rem; }
.rule-group-head span { font-size: .8rem; flex-basis: 100%; }
.role-chip { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 600; vertical-align: middle; background: rgba(var(--mud-palette-primary-rgb), .1); color: var(--mud-palette-primary); }
.role-chip.role-chip-server { background: rgba(148, 163, 184, .16); color: var(--mud-palette-text-secondary); }
/* /crecimiento: las dos fechas, compactas y del mismo alto que el resto de la franja. */
.growth-range { display: inline-flex; align-items: center; gap: 6px; }
.growth-date { height: 36px; box-sizing: border-box; padding: 0 10px; border-radius: 8px; border: 1px solid var(--mud-palette-lines-inputs); background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); font: inherit; font-size: .85rem; min-width: 0; color-scheme: light dark; }
.growth-date:focus { outline: 2px solid var(--mud-palette-primary); outline-offset: -1px; }
@media (max-width: 599px) { .growth-range { flex: 1 1 100%; } .growth-date { flex: 1 1 0; } }

/* ----- Ayuda: portada con temas y lector de un tema ----- */
.help-search { max-width: 520px; margin-bottom: 18px; }
.help-group { margin-bottom: 24px; }
.help-group-title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.help-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.help-tile { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--eli-radius, 14px); text-decoration: none; color: inherit;
    background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); box-shadow: 0 2px 10px rgba(15,23,42,.04); transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease; }
.help-tile:hover, .help-tile:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15,23,42,.09); border-color: rgba(var(--mud-palette-primary-rgb), .45); outline: none; }
.help-tile-icon { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--mud-palette-primary-rgb), .1); color: var(--mud-palette-primary); }
.help-tile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.help-tile-text b { font-size: .95rem; }
.help-tile-text span { font-size: .82rem; color: var(--mud-palette-text-secondary); line-height: 1.4; }
.help-reader { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: start; }
.help-side { position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; }
.help-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; font-weight: 600; font-size: .88rem; text-decoration: none; color: var(--mud-palette-primary); }
.help-side-list { display: flex; flex-direction: column; gap: 2px; }
.help-side-list a { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; text-decoration: none; color: var(--mud-palette-text-secondary); font-size: .85rem; }
.help-side-list a:hover { background: rgba(var(--mud-palette-primary-rgb), .06); color: var(--mud-palette-text-primary); }
.help-side-list a.active { background: rgba(var(--mud-palette-primary-rgb), .12); color: var(--mud-palette-primary); font-weight: 600; }
.help-article { padding: 22px 28px 18px; max-width: 860px; }
.help-article-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.help-article .help-body section { border-bottom: 0; padding-top: 0; }
.help-article .help-body .mud-typography-h4 { font-size: 1.6rem; font-weight: 700; margin: 6px 0 12px; }
.help-article .help-body p, .help-article .help-body li { font-size: .95rem; line-height: 1.65; }
.help-article .help-body p { margin: 0 0 12px; }
.help-article .help-body ul, .help-article .help-body ol { padding-left: 0; margin: 4px 0 14px; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.help-article .help-body ul > li { position: relative; padding: 10px 14px 10px 30px; border-radius: 10px; background: rgba(148,163,184,.08); }
.help-article .help-body ul > li::before { content: ""; position: absolute; left: 13px; top: 19px; width: 7px; height: 7px; border-radius: 50%; background: var(--mud-palette-primary); }
.help-article .help-body ol { counter-reset: help-step; }
.help-article .help-body ol > li { counter-increment: help-step; position: relative; padding: 10px 14px 10px 46px; border-radius: 10px; background: rgba(148,163,184,.08); }
.help-article .help-body ol > li::before { content: counter(help-step); position: absolute; left: 12px; top: 10px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 700; color: #fff; background: var(--mud-palette-primary); }
.help-pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--mud-palette-lines-default); }
.help-pager a { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; padding: 8px 12px; border-radius: 10px; max-width: 48%; }
.help-pager a:hover { background: rgba(var(--mud-palette-primary-rgb), .06); }
.help-pager span { font-size: .78rem; color: var(--mud-palette-text-secondary); }
.help-pager b { color: var(--mud-palette-primary); }
.help-pager-next { text-align: right; margin-left: auto; }
@media (max-width: 959px) { .help-reader { grid-template-columns: 1fr; } .help-side { position: static; max-height: none; } .help-side-list { display: none; } }
@media (max-width: 599px) { .help-article { padding: 16px; } .help-article .help-body .mud-typography-h4 { font-size: 1.3rem; } .help-tiles { grid-template-columns: 1fr; } }

/* ----- Licencia ----- */
.license-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.license-label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--mud-palette-text-secondary); margin-bottom: 4px; }
.license-code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .9rem; padding: 4px 8px; border-radius: 6px; background: rgba(148,163,184,.14); overflow-wrap: anywhere; }
.license-state { font-size: .8rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.license-state.ok { background: rgba(22,163,74,.12); color: #15803D; }
.license-state.warn { background: rgba(245,158,11,.14); color: #B45309; }
.license-state.error { background: rgba(220,38,38,.12); color: #B91C1C; }
.license-state.off { background: rgba(148,163,184,.18); color: var(--mud-palette-text-secondary); }
.browse-row.disabled { opacity: .6; cursor: default; }
.central-boxes { display: flex; flex-wrap: wrap; gap: 6px; }

/* ----- Explorador: restaurar lo elegido ----- */
.browse-row.picked { background: rgba(var(--mud-palette-primary-rgb), .08); }
.restore-panel { padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(var(--mud-palette-primary-rgb), .3); background: rgba(var(--mud-palette-primary-rgb), .04); }
.restore-picked { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.restore-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 6px 2px 10px; border-radius: 999px; font-size: .78rem; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.restore-chip .mud-icon-root { cursor: pointer; opacity: .6; flex: none; }
.restore-chip .mud-icon-root:hover { opacity: 1; }

/* ----- Explorador: árbol de carpetas ----- */
.explorer-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
.explorer-tree { position: sticky; top: 80px; max-height: calc(100vh - 120px); overflow: auto; padding: 8px 6px; border-radius: 12px; background: rgba(148,163,184,.07); font-size: .85rem; }
.tree-node { display: flex; align-items: center; gap: 2px; border-radius: 6px; white-space: nowrap; }
.tree-node:hover { background: rgba(var(--mud-palette-primary-rgb), .07); }
.tree-node.current { background: rgba(var(--mud-palette-primary-rgb), .14); color: var(--mud-palette-primary); font-weight: 600; }
.tree-caret { flex: none; width: 16px; text-align: center; cursor: pointer; color: var(--mud-palette-text-secondary); user-select: none; }
.tree-name { cursor: pointer; padding: 3px 4px; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.explorer-main, .explorer-tree { min-width: 0; }
@media (max-width: 959px) { .explorer-layout { grid-template-columns: minmax(0, 1fr); } .explorer-tree { position: static; max-height: 220px; } }
@media (max-width: 599px) { .browse-list-tall .browse-row { flex-wrap: wrap; row-gap: 2px; } .browse-list-tall .browse-meta { order: 5; flex-basis: 100%; padding-left: 58px; } }

/* ---------------------------------------------------------------- monitor de latidos (/monitor)
   Siempre oscuro, en modo claro también: es una pantalla de monitor, y el trazo luminoso solo se lee sobre negro. */
.pm-root { --pm-ok: #2BE38B; --pm-warn: #FBBF24; --pm-error: #FF5A5F; --pm-off: #8B93A1; --pm-rate: #60A5FA;
    background: radial-gradient(1200px 500px at 10% -10%, #0f1a2e 0%, #070b12 55%, #04060a 100%);
    color: #E5E7EB; border-radius: 22px; padding: 22px; min-height: calc(100vh - 140px);
    box-shadow: 0 20px 60px rgba(2, 6, 23, .35), inset 0 0 0 1px rgba(255,255,255,.04); }
.pm-root:fullscreen { border-radius: 0; padding: 28px 32px; overflow: auto; min-height: 100vh; }
.pm-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-bottom: 22px; }
.pm-title { display: flex; align-items: center; gap: 14px; }
.pm-title h1 { font-size: 1.55rem; font-weight: 800; letter-spacing: -.01em; margin: 0; color: #fff; }
.pm-sub { font-size: .82rem; color: #94A3B8; }
.pm-heart { font-size: 44px !important; color: var(--pm-error); filter: drop-shadow(0 0 10px rgba(255, 90, 95, .6)); }
.pm-heart.pm-beat { animation: pm-heart .45s ease-out; }
@keyframes pm-heart { 0% { transform: scale(1); } 25% { transform: scale(1.28); filter: drop-shadow(0 0 22px rgba(255, 90, 95, .95)); } 55% { transform: scale(.96); } 100% { transform: scale(1); } }
.pm-vitals { display: flex; flex-wrap: wrap; gap: 10px; }
.pm-vital { min-width: 92px; padding: 8px 14px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); display: flex; flex-direction: column; }
.pm-vital b { font-size: 1.7rem; line-height: 1.1; font-variant-numeric: tabular-nums; font-weight: 800; }
.pm-vital span { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: #94A3B8; }
.pm-vital.ok b { color: var(--pm-ok); text-shadow: 0 0 14px rgba(43, 227, 139, .45); }
.pm-vital.warn b { color: var(--pm-warn); }
.pm-vital.error b { color: var(--pm-error); }
.pm-vital.off b { color: var(--pm-off); }
.pm-vital.rate b { color: var(--pm-rate); text-shadow: 0 0 14px rgba(96, 165, 250, .4); }
.pm-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pm-clock { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #CBD5E1; letter-spacing: .04em; margin-right: 4px; }
.pm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04); color: #CBD5E1; font: inherit; font-size: .82rem; cursor: pointer; transition: background .2s, border-color .2s; }
.pm-btn:hover { background: rgba(255,255,255,.09); }
.pm-btn.on { border-color: rgba(43, 227, 139, .6); color: var(--pm-ok); background: rgba(43, 227, 139, .08); }
.pm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 16px; }
.pm-card { --pm: var(--pm-off); position: relative; border-radius: 18px; padding: 14px 16px 12px; min-width: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
    border: 1px solid color-mix(in srgb, var(--pm) 28%, transparent); transition: box-shadow .4s, border-color .4s; }
.pm-card.ok { --pm: var(--pm-ok); }
.pm-card.warn { --pm: var(--pm-warn); }
.pm-card.error { --pm: var(--pm-error); background: linear-gradient(180deg, rgba(255, 90, 95, .09), rgba(255, 90, 95, .02)); }
.pm-card.off { opacity: .72; }
.pm-card.pm-flash { animation: pm-flash .8s ease-out; }
@keyframes pm-flash { 0% { box-shadow: 0 0 0 1px var(--pm), 0 0 34px color-mix(in srgb, var(--pm) 55%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.pm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pm-name { min-width: 0; display: flex; flex-direction: column; }
.pm-name a { color: #fff; font-weight: 700; font-size: 1.02rem; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-name a:hover { text-decoration: underline; }
.pm-name span { font-size: .78rem; color: #94A3B8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-bpm { text-align: right; flex: none; }
.pm-bpm b { display: block; font-size: 2.3rem; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--pm);
    text-shadow: 0 0 18px color-mix(in srgb, var(--pm) 55%, transparent); }
.pm-bpm span { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: #94A3B8; }
.pm-trace { position: relative; height: 112px; margin: 10px -4px 8px; border-radius: 10px; overflow: hidden;
    background-color: rgba(0,0,0,.35);
    background-image: linear-gradient(color-mix(in srgb, var(--pm) 13%, transparent) 1px, transparent 1px),
                      linear-gradient(90deg, color-mix(in srgb, var(--pm) 13%, transparent) 1px, transparent 1px),
                      linear-gradient(color-mix(in srgb, var(--pm) 6%, transparent) 1px, transparent 1px),
                      linear-gradient(90deg, color-mix(in srgb, var(--pm) 6%, transparent) 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; background-position: -1px -1px; }
.pm-trace canvas { display: block; width: 100%; height: 100%; }
.pm-alarm { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; letter-spacing: .28em;
    font-size: .95rem; color: var(--pm-error); text-shadow: 0 0 14px rgba(255, 90, 95, .7); animation: pm-blink 1.1s steps(2, start) infinite; pointer-events: none; }
.pm-alarm.off { color: var(--pm-off); text-shadow: none; animation: none; letter-spacing: .22em; }
@keyframes pm-blink { to { visibility: hidden; } }
.pm-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: .78rem; color: #94A3B8; }
.pm-foot > span { display: inline-flex; align-items: center; gap: 4px; }
.pm-foot b { color: #E5E7EB; font-variant-numeric: tabular-nums; }
.pm-foot .mud-icon-root { color: var(--pm); font-size: 15px; }
.pm-activity { color: #93C5FD; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-skeleton { height: 214px; background: linear-gradient(90deg, rgba(255,255,255,.03) 25%, rgba(255,255,255,.07) 50%, rgba(255,255,255,.03) 75%); background-size: 200% 100%; animation: pm-shimmer 1.4s infinite; }
@keyframes pm-shimmer { to { background-position: -200% 0; } }
.pm-empty { text-align: center; padding: 70px 16px; color: #94A3B8; }
.pm-empty h2 { color: #fff; font-size: 1.2rem; margin: 14px 0 6px; }
@media (max-width: 599px) {
    .pm-root { padding: 16px 14px; border-radius: 18px; }
    .pm-title h1 { font-size: 1.25rem; }
    .pm-heart { font-size: 36px !important; }
    .pm-vitals { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .pm-vital { min-width: 0; padding: 6px 10px; }
    .pm-vital b { font-size: 1.35rem; }
    .pm-trace { height: 92px; }
    .pm-btn span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pm-card.pm-flash, .pm-heart.pm-beat, .pm-alarm { animation: none; } }

/* ---------------------------------------------------------------- selector de cliente (barra de arriba) */
.client-picker { position: relative; margin-left: 18px; min-width: 0; }
.client-picker-btn { display: inline-flex; align-items: center; gap: 6px; max-width: 280px; padding: 6px 10px 6px 12px; border-radius: 999px;
    border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); color: var(--mud-palette-text-primary);
    font: inherit; font-size: .875rem; font-weight: 500; cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; }
.client-picker-btn:hover { border-color: var(--mud-palette-primary); }
.client-picker-btn.active { background: rgba(var(--mud-palette-primary-rgb), .12); border-color: rgba(var(--mud-palette-primary-rgb), .55); color: var(--mud-palette-primary); font-weight: 600;
    box-shadow: 0 0 0 3px rgba(var(--mud-palette-primary-rgb), .08); }
.client-picker-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.client-picker-caret { opacity: .7; }
.client-picker-backdrop { position: fixed; inset: 0; z-index: 1390; }
.client-picker-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 1400; width: 320px; max-height: min(70vh, 520px); display: flex; flex-direction: column;
    background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); border: 1px solid var(--mud-palette-lines-default); border-radius: 16px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .22); overflow: hidden; animation: client-picker-in .14s ease-out; }
@keyframes client-picker-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.client-picker-search { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--mud-palette-lines-default); color: var(--mud-palette-text-secondary); }
.client-picker-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--mud-palette-text-primary); font: inherit; font-size: .95rem; padding: 4px 0; }
.client-picker-list { overflow-y: auto; padding: 6px; }
.client-picker-item { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent;
    color: inherit; font: inherit; font-size: .9rem; text-align: left; cursor: pointer; }
.client-picker-item:hover { background: var(--mud-palette-action-default-hover); }
.client-picker-item.current { background: rgba(var(--mud-palette-primary-rgb), .1); color: var(--mud-palette-primary); font-weight: 600; }
.client-picker-item.all { border-bottom: 1px solid var(--mud-palette-lines-default); border-radius: 10px 10px 0 0; margin-bottom: 4px; }
.client-picker-item span:not(.client-picker-initial) { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-picker-initial { flex: none; width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 700; background: rgba(var(--mud-palette-primary-rgb), .12); color: var(--mud-palette-primary); }
.client-picker-empty { padding: 14px; text-align: center; color: var(--mud-palette-text-secondary); font-size: .875rem; }
.client-scope-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 16px; padding: 9px 14px; border-radius: 12px;
    background: rgba(var(--mud-palette-primary-rgb), .09); border: 1px solid rgba(var(--mud-palette-primary-rgb), .25); color: var(--mud-palette-text-primary); font-size: .875rem; }
.client-scope-bar .mud-icon-root { color: var(--mud-palette-primary); }
.client-scope-bar a { color: var(--mud-palette-primary); font-weight: 700; text-decoration: none; }
.client-scope-bar a:hover { text-decoration: underline; }
.client-scope-bar button { margin-left: auto; border: 0; background: transparent; color: var(--mud-palette-primary); font: inherit; font-weight: 600; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.client-scope-bar button:hover { background: rgba(var(--mud-palette-primary-rgb), .1); }
.client-scope-bar.global { background: rgba(148, 163, 184, .1); border-color: rgba(148, 163, 184, .3); }
.client-scope-bar.global .mud-icon-root { color: var(--mud-palette-text-secondary); }
@media (max-width: 959px) { .client-picker-btn { max-width: 190px; } }
@media (max-width: 599px) {
    .client-picker { margin-left: 6px; }
    .client-picker-btn { max-width: 150px; padding: 6px 8px; font-size: .8rem; }
    /* En el móvil no caben logo con nombre, selector, buscador, campana, tema y cuenta: el nombre se va. */
    .app-bar:has(.client-picker) .app-brand-text { display: none; }
    .client-picker-btn .client-picker-caret { display: none; }
    .client-picker-panel { position: fixed; top: 64px; left: 12px; right: 12px; width: auto; }
    .client-scope-bar button { margin-left: 0; }
}

/* ---------- MEJORAS-3: tiempo de recuperación, copia local (3-2-1) y restaurar en otro equipo ---------- */
.recovery-card, .localcopy-card { height: 100%; }
.recovery-hero { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-radius: var(--eli-radius-sm);
    background: rgba(var(--eli-primary-rgb), .08); border: 1px solid rgba(var(--eli-primary-rgb), .18); }
.recovery-hero.ok { background: rgba(22, 163, 74, .08); border-color: rgba(22, 163, 74, .25); }
.recovery-hero.bad { background: rgba(239, 68, 68, .08); border-color: rgba(239, 68, 68, .28); }
.recovery-hero.warn { background: rgba(245, 158, 11, .09); border-color: rgba(245, 158, 11, .3); }
.recovery-hero.off { background: rgba(148, 163, 184, .1); border-color: rgba(148, 163, 184, .28); }
.recovery-hero-icon { font-size: 2.1rem !important; color: var(--eli-primary); flex: none; }
.recovery-hero.ok .recovery-hero-icon { color: var(--eli-success); }
.recovery-hero.bad .recovery-hero-icon { color: var(--eli-error); }
.recovery-hero.warn .recovery-hero-icon { color: var(--eli-warning); }
.recovery-hero.off .recovery-hero-icon { color: var(--eli-neutral); }
.recovery-hero-text { flex: 1 1 180px; min-width: 0; }
.recovery-hero-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mud-palette-text-secondary); font-weight: 600; }
.recovery-hero-value { font-size: 1.9rem; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.recovery-hero-sub { font-size: .85rem; color: var(--mud-palette-text-secondary); }
.rule-321 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rule-321-step { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: .82rem; font-weight: 600;
    background: rgba(148, 163, 184, .12); color: var(--mud-palette-text-secondary); border: 1px dashed rgba(148, 163, 184, .5); }
.rule-321-step.on { background: rgba(22, 163, 74, .1); color: var(--eli-success); border: 1px solid rgba(22, 163, 74, .3); }
.rule-321-step.warn { background: rgba(245, 158, 11, .1); color: var(--eli-warning); border: 1px solid rgba(245, 158, 11, .35); }
.rule-321-step.bad { background: rgba(239, 68, 68, .1); color: var(--eli-error); border: 1px solid rgba(239, 68, 68, .3); }
.rule-321-step + .rule-321-step::before { content: ""; }
/* Pantalla /recuperacion */
.rto-list { display: flex; flex-direction: column; gap: 10px; }
.rto-row { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr) auto; gap: 12px; align-items: center;
    padding: 12px 14px; border-radius: var(--eli-radius-sm); border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); }
.rto-row:hover { border-color: var(--mud-palette-lines-inputs); }
.rto-row a { color: inherit; text-decoration: none; }
.rto-name { min-width: 0; }
.rto-name b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rto-cell-label { display: none; font-size: .72rem; color: var(--mud-palette-text-secondary); text-transform: uppercase; letter-spacing: .03em; }
.rto-big { font-size: 1.15rem; font-weight: 700; }
.rto-bar { height: 6px; border-radius: 3px; background: rgba(148, 163, 184, .18); overflow: hidden; margin-top: 4px; }
.rto-bar > span { display: block; height: 100%; border-radius: 3px; }
@media (max-width: 959px) {
    .rto-row { grid-template-columns: 1fr 1fr; }
    .rto-name { grid-column: 1 / -1; }
    .rto-cell-label { display: block; }
    .rto-actions { grid-column: 1 / -1; justify-self: start; }
}
/* Explorador: leer con otro equipo */
.reader-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--eli-radius-sm); margin-top: 12px;
    background: rgba(var(--eli-primary-rgb), .07); border: 1px solid rgba(var(--eli-primary-rgb), .22); }
.reader-banner.down { background: rgba(245, 158, 11, .08); border-color: rgba(245, 158, 11, .32); }
.reader-banner .mud-icon-root { flex: none; }
.reader-banner-text { flex: 1 1 260px; min-width: 0; font-size: .9rem; }
.reader-chip-ro { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-weight: 600;
    background: rgba(22, 163, 74, .1); color: var(--eli-success); }