/* ═══════════════════════════════════════
   Vigia Design System — site.css
   ═══════════════════════════════════════ */

:root {
    /* ── Superficies — ajusta solo estas 3 para cambiar el tono base ── */
    --clr-bg:        #f5f6fa;   /* fondo app: blanco con tinte gris muy suave */
    --clr-surface:   #ffffff;   /* sidebar, cards, paneles */
    --clr-surface-2: #eef0f5;   /* hover filas, inputs, headers tabla */
    --clr-border:    #dfe2ea;

    /* ── Texto ── */
    --clr-text:             #1f2330;
    --clr-text-muted:       #6b7280;
    --clr-text-on-primary:  #ffffff;

    /* ── Marca / acentos ── */
    --clr-primary:       #6366f1;
    --clr-primary-hover: #818cf8;
    --clr-accent:  #22d3ee;
    --clr-success: #22c55e;
    --clr-warning: #f59e0b;
    --clr-danger:  #ef4444;
    --clr-info:    #3b82f6;

    /* ── Login gradient (antes hardcoded) ── */
    --clr-login-gradient-start: #f5f6fa;
    --clr-login-gradient-end:   #e0e7ff;

    /* ── Sombras ── */
    --shadow-sm: 0 1px 2px rgba(17, 24, 39, .06);
    --shadow-md: 0 4px 12px rgba(17, 24, 39, .08);
    --shadow-lg: 0 25px 50px rgba(17, 24, 39, .12);

    /* ── Layout ── */
    --sidebar-w: 260px;
    --radius: 12px;
    --radius-sm: 8px;
    --font: 'Inter', system-ui, -apple-system, sans-serif;
    --transition: 0.2s ease;
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 14px; }

body {
    margin: 0;
    font-family: var(--font);
    background: var(--clr-bg);
    color: var(--clr-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ── App layout ── */
.app-wrapper { display: flex; min-height: 100vh; }

/* ── Sidebar ── */
.sidebar {
    width: var(--sidebar-w);
    background: var(--clr-surface);
    border-right: 1px solid var(--clr-border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 1000;
    transition: transform var(--transition);
}
.sidebar-header {
    padding: 1.5rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--clr-border);
}
.sidebar-brand {
    display: flex; align-items: center; gap: .75rem;
    font-size: 1.35rem; font-weight: 700;
    background: linear-gradient(135deg, var(--clr-primary), var(--clr-accent));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.sidebar-toggle { background: none; border: none; color: var(--clr-text-muted); font-size: 1.25rem; cursor: pointer; }
.sidebar-nav {
    list-style: none; padding: .75rem 0; margin: 0; flex: 1;
}
.sidebar-nav li a {
    display: flex; align-items: center; gap: .75rem;
    padding: .7rem 1.25rem; margin: 2px .5rem;
    color: var(--clr-text-muted); text-decoration: none;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
    font-weight: 500;
}
.sidebar-nav li a:hover { color: var(--clr-text); background: var(--clr-surface-2); }
.sidebar-nav li a.active { color: var(--clr-text-on-primary); background: var(--clr-primary); }
.sidebar-nav li a i { font-size: 1.15rem; }
.sidebar-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--clr-border);
}
.sidebar-user {
    display: flex; align-items: center; gap: .5rem;
    color: var(--clr-text-muted); font-size: .9rem; margin-bottom: .5rem;
}
.btn-logout {
    background: none; border: none; color: var(--clr-danger);
    cursor: pointer; font-size: .85rem; padding: 0;
    transition: opacity var(--transition);
}
.btn-logout:hover { opacity: .7; }

/* ── Main content ── */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-w);
    min-height: 100vh;
}
.content-area { padding: 2rem; }

/* ── Topbar (mobile) ── */
.topbar {
    padding: .75rem 1rem;
    background: var(--clr-surface);
    border-bottom: 1px solid var(--clr-border);
    display: flex; align-items: center; gap: 1rem;
}
.topbar-brand { font-weight: 700; font-size: 1.1rem; }
.btn-toggle { background: none; border: none; color: var(--clr-text); font-size: 1.5rem; cursor: pointer; }

/* ── Cards / Panels ── */
.card-vigia {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.card-vigia:hover { border-color: var(--clr-primary); box-shadow: 0 0 20px rgba(99,102,241,.1); }

/* ── Stat cards ── */
.stat-card {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    display: flex; align-items: center; gap: 1rem;
}
.stat-card .stat-icon {
    width: 48px; height: 48px; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem;
}
.stat-icon.primary { background: rgba(99,102,241,.15); color: var(--clr-primary); }
.stat-icon.success { background: rgba(34,197,94,.15); color: var(--clr-success); }
.stat-icon.warning { background: rgba(245,158,11,.15); color: var(--clr-warning); }
.stat-icon.danger  { background: rgba(239,68,68,.15); color: var(--clr-danger); }
.stat-icon.info    { background: rgba(59,130,246,.15); color: var(--clr-info); }
.stat-icon.accent  { background: rgba(34,211,238,.15); color: var(--clr-accent); }
.stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1; }
.stat-label { font-size: .8rem; color: var(--clr-text-muted); margin-top: 2px; }

/* ── Tables ── */
.table-vigia { width: 100%; border-collapse: separate; border-spacing: 0; }
.table-vigia thead th {
    background: var(--clr-surface-2);
    color: var(--clr-text-muted);
    font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em;
    padding: .75rem 1rem; border: none; white-space: nowrap;
}
.table-vigia tbody td {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--clr-border);
    vertical-align: middle;
}
.table-vigia tbody tr:hover { background: var(--clr-surface-2); }

/* ── Badges ── */
.badge-vigia {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .25rem .65rem; border-radius: 20px;
    font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.badge-new        { background: rgba(59,130,246,.15); color: var(--clr-info); }
.badge-open       { background: rgba(34,211,238,.15); color: var(--clr-accent); }
.badge-inprogress { background: rgba(99,102,241,.15); color: var(--clr-primary); }
.badge-waitingonclient { background: rgba(245,158,11,.15); color: var(--clr-warning); }
.badge-waitingondeveloper { background: rgba(168,85,247,.15); color: #a855f7; }
.badge-resolved   { background: rgba(34,197,94,.15); color: var(--clr-success); }
.badge-closed     { background: rgba(145,148,167,.15); color: var(--clr-text-muted); }
.badge-reopened   { background: rgba(239,68,68,.15); color: var(--clr-danger); }

.badge-critical { background: rgba(239,68,68,.15); color: var(--clr-danger); }
.badge-high     { background: rgba(245,158,11,.15); color: var(--clr-warning); }
.badge-medium   { background: rgba(59,130,246,.15); color: var(--clr-info); }
.badge-low      { background: rgba(34,197,94,.15); color: var(--clr-success); }

.badge-sla-breach { background: rgba(239,68,68,.2); color: var(--clr-danger); animation: pulseBreach 2s ease-in-out infinite; }
@keyframes pulseBreach { 0%,100% { opacity:1; } 50% { opacity:.6; } }

/* ── Status transition buttons (colors mirror status badges) ── */
/* Combined selector (specificity 0,2,0) beats .btn-vigia (0,1,0) which resets border:none */
.btn-vigia.btn-status-new, .btn-vigia.btn-status-open, .btn-vigia.btn-status-inprogress,
.btn-vigia.btn-status-waitingonclient, .btn-vigia.btn-status-waitingondeveloper,
.btn-vigia.btn-status-resolved, .btn-vigia.btn-status-closed, .btn-vigia.btn-status-reopened {
    transition: background var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.btn-vigia.btn-status-new              { background: rgba(59,130,246,.08);  border: 1px solid rgba(59,130,246,.5);  color: var(--clr-info); }
.btn-vigia.btn-status-new:hover        { background: rgba(59,130,246,.18);  border-color: var(--clr-info);          color: var(--clr-info);          transform: translateY(-1px); box-shadow: 0 2px 8px rgba(59,130,246,.2); }
.btn-vigia.btn-status-open             { background: rgba(34,211,238,.08);  border: 1px solid rgba(34,211,238,.5);  color: var(--clr-accent); }
.btn-vigia.btn-status-open:hover       { background: rgba(34,211,238,.18);  border-color: var(--clr-accent);        color: var(--clr-accent);        transform: translateY(-1px); box-shadow: 0 2px 8px rgba(34,211,238,.2); }
.btn-vigia.btn-status-inprogress       { background: rgba(99,102,241,.08);  border: 1px solid rgba(99,102,241,.5);  color: var(--clr-primary); }
.btn-vigia.btn-status-inprogress:hover { background: rgba(99,102,241,.18);  border-color: var(--clr-primary);       color: var(--clr-primary);       transform: translateY(-1px); box-shadow: 0 2px 8px rgba(99,102,241,.2); }
.btn-vigia.btn-status-waitingonclient       { background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.5);  color: var(--clr-warning); }
.btn-vigia.btn-status-waitingonclient:hover { background: rgba(245,158,11,.18); border-color: var(--clr-warning);       color: var(--clr-warning);       transform: translateY(-1px); box-shadow: 0 2px 8px rgba(245,158,11,.2); }
.btn-vigia.btn-status-waitingondeveloper       { background: rgba(168,85,247,.08);  border: 1px solid rgba(168,85,247,.5);  color: #a855f7; }
.btn-vigia.btn-status-waitingondeveloper:hover { background: rgba(168,85,247,.18);  border-color: #a855f7;                  color: #a855f7;                  transform: translateY(-1px); box-shadow: 0 2px 8px rgba(168,85,247,.2); }
.btn-vigia.btn-status-resolved              { background: rgba(34,197,94,.08);  border: 1px solid rgba(34,197,94,.5);   color: var(--clr-success); }
.btn-vigia.btn-status-resolved:hover        { background: rgba(34,197,94,.18);  border-color: var(--clr-success);        color: var(--clr-success);        transform: translateY(-1px); box-shadow: 0 2px 8px rgba(34,197,94,.2); }
.btn-vigia.btn-status-closed               { background: rgba(145,148,167,.08); border: 1px solid rgba(145,148,167,.4); color: var(--clr-text-muted); }
.btn-vigia.btn-status-closed:hover         { background: rgba(145,148,167,.15); border-color: var(--clr-text-muted);    color: var(--clr-text-muted);    transform: translateY(-1px); box-shadow: 0 2px 8px rgba(145,148,167,.15); }
.btn-vigia.btn-status-reopened              { background: rgba(239,68,68,.08);  border: 1px solid rgba(239,68,68,.5);   color: var(--clr-danger); }
.btn-vigia.btn-status-reopened:hover        { background: rgba(239,68,68,.18);  border-color: var(--clr-danger);         color: var(--clr-danger);         transform: translateY(-1px); box-shadow: 0 2px 8px rgba(239,68,68,.2); }

/* ── Buttons ── */
.btn-vigia {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .5rem 1.25rem; border: none; border-radius: var(--radius-sm);
    font-weight: 600; font-size: .85rem; cursor: pointer;
    transition: all var(--transition); text-decoration: none;
}
.btn-primary-v { background: var(--clr-primary); color: var(--clr-text-on-primary); }
.btn-primary-v:hover { background: var(--clr-primary-hover); color: var(--clr-text-on-primary); }
.btn-outline-v { background: transparent; border: 1px solid var(--clr-border); color: var(--clr-text); }
.btn-outline-v:hover { border-color: var(--clr-primary); color: var(--clr-primary); }
.btn-danger-v  { background: var(--clr-danger); color: var(--clr-text-on-primary); }
.btn-success-v { background: var(--clr-success); color: var(--clr-text-on-primary); }

/* ── Forms ── */
.form-control, .form-select {
    background: var(--clr-surface-2) !important;
    border: 1px solid var(--clr-border) !important;
    color: var(--clr-text) !important;
    border-radius: var(--radius-sm) !important;
    padding: .6rem .9rem !important;
    transition: border-color var(--transition) !important;
}
.form-control:focus, .form-select:focus {
    border-color: var(--clr-primary) !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.15) !important;
}
.form-label { font-weight: 500; color: var(--clr-text-muted); font-size: .85rem; margin-bottom: .35rem; }

/* ── Page titles ── */
.page-title {
    font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem;
    display: flex; align-items: center; gap: .75rem;
}
.page-title i { color: var(--clr-primary); }

/* ── Section titles (cards/panels) ── */
.section-title {
    color: var(--clr-text);
    font-weight: 700;
    letter-spacing: .01em;
    margin-bottom: 1rem;
}
.section-title i { color: var(--clr-primary); margin-right: .35rem; }

/* ── Login page ── */
.login-wrapper {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--clr-login-gradient-start) 0%, var(--clr-login-gradient-end) 100%);
}
.login-card {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    padding: 2.5rem;
    width: 100%; max-width: 420px;
    box-shadow: var(--shadow-lg);
}
.login-brand {
    text-align: center; margin-bottom: 2rem;
    font-size: 2rem; font-weight: 700;
    background: linear-gradient(135deg, var(--clr-primary), var(--clr-accent));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* ── Responsive ── */
@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.show { transform: translateX(0); }
    .main-content { margin-left: 0; }
}
@media (max-width: 575.98px) {
    .content-area { padding: 1rem; }
    .stat-card { padding: 1rem; }
}

/* ═══════════════════════════════════════
   Overrides centralizados — neutralizar utilities Bootstrap oscuros.
   Mantienen coherencia con el design system claro sin modificar vistas.
   Para volver a oscuro: cambiar solo las variables de :root arriba.
   ═══════════════════════════════════════ */

.bg-dark, .bg-black, .text-bg-dark {
    background-color: var(--clr-surface-2) !important;
    color: var(--clr-text) !important;
}

.bg-dark .text-white,
.bg-black .text-white,
.text-bg-dark .text-white,
.bg-dark.text-white,
.bg-black.text-white {
    color: var(--clr-text) !important;
}

.bg-dark .border-secondary,
.bg-dark.border-secondary,
.bg-black .border-secondary {
    border-color: var(--clr-border) !important;
}

.bg-dark .form-control.bg-transparent,
.bg-black .form-control.bg-transparent {
    color: var(--clr-text) !important;
}

.navbar-dark {
    background-color: var(--clr-surface) !important;
}
.navbar-dark .navbar-brand,
.navbar-dark .nav-link {
    color: var(--clr-text) !important;
}