body {
            background-color: #eef2f7;
            font-size: 0.95rem;
        }

        .app-wrapper {
            display: flex;
            min-height: 100vh;
        }

        .sidebar {
            width: 260px;
            background: linear-gradient(180deg, #244b78 0%, #326199 100%);
            color: white;
            flex-shrink: 0;
            box-shadow: 4px 0 12px rgba(0,0,0,0.12);
        }

        .sidebar-header {
            padding: 22px 20px;
            border-bottom: 1px solid rgba(255,255,255,0.18);
        }

        .sidebar-header h5 {
            margin: 0;
            font-weight: 700;
            letter-spacing: 0.3px;
        }

        .sidebar-header small {
            color: rgba(255,255,255,0.75);
        }

        .sidebar-menu {
            padding: 16px 12px;
        }

        .sidebar-menu a {
            display: flex;
            align-items: center;
            gap: 10px;
            color: rgba(255,255,255,0.88);
            text-decoration: none;
            padding: 11px 14px;
            border-radius: 12px;
            margin-bottom: 6px;
            transition: all 0.15s ease-in-out;
        }

        .sidebar-menu a:hover,
        .sidebar-menu a.active {
            background-color: rgba(255,255,255,0.16);
            color: white;
        }

        .sidebar-menu i {
            font-size: 1.05rem;
        }

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

        .topbar {
            height: 64px;
            background-color: white;
            border-bottom: 1px solid #dde3ec;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 26px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        }

        .topbar-title {
            font-weight: 700;
            color: #24364b;
        }

        .content-area {
            padding: 26px;
        }

        .content-container {
            max-width: 1380px;
            margin: 0 auto;
        }

        .card {
            border: none;
            border-radius: 16px;
        }

        .card.shadow-lg {
            box-shadow: 0 10px 24px rgba(25, 42, 70, 0.10) !important;
        }

        .card-header-custom {
            background-color: #326199;
            color: white;
            font-weight: bold;
            border-radius: 16px 16px 0 0 !important;
            padding: 14px 18px;
        }

        .stat-card {
            border-radius: 18px;
            background: white;
            box-shadow: 0 8px 20px rgba(25, 42, 70, 0.08);
            padding: 20px;
            height: 100%;
        }

        .stat-icon {
            width: 48px;
            height: 48px;
            border-radius: 14px;
            background-color: #eef4fb;
            color: #326199;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.45rem;
        }

        .stat-title {
            color: #6c7a89;
            font-size: 0.88rem;
            margin-bottom: 4px;
        }

        .stat-value {
            font-size: 1.8rem;
            font-weight: 800;
            color: #24364b;
            line-height: 1.1;
        }

        .stat-subtitle {
            font-size: 0.82rem;
            color: #8a97a8;
        }

        .table {
            margin-bottom: 0;
        }

        .table thead th {
            background-color: #f4f7fb;
            color: #44546a;
            font-size: 0.82rem;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }

        .btn-primary {
            background-color: #326199;
            border-color: #326199;
        }

        .btn-primary:hover {
            background-color: #284f7d;
            border-color: #284f7d;
        }

        @media (max-width: 900px) {
            .app-wrapper {
                flex-direction: column;
            }

            .sidebar {
                width: 100%;
            }

            .sidebar-menu {
                display: flex;
                overflow-x: auto;
                gap: 6px;
            }

            .sidebar-menu a {
                white-space: nowrap;
            }

            .content-area {
                padding: 16px;
            }
        }

        .badge-tipo-amarillo {
    background-color: #f6c343;
    color: #2f2f2f;
}

.badge-tipo-verde {
    background-color: #2e9f5b;
    color: #ffffff;
}

.badge-tipo-permiso {
    background-color: #b94a48;
    color: #ffffff;
}

.badge-tipo-maritimo {
    background-color: #5dade2;
    color: #ffffff;
}

.badge-tipo-otro {
    background-color: #6c757d;
    color: #ffffff;
}