:root {
    --pt-navy: #0f1b3c;
    --pt-navy-2: #142251;
    --pt-blue: #2563eb;
    --pt-cyan: #06b6d4;
    --pt-bg: #f4f6fb;
    --pt-border: #e5e9f2;
    --pt-text-muted: #6b7280;
}

* { box-sizing: border-box; }

body {
    background: var(--pt-bg);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: #1f2937;
}

a { text-decoration: none; }

/* ---------- Layout ---------- */
.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 260px;
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--pt-navy) 0%, var(--pt-navy-2) 100%);
    color: #fff;
    padding: 1.5rem 1rem;
    position: sticky;
    top: 0;
    height: 100vh;
}

.sidebar-offcanvas {
    background: linear-gradient(180deg, var(--pt-navy) 0%, var(--pt-navy-2) 100%);
    color: #fff;
    width: 280px;
}
.sidebar-offcanvas .offcanvas-header { border-bottom: 1px solid rgba(255,255,255,.1); }

.brand-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
    padding: 4px;
}

.sidebar-brand, .offcanvas-header {
    padding-bottom: 1.25rem;
    margin-bottom: .5rem;
    border-bottom: 1px solid rgba(255,255,255,.1);
}

.brand-text { font-weight: 700; font-size: 1.05rem; color: #fff; display:flex; align-items:center; gap:.5rem;}
.brand-slogan { font-size: .72rem; color: rgba(255,255,255,.6); }

.sidebar-nav { display: flex; flex-direction: column; gap: .25rem; margin-top: .5rem; padding: 0 .25rem; }

.sidebar-nav .nav-link, .sidebar-footer .nav-link {
    color: rgba(255,255,255,.75);
    padding: .65rem .9rem;
    border-radius: 10px;
    font-size: .92rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    transition: background .15s ease, color .15s ease;
}
.sidebar-nav .nav-link i, .sidebar-footer .nav-link i { font-size: 1.05rem; width: 20px; text-align: center; }

.sidebar-nav .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-nav .nav-link.active { background: linear-gradient(90deg, var(--pt-blue), var(--pt-cyan)); color: #fff; font-weight: 600; }
.sidebar-nav .nav-link.disabled-link { opacity: .45; cursor: default; }

.sidebar-footer { border-top: 1px solid rgba(255,255,255,.1); padding-top: 1rem; margin-top: auto; padding-left:.25rem; padding-right:.25rem; }
.sidebar-user { display: flex; align-items: center; color: #fff; padding: 0 .65rem .75rem; }
.role-badge { color: var(--pt-cyan); font-size: .65rem; letter-spacing: .05em; }
.logout-link:hover { background: rgba(220,53,69,.2) !important; color: #fff !important; }

.topbar {
    background: var(--pt-navy);
    padding: .75rem 1rem;
    position: sticky;
    top: 0;
    z-index: 10;
}

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-content { padding: 1.75rem; flex: 1; }

@media (max-width: 991.98px) {
    .app-content { padding: 1.25rem; }
}

/* ---------- Auth ---------- */
.auth-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at top left, var(--pt-navy-2), var(--pt-navy) 60%);
    padding: 1rem;
}

.auth-card {
    background: #fff;
    border-radius: 18px;
    padding: 2.5rem 2.25rem;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.auth-logo { width: 64px; height: 64px; object-fit: contain; margin: 0 auto 1rem; display: block; }

/* ---------- Cards / stats ---------- */
.stat-card {
    border: 1px solid var(--pt-border);
    border-radius: 16px;
    background: #fff;
    padding: 1.25rem 1.4rem;
    box-shadow: 0 4px 14px rgba(20,34,81,.04);
}
.stat-card .stat-icon {
    width: 46px; height: 46px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; color: #fff;
}
.stat-value { font-size: 1.75rem; font-weight: 700; }
.stat-label { color: var(--pt-text-muted); font-size: .85rem; }

.company-banner {
    border-radius: 18px;
    background: linear-gradient(120deg, var(--pt-navy) 0%, var(--pt-blue) 100%);
    color: #fff;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.project-card {
    border: 1px solid var(--pt-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(20,34,81,.04);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .15s ease, box-shadow .15s ease;
}
.project-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(20,34,81,.1); }

.project-logo-wrap {
    width: 56px; height: 56px; border-radius: 12px;
    background: var(--pt-bg); display: flex; align-items: center; justify-content: center;
    overflow: hidden; flex-shrink: 0;
}
.project-logo-wrap img { width: 100%; height: 100%; object-fit: contain; }
.project-logo-wrap i { font-size: 1.6rem; color: var(--pt-blue); }

.badge-status-activo { background: #dcfce7; color: #166534; }
.badge-status-en_desarrollo { background: #fef9c3; color: #854d0e; }
.badge-status-inactivo { background: #fee2e2; color: #991b1b; }
.badge-tipo {
    background: #e0e7ff;
    color: #3730a3;
    white-space: normal;
    text-align: left;
    max-width: 100%;
}

.section-title {
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
}
.section-title i { color: var(--pt-blue); }

.feature-mini-card {
    border: 1px solid var(--pt-border);
    border-radius: 12px;
    padding: .85rem 1rem;
    background: #fff;
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    height: 100%;
}
.feature-mini-card i { color: var(--pt-cyan); font-size: 1.1rem; margin-top: 2px; }

.access-row {
    border: 1px solid var(--pt-border);
    border-radius: 12px;
    padding: 1rem;
}

.password-mask { letter-spacing: 2px; font-family: monospace; }

.empty-state { text-align: center; padding: 3rem 1rem; color: var(--pt-text-muted); }
.empty-state i { font-size: 2.5rem; opacity: .4; margin-bottom: .5rem; display:block; }