/* ============================================================
   DEVELOPER GPSC PORTAL — CSS
   Colores: azul #003366 / #0066cc, naranja #ff6600
   ============================================================ */

:root {
    --primary:      #003366;
    --primary-light:#0066cc;
    --accent:       #ff6600;
    --success:      #22c55e;
    --warning:      #f59e0b;
    --danger:       #ef4444;
    --info:         #3b82f6;
    --sidebar-w:    240px;
    --sidebar-bg:   #0d1117;
    --sidebar-item: rgba(255,255,255,0.06);
    --sidebar-hover:rgba(255,255,255,0.10);
    --sidebar-active:rgba(0,102,204,0.25);
    --topbar-h:     56px;
    --bg:           #f0f2f5;
    --card-bg:      #ffffff;
    --border:       #e5e7eb;
    --text:         #1f2937;
    --text-muted:   #6b7280;
    --radius:       10px;
    --shadow:       0 2px 12px rgba(0,51,102,0.08);
    --shadow-lg:    0 8px 32px rgba(0,51,102,0.15);
    font-family: 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }

/* ============================================================
   LANDING PAGE
   ============================================================ */
.landing-body {
    background-image: url('../img/fondo.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    min-height: 100vh;
    overflow: hidden;
}
.landing-body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, rgba(5,13,26,0.88) 0%, rgba(10,22,40,0.85) 100%);
    pointer-events: none;
    z-index: 0;
}
#particles-canvas {
    position: fixed; top:0; left:0;
    width:100%; height:100%;
    pointer-events:none; z-index:0;
}
.landing-grid {
    position: fixed; inset:0;
    background-image:
        linear-gradient(rgba(0,102,204,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,102,204,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none; z-index:0;
}
.landing-wrapper {
    position: relative; z-index:1;
    min-height: 100vh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 20px;
    gap: 32px;
}
.landing-header {
    position: fixed; top:0; left:0; right:0;
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 32px;
    background: rgba(5,13,26,0.8);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    z-index: 10;
}
.landing-logo img { height: 38px; }
.landing-header-right { display:flex; align-items:center; gap:16px; }
.landing-time { color:rgba(255,255,255,0.5); font-size:.85rem; font-variant-numeric: tabular-nums; }
.logo-fallback { display:flex; align-items:center; gap:12px; }
.logo-fallback-icon { width:40px; height:40px; border-radius:8px; background:linear-gradient(135deg,#003366,#0066cc); display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.logo-fallback-name { font-weight:700; font-size:1rem; }
.logo-fallback-sub { font-size:.75rem; color:rgba(255,255,255,.5); }

.landing-hero { text-align:center; }
.hero-tag {
    display: inline-flex; align-items:center; gap:8px;
    background: rgba(0,102,204,0.15);
    border: 1px solid rgba(0,102,204,0.3);
    color: #60a5fa; border-radius: 100px;
    padding: 6px 16px; font-size:.8rem; font-weight:600;
    letter-spacing:.05em; margin-bottom:16px;
}
.hero-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800; line-height:1.1;
    color: white; margin-bottom:12px;
}
.hero-title-accent {
    background: linear-gradient(135deg, #0066cc, #ff6600);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    min-width: 160px; display: inline-block;
}
.hero-subtitle { color:rgba(255,255,255,.5); font-size:1rem; }

.portals-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1100px;
    width: 100%;
}
@media (max-width: 900px) { .portals-grid { grid-template-columns: 1fr; } }

.portal-card {
    position: relative;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 24px;
    text-decoration: none;
    color: white;
    overflow: hidden;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), border-color .3s, box-shadow .3s;
    display: flex; flex-direction: column; gap: 16px;
    cursor: pointer;
}
.portal-card:hover {
    border-color: rgba(0,102,204,0.4);
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    color: white;
}
.portal-card-featured { border-color: rgba(255,102,0,0.2); }
.portal-card-featured:hover { border-color: rgba(255,102,0,0.5); }
.portal-card-glow {
    position: absolute; width:200px; height:200px; border-radius:50%;
    filter: blur(60px); opacity:0; top:-50px; right:-50px;
    transition: opacity .3s; pointer-events:none;
}
.portal-card:hover .portal-card-glow { opacity: 0.08; }
.glow-blue  { background: #0066cc; }
.glow-cyan  { background: #00ccff; }
.glow-orange { background: #ff6600; }

.featured-badge {
    position: absolute; top:12px; right:12px;
    background: rgba(255,102,0,0.15); border: 1px solid rgba(255,102,0,0.3);
    color: #ff6600; font-size:.7rem; font-weight:700;
    padding: 3px 10px; border-radius:100px;
}
.portal-card-inner { display:flex; align-items:center; gap:16px; }
.portal-card-icon-wrap {
    width:52px; height:52px; border-radius:12px; flex-shrink:0;
    background: color-mix(in srgb, var(--card-color) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--card-color) 25%, transparent);
    display:flex; align-items:center; justify-content:center;
    font-size:1.4rem; color: var(--card-color);
}
.portal-card-body { flex:1; }
.portal-card-label { font-size:.65rem; font-weight:700; letter-spacing:.1em; color:rgba(255,255,255,.35); margin-bottom:4px; }
.portal-card-title { font-size:1.25rem; font-weight:700; margin-bottom:4px; }
.portal-card-desc { font-size:.8rem; color:rgba(255,255,255,.5); line-height:1.4; }
.portal-card-arrow { color:rgba(255,255,255,.2); transition:color .3s, transform .3s; }
.portal-card:hover .portal-card-arrow { color:rgba(255,255,255,.7); transform:translateX(4px); }
.portal-card-footer { display:flex; justify-content:space-between; align-items:center; padding-top:12px; border-top:1px solid rgba(255,255,255,.05); }
.portal-status { display:flex; align-items:center; gap:6px; font-size:.78rem; color:rgba(255,255,255,.4); }
.portal-card-tag { font-size:.75rem; color:rgba(255,255,255,.2); font-family:monospace; }

.status-dot {
    width:8px; height:8px; border-radius:50%; flex-shrink:0;
}
.status-online { background:#22c55e; box-shadow:0 0 6px #22c55e80; animation: pulse-green 2s infinite; }
.status-offline { background:#ef4444; }
.status-checking { background:#f59e0b; }
@keyframes pulse-green { 0%,100%{box-shadow:0 0 6px #22c55e80} 50%{box-shadow:0 0 12px #22c55e} }

.landing-footer { color:rgba(255,255,255,.25); font-size:.78rem; }
.landing-footer-sep { margin:0 8px; }

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-body {
    background-image: url('../img/fondo.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    position: relative;
}
.login-body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, rgba(5,13,26,0.88) 0%, rgba(10,22,40,0.85) 100%);
    pointer-events: none;
    z-index: 0;
}
.login-wrapper { position:relative; z-index:1; width:100%; max-width:420px; padding:20px; }
.login-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px; overflow:hidden;
    backdrop-filter: blur(20px);
}
.login-card-header {
    background: linear-gradient(135deg, rgba(0,51,102,0.6), rgba(0,102,204,0.3));
    padding: 32px; text-align:center; border-bottom:1px solid rgba(255,255,255,.05);
}
.login-logo img { height:48px; margin-bottom:16px; }
.login-title { color:white; font-size:1.5rem; font-weight:700; }
.login-subtitle { color:rgba(255,255,255,.4); font-size:.8rem; margin-top:4px; }
.login-alerts { padding: 0 24px 16px; }
.login-form { padding: 24px; display:flex; flex-direction:column; gap:20px; }
.login-field { display:flex; flex-direction:column; gap:8px; }
.login-field label { color:rgba(255,255,255,.6); font-size:.82rem; font-weight:600; display:flex; align-items:center; gap:6px; }
.login-input {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    color: white !important; border-radius:10px; padding:12px 16px;
    font-size:.95rem; transition:border-color .2s;
}
.login-input:focus { border-color: rgba(0,102,204,.6) !important; box-shadow: 0 0 0 3px rgba(0,102,204,.15) !important; outline:none; }
.login-input::placeholder { color:rgba(255,255,255,.2) !important; }
.login-password-wrap { position:relative; }
.login-password-wrap .login-input { padding-right:44px; width:100%; }
.login-eye-btn {
    position:absolute; right:12px; top:50%; transform:translateY(-50%);
    background:none; border:none; color:rgba(255,255,255,.3); cursor:pointer;
    padding:4px; transition:color .2s;
}
.login-eye-btn:hover { color:rgba(255,255,255,.7); }
.login-submit-btn {
    background: linear-gradient(135deg, #003366, #0066cc);
    border:none; color:white; border-radius:10px;
    padding:14px; font-size:1rem; font-weight:600;
    cursor:pointer; transition:all .2s; display:flex; align-items:center; justify-content:center; gap:8px;
}
.login-submit-btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,102,204,.4); }
.login-footer { text-align:center; padding:16px 24px; color:rgba(255,255,255,.3); font-size:.78rem; border-top:1px solid rgba(255,255,255,.05); }
.login-back-link { color:rgba(255,255,255,.4); text-decoration:none; }
.login-back-link:hover { color:rgba(255,255,255,.7); }

/* ============================================================
   PORTAL BODY (authenticated)
   ============================================================ */
.portal-body {
    background-image: url('../img/fondo.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    display:flex; height:100vh; overflow:hidden;
    position: relative;
}
.portal-body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(240,242,245,0.96);
    pointer-events: none;
    z-index: 0;
}
.sidebar, .main-wrapper { position: relative; z-index: 1; }

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
    width: var(--sidebar-w);
    background: var(--sidebar-bg);
    height: 100vh;
    display: flex; flex-direction:column;
    flex-shrink: 0;
    transition: width .3s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
    border-right: 1px solid rgba(255,255,255,.05);
    z-index: 100;
}
.sidebar.collapsed { width: 64px; }
.sidebar-header {
    display:flex; align-items:center; justify-content:space-between;
    padding: 16px;
    border-bottom: 1px solid rgba(255,255,255,.05);
    height: var(--topbar-h);
    flex-shrink:0;
}
.sidebar-logo { display:flex; align-items:center; gap:10px; overflow:hidden; }
.sidebar-logo img { height:28px; flex-shrink:0; filter:brightness(0) invert(1); }
.sidebar-brand { color:white; font-weight:700; font-size:.95rem; white-space:nowrap; }
.sidebar-sub { color:rgba(255,255,255,.3); font-size:.65rem; white-space:nowrap; }
.sidebar.collapsed .sidebar-brand,
.sidebar.collapsed .sidebar-sub,
.sidebar.collapsed .sidebar-user,
.sidebar.collapsed .nav-section-label,
.sidebar.collapsed .nav-item span,
.sidebar.collapsed .nav-badge { display:none; }
.sidebar-toggle-btn {
    background:none; border:none; color:rgba(255,255,255,.4);
    cursor:pointer; padding:6px; border-radius:6px; transition:all .2s; flex-shrink:0;
}
.sidebar-toggle-btn:hover { color:white; background:rgba(255,255,255,.1); }

.sidebar-user {
    display:flex; align-items:center; gap:10px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,.05);
    flex-shrink:0;
}
.user-avatar {
    width:32px; height:32px; border-radius:8px;
    background:linear-gradient(135deg,#003366,#0066cc);
    color:white; font-weight:700; font-size:.85rem;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
}
.user-name { color:white; font-size:.85rem; font-weight:600; white-space:nowrap; }
.user-role { color:rgba(255,255,255,.3); font-size:.7rem; display:flex; align-items:center; gap:4px; }

.sidebar-nav { flex:1; overflow-y:auto; overflow-x:hidden; padding:8px 0; }
.sidebar-nav::-webkit-scrollbar { width:4px; }
.sidebar-nav::-webkit-scrollbar-track { background:transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:2px; }
.nav-section-label {
    color:rgba(255,255,255,.2); font-size:.65rem; font-weight:700;
    letter-spacing:.1em; padding:12px 16px 4px;
    text-transform:uppercase; white-space:nowrap;
}
.nav-divider { border-top:1px solid rgba(255,255,255,.05); margin:8px 0; }
.nav-item {
    display:flex; align-items:center; gap:10px;
    padding:9px 16px; color:rgba(255,255,255,.55);
    text-decoration:none; border-radius:8px; margin:1px 8px;
    font-size:.87rem; font-weight:500; transition:all .2s;
    white-space:nowrap; overflow:hidden;
    position:relative;
}
.nav-item i { font-size:.95rem; width:18px; text-align:center; flex-shrink:0; }
.nav-item:hover { color:white; background:var(--sidebar-hover); }
.nav-item.active { color:white; background:var(--sidebar-active); }
.nav-item.active::before {
    content:''; position:absolute; left:0; top:20%; bottom:20%;
    width:3px; background:var(--primary-light); border-radius:0 2px 2px 0;
}
.nav-item-danger:hover { background:rgba(239,68,68,.15); color:#f87171; }
.nav-badge {
    margin-left:auto; font-size:.6rem; font-weight:700; letter-spacing:.05em;
    background:rgba(239,68,68,.2); color:#f87171; padding:2px 6px; border-radius:4px;
    animation: pulse-red 2s infinite;
}
@keyframes pulse-red { 0%,100%{opacity:1} 50%{opacity:.5} }

/* ============================================================
   MAIN WRAPPER / TOPBAR
   ============================================================ */
.main-wrapper {
    flex:1; display:flex; flex-direction:column;
    overflow:hidden; transition:all .3s;
}
.topbar {
    height:var(--topbar-h); background:var(--card-bg);
    border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between;
    padding:0 24px; flex-shrink:0;
    box-shadow:0 1px 4px rgba(0,0,0,.04);
}
.topbar-left { display:flex; align-items:center; gap:16px; }
.topbar-menu-btn {
    background:none; border:none; color:var(--text-muted);
    cursor:pointer; padding:6px; border-radius:6px; transition:all .2s;
    display:flex; align-items:center; justify-content:center;
}
.topbar-menu-btn:hover { color:var(--text); background:var(--bg); }
.breadcrumb-portal { display:flex; align-items:center; gap:8px; color:var(--text-muted); font-size:.85rem; }
.breadcrumb-portal a { color:var(--primary-light); text-decoration:none; }
.breadcrumb-portal a:hover { text-decoration:underline; }
.bc-sep { color:var(--border); font-size:.75rem; }
.topbar-right { display:flex; align-items:center; gap:16px; }
.topbar-time { font-size:.82rem; color:var(--text-muted); font-variant-numeric:tabular-nums; font-family:monospace; }
.topbar-apps { display:flex; gap:8px; }
.topbar-app-link { color:var(--text-muted); font-size:.95rem; padding:4px 8px; border-radius:6px; transition:all .2s; }
.topbar-app-link:hover { color:var(--primary-light); background:var(--bg); }

/* ============================================================
   FLASH / ALERTS
   ============================================================ */
.flash-container { padding:0 24px; }
.portal-alert {
    margin-top:12px; border-radius:10px;
    display:flex; align-items:center; gap:8px;
    font-size:.87rem; border:none;
}
.portal-alert .btn-close { margin-left:auto; }

/* ============================================================
   PAGE CONTENT
   ============================================================ */
.page-content {
    flex:1; overflow-y:auto; overflow-x:hidden;
    padding:24px;
}
.page-content::-webkit-scrollbar { width:6px; }
.page-content::-webkit-scrollbar-track { background:transparent; }
.page-content::-webkit-scrollbar-thumb { background:rgba(0,0,0,.1); border-radius:3px; }

.page-header {
    display:flex; align-items:flex-start; justify-content:space-between;
    margin-bottom:24px; gap:16px; flex-wrap:wrap;
}
.page-title {
    font-size:1.5rem; font-weight:700; color:var(--text);
    display:flex; align-items:center; gap:12px;
}
.page-subtitle { color:var(--text-muted); font-size:.87rem; margin-top:4px; }
.page-header-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.page-title-icon { font-size:1.2rem; }
.badge-time {
    background:var(--bg); border:1px solid var(--border);
    padding:6px 12px; border-radius:8px; font-size:.8rem; color:var(--text-muted);
    display:flex; align-items:center; gap:6px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-portal {
    display:inline-flex; align-items:center; gap:8px;
    padding:9px 18px; border-radius:8px; font-size:.87rem; font-weight:600;
    text-decoration:none; border:none; cursor:pointer; transition:all .2s;
    white-space:nowrap;
}
.btn-portal-primary {
    background:linear-gradient(135deg, var(--primary), var(--primary-light));
    color:white;
}
.btn-portal-primary:hover { box-shadow:0 4px 16px rgba(0,102,204,.4); transform:translateY(-1px); color:white; }
.btn-portal-ghost {
    background:var(--card-bg); color:var(--text-muted);
    border:1px solid var(--border);
}
.btn-portal-ghost:hover { color:var(--text); border-color:var(--primary-light); }
.btn-portal-danger { background:#fee2e2; color:var(--danger); }
.btn-portal-danger:hover { background:var(--danger); color:white; }
.btn-portal-warning { background:#fef3c7; color:var(--warning); }
.btn-portal-warning:hover { background:var(--warning); color:white; }
.btn-portal-vault { background:linear-gradient(135deg, #1e1b4b, #312e81); color:#a5b4fc; }
.btn-portal-vault:hover { box-shadow:0 4px 16px rgba(99,102,241,.4); color:white; }
.btn-sm { padding:6px 12px !important; font-size:.8rem !important; }
.w-100 { width:100%; justify-content:center; }

/* ============================================================
   KPI CARDS
   ============================================================ */
.kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
@media(max-width:900px) { .kpi-row { grid-template-columns:repeat(2,1fr); } }
.kpi-card {
    background:var(--card-bg); border-radius:var(--radius);
    padding:20px; display:flex; flex-direction:column; gap:12px;
    box-shadow:var(--shadow); border:1px solid var(--border);
    position:relative; overflow:hidden;
}
.kpi-card::before {
    content:''; position:absolute; top:0; left:0; right:0;
    height:3px; border-radius:var(--radius) var(--radius) 0 0;
}
.kpi-blue::before  { background:linear-gradient(90deg,var(--primary),var(--primary-light)); }
.kpi-green::before { background:linear-gradient(90deg,#16a34a,#22c55e); }
.kpi-orange::before{ background:linear-gradient(90deg,#ea580c,var(--accent)); }
.kpi-purple::before{ background:linear-gradient(90deg,#7c3aed,#a78bfa); }
.kpi-icon { font-size:1.6rem; }
.kpi-blue .kpi-icon  { color:var(--primary-light); }
.kpi-green .kpi-icon { color:#22c55e; }
.kpi-orange .kpi-icon{ color:var(--accent); }
.kpi-purple .kpi-icon{ color:#a78bfa; }
.kpi-value { font-size:2rem; font-weight:800; color:var(--text); }
.kpi-label { font-size:.78rem; color:var(--text-muted); font-weight:600; }

/* ============================================================
   SECTION TITLE
   ============================================================ */
.section-title {
    font-size:.9rem; font-weight:700; color:var(--text-muted);
    text-transform:uppercase; letter-spacing:.05em;
    display:flex; align-items:center; gap:8px;
    margin-bottom:16px;
}

/* ============================================================
   APP STATUS GRID
   ============================================================ */
.apps-status-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:16px; margin-bottom:24px; }
.app-status-card { background:var(--card-bg); border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--border); overflow:hidden; }
.app-status-header {
    display:flex; align-items:center; gap:14px; padding:16px;
    border-bottom:1px solid var(--border);
    background:color-mix(in srgb, var(--app-color, #003366) 5%, transparent);
}
.app-status-icon {
    width:40px; height:40px; border-radius:10px; flex-shrink:0;
    background:color-mix(in srgb, var(--app-color,#003366) 12%, transparent);
    border:1px solid color-mix(in srgb, var(--app-color,#003366) 20%, transparent);
    color:var(--app-color,#003366); display:flex; align-items:center; justify-content:center;
    font-size:1.1rem;
}
.app-status-info { flex:1; overflow:hidden; }
.app-status-name { font-weight:700; font-size:.95rem; color:var(--text); }
.app-status-desc { font-size:.78rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-status-badge {
    display:flex; align-items:center; gap:5px;
    font-size:.65rem; font-weight:700; letter-spacing:.05em;
    padding:3px 8px; border-radius:6px;
}
.badge-running { background:#dcfce7; color:#16a34a; }
.badge-stopped { background:#fee2e2; color:#dc2626; }
.badge-unknown { background:#f3f4f6; color:#6b7280; }
.status-dot-sm { width:6px; height:6px; border-radius:50%; background:currentColor; }
.app-status-body { padding:16px; }
.app-status-error { color:var(--danger); font-size:.82rem; display:flex; align-items:center; gap:6px; }
.app-stat-row { display:flex; gap:24px; }
.app-stat { display:flex; flex-direction:column; gap:2px; }
.app-stat-val { font-size:1.25rem; font-weight:700; color:var(--text); }
.app-stat-lbl { font-size:.72rem; color:var(--text-muted); }
.app-status-footer { padding:12px 16px; border-top:1px solid var(--border); display:flex; gap:8px; }
.btn-app-action {
    flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
    padding:8px; border-radius:8px; font-size:.8rem; font-weight:600;
    text-decoration:none; transition:all .2s;
    background:var(--bg); color:var(--text-muted); border:1px solid var(--border);
}
.btn-app-action:hover { background:var(--primary); color:white; border-color:var(--primary); }
.btn-app-terminal:hover { background:#1e293b; color:#22c55e; border-color:#1e293b; }
.btn-app-new:hover { background:var(--success); color:white; border-color:var(--success); }

/* ============================================================
   DASHBOARD BOTTOM
   ============================================================ */
.dashboard-bottom { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:900px) { .dashboard-bottom { grid-template-columns:1fr; } }
.dash-panel { background:var(--card-bg); border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--border); overflow:hidden; }
.dash-panel-header { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border); font-weight:600; font-size:.9rem; color:var(--text); }
.dash-panel-link { font-size:.8rem; color:var(--primary-light); text-decoration:none; display:flex; align-items:center; gap:4px; }
.dash-panel-link:hover { color:var(--primary); }

.audit-list { padding:8px 0; }
.audit-item { display:flex; align-items:flex-start; gap:10px; padding:10px 16px; border-bottom:1px solid var(--border); }
.audit-item:last-child { border:none; }
.audit-icon {
    width:28px; height:28px; border-radius:8px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:.75rem;
    background:var(--bg); color:var(--text-muted);
}
.audit-login { background:#dbeafe; color:#2563eb; }
.audit-crear { background:#dcfce7; color:#16a34a; }
.audit-editar { background:#fef3c7; color:#d97706; }
.audit-eliminar { background:#fee2e2; color:#dc2626; }
.audit-vault { background:#f3e8ff; color:#7c3aed; }
.audit-body { flex:1; min-width:0; }
.audit-action { font-size:.8rem; font-weight:700; color:var(--text); }
.audit-user { font-size:.75rem; color:var(--text-muted); }
.audit-detail { font-size:.72rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.audit-time { font-size:.72rem; color:var(--text-muted); white-space:nowrap; }

.docs-quick-list { padding:8px 0; }
.doc-quick-item { display:flex; align-items:center; gap:12px; padding:10px 16px; border-bottom:1px solid var(--border); text-decoration:none; transition:background .15s; }
.doc-quick-item:hover { background:var(--bg); }
.doc-quick-item:last-child { border:none; }
.doc-quick-icon { width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:.9rem; flex-shrink:0; }
.doc-quick-title { font-size:.87rem; font-weight:600; color:var(--text); }
.doc-quick-desc { font-size:.75rem; color:var(--text-muted); }
.vault-badge-sm { font-size:.75rem; color:#7c3aed; margin-left:auto; }

/* ============================================================
   TABLES
   ============================================================ */
.table-wrap { background:var(--card-bg); border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--border); overflow:hidden; overflow-x:auto; }
.portal-table { width:100%; border-collapse:collapse; font-size:.87rem; }
.portal-table thead tr { background:linear-gradient(135deg,var(--primary),var(--primary-light)); }
.portal-table thead th { padding:12px 16px; color:white; font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.portal-table tbody tr { border-bottom:1px solid var(--border); transition:background .15s; }
.portal-table tbody tr:last-child { border:none; }
.portal-table tbody tr:hover { background:#f8fafc; }
.portal-table tbody td { padding:12px 16px; color:var(--text); vertical-align:middle; }
.row-inactive { opacity:.55; }
.td-id { color:var(--text-muted); font-size:.78rem; font-family:monospace; }
.td-email { color:var(--text-muted); font-family:monospace; font-size:.82rem; }
.td-detail { max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-muted); font-size:.82rem; }
.td-time { font-size:.8rem; color:var(--text-muted); font-family:monospace; white-space:nowrap; }
.td-ip { font-family:monospace; font-size:.8rem; color:var(--text-muted); }
.empty-state-small { padding:20px; text-align:center; color:var(--text-muted); font-size:.85rem; display:flex; align-items:center; justify-content:center; gap:8px; }
.btn-link-small { color:var(--primary-light); text-decoration:none; font-size:.82rem; }

/* Table toolbar */
.table-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.table-search { display:flex; align-items:center; gap:8px; background:var(--card-bg); border:1px solid var(--border); border-radius:8px; padding:8px 14px; flex:1; min-width:200px; }
.table-search i { color:var(--text-muted); font-size:.85rem; }
.table-search-input { border:none; outline:none; font-size:.87rem; color:var(--text); width:100%; background:transparent; }
.table-filters { display:flex; gap:6px; flex-wrap:wrap; }
.filter-btn { background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:6px 12px; font-size:.78rem; font-weight:600; cursor:pointer; transition:all .2s; color:var(--text-muted); }
.filter-btn:hover { border-color:var(--primary-light); color:var(--primary); }
.filter-btn.active { background:var(--primary); color:white; border-color:var(--primary); }
.audit-filters { display:flex; gap:10px; align-items:center; flex-wrap:wrap; width:100%; }

/* User cell */
.user-cell { display:flex; align-items:center; gap:8px; }
.user-cell-avatar {
    width:28px; height:28px; border-radius:6px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:.75rem; font-weight:700;
}
.user-cell-avatar-sm { width:24px; height:24px; border-radius:6px; font-size:.7rem; }
.user-cell-avatar-lg { width:44px; height:44px; border-radius:10px; font-size:1.1rem; font-weight:700; display:flex; align-items:center; justify-content:center; color:white; }

/* Role badges */
.role-badge {
    display:inline-block; padding:3px 10px; border-radius:6px; font-size:.72rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.04em;
}
.role-admin { background:#fee2e2; color:#991b1b; }
.role-manager { background:#dbeafe; color:#1d4ed8; }
.role-rrhh { background:#dcfce7; color:#166534; }
.role-direccion { background:#fef9c3; color:#854d0e; }
.role-data { background:#f3e8ff; color:#6b21a8; }
.role-informatica { background:#e0f2fe; color:#0369a1; }
.role-usuario { background:#f1f5f9; color:#475569; }

/* Toggle switch */
.toggle-switch { position:relative; display:inline-block; width:40px; height:22px; cursor:pointer; }
.toggle-switch input { display:none; }
.toggle-slider {
    position:absolute; inset:0; border-radius:22px;
    background:#d1d5db; transition:.3s;
}
.toggle-slider::before {
    content:''; position:absolute;
    width:16px; height:16px; left:3px; top:3px;
    border-radius:50%; background:white; transition:.3s;
}
.toggle-switch input:checked + .toggle-slider { background:var(--success); }
.toggle-switch input:checked + .toggle-slider::before { transform:translateX(18px); }

/* Action buttons */
.action-btns { display:flex; gap:4px; }
.action-btn {
    width:30px; height:30px; border-radius:6px; border:none;
    background:var(--bg); color:var(--text-muted);
    display:flex; align-items:center; justify-content:center;
    font-size:.8rem; cursor:pointer; transition:all .2s; text-decoration:none;
}
.action-btn:hover { background:var(--primary); color:white; }
.action-btn-danger:hover { background:var(--danger); color:white; }

/* Permisos */
.badge-permisos { background:#fef3c7; color:#d97706; font-size:.72rem; padding:3px 8px; border-radius:6px; font-weight:600; display:flex; align-items:center; gap:4px; }
.badge-permisos-full { background:#dcfce7; color:#16a34a; font-size:.72rem; padding:3px 8px; border-radius:6px; font-weight:600; display:flex; align-items:center; gap:4px; }

/* Audit action badge */
.audit-action-badge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:6px; font-size:.75rem; font-weight:600; background:var(--bg); color:var(--text-muted); }
.audit-login  .audit-action-badge { background:#dbeafe; color:#2563eb; }

/* Pagination */
.pagination-portal { display:flex; justify-content:center; gap:4px; margin-top:16px; }
.page-btn {
    min-width:36px; height:36px; border-radius:8px; border:1px solid var(--border);
    background:var(--card-bg); color:var(--text-muted); font-size:.85rem; font-weight:600;
    display:flex; align-items:center; justify-content:center; text-decoration:none; cursor:pointer; transition:all .2s;
}
.page-btn:hover { border-color:var(--primary-light); color:var(--primary-light); }
.page-btn-active { background:var(--primary); color:white; border-color:var(--primary); }
.page-btn-dots { border:none; background:none; }

/* ============================================================
   FORMS
   ============================================================ */
.form-card { background:var(--card-bg); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); border:1px solid var(--border); margin-bottom:16px; }
.form-card-title { font-size:.9rem; font-weight:700; color:var(--text); margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.form-card-info { background:#f8fafc; }
.form-card-danger { background:#fff5f5; border-color:#fecaca; }
.form-group-portal { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.form-group-full { grid-column:1/-1; }
.form-label-portal { font-size:.82rem; font-weight:600; color:var(--text); display:flex; align-items:center; gap:6px; }
.form-input-portal {
    background:var(--bg); border:1px solid var(--border); border-radius:8px;
    padding:10px 14px; font-size:.87rem; color:var(--text);
    transition:border-color .2s, box-shadow .2s; outline:none; width:100%;
    font-family:inherit;
}
.form-input-portal:focus { border-color:var(--primary-light); box-shadow:0 0 0 3px rgba(0,102,204,.1); }
.form-input-portal::placeholder { color:var(--text-muted); }
.form-select-portal {
    background:var(--bg); border:1px solid var(--border); border-radius:8px;
    padding:10px 14px; font-size:.87rem; color:var(--text);
    transition:border-color .2s; outline:none; width:100%; cursor:pointer;
}
.form-select-portal:focus { border-color:var(--primary-light); box-shadow:0 0 0 3px rgba(0,102,204,.1); }
.form-hint { font-size:.75rem; color:var(--text-muted); }
.form-check-portal { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:.87rem; }
.form-check-portal input { width:16px; height:16px; cursor:pointer; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
.form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
.form-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 12px; }
@media(max-width:700px) { .form-grid,.form-grid-2,.form-grid-3 { grid-template-columns:1fr; } }
.form-actions { display:flex; justify-content:flex-end; gap:10px; padding-top:16px; border-top:1px solid var(--border); margin-top:16px; }
.form-actions-fixed { display:flex; justify-content:flex-end; gap:10px; padding:16px 24px; background:var(--card-bg); border-top:1px solid var(--border); position:sticky; bottom:0; }
.input-with-btn { display:flex; gap:8px; }
.input-with-btn .form-input-portal { flex:1; }
.color-input-wrap { display:flex; align-items:center; gap:10px; }
.form-color-input { width:48px; height:40px; border-radius:6px; border:1px solid var(--border); cursor:pointer; padding:2px; }
.color-input-label { font-size:.82rem; color:var(--text-muted); }
.entry-textarea { resize:vertical; min-height:250px; font-family:'Consolas','Monaco',monospace; font-size:.85rem; }
.info-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border); font-size:.85rem; }
.info-row:last-child { border:none; }
.info-row span { color:var(--text-muted); }

/* Edit layout */
.edit-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:900px) { .edit-grid { grid-template-columns:1fr; } }
.edit-col { display:flex; flex-direction:column; gap:16px; }

/* Permisos RRHH */
.permisos-hint { font-size:.78rem; color:var(--text-muted); background:var(--bg); padding:8px 12px; border-radius:6px; margin-bottom:10px; }
.permisos-grid { border:1px solid var(--border); border-radius:8px; padding:12px; }
.permiso-check-all { display:flex; align-items:center; gap:6px; font-size:.82rem; font-weight:600; margin-bottom:10px; cursor:pointer; padding-bottom:10px; border-bottom:1px solid var(--border); }
.permisos-list { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.permiso-item { display:flex; align-items:center; gap:6px; font-size:.82rem; cursor:pointer; }
.permiso-item input { cursor:pointer; }

/* ============================================================
   DOCS
   ============================================================ */
.docs-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.doc-section-card { background:var(--card-bg); border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--border); overflow:hidden; }
.doc-section-vault { border-color:#c4b5fd; }
.doc-section-header { display:flex; align-items:center; gap:12px; padding:16px; border-bottom:1px solid var(--border); background:color-mix(in srgb, var(--sec-color,#003366) 5%, transparent); }
.doc-section-icon { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1rem; background:color-mix(in srgb, var(--sec-color,#003366) 12%, transparent); color:var(--sec-color,#003366); flex-shrink:0; }
.doc-section-meta { flex:1; }
.doc-section-title { font-weight:700; font-size:.9rem; color:var(--text); }
.doc-section-desc { font-size:.75rem; color:var(--text-muted); margin-top:2px; }
.doc-section-actions { display:flex; gap:4px; }
.doc-section-body { padding:14px 16px; }
.doc-section-stats { display:flex; justify-content:space-between; align-items:center; font-size:.8rem; color:var(--text-muted); }
.vault-tag { background:#f3e8ff; color:#7c3aed; padding:2px 8px; border-radius:4px; font-weight:700; font-size:.7rem; display:flex; align-items:center; gap:4px; }
.vault-tag-lg { font-size:.75rem; }
.doc-section-footer { padding:12px 16px; border-top:1px solid var(--border); }

/* Vault states */
.vault-locked-state { text-align:center; padding:60px 20px; }
.vault-locked-icon { font-size:4rem; color:#c4b5fd; margin-bottom:16px; }
.vault-locked-state h3 { font-size:1.3rem; color:var(--text); margin-bottom:8px; }
.vault-locked-state p { color:var(--text-muted); margin-bottom:24px; }
.vault-pin-form { display:flex; justify-content:center; }
.vault-pin-input-row { display:flex; gap:10px; }
.vault-pin-input { max-width:220px; }
.vault-banner {
    display:flex; align-items:center; gap:10px;
    background:#f3e8ff; border:1px solid #c4b5fd; color:#6b21a8;
    padding:10px 16px; border-radius:8px; font-size:.87rem; font-weight:600;
    margin-bottom:16px;
}
.vault-banner-close { margin-left:auto; color:#7c3aed; text-decoration:none; font-size:1rem; }
.vault-modal .modal-content { background:#1e1b4b; border:1px solid rgba(167,139,250,.2); color:white; }
.vault-modal-header { background:rgba(99,102,241,.1); border-bottom:1px solid rgba(167,139,250,.15); }

/* Entries */
.entries-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
.entry-card { background:var(--card-bg); border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--border); overflow:hidden; }
.entry-card-sensitive { border-color:#fca5a5; }
.entry-card-header { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border); gap:8px; }
.entry-title { font-weight:700; font-size:.9rem; color:var(--text); display:flex; align-items:center; gap:8px; flex:1; }
.entry-sensitive-icon { color:var(--accent); }
.entry-actions { display:flex; gap:4px; }
.entry-tags { padding:8px 16px; display:flex; gap:6px; flex-wrap:wrap; }
.entry-tag { background:var(--bg); border:1px solid var(--border); color:var(--text-muted); padding:2px 8px; border-radius:100px; font-size:.72rem; }
.entry-content { padding:12px 16px; }
.entry-pre { font-family:'Consolas','Monaco',monospace; font-size:.82rem; color:var(--text); white-space:pre-wrap; word-break:break-word; max-height:200px; overflow-y:auto; }
.entry-footer { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; border-top:1px solid var(--border); font-size:.75rem; color:var(--text-muted); }
.entry-sensitive-badge { background:#fee2e2; color:var(--danger); padding:2px 8px; border-radius:4px; font-weight:600; display:flex; align-items:center; gap:4px; }

/* ============================================================
   TERMINAL
   ============================================================ */
.terminal-container {
    background:#0d1117; border-radius:var(--radius);
    border:1px solid #30363d; overflow:hidden;
    display:flex; flex-direction:column;
    height: calc(100vh - 170px);
}
.terminal-tabs {
    display:flex; gap:2px; padding:8px 8px 0;
    background:#010409; border-bottom:1px solid #30363d;
    overflow-x:auto;
}
.terminal-tab {
    display:flex; align-items:center; gap:8px;
    padding:8px 16px; border-radius:8px 8px 0 0;
    background:transparent; border:1px solid transparent; border-bottom:none;
    color:rgba(255,255,255,.4); font-size:.82rem; font-weight:600;
    cursor:pointer; transition:all .2s; white-space:nowrap;
}
.terminal-tab:hover { color:rgba(255,255,255,.7); background:rgba(255,255,255,.03); }
.terminal-tab.active { background:#0d1117; color:white; border-color:#30363d; border-bottom-color:#0d1117; }
.tab-status-dot { width:6px; height:6px; border-radius:50%; background:#374151; }
.tab-status-dot.connected { background:#22c55e; box-shadow:0 0 6px #22c55e80; }
.terminal-panel { display:none; flex-direction:column; flex:1; }
.terminal-panel.active { display:flex; }
.terminal-infobar {
    display:flex; align-items:center; justify-content:space-between;
    padding:8px 12px; background:#010409; border-bottom:1px solid #30363d;
    flex-shrink:0;
}
.terminal-infobar-left { display:flex; align-items:center; gap:10px; }
.terminal-infobar-right { display:flex; align-items:center; gap:6px; }
.term-app-badge { font-size:.75rem; font-weight:700; padding:3px 10px; border-radius:6px; border:1px solid; display:flex; align-items:center; gap:5px; }
.term-path { font-family:monospace; font-size:.72rem; color:rgba(255,255,255,.25); }
.proc-status { display:flex; align-items:center; gap:6px; font-size:.75rem; color:rgba(255,255,255,.4); }
.term-action-btn { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.4); border-radius:6px; padding:4px 8px; cursor:pointer; font-size:.78rem; transition:all .2s; }
.term-action-btn:hover { background:rgba(255,255,255,.1); color:white; }
.xterm-container { flex:1; padding:8px; overflow:hidden; }
.terminal-statsbar { display:flex; gap:16px; align-items:center; padding:6px 12px; background:#010409; border-top:1px solid #30363d; font-size:.72rem; color:rgba(255,255,255,.25); }
.ms-auto { margin-left:auto; }
.live-badge { background:rgba(239,68,68,.15); color:#f87171; border:1px solid rgba(239,68,68,.2); font-size:.7rem; font-weight:700; padding:3px 8px; border-radius:6px; letter-spacing:.05em; display:inline-flex; align-items:center; gap:5px; animation:pulse-red 2s infinite; }
.toggle-autoscroll { display:flex; align-items:center; gap:6px; font-size:.82rem; color:var(--text-muted); cursor:pointer; }
.toggle-autoscroll input { cursor:pointer; }

/* ============================================================
   EMPLEADOS IT
   ============================================================ */
.empleados-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); gap:16px; }
.empleado-card { background:var(--card-bg); border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--border); overflow:hidden; }
.empleado-card-header { display:flex; align-items:center; gap:14px; padding:16px; border-bottom:1px solid var(--border); background:linear-gradient(135deg,rgba(0,51,102,.03),rgba(0,102,204,.03)); }
.empleado-avatar {
    width:48px; height:48px; border-radius:12px; flex-shrink:0;
    background:linear-gradient(135deg,var(--primary),var(--primary-light));
    color:white; font-weight:800; font-size:1rem;
    display:flex; align-items:center; justify-content:center;
}
.empleado-info { flex:1; }
.empleado-nombre { font-weight:700; font-size:.95rem; color:var(--text); }
.empleado-puesto { font-size:.78rem; color:var(--primary-light); font-weight:600; }
.empleado-empresa { font-size:.75rem; color:var(--text-muted); }
.empleado-actions { display:flex; gap:4px; }
.empleado-card-body { padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.empleado-row { display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--text); }
.empleado-row i { color:var(--primary-light); width:14px; text-align:center; flex-shrink:0; }
.copy-btn { background:none; border:1px solid var(--border); border-radius:4px; color:var(--text-muted); padding:2px 6px; cursor:pointer; font-size:.72rem; transition:all .2s; margin-left:auto; }
.copy-btn:hover { background:var(--primary); color:white; border-color:var(--primary); }
.creds-section,.devices-section,.notes-section { background:var(--bg); border-radius:8px; padding:10px 12px; }
.creds-title,.devices-title,.notes-title { font-size:.75rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; display:flex; align-items:center; gap:5px; margin-bottom:8px; }
.cred-item { border-bottom:1px solid var(--border); padding-bottom:8px; margin-bottom:8px; }
.cred-item:last-child { border:none; margin:0; padding:0; }
.cred-app { font-size:.82rem; font-weight:700; color:var(--text); display:flex; align-items:center; gap:6px; margin-bottom:5px; }
.cred-user,.cred-pass { display:flex; align-items:center; gap:6px; font-size:.8rem; }
.cred-label { color:var(--text-muted); min-width:70px; }
.cred-masked { font-family:monospace; letter-spacing:.1em; }
.devices-text,.notes-text { font-size:.82rem; color:var(--text); white-space:pre-wrap; }
.empleado-card-footer { padding:10px 16px; border-top:1px solid var(--border); background:var(--bg); }
.emp-date { font-size:.75rem; color:var(--text-muted); display:flex; align-items:center; gap:4px; }
.creds-form-hint { background:#f0f9ff; border:1px solid #bae6fd; color:#0369a1; font-size:.78rem; padding:8px 12px; border-radius:6px; margin-bottom:14px; display:flex; align-items:center; gap:6px; }
.cred-form-item { background:var(--bg); border-radius:8px; padding:14px; margin-bottom:12px; border:1px solid var(--border); }
.cred-form-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.cred-form-num { width:22px; height:22px; border-radius:50%; background:var(--primary); color:white; font-size:.72rem; font-weight:700; display:flex; align-items:center; justify-content:center; }

/* ============================================================
   MODALS
   ============================================================ */
.portal-modal .modal-header { background:linear-gradient(135deg,var(--primary),var(--primary-light)); color:white; }
.portal-modal .modal-header .btn-close { filter:brightness(0) invert(1); }
.modal-header-danger { background:linear-gradient(135deg,#991b1b,var(--danger)) !important; }

/* ============================================================
   TOASTS
   ============================================================ */
.portal-toast {
    position:fixed; bottom:20px; right:20px; z-index:9999;
    background:white; border-radius:10px; padding:12px 18px;
    box-shadow:0 8px 32px rgba(0,0,0,.15);
    display:flex; align-items:center; gap:8px;
    font-size:.87rem; font-weight:600; color:var(--text);
    transform:translateY(20px); opacity:0; transition:all .3s;
    border-left:4px solid var(--success);
}
.portal-toast.show { transform:translateY(0); opacity:1; }
.portal-toast-success { border-left-color:var(--success); }
.portal-toast-warning { border-left-color:var(--warning); }
.portal-toast-danger  { border-left-color:var(--danger); }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
    text-align:center; padding:60px 20px;
    display:flex; flex-direction:column; align-items:center; gap:12px;
}
.empty-state i { font-size:3rem; color:#d1d5db; }
.empty-state h3 { color:var(--text); font-size:1.1rem; }
.empty-state p { color:var(--text-muted); font-size:.87rem; }

/* ============================================================
   MISC
   ============================================================ */
.text-success { color:var(--success) !important; }
.text-danger  { color:var(--danger)  !important; }
.text-muted   { color:var(--text-muted) !important; }
.small        { font-size:.82rem; }
.ms-auto      { margin-left:auto; }
.mt-2         { margin-top:8px; }