:root {
    color-scheme: dark;

    --background: #07111f;
    --background-soft: #0b1828;
    --surface: #102034;
    --surface-soft: #14273d;
    --surface-light: #193049;

    --border: rgba(142, 196, 229, 0.14);

    --primary: #3dccff;
    --primary-soft: #91e5ff;
    --success: #42d984;
    --warning: #ffbb45;
    --danger: #ff6577;

    --text: #f3f8fc;
    --muted: #8fa9bd;

    --shadow: 0 24px 70px rgba(0, 0, 0, 0.26);
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    color: var(--text);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    background: var(--background);
}

button,
input {
    font: inherit;
}

/* Login */

.login-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(420px, 0.85fr);
}

.login-visual {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 64px;
    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(61, 204, 255, 0.19),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #06101d,
            #0b1e32 55%,
            #071420
        );
}

.login-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.13;
    background-image:
        linear-gradient(
            rgba(103, 192, 229, 0.2) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(103, 192, 229, 0.2) 1px,
            transparent 1px
        );
    background-size: 54px 54px;
}

.visual-content {
    position: relative;
    z-index: 1;
    width: min(720px, 100%);
}

.brand,
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 13px;
}

.brand strong,
.sidebar-brand strong {
    display: block;
    font-size: 20px;
}

.brand span,
.sidebar-brand span {
    display: block;
    color: var(--primary);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.brand-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(61, 204, 255, 0.4);
    border-radius: 14px;
    color: var(--primary-soft);
    font-size: 24px;
    font-weight: 800;
    background: rgba(61, 204, 255, 0.09);
    box-shadow: 0 0 28px rgba(61, 204, 255, 0.12);
}

.network-illustration {
    position: relative;
    width: 330px;
    height: 330px;
    display: grid;
    place-items: center;
    margin: 52px auto;
}

.network-ring {
    position: absolute;
    border: 1px solid rgba(61, 204, 255, 0.23);
    border-radius: 50%;
}

.ring-one {
    width: 190px;
    height: 190px;
}

.ring-two {
    width: 310px;
    height: 310px;
}

.network-core {
    width: 96px;
    height: 96px;
    display: grid;
    place-items: center;
    border-radius: 30px;
    color: #06111c;
    font-size: 46px;
    font-weight: 900;
    background: linear-gradient(
        145deg,
        var(--primary-soft),
        var(--primary)
    );
    box-shadow:
        0 0 70px rgba(61, 204, 255, 0.34);
}

.network-node {
    position: absolute;
    width: 15px;
    height: 15px;
    border: 3px solid #0b1b2c;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 20px var(--primary);
}

.node-one {
    top: 4px;
}

.node-two {
    right: 24px;
    top: 82px;
}

.node-three {
    bottom: 21px;
    left: 55px;
}

.node-four {
    left: 18px;
    top: 108px;
}

.visual-message {
    max-width: 620px;
}

.visual-message p,
.login-eyebrow,
.dashboard-eyebrow,
.panel-header span {
    color: var(--primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2em;
}

.visual-message h1 {
    margin: 13px 0 17px;
    font-size: clamp(34px, 5vw, 56px);
    line-height: 1.04;
    letter-spacing: -0.045em;
}

.visual-message > span {
    color: var(--muted);
    font-size: 16px;
}

.login-panel {
    display: grid;
    place-items: center;
    padding: 48px;
    background: #091522;
}

.login-card {
    width: min(410px, 100%);
}

.mobile-brand {
    display: none;
}

.login-card h2 {
    margin: 10px 0 8px;
    font-size: 38px;
    letter-spacing: -0.035em;
}

.login-description {
    margin: 0 0 32px;
    color: var(--muted);
    line-height: 1.6;
}

.form-alert {
    margin-bottom: 20px;
    padding: 13px 15px;
    border: 1px solid rgba(255, 101, 119, 0.24);
    border-radius: 12px;
    color: #ffc2ca;
    font-size: 13px;
    background: rgba(255, 101, 119, 0.08);
}

.login-form {
    display: grid;
    gap: 20px;
}

.form-field {
    display: grid;
    gap: 9px;
}

.form-field label {
    color: #c6d5df;
    font-size: 13px;
    font-weight: 700;
}

.form-field input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    outline: none;
    color: var(--text);
    background: var(--surface);
    transition:
        border-color 150ms ease,
        box-shadow 150ms ease;
}

.form-field input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(61, 204, 255, 0.1);
}

.primary-button {
    width: 100%;
    margin-top: 5px;
    padding: 14px 20px;
    border: 0;
    border-radius: 12px;
    color: #04111c;
    font-weight: 900;
    cursor: pointer;
    background: linear-gradient(
        135deg,
        var(--primary-soft),
        var(--primary)
    );
    box-shadow: 0 14px 34px rgba(61, 204, 255, 0.18);
}

.security-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 25px;
    color: var(--muted);
    font-size: 12px;
}

.security-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 13px var(--success);
}

.login-footer {
    margin: 40px 0 0;
    color: #637c90;
    font-size: 11px;
    text-align: center;
}

/* Aplicación */

.application-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 24px 18px;
    border-right: 1px solid var(--border);
    background: #091522;
}

.sidebar-brand {
    padding: 0 8px 25px;
}

.sidebar-menu {
    display: grid;
    gap: 5px;
    margin-top: 15px;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 14px;
    border-radius: 10px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
    transition:
        color 150ms ease,
        background 150ms ease;
}

.menu-item:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.035);
}

.menu-item.active {
    color: var(--primary-soft);
    background: rgba(61, 204, 255, 0.1);
}

.menu-icon {
    width: 20px;
    color: var(--primary);
    font-size: 17px;
    text-align: center;
}

.sidebar-user {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding: 15px 8px 0;
    border-top: 1px solid var(--border);
}

.user-avatar {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #07131e;
    font-weight: 900;
    background: var(--primary);
}

.user-info {
    min-width: 0;
}

.user-info strong,
.user-info span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.user-info span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}

.logout-button {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 9px;
    color: var(--muted);
    cursor: pointer;
    background: transparent;
}

.logout-button:hover {
    color: var(--danger);
    background: rgba(255, 101, 119, 0.08);
}

.dashboard-main {
    min-width: 0;
    padding: 34px;
    background:
        radial-gradient(
            circle at 78% 5%,
            rgba(61, 204, 255, 0.08),
            transparent 25%
        ),
        var(--background);
}

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

.dashboard-header h1 {
    margin: 8px 0;
    font-size: 38px;
    letter-spacing: -0.04em;
}

.dashboard-header p {
    margin: 0;
    color: var(--muted);
}

.header-date {
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--muted);
    font-size: 12px;
    background: var(--surface);
}

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

.summary-card {
    min-width: 0;
    padding: 21px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: linear-gradient(
        145deg,
        var(--surface),
        rgba(16, 32, 52, 0.72)
    );
    box-shadow: var(--shadow);
}

.summary-card > span,
.summary-card small {
    display: block;
    color: var(--muted);
}

.summary-card > span {
    font-size: 12px;
}

.summary-card strong {
    display: block;
    margin: 12px 0 8px;
    font-size: 27px;
}

.summary-card small {
    font-size: 11px;
}

.summary-card.featured strong {
    color: var(--success);
}

.summary-card.danger strong {
    color: var(--danger);
}

.summary-card.warning strong {
    color: var(--warning);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(310px, 0.7fr);
    gap: 16px;
    margin-top: 16px;
}

.dashboard-panel {
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.panel-header h2 {
    margin: 7px 0 0;
    font-size: 18px;
}

.panel-header button,
.record-count {
    padding: 8px 11px;
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--muted);
    font-size: 11px;
    background: var(--surface-soft);
}

.empty-chart {
    padding-top: 27px;
}

.chart-bars {
    height: 180px;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding: 0 9px;
    border-bottom: 1px solid var(--border);
}

.chart-bars span {
    flex: 1;
    min-width: 12px;
    border-radius: 7px 7px 0 0;
    background: linear-gradient(
        to top,
        rgba(61, 204, 255, 0.18),
        rgba(61, 204, 255, 0.76)
    );
}

.empty-chart p {
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}

.activity-list {
    display: grid;
    gap: 15px;
    margin-top: 23px;
}

.activity-item {
    display: grid;
    grid-template-columns: 9px minmax(0, 1fr);
    gap: 12px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border);
}

.activity-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.activity-indicator {
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 50%;
}

.activity-indicator.green {
    background: var(--success);
}

.activity-indicator.blue {
    background: var(--primary);
}

.activity-indicator.yellow {
    background: var(--warning);
}

.activity-item strong {
    font-size: 13px;
}

.activity-item p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 11px;
}

.suspended-panel {
    margin-top: 16px;
}

.empty-table {
    padding: 42px 20px;
    text-align: center;
}

.empty-table strong {
    font-size: 15px;
}

.empty-table p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 12px;
}

@media (max-width: 1050px) {
    .login-page {
        grid-template-columns: 1fr;
    }

    .login-visual {
        display: none;
    }

    .login-panel {
        min-height: 100vh;
    }

    .mobile-brand {
        display: flex;
        align-items: center;
        gap: 13px;
        margin-bottom: 42px;
    }

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

    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .application-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: relative;
        height: auto;
    }

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

    .sidebar-user {
        margin-top: 25px;
    }

    .dashboard-main {
        padding: 24px 18px;
    }

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

    .dashboard-header {
        display: block;
    }

    .header-date {
        width: fit-content;
        margin-top: 18px;
    }
    .customer-header-actions {
        width: 100%;

        margin-top: 18px;
        margin-left: 0;

        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

/* Clientes */

/* =========================================================
   ACCIONES DEL ENCABEZADO DE CLIENTES
   ========================================================= */

/*
 * El botón de alta y el contador forman una sola unidad
 * visual en el extremo derecho del encabezado.
 */
.customer-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 14px;

    margin-left: auto;
}

.header-count {
    min-width: 150px;
    padding: 13px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    text-align: right;
    background: var(--surface);
}

.header-count strong,
.header-count span {
    display: block;
}

.header-count strong {
    color: var(--primary-soft);
    font-size: 22px;
}

.header-count span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}

.customer-toolbar {
    margin-top: 28px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
}

.customer-filters {
    display: grid;
    grid-template-columns:
        minmax(240px, 1.8fr)
        minmax(180px, 1fr)
        minmax(130px, 0.7fr)
        auto
        auto;
    align-items: end;
    gap: 12px;
}

.search-field,
.filter-field {
    display: grid;
    gap: 7px;
}

.search-field label,
.filter-field label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.search-field input,
.filter-field select {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    outline: none;
    color: var(--text);
    background: var(--background-soft);
}

.search-field input:focus,
.filter-field select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(61, 204, 255, 0.09);
}

.filter-button,
.clear-filter-button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 17px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.filter-button {
    border: 0;
    color: #04111c;
    cursor: pointer;
    background: var(--primary);
}

.clear-filter-button {
    border: 1px solid var(--border);
    color: var(--muted);
    background: transparent;
}

.customer-table-panel {
    margin-top: 16px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

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

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

.customer-table th,
.customer-table td {
    padding: 16px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}

.customer-table th {
    color: var(--muted);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.018);
}

.customer-table td {
    font-size: 12px;
}

.customer-table tbody tr {
    transition: background 150ms ease;
}

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

.customer-row-danger {
    background: rgba(255, 101, 119, 0.07);
}

.customer-row-warning {
    background: rgba(255, 187, 69, 0.06);
}

.contract-number {
    color: var(--primary-soft);
}

.table-secondary,
.inactive-label {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 10px;
}

.inactive-label {
    color: var(--danger);
}

.empty-value {
    color: var(--muted);
}

.status-badge {
    display: inline-flex;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
    background: rgba(143, 169, 189, 0.1);
}

.status-active {
    color: #a7f3c3;
    background: rgba(66, 217, 132, 0.11);
}

.status-active_overdue {
    color: #ffe09a;
    background: rgba(255, 187, 69, 0.12);
}

.status-suspension_pending {
    color: #ffc383;
    background: rgba(255, 139, 61, 0.12);
}

.status-suspended {
    color: #ffb0ba;
    background: rgba(255, 101, 119, 0.13);
}

.status-reactivation_pending {
    color: #a9ddff;
    background: rgba(61, 156, 255, 0.13);
}

.status-canceled,
.status-empty,
.status-pending_installation {
    color: #b3c2cd;
    background: rgba(143, 169, 189, 0.1);
}

.empty-customers {
    padding: 42px 20px;
    text-align: center;
}

.empty-customers p {
    margin: 7px 0 0;
    color: var(--muted);
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 16px;
    color: var(--muted);
    font-size: 11px;
}

.pagination a {
    color: var(--primary);
    font-weight: 800;
    text-decoration: none;
}

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

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

    .header-count {
        width: fit-content;
        margin-top: 18px;
        text-align: left;
    }
}

/* Formulario de clientes */

.secondary-action,
.primary-action {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.secondary-action {
    border: 1px solid var(--border);
    color: var(--muted);
    background: var(--surface);
}

.primary-action {
    border: 0;
    color: #04111c;
    cursor: pointer;
    background: var(--primary);
}

.customer-form {
    display: grid;
    gap: 16px;
    margin-top: 28px;
}

.form-section {
    padding: 23px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.form-section-header {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 22px;
}

.form-section-header > span {
    width: 34px;
    height: 34px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 10px;
    color: var(--primary);
    font-size: 11px;
    font-weight: 900;
    background: rgba(61, 204, 255, 0.1);
}

.form-section-header h2 {
    margin: 0;
    font-size: 17px;
}

.form-section-header p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 11px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
}

.form-grid-wide {
    grid-column: 1 / -1;
}

.form-control-group {
    display: grid;
    align-content: start;
    gap: 7px;
}

.form-control-group label {
    color: #c8d7e1;
    font-size: 11px;
    font-weight: 750;
}

.required-mark {
    color: var(--danger);
}

.form-control-group input,
.form-control-group select,
.form-control-group textarea {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    outline: none;
    color: var(--text);
    background: var(--background-soft);
}

.form-control-group textarea {
    resize: vertical;
}

.form-control-group input:focus,
.form-control-group select:focus,
.form-control-group textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(61, 204, 255, 0.09);
}

.form-control-group small {
    color: var(--muted);
    font-size: 10px;
}

.field-error {
    display: block;
    color: #ffabb5;
    font-size: 10px;
}

.checkbox-control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: #c8d7e1;
    font-size: 11px;
    background: var(--background-soft);
}

.checkbox-control input {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

.form-alert p {
    margin: 0;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 11px;
    padding: 18px 0 5px;
}

@media (max-width: 720px) {
    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-grid-wide {
        grid-column: auto;
    }
}

/* Ficha del cliente */

.message-list {
    margin-bottom: 18px;
}

.system-message {
    padding: 13px 16px;
    border: 1px solid rgba(66, 217, 132, 0.22);
    border-radius: 11px;
    color: #b8f5cd;
    font-size: 12px;
    background: rgba(66, 217, 132, 0.08);
}

.customer-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 28px;
}

.profile-panel {
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

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

.profile-panel-header span:first-child,
.network-route > span {
    color: var(--primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.profile-panel-header h2 {
    margin: 6px 0 0;
    font-size: 17px;
}

.profile-data,
.service-data {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    margin: 0;
}

.profile-data div,
.service-data div {
    min-width: 0;
}

.profile-data dt,
.service-data dt {
    color: var(--muted);
    font-size: 10px;
}

.profile-data dd,
.service-data dd {
    margin: 5px 0 0;
    overflow-wrap: anywhere;
    font-size: 12px;
    font-weight: 700;
}

.address-card strong {
    font-size: 14px;
}

.address-card p {
    margin: 7px 0 17px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
}

.address-card span {
    color: var(--primary);
    font-size: 10px;
    font-weight: 800;
}

.services-panel,
.notes-panel {
    margin-top: 16px;
}

.service-card {
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--background-soft);
}

.service-card + .service-card {
    margin-top: 13px;
}

.service-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 18px;
}

.service-card-header strong,
.service-card-header span {
    display: block;
}

.service-card-header strong {
    color: var(--primary-soft);
    font-size: 14px;
}

.service-card-header div > span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
}

.network-route,
.network-empty {
    margin-top: 19px;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: rgba(61, 204, 255, 0.035);
}

.route-items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-top: 12px;
    font-size: 11px;
}

.route-items i {
    color: var(--primary);
    font-style: normal;
}

.onu-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 12px;
    color: var(--muted);
    font-size: 10px;
}

.network-empty {
    color: var(--muted);
    font-size: 11px;
}

.notes-panel > p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.7;
}

@media (max-width: 850px) {
    .customer-profile-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .profile-data,
    .service-data {
        grid-template-columns: 1fr;
    }
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.customer-name-link {
    color: var(--text);
    font-weight: 800;
    text-decoration: none;
}

.customer-name-link:hover {
    color: var(--primary);
}

.payment-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 28px;
}

.payment-customer-name {
    font-size: 20px !important;
}

.payment-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(330px, 0.75fr);
    gap: 18px;
    align-items: start;
    margin-top: 18px;
}

.payment-form-panel,
.pending-charges-panel {
    min-width: 0;
}

.payment-form {
    margin-top: 24px;
}

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

.payment-field-wide {
    grid-column: 1 / -1;
}

.form-control {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: 11px;
    outline: none;
    color: var(--text);
    background: var(--surface-soft);
    transition:
        border-color 150ms ease,
        box-shadow 150ms ease;
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow:
        0 0 0 4px rgba(61, 204, 255, 0.1);
}

.form-control option {
    color: var(--text);
    background: var(--surface);
}

textarea.form-control {
    resize: vertical;
}

.field-help {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.5;
}

.field-error {
    display: block;
    margin-top: 7px;
    color: #ff9daa;
    font-size: 12px;
}

.form-error-summary {
    margin-top: 20px;
    padding: 13px 15px;
    border: 1px solid rgba(255, 101, 119, 0.28);
    border-radius: 11px;
    color: #ffc2ca;
    background: rgba(255, 101, 119, 0.08);
}

.form-error-summary p {
    margin: 0;
}

.payment-confirmation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-top: 27px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
}

.payment-confirmation strong {
    font-size: 13px;
}

.payment-confirmation p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.5;
}

.payment-submit {
    border: 0;
    cursor: pointer;
    white-space: nowrap;
}

.payment-submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.pending-charge-item {
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}

.pending-charge-item:first-of-type {
    margin-top: 12px;
}

.pending-charge-item > div {
    display: grid;
    gap: 5px;
}

.pending-charge-item > div strong {
    font-size: 13px;
}

.pending-charge-item > div span {
    color: var(--muted);
    font-size: 11px;
}

.pending-charge-item dl {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    margin: 14px 0 0;
}

.pending-charge-item dl div {
    padding: 9px;
    border-radius: 9px;
    background: var(--surface-soft);
}

.pending-charge-item dt {
    color: var(--muted);
    font-size: 10px;
}

.pending-charge-item dd {
    margin: 5px 0 0;
    font-size: 12px;
    font-weight: 800;
}

.payment-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
    padding: 15px;
    border: 1px solid rgba(255, 101, 119, 0.2);
    border-radius: 11px;
    background: rgba(255, 101, 119, 0.07);
}

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

.payment-total strong {
    color: var(--danger);
    font-size: 20px;
}

.payment-action {
    background:
        linear-gradient(
            135deg,
            #62df98,
            #36c778
        );
}

@media (max-width: 1050px) {
    .payment-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .payment-summary-grid,
    .payment-form-grid {
        grid-template-columns: 1fr;
    }

    .payment-field-wide {
        grid-column: auto;
    }

    .payment-confirmation {
        align-items: stretch;
        flex-direction: column;
    }

    .payment-submit {
        width: 100%;
        justify-content: center;
    }
}

.cash-payment-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(220px, 0.7fr);
    gap: 18px;
    align-items: stretch;
}

.change-preview {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 110px;
    padding: 18px;
    border: 1px solid rgba(98, 223, 152, 0.25);
    border-radius: 12px;
    background: rgba(98, 223, 152, 0.08);
}

.change-preview span {
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.change-preview strong {
    display: block;
    margin-top: 8px;
    font-size: 27px;
}

.change-preview small {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    line-height: 1.5;
}

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

.collection-search-panel {
    margin-top: 28px;
}

.collection-search-form {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;
    gap: 16px;
    align-items: end;
    margin-top: 22px;
}

.collection-search-input {
    display: grid;
    gap: 8px;
}

.collection-search-input label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.collection-search-button {
    min-height: 47px;
    border: 0;
    cursor: pointer;
}

.collection-results-section {
    margin-top: 25px;
}

.collection-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.collection-section-heading span {
    color: var(--muted);
    font-size: 10px;
    letter-spacing: 0.12em;
}

.collection-section-heading h2 {
    margin: 5px 0 0;
    font-size: 21px;
}

.collection-section-heading > strong {
    color: var(--muted);
    font-size: 12px;
}

.collection-results {
    display: grid;
    gap: 14px;
}

.collection-customer-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface);
}

.collection-customer-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
}

.collection-contract {
    color: var(--primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.collection-customer-main h3 {
    margin: 6px 0 5px;
    font-size: 19px;
}

.collection-customer-main p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.collection-services {
    display: grid;
    gap: 8px;
    padding: 0 20px 18px;
}

.collection-service-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 11px 13px;
    border-radius: 10px;
    background: var(--surface-soft);
}

.collection-service-item > div {
    display: grid;
    gap: 3px;
}

.collection-service-item strong {
    font-size: 12px;
}

.collection-service-item span {
    color: var(--muted);
    font-size: 10px;
}

.collection-balance-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 18px 20px;
    border-top: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.02);
}

.collection-balance-row > div:first-child {
    display: grid;
    gap: 4px;
}

.collection-balance-row span {
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
}

.collection-balance-row strong {
    font-size: 24px;
}

.collection-balance-row small {
    color: var(--muted);
    font-size: 10px;
}

.collection-card-actions {
    display: flex;
    gap: 10px;
}

.collection-start-card {
    display: flex;
    align-items: center;
    gap: 17px;
    margin-top: 24px;
    padding: 22px;
    border: 1px dashed var(--border);
    border-radius: 14px;
    background: var(--surface-soft);
}

.collection-start-icon {
    font-size: 30px;
}

.collection-start-card strong {
    font-size: 14px;
}

.collection-start-card p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 11px;
}

.collection-recent-panel {
    margin-top: 25px;
}

.collection-payment-table-wrapper {
    overflow-x: auto;
    margin-top: 18px;
}

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

.collection-payment-table th {
    padding: 11px;
    color: var(--muted);
    font-size: 10px;
    text-align: left;
    text-transform: uppercase;
    background: var(--surface-soft);
}

.collection-payment-table td {
    padding: 13px 11px;
    border-bottom: 1px solid var(--border);
    font-size: 11px;
}

.collection-payment-table a {
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
}

.collection-payment-table th:last-child,
.collection-payment-table td:last-child {
    text-align: right;
}

@media (max-width: 760px) {
    .collection-search-form {
        grid-template-columns: 1fr;
    }

    .collection-search-button {
        width: 100%;
        justify-content: center;
    }

    .collection-customer-main,
    .collection-balance-row {
        align-items: stretch;
        flex-direction: column;
    }

    .collection-card-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

.additional-charge-options {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.additional-charge-option {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    background: var(--surface-soft);
}

.additional-charge-option input {
    margin-top: 3px;
}

.additional-charge-option span {
    display: grid;
    gap: 5px;
}

.additional-charge-option strong {
    font-size: 12px;
}

.additional-charge-option small {
    color: var(--muted);
    font-size: 11px;
}

@media (max-width: 700px) {
    .additional-charge-options {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   ALERTAS OPERATIVAS
   ========================================================= */

.page-description {
    margin-top: 8px;
    opacity: 0.72;
}

.alert-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.alert-summary-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    background: rgba(255, 255, 255, 0.025);
}

.alert-summary-card:hover,
.alert-summary-card.selected {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
}

.alert-summary-card strong {
    font-size: 1.45rem;
}

.operational-alert-list {
    display: grid;
    gap: 16px;
}

.operational-alert-card {
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.025);
}

.operational-alert-card.severity-critical {
    border-left: 4px solid #ef4444;
}

.operational-alert-card.severity-warning {
    border-left: 4px solid #f59e0b;
}

.operational-alert-card.severity-info {
    border-left: 4px solid #3b82f6;
}

.operational-alert-top {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.operational-alert-top h2 {
    margin: 10px 0 0;
}

.operational-alert-top time {
    opacity: 0.65;
    white-space: nowrap;
}

.alert-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.alert-severity,
.alert-status {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
}

.alert-severity-critical {
    background: rgba(239, 68, 68, 0.14);
}

.alert-severity-warning {
    background: rgba(245, 158, 11, 0.14);
}

.alert-severity-info {
    background: rgba(59, 130, 246, 0.14);
}

.alert-status {
    background: rgba(255, 255, 255, 0.08);
}

.operational-alert-message {
    margin: 18px 0;
    line-height: 1.65;
    opacity: 0.84;
}

.operational-alert-meta,
.authorization-details {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(150px, 1fr)
    );
    gap: 12px;
}

.operational-alert-meta > div,
.authorization-details > div {
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
}

.operational-alert-meta span,
.authorization-details span {
    display: block;
    margin-bottom: 5px;
    font-size: 0.78rem;
    opacity: 0.62;
}

.operational-alert-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
}

.xtaron-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border: 0;
    border-radius: 10px;
    text-decoration: none;
    cursor: pointer;
    color: inherit;
    background: rgba(255, 255, 255, 0.08);
}

.xtaron-button-danger {
    color: #ffffff;
    background: #dc2626;
}

.retry-authorization-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
}

.authorization-warning {
    margin-top: 20px;
    padding: 14px;
    border-radius: 12px;
    background: rgba(245, 158, 11, 0.1);
    line-height: 1.6;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.form-control {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: inherit;
    background: rgba(255, 255, 255, 0.04);
    box-sizing: border-box;
}

.form-control:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.3);
}

.form-error-box,
.form-field-error {
    color: #fca5a5;
}

.xtaron-message-stack {
    display: grid;
    gap: 10px;
    margin-top: 18px;
    margin-bottom: 20px;
}

.xtaron-message {
    padding: 13px 15px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
}

.xtaron-message-success {
    background: rgba(34, 197, 94, 0.12);
}

.xtaron-message-error {
    background: rgba(239, 68, 68, 0.12);
}

.xtaron-message-warning {
    background: rgba(245, 158, 11, 0.12);
}

.empty-alerts {
    text-align: center;
    padding: 50px 20px;
}

.empty-alert-icon {
    margin-bottom: 12px;
    font-size: 2rem;
}

@media (max-width: 900px) {
    .alert-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .retry-authorization-layout {
        grid-template-columns: 1fr;
    }

    .operational-alert-top {
        flex-direction: column;
    }
}

@media (max-width: 560px) {
    .alert-summary-grid {
        grid-template-columns: 1fr;
    }

    .network-history-outage-history-header {
        align-items: flex-start;
        flex-direction: column;

        gap: 5px;
    }

    .network-history-outage-table-head {
        display: none;
    }

    .network-history-outage-row {
        grid-template-columns:
            minmax(0, 1fr);

        gap: 9px;

        padding:
            12px 4px;
    }

    .network-history-outage-cell {
        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 16px;
    }

    .network-history-outage-cell::before {
        display: block;

        flex: 0 0 auto;

        color: var(--muted);

        font-size: 8px;
        font-weight: 700;

        letter-spacing: .06em;
    }

    .network-history-outage-cell > strong {
        text-align: right;
    }

}

/* =========================================================
   ALERTAS EN DASHBOARD
   ========================================================= */

.activity-indicator.red {
    background: var(--danger);
    box-shadow:
        0 0 10px rgba(255, 101, 119, 0.35);
}

.dashboard-alert-item {
    color: inherit;
    text-decoration: none;
    border-radius: 10px;
    transition:
        background 150ms ease,
        transform 150ms ease;
}

.dashboard-alert-item:hover {
    background: rgba(255, 255, 255, 0.025);
    transform: translateX(2px);
}

.dashboard-alert-time {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 10px;
}

.dashboard-alert-count {
    text-decoration: none;
}

.dashboard-alert-count.has-critical {
    color: var(--danger);
    border-color: rgba(255, 101, 119, 0.25);
    background: rgba(255, 101, 119, 0.07);
}

.dashboard-alert-footer {
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid var(--border);
    text-align: right;
}

.dashboard-alert-footer a {
    color: var(--primary-soft);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.dashboard-alert-footer a:hover {
    color: var(--primary);
}

/* =========================================================
   SERVICIOS SUSPENDIDOS - DASHBOARD
   ========================================================= */

.dashboard-table-wrapper {
    margin-top: 20px;
    overflow-x: auto;
}

.dashboard-service-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.dashboard-service-table th,
.dashboard-service-table td {
    padding: 14px 13px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}

.dashboard-service-table th {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.dashboard-service-table tbody tr {
    transition: background 150ms ease;
}

.dashboard-service-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.025);
}

.dashboard-service-table tbody tr:last-child td {
    border-bottom: 0;
}

.dashboard-service-table code {
    color: var(--primary-soft);
    font-family: monospace;
    font-size: 11px;
}

.dashboard-table-link {
    color: var(--primary-soft);
    font-weight: 700;
    text-decoration: none;
}

.dashboard-table-link:hover {
    color: var(--primary);
    text-decoration: underline;
}

@media (max-width: 900px) {
    .dashboard-service-table {
        min-width: 800px;
    }
}

/* =========================================================
   GRÁFICA FINANCIERA REAL
   ========================================================= */

.financial-chart {
    padding-top: 28px;
}

.financial-chart-plot {
    height: 220px;
    display: grid;
    grid-template-columns: repeat(6, minmax(55px, 1fr));
    gap: 13px;
    padding: 0 8px;
    border-bottom: 1px solid var(--border);
}

.financial-chart-group {
    display: grid;
    grid-template-rows: 180px 30px;
    gap: 8px;
    align-items: end;
}

.financial-chart-bars {
    width: 100%;
    height: 180px;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    gap: 5px;
}

.financial-bar {
    display: block;

    width: min(25px, 42%);
    height: 0;

    border-radius: 6px 6px 2px 2px;

    transition:
        height 300ms ease,
        opacity 150ms ease;
}

.financial-bar.income {
    background: linear-gradient(
        to top,
        rgba(61, 204, 255, 0.28),
        var(--primary)
    );
}

.financial-bar.expense {
    background: linear-gradient(
        to top,
        rgba(255, 101, 119, 0.28),
        var(--danger)
    );
}

.financial-bar.has-value {
    min-height: 4px;
}

.financial-bar {
    width: min(25px, 42%);
    height: 0;
    border-radius: 6px 6px 2px 2px;
    transition:
        height 300ms ease,
        opacity 150ms ease;
}

.financial-bar.income {
    background: linear-gradient(
        to top,
        rgba(61, 204, 255, 0.28),
        var(--primary)
    );
}

.financial-bar.expense {
    background: linear-gradient(
        to top,
        rgba(255, 101, 119, 0.28),
        var(--danger)
    );
}

.financial-bar.has-value {
    min-height: 4px;
}

.financial-bar:hover {
    opacity: 0.8;
}

.financial-chart-label {
    color: var(--muted);
    font-size: 10px;
    text-align: center;
    text-transform: capitalize;
}

.financial-chart-legend {
    display: flex;
    justify-content: center;
    gap: 22px;
    margin-top: 17px;
    color: var(--muted);
    font-size: 11px;
}

.financial-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.legend-dot {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 50%;
}

.legend-dot.income {
    background: var(--primary);
}

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

@media (max-width: 760px) {
    .financial-chart-plot {
        min-width: 600px;
    }

    .financial-chart {
        overflow-x: auto;
    }
}

/* =========================================================
   MÓDULO FINANCIERO
   ========================================================= */

.finance-total-card {
    margin-top: 30px;
    padding: 25px;
    border: 1px solid rgba(61, 204, 255, 0.22);
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            rgba(61, 204, 255, 0.08),
            var(--surface)
        );
    box-shadow: var(--shadow);
}

.finance-total-card span,
.finance-total-card small {
    display: block;
    color: var(--muted);
}

.finance-total-card span {
    color: var(--primary-soft);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.finance-total-card strong {
    display: block;
    margin: 10px 0 7px;
    color: var(--success);
    font-size: 36px;
}

.finance-total-card small {
    font-size: 11px;
}

.finance-account-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.finance-account-card {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.finance-account-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

.finance-account-header span {
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
}

.finance-account-header h2 {
    margin: 6px 0 0;
    font-size: 16px;
}

.finance-account-header > strong {
    color: var(--text);
    font-size: 20px;
    white-space: nowrap;
}

.finance-account-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
    color: var(--muted);
    font-size: 10px;
}

.finance-account-totals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 18px;
}

.finance-account-totals div {
    padding: 10px 11px;
    border-radius: 10px;
    background: var(--surface-soft);
}

.finance-account-totals span,
.finance-account-totals strong {
    display: block;
}

.finance-account-totals span {
    color: var(--muted);
    font-size: 10px;
}

.finance-account-totals strong {
    margin-top: 5px;
    font-size: 12px;
}

.positive {
    color: var(--success) !important;
}

.negative {
    color: var(--danger) !important;
}

.finance-movements-panel {
    margin-top: 16px;
}

.finance-movement-amount {
    white-space: nowrap;
}

@media (max-width: 1150px) {
    .finance-account-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .finance-account-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   OPERACIONES FINANCIERAS
   ========================================================= */

.finance-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.finance-primary-button {
    color: #06141f;
    font-weight: 800;
    background: var(--primary);
}

.finance-primary-button:hover {
    filter: brightness(1.08);
}

.finance-operation-layout,
.xtaron-operation-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(280px, 0.65fr);
    gap: 16px;
    margin-top: 30px;
}

.finance-operation-form,
.xtaron-operation-form {
    margin-top: 24px;
}

.finance-money-input {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
}

.finance-money-input > span {
    height: 100%;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-right: 0;
    border-radius: 10px 0 0 10px;
    color: var(--muted);
    background: var(--surface-soft);
}

.finance-money-input .form-control {
    border-radius: 0 10px 10px 0;
}

.form-help {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 10px;
}

.finance-operation-warning,
.xtaron-operation-warning {
    margin-top: 22px;
    padding: 13px 14px;
    border: 1px solid rgba(255, 184, 77, 0.18);
    border-radius: 11px;
    color: var(--warning);
    font-size: 11px;
    line-height: 1.55;
    background: rgba(255, 184, 77, 0.06);
}

.finance-operation-actions,
.xtaron-operation-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}

.finance-operation-info h2,
.xtaron-operation-info h2 {
    margin: 8px 0 22px;
}

.finance-operation-steps,
.xtaron-operation-steps {
    display: grid;
    gap: 12px;
}

.finance-operation-steps > div,
.xtaron-operation-steps > div {
    display: grid;
    grid-template-columns: 35px minmax(0, 1fr);
    gap: 11px;
    padding: 13px;
    border-radius: 11px;
    background: var(--surface-soft);
}

.finance-operation-steps strong,
.xtaron-operation-steps strong {
    color: var(--primary);
    font-size: 12px;
}

.finance-operation-steps p,
.xtaron-operation-steps p {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.55;
}

@media (max-width: 900px) {
    .finance-operation-layout,
    .xtaron-operation-layout {
        grid-template-columns: 1fr;
    }

    .finance-header-actions {
        margin-top: 18px;
        flex-wrap: wrap;
    }
}

.finance-transfer-arrow {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    margin: -2px auto 12px;
    border: 1px solid rgba(61, 204, 255, 0.2);
    border-radius: 50%;
    color: var(--primary);
    font-size: 18px;
    background: rgba(61, 204, 255, 0.06);
}

.finance-danger-button {
    border-color: rgba(255, 90, 90, 0.45);
    background: rgba(255, 90, 90, 0.12);
    color: #ff8d8d;
}

.finance-danger-button:hover {
    border-color: rgba(255, 90, 90, 0.7);
    background: rgba(255, 90, 90, 0.18);
}

.finance-cancel-summary {
    display: grid;
    gap: 12px;
    margin-bottom: 24px;
}

.finance-cancel-summary > div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.finance-cancel-summary span {
    color: var(--text-muted);
}

.finance-cancel-summary strong {
    text-align: right;
    color: var(--text-primary);
}

/* =========================================================
   ESTADOS Y ACCIONES DEL LIBRO FINANCIERO
   ========================================================= */

.finance-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.finance-status-posted {
    color: #48e39a;
    background: rgba(72, 227, 154, 0.1);
    border: 1px solid rgba(72, 227, 154, 0.22);
}

.finance-status-canceled {
    color: #ff8585;
    background: rgba(255, 100, 100, 0.1);
    border: 1px solid rgba(255, 100, 100, 0.22);
}


.finance-movement-actions {
    white-space: nowrap;
}


.finance-table-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 11px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}


.finance-table-action-danger {
    color: #ff8585;
    background: rgba(255, 90, 90, 0.09);
    border: 1px solid rgba(255, 90, 90, 0.24);
}

.finance-table-action-danger:hover {
    color: #ffaaaa;
    background: rgba(255, 90, 90, 0.16);
    border-color: rgba(255, 90, 90, 0.45);
}


.finance-table-action-muted,
.finance-table-action-canceled {
    font-size: 12px;
    color: var(--text-muted);
}

.finance-table-action-canceled {
    color: #ff8585;
}

/* =========================================================
   PROVEEDORES / SERVICIOS DE INTERNET
   ========================================================= */

.provider-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}

.provider-primary-button {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

.provider-primary-button:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}


/* =========================================================
   RESUMEN
   ========================================================= */

.provider-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 22px;
}

.provider-summary-card {
    /*
     * Mismo lenguaje visual del dashboard:
     * superficie oscura, borde discreto y sin tarjeta blanca.
     */
    background: var(--surface-soft);

    border: 1px solid var(--border);
    border-radius: 14px;

    padding: 20px 22px;

    /*
     * Sombra muy discreta.
     * El protagonismo queda en los datos, no en la tarjeta.
     */
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.08);
}

.provider-summary-card span {
    display: block;

    margin-bottom: 10px;

    color: var(--muted);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.provider-summary-card strong {
    display: block;

    /*
     * Valor neutro.
     * Los importes positivos y negativos conservan
     * sus reglas de color independientes.
     */
    color: #f8fafc;

    font-size: 28px;
    font-weight: 800;

    line-height: 1.1;
}

.provider-summary-card strong.positive {
    color: #15803d;
}

.provider-summary-card strong.negative {
    color: #b91c1c;
}

.provider-summary-card small {
    display: block;

    margin-top: 9px;

    color: var(--muted);

    font-size: 11px;

    line-height: 1.45;
}


/* =========================================================
   ALERTAS
   ========================================================= */

.provider-alert-strip,
.provider-info-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 14px 18px;
    border-radius: 14px;
}

.provider-alert-strip {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
}

.provider-info-strip {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}

.provider-overdue-text {
    font-weight: 800;
    color: #b91c1c;
}


/* =========================================================
   SITIOS
   ========================================================= */

.provider-site-panel {
    margin-bottom: 22px;
}

.provider-site-header {
    align-items: center;
}

.provider-site-totals {
    display: flex;
    align-items: center;
    gap: 28px;
}

.provider-site-totals div {
    text-align: right;
}

.provider-site-totals span {
    display: block;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.provider-site-totals strong {
    display: block;
    margin-top: 3px;
    color: #0f172a;
    font-size: 16px;
}


/* =========================================================
   TABLA
   ========================================================= */

.provider-table-detail {
    display: block;
    margin-top: 4px;
    color: #94a3b8;
    font-size: 12px;
}

.provider-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.provider-status.paid {
    background: #dcfce7;
    color: #166534;
}

.provider-status.normal {
    background: #f1f5f9;
    color: #475569;
}

.provider-status.upcoming {
    background: #fef3c7;
    color: #92400e;
}

.provider-status.urgent,
.provider-status.overdue {
    background: #fee2e2;
    color: #b91c1c;
}

.provider-status.canceled {
    background: #e5e7eb;
    color: #475569;
}

.provider-status.missing {
    background: #eff6ff;
    color: #1d4ed8;
}


/* =========================================================
   ESTADO VACÍO
   ========================================================= */

.provider-empty-state {
    padding: 56px 28px;
    text-align: center;
}

.provider-empty-icon {
    margin-bottom: 16px;
    color: #2563eb;
    font-size: 40px;
}

.provider-empty-state h2 {
    margin-bottom: 8px;
}

.provider-empty-state p {
    max-width: 540px;
    margin: 0 auto 24px;
    color: #64748b;
}


/* =========================================================
   FORMULARIOS
   ========================================================= */

.provider-form-panel {
    max-width: 1000px;
}

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

.provider-form-field {
    min-width: 0;
}

.provider-form-field-full {
    grid-column: 1 / -1;
}

.provider-form-field label {
    display: block;
    margin-bottom: 7px;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}

.provider-form-field label span {
    color: #dc2626;
}

.provider-form-field .form-control {
    width: 100%;
    box-sizing: border-box;

    padding: 11px 13px;

    /*
     * Fondo oscuro integrado con el dashboard.
     * Evitamos el blanco puro para mantener la identidad visual.
     */
    background: rgba(15, 23, 42, 0.58);

    /*
     * Borde azul-gris tenue.
     */
    border: 1px solid rgba(71, 105, 138, 0.72);

    border-radius: 10px;

    /*
     * Texto claro para buena legibilidad sobre fondo oscuro.
     */
    color: #e2e8f0;

    font: inherit;
    outline: none;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
}

.provider-form-field .form-control:focus {
    background: rgba(15, 23, 42, 0.78);

    border-color: #3dccff;

    box-shadow:
        0 0 0 3px rgba(61, 204, 255, 0.12);
}

.provider-form-field textarea.form-control {
    resize: vertical;
}

.provider-form-field small {
    display: block;
    margin-top: 5px;
    color: #64748b;
}

.provider-field-error,
.provider-form-errors {
    color: #b91c1c;
    font-size: 13px;
}

.provider-field-error {
    margin-top: 6px;
}

.provider-form-errors {
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid #fecaca;
    border-radius: 10px;
    background: #fef2f2;
}

.provider-form-note {
    margin-top: 24px;

    padding: 16px 18px;

    /*
     * Tarjeta informativa oscura con un acento cian muy sutil.
     * Sigue llamando la atención sin romper el tema del sistema.
     */
    border: 1px solid rgba(61, 204, 255, 0.18);

    border-radius: 12px;

    background: rgba(61, 204, 255, 0.055);
}


.provider-form-note strong {
    display: block;

    color: var(--primary);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 0.02em;
}


.provider-form-note p {
    margin: 6px 0 0;

    color: var(--muted);

    font-size: 11px;

    line-height: 1.55;
}

.provider-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 26px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

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

    .provider-site-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .provider-site-totals {
        width: 100%;
        justify-content: flex-start;
    }

    .provider-site-totals div {
        text-align: left;
    }
}

@media (max-width: 720px) {
    .provider-summary-grid,
    .provider-form-grid {
        grid-template-columns: 1fr;
    }

    .provider-form-field-full {
        grid-column: auto;
    }

    .provider-site-totals {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .provider-header-actions,
    .provider-form-actions {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Separación entre encabezado y tarjetas de Proveedores */
.provider-summary-grid {
    margin-top: 22px;
}

/* =========================================================
   CORRECCIÓN VISUAL - RESUMEN POR SITIO
   ========================================================= */

/* Etiquetas: ENLACES / COSTO MENSUAL / PENDIENTE */
.provider-site-panel .provider-site-totals span {
    color: #94a3b8 !important;
}

/* Valores: 1 / $1,405.00 / $1,405.00 */
.provider-site-panel .provider-site-totals strong {
    color: #f8fafc !important;
}

/* =========================================================
   SELECTORES / COMBOBOX - PROVIDERS
   ========================================================= */

.provider-form-field select.form-control {
    background-color: rgba(15, 23, 42, 0.58);

    color: #e2e8f0;

    border: 1px solid rgba(71, 105, 138, 0.72);

    cursor: pointer;

    /*
     * Ayuda a que los controles nativos del navegador
     * respeten mejor el tema oscuro.
     */
    color-scheme: dark;
}
.provider-form-field .form-control::placeholder {
    color: #64748b;
    opacity: 1;
}

.provider-form-field select.form-control:hover {
    border-color: #3dccff;

    background-color: rgba(15, 23, 42, 0.72);
}

.provider-form-field select.form-control:focus {
    background-color: rgba(15, 23, 42, 0.78);

    color: #f8fafc;

    border-color: #3dccff;

    box-shadow:
        0 0 0 3px rgba(61, 204, 255, 0.12);
}


/* Opciones del desplegable */
.provider-form-field select.form-control option {
    background-color: #10243a;
    color: #f8fafc;
}


/* Opción vacía */
.provider-form-field select.form-control option[value=""] {
    color: #94a3b8;
}

/* =========================================================
   ACCIONES DE PROVEEDORES
   ========================================================= */

.provider-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border: 1px solid #2563eb;
    border-radius: 9px;
    background: #2563eb;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease;
}

.provider-action-button:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

.provider-action-complete {
    color: #22c55e;
    font-size: 12px;
    font-weight: 700;
}


/* Resumen del pago */

.provider-payment-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.provider-payment-summary > div {
    padding: 14px 16px;

    border: 1px solid var(--border);
    border-radius: 12px;

    /*
     * Misma superficie secundaria utilizada
     * en otras tarjetas del dashboard.
     */
    background: var(--surface-soft);
}

.provider-payment-summary span {
    display: block;
    margin-bottom: 5px;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.provider-payment-summary strong {
    display: block;
    font-size: 14px;
}

@media (max-width: 900px) {
    .provider-payment-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .provider-payment-summary {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   CANCELACIÓN DE PAGOS DE INTERNET
   ========================================================= */

.provider-action-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 7px 12px;

    border: 1px solid #dc2626;
    border-radius: 9px;

    background: rgba(220, 38, 38, 0.12);
    color: #f87171;

    font-size: 12px;
    font-weight: 700;

    text-decoration: none;
    white-space: nowrap;
}

.provider-action-cancel:hover {
    background: #dc2626;
    color: #ffffff;
}


.provider-danger-button {
    border-color: #dc2626 !important;
    background: #dc2626 !important;
    color: #ffffff !important;
}

.provider-danger-button:hover {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
}


/* Advertencia dentro de la cancelación */

.provider-cancellation-warning {
    margin-top: 20px;
    padding: 16px 18px;

    border: 1px solid rgba(248, 113, 113, 0.35);
    border-radius: 12px;

    background: rgba(127, 29, 29, 0.14);
}

.provider-cancellation-warning strong {
    color: #fca5a5;
}

.provider-cancellation-warning p {
    margin: 7px 0 0;
    color: #cbd5e1;
    line-height: 1.6;
}

/* =========================================================
   ACCIONES DE CADA ENLACE
   ========================================================= */

.provider-action-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 7px;

    min-width: 125px;
}


/* Botón secundario: historial */

.provider-history-link {
    display: inline-flex;
    align-items: center;

    padding: 2px 3px;

    color: #94a3b8;

    font-size: 11px;
    font-weight: 700;

    text-decoration: none;

    transition: color 0.15s ease;
}

.provider-history-link:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* =========================================================
   AJUSTE FINAL - HISTORIAL DE SERVICIOS DE INTERNET
   ========================================================= */


/* ---------------------------------------------------------
   1. SEPARACIÓN DEL ENCABEZADO
   --------------------------------------------------------- */

/*
 * Separa claramente:
 *
 * Starlink Bajos 1
 * Starlink · BAJOS
 *
 * de las tarjetas inferiores.
 */
.dashboard-header + .provider-link-detail-grid {
    margin-top: 34px !important;
}


/* ---------------------------------------------------------
   2. TARJETAS SUPERIORES DEL HISTORIAL
   --------------------------------------------------------- */

.provider-link-detail-grid {
    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    gap: 18px !important;

    width: 100% !important;

    margin-bottom: 22px !important;
}


/*
 * Evita que estilos anteriores hagan que las tarjetas
 * ocupen toda la fila.
 */
.provider-link-detail-grid
.provider-summary-card {
    width: auto !important;
    min-width: 0 !important;

    margin: 0 !important;

    padding: 20px 22px !important;
}


/* ---------------------------------------------------------
   3. PANEL INFORMACIÓN DEL ENLACE
   --------------------------------------------------------- */

.provider-history-panel {
    margin-top: 22px !important;
}


/*
 * Separación entre el encabezado del panel:
 *
 * DATOS ACTUALES
 * Información del enlace
 *
 * y los datos.
 */
.provider-history-panel .panel-header {
    margin-bottom: 20px !important;
}


/*
 * Proveedor / Sitio / Titular / ID / Fecha / Registrado
 *
 * quedan como tarjetas independientes.
 */
.provider-history-panel
.provider-link-info-grid {
    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 14px !important;

    width: 100% !important;
}


/*
 * Cada dato individual.
 */
.provider-link-info-grid > div {
    display: block !important;

    padding: 15px 16px !important;

    border:
        1px solid rgba(148, 163, 184, 0.16) !important;

    border-radius: 11px !important;

    background:
        rgba(15, 23, 42, 0.24) !important;
}


.provider-link-info-grid > div > span {
    display: block !important;

    margin-bottom: 6px !important;

    color: #94a3b8 !important;

    font-size: 10px !important;
    font-weight: 800 !important;

    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}


.provider-link-info-grid > div > strong {
    display: block !important;

    color: #f8fafc !important;

    font-size: 14px !important;
    font-weight: 700 !important;
}


/* ---------------------------------------------------------
   4. FACTURADO / PAGADO / PENDIENTE
   --------------------------------------------------------- */

.provider-history-summary {
    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 16px !important;

    width: 100% !important;

    margin-top: 22px !important;
    margin-bottom: 22px !important;
}


.provider-history-summary > div {
    display: block !important;

    padding: 17px 19px !important;

    border:
        1px solid rgba(148, 163, 184, 0.16) !important;

    border-radius: 11px !important;

    background:
        rgba(15, 23, 42, 0.26) !important;
}


.provider-history-summary > div > span {
    display: block !important;

    margin-bottom: 6px !important;

    color: #94a3b8 !important;

    font-size: 10px !important;
    font-weight: 800 !important;

    letter-spacing: 0.06em !important;
}


.provider-history-summary > div > strong {
    display: block !important;

    color: #f8fafc;

    font-size: 21px !important;
    font-weight: 800 !important;
}


.provider-history-summary
strong.positive {
    color: #22c55e !important;
}


.provider-history-summary
strong.negative {
    color: #fb7185 !important;
}


/* ---------------------------------------------------------
   5. MÁS ESPACIO ANTES DE MENSUALIDADES
   --------------------------------------------------------- */

.provider-history-summary
+ .provider-history-panel {
    margin-top: 26px !important;
}


/* ---------------------------------------------------------
   6. ESPACIADO INTERNO DE MENSUALIDADES Y AUDITORÍA
   --------------------------------------------------------- */

.provider-history-panel
.dashboard-table-wrapper {
    margin-top: 12px !important;
}


.provider-history-empty-state {
    padding: 24px 18px !important;
}


/* ---------------------------------------------------------
   7. BOTONES DEL DASHBOARD
   --------------------------------------------------------- */

/*
 * Registrar pago arriba.
 * Ver historial debajo.
 */
.provider-link-table
.provider-action-group {
    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;

    justify-content: center !important;

    gap: 7px !important;

    min-width: 125px !important;
}


/*
 * Historial queda como acción secundaria discreta.
 */
.provider-link-table
.provider-history-link {
    display: inline-block !important;

    padding: 1px 2px !important;

    color: #94a3b8 !important;

    font-size: 11px !important;
    font-weight: 700 !important;

    text-decoration: none !important;
}


.provider-link-table
.provider-history-link:hover {
    color: #ffffff !important;

    text-decoration: underline !important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1200px) {

    .provider-link-detail-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    .provider-link-info-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

}


@media (max-width: 700px) {

    .provider-link-detail-grid,
    .provider-link-info-grid,
    .provider-history-summary {
        grid-template-columns:
            1fr !important;
    }

}

/* =========================================================
   OVERRIDE DEFINITIVO - HISTORIAL DE INTERNET
   ========================================================= */


/* ---------------------------------------------------------
   ENCABEZADO -> TARJETAS
   --------------------------------------------------------- */

html body
.application-shell
.dashboard-main
header.dashboard-header
+ section.provider-link-detail-grid {
    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    gap: 18px !important;

    width: 100% !important;

    margin-top: 34px !important;
    margin-bottom: 22px !important;
}


/* ---------------------------------------------------------
   TARJETAS SUPERIORES
   --------------------------------------------------------- */

html body
.application-shell
.dashboard-main
section.provider-link-detail-grid
> article.provider-summary-card {

    /* MUY IMPORTANTE:
       evita que otra regla haga que ocupen toda la fila */
    grid-column: auto !important;
    grid-row: auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;

    padding: 20px 22px !important;
}


/* ---------------------------------------------------------
   INFORMACIÓN DEL ENLACE
   --------------------------------------------------------- */

html body
.application-shell
.dashboard-main
section.dashboard-panel.provider-history-panel
div.provider-link-info-grid {

    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 14px !important;

    width: 100% !important;

    margin-top: 20px !important;
}


/* Cada dato individual */

html body
.application-shell
.dashboard-main
.provider-link-info-grid
> div {

    display: block !important;

    grid-column: auto !important;
    grid-row: auto !important;

    width: auto !important;
    min-width: 0 !important;

    padding: 15px 16px !important;

    border:
        1px solid rgba(148, 163, 184, 0.16) !important;

    border-radius: 11px !important;

    background:
        rgba(15, 23, 42, 0.26) !important;
}


html body
.application-shell
.dashboard-main
.provider-link-info-grid
> div
> span {

    display: block !important;

    margin-bottom: 6px !important;

    color: #94a3b8 !important;

    font-size: 10px !important;
    font-weight: 800 !important;

    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}


html body
.application-shell
.dashboard-main
.provider-link-info-grid
> div
> strong {

    display: block !important;

    color: #f8fafc !important;

    font-size: 14px !important;
    font-weight: 700 !important;
}


/* ---------------------------------------------------------
   FACTURADO / PAGADO / PENDIENTE
   --------------------------------------------------------- */

html body
.application-shell
.dashboard-main
section.provider-history-summary {

    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 16px !important;

    width: 100% !important;

    margin-top: 22px !important;
    margin-bottom: 26px !important;
}


html body
.application-shell
.dashboard-main
section.provider-history-summary
> div {

    display: block !important;

    grid-column: auto !important;
    grid-row: auto !important;

    width: auto !important;
    min-width: 0 !important;

    padding: 17px 19px !important;

    border:
        1px solid rgba(148, 163, 184, 0.16) !important;

    border-radius: 11px !important;

    background:
        rgba(15, 23, 42, 0.26) !important;
}


/* ---------------------------------------------------------
   SEPARACIÓN ENTRE PANELES
   --------------------------------------------------------- */

html body
.application-shell
.dashboard-main
section.provider-history-panel {

    margin-top: 22px !important;
}


html body
.application-shell
.dashboard-main
section.provider-history-summary
+ section.provider-history-panel {

    margin-top: 28px !important;
}


/* ---------------------------------------------------------
   BOTONES DEL DASHBOARD
   --------------------------------------------------------- */

html body
.application-shell
.dashboard-main
table.provider-link-table
td
div.provider-action-group {

    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;
    justify-content: center !important;

    gap: 8px !important;

    width: max-content !important;
    min-width: 125px !important;
}


html body
.application-shell
.dashboard-main
table.provider-link-table
td
div.provider-action-group
a.provider-history-link {

    display: block !important;

    width: auto !important;

    padding: 1px 3px !important;

    color: #94a3b8 !important;

    font-size: 11px !important;
    font-weight: 700 !important;

    text-decoration: none !important;
}


html body
.application-shell
.dashboard-main
table.provider-link-table
td
div.provider-action-group
a.provider-history-link:hover {

    color: #ffffff !important;
    text-decoration: underline !important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1200px) {

    html body
    .application-shell
    .dashboard-main
    section.provider-link-detail-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }


    html body
    .application-shell
    .dashboard-main
    section.dashboard-panel.provider-history-panel
    div.provider-link-info-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }
}


@media (max-width: 700px) {

    html body
    .application-shell
    .dashboard-main
    section.provider-link-detail-grid,

    html body
    .application-shell
    .dashboard-main
    section.dashboard-panel.provider-history-panel
    div.provider-link-info-grid,

    html body
    .application-shell
    .dashboard-main
    section.provider-history-summary {

        grid-template-columns:
            1fr !important;
    }
}

/* =========================================================
   ACCIONES DEL ENLACE
   ========================================================= */

.provider-link-table .provider-action-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;

    width: 138px !important;
}


/* Acción secundaria: historial */

.provider-link-table .provider-history-link {
    width: 100% !important;
    min-height: 36px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    padding: 7px 12px !important;

    border-radius: 9px !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    white-space: nowrap !important;
}

.provider-link-table .provider-history-link:hover {
    border-color: rgba(148, 163, 184, 0.55) !important;

    background: rgba(51, 65, 85, 0.45) !important;

    color: #f8fafc !important;
}

/* =========================================================
   BOTÓN SECUNDARIO VER HISTORIAL - DEFINITIVO
   ========================================================= */

html body
.application-shell
.dashboard-main
table.provider-link-table
td
div.provider-action-group
a.provider-history-link {

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    padding: 6px 10px !important;

    border: 1px solid rgba(148, 163, 184, 0.30) !important;
    border-radius: 8px !important;

    background: rgba(15, 23, 42, 0.45) !important;

    color: #cbd5e1 !important;

    font-size: 11px !important;
    font-weight: 700 !important;

    line-height: 1.2 !important;

    text-decoration: none !important;
    white-space: nowrap !important;
}


html body
.application-shell
.dashboard-main
table.provider-link-table
td
div.provider-action-group
a.provider-history-link:hover {

    border-color: rgba(148, 163, 184, 0.60) !important;

    background: rgba(51, 65, 85, 0.55) !important;

    color: #ffffff !important;

    text-decoration: none !important;
}

/* =========================================================
   TAMAÑO UNIFORME DE BOTONES - PROVEEDORES
   ========================================================= */

html body
.application-shell
.dashboard-main
table.provider-link-table
td
div.provider-action-group {

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    gap: 7px !important;

    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
}


/* Registrar pago */
html body
.application-shell
.dashboard-main
table.provider-link-table
td
div.provider-action-group
a.provider-action-button,

/* Cancelar pago */
html body
.application-shell
.dashboard-main
table.provider-link-table
td
div.provider-action-group
a.provider-action-cancel,

/* Ver historial */
html body
.application-shell
.dashboard-main
table.provider-link-table
td
div.provider-action-group
a.provider-history-link {

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;

    min-height: 34px !important;

    padding: 6px 9px !important;

    border-radius: 9px !important;

    font-size: 11px !important;
    font-weight: 700 !important;

    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}

/* =========================================================
   EDITAR CONDICIONES - CAMPO DE MOTIVO A TODO EL ANCHO
   ========================================================= */

.provider-form-grid .provider-form-field-wide {
    grid-column: 1 / -1 !important;
}

.provider-form-grid .provider-form-field-wide textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    resize: vertical !important;
}

/* =========================================================
   OPERACIONES DE PROVEEDORES - RESUMEN SUPERIOR
   ========================================================= */

/*
 * Separa el resumen de mensualidad del encabezado.
 * Mantiene las tarjetas antes del formulario de operación.
 */
.provider-operation-summary {
    margin-top: 30px;
    margin-bottom: 0;
}
/* =========================================================
   RESUMEN DE OPERACIÓN - VARIANTE DE CUATRO COLUMNAS
   ========================================================= */

/*
 * Editar condiciones utiliza cuatro datos principales:
 * costo, día habitual, periodo de referencia y sitio.
 */
.provider-operation-summary-four {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}


/*
 * En pantallas medianas conservamos una distribución
 * cómoda de dos tarjetas por fila.
 */
@media (max-width: 900px) {

    .provider-operation-summary-four {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/*
 * En teléfonos cada tarjeta utiliza todo el ancho.
 */
@media (max-width: 600px) {

    .provider-operation-summary-four {
        grid-template-columns: 1fr;
    }

}
/*
 * Tarjetas informativas superiores de operaciones.
 *
 * Les damos mayor presencia visual sin alterar
 * las tarjetas generales del módulo de Proveedores.
 */
.provider-operation-summary > div {
    min-height: 82px;

    padding: 18px 20px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    box-sizing: border-box;
}


/*
 * Etiqueta superior:
 * ENLACE / SITIO / PERIODO / VENCIMIENTO / IMPORTE
 */
.provider-operation-summary > div > span {
    margin-bottom: 8px;

    font-size: 11px;
    letter-spacing: 0.075em;
}


/*
 * Valor principal de cada tarjeta.
 */
.provider-operation-summary > div > strong {
    font-size: 16px;
    line-height: 1.25;
}
/*
 * El importe merece mayor jerarquía visual porque
 * representa el valor que se descontará de la cuenta.
 */
.provider-operation-summary > div:last-child > strong {
    font-size: 18px;
    font-weight: 800;
}


/*
 * Cuando el resumen está seguido del layout estándar,
 * evitamos acumular demasiado espacio vertical.
 */
.provider-operation-summary
+ .xtaron-operation-layout {
    margin-top: 16px;
}

/* =========================================================
   INVENTARIO - ENCABEZADOS
   ========================================================= */

.inventory-page-heading .dashboard-eyebrow {
    margin-bottom: 10px;
}

.inventory-page-heading h1 {
    margin-top: 0;
    margin-bottom: 12px;
}

.inventory-page-heading > p:not(.dashboard-eyebrow) {
    margin: 0;
    max-width: 760px;
}


/* Inventario - separación entre encabezado y contenido */
.inventory-list-header {
    margin-bottom: 28px;
}

.inventory-items-panel {
    margin-top: 24px;
}

/* Inventario - alerta visual de stock bajo */
.provider-summary-card.inventory-stock-alert {
    border-color: rgba(255, 101, 119, .65);
    background: rgba(255, 101, 119, .14);
    box-shadow:
        0 0 0 1px rgba(255, 101, 119, .08),
        0 10px 24px rgba(255, 101, 119, .10);
}

.provider-summary-card.inventory-stock-alert span,
.provider-summary-card.inventory-stock-alert strong {
    color: #ff6577;
}

.provider-summary-card.inventory-stock-alert small {
    color: #ffb0ba;
}

/* Inventario — estado crítico de tarjeta Stock bajo */
html body
.application-shell
.dashboard-main
.provider-summary-card.inventory-stock-alert {
    background-color: rgba(220, 38, 38, 0.18) !important;
    border: 1px solid rgba(239, 68, 68, 0.75) !important;
    box-shadow:
        0 0 0 1px rgba(239, 68, 68, 0.10),
        0 8px 24px rgba(220, 38, 38, 0.18) !important;
}

html body
.application-shell
.dashboard-main
.provider-summary-card.inventory-stock-alert span {
    color: #f87171 !important;
}

html body
.application-shell
.dashboard-main
.provider-summary-card.inventory-stock-alert strong {
    color: #ef4444 !important;
}

html body
.application-shell
.dashboard-main
.provider-summary-card.inventory-stock-alert small {
    color: #fca5a5 !important;
}


/* Inventario - tarjetas de resumen clicables */
.inventory-summary-card-link {
    display: block;
    text-decoration: none;
    cursor: pointer;
}

.inventory-summary-card-link:hover {
    text-decoration: none;
}


/* Tarjetas de resumen clicables */
.xtaron-summary-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.xtaron-summary-card-link:hover {
    color: inherit;
    text-decoration: none;
}

/* =========================================================
   AJUSTES
   ========================================================= */

.settings-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

.settings-summary-grid .provider-summary-card {
    min-height: 150px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.settings-summary-grid .provider-summary-card strong {
    margin: 12px 0;
}

@media (max-width: 900px) {
    .settings-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   AJUSTES — DISTRIBUCIÓN ESPECÍFICA
   ========================================================= */

.settings-operation-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr);
    gap: 16px;
    align-items: start;
}

.settings-operation-layout .xtaron-operation-form,
.settings-operation-layout .xtaron-operation-info {
    width: 100%;
    margin: 0;
    height: auto;
}

.settings-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    width: auto;
    margin-left: auto;
}

.settings-header-actions .button {
    width: auto;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .settings-operation-layout {
        grid-template-columns: 1fr;
    }

    .settings-header-actions {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
    }
}

/* =========================================================
   AJUSTES — PANELES INFERIORES
   ========================================================= */

.settings-operation-layout {
    margin-top: 24px;
}

.settings-panel-card {
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.settings-panel-card h2,
.settings-panel-card h3 {
    margin-top: 0;
}

.settings-panel-card p {
    color: var(--muted);
    line-height: 1.6;
}

.settings-panel-card .xtaron-operation-actions {
    margin-top: 22px;
}

@media (max-width: 900px) {
    .settings-panel-card {
        padding: 18px;
    }
}

/* =========================================================
   AJUSTES — TIPOGRAFÍA MÁS COMPACTA
   ========================================================= */

.settings-dashboard .dashboard-header h1 {
    font-size: 30px;
}

.settings-dashboard .dashboard-header > div > p:not(.dashboard-eyebrow) {
    font-size: 13px;
}

.settings-dashboard .provider-summary-card span {
    font-size: 10px;
}

.settings-dashboard .provider-summary-card strong {
    font-size: 24px;
}

.settings-dashboard .provider-summary-card small {
    font-size: 10px;
}

.settings-dashboard .settings-panel-card h2 {
    font-size: 18px;
}

.settings-dashboard .settings-panel-card h3 {
    font-size: 16px;
}

.settings-dashboard .settings-panel-card p {
    font-size: 12px;
}

.settings-dashboard .settings-panel-card .xtaron-button {
    font-size: 11px;
}

/* =========================================================
   AJUSTES — CHECKBOXES DE USUARIOS
   ========================================================= */

.settings-checkbox-field {
    margin-top: 6px;
}

.settings-checkbox-control {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    cursor: pointer;
    user-select: none;
}

.settings-checkbox-control input[type="checkbox"] {
    appearance: auto;
    -webkit-appearance: checkbox;
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 0;
    padding: 0;
    accent-color: var(--primary);
    cursor: pointer;
    box-shadow: none;
}

.settings-checkbox-control span {
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
}

.settings-checkbox-field > small {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.5;
}

/* =========================================================
   AJUSTES — MOSTRAR / OCULTAR CONTRASEÑA
   ========================================================= */

.settings-password-field {
    position: relative;
    width: 100%;
}

.settings-password-field input {
    width: 100%;
    padding-right: 48px;
}

.settings-password-toggle {
    position: absolute;
    top: 50%;
    right: 13px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    transition:
        color 150ms ease,
        background 150ms ease;
}

.settings-password-toggle:hover {
    color: var(--primary);
    background: rgba(56, 189, 248, 0.08);
}

.settings-password-toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.settings-password-toggle .settings-eye-closed {
    display: none;
}

.settings-password-toggle.is-visible .settings-eye-open {
    display: none;
}

.settings-password-toggle.is-visible .settings-eye-closed {
    display: block;
}


/* =========================================================
   AJUSTES — PASSWORD FIX
   ========================================================= */

/*
 * Edge puede dibujar su propio ojo dentro del input.
 * Lo ocultamos porque XtarON ya tiene su propio control.
 */
.settings-password-field input::-ms-reveal,
.settings-password-field input::-ms-clear {
    display: none;
}

.settings-password-field {
    position: relative;
}

.settings-password-field input {
    width: 100%;
    padding-right: 48px;
}

.settings-password-toggle {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);

    display: grid;
    place-items: center;

    width: 32px;
    height: 32px;

    padding: 0;
    margin: 0;

    border: 0;
    border-radius: 8px;

    color: var(--muted);
    background: transparent;

    cursor: pointer;
    z-index: 3;
}

.settings-password-toggle:hover {
    color: var(--primary);
    background: rgba(56, 189, 248, 0.08);
}

.settings-password-toggle svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    pointer-events: none;
}

.settings-password-toggle .settings-eye-closed {
    display: none;
}

.settings-password-toggle.is-visible .settings-eye-open {
    display: none;
}

.settings-password-toggle.is-visible .settings-eye-closed {
    display: block;
}

/*
 * Placeholder un poco más discreto que el texto escrito.
 */
.settings-panel-card input::placeholder {
    color: var(--muted);
    opacity: 0.68;
}

/* =========================================================
   DASHBOARD — VISTA SIN INFORMACIÓN FINANCIERA
   ========================================================= */

.dashboard-grid.dashboard-grid-single {
    grid-template-columns: minmax(0, 1fr);
}


/* XTARON REPORTS */

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

.reports-card {
    min-height: 190px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.reports-card-eyebrow {
    display: block;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
}

.reports-card h2 {
    margin: 0 0 10px;
    font-size: 17px;
}

.reports-card p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
}

.reports-card-footer {
    padding-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 11px;
}

.reports-card-footer strong {
    color: var(--accent);
    font-size: 18px;
}

.reports-info-panel {
    margin-top: 16px;
}

.reports-info-panel > p {
    max-width: 760px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.7;
}

.reports-format-list {
    margin-top: 18px;
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.reports-format-list > div {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, .018);
}

.reports-format-list strong,
.reports-format-list span {
    display: block;
}

.reports-format-list strong {
    margin-bottom: 5px;
    font-size: 12px;
}

.reports-format-list span {
    color: var(--muted);
    font-size: 11px;
}

@media (max-width: 1050px) {
    .reports-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .reports-grid,
    .reports-format-list {
        grid-template-columns: 1fr;
    }
}


/* XTARON FINANCIAL REPORT */

.reports-card-link {
    color: inherit;
    text-decoration: none;
    transition:
        transform 150ms ease,
        border-color 150ms ease,
        background 150ms ease;
}

.reports-card-link:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 190, 220, .35);
    background: rgba(255, 255, 255, .025);
}

.reports-filter-panel {
    margin-bottom: 18px;
}

.reports-filter-form {
    display: flex;
    align-items: end;
    gap: 14px;
    flex-wrap: wrap;
}

.reports-filter-field {
    min-width: 180px;
}

.reports-filter-field label {
    display: block;
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.reports-filter-control {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.reports-period-heading {
    margin: 22px 0 12px;
}

.reports-period-heading span,
.reports-period-heading strong {
    display: block;
}

.reports-period-heading span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
}

.reports-period-heading strong {
    margin-top: 4px;
    font-size: 18px;
}

.reports-breakdown-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.reports-breakdown-card {
    margin: 0;
}

.reports-breakdown-list {
    margin-top: 12px;
}

.reports-breakdown-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
}

.reports-breakdown-list > div:last-child {
    border-bottom: 0;
}

.reports-breakdown-list span {
    color: var(--muted);
    font-size: 11px;
}

.reports-breakdown-list strong {
    font-size: 12px;
}

.reports-empty {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 11px;
}

@media (max-width: 760px) {
    .reports-breakdown-grid {
        grid-template-columns: 1fr;
    }

    .reports-filter-field {
        width: 100%;
    }

    .reports-filter-form .provider-primary-button {
        width: 100%;
        justify-content: center;
    }
}


/* XTARON REPORT BUTTONS */

.reports-button {
    min-height: 40px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    border-radius: 10px;
    border: 1px solid var(--border);

    font: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;

    transition:
        transform 140ms ease,
        border-color 140ms ease,
        background 140ms ease,
        opacity 140ms ease;
}

.reports-button:hover {
    transform: translateY(-1px);
}

.reports-button:active {
    transform: translateY(0);
}

.reports-button-primary {
    color: #071114;
    border-color: var(--accent);
    background: var(--accent);
}

.reports-button-primary:hover {
    opacity: .92;
}

.reports-button-secondary {
    color: var(--text);
    background: var(--surface);
}

.reports-button-secondary:hover {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .035);
}

.reports-filter-form .reports-button {
    min-width: 110px;
}

.provider-header-actions .reports-button {
    min-width: 125px;
}

@media (max-width: 760px) {
    .reports-filter-form .reports-button {
        width: 100%;
    }

    .provider-header-actions .reports-button {
        min-width: 0;
        flex: 1 1 auto;
    }
}


/* XTARON REPORT BUTTONS FINAL */

.reports-filter-form .reports-button,
.provider-header-actions .reports-button {
    min-height: 44px;
    padding: 0 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;

    text-decoration: none;
    white-space: nowrap;
}

.reports-filter-form .reports-button-primary,
.provider-header-actions .reports-button-primary {
    color: #06151b;
    background: #22d3ee;
    border: 1px solid #22d3ee;
}

.reports-filter-form .reports-button-primary:hover,
.provider-header-actions .reports-button-primary:hover {
    color: #06151b;
    background: #67e8f9;
    border-color: #67e8f9;
}

.provider-header-actions .reports-button-secondary {
    color: #eaf6fa;
    background: #13263a;
    border: 1px solid #27445f;
}

.provider-header-actions .reports-button-secondary:hover {
    color: #ffffff;
    background: #193149;
    border-color: #356181;
}

.reports-filter-form .reports-button {
    min-width: 120px;
}

.provider-header-actions .reports-button {
    min-width: 138px;
}

@media (max-width: 760px) {

    .reports-filter-form .reports-button {
        width: 100%;
    }

    .provider-header-actions .reports-button {
        min-width: 0;
        flex: 1 1 auto;
    }
}


/* XTARON CUSTOMER REPORT */

.reports-filter-search {
    min-width: 280px;
    flex: 1 1 280px;
}

@media (max-width: 760px) {
    .reports-filter-search {
        min-width: 100%;
    }
}


/* XTARON INVENTORY REPORT */

.reports-stock-status {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.reports-stock-ok {
    color: #66e3a4;
    background: rgba(54, 211, 153, .09);
    border: 1px solid rgba(54, 211, 153, .22);
}

.reports-stock-warning {
    color: #f3ca69;
    background: rgba(243, 202, 105, .08);
    border: 1px solid rgba(243, 202, 105, .22);
}

.reports-stock-danger {
    color: #ff8080;
    background: rgba(255, 92, 92, .08);
    border: 1px solid rgba(255, 92, 92, .22);
}


/* XTARON PROVIDER REPORT */

.reports-provider-overdue-text {
    color: #ff8080;
    font-weight: 700;
}

.reports-provider-warning-text {
    color: #f3ca69;
    font-weight: 700;
}

.reports-provider-status-muted {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(255, 255, 255, .025);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}


/* XTARON NETWORK INFRASTRUCTURE */

.network-section {
    margin-top: 16px;
    overflow: hidden;
}

.network-status {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.network-status-online {
    color: #66e3a4;
    border-color: rgba(54, 211, 153, .22);
    background: rgba(54, 211, 153, .09);
}

.network-status-offline {
    color: #ff8080;
    border-color: rgba(255, 92, 92, .22);
    background: rgba(255, 92, 92, .08);
}

.network-status-maintenance {
    color: #f3ca69;
    border-color: rgba(243, 202, 105, .22);
    background: rgba(243, 202, 105, .08);
}

.network-status-unknown {
    color: var(--muted);
    background: rgba(255, 255, 255, .025);
}

.network-topology {
    display: grid;
    gap: 16px;
    margin-top: 16px;
}

.network-olt-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.network-olt-header,
.network-pon-header,
.network-nap-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.network-olt-header {
    padding: 18px;
    border-bottom: 1px solid var(--border);
}

.network-olt-header span:first-child,
.network-pon-header span:first-child {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
}

.network-olt-header h2 {
    margin: 4px 0;
    font-size: 18px;
}

.network-olt-header p {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
}

.network-pon-grid {
    display: grid;
    gap: 12px;
    padding: 14px;
}

.network-pon-card {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: rgba(255, 255, 255, .015);
}

.network-pon-header strong {
    display: block;
    margin-top: 4px;
    font-size: 14px;
}

.network-pon-meta {
    display: flex;
    gap: 16px;
    margin-top: 10px;
    color: var(--muted);
    font-size: 10px;
}

.network-nap-card {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: rgba(0, 0, 0, .12);
}

.network-nap-header strong {
    display: block;
    font-size: 12px;
}

.network-nap-header span {
    color: var(--muted);
    font-size: 10px;
}

.network-port-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.network-port {
    min-height: 72px;
    padding: 9px;
    border: 1px solid var(--border);
    border-radius: 9px;
}

.network-port strong,
.network-port span,
.network-port small {
    display: block;
}

.network-port strong {
    margin-bottom: 5px;
    font-size: 12px;
}

.network-port span {
    font-size: 10px;
}

.network-port small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 9px;
}

.network-port-occupied {
    border-color: rgba(34, 211, 238, .30);
    background: rgba(34, 211, 238, .06);
}

.network-port-available {
    border-color: rgba(54, 211, 153, .20);
}

.network-port-reserved {
    border-color: rgba(243, 202, 105, .25);
    background: rgba(243, 202, 105, .04);
}

.network-port-damaged,
.network-port-disabled {
    border-color: rgba(255, 92, 92, .25);
    background: rgba(255, 92, 92, .04);
}

.network-empty-inline {
    padding: 12px;
    color: var(--muted);
    font-size: 11px;
}

@media (min-width: 1100px) {
    .network-pon-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* XTARON NETWORK DETAIL */

.network-topology-link {
    color: inherit;
    text-decoration: none;
}

.network-topology-link:hover {
    color: #67e8f9;
}

.network-device-info {
    margin-top: 16px;
}

.network-info-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.network-info-grid > div {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255, 255, 255, .015);
}

.network-info-grid span {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
}

.network-info-grid strong {
    display: block;
    overflow-wrap: anywhere;
    font-size: 12px;
}

.network-nap-detail-card {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.network-port-grid-large {
    grid-template-columns:
        repeat(auto-fill, minmax(165px, 1fr));
}

.network-port-detail {
    min-height: 96px;
    padding: 12px;
}

.network-port-detail > a {
    display: block;
    margin-top: 8px;
    font-size: 11px;
    font-weight: 700;
}

.network-detail-grid {
    display: grid;
    gap: 16px;
    margin-top: 16px;
}

.network-log-header {
    padding: 16px 16px 16px;
}

@media (min-width: 1050px) {
    .network-detail-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/* XTARON ROUTER DIAGNOSTICS */

.network-inline-form {
    display: inline-flex;
    margin: 0;
}

.network-test-result {
    margin: 22px 0 16px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
}

.network-test-result > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.network-test-result span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .09em;
}

.network-test-result strong {
    font-size: 11px;
}

.network-test-result p {
    margin: 8px 0 0;
    font-size: 11px;
}

.network-test-result-success {
    border-color: rgba(54, 211, 153, .25);
}

.network-test-result-success strong {
    color: #66e3a4;
}

.network-test-result-error {
    border-color: rgba(255, 92, 92, .25);
}

.network-test-result-error strong {
    color: #ff8080;
}


/* XTARON CONNECTION NEON NOTICE */

.network-test-result-connection {
    position: relative;
    overflow: hidden;
    padding: 17px 20px;
    border-width: 1px;
    border-style: solid;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease;
}

/*
 * Cabecera de tres columnas:
 *
 * 1. etiqueta a la izquierda
 * 2. resultado exactamente centrado
 * 3. espacio espejo a la derecha
 *
 * Así "Exitoso" o "Fallido" queda realmente
 * en el centro del recuadro.
 */
.network-test-result-connection > div {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 30px;
}

.network-test-result-connection > div::after {
    content: "";
}

.network-test-result-connection > div > span {
    justify-self: start;
}

.network-test-result-connection > div > strong {
    justify-self: center;
    padding: 5px 13px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-align: center;
}

.network-test-result-connection p {
    position: relative;
    z-index: 1;
    margin-top: 10px;
    text-align: center;
}


/* ======================================================
   CONEXIÓN EXITOSA — NEÓN VERDE
   ====================================================== */

.network-test-result-connection.network-test-result-success {
    border-color: rgba(52, 255, 154, .72);

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(52, 255, 154, .10),
            transparent 48%
        ),
        linear-gradient(
            135deg,
            rgba(20, 53, 43, .72),
            rgba(8, 24, 21, .92)
        );

    box-shadow:
        0 0 8px rgba(52, 255, 154, .28),
        0 0 22px rgba(52, 255, 154, .18),
        0 0 42px rgba(52, 255, 154, .08),
        inset 0 0 18px rgba(52, 255, 154, .06);
}

.network-test-result-connection.network-test-result-success::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(83, 255, 172, .08),
            transparent
        );
}

.network-test-result-connection.network-test-result-success > div > strong {
    color: #7dffb8;

    border: 1px solid rgba(80, 255, 164, .36);

    background: rgba(39, 255, 139, .07);

    text-shadow:
        0 0 5px rgba(83, 255, 172, .95),
        0 0 12px rgba(83, 255, 172, .55);

    box-shadow:
        0 0 10px rgba(52, 255, 154, .12),
        inset 0 0 10px rgba(52, 255, 154, .06);
}


/* ======================================================
   CONEXIÓN FALLIDA — NEÓN ROJO
   ====================================================== */

.network-test-result-connection.network-test-result-error {
    border-color: rgba(255, 73, 92, .72);

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255, 73, 92, .10),
            transparent 48%
        ),
        linear-gradient(
            135deg,
            rgba(59, 24, 30, .75),
            rgba(28, 10, 15, .94)
        );

    box-shadow:
        0 0 8px rgba(255, 73, 92, .30),
        0 0 22px rgba(255, 73, 92, .18),
        0 0 42px rgba(255, 73, 92, .08),
        inset 0 0 18px rgba(255, 73, 92, .06);
}

.network-test-result-connection.network-test-result-error::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 82, 100, .08),
            transparent
        );
}

.network-test-result-connection.network-test-result-error > div > strong {
    color: #ff8794;

    border: 1px solid rgba(255, 91, 108, .40);

    background: rgba(255, 67, 86, .08);

    text-shadow:
        0 0 5px rgba(255, 92, 108, .95),
        0 0 12px rgba(255, 73, 92, .58);

    box-shadow:
        0 0 10px rgba(255, 73, 92, .13),
        inset 0 0 10px rgba(255, 73, 92, .06);
}


/* Responsive */

@media (max-width: 680px) {

    .network-test-result-connection > div {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 8px;
    }

    .network-test-result-connection > div::after {
        display: none;
    }

    .network-test-result-connection > div > span {
        justify-self: center;
    }

    .network-test-result-connection > div > strong {
        justify-self: center;
    }
}


/* XTARON CONNECTION RESULT VERTICAL ALIGN */

/*
 * Conservamos título y mensaje a la izquierda.
 * Exitoso / Fallido queda al lado derecho,
 * centrado verticalmente respecto a TODO el recuadro.
 */
.network-test-result-connection {
    position: relative;
    padding-right: 135px;
}

.network-test-result-connection > div {
    display: block;
    min-height: 0;
}

.network-test-result-connection > div::after {
    display: none;
}

.network-test-result-connection > div > span {
    display: block;
}

.network-test-result-connection > div > strong {
    position: absolute;
    top: 50%;
    right: 20px;
    z-index: 2;

    transform: translateY(-50%);

    margin: 0;
    white-space: nowrap;
}

.network-test-result-connection p {
    margin: 8px 0 0;
    text-align: left;
}


/* En pantallas pequeñas vuelve a flujo normal */

@media (max-width: 680px) {

    .network-test-result-connection {
        padding-right: 20px;
    }

    .network-test-result-connection > div > strong {
        position: static;
        display: inline-flex;
        margin-top: 9px;
        transform: none;
    }

    .network-test-result-connection p {
        text-align: left;
    }
}


/* XTARON NETWORK DETAIL PANEL SPACING */

/*
 * Da aire entre Administración / Automatización
 * y sus respectivos cuadros informativos.
 */
.network-detail-grid
.dashboard-panel
.panel-header
+ .network-info-grid {
    margin-top: 16px;
}


/* XTARON NETWORK STANDARD SPACING */

/*
 * Estándar XtarON:
 * 16 px entre encabezados y el contenido posterior.
 *
 * Aplica a todas las pantallas de Infraestructura.
 */

/* Encabezado principal -> tarjetas/resumen */
.network-page
.dashboard-header
+ .provider-summary-grid {
    margin-top: 16px;
}


/* Encabezado principal -> panel normal */
.network-page
.dashboard-header
+ .dashboard-panel {
    margin-top: 16px;
}


/* Encabezado principal -> tabla */
.network-page
.dashboard-header
+ .customer-table-panel {
    margin-top: 16px;
}


/* Encabezado principal -> topología */
.network-page
.dashboard-header
+ .network-topology {
    margin-top: 16px;
}


/*
 * Paneles internos como:
 * Administración
 * Automatización
 * Información técnica
 * Recursos RouterOS
 */
.network-page
.dashboard-panel
.panel-header
+ .network-info-grid {
    margin-top: 16px;
}


/*
 * Conservamos Auditoría con sus 16 px ya definidos
 * mediante .network-log-header, evitando duplicar
 * el espacio a 32 px.
 */


/* XTARON NETWORK HEADER TABLE SPACING */

/*
 * Estándar XtarON:
 * 16 px entre el encabezado de un panel Network
 * y una tabla colocada inmediatamente debajo.
 *
 * Ejemplo:
 * ROUTING / MikroTik
 */
.network-page
.network-section
> .panel-header
+ .responsive-table {
    margin-top: 16px;
}


/* =========================================================
   XTARON GLOBAL PANEL CONTENT SPACING
   ========================================================= */

/*
 * ESTÁNDAR VISUAL GLOBAL XTARON
 *
 * Todo encabezado interno de un panel debe conservar
 * exactamente 16 px de aire antes del contenido que sigue.
 *
 * Aplica a:
 * - formularios
 * - tablas
 * - cuadros informativos
 * - listas
 * - resúmenes
 * - acciones
 * - historiales
 *
 * No modifica el espaciado entre el encabezado principal
 * de la página y las secciones principales.
 */


/* ---------------------------------------------------------
   PANEL ESTÁNDAR
   --------------------------------------------------------- */

.dashboard-panel
> .panel-header
+ * {
    margin-top: 16px !important;
}


/* ---------------------------------------------------------
   PANEL TIPO PROFILE
   Clientes / Cobranza / Reportes y pantallas antiguas
   --------------------------------------------------------- */

.profile-panel
> .profile-panel-header
+ * {
    margin-top: 16px !important;
}


/*
 * Algunas pantallas reutilizan profile-panel-header
 * dentro de dashboard-panel.
 */
.dashboard-panel
> .profile-panel-header
+ * {
    margin-top: 16px !important;
}


/* ---------------------------------------------------------
   FORMULARIOS DE OPERACIÓN
   --------------------------------------------------------- */

/*
 * Antes estos formularios tenían un margin-top general
 * de 24 px.
 *
 * Dentro de un panel con encabezado prevalece ahora
 * el estándar global de 16 px.
 */
.dashboard-panel
> .panel-header
+ .finance-operation-form,

.dashboard-panel
> .panel-header
+ .xtaron-operation-form {
    margin-top: 16px !important;
}


/* ---------------------------------------------------------
   PANELES INFORMATIVOS LATERALES
   --------------------------------------------------------- */

/*
 * Estos títulos históricamente tenían margin-bottom
 * adicional en el propio H2.
 *
 * Lo eliminamos únicamente cuando forman parte de
 * panel-header para que el espacio real sea exactamente
 * el estándar de 16 px.
 */
.finance-operation-info
> .panel-header
h2,

.xtaron-operation-info
> .panel-header
h2 {
    margin: 8px 0 0;
}


/* ---------------------------------------------------------
   TABLAS INTERNAS
   --------------------------------------------------------- */

.dashboard-panel
> .panel-header
+ .dashboard-table-wrapper,

.dashboard-panel
> .panel-header
+ .responsive-table {
    margin-top: 16px !important;
}


/* ---------------------------------------------------------
   GRILLAS / RESÚMENES INTERNOS
   --------------------------------------------------------- */

.dashboard-panel
> .panel-header
+ .provider-link-info-grid,

.dashboard-panel
> .panel-header
+ .finance-cancel-summary,

.dashboard-panel
> .panel-header
+ .reports-breakdown-list,

.dashboard-panel
> .panel-header
+ .xtaron-operation-steps,

.dashboard-panel
> .panel-header
+ .finance-operation-steps {
    margin-top: 16px !important;
}


/* ---------------------------------------------------------
   HISTORIALES / AUDITORÍA
   --------------------------------------------------------- */

.dashboard-panel
> .panel-header
+ .provider-cancellation-history {
    margin-top: 16px !important;
}


/* ---------------------------------------------------------
   ACCIONES INMEDIATAS
   --------------------------------------------------------- */

.dashboard-panel
> .panel-header
+ form {
    margin-top: 16px !important;
}


/* =========================================================
   XTARON ALERTS PAGE SPACING
   ========================================================= */

/*
 * Estándar XtarON:
 * encabezado principal de Alertas
 * -> 16 px
 * -> primer bloque de contenido.
 */
.xtaron-alerts-page
> .dashboard-header
+ * {
    margin-top: 16px !important;
}


/* =========================================================
   XTARON GLOBAL INTERACTIVE CARD HOVER
   ========================================================= */

/*
 * Estándar visual para tarjetas/recuadros clicables.
 *
 * Objetivo:
 * - hacer evidente que el elemento es interactivo;
 * - conservar el diseño oscuro de XtarON;
 * - usar cian como color de acción;
 * - no confundir el hover con estados semánticos.
 */


/* ---------------------------------------------------------
   TARJETAS INTERACTIVAS
   --------------------------------------------------------- */

.reports-card-link,
.inventory-summary-card-link,
.xtaron-summary-card-link,
a.provider-summary-card,
a.alert-summary-card {
    position: relative;
    isolation: isolate;
    cursor: pointer;

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease,
        filter 180ms ease;
}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

.reports-card-link:hover,
.inventory-summary-card-link:hover,
.xtaron-summary-card-link:hover,
a.provider-summary-card:hover,
a.alert-summary-card:hover {
    transform: translateY(-3px);

    border-color:
        rgba(34, 211, 238, .48);

    background:
        linear-gradient(
            145deg,
            rgba(34, 211, 238, .045),
            rgba(255, 255, 255, .022)
        );

    box-shadow:
        0 8px 22px rgba(0, 0, 0, .20),
        0 0 9px rgba(34, 211, 238, .10),
        0 0 22px rgba(34, 211, 238, .075),
        inset 0 0 16px rgba(34, 211, 238, .025);

    filter: brightness(1.035);
}


/* ---------------------------------------------------------
   LUZ SUPERIOR MUY SUTIL
   --------------------------------------------------------- */

.reports-card-link::after,
.inventory-summary-card-link::after,
.xtaron-summary-card-link::after,
a.provider-summary-card::after,
a.alert-summary-card::after {
    content: "";
    position: absolute;
    z-index: -1;

    inset: -1px;

    pointer-events: none;

    border-radius: inherit;

    opacity: 0;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(34, 211, 238, .11),
            transparent 58%
        );

    transition:
        opacity 180ms ease;
}


.reports-card-link:hover::after,
.inventory-summary-card-link:hover::after,
.xtaron-summary-card-link:hover::after,
a.provider-summary-card:hover::after,
a.alert-summary-card:hover::after {
    opacity: 1;
}


/* ---------------------------------------------------------
   ELEMENTOS DE ACCIÓN INTERNOS
   --------------------------------------------------------- */

/*
 * La flecha de Reportes y otros indicadores de acción
 * reciben un pequeño realce cuando la tarjeta completa
 * está bajo el puntero.
 */

.reports-card-link:hover
.reports-card-footer strong {
    color: #67e8f9;

    text-shadow:
        0 0 8px rgba(34, 211, 238, .40);
}


/* ---------------------------------------------------------
   INVENTARIO
   --------------------------------------------------------- */

/*
 * Inventario queda expresamente incluido para que
 * Existencias / Atención y futuros cuadros clicables
 * tengan el mismo feedback visual.
 */

.inventory-summary-card-link:hover {
    text-decoration: none;
}


/* ---------------------------------------------------------
   ACCESIBILIDAD — TECLADO
   --------------------------------------------------------- */

.reports-card-link:focus-visible,
.inventory-summary-card-link:focus-visible,
.xtaron-summary-card-link:focus-visible,
a.provider-summary-card:focus-visible,
a.alert-summary-card:focus-visible {
    outline: none;

    border-color:
        rgba(103, 232, 249, .68);

    box-shadow:
        0 0 0 2px rgba(34, 211, 238, .15),
        0 0 18px rgba(34, 211, 238, .12);
}


/* ---------------------------------------------------------
   CLICK
   --------------------------------------------------------- */

.reports-card-link:active,
.inventory-summary-card-link:active,
.xtaron-summary-card-link:active,
a.provider-summary-card:active,
a.alert-summary-card:active {
    transform: translateY(-1px);

    box-shadow:
        0 3px 10px rgba(0, 0, 0, .18),
        0 0 10px rgba(34, 211, 238, .08);
}


/* ---------------------------------------------------------
   RESPETAR USUARIOS CON MOVIMIENTO REDUCIDO
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .reports-card-link,
    .inventory-summary-card-link,
    .xtaron-summary-card-link,
    a.provider-summary-card,
    a.alert-summary-card {
        transition: none;
    }

    .reports-card-link:hover,
    .inventory-summary-card-link:hover,
    .xtaron-summary-card-link:hover,
    a.provider-summary-card:hover,
    a.alert-summary-card:hover {
        transform: none;
    }
}


/* =========================================================
   XTARON GLOBAL INTERACTIVE TABLE ROW
   ========================================================= */

/*
 * Una fila interactiva debe percibirse visualmente
 * como UN SOLO control, no como varias celdas.
 */

.xtaron-clickable-row {
    position: relative;
    cursor: pointer;

    transition:
        background 180ms ease,
        filter 180ms ease,
        box-shadow 180ms ease;
}


/*
 * Las celdas permanecen transparentes.
 * El fondo interactivo pertenece al TR completo.
 */
.xtaron-clickable-row > td {
    background: transparent;

    transition:
        border-color 180ms ease,
        color 180ms ease;
}


/* ---------------------------------------------------------
   HOVER — UN SOLO RECUADRO NEÓN
   --------------------------------------------------------- */

.customer-table
tbody
.xtaron-clickable-row:hover {
    background:
        linear-gradient(
            90deg,
            rgba(34, 211, 238, .075) 0%,
            rgba(34, 211, 238, .035) 48%,
            rgba(34, 211, 238, .065) 100%
        );

    box-shadow:
        0 0 10px rgba(34, 211, 238, .09),
        0 0 24px rgba(34, 211, 238, .055);

    filter: brightness(1.045);
}


/*
 * Una sola línea superior/inferior continua.
 * No usamos sombras individuales por celda.
 */
.customer-table
tbody
.xtaron-clickable-row:hover > td {
    border-top:
        1px solid rgba(34, 211, 238, .34);

    border-bottom:
        1px solid rgba(34, 211, 238, .34);
}


/*
 * Solamente los extremos crean los laterales
 * del gran recuadro.
 */
.customer-table
tbody
.xtaron-clickable-row:hover > td:first-child {
    border-left:
        1px solid rgba(34, 211, 238, .42);
}

.customer-table
tbody
.xtaron-clickable-row:hover > td:last-child {
    border-right:
        1px solid rgba(34, 211, 238, .42);
}


/* ---------------------------------------------------------
   FOCO POR TECLADO
   --------------------------------------------------------- */

.xtaron-clickable-row:focus-visible {
    outline: none;

    background:
        rgba(34, 211, 238, .055);

    box-shadow:
        0 0 0 1px rgba(103, 232, 249, .42),
        0 0 18px rgba(34, 211, 238, .09);
}


/* ---------------------------------------------------------
   CLICK
   --------------------------------------------------------- */

.xtaron-clickable-row:active {
    background:
        rgba(34, 211, 238, .095);

    filter: brightness(1.075);
}


/* ---------------------------------------------------------
   MOVIMIENTO REDUCIDO
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .xtaron-clickable-row,
    .xtaron-clickable-row > td {
        transition: none;
    }
}


/* =========================================================
   XTARON CLICKABLE ROW STABLE OVERRIDE
   ========================================================= */

/*
 * La fila completa se percibe como UN solo control.
 * No hay desplazamiento, elevación ni cambio de tamaño.
 */

.customer-table
tbody
.xtaron-clickable-row {
    cursor: pointer;

    transform: none !important;
    filter: none !important;

    transition:
        background 180ms ease,
        box-shadow 180ms ease,
        outline-color 180ms ease;
}


/*
 * Las celdas nunca cambian sus bordes durante el hover.
 * Esto evita cualquier salto vertical.
 */
.customer-table
tbody
.xtaron-clickable-row > td {
    transform: none !important;

    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;

    background: transparent !important;
}


/* ---------------------------------------------------------
   HOVER — UNA SOLA FILA, SIN MOVIMIENTO
   --------------------------------------------------------- */

.customer-table
tbody
.xtaron-clickable-row:hover {
    transform: none !important;
    filter: none !important;

    background:
        linear-gradient(
            90deg,
            rgba(34, 211, 238, .075),
            rgba(34, 211, 238, .035),
            rgba(34, 211, 238, .075)
        ) !important;

    outline:
        1px solid rgba(34, 211, 238, .38);

    outline-offset: -1px;

    box-shadow:
        0 0 10px rgba(34, 211, 238, .08),
        0 0 22px rgba(34, 211, 238, .05);
}


/*
 * El fondo lo pinta el TR completo.
 * Las celdas se mantienen transparentes.
 */
.customer-table
tbody
.xtaron-clickable-row:hover > td {
    background: transparent !important;

    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;

    border-bottom:
        1px solid var(--border) !important;

    box-shadow: none !important;
}


/* ---------------------------------------------------------
   FOCO DE TECLADO
   --------------------------------------------------------- */

.customer-table
tbody
.xtaron-clickable-row:focus-visible {
    outline:
        1px solid rgba(103, 232, 249, .60);

    outline-offset: -1px;

    background:
        rgba(34, 211, 238, .055) !important;

    box-shadow:
        0 0 16px rgba(34, 211, 238, .08);
}


/* ---------------------------------------------------------
   CLICK
   --------------------------------------------------------- */

.customer-table
tbody
.xtaron-clickable-row:active {
    transform: none !important;

    background:
        rgba(34, 211, 238, .09) !important;
}


/* =========================================================
   XTARON ADAPTIVE INTERACTIVE GLOW
   ========================================================= */

/*
 * El efecto interactivo debe respetar siempre
 * la geometría real del elemento:
 *
 * - esquinas curvas -> neón curvo
 * - esquinas cuadradas -> neón cuadrado
 *
 * Evitamos outline para impedir destellos blancos
 * durante la transición del hover.
 */


/* ---------------------------------------------------------
   FILAS INTERACTIVAS
   --------------------------------------------------------- */

.customer-table
tbody
.xtaron-clickable-row {
    /*
     * Una fila normal de tabla es cuadrada.
     * Puede sobrescribirse en cualquier caso especial:
     *
     * --xtaron-interactive-radius: 10px;
     */
    --xtaron-interactive-radius: 0px;

    border-radius:
        var(--xtaron-interactive-radius);

    outline: none !important;

    transition:
        background 180ms ease,
        box-shadow 180ms ease;
}


/*
 * El navegador tampoco debe dibujar su contorno
 * temporal al recibir foco por clic.
 */
.customer-table
tbody
.xtaron-clickable-row:focus,
.customer-table
tbody
.xtaron-clickable-row:focus-visible {
    outline: none !important;
}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

.customer-table
tbody
.xtaron-clickable-row:hover {
    outline: none !important;

    background:
        linear-gradient(
            90deg,
            rgba(34, 211, 238, .075),
            rgba(34, 211, 238, .035),
            rgba(34, 211, 238, .075)
        ) !important;

    border-radius:
        var(--xtaron-interactive-radius);

    /*
     * Primer shadow = contorno neón.
     * Los siguientes = halo exterior.
     *
     * Como todo pertenece al TR,
     * visualmente sigue siendo UN solo botón.
     */
    box-shadow:
        inset 0 0 0 1px
            rgba(34, 211, 238, .40),

        0 0 8px
            rgba(34, 211, 238, .09),

        0 0 20px
            rgba(34, 211, 238, .055) !important;
}


/* ---------------------------------------------------------
   FOCO DE TECLADO
   --------------------------------------------------------- */

.customer-table
tbody
.xtaron-clickable-row:focus-visible {
    background:
        rgba(34, 211, 238, .055) !important;

    box-shadow:
        inset 0 0 0 1px
            rgba(103, 232, 249, .58),

        0 0 16px
            rgba(34, 211, 238, .09) !important;
}


/* ---------------------------------------------------------
   CELDAS
   --------------------------------------------------------- */

/*
 * Ninguna celda dibuja su propio borde.
 * El contorno pertenece exclusivamente
 * a la fila completa.
 */
.customer-table
tbody
.xtaron-clickable-row:hover > td,
.customer-table
tbody
.xtaron-clickable-row:focus-visible > td {
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;

    box-shadow: none !important;

    background: transparent !important;
}


/* =========================================================
   TARJETAS INTERACTIVAS
   ========================================================= */

/*
 * Las tarjetas ya tienen su propio border-radius.
 * El halo usa inherit para seguir exactamente
 * ese mismo contorno.
 */

.reports-card-link,
.inventory-summary-card-link,
.xtaron-summary-card-link,
a.provider-summary-card,
a.alert-summary-card {
    border-radius: inherit;
}


/*
 * El pseudo-elemento luminoso debe copiar
 * automáticamente las esquinas del control.
 */
.reports-card-link::after,
.inventory-summary-card-link::after,
.xtaron-summary-card-link::after,
a.provider-summary-card::after,
a.alert-summary-card::after {
    border-radius: inherit !important;
}


/* =========================================================
   XTARON NETWORK COMPLETE INTERACTION SYSTEM
   ========================================================= */

/*
 * Lenguaje interactivo único para Infraestructura.
 *
 * - SIN desplazamiento.
 * - SIN outline blanco.
 * - Neón cian atenuado.
 * - Respeta la geometría original.
 */


/* =========================================================
   FILAS CLICABLES
   ========================================================= */

.network-page
.xtaron-clickable-row {
    cursor: pointer;

    outline: none !important;

    transform: none !important;
    filter: none !important;

    transition:
        background 180ms ease,
        box-shadow 180ms ease;
}


.network-page
.xtaron-clickable-row:hover,
.network-page
.xtaron-clickable-row:focus-visible {
    outline: none !important;

    transform: none !important;
    filter: none !important;

    background:
        linear-gradient(
            90deg,
            rgba(34, 211, 238, .075),
            rgba(34, 211, 238, .032),
            rgba(34, 211, 238, .075)
        ) !important;

    box-shadow:
        inset 0 0 0 1px
            rgba(34, 211, 238, .40),

        0 0 8px
            rgba(34, 211, 238, .09),

        0 0 20px
            rgba(34, 211, 238, .055) !important;
}


/*
 * Las celdas nunca se comportan como botones
 * independientes.
 */
.network-page
.xtaron-clickable-row:hover > td,
.network-page
.xtaron-clickable-row:focus-visible > td {
    background: transparent !important;

    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;

    box-shadow: none !important;

    transform: none !important;
}


/* =========================================================
   TARJETAS CLICABLES
   ========================================================= */

.network-page
.xtaron-clickable-card {
    position: relative;
    isolation: isolate;

    cursor: pointer;

    outline: none !important;

    transform: none !important;

    transition:
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}


/*
 * El glow utiliza el border-radius REAL
 * del recuadro.
 */
.network-page
.xtaron-clickable-card:hover,
.network-page
.xtaron-clickable-card:focus-visible {
    transform: none !important;

    outline: none !important;

    border-color:
        rgba(34, 211, 238, .46) !important;

    background:
        linear-gradient(
            145deg,
            rgba(34, 211, 238, .07),
            rgba(34, 211, 238, .018)
        ) !important;

    box-shadow:
        inset 0 0 0 1px
            rgba(34, 211, 238, .16),

        0 0 8px
            rgba(34, 211, 238, .10),

        0 0 20px
            rgba(34, 211, 238, .06) !important;
}


/* =========================================================
   BOTONES
   ========================================================= */

.network-page
.xtaron-button,

.network-page
.provider-action-button,

.network-page
.reports-button {
    transform: none !important;

    transition:
        color 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}


.network-page
.xtaron-button:hover,

.network-page
.provider-action-button:hover,

.network-page
.reports-button:hover {
    transform: none !important;

    border-color:
        rgba(34, 211, 238, .52) !important;

    box-shadow:
        0 0 7px rgba(34, 211, 238, .10),
        0 0 17px rgba(34, 211, 238, .07) !important;
}


/* =========================================================
   ENLACES DE TOPOLOGÍA
   ========================================================= */

.network-page
.network-topology-link {
    transition:
        color 160ms ease,
        text-shadow 160ms ease;
}


.network-page
.network-topology-link:hover,
.network-page
.network-topology-link:focus-visible {
    outline: none;

    color: #67e8f9;

    text-shadow:
        0 0 7px rgba(34, 211, 238, .32);
}


/* =========================================================
   CLICK
   ========================================================= */

.network-page
.xtaron-clickable-row:active,

.network-page
.xtaron-clickable-card:active {
    transform: none !important;

    filter: none !important;
}


/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .network-page
    .xtaron-clickable-row,

    .network-page
    .xtaron-clickable-card,

    .network-page
    .xtaron-button,

    .network-page
    .provider-action-button,

    .network-page
    .reports-button,

    .network-page
    .network-topology-link {
        transition: none !important;
    }
}


/* =========================================================
   XTARON NETWORK COMPLETE INTERACTION SYSTEM
   ========================================================= */

/*
 * Lenguaje interactivo único para Infraestructura.
 *
 * - SIN desplazamiento.
 * - SIN outline blanco.
 * - Neón cian atenuado.
 * - Respeta la geometría original.
 */


/* =========================================================
   FILAS CLICABLES
   ========================================================= */

.network-page
.xtaron-clickable-row {
    cursor: pointer;

    outline: none !important;

    transform: none !important;
    filter: none !important;

    transition:
        background 180ms ease,
        box-shadow 180ms ease;
}


.network-page
.xtaron-clickable-row:hover,
.network-page
.xtaron-clickable-row:focus-visible {
    outline: none !important;

    transform: none !important;
    filter: none !important;

    background:
        linear-gradient(
            90deg,
            rgba(34, 211, 238, .075),
            rgba(34, 211, 238, .032),
            rgba(34, 211, 238, .075)
        ) !important;

    box-shadow:
        inset 0 0 0 1px
            rgba(34, 211, 238, .40),

        0 0 8px
            rgba(34, 211, 238, .09),

        0 0 20px
            rgba(34, 211, 238, .055) !important;
}


/*
 * Las celdas nunca se comportan como botones
 * independientes.
 */
.network-page
.xtaron-clickable-row:hover > td,
.network-page
.xtaron-clickable-row:focus-visible > td {
    background: transparent !important;

    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;

    box-shadow: none !important;

    transform: none !important;
}


/* =========================================================
   TARJETAS CLICABLES
   ========================================================= */

.network-page
.xtaron-clickable-card {
    position: relative;
    isolation: isolate;

    cursor: pointer;

    outline: none !important;

    transform: none !important;

    transition:
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}


/*
 * El glow utiliza el border-radius REAL
 * del recuadro.
 */
.network-page
.xtaron-clickable-card:hover,
.network-page
.xtaron-clickable-card:focus-visible {
    transform: none !important;

    outline: none !important;

    border-color:
        rgba(34, 211, 238, .46) !important;

    background:
        linear-gradient(
            145deg,
            rgba(34, 211, 238, .07),
            rgba(34, 211, 238, .018)
        ) !important;

    box-shadow:
        inset 0 0 0 1px
            rgba(34, 211, 238, .16),

        0 0 8px
            rgba(34, 211, 238, .10),

        0 0 20px
            rgba(34, 211, 238, .06) !important;
}


/* =========================================================
   BOTONES
   ========================================================= */

.network-page
.xtaron-button,

.network-page
.provider-action-button,

.network-page
.reports-button {
    transform: none !important;

    transition:
        color 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}


.network-page
.xtaron-button:hover,

.network-page
.provider-action-button:hover,

.network-page
.reports-button:hover {
    transform: none !important;

    border-color:
        rgba(34, 211, 238, .52) !important;

    box-shadow:
        0 0 7px rgba(34, 211, 238, .10),
        0 0 17px rgba(34, 211, 238, .07) !important;
}


/* =========================================================
   ENLACES DE TOPOLOGÍA
   ========================================================= */

.network-page
.network-topology-link {
    transition:
        color 160ms ease,
        text-shadow 160ms ease;
}


.network-page
.network-topology-link:hover,
.network-page
.network-topology-link:focus-visible {
    outline: none;

    color: #67e8f9;

    text-shadow:
        0 0 7px rgba(34, 211, 238, .32);
}


/* =========================================================
   CLICK
   ========================================================= */

.network-page
.xtaron-clickable-row:active,

.network-page
.xtaron-clickable-card:active {
    transform: none !important;

    filter: none !important;
}


/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .network-page
    .xtaron-clickable-row,

    .network-page
    .xtaron-clickable-card,

    .network-page
    .xtaron-button,

    .network-page
    .provider-action-button,

    .network-page
    .reports-button,

    .network-page
    .network-topology-link {
        transition: none !important;
    }
}


/* =========================================================
   XTARON REPORT DETAIL PAGE SPACING
   ========================================================= */

/*
 * Reportes internos:
 *
 * encabezado de página
 *        ↓
 *      16 px
 *        ↓
 * panel de filtros
 *
 * No modifica el espaciado interno de los paneles.
 */

.reports-detail-page
> .dashboard-header
+ .reports-filter-panel {
    margin-top: 16px;
}


/* =========================================================
   XTARON ROUTEROS RESOURCE PANEL
   ========================================================= */

.network-resource-panel {
    margin-top: 16px;
}


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.network-resource-header {
    align-items: center;
}

.network-resource-updated {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.network-resource-updated span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
}

.network-resource-updated strong {
    font-size: 11px;
}


/* ---------------------------------------------------------
   SUMMARY
   --------------------------------------------------------- */

.network-resource-grid {
    margin-top: 16px;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;
}

.network-resource-card {
    min-width: 0;
    padding: 16px;

    border: 1px solid var(--border);
    border-radius: 12px;

    background:
        rgba(255, 255, 255, .018);
}

.network-resource-card span {
    display: block;

    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
}

.network-resource-card strong {
    display: block;

    margin-top: 8px;

    overflow-wrap: anywhere;

    font-size: 14px;
}

.network-resource-card small {
    display: block;

    margin-top: 6px;

    color: var(--muted);
    font-size: 10px;
}


/* ---------------------------------------------------------
   RESOURCE METERS
   --------------------------------------------------------- */

.network-resource-meters {
    margin-top: 16px;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;
}

.network-resource-meter {
    padding: 18px;

    border: 1px solid var(--border);
    border-radius: 12px;

    background:
        rgba(255, 255, 255, .015);
}

.network-resource-meter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;
}

.network-resource-meter-header > div > span {
    display: block;

    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
}

.network-resource-meter-header > div > strong {
    display: block;

    margin-top: 6px;

    font-size: 12px;
}

.network-resource-percent {
    color: #67e8f9;
    font-size: 17px;

    text-shadow:
        0 0 8px
        rgba(34, 211, 238, .18);
}

.network-resource-track {
    height: 6px;

    margin-top: 16px;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .055);
}

.network-resource-fill {
    width: 0;
    height: 100%;

    min-width: 0;
    max-width: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            rgba(34, 211, 238, .72),
            rgba(103, 232, 249, .95)
        );

    box-shadow:
        0 0 8px
        rgba(34, 211, 238, .18);
}

.network-resource-meter-footer {
    margin-top: 10px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    color: var(--muted);
    font-size: 10px;
}

.network-resource-meter-footer strong {
    color: var(--text);
    font-size: 10px;
}


/* ---------------------------------------------------------
   TECHNICAL INFO
   --------------------------------------------------------- */

.network-resource-technical {
    margin-top: 16px;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 1px;

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 12px;

    background: var(--border);
}

.network-resource-technical > div {
    padding: 14px;

    background: var(--surface);
}

.network-resource-technical span {
    display: block;

    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
}

.network-resource-technical strong {
    display: block;

    margin-top: 7px;

    font-size: 11px;
}


/* ---------------------------------------------------------
   EMPTY
   --------------------------------------------------------- */

.network-resource-empty {
    margin-top: 16px;
    padding: 20px;

    border: 1px dashed
        rgba(34, 211, 238, .18);

    border-radius: 12px;

    background:
        rgba(34, 211, 238, .018);
}

.network-resource-empty strong {
    font-size: 12px;
}

.network-resource-empty p {
    max-width: 680px;

    margin: 8px 0 0;

    color: var(--muted);
    font-size: 11px;
    line-height: 1.6;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1050px) {

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


@media (max-width: 760px) {

    .network-resource-grid,
    .network-resource-meters,
    .network-resource-technical {
        grid-template-columns: 1fr;
    }

    .network-resource-updated {
        align-items: flex-start;
    }
}


/* =========================================================
   XTARON ROUTEROS LIVE MONITOR
   ========================================================= */


/* ---------------------------------------------------------
   ESTADO
   --------------------------------------------------------- */

.network-resource-live-status {
    min-width: 150px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 10px;
}

.network-resource-live-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 9px;

    border-radius: 50%;

    background: var(--muted);

    transition:
        background 180ms ease,
        box-shadow 180ms ease;
}

.network-resource-live-status > div {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 3px;
}

.network-resource-live-status strong {
    font-size: 10px;
    letter-spacing: .1em;
}

.network-resource-live-status small {
    color: var(--muted);
    font-size: 9px;
}


/* Conectando */

.network-resource-panel[
    data-live-state="connecting"
]
.network-resource-live-dot {
    background: #22d3ee;

    box-shadow:
        0 0 7px rgba(34, 211, 238, .35),
        0 0 14px rgba(34, 211, 238, .16);
}

.network-resource-panel[
    data-live-state="connecting"
]
.network-resource-live-status strong {
    color: #67e8f9;
}


/* En vivo */

.network-resource-panel[
    data-live-state="live"
]
.network-resource-live-dot {
    background: #34d399;

    box-shadow:
        0 0 7px rgba(52, 211, 153, .38),
        0 0 16px rgba(52, 211, 153, .16);
}

.network-resource-panel[
    data-live-state="live"
]
.network-resource-live-status strong {
    color: #6ee7b7;
}


/* Error */

.network-resource-panel[
    data-live-state="error"
]
.network-resource-live-dot {
    background: #fb7185;

    box-shadow:
        0 0 7px rgba(251, 113, 133, .40),
        0 0 16px rgba(251, 113, 133, .18);
}

.network-resource-panel[
    data-live-state="error"
]
.network-resource-live-status strong {
    color: #fda4af;
}


/* Pausado */

.network-resource-panel[
    data-live-state="paused"
]
.network-resource-live-dot {
    background: var(--muted);

    box-shadow: none;
}

.network-resource-panel[
    data-live-state="paused"
]
.network-resource-live-status strong {
    color: var(--muted);
}


/* ---------------------------------------------------------
   BARRAS EN VIVO
   --------------------------------------------------------- */

.network-resource-fill {
    width: 0;

    transition:
        width 450ms ease;
}


/* ---------------------------------------------------------
   NOTA
   --------------------------------------------------------- */

.network-resource-live-note {
    margin-top: 16px;
    padding-top: 14px;

    border-top:
        1px solid var(--border);
}

.network-resource-live-note span {
    display: block;

    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
}

.network-resource-live-note p {
    max-width: 720px;

    margin: 6px 0 0;

    color: var(--muted);
    font-size: 10px;
    line-height: 1.6;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 760px) {

    .network-resource-live-status {
        justify-content: flex-start;
    }

    .network-resource-live-status > div {
        align-items: flex-start;
    }
}


/* ---------------------------------------------------------
   MOVIMIENTO REDUCIDO
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .network-resource-fill,
    .network-resource-live-dot {
        transition: none;
    }
}


/* =========================================================
   XTARON ROUTEROS LIVE INTERFACES
   ========================================================= */

.network-interface-panel {
    margin-top: 16px;
}


/* ---------------------------------------------------------
   LIVE STATUS
   --------------------------------------------------------- */

.network-interface-live-status {
    min-width: 150px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 10px;
}

.network-interface-live-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 9px;

    border-radius: 50%;

    background: var(--muted);

    transition:
        background 180ms ease,
        box-shadow 180ms ease;
}

.network-interface-live-status > div {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 3px;
}

.network-interface-live-status strong {
    font-size: 10px;
    letter-spacing: .1em;
}

.network-interface-live-status small {
    color: var(--muted);
    font-size: 9px;
}


/* Conectando */

.network-interface-panel[
    data-live-state="connecting"
]
.network-interface-live-dot {
    background: #22d3ee;

    box-shadow:
        0 0 7px rgba(34, 211, 238, .35),
        0 0 14px rgba(34, 211, 238, .16);
}

.network-interface-panel[
    data-live-state="connecting"
]
.network-interface-live-status strong {
    color: #67e8f9;
}


/* En vivo */

.network-interface-panel[
    data-live-state="live"
]
.network-interface-live-dot {
    background: #34d399;

    box-shadow:
        0 0 7px rgba(52, 211, 153, .38),
        0 0 16px rgba(52, 211, 153, .16);
}

.network-interface-panel[
    data-live-state="live"
]
.network-interface-live-status strong {
    color: #6ee7b7;
}


/* Error */

.network-interface-panel[
    data-live-state="error"
]
.network-interface-live-dot {
    background: #fb7185;

    box-shadow:
        0 0 7px rgba(251, 113, 133, .40),
        0 0 16px rgba(251, 113, 133, .18);
}

.network-interface-panel[
    data-live-state="error"
]
.network-interface-live-status strong {
    color: #fda4af;
}


/* Pausado */

.network-interface-panel[
    data-live-state="paused"
]
.network-interface-live-dot {
    background: var(--muted);

    box-shadow: none;
}

.network-interface-panel[
    data-live-state="paused"
]
.network-interface-live-status strong {
    color: var(--muted);
}


/* ---------------------------------------------------------
   TOOLBAR
   --------------------------------------------------------- */

.network-interface-toolbar {
    display: flex;
    align-items: end;

    gap: 12px;

    flex-wrap: wrap;
}

.network-interface-search {
    flex: 1 1 280px;
}

.network-interface-filter {
    flex: 0 1 180px;
}

.network-interface-search label,
.network-interface-filter label,
.network-interface-counter span {
    display: block;

    margin-bottom: 7px;

    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
}

.network-interface-search input,
.network-interface-filter select {
    width: 100%;
    min-height: 40px;

    padding: 0 12px;

    color: var(--text);

    border:
        1px solid var(--border);

    border-radius: 10px;

    outline: none;

    background:
        rgba(255, 255, 255, .025);

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease;
}

.network-interface-search input:focus,
.network-interface-filter select:focus {
    border-color:
        rgba(34, 211, 238, .45);

    box-shadow:
        0 0 0 1px rgba(34, 211, 238, .08),
        0 0 12px rgba(34, 211, 238, .055);

    background:
        rgba(34, 211, 238, .025);
}

.network-interface-counter {
    min-width: 100px;

    padding: 0 2px 5px;

    text-align: right;
}

.network-interface-counter strong {
    font-size: 13px;
}


/* ---------------------------------------------------------
   TABLE
   --------------------------------------------------------- */

.network-interface-table-wrap {
    margin-top: 16px;

    border:
        1px solid var(--border);

    border-radius: 12px;

    overflow-x: auto;
}

.network-interface-table {
    min-width: 930px;
}

.network-interface-table tbody tr {
    /*
     * Estas filas NO son botones.
     * Solo mostramos datos técnicos.
     */
    cursor: default;
}

.network-interface-loading {
    padding: 24px !important;

    color: var(--muted);

    text-align: center !important;
}


/* ---------------------------------------------------------
   STATUS
   --------------------------------------------------------- */

.network-interface-state {
    display: inline-flex;
    align-items: center;

    min-height: 24px;

    padding: 4px 9px;

    border: 1px solid transparent;
    border-radius: 999px;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: .06em;
}

.network-interface-state-running {
    color: #6ee7b7;

    border-color:
        rgba(52, 211, 153, .20);

    background:
        rgba(52, 211, 153, .07);

    box-shadow:
        0 0 9px rgba(52, 211, 153, .055);
}

.network-interface-state-down {
    color: #fda4af;

    border-color:
        rgba(251, 113, 133, .20);

    background:
        rgba(251, 113, 133, .065);

    box-shadow:
        0 0 9px rgba(251, 113, 133, .05);
}

.network-interface-state-disabled {
    color: var(--muted);

    border-color:
        rgba(255, 255, 255, .09);

    background:
        rgba(255, 255, 255, .025);
}


/* ---------------------------------------------------------
   TRAFFIC
   --------------------------------------------------------- */

.network-interface-rate {
    display: block;

    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.network-interface-rate-rx {
    color: #67e8f9;

    text-shadow:
        0 0 7px
        rgba(34, 211, 238, .11);
}

.network-interface-rate-tx {
    color: #6ee7b7;

    text-shadow:
        0 0 7px
        rgba(52, 211, 153, .10);
}


/* ---------------------------------------------------------
   WAN OUTAGE HISTORY
   --------------------------------------------------------- */

.network-history-outage-history {
    margin-top: 16px;

    padding: 16px;

    border:
        1px solid rgba(148, 163, 184, .12);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, .01);
}


.network-history-outage-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;
}


.network-history-outage-history-header > span {
    color: var(--muted);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .09em;
}


.network-history-outage-history-header > small {
    color: var(--muted);

    font-size: 9px;
}


.network-history-outage-table {
    margin-top: 12px;
}


.network-history-outage-table[hidden] {
    display: none;
}


.network-history-outage-table-head,
.network-history-outage-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(0, 1.15fr)
        minmax(0, .85fr)
        minmax(0, 1.2fr);

    column-gap: 18px;
}


.network-history-outage-table-head {
    padding:
        0 10px 8px;

    color: var(--muted);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .07em;
}


.network-history-outage-row {
    align-items: center;

    min-height: 42px;

    padding:
        9px 10px;

    border-top:
        1px solid rgba(148, 163, 184, .09);
}


.network-history-outage-row:first-child {
    border-top:
        1px solid rgba(148, 163, 184, .12);
}


.network-history-outage-cell {
    min-width: 0;
}


.network-history-outage-cell::before {
    display: none;

    content:
        attr(data-label);
}


.network-history-outage-cell > strong {
    display: block;

    overflow: hidden;

    font-size: 10px;
    font-weight: 600;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.network-history-outage-row[
    data-event-type="outage"
]
.network-history-outage-event > strong {
    color: #fda4af;
}


.network-history-outage-row[
    data-event-type="degradation"
]
.network-history-outage-event > strong {
    color: #fde68a;
}


.network-history-outage-row[
    data-event-type="monitoring"
]
.network-history-outage-event > strong {
    color: #93c5fd;
}


.network-history-outage-row[
    data-status="recovered"
]
.network-history-outage-state > strong {
    color: #6ee7b7;
}


.network-history-outage-row[
    data-status="ongoing"
]
.network-history-outage-state > strong {
    color: #fda4af;
}


.network-history-outage-row[
    data-status="escalated"
]
.network-history-outage-state > strong {
    color: #fda4af;
}


.network-history-outage-row[
    data-status="unknown"
]
.network-history-outage-state > strong {
    color: #cbd5e1;
}


/* ---------------------------------------------------------
   HISTORIAL WAN - FILAS EXPANDIBLES
   --------------------------------------------------------- */

.network-history-outage-entry {
    border-top:
        1px solid rgba(148, 163, 184, .09);
}


.network-history-outage-entry:first-child {
    border-top:
        1px solid rgba(148, 163, 184, .12);
}


.network-history-outage-row {
    position: relative;

    width: 100%;

    padding-right: 36px;

    border: 0;
    border-radius: 10px;

    background: transparent;

    color: inherit;
    font: inherit;
    text-align: left;

    appearance: none;

    cursor: pointer;

    transition:
        background 150ms ease,
        box-shadow 150ms ease,
        transform 150ms ease;
}


.network-history-outage-row:hover {
    background:
        rgba(34, 211, 238, .035);

    box-shadow:
        inset 0 0 0 1px
        rgba(34, 211, 238, .14),
        0 0 18px
        rgba(34, 211, 238, .045);

    transform:
        translateY(-1px);
}


.network-history-outage-row:focus-visible {
    outline: none;

    background:
        rgba(34, 211, 238, .045);

    box-shadow:
        inset 0 0 0 1px
        rgba(34, 211, 238, .28),
        0 0 20px
        rgba(34, 211, 238, .08);
}


.network-history-outage-row.is-expanded {
    background:
        rgba(34, 211, 238, .04);

    box-shadow:
        inset 0 0 0 1px
        rgba(34, 211, 238, .17);
}


.network-history-outage-row::after {
    content: "›";

    position: absolute;
    top: 50%;
    right: 13px;

    color:
        rgba(103, 232, 249, .7);

    font-size: 18px;
    font-weight: 400;

    transform:
        translateY(-50%);

    transition:
        transform 150ms ease,
        color 150ms ease;
}


.network-history-outage-row:hover::after,
.network-history-outage-row:focus-visible::after,
.network-history-outage-row.is-expanded::after {
    color: #67e8f9;
}


.network-history-outage-row.is-expanded::after {
    transform:
        translateY(-50%)
        rotate(90deg);
}


.network-history-event-detail {
    margin:
        0 10px 10px;

    padding:
        14px;

    border:
        1px solid
        rgba(34, 211, 238, .11);

    border-radius:
        10px;

    background:
        rgba(15, 23, 42, .38);
}


.network-history-event-detail[hidden] {
    display: none;
}


.network-history-event-detail-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding-bottom: 11px;

    border-bottom:
        1px solid
        rgba(148, 163, 184, .08);
}


.network-history-event-detail-heading > span {
    color: #67e8f9;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .09em;
}


.network-history-event-detail-heading > small {
    color: var(--muted);

    font-size: 8px;
}


.network-history-event-operational {
    margin-top: 11px;

    padding:
        11px 12px;

    border:
        1px solid
        rgba(34, 211, 238, .12);

    border-radius:
        8px;

    background:
        rgba(34, 211, 238, .025);
}


.network-history-event-operational > span {
    display: block;

    color: var(--muted);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .08em;
}


.network-history-event-operational > strong {
    display: block;

    margin-top: 5px;

    color: #a5f3fc;

    font-size: 10px;
    font-weight: 600;

    line-height: 1.45;

    overflow-wrap: anywhere;
}


.network-history-event-diagnostics-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 9px;

    margin-top: 11px;
}


.network-history-event-diagnostic {
    min-width: 0;

    padding:
        10px 11px;

    border:
        1px solid
        rgba(148, 163, 184, .09);

    border-radius:
        8px;

    background:
        rgba(255, 255, 255, .018);
}


.network-history-event-diagnostic-wide {
    grid-column:
        1 / -1;
}


.network-history-event-diagnostic > span {
    display: block;

    color: var(--muted);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .07em;
}


.network-history-event-diagnostic > strong {
    display: block;

    margin-top: 6px;

    overflow-wrap: anywhere;

    color: var(--text);

    font-size: 10px;
    font-weight: 600;

    line-height: 1.45;
}


.network-history-event-diagnostic > small {
    display: block;

    margin-top: 4px;

    color: var(--muted);

    font-size: 8px;
}


@media (max-width: 900px) {

    .network-history-event-diagnostics-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 760px) {

    .network-history-outage-table-head {
        display: none;
    }


    .network-history-outage-row {
        grid-template-columns:
            minmax(0, 1fr);

        gap: 9px;

        padding:
            12px 34px 12px 10px;
    }


    .network-history-outage-cell {
        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 16px;
    }


    .network-history-outage-cell::before {
        display: block;

        flex: 0 0 auto;

        color: var(--muted);

        font-size: 8px;
        font-weight: 700;

        letter-spacing: .06em;
    }


    .network-history-outage-cell > strong {
        text-align: right;
    }


    .network-history-event-detail {
        margin:
            0 4px 10px;

        padding:
            12px;
    }


    .network-history-event-detail-heading {
        align-items: flex-start;
        flex-direction: column;

        gap: 5px;
    }


    .network-history-event-diagnostics-grid {
        grid-template-columns:
            minmax(0, 1fr);
    }
}


@media (prefers-reduced-motion: reduce) {

    .network-history-outage-row,
    .network-history-outage-row::after {
        transition: none;
    }
}


.network-history-outage-empty {
    margin:
        12px 0 0;

    padding:
        12px 14px;

    border:
        1px dashed rgba(148, 163, 184, .12);

    border-radius: 9px;

    color: var(--muted);

    font-size: 9px;
}


.network-history-outage-empty[hidden] {
    display: none;
}


/* ---------------------------------------------------------
   NOTE
   --------------------------------------------------------- */

.network-interface-note {
    margin-top: 16px;
    padding-top: 14px;

    border-top:
        1px solid var(--border);
}

.network-interface-note span {
    display: block;

    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
}

.network-interface-note p {
    max-width: 760px;

    margin: 6px 0 0;

    color: var(--muted);
    font-size: 10px;
    line-height: 1.6;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 760px) {

    .network-interface-live-status {
        justify-content: flex-start;
    }

    .network-interface-live-status > div {
        align-items: flex-start;
    }

    .network-interface-search,
    .network-interface-filter {
        flex: 1 1 100%;
    }

    .network-interface-counter {
        width: 100%;
        text-align: left;
    }
}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .network-interface-live-dot,
    .network-interface-search input,
    .network-interface-filter select {
        transition: none;
    }
}


/* =========================================================
   XTARON ROUTEROS INTERFACE SUMMARY
   ========================================================= */

.network-interface-summary-grid {
    margin-top: 16px;

    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 12px;
}

.network-interface-summary-card {
    min-width: 0;

    padding: 15px 16px;

    border:
        1px solid var(--border);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, .018);
}

.network-interface-summary-card > span {
    display: block;

    color: var(--muted);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .1em;
}

.network-interface-summary-card > strong {
    display: block;

    margin-top: 8px;

    font-size: 20px;

    font-variant-numeric:
        tabular-nums;
}

.network-interface-summary-card > small {
    display: block;

    margin-top: 5px;

    color: var(--muted);

    font-size: 9px;
}


/* Semántica */

.network-interface-summary-positive {
    color: #6ee7b7;

    text-shadow:
        0 0 8px
        rgba(52, 211, 153, .12);
}

.network-interface-summary-negative {
    color: #fda4af;

    text-shadow:
        0 0 8px
        rgba(251, 113, 133, .11);
}

.network-interface-summary-accent {
    color: #67e8f9;

    text-shadow:
        0 0 8px
        rgba(34, 211, 238, .12);
}

.network-interface-summary-muted {
    color: var(--muted);
}


/* Toolbar después del resumen */

.network-interface-summary-grid
+ .network-interface-toolbar {
    margin-top: 16px;
}


/* Responsive */

@media (max-width: 1100px) {

    .network-interface-summary-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}


@media (max-width: 760px) {

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


@media (max-width: 480px) {

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


/* =========================================================
   XTARON ROUTEROS MAIN INTERFACES
   ========================================================= */

.network-main-interface-section {
    margin-top: 16px;
}

.network-main-interface-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    margin-bottom: 16px;
}

.network-main-interface-heading > div > span {
    display: block;

    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
}

.network-main-interface-heading h3 {
    margin: 5px 0 0;

    font-size: 14px;
}

.network-main-interface-heading > strong {
    color: #67e8f9;

    font-size: 15px;

    font-variant-numeric:
        tabular-nums;

    text-shadow:
        0 0 8px
        rgba(34, 211, 238, .12);
}


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.network-main-interface-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 12px;
}


/*
 * IMPORTANTE:
 * Estas tarjetas son informativas,
 * no son botones.
 * Por eso no tienen hover de acción.
 */

.network-main-interface-card {
    min-width: 0;

    padding: 16px;

    border:
        1px solid var(--border);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, .018);
}


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.network-main-interface-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;
}

.network-main-interface-card-header > div {
    min-width: 0;
}

.network-main-interface-type {
    display: block;

    color: var(--muted);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .1em;
    text-transform: uppercase;
}

.network-main-interface-name {
    display: block;

    margin-top: 6px;

    overflow-wrap: anywhere;

    font-size: 13px;
}


/* ---------------------------------------------------------
   COMMENT
   --------------------------------------------------------- */

.network-main-interface-comment {
    margin: 9px 0 0;

    color: var(--muted);

    font-size: 10px;
    line-height: 1.45;
}


/* ---------------------------------------------------------
   TRAFFIC
   --------------------------------------------------------- */

.network-main-interface-traffic {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 8px;

    margin-top: 14px;
}

.network-main-interface-traffic > div {
    padding: 10px 11px;

    border:
        1px solid var(--border);

    border-radius: 9px;

    background:
        rgba(255, 255, 255, .014);
}

.network-main-interface-traffic span {
    display: block;

    color: var(--muted);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .08em;
}

.network-main-interface-traffic strong {
    display: block;

    margin-top: 5px;

    font-size: 11px;

    font-variant-numeric:
        tabular-nums;
}

.network-main-interface-rx {
    color: #67e8f9;

    text-shadow:
        0 0 7px
        rgba(34, 211, 238, .10);
}

.network-main-interface-tx {
    color: #6ee7b7;

    text-shadow:
        0 0 7px
        rgba(52, 211, 153, .10);
}


/* ---------------------------------------------------------
   DETAILS
   --------------------------------------------------------- */

.network-main-interface-details {
    display: flex;
    flex-wrap: wrap;

    gap: 6px 12px;

    margin-top: 12px;
}

.network-main-interface-details span {
    color: var(--muted);

    font-size: 9px;

    font-variant-numeric:
        tabular-nums;
}


/* ---------------------------------------------------------
   EMPTY
   --------------------------------------------------------- */

.network-main-interface-empty {
    grid-column: 1 / -1;

    padding: 20px;

    color: var(--muted);

    text-align: center;

    border:
        1px dashed
        rgba(34, 211, 238, .16);

    border-radius: 12px;

    background:
        rgba(34, 211, 238, .015);

    font-size: 10px;
}


/* ---------------------------------------------------------
   TOOLBAR
   --------------------------------------------------------- */

.network-main-interface-section
+ .network-interface-toolbar {
    margin-top: 16px;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1100px) {

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


@media (max-width: 700px) {

    .network-main-interface-grid {
        grid-template-columns: 1fr;
    }

    .network-main-interface-heading {
        align-items: flex-start;
    }
}


/* =========================================================
   XTARON INTERFACE BROWSER SECTION
   ========================================================= */

.network-interface-browser-heading {
    margin-top: 24px;

    padding-top: 18px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 18px;

    border-top:
        1px solid var(--border);
}

.network-interface-browser-heading > div > span {
    display: block;

    color: var(--muted);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .1em;
}

.network-interface-browser-heading h3 {
    margin: 5px 0 0;

    font-size: 14px;
}

.network-interface-browser-heading p {
    max-width: 390px;

    margin: 0;

    color: var(--muted);

    font-size: 10px;
    line-height: 1.5;

    text-align: right;
}


/*
 * Espacio estándar entre encabezado
 * y contenido de la subsección.
 */

.network-interface-browser-heading
+ .network-interface-toolbar {
    margin-top: 16px;
}


/* =========================================================
   SELECT OSCURO NATIVO
   ========================================================= */

.network-interface-filter select {
    color-scheme: dark;

    color: var(--text);

    background-color:
        var(--surface);
}

.network-interface-filter select option {
    color: var(--text);

    background-color:
        var(--surface);
}

.network-interface-filter select option:checked {
    color: var(--text);

    background-color:
        var(--surface);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 760px) {

    .network-interface-browser-heading {
        align-items: flex-start;

        flex-direction: column;
    }

    .network-interface-browser-heading p {
        max-width: none;

        text-align: left;
    }
}


/* =========================================================
   XTARON INTERFACE BROWSER SECTION
   ========================================================= */

.network-interface-browser-heading {
    margin-top: 24px;

    padding-top: 18px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 18px;

    border-top:
        1px solid var(--border);
}

.network-interface-browser-heading > div > span {
    display: block;

    color: var(--muted);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .1em;
}

.network-interface-browser-heading h3 {
    margin: 5px 0 0;

    font-size: 14px;
}

.network-interface-browser-heading p {
    max-width: 390px;

    margin: 0;

    color: var(--muted);

    font-size: 10px;
    line-height: 1.5;

    text-align: right;
}


/*
 * Espacio estándar entre encabezado
 * y contenido de la subsección.
 */

.network-interface-browser-heading
+ .network-interface-toolbar {
    margin-top: 16px;
}


/* =========================================================
   SELECT OSCURO NATIVO
   ========================================================= */

.network-interface-filter select {
    color-scheme: dark;

    color: var(--text);

    background-color:
        var(--surface);
}

.network-interface-filter select option {
    color: var(--text);

    background-color:
        var(--surface);
}

.network-interface-filter select option:checked {
    color: var(--text);

    background-color:
        var(--surface);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 760px) {

    .network-interface-browser-heading {
        align-items: flex-start;

        flex-direction: column;
    }

    .network-interface-browser-heading p {
        max-width: none;

        text-align: left;
    }
}


/* =========================================================
   XTARON ROUTEROS LIVE ROUTING
   ========================================================= */

.network-routing-panel {
    margin-top: 16px;
}


/* ---------------------------------------------------------
   LIVE STATUS
   --------------------------------------------------------- */

.network-routing-live-status {
    min-width: 150px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 10px;
}

.network-routing-live-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 9px;

    border-radius: 50%;

    background: var(--muted);

    transition:
        background 180ms ease,
        box-shadow 180ms ease;
}

.network-routing-live-status > div {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 3px;
}

.network-routing-live-status strong {
    font-size: 10px;
    letter-spacing: .1em;
}

.network-routing-live-status small {
    color: var(--muted);
    font-size: 9px;
}


/* Connecting */

.network-routing-panel[data-live-state="connecting"]
.network-routing-live-dot {
    background: #22d3ee;

    box-shadow:
        0 0 7px rgba(34, 211, 238, .35),
        0 0 14px rgba(34, 211, 238, .16);
}

.network-routing-panel[data-live-state="connecting"]
.network-routing-live-status strong {
    color: #67e8f9;
}


/* Live */

.network-routing-panel[data-live-state="live"]
.network-routing-live-dot {
    background: #34d399;

    box-shadow:
        0 0 7px rgba(52, 211, 153, .38),
        0 0 16px rgba(52, 211, 153, .16);
}

.network-routing-panel[data-live-state="live"]
.network-routing-live-status strong {
    color: #6ee7b7;
}


/* Error */

.network-routing-panel[data-live-state="error"]
.network-routing-live-dot {
    background: #fb7185;

    box-shadow:
        0 0 7px rgba(251, 113, 133, .40),
        0 0 16px rgba(251, 113, 133, .18);
}

.network-routing-panel[data-live-state="error"]
.network-routing-live-status strong {
    color: #fda4af;
}


/* Paused */

.network-routing-panel[data-live-state="paused"]
.network-routing-live-dot {
    background: var(--muted);
    box-shadow: none;
}

.network-routing-panel[data-live-state="paused"]
.network-routing-live-status strong {
    color: var(--muted);
}


/* ---------------------------------------------------------
   PRIMARY ROUTE
   --------------------------------------------------------- */

.network-routing-primary-grid {
    margin-top: 16px;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;
}

.network-routing-primary-card {
    min-width: 0;

    padding: 16px;

    border:
        1px solid var(--border);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, .018);
}

.network-routing-primary-card > span {
    display: block;

    color: var(--muted);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .1em;
}

.network-routing-primary-card > strong {
    display: block;

    margin-top: 8px;

    overflow-wrap: anywhere;

    font-size: 15px;

    font-variant-numeric:
        tabular-nums;
}

.network-routing-primary-card > small {
    display: block;

    margin-top: 6px;

    color: var(--muted);

    font-size: 9px;

    overflow-wrap: anywhere;
}

.network-routing-route-value-active {
    color: #6ee7b7;
}

.network-routing-route-value-inactive {
    color: #fda4af;
}

.network-routing-route-value-disabled,
.network-routing-route-value-unknown {
    color: var(--muted);
}


/* ---------------------------------------------------------
   SUMMARY
   --------------------------------------------------------- */

.network-routing-summary-grid {
    margin-top: 16px;

    display: grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    gap: 10px;
}

.network-routing-summary-grid > article {
    min-width: 0;

    padding: 13px 14px;

    border:
        1px solid var(--border);

    border-radius: 10px;

    background:
        rgba(255, 255, 255, .012);
}

.network-routing-summary-grid span {
    display: block;

    color: var(--muted);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .08em;
}

.network-routing-summary-grid strong {
    display: block;

    margin-top: 7px;

    font-size: 16px;

    font-variant-numeric:
        tabular-nums;
}

.network-routing-positive {
    color: #6ee7b7;
}

.network-routing-negative {
    color: #fda4af;
}


/* ---------------------------------------------------------
   SUBSECTIONS
   --------------------------------------------------------- */

.network-routing-subsection {
    margin-top: 24px;

    padding-top: 18px;

    border-top:
        1px solid var(--border);
}

.network-routing-subheading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 18px;
}

.network-routing-subheading > div > span {
    display: block;

    color: var(--muted);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .1em;
}

.network-routing-subheading h3 {
    margin: 5px 0 0;

    font-size: 14px;
}

.network-routing-subheading p {
    max-width: 390px;

    margin: 0;

    color: var(--muted);

    font-size: 10px;
    line-height: 1.5;

    text-align: right;
}


/*
 * 16 px entre encabezado interno y tabla.
 */

.network-routing-table-wrap {
    margin-top: 16px;

    border:
        1px solid var(--border);

    border-radius: 12px;

    overflow-x: auto;
}


/* ---------------------------------------------------------
   ROUTE STATES
   --------------------------------------------------------- */

.network-routing-state {
    display: inline-flex;
    align-items: center;

    min-height: 24px;

    padding: 4px 9px;

    border:
        1px solid transparent;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .05em;
}

.network-routing-state-active {
    color: #6ee7b7;

    border-color:
        rgba(52, 211, 153, .20);

    background:
        rgba(52, 211, 153, .07);
}

.network-routing-state-inactive {
    color: #fda4af;

    border-color:
        rgba(251, 113, 133, .20);

    background:
        rgba(251, 113, 133, .065);
}

.network-routing-state-disabled,
.network-routing-state-unknown {
    color: var(--muted);

    border-color:
        rgba(255, 255, 255, .09);

    background:
        rgba(255, 255, 255, .025);
}


/* ---------------------------------------------------------
   NOTE
   --------------------------------------------------------- */

.network-routing-note {
    margin-top: 16px;
    padding-top: 14px;

    border-top:
        1px solid var(--border);
}

.network-routing-note span {
    display: block;

    color: var(--muted);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .1em;
}

.network-routing-note p {
    max-width: 760px;

    margin: 6px 0 0;

    color: var(--muted);

    font-size: 10px;
    line-height: 1.6;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1100px) {

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

    .network-routing-summary-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}


@media (max-width: 760px) {

    .network-routing-primary-grid,
    .network-routing-summary-grid {
        grid-template-columns: 1fr;
    }

    .network-routing-live-status {
        justify-content: flex-start;
    }

    .network-routing-live-status > div {
        align-items: flex-start;
    }

    .network-routing-subheading {
        align-items: flex-start;
        flex-direction: column;
    }

    .network-routing-subheading p {
        max-width: none;
        text-align: left;
    }
}


@media (prefers-reduced-motion: reduce) {

    .network-routing-live-dot {
        transition: none;
    }
}


/* =========================================================
   XTARON ROUTEROS CONNECTIVITY DIAGNOSTIC
   ========================================================= */

.network-connectivity-panel {
    margin-top: 16px;
}


/* ---------------------------------------------------------
   LIVE
   --------------------------------------------------------- */

.network-connectivity-live-status {
    min-width: 170px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 10px;
}

.network-connectivity-live-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 9px;

    border-radius: 50%;

    background: var(--muted);

    transition:
        background 180ms ease,
        box-shadow 180ms ease;
}

.network-connectivity-live-status > div {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 3px;
}

.network-connectivity-live-status strong {
    font-size: 10px;

    letter-spacing: .1em;
}

.network-connectivity-live-status small {
    color: var(--muted);

    font-size: 9px;
}


.network-connectivity-panel[data-live-state="connecting"]
.network-connectivity-live-dot,
.network-connectivity-panel[data-live-state="testing"]
.network-connectivity-live-dot {
    background: #22d3ee;

    box-shadow:
        0 0 7px rgba(34, 211, 238, .38),
        0 0 16px rgba(34, 211, 238, .16);
}

.network-connectivity-panel[data-live-state="connecting"]
.network-connectivity-live-status strong,
.network-connectivity-panel[data-live-state="testing"]
.network-connectivity-live-status strong {
    color: #67e8f9;
}


.network-connectivity-panel[data-live-state="live"]
.network-connectivity-live-dot {
    background: #34d399;

    box-shadow:
        0 0 7px rgba(52, 211, 153, .38),
        0 0 16px rgba(52, 211, 153, .16);
}

.network-connectivity-panel[data-live-state="live"]
.network-connectivity-live-status strong {
    color: #6ee7b7;
}


.network-connectivity-panel[data-live-state="error"]
.network-connectivity-live-dot {
    background: #fb7185;

    box-shadow:
        0 0 7px rgba(251, 113, 133, .42),
        0 0 16px rgba(251, 113, 133, .18);
}

.network-connectivity-panel[data-live-state="error"]
.network-connectivity-live-status strong {
    color: #fda4af;
}


.network-connectivity-panel[data-live-state="paused"]
.network-connectivity-live-dot {
    background: var(--muted);

    box-shadow: none;
}

.network-connectivity-panel[data-live-state="paused"]
.network-connectivity-live-status strong {
    color: var(--muted);
}


/* ---------------------------------------------------------
   OVERALL HEALTH
   --------------------------------------------------------- */

.network-connectivity-overall {
    margin-top: 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    padding: 16px;

    border: 1px solid var(--border);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, .018);
}

.network-connectivity-overall > div > span {
    display: block;

    color: var(--muted);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .1em;
}

.network-connectivity-overall > div > strong {
    display: block;

    margin-top: 7px;

    font-size: 18px;
}

.network-connectivity-overall > div > small {
    display: block;

    margin-top: 6px;

    color: var(--muted);

    font-size: 10px;
}

.network-connectivity-overall-indicator {
    width: 13px;
    height: 13px;

    flex: 0 0 13px;

    border-radius: 50%;

    background: var(--muted);
}


.network-connectivity-overall[data-health="healthy"] {
    border-color:
        rgba(52, 211, 153, .20);

    background:
        rgba(52, 211, 153, .035);
}

.network-connectivity-overall[data-health="healthy"]
.network-connectivity-overall-indicator {
    background: #34d399;

    box-shadow:
        0 0 9px rgba(52, 211, 153, .45),
        0 0 20px rgba(52, 211, 153, .16);
}

.network-connectivity-overall[data-health="healthy"]
> div > strong {
    color: #6ee7b7;
}


.network-connectivity-overall[data-health="degraded"] {
    border-color:
        rgba(250, 204, 21, .20);

    background:
        rgba(250, 204, 21, .03);
}

.network-connectivity-overall[data-health="degraded"]
.network-connectivity-overall-indicator {
    background: #facc15;

    box-shadow:
        0 0 9px rgba(250, 204, 21, .35);
}

.network-connectivity-overall[data-health="degraded"]
> div > strong {
    color: #fde047;
}


.network-connectivity-overall[data-health="offline"] {
    border-color:
        rgba(251, 113, 133, .22);

    background:
        rgba(251, 113, 133, .035);
}

.network-connectivity-overall[data-health="offline"]
.network-connectivity-overall-indicator {
    background: #fb7185;

    box-shadow:
        0 0 9px rgba(251, 113, 133, .40);
}

.network-connectivity-overall[data-health="offline"]
> div > strong {
    color: #fda4af;
}


/* ---------------------------------------------------------
   DIAGNOSTIC CARDS
   --------------------------------------------------------- */

.network-connectivity-grid {
    margin-top: 16px;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;
}

.network-connectivity-card {
    min-width: 0;

    padding: 16px;

    border:
        1px solid var(--border);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, .015);

    transition:
        border-color 180ms ease,
        background 180ms ease;
}


/*
 * Estas tarjetas son informativas.
 * No tienen hover de elemento clickeable.
 */

.network-connectivity-card[data-health="healthy"] {
    border-color:
        rgba(52, 211, 153, .14);
}

.network-connectivity-card[data-health="degraded"] {
    border-color:
        rgba(250, 204, 21, .18);
}

.network-connectivity-card[data-health="offline"] {
    border-color:
        rgba(251, 113, 133, .20);
}


.network-connectivity-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;
}

.network-connectivity-card-header > div > span {
    display: block;

    color: var(--muted);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .09em;
}

.network-connectivity-card-header h3 {
    margin: 5px 0 0;

    font-size: 14px;
}


.network-connectivity-state {
    font-size: 9px;

    letter-spacing: .06em;
}

.network-connectivity-card[data-health="healthy"]
.network-connectivity-state {
    color: #6ee7b7;
}

.network-connectivity-card[data-health="degraded"]
.network-connectivity-state {
    color: #fde047;
}

.network-connectivity-card[data-health="offline"]
.network-connectivity-state {
    color: #fda4af;
}

.network-connectivity-card[data-health="unknown"]
.network-connectivity-state {
    color: var(--muted);
}


/* Main value */

.network-connectivity-card-value {
    margin-top: 18px;
}

.network-connectivity-card-value > span {
    display: block;

    color: var(--muted);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .08em;
}

.network-connectivity-card-value > strong {
    display: block;

    margin-top: 6px;

    overflow-wrap: anywhere;

    font-size: 14px;
}

.network-connectivity-card-value > small {
    display: block;

    margin-top: 5px;

    color: var(--muted);

    font-size: 9px;

    overflow-wrap: anywhere;
}


/* Metrics */

.network-connectivity-metrics {
    margin-top: 15px;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;
}

.network-connectivity-metrics > div {
    min-width: 0;

    padding: 10px;

    border:
        1px solid var(--border);

    border-radius: 9px;

    background:
        rgba(255, 255, 255, .012);
}

.network-connectivity-metrics span {
    display: block;

    color: var(--muted);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .06em;
}

.network-connectivity-metrics strong {
    display: block;

    margin-top: 5px;

    overflow-wrap: anywhere;

    font-size: 10px;

    font-variant-numeric:
        tabular-nums;
}


/* ---------------------------------------------------------
   PROBE TABLE
   --------------------------------------------------------- */

.network-connectivity-probes {
    margin-top: 24px;

    padding-top: 18px;

    border-top:
        1px solid var(--border);
}

.network-connectivity-subheading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 18px;
}

.network-connectivity-subheading > div > span {
    display: block;

    color: var(--muted);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .1em;
}

.network-connectivity-subheading h3 {
    margin: 5px 0 0;

    font-size: 14px;
}

.network-connectivity-subheading p {
    max-width: 390px;

    margin: 0;

    color: var(--muted);

    font-size: 10px;
    line-height: 1.5;

    text-align: right;
}

.network-connectivity-table-wrap {
    margin-top: 16px;

    border:
        1px solid var(--border);

    border-radius: 12px;

    overflow-x: auto;
}


/* Badges */

.network-connectivity-badge {
    display: inline-flex;
    align-items: center;

    min-height: 24px;

    padding: 4px 9px;

    border:
        1px solid transparent;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .05em;
}

.network-connectivity-badge-healthy {
    color: #6ee7b7;

    border-color:
        rgba(52, 211, 153, .20);

    background:
        rgba(52, 211, 153, .07);
}

.network-connectivity-badge-degraded {
    color: #fde047;

    border-color:
        rgba(250, 204, 21, .20);

    background:
        rgba(250, 204, 21, .06);
}

.network-connectivity-badge-offline {
    color: #fda4af;

    border-color:
        rgba(251, 113, 133, .20);

    background:
        rgba(251, 113, 133, .065);
}

.network-connectivity-badge-unknown {
    color: var(--muted);

    border-color:
        rgba(255, 255, 255, .09);

    background:
        rgba(255, 255, 255, .025);
}


/* ---------------------------------------------------------
   NOTE
   --------------------------------------------------------- */

.network-connectivity-note {
    margin-top: 16px;

    padding-top: 14px;

    border-top:
        1px solid var(--border);
}

.network-connectivity-note span {
    display: block;

    color: var(--muted);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .1em;
}

.network-connectivity-note p {
    max-width: 780px;

    margin: 6px 0 0;

    color: var(--muted);

    font-size: 10px;
    line-height: 1.6;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1100px) {

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


@media (max-width: 760px) {

    .network-connectivity-grid {
        grid-template-columns: 1fr;
    }

    .network-connectivity-live-status {
        justify-content: flex-start;
    }

    .network-connectivity-live-status > div {
        align-items: flex-start;
    }

    .network-connectivity-subheading {
        align-items: flex-start;

        flex-direction: column;
    }

    .network-connectivity-subheading p {
        max-width: none;

        text-align: left;
    }
}


@media (max-width: 480px) {

    .network-connectivity-metrics {
        grid-template-columns: 1fr;
    }
}


@media (prefers-reduced-motion: reduce) {

    .network-connectivity-live-dot,
    .network-connectivity-card {
        transition: none;
    }
}


/* =========================================================
   XTARON ROUTER LIVE STATUS NEON
   ========================================================= */

.network-router-status-card {
    position: relative;

    transition:
        border-color 220ms ease,
        background 220ms ease,
        box-shadow 220ms ease;
}


/*
 * ONLINE
 * Resplandor verde suave.
 */

.network-router-status-card[data-router-status="online"] {
    border-color:
        rgba(52, 211, 153, .52);

    background:
        linear-gradient(
            135deg,
            rgba(52, 211, 153, .075),
            rgba(52, 211, 153, .018)
        );

    box-shadow:
        0 0 8px rgba(52, 211, 153, .20),
        0 0 18px rgba(52, 211, 153, .12),
        inset 0 0 14px rgba(52, 211, 153, .025);
}

.network-router-status-card[data-router-status="online"]
#network-router-status-value {
    color: #6ee7b7;

    text-shadow:
        0 0 7px rgba(52, 211, 153, .48),
        0 0 14px rgba(52, 211, 153, .22);
}


/*
 * OFFLINE
 * Resplandor rojo.
 */

.network-router-status-card[data-router-status="offline"] {
    border-color:
        rgba(251, 113, 133, .55);

    background:
        linear-gradient(
            135deg,
            rgba(251, 113, 133, .075),
            rgba(251, 113, 133, .018)
        );

    box-shadow:
        0 0 8px rgba(251, 113, 133, .22),
        0 0 18px rgba(251, 113, 133, .13),
        inset 0 0 14px rgba(251, 113, 133, .025);
}

.network-router-status-card[data-router-status="offline"]
#network-router-status-value {
    color: #fda4af;

    text-shadow:
        0 0 7px rgba(251, 113, 133, .50),
        0 0 14px rgba(251, 113, 133, .24);
}


/*
 * MAINTENANCE
 */

.network-router-status-card[data-router-status="maintenance"] {
    border-color:
        rgba(250, 204, 21, .28);

    background:
        rgba(250, 204, 21, .025);
}

.network-router-status-card[data-router-status="maintenance"]
#network-router-status-value {
    color: #fde047;
}


/*
 * UNKNOWN
 */

.network-router-status-card[data-router-status="unknown"]
#network-router-status-value {
    color: var(--muted);
}


/*
 * No es una tarjeta clickeable:
 * no desplazamiento ni hover de acción.
 */

.network-router-status-card:hover {
    transform: none;
}


/* =========================================================
   CONNECTIVITY AFTER RESOURCES
   ========================================================= */

/*
 * Espaciado entre Recursos del equipo y
 * Diagnóstico de conectividad.
 */

.network-resource-panel
+ .network-connectivity-panel {
    margin-top: 16px;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .network-router-status-card {
        transition: none;
    }
}


/* =========================================================
   XTARON CONNECTIVITY WAN SUMMARY
   ========================================================= */

.network-connectivity-wan-summary {
    margin-top: 16px;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 10px;
}


.network-connectivity-wan-item {
    min-width: 0;

    padding: 14px 15px;

    border:
        1px solid var(--border);

    border-radius: 11px;

    background:
        rgba(255, 255, 255, .014);
}


/*
 * Información estática:
 * no hover ni apariencia de elemento clickeable.
 */

.network-connectivity-wan-item > span {
    display: block;

    color: var(--muted);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .09em;
}


.network-connectivity-wan-item > strong {
    display: block;

    margin-top: 7px;

    color: var(--text);

    font-size: 13px;

    font-variant-numeric:
        tabular-nums;

    overflow-wrap: anywhere;
}


.network-connectivity-wan-item > small {
    display: block;

    margin-top: 5px;

    color: var(--muted);

    font-size: 9px;

    line-height: 1.45;

    overflow-wrap: anywhere;
}


/*
 * La salida WAN recibe una pequeña referencia visual,
 * sin convertirla en tarjeta interactiva.
 */

.network-connectivity-wan-item:first-child {
    border-color:
        rgba(34, 211, 238, .14);

    background:
        rgba(34, 211, 238, .018);
}

.network-connectivity-wan-item:first-child > strong {
    color: #67e8f9;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1100px) {

    .network-connectivity-wan-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 560px) {

    .network-connectivity-wan-summary {
        grid-template-columns: 1fr;
    }
}

/* PASO 83 — badge compacto en diagnóstico individual WAN */
#network-connectivity-wan-links .network-connectivity-badge {
    display: inline-flex;
    align-items: center;
    width: auto;
    max-width: max-content;
    align-self: flex-start;
    margin-top: 6px;
    padding: 4px 10px;
}


/* PASO 88 — estado visual individual por WAN */

#network-connectivity-wan-links
.network-connectivity-wan-item[data-health="healthy"] {
    border-color: rgba(34, 197, 94, .24);
    background: rgba(34, 197, 94, .025);
}

#network-connectivity-wan-links
.network-connectivity-wan-item[data-health="degraded"] {
    border-color: rgba(234, 179, 8, .28);
    background: rgba(234, 179, 8, .025);
}

#network-connectivity-wan-links
.network-connectivity-wan-item[data-health="offline"] {
    border-color: rgba(239, 68, 68, .28);
    background: rgba(239, 68, 68, .025);
}

#network-connectivity-wan-links
.network-connectivity-wan-item[data-health="unknown"] {
    border-color: var(--border);
    background: rgba(255, 255, 255, .014);
}



/* PASO 90 — rol y estado de ruta WAN */

#network-connectivity-wan-links
.network-connectivity-wan-route-state {
    font-weight: 700;
    letter-spacing: .035em;
}

#network-connectivity-wan-links
.network-connectivity-wan-item[data-route-state="activa"]
.network-connectivity-wan-route-state {
    color: rgba(74, 222, 128, .90);
}

#network-connectivity-wan-links
.network-connectivity-wan-item[data-route-state="inactiva"]
.network-connectivity-wan-route-state,
#network-connectivity-wan-links
.network-connectivity-wan-item[data-route-state="no activa"]
.network-connectivity-wan-route-state {
    color: rgba(250, 204, 21, .88);
}

#network-connectivity-wan-links
.network-connectivity-wan-item[data-route-state="deshabilitada"]
.network-connectivity-wan-route-state {
    color: rgba(248, 113, 113, .90);
}



/* PASO 94 — métricas individuales por WAN */

#network-connectivity-wan-links
.network-connectivity-wan-metrics {
    color: var(--text);

    font-variant-numeric:
        tabular-nums;

    font-weight: 600;
}


/* =========================================================
   XTARON ROUTEROS CONNECTIVITY HISTORY
   ========================================================= */

.network-connectivity-history-panel {
    margin-top: 16px;
}


.network-history-header {
    align-items: center;
}


.network-history-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}


.network-history-freshness {
    min-width: 112px;

    padding-right: 14px;

    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 3px;

    border-right:
        1px solid rgba(148, 163, 184, .12);
}


.network-history-freshness-state {
    display: inline-flex;
    align-items: center;

    gap: 6px;
}


.network-history-freshness-state > i {
    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background:
        rgba(148, 163, 184, .72);
}


.network-history-freshness-state > strong {
    font-size: 9px;
    font-weight: 800;

    letter-spacing: .08em;
}


.network-history-freshness > small {
    color: var(--muted);

    font-size: 8px;

    font-variant-numeric:
        tabular-nums;
}


.network-history-freshness[
    data-status="updated"
]
.network-history-freshness-state > i {
    background: #34d399;

    box-shadow:
        0 0 8px
        rgba(52, 211, 153, .30);
}


.network-history-freshness[
    data-status="updated"
]
.network-history-freshness-state > strong {
    color: #6ee7b7;
}


.network-history-freshness[
    data-status="stale"
]
.network-history-freshness-state > i {
    background: #facc15;

    box-shadow:
        0 0 8px
        rgba(250, 204, 21, .28);
}


.network-history-freshness[
    data-status="stale"
]
.network-history-freshness-state > strong {
    color: #fde047;
}


.network-history-freshness[
    data-status="no_data"
]
.network-history-freshness-state > i {
    background:
        rgba(148, 163, 184, .68);
}


.network-history-freshness[
    data-status="no_data"
]
.network-history-freshness-state > strong {
    color: #cbd5e1;
}


.network-history-freshness-alert {
    margin-top: 16px;

    padding: 12px 14px;

    display: flex;
    align-items: flex-start;

    gap: 10px;

    border:
        1px solid rgba(148, 163, 184, .14);

    border-radius: 10px;

    background:
        rgba(148, 163, 184, .025);
}


.network-history-freshness-alert[hidden] {
    display: none;
}


.network-history-freshness-alert > i {
    width: 8px;
    height: 8px;

    margin-top: 3px;

    flex: 0 0 8px;

    border-radius: 50%;

    background:
        rgba(148, 163, 184, .70);
}


.network-history-freshness-alert > div {
    min-width: 0;
}


.network-history-freshness-alert strong {
    display: block;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .07em;
}


.network-history-freshness-alert p {
    margin: 5px 0 0;

    color: var(--muted);

    font-size: 9px;
    line-height: 1.55;
}


.network-history-freshness-alert[
    data-status="stale"
] {
    border-color:
        rgba(250, 204, 21, .18);

    background:
        rgba(250, 204, 21, .025);
}


.network-history-freshness-alert[
    data-status="stale"
] > i {
    background: #facc15;

    box-shadow:
        0 0 8px
        rgba(250, 204, 21, .24);
}


.network-history-freshness-alert[
    data-status="stale"
] strong {
    color: #fde047;
}


.network-history-freshness-alert[
    data-status="no_data"
] {
    border-color:
        rgba(148, 163, 184, .15);
}


.network-history-freshness-alert[
    data-status="no_data"
] strong {
    color: #cbd5e1;
}


.network-history-periods {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 0;

    border: 0;

    background: transparent;
}


.network-history-period-button {
    appearance: none;

    padding: 7px 10px;

    border:
        1px solid transparent;

    border-radius: 7px;

    background: transparent;

    color: var(--muted);

    font: inherit;
    font-size: 9px;
    font-weight: 700;

    letter-spacing: .06em;

    cursor: pointer;

    transition:
        transform .16s ease,
        color .16s ease,
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease;
}


.network-history-period-button:hover {
    color: var(--text);

    border-color:
        rgba(34, 211, 238, .22);

    background:
        rgba(34, 211, 238, .045);

    box-shadow:
        0 0 14px
        rgba(34, 211, 238, .055);
}


.network-history-period-button:focus-visible {
    outline: none;

    border-color:
        rgba(34, 211, 238, .48);

    box-shadow:
        0 0 0 2px
        rgba(34, 211, 238, .12);
}


.network-history-period-button.is-active {
    color: var(--text);

    border-color:
        rgba(34, 211, 238, .32);

    background:
        rgba(34, 211, 238, .09);

    box-shadow:
        inset 0 0 14px
        rgba(34, 211, 238, .035),
        0 0 14px
        rgba(34, 211, 238, .045);
}


.network-history-period-button:active {
    transform: translateY(1px);
}


.network-history-window {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.network-history-window strong {
    font-size: 11px;
    letter-spacing: .1em;
}

.network-history-window small {
    color: var(--muted);
    font-size: 9px;
}


/* ---------------------------------------------------------
   SUMMARY
   --------------------------------------------------------- */

.network-history-summary {
    margin-top: 16px;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;
}

.network-history-summary-card {
    min-width: 0;

    padding: 16px;

    border:
        1px solid var(--border);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, .015);
}

/*
 * Tarjetas interactivas.
 * Funcionan como filtros rápidos del historial WAN.
 */
.network-history-summary-card > span {
    display: block;

    color: var(--muted);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .09em;
}

.network-history-summary-card > strong {
    display: block;

    margin-top: 8px;

    font-size: 20px;
}

.network-history-summary-card > small {
    display: block;

    margin-top: 6px;

    color: var(--muted);

    font-size: 9px;
}


.network-history-summary-card[data-tone="healthy"] {
    border-color:
        rgba(52, 211, 153, .16);
}

.network-history-summary-card[data-tone="healthy"] > strong {
    color: #6ee7b7;
}


.network-history-summary-card[data-tone="degraded"] {
    border-color:
        rgba(250, 204, 21, .18);
}

.network-history-summary-card[data-tone="degraded"] > strong {
    color: #fde047;
}


.network-history-summary-card[data-tone="offline"] {
    border-color:
        rgba(251, 113, 133, .20);
}

.network-history-summary-card[data-tone="offline"] > strong {
    color: #fda4af;
}


.network-history-summary-card[data-tone="monitoring"] {
    border-color:
        rgba(148, 163, 184, .18);
}

.network-history-summary-card[data-tone="monitoring"] > strong {
    color: #cbd5e1;
}


.network-history-summary-card[
    data-history-event-filter
] {
    width: 100%;

    color: inherit;
    font: inherit;
    text-align: left;

    appearance: none;

    cursor: pointer;

    transition:
        transform 150ms ease,
        border-color 150ms ease,
        background 150ms ease,
        box-shadow 150ms ease;
}


.network-history-summary-card[
    data-history-event-filter
]:hover {
    transform:
        translateY(-1px);

    border-color:
        rgba(34, 211, 238, .28);

    background:
        rgba(34, 211, 238, .025);

    box-shadow:
        0 0 18px
        rgba(34, 211, 238, .055);
}


.network-history-summary-card[
    data-history-event-filter
]:focus-visible {
    outline: none;

    border-color:
        rgba(34, 211, 238, .34);

    box-shadow:
        0 0 0 1px
        rgba(34, 211, 238, .18),
        0 0 20px
        rgba(34, 211, 238, .07);
}


.network-history-summary-card[
    data-history-event-filter
][aria-pressed="true"] {
    background:
        rgba(34, 211, 238, .032);

    box-shadow:
        inset 0 0 0 1px
        rgba(34, 211, 238, .18),
        0 0 18px
        rgba(34, 211, 238, .045);
}


.network-history-outage-entry[hidden] {
    display: none;
}


@media (prefers-reduced-motion: reduce) {

    .network-history-summary-card[
        data-history-event-filter
    ] {
        transition: none;
    }
}


/* ---------------------------------------------------------
   TIMELINE
   --------------------------------------------------------- */

.network-history-strip-card {
    margin-top: 16px;

    padding: 16px;

    border:
        1px solid var(--border);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, .012);
}

.network-history-subheading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 16px;
}

.network-history-subheading > div > span {
    display: block;

    color: var(--muted);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .09em;
}

.network-history-subheading h3 {
    margin: 5px 0 0;

    font-size: 14px;
}

.network-history-subheading > small {
    color: var(--muted);

    font-size: 9px;

    text-align: right;
}


.network-history-strip {
    margin-top: 16px;

    display: grid;
    grid-template-columns:
        repeat(
            var(--network-history-columns, 24),
            minmax(4px, 1fr)
        );

    gap: 5px;
}

.network-history-point {
    min-width: 0;
    height: 8px;

    border-radius: 999px;

    background: var(--muted);
}

.network-history-point[data-status="healthy"] {
    background: #34d399;

    box-shadow:
        0 0 7px rgba(52, 211, 153, .24);
}

.network-history-point[data-status="degraded"] {
    background: #facc15;

    box-shadow:
        0 0 7px rgba(250, 204, 21, .22);
}

.network-history-point[data-status="offline"] {
    background: #fb7185;

    box-shadow:
        0 0 7px rgba(251, 113, 133, .26);
}

.network-history-point[data-status="monitoring"] {
    background: #94a3b8;

    box-shadow:
        0 0 7px rgba(148, 163, 184, .20);
}


.network-history-point[data-status="no_data"] {
    background:
        rgba(148, 163, 184, .16);

    box-shadow: none;
}




.network-history-axis {
    margin-top: 7px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    color: var(--muted);

    font-size: 8px;
}


.network-history-legend {
    margin-top: 12px;

    display: flex;
    flex-wrap: wrap;

    gap: 8px 16px;
}

.network-history-legend > span {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    color: var(--muted);

    font-size: 9px;
}

.network-history-legend i {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--muted);
}

.network-history-legend i[data-status="healthy"] {
    background: #34d399;
}

.network-history-legend i[data-status="degraded"] {
    background: #facc15;
}

.network-history-legend i[data-status="offline"] {
    background: #fb7185;
}

.network-history-legend i[data-status="monitoring"] {
    background: #94a3b8;
}


.network-history-legend i[data-status="no_data"] {
    background:
        rgba(148, 163, 184, .28);
}

.network-history-empty {
    margin: 16px 0 0;

    color: var(--muted);

    font-size: 10px;
}


/* ---------------------------------------------------------
   LAST WAN OUTAGE
   --------------------------------------------------------- */

.network-history-incident {
    margin-top: 16px;

    padding: 16px;

    border:
        1px solid var(--border);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, .012);
}


.network-history-outage-header > span {
    display: block;

    color: var(--muted);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .09em;
}


.network-history-outage-header > strong {
    display: block;

    margin-top: 6px;

    font-size: 13px;
}


.network-history-outage-header > small {
    display: block;

    margin-top: 5px;

    color: var(--muted);

    font-size: 9px;
    line-height: 1.5;
}


.network-history-outage-operational {
    margin-top: 14px;

    padding:
        10px 12px;

    border:
        1px solid
        rgba(34, 211, 238, .11);

    border-radius:
        9px;

    background:
        rgba(34, 211, 238, .022);
}


.network-history-outage-operational[hidden] {
    display: none;
}


.network-history-outage-operational > span {
    display: block;

    color: var(--muted);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .08em;
}


.network-history-outage-operational > strong {
    display: block;

    margin-top: 5px;

    color: #a5f3fc;

    font-size: 10px;
    font-weight: 600;

    line-height: 1.45;

    overflow-wrap: anywhere;
}


.network-history-outage-metrics {
    margin-top: 14px;
    padding-top: 14px;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 0;

    border-top:
        1px solid rgba(148, 163, 184, .10);
}


.network-history-outage-metrics[hidden] {
    display: none;
}


.network-history-outage-metric {
    min-width: 0;
}


.network-history-outage-metric
+ .network-history-outage-metric {
    padding-left: 16px;

    border-left:
        1px solid rgba(148, 163, 184, .10);
}


.network-history-outage-metric > span {
    display: block;

    color: var(--muted);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .07em;
}


.network-history-outage-metric > strong {
    display: block;

    margin-top: 5px;

    font-size: 11px;
    font-weight: 600;
}


.network-history-incident[data-status="healthy"] {
    border-color:
        rgba(52, 211, 153, .16);
}


.network-history-incident[data-status="healthy"]
.network-history-outage-header > strong {
    color: #6ee7b7;
}


.network-history-incident[data-status="offline"] {
    border-color:
        rgba(251, 113, 133, .22);
}


.network-history-incident[data-status="offline"]
.network-history-outage-header > strong {
    color: #fda4af;
}


.network-history-incident[data-status="monitoring"] {
    border-color:
        rgba(148, 163, 184, .20);
}


.network-history-incident[data-status="monitoring"]
.network-history-outage-header > strong {
    color: #cbd5e1;
}


/* ---------------------------------------------------------
   NOTE
   --------------------------------------------------------- */

.network-history-note {
    margin-top: 16px;

    padding: 12px 14px;

    border:
        1px solid rgba(34, 211, 238, .10);

    border-radius: 10px;

    background:
        rgba(34, 211, 238, .02);
}

.network-history-note > span {
    display: block;

    color: #67e8f9;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .09em;
}

.network-history-note p {
    margin: 6px 0 0;

    color: var(--muted);

    font-size: 9px;
    line-height: 1.55;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1100px) {

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

}


@media (max-width: 560px) {

    .network-history-summary {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .network-history-subheading {
        flex-direction: column;
        align-items: flex-start;
    }

    .network-history-outage-metrics {
        grid-template-columns:
            minmax(0, 1fr);

        gap: 10px;
    }

    .network-history-outage-metric
    + .network-history-outage-metric {
        padding-top: 10px;
        padding-left: 0;

        border-top:
            1px solid rgba(148, 163, 184, .10);

        border-left: 0;
    }

    .network-history-subheading > small {
        text-align: left;
    }

    .network-history-strip {
        grid-template-columns:
            repeat(12, minmax(4px, 1fr));
    }

}



@media (max-width: 760px) {

    .network-history-header {
        align-items: flex-start;
        gap: 14px;
    }

    .network-history-actions {
        width: 100%;

        align-items: flex-end;
        flex-direction: column;
    }

    .network-history-freshness {
        width: 100%;
        min-width: 0;

        padding-right: 0;
        padding-bottom: 10px;

        align-items: flex-start;

        border-right: 0;

        border-bottom:
            1px solid rgba(148, 163, 184, .10);
    }


    .network-history-periods {
        width: 100%;
    }

    .network-history-period-button {
        flex: 1 1 0;
        text-align: center;
    }
}