:root {

        --primary: #1a3a8f;

        --secondary: #2c5282;

        --success: #38a169;

        --warning: #dd6b20;

        --critical: #e53e3e;

        --bg-dark: #0f172a;

        --bg-card: #1e293b;

        --text-light: #f1f5f9;

        --text-muted: #94a3b8;

    }

    

    * {

        margin: 0;

        padding: 0;

        box-sizing: border-box;

    }

    

    body {

        font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;

        background: var(--bg-dark);

        color: var(--text-light);

        line-height: 1.6;

        min-height: 100vh;

        display: grid;

        grid-template-rows: auto 1fr auto;

    }

    

    header {

        background: linear-gradient(135deg, var(--primary), var(--secondary));

        padding: 1.5rem 2rem;

        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

        position: relative;

        overflow: hidden;

    }

    

    header::before {

        content: "";

        position: absolute;

        top: -50%;

        left: -50%;

        width: 200%;

        height: 200%;

        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);

        pointer-events: none;

    }

    

    .header-top {

        display: flex;

        justify-content: space-between;

        align-items: center;

        margin-bottom: 1rem;

    }

    

    .logo {

        display: flex;

        align-items: center;

        gap: 0.75rem;

    }

    

    .logo h1 {

        font-size: 1.75rem;

        font-weight: 600;

    }

    

    .status-indicator {

        display: flex;

        align-items: center;

        gap: 0.5rem;

        background: rgba(255, 255, 255, 0.15);

        padding: 0.4rem 1rem;

        border-radius: 2rem;

        font-size: 0.9rem;

    }

    

    .status-dot {

        width: 10px;

        height: 10px;

        border-radius: 50%;

        background: var(--success);

        box-shadow: 0 0 10px var(--success);

    }

    

    nav ul {

        display: flex;

        gap: 1.5rem;

        list-style: none;

    }

    

    nav a {

        color: rgba(255, 255, 255, 0.85);

        text-decoration: none;

        font-weight: 500;

        padding: 0.5rem 0;

        position: relative;

        transition: color 0.2s;

    }

    

    nav a:hover {

        color: white;

    }

    

    nav a::after {

        content: "";

        position: absolute;

        bottom: 0;

        left: 0;

        width: 0;

        height: 2px;

        background: white;

        transition: width 0.3s;

    }

    

    nav a:hover::after {

        width: 100%;

    }

    

    main {

        padding: 2rem;

        max-width: 1400px;

        margin: 0 auto;

        width: 100%;

    }

    

    .dashboard {

        display: grid;

        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

        gap: 1.5rem;

        margin-bottom: 2rem;

    }

    

    .card {

        background: var(--bg-card);

        border-radius: 12px;

        padding: 1.5rem;

        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    }

    

    .card-header {

        display: flex;

        justify-content: space-between;

        align-items: center;

        margin-bottom: 1.5rem;

    }

    

    .card-title {

        font-size: 1.25rem;

        font-weight: 600;

    }

    

    .card-actions button {

        background: rgba(255, 255, 255, 0.1);

        border: none;

        color: var(--text-light);

        padding: 0.4rem 0.8rem;

        border-radius: 6px;

        cursor: pointer;

        transition: background 0.2s;

    }

    

    .card-actions button:hover {

        background: rgba(255, 255, 255, 0.2);

    }

    

    .metrics {

        display: grid;

        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));

        gap: 1rem;

    }

    

    .metric {

        text-align: center;

        padding: 1rem;

        background: rgba(255, 255, 255, 0.05);

        border-radius: 8px;

    }

    

    .metric-value {

        font-size: 2rem;

        font-weight: 700;

        margin: 0.5rem 0;

        color: var(--success);

    }

    

    .metric-label {

        font-size: 0.9rem;

        color: var(--text-muted);

    }

    

    .node-list {

        display: flex;

        flex-direction: column;

        gap: 0.75rem;

    }

    

    .node-item {

        display: flex;

        justify-content: space-between;

        align-items: center;

        padding: 1rem;

        background: rgba(255, 255, 255, 0.03);

        border-radius: 8px;

        transition: background 0.2s;

    }

    

    .node-item:hover {

        background: rgba(255, 255, 255, 0.07);

    }

    

    .node-info {

        display: flex;

        align-items: center;

        gap: 1rem;

    }

    

    .node-status {

        width: 12px;

        height: 12px;

        border-radius: 50%;

        background: var(--success);

    }

    

    .node-name {

        font-weight: 500;

    }

    

    .node-stats {

        display: flex;

        gap: 1.5rem;

    }

    

    .stat {

        display: flex;

        flex-direction: column;

        align-items: flex-end;

    }

    

    .stat-value {

        font-weight: 600;

    }

    

    .stat-label {

        font-size: 0.8rem;

        color: var(--text-muted);

    }

    

    .charts-container {

        display: grid;

        grid-template-columns: 2fr 1fr;

        gap: 1.5rem;

        margin-top: 1.5rem;

    }

    

    .chart {

        height: 300px;

        background: rgba(255, 255, 255, 0.03);

        border-radius: 12px;

        display: flex;

        align-items: center;

        justify-content: center;

        color: var(--text-muted);

        font-size: 1.1rem;

    }

    

    footer {

        background: rgba(0, 0, 0, 0.3);

        padding: 2rem;

        border-top: 1px solid rgba(255, 255, 255, 0.1);

    }

    

    .footer-content {

        display: flex;

        justify-content: space-between;

        align-items: center;

        max-width: 1400px;

        margin: 0 auto;

    }

    

    .footer-links {

        display: flex;

        gap: 1.5rem;

    }

    

    .footer-links a {

        color: var(--text-muted);

        text-decoration: none;

        transition: color 0.2s;

    }

    

    .footer-links a:hover {

        color: var(--text-light);

    }

    

    .ping-monitor {

        display: flex;

        align-items: center;

        gap: 0.5rem;

        background: rgba(255, 255, 255, 0.05);

        padding: 0.5rem 1rem;

        border-radius: 2rem;

        font-size: 0.9rem;

    }

    

    .ping-value {

        color: var(--success);

        font-weight: 600;

    }

    

    /* Animaciones para simular actividad */

    @keyframes pulse {

        0% { opacity: 0.6; }

        50% { opacity: 1; }

        100% { opacity: 0.6; }

    }

    

    .pulse {

        animation: pulse 2s infinite;

    }

    

    @keyframes loading {

        0% { background-position: 200% 0; }

        100% { background-position: -200% 0; }

    }

    

    .loading-bar {

        height: 4px;

        background: linear-gradient(90deg, transparent, rgba(56, 161, 105, 0.5), transparent);

        background-size: 200% 100%;

        animation: loading 1.5s linear infinite;

        border-radius: 2px;

        margin-top: 0.5rem;

    }