:root {
    --bg: #08111c;
    --panel: #0d1926;
    --panel-2: #111f2e;
    --border: #203246;
    --text: #e7edf5;
    --muted: #8ea0b5;
    --accent: #48a9ff;
    --ok: #48d597;
    --warn: #f3c75f;
    --danger: #ef6b73;
    --shadow: 0 8px 28px rgba(0, 0, 0, .22);

    /* Alias de compatibilidad para los módulos V2 */
    --border-color: var(--border);
    --panel-bg: var(--panel);
    --text-primary: var(--text);
    --text-secondary: var(--muted);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, Arial, Helvetica, sans-serif;
    min-height: 100vh;
}

.topbar {
    min-height: 74px;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    background: #0a1521;
}

.brand-main {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .12em;
}

.brand-sub {
    color: var(--muted);
    font-size: 11px;
    letter-spacing: .18em;
    margin-top: 3px;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 13px;
}

.system-status,
.user-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--muted);
}

.status-dot.ok {
    background: var(--ok);
}

.status-dot.warn {
    background: var(--warn);
}

.status-dot.danger {
    background: var(--danger);
}

.role-badge {
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--accent);
    font-size: 11px;
    text-transform: uppercase;
}

.logout-link {
    color: var(--muted);
    text-decoration: none;
}

.logout-link:hover {
    color: var(--text);
}

.main-nav {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    padding: 8px 20px;
    background: #091521;
    border-bottom: 1px solid var(--border);
}

.nav-item {
    border: 0;
    background: transparent;
    color: var(--muted);
    padding: 11px 15px;
    cursor: pointer;
    border-radius: 5px;
    white-space: nowrap;
    font-size: 13px;
}

.nav-item:hover {
    background: var(--panel);
    color: var(--text);
}

.nav-item.active {
    background: var(--panel-2);
    color: var(--accent);
}

.content {
    max-width: 1500px;
    margin: 0 auto;
    padding: 28px;
}

.module {
    display: none;
}

.module.active {
    display: block;
}

.page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}

.page-heading h1 {
    margin: 0;
    font-size: 27px;
}

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

.last-update {
    color: var(--muted);
    font-size: 12px;
}

.last-update strong {
    color: var(--text);
}

.section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 28px 0 12px;
}

.section-title h2 {
    margin: 0;
    font-size: 15px;
    letter-spacing: .04em;
}

.section-title span {
    color: var(--muted);
    font-size: 12px;
}

.cards-grid {
    display: grid;
    gap: 12px;
}

.services-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.status-card,
.info-card,
.storage-card,
.conversion-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.status-card {
    padding: 17px;
    min-height: 112px;
}

.status-card.ok {
    border-color: rgba(72, 213, 151, .35);
}

.status-card.warn {
    border-color: rgba(243, 199, 95, .35);
}

.status-card.danger {
    border-color: rgba(239, 107, 115, .35);
}

.muted-card {
    opacity: .82;
}

.card-label {
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.card-value {
    margin-top: 11px;
    font-size: 17px;
    font-weight: 700;
}

.card-value.ok,
.status-indicator.ok {
    color: var(--ok);
}

.card-value.warn,
.status-indicator.warn {
    color: var(--warn);
}

.card-value.danger,
.status-indicator.danger {
    color: var(--danger);
}

.card-detail {
    margin-top: 6px;
    color: var(--muted);
    font-size: 11px;
}

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

.storage-card {
    padding: 18px;
}

.storage-head {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    font-size: 14px;
}

.storage-head strong {
    font-size: 16px;
}

.progress {
    height: 8px;
    margin-top: 14px;
    border-radius: 5px;
    background: #172636;
    overflow: hidden;
}

.progress-bar {
    width: 0;
    height: 100%;
    background: var(--accent);
    transition: width .3s ease;
}

.progress-bar.warn {
    background: var(--warn);
}

.progress-bar.danger {
    background: var(--danger);
}

.storage-detail {
    margin-top: 10px;
    color: var(--muted);
    font-size: 11px;
}

.data-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.info-card {
    padding: 18px;
    min-height: 130px;
}

.wide-info-card {
    grid-column: span 1;
}

.big-number {
    margin-top: 8px;
    font-size: 31px;
    font-weight: 800;
}

.info-main {
    margin-top: 11px;
    font-size: 15px;
    font-weight: 700;
    word-break: break-word;
}

.conversion-card {
    padding: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.status-indicator {
    min-width: 120px;
    text-align: right;
    font-weight: 700;
    font-size: 13px;
}

.placeholder-module {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 30px;
}

.placeholder-module h1 {
    margin-top: 0;
}

.placeholder-module p {
    color: var(--muted);
}

.footer {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 25px 28px;
    margin-top: 25px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 11px;
}

@media (max-width: 1100px) {
    .services-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .data-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 750px) {
    .topbar {
        align-items: flex-start;
        gap: 15px;
        flex-direction: column;
    }

    .topbar-right {
        width: 100%;
        justify-content: space-between;
        gap: 10px;
    }

    .content {
        padding: 18px;
    }

    .page-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .services-grid,
    .storage-grid,
    .data-grid {
        grid-template-columns: 1fr;
    }

    .footer {
        flex-direction: column;
    }
}

/* =========================================================
   V2-TRAFFIC-03
   ========================================================= */

.traffic-module {
    width: 100%;
}

.module-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 28px;
}

.module-header h1 {
    margin-bottom: 6px;
}

.module-header p {
    margin: 0;
}

.traffic-source-badge {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--text-secondary);
    font-size: 12px;
    white-space: nowrap;
}

.traffic-filters {
    display: grid;
    grid-template-columns: minmax(150px,.9fr) minmax(110px,.6fr) minmax(260px,1.45fr) minmax(250px,1.35fr);
    gap: 12px;
    align-items: end;
    padding: 18px;
    margin-bottom: 18px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--panel-bg);
}

.traffic-filters > .form-field-wide {
    grid-column: auto;
}

.traffic-external-picker {
    min-width: 0;
}

.traffic-external-picker .traffic-external-status {
    order: 1;
    margin: 0 0 7px;
}

.traffic-external-picker .button-secondary {
    order: 2;
    width: 100%;
}

.traffic-external-status {
    min-height: 16px;
    margin-top: 5px;
    color: var(--text-secondary);
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.traffic-filters > .form-field:nth-child(5),
.traffic-filters > .form-field:nth-child(6),
.traffic-filters > .form-field:nth-child(7),
.traffic-filters > .form-field:nth-child(8) {
    grid-row: 2;
}

.traffic-filters > .form-field:nth-child(5) { grid-column: 1; }
.traffic-filters > .form-field:nth-child(6) { grid-column: 2; }
.traffic-filters > .form-field:nth-child(7) { grid-column: 3; }
.traffic-filters > .form-field:nth-child(8) { grid-column: 4; }

.traffic-filters .traffic-actions {
    grid-column: 1 / -1;
    grid-row: 3;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.form-field label {
    color: var(--text-secondary);
    font-size: 12px;
}

.form-field input,
.form-field select {
    width: 100%;
    box-sizing: border-box;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--input-bg, #0b1724);
    color: var(--text-primary);
}

.form-field input:focus,
.form-field select:focus {
    outline: none;
    border-color: #3ea6ff;
}

.traffic-actions {
    display: flex;
    gap: 8px;
}

.button-primary,
.button-secondary {
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 5px;
    cursor: pointer;
    font: inherit;
}

.button-primary {
    border: 1px solid #2497ef;
    background: #1678c8;
    color: #fff;
}

.button-secondary {
    border: 1px solid var(--border-color);
    background: var(--panel-bg);
    color: var(--text-primary);
}

.button-secondary:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.traffic-message {
    min-height: 20px;
    margin: 10px 0 18px;
    color: var(--text-secondary);
    font-size: 13px;
}

.traffic-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.traffic-summary-card {
    padding: 18px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--panel-bg);
}

.traffic-summary-card span {
    display: block;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    text-transform: uppercase;
}

.traffic-summary-card strong {
    display: block;
    font-size: 24px;
}

.traffic-table-card {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--panel-bg);
    overflow: hidden;
}

.traffic-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-color);
}

.traffic-table-header h2 {
    margin: 0 0 5px;
    font-size: 17px;
}

.traffic-table-header span {
    color: var(--text-secondary);
    font-size: 12px;
}

.traffic-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.traffic-sort {
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-transform: inherit;
}

.traffic-sort span {
    margin-left: 4px;
    color: var(--accent);
    font-size: 11px;
}

.traffic-sort.active {
    color: var(--accent);
}

.traffic-page-input,
.traffic-page-size {
    min-height: 38px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--input-bg, #0b1724);
    color: var(--text-primary);
    padding: 7px 9px;
}

.traffic-page-input { width: 68px; }
.traffic-page-size { width: 78px; }

.table-wrapper {
    overflow-x: auto;
}

.traffic-table {
    width: 100%;
    border-collapse: collapse;
}

.traffic-table th,
.traffic-table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    white-space: nowrap;
}

.traffic-table th {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.traffic-table td {
    font-size: 13px;
}

.traffic-table tbody tr:hover {
    background: rgba(255,255,255,.025);
}

.table-empty {
    padding: 30px !important;
    text-align: center !important;
    color: var(--text-secondary);
}

@media (max-width: 1200px) {
    .traffic-filters {
        grid-template-columns: repeat(3, 1fr);
    }

    .traffic-actions {
        grid-column: span 3;
    }

    .traffic-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .module-header,
    .traffic-table-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .traffic-filters {
        grid-template-columns: 1fr;
    }

    .traffic-actions {
        grid-column: auto;
    }

    .traffic-summary-grid {
        grid-template-columns: 1fr;
    }
}



/*
   =========================================================
   V2-TRAFFIC-04
   Estados de consulta, IP investigable y servicios de puerto
   ========================================================= */

.traffic-filters.is-loading {
    opacity: .92;
}

.button-primary.is-loading {
    cursor: wait;
    opacity: .78;
}

.button-primary:disabled {
    cursor: wait;
    opacity: .72;
}

.traffic-ip-link {
    border: 0;
    padding: 0;
    background: transparent;
    color: #3ea6ff;
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.traffic-ip-link:hover {
    text-decoration: underline;
}

.traffic-destination-ip {
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        monospace;
}

.traffic-port-cell {
    white-space: nowrap;
}

.traffic-port-number {
    font-weight: 600;
}

.traffic-port-service {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 6px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
}

@media (max-width: 1100px) {
    .traffic-filters {
        grid-template-columns:
            repeat(2, minmax(180px, 1fr));
    }

    .traffic-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .traffic-filters {
        grid-template-columns: 1fr;
    }

    .traffic-actions {
        grid-column: auto;
    }

    .traffic-port-service {
        margin-top: 2px;
    }
}


/*
   =========================================================
   V2-TRAFFIC-04.1
   Mejor contraste del selector de fecha en tema oscuro
   ========================================================= */

.form-field input[type="date"] {
    color-scheme: dark;
}

.form-field input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 1;
    cursor: pointer;
}

/* =========================================================
   V2-INVESTIGATION-01
   ========================================================= */
.investigation-module { width:100%; }
.investigation-filters {
    display:grid;
    grid-template-columns:minmax(150px,.8fr) minmax(110px,.6fr) minmax(260px,1.45fr) minmax(250px,1.35fr);
    gap:12px;
    align-items:end;
    padding:18px;
    margin-bottom:18px;
    border:1px solid var(--border-color);
    border-radius:8px;
    background:var(--panel-bg);
}
.investigation-external-picker .button-secondary { width:100%; order:2; }
.investigation-external-status {
    min-height:16px;
    order:1;
    margin:0 0 7px;
    margin-top:5px;
    color:var(--text-secondary);
    font-size:11px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.investigation-filters > .investigation-ip-field {
    grid-column:1 / span 2;
    grid-row:2;
}
.investigation-filters .investigation-actions {
    grid-column:3 / -1;
    grid-row:2;
    align-self:end;
}
.investigation-actions { display:flex; gap:8px; }
.investigation-source {
    border:1px solid var(--border-color);
    border-radius:6px;
    padding:8px 12px;
    color:var(--text-secondary);
    font-size:12px;
    white-space:nowrap;
}
.investigation-message {
    min-height:20px;
    margin:10px 0 16px;
    color:var(--text-secondary);
    font-size:13px;
}
.investigation-client-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 18px;
    margin-bottom:14px;
    border:1px solid var(--border-color);
    border-radius:8px;
    background:var(--panel-bg);
}
.investigation-client-head span { color:var(--text-secondary); font-size:12px; text-transform:uppercase; }
.investigation-client-head strong { font-size:18px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.investigation-summary-grid {
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:12px;
    margin-bottom:18px;
}
.investigation-columns {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    margin-bottom:14px;
}
.investigation-card {
    border:1px solid var(--border-color);
    border-radius:8px;
    background:var(--panel-bg);
    overflow:hidden;
}
.investigation-card-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:14px 18px;
    border-bottom:1px solid var(--border-color);
}
.investigation-card-head h2 { margin:0; font-size:16px; }
.investigation-card-head span { color:var(--text-secondary); font-size:11px; }
.investigation-table { width:100%; border-collapse:collapse; }
.investigation-table th,
.investigation-table td {
    padding:10px 14px;
    border-bottom:1px solid var(--border-color);
    text-align:left;
    white-space:nowrap;
    font-size:13px;
}
.investigation-table th { color:var(--text-secondary); font-size:11px; text-transform:uppercase; }
.investigation-table tbody tr:hover { background:rgba(255,255,255,.025); }
.investigation-table td:first-child { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.investigation-module .traffic-port-service { margin-left:6px; }
@media (max-width:1100px) {
    .investigation-summary-grid { grid-template-columns:repeat(3,1fr); }
    .investigation-filters { grid-template-columns:repeat(2,minmax(180px,1fr)); }
    .investigation-actions { grid-column:1/-1; }
}
@media (max-width:700px) {
    .investigation-filters,.investigation-columns,.investigation-summary-grid { grid-template-columns:1fr; }
    .investigation-actions { grid-column:auto; }
    .investigation-client-head { align-items:flex-start; flex-direction:column; gap:7px; }
}

/* V2-GEO-INV-01 */
.investigation-geo-card { margin-top: 24px; }
.investigation-geo-card .investigation-card-head > div { display:flex; flex-direction:column; gap:4px; }
.investigation-geo-card .investigation-card-head h2 { margin:0; }
.investigation-geo-card .investigation-card-head span { font-size:13px; opacity:.72; }
.investigation-geo-message { margin:14px 0 18px; font-size:14px; opacity:.82; }
.investigation-geo-card #investigationGeoButton {
    border:1px solid #8b6cff;
    background:#5b3cc4;
    color:#fff;
    font-weight:700;
    box-shadow:0 0 0 1px rgba(139,108,255,.12), 0 4px 14px rgba(91,60,196,.22);
}
.investigation-geo-card #investigationGeoButton:hover:not(:disabled) {
    background:#6d4be0;
    border-color:#a38bff;
}
.investigation-geo-card #investigationGeoButton:disabled {
    opacity:.65;
    cursor:wait;
}
.investigation-geo-grid { display:grid; grid-template-columns:1fr 1.35fr; gap:24px; }
.investigation-geo-grid h3 { margin:0 0 12px; font-size:15px; font-weight:600; }
.geo-code { opacity:.6; font-size:12px; margin-left:5px; }
@media (max-width: 1100px) { .investigation-geo-grid { grid-template-columns:1fr; } }


/* V2-ALERTS-01 */
.alerts-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}.alerts-source{border:1px solid var(--border);border-radius:6px;padding:8px 12px;color:var(--muted);font-size:12px}.alerts-message{min-height:20px;margin:10px 0 16px;color:var(--muted);font-size:13px}@media(max-width:900px){.alerts-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.alerts-summary-grid{grid-template-columns:1fr}}

/* V2-EVENT-DETAIL-01 */
.event-detail-panel{margin:16px 0;padding:18px;border:1px solid var(--border-color);border-radius:8px;background:var(--panel-bg)}
.event-detail-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}.event-detail-head h2{margin:0;font-size:18px}
.event-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:18px}.event-detail-grid>div{padding:10px;border:1px solid var(--border-color);border-radius:6px}.event-detail-grid b{font-size:11px;text-transform:uppercase;color:var(--text-secondary)}
.event-detail-panel h3{margin:18px 0 10px;font-size:15px}.event-detail-list{display:grid;gap:7px;font-size:13px;color:var(--text-secondary)}
.alert-detail-button{white-space:nowrap}@media(max-width:800px){.event-detail-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.event-detail-grid{grid-template-columns:1fr}}

/* V2-USERS-01 */
.configuration-module{width:100%;}
.users-grid{display:grid;grid-template-columns:minmax(320px,.8fr) minmax(520px,1.6fr);gap:24px;}
.users-panel{margin-top:8px;}
.users-message{margin:12px 0 18px;padding:10px 13px;border-radius:8px;background:rgba(255,255,255,.035);color:var(--text-secondary);font-size:13px;}
.users-form{
    margin-top:18px;
    grid-template-columns:minmax(130px,1fr) minmax(120px,.85fr) minmax(160px,1.25fr);
    align-items:end;
}
.users-form .traffic-actions{
    grid-column:1 / -1;
    justify-content:flex-end;
    margin-top:2px;
}
.users-form .traffic-actions .button-primary{
    min-width:150px;
}
@media (max-width: 700px){
    .users-form{grid-template-columns:1fr;}
    .users-form .traffic-actions{grid-column:auto;justify-content:flex-start;}
}
.user-status{display:inline-block;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:700;text-transform:uppercase;}
.user-status.ok{background:rgba(60,180,100,.14);}
.user-status.warn{background:rgba(220,170,50,.14);}
.user-action,.user-reset{font-size:11px;padding:7px 9px;white-space:nowrap;}
.user-actions-cell{white-space:normal !important;}
.user-actions-cell{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.user-actions-cell button:disabled{opacity:.45;cursor:not-allowed;}
@media (max-width: 1050px){.users-grid{grid-template-columns:1fr;}}

.project-progress-grid{margin-bottom:24px;}
.project-card-ready .big-number{font-size:22px;}
.project-card-next .big-number{font-size:28px;}

/* V2-CONFIG-STRUCTURE-01 */
.configuration-sections{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 20px;padding:10px;border:1px solid var(--border);border-radius:8px;background:var(--panel);}
.configuration-section{border:1px solid var(--border);border-radius:6px;background:transparent;color:var(--muted);padding:8px 12px;font:inherit;font-size:13px;cursor:pointer;}
.configuration-section:hover{color:var(--text);border-color:var(--text-secondary);}
.configuration-section.active{background:var(--input-bg,#0b1724);color:var(--text);border-color:var(--accent,#2b8bd8);}
.configuration-panel[hidden]{display:none;}
.configuration-card-grid{display:grid;grid-template-columns:minmax(320px,1fr);gap:16px;}
.configuration-info-card{border:1px solid var(--border);border-radius:8px;background:var(--panel);padding:20px;}
.configuration-info-card h2{margin:0 0 8px;font-size:18px;}
.configuration-info-card p{margin:14px 0 8px;color:var(--text-secondary);line-height:1.55;}
.configuration-info-card small{display:block;color:var(--muted);line-height:1.5;}
.config-status{display:inline-block;padding:4px 9px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.04em;}
.config-status-pending{background:rgba(220,170,50,.14);}
.config-status-external{background:rgba(120,140,170,.14);}
.config-status-partial{background:rgba(60,140,210,.14);}
@media(max-width:700px){.configuration-sections{overflow-x:auto;flex-wrap:nowrap}.configuration-section{white-space:nowrap;}}

/* V2-USERS-03: selector de rol en usuarios */
.user-role{
    min-height:34px;
    min-width:135px;
    padding:6px 28px 6px 9px;
    border:1px solid var(--border-color);
    border-radius:5px;
    background:var(--input-bg,#0b1724);
    color:var(--text-primary);
    font:inherit;
}
.user-role:focus{outline:none;border-color:#3ea6ff;}
.user-role:disabled{opacity:.45;cursor:not-allowed;}

/* =========================================================
   V2-CONFIG-PROFILES-03
   Visualización de perfiles de alertas
   ========================================================= */
.configuration-settings-card{padding:20px;}
.configuration-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px;}
.configuration-card-head h2,.configuration-card-head h3{margin:0;font-size:18px;}
.configuration-card-head h3{font-size:17px;}
.configuration-card-head>div{display:flex;flex-direction:column;gap:7px;}
.configuration-note{color:var(--muted);font-size:12px;}
.configuration-settings-card>p{max-width:900px;margin:0 0 20px;color:var(--text-secondary);line-height:1.55;font-size:13px;}
.configuration-profile-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0 22px;}
.configuration-profile-card{position:relative;min-width:0;min-height:315px;padding:18px;border:1px solid var(--border);border-radius:9px;background:linear-gradient(180deg,var(--panel-2),var(--panel));box-shadow:var(--shadow);display:flex;flex-direction:column;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;}
.configuration-profile-card:hover{transform:translateY(-2px);border-color:#36506a;}
.configuration-profile-card.is-active{border-color:var(--accent);box-shadow:0 0 0 1px rgba(72,169,255,.12),var(--shadow);}
.configuration-profile-card.is-protected{background:linear-gradient(180deg,#102235,var(--panel));}
.profile-card-icon{width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:50%;margin-bottom:14px;background:#183149;color:var(--accent);font-size:22px;font-weight:800;border:1px solid #294761;}
.is-strict .profile-card-icon{background:rgba(243,199,95,.12);border-color:rgba(243,199,95,.35);color:var(--warn);}
.is-custom .profile-card-icon{background:rgba(72,213,151,.10);border-color:rgba(72,213,151,.30);color:var(--ok);}
.profile-card-main{display:flex;flex-direction:column;min-width:0;flex:1;}
.profile-card-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:26px;}
.profile-card-title strong{font-size:17px;}
.profile-card-main>small{display:block;margin-top:5px;min-height:34px;color:var(--muted);font-size:12px;line-height:1.4;}
.profile-metrics{margin-top:12px;border-top:1px solid var(--border);}
.profile-metrics>span{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid rgba(32,50,70,.75);font-size:12px;}
.profile-metrics>span:last-child{border-bottom:0;}
.profile-metrics b{color:var(--text);font-size:13px;order:2;}
.profile-metrics small{color:var(--text-secondary);font-size:11px;order:1;}
.profile-card-actions{display:flex;gap:7px;margin-top:auto;padding-top:14px;}
.profile-card-actions button{flex:1;min-width:0;}
.profile-card-actions .button-primary{white-space:nowrap;}
.profile-create-card{padding:0;border-style:dashed;background:rgba(13,25,38,.55);}
.profile-create-button{width:100%;height:100%;min-height:315px;border:0;border-radius:9px;background:transparent;color:var(--text);cursor:pointer;padding:25px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;font:inherit;}
.profile-create-button>span{width:50px;height:50px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#203246;border:1px solid #30465c;color:var(--text);font-size:28px;line-height:1;}
.profile-create-button strong{font-size:16px;}
.profile-create-button small{max-width:210px;color:var(--muted);font-size:12px;line-height:1.5;}
.profile-create-button:hover>span{border-color:var(--accent);color:var(--accent);}

.configuration-profile-editor{border:1px solid var(--border);border-radius:9px;background:rgba(17,31,46,.7);padding:18px;margin-top:4px;}
.configuration-profile-editor[hidden]{display:none;}
.configuration-settings-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.configuration-settings-form .form-field input:disabled{opacity:.72;cursor:not-allowed;background:#132131;color:var(--text-secondary);}
.configuration-settings-actions{grid-column:1/-1;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:4px;}
.configuration-inline-message{color:var(--text-secondary);font-size:12px;margin-left:4px;}
.configuration-settings-card>small{margin-top:2px;}
.config-status-external{color:#d7e3ef;background:rgba(120,140,170,.16);border:1px solid rgba(120,140,170,.24);}
.config-status-partial{color:#b8ddff;background:rgba(60,140,210,.14);border:1px solid rgba(60,140,210,.22);}
@media(max-width:1250px){
    .configuration-profile-list{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:760px){
    .configuration-profile-list{grid-template-columns:1fr;}
    .configuration-settings-form{grid-template-columns:1fr;}
    .configuration-settings-actions{grid-column:auto;}
    .configuration-card-head{flex-direction:column;}
}

/* =========================================================
   V2-UI-UNIFIED-01
   Lenguaje visual común para toda la Auditoría NOC
   ========================================================= */
body{background:radial-gradient(circle at 50% -15%,rgba(42,87,125,.16),transparent 34%),var(--bg);}
.topbar{background:rgba(8,20,32,.92);border-bottom:1px solid var(--border);backdrop-filter:blur(10px);}
.brand-main{letter-spacing:.12em;}
.main-nav{background:rgba(9,22,35,.88);border-bottom:1px solid var(--border);box-shadow:0 8px 24px rgba(0,0,0,.12);}
.nav-item{border:1px solid transparent;border-radius:7px;transition:all .18s ease;}
.nav-item:hover{background:rgba(255,255,255,.035);border-color:var(--border);color:var(--text);}
.nav-item.active{border-color:var(--accent);background:rgba(36,120,200,.10);color:var(--accent);box-shadow:0 0 0 1px rgba(72,169,255,.06);}
.content{padding-top:30px;padding-bottom:38px;}
.page-heading,.module-header{padding-bottom:18px;border-bottom:1px solid var(--border);}
.page-heading h1,.module-header h1{font-size:28px;letter-spacing:-.02em;}
.page-heading p,.module-header p{max-width:850px;line-height:1.55;color:var(--muted);}
.section-title{margin-top:30px;padding:0 2px 10px;border-bottom:1px solid rgba(32,50,70,.72);}
.section-title h2{font-size:14px;text-transform:uppercase;letter-spacing:.08em;}
.status-card,.info-card,.storage-card,.conversion-card,.traffic-table-card,.investigation-card,.placeholder-module,.configuration-info-card{box-shadow:0 8px 24px rgba(0,0,0,.12);transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;}
.status-card:hover,.info-card:hover,.storage-card:hover{transform:translateY(-1px);border-color:#314960;}
.status-card.ok,.status-card.warn,.status-card.danger{box-shadow:0 8px 24px rgba(0,0,0,.12);}
.storage-card,.info-card{background:linear-gradient(180deg,var(--panel-2),var(--panel));}
.conversion-card{background:linear-gradient(90deg,var(--panel),var(--panel-2));}
.traffic-source-badge,.alerts-source{background:rgba(255,255,255,.025);border-radius:999px;}
.traffic-filters,.traffic-table-card,.investigation-filters{box-shadow:0 8px 24px rgba(0,0,0,.10);background:linear-gradient(180deg,var(--panel-2),var(--panel));}
.traffic-filters{border-radius:9px;}
.form-field input,.form-field select,.user-role{transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;}
.form-field input:focus,.form-field select:focus,.user-role:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(72,169,255,.08);}
.button-primary,.button-secondary{transition:all .16s ease;}
.button-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 5px 14px rgba(22,120,200,.20);}
.button-secondary:hover:not(:disabled){border-color:#45617b;background:#142536;}
.traffic-summary-card{background:linear-gradient(180deg,var(--panel-2),var(--panel));box-shadow:0 8px 24px rgba(0,0,0,.10);transition:border-color .18s ease,transform .18s ease;}
.traffic-summary-card:hover{transform:translateY(-1px);border-color:#314960;}
.traffic-table-header,.investigation-card-head,.event-detail-head{background:rgba(255,255,255,.012);}
.traffic-table tbody tr:hover,.investigation-table tbody tr:hover{background:rgba(72,169,255,.035);}
.module.placeholder-module{display:none;min-height:270px;background:linear-gradient(180deg,var(--panel-2),var(--panel));flex-direction:column;justify-content:center;align-items:flex-start;}
.module.placeholder-module.active{display:flex;}
.placeholder-module h1{font-size:25px;margin-bottom:7px;}
.placeholder-module p{max-width:720px;line-height:1.6;margin:0;color:var(--text-secondary);}
.alerts-module .traffic-summary-card,.alerts-module .investigation-card{background:linear-gradient(180deg,var(--panel-2),var(--panel));}
.configuration-module .module-header{margin-bottom:20px;}
.configuration-sections{box-shadow:0 8px 24px rgba(0,0,0,.10);}
.configuration-panel{animation:configPanelIn .18s ease-out;}
@keyframes configPanelIn{from{opacity:.35;transform:translateY(3px)}to{opacity:1;transform:none}}
.footer{background:rgba(8,20,32,.35);}
@media(max-width:900px){
 .services-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
 .traffic-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
 .module-header,.page-heading{gap:14px;}
}
@media(max-width:650px){
 .services-grid,.traffic-summary-grid{grid-template-columns:1fr;}
 .content{padding:20px 14px 30px;}
 .page-heading h1,.module-header h1{font-size:24px;}
 .traffic-table-header{align-items:flex-start;flex-direction:column;}
 .traffic-pagination{width:100%;}
 .placeholder-module{min-height:220px;padding:24px;}
}

/* V2-TECH-DETAILS-01 */
.page-heading-actions,.module-header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.technical-toggle{border:1px solid var(--border);border-radius:7px;background:var(--panel-2);color:var(--muted);padding:7px 11px;font:inherit;font-size:11px;cursor:pointer;transition:.16s ease;}
.technical-toggle:hover,.technical-toggle[aria-expanded="true"]{color:var(--text);border-color:var(--accent);background:#132638;}
.technical-details{margin:0 0 18px;padding:15px 18px;border:1px solid var(--border);border-radius:9px;background:rgba(13,27,41,.72);box-shadow:var(--shadow);}
.technical-details>div{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:11px;}
.technical-details strong{font-size:13px;}
.technical-details span{color:var(--muted);font-size:11px;}
.technical-details dl{display:grid;grid-template-columns:145px 1fr;gap:7px 14px;margin:0;font-size:11px;line-height:1.5;}
.technical-details dt{color:var(--text-secondary);font-weight:600;}
.technical-details dd{margin:0;color:var(--text);}
@media(max-width:700px){.page-heading-actions,.module-header-actions{width:100%;justify-content:flex-start;}.technical-details dl{grid-template-columns:1fr;gap:2px;}.technical-details dt{margin-top:7px;}}

/* V2-NETFLOW-CONFIG-01 */
.netflow-config-grid{grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:18px;}
.netflow-summary-card{min-height:150px;justify-content:center;}
.netflow-summary-card strong{display:block;margin-top:8px;font-size:18px;color:var(--text);overflow-wrap:anywhere;}
.netflow-summary-card small{display:block;margin-top:7px;color:var(--muted);font-size:11px;line-height:1.45;}
.netflow-summary-card .card-label{font-size:10px;letter-spacing:.07em;text-transform:uppercase;}
@media(max-width:1250px){.netflow-config-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:760px){.netflow-config-grid{grid-template-columns:1fr;}}

/* V2-FASTNETMON-CONFIG-02 */
.fastnetmon-overview-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.fastnetmon-summary-note{margin:14px 0 0;padding:12px 14px;border:1px solid var(--border);border-radius:8px;background:rgba(243,199,95,.06);color:var(--text-secondary);font-size:12px;line-height:1.5;}
@media(max-width:1000px){.fastnetmon-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:650px){.fastnetmon-overview-grid{grid-template-columns:1fr;}}

/* V2-NOTIFICATIONS-01 */
.notifications-overview-grid{grid-template-columns:repeat(5,minmax(0,1fr));}
.notifications-summary-note{margin:14px 0 0;padding:12px 14px;border:1px solid var(--border);border-radius:8px;background:rgba(90,150,220,.06);color:var(--text-secondary);font-size:12px;line-height:1.5;}
@media(max-width:1100px){.notifications-overview-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:700px){.notifications-overview-grid{grid-template-columns:1fr;}}

/* V2-STORAGE-01 */
.storage-overview-grid{grid-template-columns:repeat(5,minmax(0,1fr));}
.storage-summary-note{margin:14px 0 0;padding:12px 14px;border:1px solid var(--border);border-radius:8px;background:rgba(90,150,220,.06);color:var(--text-secondary);font-size:12px;line-height:1.5;}
.alerts-notifications-section{margin:18px 0;}
.notifications-card{margin:0;}
@media(max-width:1100px){.storage-overview-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:700px){.storage-overview-grid{grid-template-columns:1fr;}}

/* V2-FASTNETMON-COMPACT-04 */
/* Resumen: cinco indicadores en una sola línea en escritorio. */
.fastnetmon-summary-compact{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:12px 0 16px;}
.fastnetmon-summary-compact .traffic-summary-card{min-height:82px;height:82px;padding:12px 14px;display:flex;flex-direction:column;justify-content:center;}
.fastnetmon-summary-compact .traffic-summary-card span{font-size:9px;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fastnetmon-summary-compact .traffic-summary-card strong{margin-top:6px;font-size:18px;line-height:1.1;overflow-wrap:anywhere;}
/* Parámetros técnicos: compactos, cuatro por línea y sin tarjetas gigantes. */
.fastnetmon-overview-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:10px 0 16px;}
.fastnetmon-overview-grid .configuration-profile-card{min-height:74px;height:74px;padding:11px 13px;justify-content:center;}
.fastnetmon-overview-grid .configuration-profile-card:hover{transform:none;}
.fastnetmon-overview-grid .profile-card-main{justify-content:center;}
.fastnetmon-overview-grid .profile-card-label{font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.fastnetmon-overview-grid .profile-card-main strong{margin-top:5px;font-size:15px;line-height:1.1;overflow-wrap:anywhere;}
@media(max-width:1150px){.fastnetmon-summary-compact{grid-template-columns:repeat(5,minmax(120px,1fr));}.fastnetmon-overview-grid{grid-template-columns:repeat(4,minmax(120px,1fr));}}
@media(max-width:760px){.fastnetmon-summary-compact{grid-template-columns:repeat(2,minmax(0,1fr));}.fastnetmon-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:500px){.fastnetmon-summary-compact,.fastnetmon-overview-grid{grid-template-columns:1fr;}}

/* V2-SECURITY-01 */
.security-overview-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
.security-summary-note{margin:14px 0 0;padding:12px 14px;border:1px solid var(--border);border-radius:8px;background:rgba(90,150,220,.06);color:var(--text-secondary);font-size:12px;line-height:1.5;}
.security-audit-card{margin-top:18px;}
@media(max-width:1100px){.security-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:700px){.security-overview-grid{grid-template-columns:1fr;}}

/* V2-SECURITY-05: detalle expandible y desplazamiento horizontal */
.security-audit-card .table-wrapper{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;}
.security-audit-card .investigation-table{min-width:1280px;}
.audit-detail-cell{min-width:170px;white-space:normal !important;vertical-align:top;}
.audit-detail-cell details{max-width:520px;}
.audit-detail-cell summary{display:inline-block;cursor:pointer;color:var(--accent);font-size:12px;font-weight:600;}
.audit-detail-content{margin-top:8px;max-width:520px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.45;color:var(--text-secondary);font-size:12px;}
.audit-detail-empty{color:var(--muted);}

/* V2-SECURITY-06: filtros y detalle legible */
.security-audit-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:16px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:rgba(8,20,32,.28);}
.security-audit-filters .form-field{min-width:0;}
.security-audit-filters .traffic-actions{grid-column:1/-1;display:flex;align-items:center;gap:8px;padding-top:2px;}
.security-audit-filters .audit-search-field{grid-column:span 2;}
.audit-detail-cell{min-width:210px;}
.audit-detail-cell details{display:block;max-width:none;}
.audit-detail-cell details[open]{padding:8px 0 2px;}
.audit-detail-content{min-width:320px;max-width:520px;max-height:180px;overflow:auto;padding:9px 10px;border:1px solid var(--border);border-radius:6px;background:rgba(8,17,28,.72);}
@media(max-width:900px){.security-audit-filters{grid-template-columns:repeat(2,minmax(0,1fr));}.security-audit-filters .audit-search-field{grid-column:span 2;}}
@media(max-width:600px){.security-audit-filters{grid-template-columns:1fr;}.security-audit-filters .audit-search-field{grid-column:auto;}.security-audit-filters .traffic-actions{grid-column:auto;}}
.audit-detail-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(3,9,15,.72);backdrop-filter:blur(3px);}
.audit-detail-dialog{width:min(760px,calc(100vw - 48px));max-height:min(620px,calc(100vh - 48px));display:flex;flex-direction:column;border:1px solid var(--border);border-radius:10px;background:linear-gradient(180deg,var(--panel-2),var(--panel));box-shadow:0 18px 60px rgba(0,0,0,.45);}
.audit-detail-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);}
.audit-detail-dialog-content{padding:16px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text);font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
.audit-detail-dialog-content:empty{min-height:80px;}

/* =========================================================
   V2-FILTER-LAYOUT-02
   Filtros en dos niveles: contexto arriba y criterios abajo
   ========================================================= */
@media (min-width:1101px) {
    .traffic-filters,
    .investigation-filters {
        grid-template-columns:minmax(150px,.9fr) minmax(110px,.6fr) minmax(260px,1.45fr) minmax(250px,1.35fr);
    }
}

@media (max-width:1100px) {
    .traffic-filters,
    .investigation-filters { grid-template-columns:repeat(2,minmax(180px,1fr)); }
    .traffic-filters > .form-field:nth-child(n),
    .traffic-filters .traffic-actions,
    .investigation-filters > .investigation-ip-field,
    .investigation-filters .investigation-actions { grid-column:auto; grid-row:auto; }
    .traffic-filters .traffic-actions,
    .investigation-filters .investigation-actions { grid-column:1/-1; }
    .investigation-filters > .investigation-ip-field { grid-column:1/-1; }
}

@media (max-width:700px) {
    .traffic-filters,
    .investigation-filters { grid-template-columns:1fr; }
    .traffic-filters > .form-field:nth-child(n),
    .traffic-filters .traffic-actions,
    .investigation-filters > .investigation-ip-field,
    .investigation-filters .investigation-actions { grid-column:auto; grid-row:auto; }
    .traffic-external-status,
    .investigation-external-status { white-space:normal; }
}
/* V2-FILTER-LAYOUT-02: fin */


/* V2-REPORTS-01 */
.reports-module .module-header{align-items:center;gap:18px}.reports-filters{margin-bottom:14px}.report-preview-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:16px 0;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--panel)}.report-preview-head>div:first-child{display:flex;flex-direction:column;gap:5px}.report-preview-head span{color:var(--muted);font-size:12px}.report-alerts-card{margin-top:16px}.report-download{display:inline-block;margin-left:8px;color:var(--accent);font-weight:700;text-decoration:none}.report-download:hover{text-decoration:underline}
@media(max-width:760px){.report-preview-head{align-items:flex-start;flex-direction:column}.report-preview-head .traffic-actions{width:100%}.report-preview-head button{flex:1}}

/* V2-CATALOG-01 */
.catalog-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0;}
.catalog-toolbar{display:grid;grid-template-columns:minmax(260px,1.8fr) minmax(160px,.7fr) auto;gap:12px;align-items:end;padding:16px;border:1px solid var(--border-color);border-radius:8px;background:var(--panel-bg);margin-bottom:16px;}
.catalog-toolbar-actions{align-self:end;}
.catalog-search-shell{position:relative;min-width:0;}
.catalog-search-shell>label{display:block;margin:0 0 8px;color:#f4f8ff;font-size:14px;font-weight:500;letter-spacing:.01em;}
.catalog-search-shell>input{display:block;width:100%;box-sizing:border-box;min-height:50px;padding:10px 16px 10px 52px;border:2px solid #3ea6ff;border-radius:9px;background:#1b3554;color:#ffffff;font-size:16px;font-weight:500;box-shadow:0 0 0 2px rgba(62,166,255,.08),inset 0 1px 0 rgba(255,255,255,.04);outline:none;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;}
.catalog-search-shell>input::placeholder{color:#b8c7d9;opacity:1;}
.catalog-search-shell>input:focus{border-color:#66b7ff;background:#203e61;box-shadow:0 0 0 3px rgba(62,166,255,.18),0 8px 24px rgba(0,0,0,.18);}
.catalog-search-shell:before{content:'⌕';position:absolute;left:17px;bottom:8px;width:24px;height:30px;display:flex;align-items:center;justify-content:center;color:#ffffff;font-size:30px;font-weight:400;line-height:1;pointer-events:none;z-index:2;transform:rotate(-20deg);}
.catalog-search-results{position:absolute;z-index:50;left:0;right:0;top:100%;margin-top:5px;border:1px solid var(--border-color);border-radius:8px;background:var(--panel-bg);box-shadow:0 12px 30px rgba(0,0,0,.28);overflow:hidden;max-height:430px;overflow-y:auto;}
.catalog-search-group-title{padding:8px 12px;font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--text-secondary);background:rgba(255,255,255,.025);border-bottom:1px solid var(--border-color);}
.catalog-search-item{display:flex;width:100%;align-items:center;justify-content:space-between;gap:16px;padding:11px 13px;border:0;border-bottom:1px solid var(--border-color);background:transparent;color:var(--text);text-align:left;cursor:pointer;font:inherit;}
.catalog-search-item:hover{background:rgba(108,182,255,.08);}
.catalog-search-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.catalog-search-item small{flex:0 0 auto;color:var(--text-secondary);font-size:11px;}
.catalog-search-empty{padding:14px;color:var(--text-secondary);font-size:12px;}
.catalog-editor{border:1px solid var(--border-color);border-radius:8px;background:var(--panel-bg);overflow:hidden;margin-bottom:10px;}
.catalog-drawer-summary,.catalog-list-summary{display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;list-style:none;padding:12px 16px;font-size:13px;font-weight:700;color:var(--text);}
.catalog-drawer-summary::-webkit-details-marker,.catalog-list-summary::-webkit-details-marker{display:none;}
.catalog-drawer-summary:before,.catalog-list-summary:before{content:'+';display:inline-flex;width:22px;height:22px;align-items:center;justify-content:center;border:1px solid var(--border-color);border-radius:50%;color:var(--accent);font-size:15px;flex:0 0 auto;}
.catalog-editor[open]>.catalog-drawer-summary:before,.catalog-services-list[open]>.catalog-list-summary:before{content:'−';}
.catalog-drawer-summary span,.catalog-list-summary span{margin-right:auto;color:var(--text-secondary);font-weight:600;}
.catalog-drawer-summary strong,.catalog-list-summary strong{color:var(--text);font-size:13px;}
.catalog-services-list{overflow:hidden;margin-top:10px;}
.catalog-services-list>.investigation-card-head{padding:0 16px 12px;}
.catalog-services-list>.table-wrapper{padding:0 16px 16px;}
.catalog-service-client-context{grid-column:1/-1;display:flex;align-items:center;gap:10px;min-height:54px;padding:10px 14px;border:1px solid var(--border-color);border-radius:8px;background:#101e2d;}
.catalog-service-client-context.selected{border-color:#3ea6ff;background:#142b44;box-shadow:inset 3px 0 0 #3ea6ff;}
.catalog-context-label{font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--text-secondary);}
.catalog-service-client-context strong{color:#f4f8ff;font-size:14px;}
.catalog-service-client-context small{margin-left:auto;color:#aebfd1;font-size:11px;}
.catalog-row-actions{display:flex;gap:6px;justify-content:flex-end;}
.catalog-row-actions .button-secondary{min-height:30px;padding:5px 9px;font-size:11px;}
.catalog-form{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px;padding:18px;align-items:end;}
.catalog-form .form-field-wide{grid-column:span 2;}
.catalog-form .traffic-actions{grid-column:1/-1;}
.catalog-import-card{margin-bottom:16px;}
.catalog-import-form{display:grid;grid-template-columns:minmax(280px,1fr) auto;gap:12px;padding:18px;align-items:end;}
.catalog-preview{min-height:20px;padding:0 18px 16px;color:var(--text-secondary);font-size:12px;}
.catalog-message{min-height:20px;margin:12px 0;color:var(--text-secondary);font-size:13px;}
.catalog-state{display:inline-block;padding:3px 7px;border-radius:4px;border:1px solid var(--border-color);font-size:10px;font-weight:700;}
.catalog-state.active{color:var(--ok);border-color:rgba(72,213,151,.35);}
.catalog-state.inactive{color:var(--warn);border-color:rgba(243,199,95,.35);}
.catalog-pagination{display:flex;gap:8px;}
.catalog-table td:nth-child(1),.catalog-table td:nth-child(3),.catalog-table td:nth-child(4){font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
.catalog-table td:last-child{display:flex;gap:6px;}
.catalog-table .button-secondary{min-height:32px;padding:6px 9px;font-size:11px;}
.catalog-table thead th{white-space:nowrap;}
.catalog-sort{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:inherit;font:inherit;font-weight:700;cursor:pointer;padding:6px 4px;width:100%;text-align:left;}
.catalog-sort:hover,.catalog-sort.active{color:var(--accent,#6cb6ff);}
.catalog-sort.active{background:rgba(108,182,255,.08);border-radius:5px;}
.catalog-sort:focus-visible{outline:2px solid var(--accent,#6cb6ff);outline-offset:2px;border-radius:4px;}
@media(max-width:1000px){.catalog-toolbar,.catalog-import-form{grid-template-columns:1fr 1fr;}.catalog-form{grid-template-columns:repeat(2,minmax(150px,1fr));}.catalog-form .form-field-wide{grid-column:span 2;}}
@media(max-width:700px){.catalog-summary-grid,.catalog-toolbar,.catalog-import-form,.catalog-form{grid-template-columns:1fr;}.catalog-form .form-field-wide{grid-column:auto;}.catalog-service-client-context{align-items:flex-start;flex-direction:column;}.catalog-service-client-context small{margin-left:0;}.catalog-table td:last-child{display:table-cell;}.catalog-table td:last-child .button-secondary{margin:2px;}}

.router-zones-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;font-family:inherit;white-space:normal;}
.router-zone-item{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,.02);}
.router-zone-index{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;border-radius:50%;background:rgba(45,156,219,.12);color:var(--accent);font-size:11px;}
.router-zone-item strong{font-family:inherit;font-size:14px;color:var(--text);}
.router-zone-item span:last-child{font-size:11px;color:var(--muted);}
@media(max-width:700px){.router-zones-list{grid-template-columns:1fr;}}

.router-zones-checklist{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:8px;max-height:230px;overflow-y:auto;padding:10px;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,.015);}
.router-zone-check{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid var(--border);border-radius:7px;background:rgba(255,255,255,.015);cursor:pointer;user-select:none;}
.router-zone-check:hover{background:rgba(45,156,219,.08);border-color:rgba(45,156,219,.35);}
.router-zone-check input{width:17px;height:17px;margin:0;accent-color:var(--accent);cursor:pointer;}
.router-zone-check span{font-size:13px;color:var(--text);}
@media(max-width:700px){.router-zones-checklist{grid-template-columns:1fr;}}

.router-zones-checklist{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:8px;max-height:230px;overflow-y:auto;padding:10px;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,.015);}
.router-zone-check{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid var(--border);border-radius:7px;background:rgba(255,255,255,.015);cursor:pointer;user-select:none;}
.router-zone-check:hover{background:rgba(45,156,219,.08);border-color:rgba(45,156,219,.35);}
.router-zone-check input{width:17px;height:17px;margin:0;accent-color:var(--accent);cursor:pointer;}
.router-zone-check span{font-size:13px;color:var(--text);}
@media(max-width:700px){.router-zones-checklist{grid-template-columns:1fr;}}


/* V2-FASTNETMON-MONTHLY-REPORT-01 */
.fnm-report-filters{display:grid;grid-template-columns:minmax(150px,220px) minmax(150px,220px) 1fr;gap:12px;align-items:end;margin:16px 0;}
.fnm-report-filters .traffic-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.fnm-report-summary{margin:12px 0;}
.fnm-report-table-wrap{max-height:65vh;overflow:auto;}
#fnmReportTable{min-width:1450px;}
#fnmReportTable th{position:sticky;top:0;z-index:1;background:var(--surface, #111827);}
#fnmReportTable td{white-space:nowrap;}
#fnmReportTable .fnm-evidence-filename{white-space:normal;overflow-wrap:anywhere;min-width:260px;max-width:420px;}
@media(max-width:760px){.fnm-report-filters{grid-template-columns:1fr;}.fnm-report-filters .traffic-actions{grid-column:auto;}.fnm-report-filters .traffic-actions button{flex:1;}}
@media print{
 body.fnm-report-printing *{visibility:hidden!important;}
 body.fnm-report-printing .fnm-monthly-report-card,
 body.fnm-report-printing .fnm-monthly-report-card *{visibility:visible!important;}
 body.fnm-report-printing .fnm-monthly-report-card{position:absolute;left:0;top:0;width:100%;background:#fff!important;color:#000!important;}
 body.fnm-report-printing .fnm-report-filters,body.fnm-report-printing #fnmReportMessage{display:none!important;}
 body.fnm-report-printing .fnm-report-table-wrap{max-height:none;overflow:visible;}
 body.fnm-report-printing #fnmReportTable{min-width:0;width:100%;font-size:8px;border-collapse:collapse;}
 body.fnm-report-printing #fnmReportTable th,body.fnm-report-printing #fnmReportTable td{position:static;background:#fff!important;color:#000!important;border:1px solid #777;padding:3px;white-space:normal;overflow-wrap:anywhere;}
}