/* =========================================================
   SOC-INCIDENTS.CSS
   Sistema de Gestión de Incidentes — estética de consola SOC
   ========================================================= */

/* -------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------- */
:root {
    /* Superficies */
    --bg-base: #0b0e14;
    --bg-panel: #11151c;
    --bg-elevado: #1a2030;
    --bg-hover: #202840;
    --linea: #232a3a;
    --linea-fuerte: #2e3650;

    /* Texto */
    --texto-principal: #e6e9f0;
    --texto-secundario: #8088a0;
    --texto-tenue: #565d75;

    /* Acento funcional (frío — estados neutros / informativos) */
    --acento: #5b8cff;
    --acento-fondo: rgba(91, 140, 255, 0.12);

    /* Severidad — escala semántica, NO decorativa */
    --sev-critica: #ff4d5e;
    --sev-critica-fondo: rgba(255, 77, 94, 0.12);
    --sev-alta: #ff8f3c;
    --sev-alta-fondo: rgba(255, 143, 60, 0.12);
    --sev-media: #ffc24b;
    --sev-media-fondo: rgba(255, 194, 75, 0.12);
    --sev-baja: #4ad6a8;
    --sev-baja-fondo: rgba(74, 214, 168, 0.12);

    /* Tipografía */
    --font-ui: 'Inter', -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

    /* Estructura */
    --radio: 5px;
    --radio-sm: 3px;
    --transicion: 140ms ease;
}

/* -------------------------------------------------------
   2. RESET / BASE
   ------------------------------------------------------- */
* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-base);
    background-image:
        radial-gradient(circle at 15% 0%, rgba(91, 140, 255, 0.05), transparent 35%),
        radial-gradient(circle at 85% 100%, rgba(255, 77, 94, 0.04), transparent 40%);
    color: var(--texto-principal);
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* Bootstrap aplica color de texto en varios niveles (table, td, .text-*);
   forzamos que todo el texto plano sea legible sobre fondo oscuro salvo
   que una clase semántica (badge, severidad) indique lo contrario. */
table, td, th, p, span, div, label {
    color: inherit;
}

table.tabla-incidentes td,
table.tabla-incidentes th {
    color: var(--texto-principal);
}

a {
    color: var(--acento);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1, h2, h3, h4 {
    font-family: var(--font-ui);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--texto-principal) !important;
    margin: 0 0 1rem 0;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }

p { color: var(--texto-secundario); margin: 0 0 0.75rem 0; }

code, .mono {
    font-family: var(--font-mono);
}

:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* -------------------------------------------------------
   2b. NAVBAR (Bootstrap) — sobrescribe el navbar-light por defecto
   ------------------------------------------------------- */
.navbar,
nav.navbar {
    background-color: var(--bg-panel) !important;
    border-bottom: 1px solid var(--linea-fuerte);
    padding: 0.75rem 1.5rem;
}

.navbar .navbar-brand {
    color: var(--texto-principal) !important;
    font-weight: 600;
    font-size: 1.1rem;
}

.navbar .nav-link {
    color: var(--texto-secundario) !important;
    font-size: 0.88rem;
    font-weight: 500;
    padding: 0.4rem 0.8rem !important;
    border-radius: var(--radio-sm);
    transition: background-color var(--transicion), color var(--transicion);
}

.navbar .nav-link:hover {
    color: var(--texto-principal) !important;
    background-color: var(--bg-hover);
}

.navbar .nav-link.active {
    color: var(--acento) !important;
    background-color: var(--acento-fondo);
}

.navbar-toggler {
    border-color: var(--linea-fuerte) !important;
}

body > main,
.container, .container-fluid {
    padding-top: 1.5rem;
}

/* -------------------------------------------------------
   3. SHELL — barra superior + navegación lateral
   ------------------------------------------------------- */
.shell {
    display: grid;
    grid-template-columns: 230px 1fr;
    min-height: 100vh;
}

.shell-sidebar {
    background-color: var(--bg-panel);
    border-right: 1px solid var(--linea);
    padding: 1.25rem 0.75rem;
}

.shell-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.5rem 1.25rem 0.5rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--linea);
}

.shell-brand-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--sev-baja);
    box-shadow: 0 0 8px var(--sev-baja);
    flex-shrink: 0;
}

.shell-brand-text {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--texto-principal);
}

.shell-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.shell-nav a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--radio-sm);
    color: var(--texto-secundario);
    font-size: 0.85rem;
    font-weight: 500;
    transition: background-color var(--transicion), color var(--transicion);
}

.shell-nav a:hover {
    background-color: var(--bg-hover);
    color: var(--texto-principal);
    text-decoration: none;
}

.shell-nav a.activo {
    background-color: var(--acento-fondo);
    color: var(--acento);
    border-left: 2px solid var(--acento);
    padding-left: calc(0.65rem - 2px);
}

.shell-main {
    padding: 1.75rem 2rem;
}

.shell-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.shell-topbar .timestamp {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--texto-tenue);
}

/* -------------------------------------------------------
   4. PANELES Y TARJETAS
   ------------------------------------------------------- */
.panel {
    background-color: var(--bg-panel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--linea);
}

.panel-header h2 {
    margin: 0;
    font-size: 0.95rem;
}

.panel-header .panel-meta {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--texto-tenue);
}

/* Grid de métricas (KPIs del dashboard) */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.kpi {
    background-color: var(--bg-panel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 1rem 1.1rem;
    position: relative;
    overflow: hidden;
}

.kpi::before {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 3px;
    background-color: var(--acento);
}

.kpi.kpi-critica::before { background-color: var(--sev-critica); }
.kpi.kpi-alta::before { background-color: var(--sev-alta); }
.kpi.kpi-baja::before { background-color: var(--sev-baja); }

.kpi-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--texto-tenue);
    margin-bottom: 0.35rem;
}

.kpi-valor {
    font-family: var(--font-mono);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--texto-principal);
}

/* Fallback: cualquier <table> sin la clase específica también hereda
   el estilo SOC, para que las vistas con markup de Bootstrap por
   defecto (table, table-striped) se vean bien sin tocar el cshtml */
table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--bg-panel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    overflow: hidden;
}

table thead th {
    background-color: var(--bg-elevado);
    color: var(--texto-secundario);
    text-align: left;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--linea-fuerte);
}

table tbody tr {
    border-left: 3px solid transparent;
    border-bottom: 1px solid var(--linea);
    transition: background-color var(--transicion);
}

table tbody tr:last-child {
    border-bottom: none;
}

table tbody tr:hover {
    background-color: var(--bg-hover);
}

table tbody td {
    padding: 0.65rem 1rem;
    color: var(--texto-principal);
    font-size: 0.86rem;
    vertical-align: middle;
}

/* -------------------------------------------------------
   5. TABLA DE INCIDENTES (clases específicas, opcionales)
   El borde izquierdo de cada fila es el elemento de firma:
   codifica la severidad como un indicador de estado físico,
   igual que un LED de hardware en un rack de servidores.
   ------------------------------------------------------- */
table.tabla-incidentes td.col-id,
table.tabla-incidentes td.col-fecha,
table.tabla-incidentes td.col-severidad-valor {
    font-family: var(--font-mono);
    color: var(--texto-secundario);
    font-size: 0.8rem;
}

/* Severidad como borde izquierdo — el indicador físico de estado
   (funciona en cualquier <tr>, no solo dentro de tabla-incidentes) */
tr.severidad-critica { border-left-color: var(--sev-critica) !important; }
tr.severidad-alta    { border-left-color: var(--sev-alta) !important; }
tr.severidad-media    { border-left-color: var(--sev-media) !important; }
tr.severidad-baja     { border-left-color: var(--sev-baja) !important; }

/* Texto de severidad coloreado según nivel (para la celda numérica) */
.sev-num-critica { color: var(--sev-critica); font-weight: 700; }
.sev-num-alta    { color: var(--sev-alta); font-weight: 700; }
.sev-num-media   { color: var(--sev-media); font-weight: 600; }
.sev-num-baja    { color: var(--sev-baja); font-weight: 600; }

/* -------------------------------------------------------
   6. BADGES (estado, tipo de incidente, severidad)
   ------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.badge-critica { background-color: var(--sev-critica-fondo); color: var(--sev-critica); }
.badge-critica::before { background-color: var(--sev-critica); box-shadow: 0 0 6px var(--sev-critica); }

.badge-alta { background-color: var(--sev-alta-fondo); color: var(--sev-alta); }
.badge-alta::before { background-color: var(--sev-alta); }

.badge-media { background-color: var(--sev-media-fondo); color: var(--sev-media); }
.badge-media::before { background-color: var(--sev-media); }

.badge-baja { background-color: var(--sev-baja-fondo); color: var(--sev-baja); }
.badge-baja::before { background-color: var(--sev-baja); }

.badge-info { background-color: var(--acento-fondo); color: var(--acento); }
.badge-info::before { background-color: var(--acento); }

.badge-neutro { background-color: var(--bg-elevado); color: var(--texto-secundario); }
.badge-neutro::before { background-color: var(--texto-tenue); }

/* -------------------------------------------------------
   7. BOTONES
   ------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radio-sm);
    font-size: 0.83rem;
    font-weight: 600;
    font-family: var(--font-ui);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--transicion), border-color var(--transicion);
}

.btn-primario {
    background-color: var(--acento);
    color: #0b0e14;
}

.btn-primario:hover {
    background-color: #79a3ff;
}

.btn-secundario {
    background-color: transparent;
    color: var(--texto-principal);
    border-color: var(--linea-fuerte);
}

.btn-secundario:hover {
    background-color: var(--bg-hover);
    border-color: var(--texto-secundario);
}

.btn-peligro {
    background-color: transparent;
    color: var(--sev-critica);
    border-color: var(--sev-critica);
}

.btn-peligro:hover {
    background-color: var(--sev-critica-fondo);
}

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

/* -------------------------------------------------------
   8. FORMULARIOS
   ------------------------------------------------------- */
.form-grupo {
    margin-bottom: 1rem;
}

.form-grupo label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--texto-secundario);
    margin-bottom: 0.35rem;
}

.form-grupo input,
.form-grupo select,
.form-grupo textarea {
    width: 100%;
    background-color: var(--bg-base);
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio-sm);
    color: var(--texto-principal);
    padding: 0.55rem 0.75rem;
    font-family: var(--font-ui);
    font-size: 0.88rem;
    transition: border-color var(--transicion);
}

.form-grupo input::placeholder,
.form-grupo textarea::placeholder {
    color: var(--texto-tenue);
}

.form-grupo input:focus,
.form-grupo select:focus,
.form-grupo textarea:focus {
    outline: none;
    border-color: var(--acento);
}

.form-ayuda {
    font-size: 0.75rem;
    color: var(--texto-tenue);
    margin-top: 0.3rem;
}

/* -------------------------------------------------------
   9. UTILIDADES
   ------------------------------------------------------- */
.text-tenue { color: var(--texto-tenue); }
.text-secundario { color: var(--texto-secundario); }
.text-critica { color: var(--sev-critica); }
.text-alta { color: var(--sev-alta); }
.text-baja { color: var(--sev-baja); }

.divisor {
    height: 1px;
    background-color: var(--linea);
    margin: 1.25rem 0;
    border: none;
}

.vacio {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--texto-tenue);
}

.vacio-titulo {
    font-size: 0.95rem;
    color: var(--texto-secundario);
    margin-bottom: 0.3rem;
}

/* -------------------------------------------------------
   10. RESPONSIVE
   ------------------------------------------------------- */
@media (max-width: 880px) {
    .shell {
        grid-template-columns: 1fr;
    }

    .shell-sidebar {
        display: none;
    }

    .shell-main {
        padding: 1.25rem;
    }

    table.tabla-incidentes {
        font-size: 0.8rem;
    }

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