*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Inter',sans-serif;
}

body{
    background:#0F172A;
    color:#F8FAFC;
    overflow:hidden;
}

a{
    color:inherit;
    text-decoration:none;
}

.pst-container{
    display:flex;
    height:100vh;
}

.pst-sidebar{
    width:270px;
    background:#111827;
    border-right:1px solid #1F2937;
    display:flex;
    flex-direction:column;
}

.pst-logo{
    text-align:center;
    padding:24px 20px;
    border-bottom:1px solid #1F2937;
}

.pst-logo img{
    width:145px;
    max-height:80px;
    object-fit:contain;
    margin-bottom:12px;
}

.pst-logo h2{
    font-size:20px;
    font-weight:800;
    letter-spacing:.2px;
}

.pst-logo span{
    color:#94A3B8;
    font-size:12px;
}

.pst-menu{
    flex:1;
    padding:18px;
    overflow:auto;
}

.pst-menu a{
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 15px;
    border-radius:12px;
    margin-bottom:7px;
    color:#CBD5E1;
    transition:.2s ease;
    font-size:14px;
}

.pst-menu a:hover{
    background:#1E293B;
    color:#FFF;
}

.pst-menu a.active{
    background:#0B5ED7;
    color:#FFF;
}

.pst-status{
    padding:18px;
    border-top:1px solid #1F2937;
    color:#94A3B8;
    font-size:13px;
}

.pst-status div{
    margin-bottom:10px;
}

.pst-main{
    flex:1;
    display:flex;
    flex-direction:column;
    min-width:0;
}

.pst-header{
    height:76px;
    background:#111827;
    border-bottom:1px solid #1F2937;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 30px;
}

.pst-header-left h1{
    font-size:25px;
    font-weight:800;
}

.pst-search{
    width:420px;
    max-width:45vw;
    background:#1E293B;
    border:1px solid #334155;
    border-radius:12px;
    padding:12px 16px;
    color:#FFF;
}

.pst-search:focus{
    outline:none;
    border-color:#0B5ED7;
}

.pst-header-right{
    display:flex;
    align-items:center;
    gap:16px;
}

.pst-icon-btn{
    width:42px;
    height:42px;
    border:none;
    border-radius:12px;
    background:#1E293B;
    color:white;
    cursor:pointer;
}

.pst-icon-btn:hover{
    background:#0B5ED7;
}

.pst-user{
    display:flex;
    align-items:center;
    gap:12px;
}

.pst-avatar{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#0B5ED7;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
}

.pst-user small{
    color:#94A3B8;
}

.pst-content{
    flex:1;
    overflow:auto;
    padding:28px;
}

.dashboard-grid-kpi{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin-bottom:22px;
}

.kpi-card{
    background:#111827;
    border:1px solid #1F2937;
    border-radius:18px;
    padding:22px;
    display:flex;
    align-items:center;
    gap:18px;
    box-shadow:0 18px 60px rgba(0,0,0,.18);
}

.kpi-card span{
    color:#94A3B8;
    font-size:13px;
}

.kpi-card h2{
    font-size:36px;
    line-height:1;
    margin:7px 0;
}

.kpi-card small{
    color:#64748B;
}

.kpi-icon{
    width:56px;
    height:56px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
}

.kpi-icon.blue{background:#0B5ED7;}
.kpi-icon.green{background:#10B981;}
.kpi-icon.orange{background:#F59E0B;}
.kpi-icon.red{background:#EF4444;}

.dashboard-main-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:20px;
}

.panel{
    background:#111827;
    border:1px solid #1F2937;
    border-radius:18px;
    padding:24px;
    box-shadow:0 18px 60px rgba(0,0,0,.18);
}

.panel-large{
    grid-row:span 2;
}

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

.panel-header h3{
    font-size:18px;
}

.live-badge{
    color:#10B981;
    font-size:13px;
}

.timeline{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.timeline.compact{
    gap:14px;
}

.timeline-item{
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding-bottom:18px;
    border-bottom:1px solid #1F2937;
}

.timeline.compact .timeline-item{
    padding-bottom:12px;
}

.timeline-dot{
    width:12px;
    height:12px;
    border-radius:50%;
    background:#0B5ED7;
    margin-top:5px;
    box-shadow:0 0 18px rgba(11,94,215,.75);
}

.timeline-content{
    flex:1;
}

.timeline-content p{
    color:#94A3B8;
    margin-top:4px;
    font-size:13px;
}

.timeline-time{
    color:#64748B;
    font-size:13px;
}

.status-row,
.risk-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 0;
    border-bottom:1px solid #1F2937;
}

.status-row:last-child,
.risk-row:last-child{
    border-bottom:none;
}

.status-row strong,
.risk-row strong{
    font-size:24px;
}

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

.green{background:#10B981;}
.red{background:#EF4444;}

.risk-pill{
    padding:6px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    display:inline-block;
}

.risk-pill.critical{
    background:rgba(239,68,68,.14);
    color:#EF4444;
}

.risk-pill.high{
    background:rgba(245,158,11,.14);
    color:#F59E0B;
}

.risk-pill.medium{
    background:rgba(59,130,246,.14);
    color:#3B82F6;
}

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

.pst-table th{
    text-align:left;
    color:#94A3B8;
    font-size:13px;
    padding:14px;
    border-bottom:1px solid #334155;
}

.pst-table td{
    padding:16px 14px;
    border-bottom:1px solid #1F2937;
    color:#E2E8F0;
}

.pst-table tr:hover td{
    background:rgba(30,41,59,.45);
}

.pst-btn{
    background:#0B5ED7;
    border:none;
    color:#FFF;
    padding:8px 14px;
    border-radius:10px;
    cursor:pointer;
    font-weight:700;
}

.pst-btn:hover{
    background:#2563EB;
}

.empty-state{
    color:#94A3B8;
    text-align:center;
    padding:28px;
}

.hash-cell{
    max-width:260px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#94A3B8;
    font-family:monospace;
}

/* MONITOREO SOC */

.monitoring-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:20px;
}

.video-wall-panel{
    grid-row:span 2;
}

.video-wall{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}

.video-tile{
    background:#0B1220;
    border:1px solid #1F2937;
    border-radius:16px;
    overflow:hidden;
    position:relative;
}

.video-tile.offline{
    opacity:.55;
}

.video-fake{
    height:145px;
    background:
        radial-gradient(circle at center, rgba(11,94,215,.22), transparent 55%),
        linear-gradient(135deg, #111827, #020617);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:#CBD5E1;
    font-size:24px;
}

.video-fake span{
    font-size:13px;
    color:#94A3B8;
}

.video-meta{
    padding:12px 14px 6px;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.video-meta small{
    color:#94A3B8;
}

.video-status{
    padding:0 14px 12px;
    color:#94A3B8;
    font-size:12px;
}

.soc-list{
    display:flex;
    flex-direction:column;
    gap:13px;
}

.soc-alert{
    background:#0B1220;
    border:1px solid #1F2937;
    border-radius:14px;
    padding:14px;
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
}

.soc-alert div{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.soc-alert small{
    color:#94A3B8;
}

.evidence-preview-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
}

.evidence-preview{
    background:#0B1220;
    border:1px solid #1F2937;
    border-radius:14px;
    padding:14px;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.evidence-thumb{
    height:90px;
    border-radius:12px;
    background:#1E293B;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#64748B;
    font-size:28px;
}

.evidence-preview small{
    color:#94A3B8;
}

@media(max-width:1200px){
    .dashboard-grid-kpi{
        grid-template-columns:repeat(2,1fr);
    }

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

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

    .pst-search{
        width:280px;
    }
}

@media(max-width:900px){
    .pst-sidebar{
        width:220px;
    }

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

    .video-wall{
        grid-template-columns:1fr;
    }

    .pst-header-center{
        display:none;
    }
}