/* ============================
   Estilos Globales
============================ */
:root {
    --color-principal: #5b8238; /* Verde Bootstrap */
    --color-secundario: #ffffff;
    --color-terciario: #333;
    --color-fondo: #f8f9fa;
    --color-fondo2: #f5f5f5;
    --color-card: #d3d3d3;
    --color-texto: #212529;
    --color-menu: #ed8d05;
    --color-tablas: #ffd37a;
    --colo-hover: #a3c585;
    --azul-contorno: #1976d2;

    --fuente-principal: "Roboto", sans-serif;
}

body {
    font-family: var(--fuente-principal);
    background-color: var(--color-fondo);
    color: var(--color-texto);
}
/* ===========================
elementos comunes
============================ */

/* ============================
   Botones
============================ */

.btn-principal {
    background-color: var(--color-principal);
    color: var(--color-secundario);
    border: none;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.btn-principal:hover {
    background-color: #8fafa0;
}

/* ============================
   Login
============================ */

.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.login-card {
    background: #ffffff;
    border: none;
    border-radius: 1rem;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 420px;
    padding: 2rem;
}

.login-card h3 {
    color: #5b8238;
    font-weight: 700;
    text-align: center;
}

.login-card h4,
.login-card h5 {
    text-align: center;
    color: var(--color-texto);
}

.footer-text {
    text-align: center;
    color: var(--color-terciario);
    margin-top: 15px;
    font-size: 0.9rem;
}

/*logo del login*/

.brand-logo {
    max-width: 180px;
    height: auto;
    display: block;
    margin: 0 auto 1rem auto;
}

/* ============================
   Responsive Login - Tablet (768px - 991px)
============================ */
@media (min-width: 768px) and (max-width: 991px) {
    .login-container {
        padding: 1.5rem;
    }

    .login-card {
        max-width: 400px;
        padding: 1.75rem;
    }

    .brand-logo {
        max-width: 150px;
    }

    .login-card h3 {
        font-size: 1.4rem;
    }

    .login-card h4 {
        font-size: 1.1rem;
    }

    .login-card h5 {
        font-size: 0.95rem;
    }
}

/* ============================
   Responsive Login - Mobile Landscape (576px - 767px)
============================ */
@media (min-width: 576px) and (max-width: 767px) {
    .login-container {
        padding: 1rem;
        min-height: 100vh;
    }

    .login-card {
        max-width: 380px;
        padding: 1.5rem;
    }

    .brand-logo {
        max-width: 130px;
        margin-bottom: 0.75rem;
    }

    .login-card h3 {
        font-size: 1.25rem;
        margin-bottom: 0.5rem;
    }

    .login-card h4 {
        font-size: 1rem;
        margin-bottom: 0.3rem;
    }

    .login-card h5 {
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }

    .form-control-lg {
        font-size: 0.9rem;
        padding: 0.65rem 0.75rem 0.65rem 2.5rem;
    }
}

/* ============================
   Responsive Login - Small Mobile (< 576px)
============================ */
@media (max-width: 575px) {
    .login-container {
        padding: 0.75rem;
        min-height: 100vh;
        align-items: flex-start;
        padding-top: 2rem;
    }

    .login-card {
        padding: 1.25rem;
        border-radius: 0.75rem;
        max-width: 100%;
        box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15);
    }

    .brand-logo {
        max-width: 100px;
        margin-bottom: 0.75rem;
    }

    .login-card h3 {
        font-size: 1.15rem;
        margin-bottom: 0.5rem;
    }

    .login-card h4 {
        font-size: 0.95rem;
        margin-bottom: 0.3rem;
    }

    .login-card h5 {
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }

    .login-card .form-control-lg {
        font-size: 0.85rem;
        padding: 0.6rem 0.75rem 0.6rem 2.2rem;
    }

    .login-card .btn-principal {
        font-size: 0.9rem;
        padding: 0.6rem 0.75rem;
        border-radius: 0.5rem;
    }

    .footer-text {
        font-size: 0.72rem;
        padding: 0.5rem 0.75rem;
        line-height: 1.3;
    }

    /* Ajustar iconos dentro de inputs */
    .login-card .position-absolute.ps-3 {
        padding-left: 0.75rem !important;
    }
}

/* ============================
   Responsive Login - Extra Small (< 400px)
============================ */
@media (max-width: 400px) {
    .login-container {
        padding: 0.5rem;
        padding-top: 1.5rem;
    }

    .login-card {
        padding: 1rem;
        border-radius: 0.6rem;
    }

    .brand-logo {
        max-width: 80px;
        margin-bottom: 0.5rem;
    }

    .login-card h3 {
        font-size: 1.05rem;
    }

    .login-card h4 {
        font-size: 0.9rem;
    }

    .login-card h5 {
        font-size: 0.8rem;
    }

    .login-card .mb-3 {
        margin-bottom: 0.75rem !important;
    }

    .login-card .form-control-lg {
        font-size: 0.82rem;
        padding: 0.5rem 0.6rem 0.5rem 2rem;
    }

    .login-card .btn-principal {
        font-size: 0.85rem;
        padding: 0.55rem 0.6rem;
    }

    .footer-text {
        font-size: 0.68rem;
        padding: 0.4rem 0.5rem;
    }
}
/* ============================
   Utilidades
============================ */
.text-titulo {
    color: var(--color-principal);
}

/*=============================
Navbar personalizado superior
=============================*/

.custom-navbar {
    background-color: #ffffff !important;
    font-family: Roboto, sans-serif;
}

.navbar-logo {
    height: 60px;
}
.titulo {
    color: var(--color-principal);
}

.navbar .nav-link {
    color: var(--color-principal);
}

.navbar .nav-link:hover {
    color: var(--color-terciario);
}

/*Estilo del imput de busqueda */

.navbar .form-control {
    color: var(--color-terciario);
    border-radius: 50px;
    border-color: var(--color-principal);
    padding: 0.4rem 0.8rem;
}

/* estilo del sirculo con las iniciales menu superior*/

.circulo-redondo {
    background-color: var(--color-principal);
    color: white;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/*=============================
Sidebar lateral
=============================*/

/* Navbar Superior */
.navbar {
    height: 70px;
    z-index: 1030;
}

.navbar-logo {
    height: 40px;
    width: auto;
}

.text-titulo {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-texto);
}

.circulo-redondo {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5b8238 30%, #ed8d05 70%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    margin-right: 8px;
}

/* Sidebar - Desktop */
.sidebar {
    position: fixed;
    top: 70px;
    left: 0;
    width: 240px;
    height: calc(100vh - 70px);
    background: var(--color-fondo2);
    overflow-y: auto;
    transition: transform 0.3s ease-in-out;
    z-index: 1020;
    padding-top: 1rem;
}

.sidebar .nav-link {
    color: var(--color-texto);
    padding: 0.85rem 1.5rem;
    transition: all 0.3s;
    border-left: 3px solid transparent;
    font-size: 0.95rem;
    border-radius: 10px;
}

.sidebar .nav-link:hover {
    background-color: var(--color-principal);
    color: white;
    border-left-color: var(--color-menu);
}

.sidebar .nav-link.active {
    background-color: rgba(52, 152, 219, 0.2);
    color: white;
    border-left-color: #3498db;
}

.sidebar .text-muted {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1rem 1.5rem 0.5rem;
    margin-top: 1rem;
}

/* Contenido Principal - Desktop */
.content {
    margin-left: 240px;
    margin-top: 70px;
    padding: 2rem;
    min-height: calc(100vh - 70px);
    background-color: #f8f9fa;
}

/* Topbar (opcional) */
.topbar {
    position: fixed;
    top: 70px;
    left: 240px;
    right: 0;
    height: 50px;
    background: var(--color-fondo);
    border-bottom: 1px solid #dee2e6;
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    z-index: 1010;
    transition: left 0.3s ease-in-out;
}

.content.con-sidebar {
    margin-top: 120px;
    /* 70px navbar + 50px topbar */
}

.btn-toggle-menu {
    background: none;
    border: none;
    font-size: 1.4rem;
    color: var(--color-principal);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
}

.btn-toggle-menu:hover {
    background-color: rgba(91, 130, 56, 0.1);
    color: var(--color-principal);
}

.btn-toggle-menu:active {
    background-color: rgba(91, 130, 56, 0.2);
}

/* Overlay para móvil */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1019;
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.sidebar-overlay.active {
    display: block;
    opacity: 1;
    visibility: visible;
}

/* Body cuando el menú está abierto - prevenir scroll */
body.sidebar-open {
    overflow: hidden;
}

/* RESPONSIVE - Tablet y Mobile */
@media (max-width: 991px) {
    /* Sidebar oculto por defecto en móvil */
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.open {
        transform: translateX(0);
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
    }

    /* Contenido ocupa todo el ancho */
    .content {
        margin-left: 0;
    }

    /* Topbar oculto en movil - el boton hamburguesa esta en el navbar */
    .topbar {
        display: none !important;
    }

    /* Ajustar margin del contenido sin topbar */
    .content.con-sidebar {
        margin-top: 70px;
    }
}

@media (max-width: 768px) {
    /* Ajustes para móviles pequeños */
    .navbar {
        height: 60px;
    }

    .sidebar {
        top: 60px;
        height: calc(100vh - 60px);
        width: 280px;
    }

    .content {
        margin-top: 60px;
        padding: 1rem;
    }

    .topbar {
        top: 60px;
        height: 45px;
        padding: 0 1rem;
    }

    .content.con-sidebar {
        margin-top: 105px;
        /* 60px navbar + 45px topbar */
    }

    .text-titulo {
        font-size: 0.95rem;
    }

    .navbar-brand small {
        font-size: 0.7rem;
    }
}

/* Scrollbar personalizado para sidebar */
.sidebar::-webkit-scrollbar {
    width: 6px;
}

.sidebar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/*=============================
estylos del dashboard vista SST y ADMIN
=============================*/

.stat-card {
    border-radius: 0.8rem;
    transition: transform 0.2s ease;
}
.stat-card:hover {
    transform: translateY(-3px);
}
/*alertas y actividades */

.list-group-item {
    font-size: 0.9rem;
}
.card-body {
    padding: 6px 6px 6px 4px;
}

/*alertas*/

.alert {
    font-size: 0.8rem;
    border: none;
    border-radius: 0.7rem;
}
.alert:hover {
    transform: translateY(-3px);
}

/*===========================================
estylos de gestion de usuarios  vista  ADMIN
===========================================*/
/* ===== Tabla de Usuarios ===== */

/* Filas impares del cuerpo de la tabla */
.table-usuarios-body tr:nth-child(odd) {
    background-color: #2a662a; /* Otro tono de verde claro para alternancia */
}

/* Celdas del cuerpo de la tabla */
.table-usuarios-body td {
    color: #173517; /* Verde oscuro para buen contraste y legibilidad */
}

/* Efecto hover sobre las filas de la tabla */
.table-hover tbody tr:hover {
    background-color: #95d895 !important; /* Verde más intenso al pasar el cursor */
}

/* Botón de advertencia con borde naranja claro */
.btn-outline-warning {
    border-color: #ffb84d; /* Borde naranja pastel */
    color: #d58500; /* Texto naranja oscuro */
}

/* Hover del botón de advertencia */
.btn-outline-warning:hover {
    background-color: #ffb84d; /* Fondo naranja pastel al pasar el cursor */
    color: white; /* Texto blanco para contraste */
}

/* Botón de eliminación con borde rojo claro */
.btn-outline-danger {
    border-color: #e06b6b; /* Borde rojo suave */
    color: #b30000; /* Texto rojo intenso */
}

/* Hover del botón de eliminación */
.btn-outline-danger:hover {
    background-color: #e06b6b; /* Fondo rojo suave al pasar el cursor */
    color: white; /* Texto blanco para contraste */
}
/* Página activa en la paginación */
.pagination .page-item.active .page-link {
    background-color: var(
        --color-menu
    ); /* Fondo naranja para destacar la página activa */
    border-color: var(
        --color-menu
    ); /* Borde del mismo color para coherencia visual */
}

/* Enlaces de paginación generales */
.pagination .page-link {
    color: #333; /* Texto gris oscuro para buena legibilidad */
    border-radius: 6px; /* Bordes redondeados para suavizar el diseño */
}

/* ===== Tarjetas ===== */
.card-header.bg-naranja {
    background-color: var(--color-menu) !important;
    color: white;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/* ===== Formularios ===== */
.form-modern .form-label {
    font-weight: 500;
    color: #444;
}

.form-modern .form-control,
.form-modern .form-select {
    border-radius: 8px;
    border: 1px solid #ccc;
    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.form-modern .form-control:focus,
.form-modern .form-select:focus {
    border-color: var(--color-menu);
}

/* ===== Switch Activo ===== */
.form-check-input:checked {
    background-color: var(--color-principal);
    border-color: var(--color-principal);
}

/* ===== Animaciones suaves ===== */
.card,
.btn,
.form-control {
    transition: all 0.25s ease;
}
/*===========================================
Estilos para la vista gestion de vehiculos sst y admin

============================================*/

/* ======= GENERAL ======= */
.breadcrumb a {
    color: var(--azul-contorno);
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.card {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.card-header {
    font-weight: 600;
    color: #fff;
    background: var(--color-principal);
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-header i {
    color: var(--color-fondo2);
    background: var(--azul-contorno);
    border-radius: 50%;
    padding: 8px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.form-label {
    font-weight: 600;
    color: #333;
}

.btn-success {
    background: var(--color-principal);
    border: none;
}

.btn-success:hover {
    background: var(--colo-hover);
}

.btn-primary {
    background-color: var(--color-principal);
    background: var(--color-principal);
    border: none;
}

.btn-primary:hover {
    background: var(--color-principal);
}
F .btn-outline-primary {
    color: var(--azul-contorno);
    border-color: var(--azul-contorno);
}

.btn-outline-primary:hover {
    background: var(--azul-contorno);
    color: #fff;
}

.alert-info,
.alert-warning {
    border-left: 6px solid var(--azul-contorno);
}

/*=========================== 
vista crear conductor

============================*/
.text-licencia {
    color: var(--color-texto);
}
.title-licencia {
    color: #fff;
}

.bg-conductor {
    background-color: var(--color-principal);
}

.color-card {
    background-color: var(--color-card);
}
/*===== vista reportes y consultas=====*/

/* ======== TITULO PRINCIPAL ======== */
h2 {
    font-weight: 700;
    color: #003b73;
    text-align: center;
    margin-bottom: 1.5rem;
}

/* ======== CARD DEL FORMULARIO ======== */
.card-body {
    background: #ffffff;
}

form.card {
    border-left: 5px solid #003b73;
    border-radius: 10px;
}

form.card label {
    font-weight: 600;
    color: #003b73;
}

.form-check-label {
    font-weight: 500;
}

/* ======== BOTONES CORPORATIVOS ======== */
.btn-primary {
    background-color: #003b73;
    border-color: #003b73;
}

.btn-primary:hover {
    background-color: #002f5a;
    border-color: #002f5a;
}

.btn-outline-secondary:hover {
    background-color: #003b73;
    color: #fff;
}

/* Botones export */
.btn-success {
    background-color: #198754 !important;
}

.btn-danger {
    background-color: #dc3545 !important;
}

/* ======== TABLA ======== */
.table thead {
    background: #003b73;
    color: #fff;
}

.table tbody tr:hover {
    background-color: #f4f9ff;
}

.table td,
.table th {
    vertical-align: middle;
}

.badge {
    font-size: 0.8rem;
}

/* ======== CARD RESULTADOS ======== */
.card {
    border-radius: 12px;
    overflow: hidden;
}

.table-responsive {
    border-radius: 10px;
}

/* ======== RESPONSIVE ======== */
@media (max-width: 768px) {
    form.card {
        padding: 1rem !important;
    }

    h2 {
        font-size: 1.4rem;
    }

    .table-responsive {
        font-size: 0.85rem;
    }

    .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .d-flex.gap-2 {
        flex-direction: column;
    }
}

@media (max-width: 576px) {
    form .row > div {
        margin-bottom: 0.7rem;
    }

    .table th,
    .table td {
        padding: 0.5rem;
    }
}

/*==============================================================
estylos para la vista de crar prpietarios vehiculos y documentos 

=================================================================*/

/* Reduce tamaño de tarjetas en móvil */
@media (max-width: 576px) {
    .card {
        margin-bottom: 1rem;
        padding: 0.5rem;
    }

    .card-header {
        font-size: 1rem;
        padding: 0.5rem 0.75rem;
    }

    .card-body {
        padding: 0.75rem;
    }

    h3 {
        font-size: 1.3rem;
    }

    label {
        font-size: 0.9rem;
    }
}
.btn-universal {
    background-color: var(--color-principal);
    border-color: var(--color-principal);
    color: #fff;
}

.btn-universal:hover {
    background-color: var(--colo-hover);
    border-color: var(--colo-hover);
}

.bg-header {
    background-color: var(--color-principal);
    color: #fff;
}

.alert-custom {
    border-left: 6px solid var(--color-menu);
    background-color: var(--color-tablas);
    color: var(--color-texto);
}

/* Contenedor moderno */
.progress-wrapper {
    background: #ffffff;
    border-left: 5px solid #4e73df;
    transition: 0.3s ease;
}

.progress-wrapper:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

/* Icono moderno */
.icon-modern {
    background: linear-gradient(135deg, #4e73df, #1cc88a);
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
}

/* Barra de progreso */
.modern-progress {
    background: #eef2f6 !important;
    border-radius: 10px;
    overflow: hidden;
}

.modern-progress-bar {
    background: linear-gradient(90deg, #4e73df, #1cc88a);
    background-size: 200% 200%;
    animation: gradientFlow 4s ease infinite;
    font-weight: bold;
    color: #fff;
}

/* Animación suave */
@keyframes gradientFlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
/*=========================================
ESTYLOS PARA LA VISTA CONSULTAS Y REPORTES SST Y ADMIN
==========================================*/

/* Estilos adicionales para mejorar la apariencia */

.table-hover tbody tr:hover {
    background-color: rgba(102, 126, 234, 0.05);
}
.btn-excel {
    background-color: var(--color-principal);
    color: white;
}
.btn-excel:hover {
    background-color: var(--colo-hover);
}

.btn-pdf {
    background-color: #d32f2f;
    color: white;
}
.btn-pdf:hover {
    background-color: #e76969;
}
.btn-limpiar {
    background-color: var(--color-menu);
}
.btn-limpiar:hover {
    background-color: #eeca98;
}
.icono-filtro {
    color: white !important;
    background-color: var(--color-principal) !important;
}

.card {
    transition: all 0.3s ease;
}

.badge {
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* Animación para las filas */
tbody tr {
    transition: all 0.2s ease;
}

/* Mejora visual de inputs */
.form-control-lg {
    border-radius: 0.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .card-body {
        padding: 1.5rem !important;
    }

    .table {
        font-size: 0.875rem;
    }

    .badge {
        font-size: 0.7rem;
    }
}
/* Tabla responsiva */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table td,
.table th {
    white-space: nowrap !important;
}

/*==========================
    Estilos para tablas el reporte pdf
============================*/

.hoja-pdf {
    display: table-header-group; /* 👈 fuerza a Dompdf a mostrar encabezado */
    background-color: #5b8238;
}

/*==============================================================================
    RESPONSIVE - SISTEMA COMPLETO PARA TODOS LOS DISPOSITIVOS
    Mobile First: 576px -> 768px -> 992px -> 1200px -> 1400px
==============================================================================*/

/* ============================================
   EXTRA LARGE DEVICES (xxl: >= 1400px)
   Monitores grandes y pantallas 4K
============================================ */
@media (min-width: 1400px) {
    .content {
        padding: 2.5rem 3rem;
    }

    .sidebar {
        width: 260px;
    }

    .content {
        margin-left: 260px;
    }

    .topbar {
        left: 260px;
    }

    /* Tablas más espaciadas */
    .table th,
    .table td {
        padding: 1rem 1.25rem;
    }

    /* Cards del dashboard más grandes */
    .stat-card .card-body {
        padding: 1.5rem;
    }

    .stat-card h3 {
        font-size: 2.25rem;
    }

    /* Container más amplio */
    .container-fluid {
        max-width: 1600px;
        margin: 0 auto;
    }
}

/* ============================================
   LARGE DEVICES (xl: 1200px - 1399px)
   Laptops y monitores estándar
============================================ */
@media (min-width: 1200px) and (max-width: 1399px) {
    .content {
        padding: 2rem 2.5rem;
    }

    .stat-card h3 {
        font-size: 1.85rem;
    }

    /* Dropdown de notificaciones más ancho */
    .dropdown-menu[aria-labelledby="notificacionesDropdown"] {
        min-width: 380px;
    }
}

/* ============================================
   MEDIUM-LARGE DEVICES (lg: 992px - 1199px)
   Tablets grandes y laptops pequeñas
============================================ */
@media (min-width: 992px) and (max-width: 1199px) {
    .sidebar {
        width: 220px;
    }

    .content {
        margin-left: 220px;
        padding: 1.5rem;
    }

    .topbar {
        left: 220px;
    }

    .sidebar .nav-link {
        padding: 0.75rem 1.25rem;
        font-size: 0.9rem;
    }

    .stat-card h3 {
        font-size: 1.6rem;
    }

    .stat-card h6 {
        font-size: 0.8rem;
    }

    /* Ajustar tabla */
    .table th,
    .table td {
        padding: 0.65rem;
        font-size: 0.9rem;
    }
}

/* ============================================
   TABLET DEVICES (md: 768px - 991px)
   iPads y tablets
============================================ */
@media (min-width: 768px) and (max-width: 991px) {
    /* Navbar */
    .navbar {
        height: 65px;
    }

    /* Sidebar oculto con overlay */
    .sidebar {
        transform: translateX(-100%);
        width: 280px;
        top: 65px;
        height: calc(100vh - 65px);
        box-shadow: none;
    }

    .sidebar.open {
        transform: translateX(0);
        box-shadow: 4px 0 15px rgba(0, 0, 0, 0.2);
    }

    /* Contenido ocupa todo el ancho */
    .content {
        margin-left: 0;
        margin-top: 65px;
        padding: 1.25rem;
    }

    /* Topbar ajustado */
    .topbar {
        left: 0;
        top: 65px;
        height: 48px;
    }

    .content.con-sidebar {
        margin-top: 113px; /* 65px navbar + 48px topbar */
    }

    /* Topbar oculto en tablet */
    .topbar {
        display: none !important;
    }

    .content.con-sidebar {
        margin-top: 65px;
    }

    /* Dashboard cards - 2 por fila en tablet */
    .stat-card {
        margin-bottom: 1rem;
    }

    .stat-card h3 {
        font-size: 1.5rem;
    }

    /* Navbar ajustes */
    .navbar-logo {
        height: 35px;
    }

    .text-titulo {
        font-size: 0.95rem;
    }

    .navbar-brand small {
        font-size: 0.7rem;
    }

    /* Botones de acción más pequeños */
    .btn-sm {
        padding: 0.35rem 0.5rem;
        font-size: 0.8rem;
    }

    /* Tabla responsiva */
    .table-responsive {
        margin: 0 -0.5rem;
        padding: 0 0.5rem;
    }

    .table th,
    .table td {
        padding: 0.6rem 0.5rem;
        font-size: 0.85rem;
    }

    /* Dropdown notificaciones */
    .dropdown-menu[aria-labelledby="notificacionesDropdown"] {
        min-width: 320px;
        max-width: 90vw;
        right: -50px !important;
    }

    /* Formularios */
    .form-control-lg {
        font-size: 0.95rem;
        padding: 0.65rem 0.9rem;
    }

    /* Cards generales */
    .card-header {
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
    }

    .card-body {
        padding: 1rem;
    }

    /* Paginación compacta */
    .pagination .page-link {
        padding: 0.4rem 0.65rem;
        font-size: 0.85rem;
    }
}

/* ============================================
   MOBILE DEVICES (sm: 576px - 767px)
   Smartphones en landscape
============================================ */
@media (min-width: 576px) and (max-width: 767px) {
    .navbar {
        height: 56px;
        padding: 0 0.75rem;
    }

    .navbar-logo {
        height: 32px;
    }

    .text-titulo {
        font-size: 0.85rem;
    }

    .navbar-brand small {
        display: none;
    }

    /* Sidebar oculto por defecto */
    .sidebar {
        transform: translateX(-100%);
        top: 56px;
        height: calc(100vh - 56px);
        width: 260px;
        box-shadow: none;
    }

    .sidebar.open {
        transform: translateX(0);
        box-shadow: 4px 0 15px rgba(0, 0, 0, 0.2);
    }

    .content {
        margin-left: 0;
        margin-top: 56px;
        padding: 1rem;
    }

    .topbar {
        display: none !important;
    }

    .content.con-sidebar {
        margin-top: 56px;
    }

    /* Dashboard - 2 cards por fila */
    .row.g-3 > [class*="col-md-3"] {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .stat-card h3 {
        font-size: 1.35rem;
    }

    .stat-card h6 {
        font-size: 0.75rem;
    }

    /* Tablas - scroll horizontal mejorado */
    .table-responsive {
        border-radius: 8px;
        box-shadow: inset -10px 0 10px -10px rgba(0, 0, 0, 0.1);
    }

    .table {
        font-size: 0.82rem;
    }

    .table th,
    .table td {
        padding: 0.5rem;
        min-width: 80px;
    }

    /* Columnas de acción más compactas */
    .table td:last-child {
        min-width: 100px;
    }

    /* Botones */
    .btn {
        padding: 0.4rem 0.75rem;
        font-size: 0.85rem;
    }

    .btn-sm {
        padding: 0.3rem 0.45rem;
        font-size: 0.75rem;
    }

    /* Cards */
    .card-header {
        padding: 0.65rem 0.85rem;
        font-size: 0.9rem;
    }

    /* Alertas */
    .alert {
        font-size: 0.8rem;
        padding: 0.65rem 0.85rem;
    }

    /* List group items */
    .list-group-item {
        padding: 0.75rem;
        font-size: 0.85rem;
    }

    /* Dropdown de notificaciones */
    .dropdown-menu[aria-labelledby="notificacionesDropdown"] {
        min-width: 280px;
        max-width: 85vw;
        position: fixed !important;
        top: 56px !important;
        right: 10px !important;
        left: auto !important;
    }

    /* Formularios */
    .form-label {
        font-size: 0.85rem;
    }

    .form-control,
    .form-select {
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
    }

    /* Breadcrumb */
    .breadcrumb {
        font-size: 0.8rem;
    }

    /* Footer */
    footer {
        padding: 1rem 0.5rem;
        font-size: 0.75rem;
    }

    /* Badges más pequeños */
    .badge {
        font-size: 0.7rem;
        padding: 0.3rem 0.5rem;
    }
}

/* ============================================
   SMALL MOBILE DEVICES (xs: < 576px)
   Smartphones pequeños
============================================ */
@media (max-width: 575px) {
    /* Navbar ultra compacta */
    .navbar {
        height: 52px;
        padding: 0 0.5rem;
    }

    .navbar-logo {
        height: 28px;
    }

    .text-titulo {
        font-size: 0.8rem;
        max-width: 120px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .navbar-brand small {
        display: none;
    }

    .navbar .nav-link {
        padding: 0.35rem;
    }

    .circulo-redondo {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    /* Sidebar oculto por defecto */
    .sidebar {
        transform: translateX(-100%);
        top: 52px;
        height: calc(100vh - 52px);
        width: 100%;
        max-width: 280px;
        box-shadow: none;
    }

    .sidebar.open {
        transform: translateX(0);
        box-shadow: 4px 0 15px rgba(0, 0, 0, 0.2);
    }

    .sidebar .nav-link {
        padding: 0.7rem 1rem;
        font-size: 0.9rem;
    }

    /* Contenido */
    .content {
        margin-left: 0;
        margin-top: 52px;
        padding: 0.75rem;
    }

    .topbar {
        display: none !important;
    }

    .content.con-sidebar {
        margin-top: 52px;
    }

    /* Dashboard - 1 card por fila en móvil pequeño */
    .row.g-3 > [class*="col-md-3"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .stat-card {
        margin-bottom: 0.75rem;
    }

    .stat-card .card-body {
        padding: 0.85rem;
    }

    .stat-card h3 {
        font-size: 1.5rem;
    }

    .stat-card h6 {
        font-size: 0.8rem;
    }

    /* Encabezados de sección */
    h2 {
        font-size: 1.25rem;
    }

    h3 {
        font-size: 1.15rem;
    }

    h4 {
        font-size: 1.05rem;
    }

    h5 {
        font-size: 0.95rem;
    }

    /* Tablas - estilo stack para móvil */
    .table-responsive {
        margin: 0 -0.75rem;
        border-radius: 0;
    }

    .table {
        font-size: 0.78rem;
    }

    .table thead {
        font-size: 0.75rem;
    }

    .table th,
    .table td {
        padding: 0.4rem 0.35rem;
        vertical-align: middle;
    }

    .table th i,
    .table td i {
        display: none;
    }

    /* Ocultar columnas menos importantes en móvil */
    .table .d-none-mobile {
        display: none !important;
    }

    /* Botones de acción en tabla - stack vertical */
    .table td .d-flex.gap-2 {
        flex-direction: column;
        gap: 0.25rem !important;
    }

    .table td .btn-sm {
        width: 100%;
        padding: 0.35rem;
        font-size: 0.7rem;
    }

    /* Botones generales */
    .btn {
        width: 100%;
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
        margin-bottom: 0.5rem;
    }

    .btn-sm {
        padding: 0.35rem 0.5rem;
        font-size: 0.75rem;
    }

    /* Grupos de botones en stack */
    .d-flex.gap-2:not(.align-items-center):not(.justify-content-between) {
        flex-direction: column;
    }

    /* Cards */
    .card {
        border-radius: 8px;
        margin-bottom: 0.75rem;
    }

    .card-header {
        padding: 0.6rem 0.75rem;
        font-size: 0.85rem;
    }

    .card-body {
        padding: 0.75rem;
    }

    .card-footer {
        padding: 0.6rem 0.75rem;
    }

    /* Dropdown notificaciones - pantalla completa */
    .dropdown-menu[aria-labelledby="notificacionesDropdown"] {
        position: fixed !important;
        top: 52px !important;
        left: 5px !important;
        right: 5px !important;
        width: calc(100vw - 10px) !important;
        max-width: none !important;
        max-height: 70vh;
        border-radius: 8px;
    }

    .dropdown-menu .dropdown-item {
        padding: 0.6rem 0.75rem;
        font-size: 0.85rem;
    }

    /* Formularios */
    .form-label {
        font-size: 0.8rem;
        margin-bottom: 0.25rem;
    }

    .form-control,
    .form-select {
        font-size: 0.85rem;
        padding: 0.45rem 0.65rem;
    }

    .form-control-lg {
        font-size: 0.9rem;
        padding: 0.55rem 0.75rem;
    }

    /* Input groups */
    .input-group {
        flex-direction: column;
    }

    .input-group > .form-control,
    .input-group > .btn {
        width: 100%;
        border-radius: 6px !important;
    }

    .input-group > .form-control {
        margin-bottom: 0.5rem;
    }

    .input-group-text {
        display: none;
    }

    /* Buscador - vertical en móvil */
    .row.g-3 > [class*="col-md-10"],
    .row.g-3 > [class*="col-md-2"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Alertas */
    .alert {
        font-size: 0.78rem;
        padding: 0.6rem 0.75rem;
        border-radius: 6px;
    }

    /* List group */
    .list-group-item {
        padding: 0.65rem;
        font-size: 0.82rem;
    }

    .list-group-item .d-flex.gap-2 {
        flex-direction: column;
        margin-top: 0.5rem;
    }

    .list-group-item .btn {
        width: 100%;
        margin-bottom: 0.25rem;
    }

    /* Paginación compacta */
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }

    .pagination .page-link {
        padding: 0.3rem 0.5rem;
        font-size: 0.75rem;
    }

    .pagination .page-item {
        margin: 2px;
    }

    /* Breadcrumb */
    .breadcrumb {
        font-size: 0.75rem;
        flex-wrap: wrap;
    }

    /* Footer */
    footer {
        padding: 0.75rem;
        font-size: 0.7rem;
    }

    /* Badges */
    .badge {
        font-size: 0.65rem;
        padding: 0.25rem 0.4rem;
    }

    /* Modales */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    .modal-header,
    .modal-footer {
        padding: 0.75rem;
    }

    .modal-body {
        padding: 0.75rem;
    }

    .modal-title {
        font-size: 1rem;
    }

    /* Progress bars */
    .progress-wrapper {
        padding: 0.75rem;
    }

    .icon-modern {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
}

/* ============================================
   UTILIDADES RESPONSIVE ADICIONALES
============================================ */

/* Ocultar en móvil */
@media (max-width: 767px) {
    .d-mobile-none {
        display: none !important;
    }
}

/* Mostrar solo en móvil */
@media (min-width: 768px) {
    .d-mobile-only {
        display: none !important;
    }
}

/* Texto truncado responsive */
.text-truncate-mobile {
    max-width: 100%;
}

@media (max-width: 767px) {
    .text-truncate-mobile {
        max-width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 575px) {
    .text-truncate-mobile {
        max-width: 100px;
    }
}

/* Scroll horizontal suave para tablas */
.table-responsive {
    scrollbar-width: thin;
    scrollbar-color: rgba(91, 130, 56, 0.5) transparent;
}

.table-responsive::-webkit-scrollbar {
    height: 6px;
}

.table-responsive::-webkit-scrollbar-track {
    background: transparent;
}

.table-responsive::-webkit-scrollbar-thumb {
    background-color: rgba(91, 130, 56, 0.5);
    border-radius: 3px;
}

/* Indicador de scroll horizontal */
.table-responsive::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 20px;
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.05));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.table-responsive:hover::after {
    opacity: 1;
}

/* Botones flotantes responsive */
.btn-floating-action {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

@media (max-width: 575px) {
    .btn-floating-action {
        bottom: 15px;
        right: 15px;
        width: 48px;
        height: 48px;
    }
}

/* Espaciado vertical responsive */
.my-responsive {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 767px) {
    .my-responsive {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
}

@media (max-width: 575px) {
    .my-responsive {
        margin-top: 0.75rem;
        margin-bottom: 0.75rem;
    }
}

/* Grid gaps responsive */
.gap-responsive {
    gap: 1.5rem;
}

@media (max-width: 767px) {
    .gap-responsive {
        gap: 1rem;
    }
}

@media (max-width: 575px) {
    .gap-responsive {
        gap: 0.75rem;
    }
}

/* Contenedor de acciones responsive */
.actions-container {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

@media (max-width: 575px) {
    .actions-container {
        flex-direction: column;
    }

    .actions-container .btn {
        width: 100%;
    }
}

/* Topbar oculto en movil - el boton hamburguesa esta en el navbar */
@media (max-width: 991px) {
    .topbar {
        display: none !important;
    }
}

/* Mejora de touch targets para móvil */
@media (max-width: 767px) {
    .nav-link,
    .dropdown-item,
    .btn,
    .page-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .dropdown-toggle::after {
        margin-left: 0.5rem;
    }
}

/* ============================================
   NAVBAR ESPECIAL - Responsive para vistas con navbar-collapse
============================================ */

/* Navbar toggler mejorado */
.navbar-toggler {
    border: none;
    padding: 0.5rem;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(91, 130, 56, 0.25);
}

.navbar-toggler:hover {
    background-color: rgba(91, 130, 56, 0.1);
}

/* Menú colapsado en móvil */
@media (max-width: 991px) {
    .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        border-radius: 0 0 12px 12px;
        padding: 1rem;
        z-index: 1050;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
    }

    .navbar-collapse .navbar-nav {
        flex-direction: column;
        width: 100%;
    }

    .navbar-collapse .nav-item {
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
    }

    .navbar-collapse .nav-item:last-child {
        border-bottom: none;
    }

    .navbar-collapse .nav-link {
        padding: 0.85rem 1rem;
        color: #2c3e50;
        font-weight: 500;
        border-radius: 8px;
        transition: background-color 0.2s ease;
    }

    .navbar-collapse .nav-link:hover {
        background-color: rgba(91, 130, 56, 0.1);
        color: #5B8238;
    }

    /* Dropdown dentro del navbar colapsado */
    .navbar-collapse .dropdown-menu {
        position: static !important;
        transform: none !important;
        box-shadow: none;
        border: none;
        background-color: #f8f9fa;
        border-radius: 8px;
        margin: 0.5rem 0;
        padding: 0.5rem;
    }

    .navbar-collapse .dropdown-item {
        border-radius: 6px;
        padding: 0.65rem 1rem;
        font-size: 0.9rem;
    }

    .navbar-collapse .dropdown-item:hover {
        background-color: rgba(91, 130, 56, 0.15);
    }
}

/* Ajustes específicos para pantallas pequeñas */
@media (max-width: 575px) {
    .navbar-collapse {
        padding: 0.75rem;
        border-radius: 0 0 8px 8px;
    }

    .navbar-collapse .nav-link {
        padding: 0.75rem 0.85rem;
        font-size: 0.9rem;
    }

    .navbar-collapse .dropdown-item {
        padding: 0.6rem 0.85rem;
        font-size: 0.85rem;
    }
}

/* ==============================================================================
   ESTILOS PARA MÓDULO DE REPORTES
   Sección dedicada a todos los componentes visuales del módulo de reportes
============================================================================== */

/* ============================================
   SEMÁFORO DE ESTADOS
   Indicador visual circular para estados de documentos
============================================ */
.semaforo {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

.semaforo-success {
    background-color: #28a745;
}

.semaforo-warning {
    background-color: #ffc107;
}

.semaforo-danger {
    background-color: #dc3545;
}

.semaforo-secondary {
    background-color: #6c757d;
}

/* Semáforo grande para estadísticas */
.semaforo-grande {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* Versión 20px para fichas detalladas */
.semaforo-lg {
    width: 20px;
    height: 20px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

/* ============================================
   AVATARES
   Círculos con iniciales para conductores/propietarios
============================================ */
.avatar-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1.1rem;
}

.avatar-circle-sm {
    width: 35px;
    height: 35px;
    font-size: 0.8rem;
}

.avatar-circle-lg {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
}

/* ============================================
   PLACA DE VEHÍCULO
   Estilo tipo matrícula colombiana
============================================ */
.placa-badge {
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
}

/* ============================================
   CARDS DE REPORTE
   Cards con efecto hover para el centro de reportes
============================================ */
.reporte-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.reporte-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Icon box para cards de reporte */
.icon-box {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================
   CRONOLOGÍA Y LÍNEA DE TIEMPO
   Estilos para reportes históricos y alertas
============================================ */
.cronologia-punto {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #5B8238;
    box-shadow: 0 0 0 4px rgba(91, 130, 56, 0.2);
}

.timeline-mes {
    border-left: 3px solid #5B8238;
    padding-left: 20px;
}

/* ============================================
   ESTILOS DE IMPRESIÓN PARA FICHAS
   Optimización para impresión de fichas de vehículos y conductores
============================================ */
@media print {
    /* Ocultar elementos no imprimibles */
    .no-print,
    .sidebar,
    .navbar,
    .topbar {
        display: none !important;
    }

    /* Ajustar contenido para impresión */
    .content {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Cards sin sombras y con bordes */
    .ficha-container .card {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }

    /* Contenedor de ficha a ancho completo */
    .ficha-container {
        max-width: 100% !important;
    }

    /* Tamaño de fuente para impresión */
    body {
        font-size: 12px;
    }

    /* Mostrar pie de página en impresión */
    .print-footer {
        display: block !important;
    }
}

/* Ocultar pie de impresión en pantalla */
@media screen {
    .print-footer {
        display: none;
    }
}

/* ============================================
   RESPONSIVE PARA MÓDULO DE REPORTES
============================================ */
@media (max-width: 991px) {
    .semaforo-grande {
        width: 35px;
        height: 35px;
    }

    .avatar-circle-lg {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }

    .icon-box {
        width: 45px;
        height: 45px;
    }
}

@media (max-width: 767px) {
    .semaforo {
        width: 14px;
        height: 14px;
    }

    .semaforo-grande {
        width: 30px;
        height: 30px;
    }

    .avatar-circle {
        width: 40px;
        height: 40px;
        font-size: 0.95rem;
    }

    .avatar-circle-lg {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }

    .icon-box {
        width: 40px;
        height: 40px;
    }

    .icon-box i {
        font-size: 1rem;
    }

    .timeline-mes {
        padding-left: 15px;
    }

    .cronologia-punto {
        width: 12px;
        height: 12px;
    }

    .reporte-card:hover {
        transform: none;
    }
}

@media (max-width: 575px) {
    .semaforo {
        width: 12px;
        height: 12px;
    }

    .semaforo-grande {
        width: 25px;
        height: 25px;
    }

    .avatar-circle {
        width: 35px;
        height: 35px;
        font-size: 0.85rem;
    }

    .avatar-circle-sm {
        width: 30px;
        height: 30px;
        font-size: 0.7rem;
    }

    .avatar-circle-lg {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .icon-box {
        width: 35px;
        height: 35px;
    }

    .placa-badge {
        letter-spacing: 1px;
        font-size: 0.9rem;
    }
}

/* ============================================
   HISTORIAL DE DOCUMENTOS CONDUCTOR
   Estilos para la vista de historial de documentos
============================================ */

/*
 * IMPORTANTE: NO aplicar transform a cards contenedoras porque afecta
 * el posicionamiento fixed de los modales Bootstrap.
 * Solo aplicar a cards de documentos individuales (con clase doc-card).
 */
.historial-documentos .doc-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.historial-documentos .doc-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Asegurar que modales no hereden transforms */
.modal,
.modal-dialog,
.modal-content {
    transform: none !important;
}

/* ============================================
   PORTERÍA - TARJETAS DE ALERTAS
   Diseño de cards para alertas en vista portería
============================================ */

/* Card de alerta con hover suave */
.alerta-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 12px !important;
}

.alerta-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

/* Círculo para iconos */
.icon-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-circle i {
    font-size: 1rem;
}

/* Estilos específicos para cards de alerta */
.alerta-card .card-header {
    background: transparent !important;
}

.alerta-card .card-body {
    padding-top: 0.75rem;
}

.alerta-card .card-footer {
    padding: 0.75rem 1rem 1rem;
}

/* Responsive para tarjetas de alerta */
@media (max-width: 767px) {
    .alerta-card {
        border-radius: 10px !important;
    }

    .alerta-card .badge {
        font-size: 0.75rem;
        padding: 0.35rem 0.6rem;
    }

    .icon-circle {
        width: 35px;
        height: 35px;
    }

    .icon-circle i {
        font-size: 0.875rem;
    }

    .alerta-card .card-body {
        padding: 0.75rem;
    }

    .alerta-card .card-footer .btn {
        font-size: 0.8rem;
        padding: 0.4rem 0.6rem;
    }
}

@media (max-width: 575px) {
    .alerta-card:hover {
        transform: none;
    }
}