/* Tema operativo nocturno de Central. Los colores semánticos quedan reservados para estados. */
:root {
    color-scheme: dark;
    --central-page: #101720;
    --central-surface: #182231;
    --central-surface-raised: #202d3d;
    --central-line: #2d3d50;
    --central-text: #e8eef7;
    --central-muted: #9aabbe;
    --central-blue: #4385f5;
    --central-blue-hover: #5a95f7;
    --central-good: #39b889;
    --central-warning: #f0b34b;
    --central-danger: #f06c71;
}

html { background: var(--central-page); }
body {
    background: var(--central-page) !important;
    color: var(--central-text) !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
body > main, body > .card, body > .top, body > .shell > main { position: relative; }
a { color: #72a6ff !important; }
a:hover { color: #a5c5ff !important; }
h1, h2, h3, strong, label, th { color: var(--central-text) !important; }
p, small, .muted, .time, .event-time, .event-meta, .empty, .sub, .refresh, .unknown { color: var(--central-muted) !important; }

.card, .section, table, .notice, .panel-card, .toast {
    background: var(--central-surface) !important;
    border-color: var(--central-line) !important;
    box-shadow: none !important;
}
.card, .section, table { box-shadow: 0 10px 28px rgba(0, 0, 0, .14) !important; }
.system-cards { margin-top: 0 !important; }
.unit { margin-left: 2px; color: var(--central-muted); font-size: 17px; font-weight: 500; }
th { background: var(--central-surface-raised) !important; color: #b8c7d8 !important; }
td, th, .event, .incident, .line, .section h2, .section-head, .site-title, .client-row, .request {
    border-color: var(--central-line) !important;
}
.event:hover { background: #223247 !important; }

input, select, textarea {
    background: #111a25 !important;
    color: var(--central-text) !important;
    border-color: #3c5067 !important;
    color-scheme: dark;
}
input::placeholder, textarea::placeholder { color: #8193a8 !important; }
input:focus, select:focus, textarea:focus {
    border-color: var(--central-blue) !important;
    outline: 2px solid rgba(67, 133, 245, .26) !important;
    outline-offset: 0;
}
button, .button, input[type="submit"] {
    background: var(--central-blue) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
button:hover, .button:hover, input[type="submit"]:hover { background: var(--central-blue-hover) !important; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #9cc1ff !important; outline-offset: 2px; }

/* Navegación de la consola. */
aside { background: #121c29 !important; border-right: 1px solid var(--central-line); }
.brand { letter-spacing: .02em; }
.nav-label { color: #8193a8 !important; }
.nav-item { color: #b9c7d8 !important; }
.nav-item:hover { color: #fff !important; background: #223247 !important; }
.nav-item.active { background: #29466c !important; color: #fff !important; }
header { border-color: var(--central-line); }
.badge { background: rgba(57, 184, 137, .16) !important; color: #7ce0b8 !important; }

/* Estructura compartida para las vistas operativas. */
.central-navigation {
    position: fixed;
    z-index: 30;
    inset: 0 auto 0 0;
    width: 236px;
    padding: 22px 14px;
    display: flex;
    flex-direction: column;
    background: #121c29;
    border-right: 1px solid var(--central-line);
    color: #dce6f2;
}
.central-brand { display: flex; align-items: center; gap: 9px; min-height: 30px; padding: 0 8px; font-size: 15px; font-weight: 750; letter-spacing: .07em; color: #fff !important; text-decoration: none; }
.central-brand img { max-width: 180px; max-height: 42px; object-fit: contain; object-position: left center; }
.central-brand-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--central-blue); color: #fff; letter-spacing: 0; }
.central-brand-caption { margin: 9px 8px 25px; color: #8193a8; font-size: 11px; }
.central-nav-label { margin: 17px 9px 7px; color: #7f91a6; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.central-nav-link { display: block; margin: 2px 0; padding: 10px 11px; border-radius: 7px; color: #bdcad9 !important; text-decoration: none; font-size: 13px; }
.central-nav-link:hover { background: #223247; color: #fff !important; }
.central-nav-link.is-active { background: #29466c; color: #fff !important; font-weight: 650; }
.central-navigation-footer { margin-top: auto; padding: 14px 8px 0; border-top: 1px solid #2d3d50; }
.central-user-name { color: #edf4fd; font-size: 12px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.central-user-role { margin-top: 3px; color: #8fa0b4; font-size: 11px; }
.central-logout { margin-top: 12px; padding: 0; border: 0; background: transparent !important; color: #b9c7d8 !important; font: inherit; font-size: 12px; cursor: pointer; }
.central-logout:hover { color: #fff !important; }
.central-desktop-header { height: 67px; margin-left: 236px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; background: #121c29; border-bottom: 1px solid var(--central-line); }
.central-breadcrumb { display: flex; align-items: center; gap: 9px; color: #91a2b5; font-size: 12px; }
.central-breadcrumb a { color: #c8d7e8 !important; text-decoration: none; }
.central-breadcrumb a:hover { color: #fff !important; }
.central-breadcrumb strong { color: #eef4fb !important; font-weight: 650; }
.central-header-actions { display: flex; align-items: center; gap: 17px; }
.central-receiver-status { padding: 8px 11px; border-radius: 999px; background: rgba(57, 184, 137, .14); color: #77dfb4; font-size: 11px; font-weight: 700; }
.central-header-notification { color: #a9b9ca; font-size: 19px; line-height: 1; }
.central-profile-menu { position: relative; }
.central-profile-menu summary { display: flex; align-items: center; gap: 8px; list-style: none; color: #e8eef7; font-size: 12px; cursor: pointer; }
.central-profile-menu summary::-webkit-details-marker { display: none; }
.central-avatar { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; background: #436079; color: #fff; font-size: 10px; font-weight: 750; }
.central-profile-caret { color: #8ea0b5; font-size: 13px; }
.central-profile-popover { position: absolute; z-index: 50; top: 38px; right: 0; width: 230px; padding: 13px; display: grid; gap: 5px; background: #202d3d; border: 1px solid #38506a; border-radius: 8px; box-shadow: 0 14px 28px rgba(0, 0, 0, .3); }
.central-profile-popover strong { font-size: 12px; }.central-profile-popover span, .central-profile-popover small { color: #9aabbe; font-size: 11px; overflow-wrap: anywhere; }.central-profile-popover form { margin-top: 6px; padding-top: 9px; border-top: 1px solid #38506a; }.central-profile-popover button { padding: 0; border: 0; background: transparent !important; color: #c8d7e8 !important; font: inherit; font-size: 12px; cursor: pointer; }
.central-workspace { min-height: calc(100vh - 67px); margin-left: 236px; padding: 0 28px 34px; }
.central-workspace > .shell { display: block !important; min-height: 0 !important; }
.central-workspace > .shell > aside { display: none !important; }
.central-workspace > .shell > main { max-width: 1500px; margin: 0 auto; padding: 30px 0 !important; }
.central-mobile-header { display: none; }
.central-workspace > p:first-child:has(> a[href$="/"]) { display: none; }

/* Estados de seguridad: solamente estos usan color de alerta. */
.online, .ok { color: var(--central-good) !important; }
.offline, .priority, .critical { color: var(--central-danger) !important; }
.high { color: var(--central-warning) !important; }
.tag { color: #8ab7ff !important; }
.error { background: rgba(240, 108, 113, .14) !important; border: 1px solid rgba(240, 108, 113, .35); color: #ffc6c8 !important; }

/* Inicio de sesión y portal sencillo. */
body > .card { background: var(--central-surface) !important; }
.mark { background: var(--central-blue) !important; }
.login-logo { display:block; max-width:210px; max-height:70px; object-fit:contain; object-position:left center; }
.top, .client-top { border-color: var(--central-line) !important; }
.check { color: var(--central-muted) !important; }

@media (max-width: 760px) {
    body { background: #101720 !important; }
}

@media (max-width: 940px) {
    .central-desktop-header { display: none; }
    .central-navigation { transform: translateX(-102%); transition: transform .18s ease; box-shadow: 16px 0 32px rgba(0, 0, 0, .32); }
    .central-navigation.is-open { transform: translateX(0); }
    .central-workspace { min-height: 100vh; margin-left: 0; padding: 0 18px 26px; }
    .central-mobile-header { height: 58px; margin: 0 -18px 20px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; background: #121c29; border-bottom: 1px solid var(--central-line); }
    .central-menu-toggle { margin: 0; padding: 7px 9px; background: transparent !important; border: 1px solid #3a4d63 !important; border-radius: 6px; color: #dce6f2 !important; font: inherit; font-size: 12px; }
    .central-mobile-brand { color: #fff !important; font-size: 13px; font-weight: 750; letter-spacing: .06em; text-decoration: none; }.central-mobile-brand img { display:block; max-width:120px; max-height:32px; object-fit:contain; }
    .central-mobile-header .central-logout { margin: 0; color: #b9c7d8 !important; }
    .central-workspace > .shell > main { padding: 0 !important; }
}

@media (max-width: 620px) {
    .central-workspace { padding-inline: 13px; }
    .central-mobile-header { margin-inline: -13px; }
    .central-mobile-header .central-menu-toggle span { display: none; }
    .central-workspace header:not(.central-mobile-header) { flex-wrap: wrap; gap: 12px; }
    .central-workspace .grid, .central-workspace .cards { grid-template-columns: 1fr !important; }
    .central-workspace table { display: block; overflow-x: auto; white-space: nowrap; }
    .central-workspace .actions { flex-wrap: wrap; white-space: normal; }
    .central-workspace h1 { font-size: 23px; }
}