:root {
    /* Nueva paleta y variables */
    --color-primary: #2563eb;
    --color-primary-700: #1d4ed8;
    --color-secondary: #0f172a;
    --color-success: #16a34a;
    --color-danger: #dc2626;
    --color-info: #0891b2;
    --color-light: #f8fafc;
    --color-dark: #0f172a;
    --color-dark-2: #1f2937;
    --color-white: #ffffff;
    --font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --box-shadow-sm: 0 4px 12px rgba(2, 6, 23, 0.06);
    --box-shadow: 0 8px 24px rgba(2, 6, 23, 0.10);
    --border-radius: 12px;
}



/* Reset esencial */
*, *::before, *::after { box-sizing: border-box; }
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

body {
    font-family: var(--font-family);
    background-color: var(--color-light);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: var(--color-dark);
    overflow-x: hidden;
}

/* Centrado de página de login */
.login-page .login-wrap {
    min-height: calc(100vh - 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}



.container {
    width: 100%;
    margin: 20px 0;
    padding: clamp(16px, 2vw, 28px);
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}



.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    background: linear-gradient(180deg, rgba(255,106,0,1) 0%, rgba(255,106,0,0.95) 100%);
    color: var(--color-white);
    padding: 18px 22px;
    border-radius: 14px;
    box-shadow: var(--box-shadow);
}



.header h2 {

    margin: 0;

    color: var(--color-white);

    font-size: 1.6rem;

    font-weight: 700;

    letter-spacing: 0.2px;

}



.header-buttons { display: flex; gap: 8px; flex-wrap: wrap; }



.btn { display: inline-block; padding: 10px 14px; border-radius: var(--border-radius); text-decoration: none; font-weight: 600; transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; border: none; cursor: pointer; text-align: center; box-shadow: var(--box-shadow-sm); }



.btn:hover {

    transform: translateY(-2px);

}



.btn-primary { background-color: var(--color-primary); color: var(--color-white); }



.btn-primary:hover { background-color: var(--color-primary-700); box-shadow: var(--box-shadow); }



.btn-danger { background-color: var(--color-danger); color: var(--color-white); }



.btn-danger:hover { background-color: #c82333; box-shadow: var(--box-shadow); }



.btn-secondary { background-color: #e5e7eb; color: #0f172a; }



.btn-secondary:hover { background-color: #d1d5db; box-shadow: var(--box-shadow); }



.alert { padding: 15px 20px; border-radius: var(--border-radius); margin-bottom: 20px; font-weight: bold; opacity: 1; transition: opacity 0.5s ease; }



.alert.hide {

    opacity: 0;

    visibility: hidden;

    height: 0;

    padding: 0;

    margin-bottom: 0;

}



.alert-success {

    background-color: #d4edda;

    color: var(--color-success);

}



.alert-danger {

    background-color: #f8d7da;

    color: var(--color-danger);

}



/* Formularios */

.form-container { width: 100%; margin: 20px 0; padding: 30px; background-color: var(--color-white); border-radius: var(--border-radius); box-shadow: var(--box-shadow); }



.login-container {

    max-width: 400px;

}



.form-group { margin-bottom: 20px; }



.form-group label {

    display: block;

    font-weight: 600;

    margin-bottom: 8px;

    color: var(--color-dark);

}



.form-group input, .form-group select { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: var(--border-radius); box-sizing: border-box; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.form-group input:focus, .form-group select:focus { border-color: var(--color-primary); outline: none; box-shadow: 0 0 0 3px rgba(255,106,0,0.15); }



.form-group input:focus, .form-group select:focus {

    border-color: var(--color-primary);

    outline: none;

}



.form-group input[type="checkbox"] {

    width: auto;

}



/* Contenedor de contraseña con toggle */

.password-container {

    position: relative;

}

.password-container input {

    padding-right: 45px;

}

.password-container .toggle-password { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer; background: none; border: none; padding: 0; font-size: 1rem; color: var(--color-secondary); }



.password-container .toggle-password:hover {

    color: var(--color-dark);

}



/* Filtro */

.filter-form { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }



.filter-form select, .filter-form input[type="submit"] { min-width: 140px; }

.filter-form select { height: 36px; padding: 6px 10px; font-size: 0.95rem; }

.filter-form input[type="submit"] { height: 36px; padding: 6px 12px; }

/* Selects estilizados */
.filter-form select {
    background-color: var(--color-white);
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}



/* Vista de detalles de driver */

.details-card {

    padding: 25px;

    border: 1px solid #f3f4f6;

    border-radius: var(--border-radius);

    background-color: var(--color-white);

    margin-top: 20px;

}



.details-card p {

    margin-bottom: 12px;

    border-bottom: 1px solid #eee;

    padding-bottom: 8px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.details-card strong {

    color: var(--color-dark);

}



/* Estilos de tabla responsiva */

.table-responsive { overflow-x: auto; }



.data-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 20px; border-radius: var(--border-radius); box-shadow: var(--box-shadow); background-color: var(--color-white); }



.data-table th, .data-table td { padding: 15px; text-align: left; border-bottom: 1px solid #f3f4f6; }



.data-table thead th {
    background: linear-gradient(180deg, rgba(37,99,235,0.95) 0%, rgba(29,78,216,0.9) 100%);
    color: var(--color-white);
    font-weight: 600;
}



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



.data-table tbody tr:last-child td {

    border-bottom: none;

}



.action-links a { text-decoration: none; color: #111827; font-weight: 600; transition: color 0.2s ease; margin-right: 15px; }



.action-links a:hover {

    color: var(--color-primary);

}



.btn-link-danger {

    color: var(--color-danger);

    font-weight: 600;

    transition: color 0.3s ease;

}



.btn-link-danger:hover {

    color: #c82333;

}



/* Diseño de tarjeta para móvil */

@media (max-width: 768px) {

    .container, .form-container {

        margin: 20px 0;

        padding: 20px;

    }

    .header {

        flex-direction: column;

        align-items: flex-start;

    }

    .header h2 {

        font-size: 1.5rem;

    }

    .nav-wrapper { width: 100%; justify-content: space-between; }
    .nav-toggle { display: inline-block; }
    /* Nav colapsable solo en móvil */
    .nav-menu { display: block; width: 100%; margin-top: 12px; max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
    .nav-menu.open { max-height: 420px; }
    .header .nav-menu a { display: block; width: 100%; padding: 10px 12px; }

    /* Convertir la tabla a tarjetas */

    .data-table {

        border-collapse: collapse;

        border-radius: 0;

        box-shadow: none;

    }

    .data-table thead {

        display: none;

    }

    .data-table tbody tr {

        display: block;

        margin-bottom: 20px;

        border: 1px solid #ddd;

        border-radius: var(--border-radius);

        box-shadow: var(--box-shadow);

    }

    .data-table td {

        display: flex;

        justify-content: space-between;

        padding: 15px;

        border-bottom: 1px solid #eee;

    }

    .data-table td::before {

        content: attr(data-label);

        font-weight: 600;

        color: var(--color-dark);

    }

    .data-table tbody tr:last-child td {

        border-bottom: 1px solid #eee;

    }

    .action-links {

        justify-content: flex-start;

        flex-wrap: wrap;

        gap: 15px;

        margin-top: 10px;

        border-top: 1px solid #eee;

        padding-top: 15px;

    }



    .details-card p {

        flex-direction: column;

        align-items: flex-start;

        gap: 5px;

    }

    .details-card strong {

        width: 100%;

    }

}

/* Estilos para el menú de acciones flotante */

.action-menu-container {

    position: relative;

    display: inline-block;

    overflow: visible; /* asegurar que el dropdown no se recorte por el contenedor */

}



.action-menu-trigger {

    background: none;

    border: none;

    font-size: 1.2rem;

    cursor: pointer;

    color: var(--color-secondary);

    transition: color 0.3s ease;

}



.action-menu-trigger:hover {

    color: var(--color-dark);

}



.action-menu-dropdown {

    display: none;

    position: absolute;

    right: 0;

    top: 100%;

    background-color: var(--color-white);

    min-width: 150px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

    border-radius: var(--border-radius);

    z-index: 100;

    margin-top: 5px;

    overflow: hidden;

}



.action-menu-dropdown a {

    color: var(--color-dark);

    padding: 12px 16px;

    text-decoration: none;

    display: block;

    transition: background-color 0.2s ease;

}



.action-menu-dropdown a:hover {

    background-color: var(--color-light);

}



.action-menu-dropdown a.btn-link-danger {

    color: var(--color-danger);

}



.action-menu-dropdown a.btn-link-danger:hover {

    background-color: #f8d7da;

}

/* duplicados consolidados arriba */

/* Paginación */
.pagination { display: flex; gap: 8px; margin: 16px auto 0; flex-wrap: wrap; justify-content: center; }
.pagination a, .pagination span {
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    text-decoration: none;
    color: var(--color-secondary);
    background-color: var(--color-white);
}
.pagination a:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.pagination .active {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

/* Tabla de detalles más estética */
.details-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background-color: var(--color-white);
    border: 1px solid #e5e7eb;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
}
.details-table th {
    text-align: left;
    background-color: #fff7f0;
    color: #111827;
    width: 35%;
    padding: 14px 16px;
}
.details-table td {
    padding: 14px 16px;
    border-top: 1px solid #f3f4f6;
}

/* Footer */
.footer {
    max-width: 1200px;
    margin: 20px auto 40px;
    padding: 16px 24px;
    background-color: #111827;
    color: #e5e7eb;
    border-radius: 12px;
}
.footer a {
    color: #f9fafb;
    text-decoration: none;
}
.footer a:hover {
    text-decoration: underline;
}
.brand-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 32px;
}
.brand-logo img {
    display: block;
    width: 120px;
    height: 32px;
}
.avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nav a { color: var(--color-white); text-decoration: none; opacity: 0.95; }
.nav a:hover { text-decoration: underline; }

@media (max-width: 768px) {
    /* Tabla de detalles responsive */
    .details-table { border-radius: 12px; overflow: hidden; }
    .details-table tbody tr { display: block; border-bottom: 1px solid #eee; }
    .details-table tbody tr:last-child { border-bottom: none; }
    .details-table th { width: 100%; background-color: #fff7f0; display: block; border-bottom: 1px solid #f3f4f6; }
    .details-table td { display: block; border-top: none; padding-top: 10px; padding-bottom: 12px; }
}

/* Header global fuera del container */
.site-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: var(--color-white);
    color: var(--color-dark);
    padding: 14px 22px;
    box-shadow: var(--box-shadow);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid #e5e7eb;
}
.site-header .brand-title { color: var(--color-dark); font-weight: 700; letter-spacing: .2px; }
.site-header .nav-menu a { 
    background: var(--color-primary) !important; 
    border: none !important; 
    color: var(--color-white) !important; 
    padding: 8px 16px; 
    border-radius: 8px; 
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    margin: 0 4px;
}
.site-header .nav-menu a:hover { 
    background: var(--color-primary-700) !important; 
    transform: translateY(-1px);
    box-shadow: var(--box-shadow-sm);
}
.site-header .nav-menu a.active { 
    background: var(--color-primary-700) !important; 
    box-shadow: var(--box-shadow-sm);
}
.site-header .nav-menu .btn-danger { 
    background: var(--color-danger) !important; 
    border: none !important; 
    text-decoration: none; 
}
.site-header .nav-menu .btn-danger:hover { 
    background: #b91c1c !important; 
}
.site-header .nav-wrapper { display: flex; align-items: center; gap: 12px; }
.site-header .nav-toggle { 
    display: none; 
    background: var(--color-primary); 
    color: #fff; 
    border: none; 
    padding: 8px 10px; 
    border-radius: 8px; 
    cursor: pointer; 
}

@media (max-width: 768px) {
    .site-header { padding: 12px 16px; }
    .nav-wrapper { width: 100%; justify-content: space-between; }
    .nav-toggle { display: inline-block; }
    /* Nav colapsable por max-height para transición suave */
    .nav-menu { display: block; width: 100%; margin-top: 12px; max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
    .nav-menu.open { max-height: 420px; }
    .site-header .nav-menu a { display: block; width: 100%; padding: 10px 12px; }
}
.layout { 
    min-height: calc(100vh - 64px);
    position: relative;
    display: block;
}
.sidebar { 
    width: 260px; 
    background-color: #0f172a; 
    color: #e5e7eb; 
    min-height: calc(100vh - 64px); 
    position: fixed; 
    top: var(--site-header-height, 64px); 
    left: 0;
    height: calc(100vh - var(--site-header-height, 64px));
    transform: translateX(-260px);
    transition: transform 0.3s ease;
    z-index: 999;
}
.sidebar.open { transform: translateX(0); }
.sidebar .brand-mini { 
    display: block; 
    padding: 14px 18px; 
    font-weight: 700; 
    color: #fff; 
    border-bottom: 1px solid #1e293b;
}
.sidebar nav { display: flex; flex-direction: column; padding: 14px 8px; }
.sidebar a { 
    color: #e5e7eb; 
    text-decoration: none; 
    padding: 10px 14px; 
    border-radius: 8px; 
    margin: 4px 8px; 
    display: block; 
    transition: all 0.2s ease;
}
.sidebar a:hover, .sidebar a.active { 
    background-color: rgba(37,99,235,0.22); 
    color: #fff; 
    transform: translateX(4px);
}
.sidebar-profile {
    padding: 16px;
    border-bottom: 1px solid #1e293b;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.sidebar-profile .avatar {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 24px;
    box-shadow: var(--box-shadow-sm);
}
.sidebar-profile .avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.sidebar-profile .profile-name { font-weight: 700; color: #fff; }
.sidebar-profile .profile-meta { font-size: 0.9rem; color: #cbd5e1; }
.content { 
    padding: 0; 
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    display: block;
}
.sidebar-toggle { 
    display: inline-block; 
    position: fixed; 
    left: 12px; 
    bottom: 16px; 
    z-index: 1100; 
    background: var(--color-primary); 
    color: #fff; 
    border: none; 
    border-radius: 8px; 
    padding: 12px 14px; 
    box-shadow: var(--box-shadow);
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s ease;
}

.sidebar-toggle:hover {
    background: var(--color-primary-700);
    transform: translateY(-1px);
    box-shadow: var(--box-shadow-lg);
}

.sidebar-toggle i {
    display: block;
    font-size: 16px;
}

/* Responsive: colapsar sidebar en móvil */
@media (max-width: 1024px) {
    .sidebar { transition: transform 0.25s ease; }
    .sidebar.open { transform: translateX(0); }
    .content { 
        padding: 0; 
        max-width: 100%;
    }
    .sidebar-toggle { display: inline-block; }
}

/* Mejoras específicas para tabla de detalles en móvil para evitar desajustes */
@media (max-width: 480px) {
    .details-table th, .details-table td { padding: 12px 12px; }
    .container { margin: 16px; padding: 18px; }
}

/* Estilos específicos para ver_driver.php - Container más grande y centrado */
.details-card {
    max-width: 1000px;
    margin: 0 auto;
    background: var(--color-white);
    border-radius: 12px;
    box-shadow: var(--box-shadow-lg);
    padding: 2rem;
    border: 1px solid #e5e7eb;
}

.details-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}

.details-table th {
    background: var(--color-gray-50);
    color: var(--color-gray-700);
    font-weight: 600;
    padding: 1.25rem;
    text-align: left;
    border-bottom: 2px solid #e5e7eb;
    width: 220px;
    vertical-align: top;
    font-size: 0.95rem;
}

.details-table td {
    padding: 1.25rem;
    border-bottom: 1px solid #e5e7eb;
    color: var(--color-gray-700);
    vertical-align: top;
    font-size: 0.95rem;
}

.details-table tr:last-child th,
.details-table tr:last-child td {
    border-bottom: none;
}

/* Container más grande y centrado para ver_driver */
.ver-driver-page .content .container {
    width: 100%;
    margin: 20px 0;
    padding: 2rem;
}

/* Responsive para ver_driver */
@media (max-width: 768px) {
    .details-card {
        margin: 1rem;
        padding: 1.5rem;
        border-radius: 8px;
    }
    
    .details-table th,
    .details-table td {
        padding: 1rem;
        font-size: 0.9rem;
    }
    
    .details-table th {
        width: 140px;
        font-size: 0.85rem;
    }
    
    .ver-driver-page .content .container {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .details-card {
        margin: 0.5rem;
        padding: 1rem;
    }
    
    .details-table th,
    .details-table td {
        padding: 0.75rem;
        font-size: 0.85rem;
    }
    
    .details-table th {
        width: 120px;
        font-size: 0.8rem;
    }
}