body {
            font-family: 'Inter', sans-serif;
            background: #f1f5f9;
            overflow-x: hidden;
        }

        .sidebar {
            width: 250px;
            height: 100vh;
            position: fixed;
            left: 0;
            top: 0;
            background: #1e293b;
            color: #fff;
            overflow-y: auto;     /* activa scroll vertical */
        }

        .sidebar a {
            color: #cbd5e1;
            text-decoration: none;
        }

        .sidebar a:hover {
            color: #fff;
        }

        .sidebar .nav-link.active {
            background: #0f172a;
            color: #fff;
        }

        .content {
            margin-left: 250px;
        }

        .topbar {
            height: 60px;
            background: #ffffff;
            border-bottom: 1px solid #e2e8f0;
        }

        /* Modo oscuro */
        .dark-mode body {
            background: #0f172a;
            color: #e2e8f0;
        }

        .dark-mode .topbar {
            background: #1e293b;
            border-color: #334155;
        }

        .dark-mode .sidebar {
            background: #0f172a;
        }

        .dark-mode .card {
            background: #1e293b;
            color: #e2e8f0;
        }

        .dark-mode .table {
            color: #e2e8f0;
        }

        /* Animación flechas */
        .rotate-180 {
            transform: rotate(180deg);
            transition: 0.2s ease;
        }

        .nav-link i {
            transition: 0.2s ease;
        }


        .filtro-box {
            width: 400px;
            padding: 20px;
            border: 1px solid #ccc;
            margin-top: 20px;
            border-radius: 6px;
        }
        /* select, button {
             width: 100%; 
            padding: 8px;
            margin-top: 10px;
        } */
        button {
            background: #007bff;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 4px;
        }
        button:hover {
            background: #0056b3;
        }

                table {
            border-collapse: collapse;
            width: 100%;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #ccc;
            padding: 8px;
        }
        th {
            background: #eee;
        }
        .mi-boton {
            padding: 6px 12px;
            background: #007bff;
            color: white;
            text-decoration: none;
            border-radius: 4px;
        }
        .mi-boton:hover {
            background: #0056b3;
        }
        .volver {
            margin-top: 20px;
            display: inline-block;
        }


        .nav-buttons a {
            padding: 8px 14px;
            background: #007bff;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            margin-right: 5px;
        }
        .nav-buttons a:hover {
            background: #0056b3;
        }
.active {
    background-color: orangered !important; /* tu color */
    color: #ffffff !important;
}
    .pointer { cursor: pointer; }


        /* .activo {
            background: orangered;
            color:black;
        } */


 

/* Estados controlados por Alpine */
.sidebar-visible,
.sidebar-hidden {
    transition: transform 0.25s ease;
}

.sidebar-visible {
    transform: translateX(0);
}

.sidebar-hidden {
    transform: translateX(-250px);
}

/* Cuando el sidebar está visible */
.content-normal {
    margin-left: 250px;
    transition: margin-left 0.25s ease;
}

/* Cuando el sidebar está oculto */
.content-expanded {
    margin-left: 0;
    transition: margin-left 0.25s ease;
}