* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Personalización de scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 102, 255, 0.5);
    border-radius: 10px;
    border: 2px solid rgba(26, 26, 26, 0.5);
    transition: background 0.3s;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 102, 255, 0.7);
}

/* Para Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 102, 255, 0.5) rgba(255, 255, 255, 0.05);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    overflow: hidden;
    background: #000;
}

#map {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    transition: margin-left 0.3s ease;
}

/* Sidebar */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    background: rgba(26, 26, 26, 0.98);
    backdrop-filter: blur(20px);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1500;
    display: flex;
    flex-direction: column;
    transform: translateX(0);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
}

.sidebar.closed {
    transform: translateX(-100%);
}

.sidebar-header {
    padding: 24px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
}

.logo svg {
    width: 32px;
    height: 32px;
    color: #0066ff;
}

.sidebar-toggle {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    transition: all 0.3s;
}

.sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-nav {
    flex: 1;
    padding: 16px 12px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s;
    position: relative;
}

.nav-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.nav-item.active {
    background: rgba(0, 102, 255, 0.15);
    color: #0066ff;
}

.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: #0066ff;
    border-radius: 0 2px 2px 0;
}

.sidebar-footer {
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}

.user-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.user-name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-email {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-role {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(99, 102, 241, 0.2));
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid rgba(59, 130, 246, 0.3);
    display: inline-block;
    width: fit-content;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.user-role:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(99, 102, 241, 0.3));
    border-color: rgba(59, 130, 246, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Estilos específicos por rol */
.user-role[data-role="administrador"] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(220, 38, 38, 0.25));
    border-color: rgba(239, 68, 68, 0.4);
    color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.2);
}

.user-role[data-role="asesor"] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(22, 163, 74, 0.25));
    border-color: rgba(34, 197, 94, 0.4);
    color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.2);
}

.user-role[data-role="planta"] {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.25), rgba(147, 51, 234, 0.25));
    border-color: rgba(168, 85, 247, 0.4);
    color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 6px rgba(168, 85, 247, 0.2);
}

.user-role[data-role="operador"] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(37, 99, 235, 0.25));
    border-color: rgba(59, 130, 246, 0.4);
    color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.2);
}

.btn-logout {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 59, 48, 0.1);
    border: 1px solid rgba(255, 59, 48, 0.2);
    border-radius: 12px;
    color: #ff6b6b;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s;
}

.btn-logout:hover {
    background: rgba(255, 59, 48, 0.2);
    border-color: rgba(255, 59, 48, 0.3);
}

.btn-logout svg {
    width: 18px;
    height: 18px;
}

.menu-toggle-btn {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1400;
    width: 48px;
    height: 48px;
    background: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    transition: all 0.3s;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
    .menu-toggle-btn {
        top: 16px;
        left: 16px;
        width: 44px;
        height: 44px;
        z-index: 1500;
    }
}

.menu-toggle-btn:hover {
    background: rgba(26, 26, 26, 1);
    transform: scale(1.05);
}

.menu-toggle-btn.hidden {
    display: none;
}

.my-location-btn {
    position: fixed;
    right: 20px;
    bottom: 210px;
    z-index: 1400;
    width: 52px;
    height: 52px;
    background: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    transition: all 0.25s ease;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

.my-location-btn:hover {
    background: rgba(26, 26, 26, 1);
    transform: translateY(-1px);
}

.my-location-btn.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
}

.my-location-btn svg {
    width: 22px;
    height: 22px;
}

@media (max-width: 768px) {
    .my-location-btn {
        right: 12px;
        bottom: 136px;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        z-index: 1500;
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
    }

    .my-location-btn svg {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 520px) {
    .my-location-btn {
        right: 10px;
        bottom: 132px;
        width: 36px;
        height: 36px;
        border-radius: 11px;
    }

    .my-location-btn svg {
        width: 16px;
        height: 16px;
    }
}

/* Ajustar mapa cuando sidebar está abierto */
body.sidebar-open #map {
    margin-left: 280px;
}

/* Ajustar main-content cuando sidebar está abierto */
.main-content {
    margin-left: 280px;
    transition: margin-left 0.3s ease;
    min-height: 100vh;
    padding: 20px;
    background: #000;
    overflow-y: auto;
    height: 100vh;
    box-sizing: border-box;
}

/* Si el sidebar está cerrado, quitar el margen */
body.sidebar-closed .main-content {
    margin-left: 0;
}

@media (max-width: 768px) {
    body.sidebar-open #map {
        margin-left: 0;
    }
    
    .main-content {
        margin-left: 0;
        padding: 10px;
        padding-top: 80px;
        height: 100vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    body.sidebar-open .main-content {
        margin-left: 0;
    }
    
    #map {
        width: 100vw;
        height: 100vh;
    }
}

/* Secciones de página */
.page-section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    overflow-y: auto;
    padding: 20px;
    padding-left: 300px;
    transition: padding-left 0.3s ease;
    z-index: 100;
    display: none;
    flex-direction: column;
}

.page-section[style*="display: flex"],
.page-section.active {
    display: flex !important;
    z-index: 100;
}

.section-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    width: 100%;
    flex: 1;
    min-height: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.section-header {
    margin-bottom: 32px;
}

.section-header h2 {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}

.section-header p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
}

/* Historial */
.historial-content {
    background: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-height: 400px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    overflow-x: hidden;
    box-sizing: border-box;
}

.historial-filters {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.filter-input {
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #fff;
    font-size: 14px;
    font-family: inherit;
}

.filter-btn {
    padding: 12px 24px;
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.filter-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.4);
}

.filter-btn.secondary {
    background: rgba(255, 255, 255, 0.1);
}

.historial-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.historial-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s;
    overflow: hidden;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.historial-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(0, 102, 255, 0.3);
}

.historial-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.historial-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.historial-header p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.btn-view-route {
    padding: 8px 16px;
    background: rgba(0, 102, 255, 0.2);
    border: 1px solid rgba(0, 102, 255, 0.3);
    border-radius: 8px;
    color: #0066ff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s;
}

.btn-view-route:hover {
    background: rgba(0, 102, 255, 0.3);
    border-color: rgba(0, 102, 255, 0.5);
}

.historial-stats {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    max-width: 100%;
}

.historial-stats span {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
    box-sizing: border-box;
}

.loading-state, .empty-state {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.6);
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.empty-state svg {
    display: block;
    margin: 0 auto 16px;
}

.empty-state h3 {
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.empty-state p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 8px;
    line-height: 1.5;
}

.spinner-small {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: #0066ff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 16px;
}

/* Estadísticas */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.stat-card {
    background: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s;
}

.stat-card:hover {
    border-color: rgba(0, 102, 255, 0.3);
    transform: translateY(-2px);
}

.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

.stat-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

.stats-chart {
    background: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px;
}

.stats-chart h3 {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 20px;
}

.stats-chart canvas {
    width: 100%;
    height: 200px;
}

/* Configuración */
.config-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    width: 100%;
    box-sizing: border-box;
}

.config-section {
    background: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: fit-content;
}

.config-section h3 {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 20px;
}

.config-item {
    margin-bottom: 16px;
}

.config-item:last-child {
    margin-bottom: 0;
}

.config-item label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 8px;
}

.config-item label input[type="checkbox"] {
    margin-right: 8px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.config-input {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #fff;
    font-size: 15px;
    font-family: inherit;
    transition: all 0.3s;
}

.config-input:focus {
    outline: none;
    border-color: #0066ff;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
}

.config-input[readonly] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Animaciones para notificaciones de nuevas rutas */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes slideUpNotification {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
}

.btn-save {
    padding: 12px 24px;
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: auto;
    width: 100%;
    box-sizing: border-box;
}

.btn-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.4);
}

.btn-add-user {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s;
    box-shadow: 0 4px 16px rgba(0, 255, 136, 0.3);
}

.btn-add-user:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 255, 136, 0.4);
}

.btn-add-user:active {
    transform: translateY(0);
}

.btn-add-user svg {
    width: 20px;
    height: 20px;
}

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.modal-content {
    background: rgba(26, 26, 26, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-header h3 {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.modal-close {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(90deg);
}

.modal-form {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.modal-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.modal-form .form-group label {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
}

.modal-form .form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.share-companions-modal {
    max-width: 560px;
}

.share-companions-help {
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 13px;
    line-height: 1.45;
}

.share-companions-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.share-companion-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.share-companion-input {
    flex: 1;
}

.share-companion-remove-btn {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.78);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.share-companion-remove-btn:hover {
    background: rgba(255, 107, 107, 0.16);
    border-color: rgba(255, 107, 107, 0.35);
    color: #ffb0b0;
}

.share-companion-add-btn {
    width: 100%;
}

.btn-cancel {
    flex: 1;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-cancel:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-submit {
    flex: 1;
    padding: 12px 24px;
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.4);
}

.btn-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.modal-form .form-error {
    padding: 12px 16px;
    background: rgba(255, 59, 48, 0.1);
    border: 1px solid rgba(255, 59, 48, 0.3);
    border-radius: 12px;
    color: #ff6b6b;
    font-size: 14px;
    display: none;
}

.modal-form .form-error.show {
    display: block;
}

/* Panel de Conductores */
.conductores-panel {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 320px;
    max-height: calc(100vh - 40px);
    background: rgba(26, 26, 26, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    z-index: 1200;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.conductores-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.conductores-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.conductores-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-refresh,
.btn-minimize {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.btn-refresh:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(180deg);
}

.btn-minimize:hover {
    background: rgba(255, 255, 255, 0.1);
}

.conductores-panel.minimized .conductores-list {
    display: none;
}

.conductores-panel.minimized .conductores-header {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.conductores-panel.minimized {
    max-height: fit-content;
}

.btn-minimize.minimized svg {
    transform: rotate(0deg);
}

.btn-minimize svg {
    transition: transform 0.3s ease;
}

.conductores-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    -webkit-overflow-scrolling: touch;
}

.conductor-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s;
}

.conductor-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(0, 102, 255, 0.3);
}

.conductor-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
}

.conductor-info {
    flex: 1;
    min-width: 0;
}

.conductor-name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conductor-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.status-dot-small {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #666;
}

.status-dot-small.online {
    background: #00ff88;
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.6);
}

.status-dot-small.offline {
    background: #666;
}

.conductor-speed {
    font-size: 13px;
    font-weight: 600;
    color: #0066ff;
    white-space: nowrap;
}

.conductor-marker {
    position: relative;
}

.conductor-popup {
    color: #000;
    font-size: 13px;
}

.conductor-popup strong {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
}

@media (max-width: 768px) {
    .page-section {
        padding-left: 20px;
        padding-top: 80px;
        padding-right: 20px;
    }
    
    .section-container {
        padding: 20px 10px;
    }
    
    .section-header h2 {
        font-size: 24px;
    }
    
    .section-header p {
        font-size: 14px;
    }
    
    .config-content {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .config-section {
        padding: 20px;
    }
    
    .config-section h3 {
        font-size: 18px;
        margin-bottom: 16px;
    }
    
    .config-item {
        margin-bottom: 14px;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .conductores-panel {
        width: calc(100vw - 40px);
        max-width: none;
        top: 70px;
        right: 20px;
        left: 20px;
        max-height: calc(100vh - 90px);
        padding: 16px;
    }
    
    .conductores-header {
        margin-bottom: 12px;
        padding-bottom: 12px;
    }
    
    .conductores-header h3 {
        font-size: 16px;
    }
    
    .btn-refresh,
    .btn-minimize {
        width: 32px;
        height: 32px;
    }
    
    .conductores-header-actions {
        gap: 6px;
    }
    
    .conductor-item {
        padding: 10px;
        gap: 10px;
    }
    
    .conductor-avatar {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    
    .conductor-name {
        font-size: 13px;
    }
    
    .conductor-status {
        font-size: 11px;
    }
    
    .conductor-speed {
        font-size: 12px;
    }
    
    .historial-content {
        padding: 16px;
        overflow-x: hidden;
    }
    
    .historial-item {
        padding: 16px;
    }
    
    .historial-header {
        flex-direction: column;
        gap: 8px;
    }
    
    .historial-header h3 {
        font-size: 16px;
    }
    
    .historial-header p {
        font-size: 13px;
    }
    
    .historial-stats {
        gap: 12px;
        flex-wrap: wrap;
    }
    
    .historial-stats span {
        font-size: 12px;
        padding: 6px 10px;
        flex: 1 1 auto;
        min-width: fit-content;
    }
    
    .historial-filters {
        flex-direction: column;
        gap: 8px;
    }
    
    .filter-input {
        width: 100%;
        box-sizing: border-box;
    }
    
    .filter-btn {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .sidebar {
        width: 260px;
    }
    
    body.sidebar-open #map {
        margin-left: 0;
    }
    
    .sidebar.closed {
        transform: translateX(-100%);
    }
}

.control-panel {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    background: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(20px);
    padding: 24px 32px;
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(255, 255, 255, 0.1);
    min-width: 280px;
    max-width: 90vw;
    box-sizing: border-box;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #666;
    animation: pulse 2s infinite;
}

.status-indicator.active .status-dot {
    background: #00ff88;
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.6);
}

.status-indicator.tracking .status-dot {
    background: #0066ff;
    box-shadow: 0 0 12px rgba(0, 102, 255, 0.6);
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    border: none;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    width: 100%;
    min-width: 200px;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:active::before {
    width: 300px;
    height: 300px;
}

.btn-primary {
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(0, 102, 255, 0.4);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 102, 255, 0.5);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-secondary {
    background: rgba(255, 59, 48, 0.9);
    color: #fff;
    box-shadow: 0 4px 16px rgba(255, 59, 48, 0.4);
}

.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(255, 59, 48, 0.5);
    background: rgba(255, 59, 48, 1);
}

.btn-secondary:active {
    transform: translateY(0);
}

.btn svg {
    width: 20px;
    height: 20px;
}

.info-panel {
    display: flex;
    gap: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    justify-content: space-around;
}

.info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.info-label {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-value {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.route-estimated-info {
    position: fixed;
    bottom: 120px;
    left: 20px;
    background: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    display: flex;
    gap: 16px;
    font-size: 14px;
    color: white;
    align-items: center;
}

.navigation-guidance-panel {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    width: min(520px, calc(100vw - 40px));
    padding: 18px;
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(0, 102, 255, 0.22), rgba(26, 26, 26, 0.96)),
        rgba(18, 18, 18, 0.94);
    backdrop-filter: blur(22px);
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.08);
    color: #fff;
    box-sizing: border-box;
}

.navigation-guidance-top {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
}

.navigation-guidance-icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.navigation-guidance-copy {
    min-width: 0;
}

.navigation-guidance-badge-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.navigation-guidance-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.navigation-guidance-badge-muted {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.78);
}

.navigation-guidance-title {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.navigation-guidance-subtitle {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    line-height: 1.45;
}

.navigation-guidance-voice-btn {
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, opacity 0.2s ease;
    flex-shrink: 0;
}

.navigation-guidance-voice-btn:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.16);
}

.navigation-guidance-voice-btn svg {
    width: 20px;
    height: 20px;
}

.navigation-guidance-voice-btn .voice-icon-off {
    display: none;
}

.navigation-guidance-voice-btn.is-muted {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.72);
}

.navigation-guidance-voice-btn.is-muted .voice-icon-on {
    display: none;
}

.navigation-guidance-voice-btn.is-muted .voice-icon-off {
    display: block;
}

.navigation-guidance-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.navigation-guidance-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.navigation-guidance-stat-value {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.1;
}

.navigation-guidance-stat-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.68);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    color: #fff;
}

.loading-overlay.hidden {
    display: none;
}

.loading-overlay p {
    margin-top: 20px;
    font-size: 16px;
    font-weight: 500;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-top-color: #0066ff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Estilos para el mapa */
.maplibregl-ctrl-top-right {
    top: 20px;
    right: 20px;
}

.maplibregl-ctrl {
    background: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.maplibregl-ctrl button {
    color: #fff;
}

.maplibregl-ctrl button:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ==================== ESTILOS PARA LOCALES ==================== */

.locales-panel {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 400px;
    max-height: calc(100vh - 40px);
    background: rgba(26, 26, 26, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.locales-header {
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    touch-action: none;
    -webkit-touch-callout: none;
}

.locales-header.dragging {
    cursor: grabbing;
    -webkit-user-select: none;
    user-select: none;
}

.locales-header:not(.dragging):hover {
    background: rgba(255, 255, 255, 0.02);
}

/* Mejorar la experiencia táctil en móviles */
@media (hover: none) and (pointer: coarse) {
    .locales-header {
        cursor: default;
    }
    
    .locales-header:active {
        background: rgba(255, 255, 255, 0.05);
    }
}

.locales-header h3 {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.locales-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.locales-header-actions .btn-primary {
    padding: 10px 16px;
    font-size: 14px;
    white-space: nowrap;
}

.locales-header-actions .btn-primary .btn-text {
    margin-left: 6px;
}

.locales-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    -webkit-overflow-scrolling: touch;
}

.locales-panel.minimized .locales-list {
    display: none;
}

.locales-panel.minimized .locales-header {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.locales-panel.minimized {
    max-height: fit-content;
}

.local-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s;
    cursor: pointer;
}

.local-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(4px);
}

.local-info h4 {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.local-direccion {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    margin: 0 0 8px 0;
}

.local-meta {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

.local-actions {
    display: flex;
    gap: 8px;
}

.btn-icon {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    transition: all 0.3s;
}

.btn-icon:hover {
    background: rgba(255, 255, 255, 0.1);
}

.btn-icon.btn-danger {
    color: #ff6b6b;
}

.btn-icon.btn-danger:hover {
    background: rgba(255, 107, 107, 0.1);
}

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-content {
    background: rgba(26, 26, 26, 0.98);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.modal-header {
    padding: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.3s;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

.modal-body {
    padding: 24px;
}

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

.form-group label {
    display: block;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    transition: all 0.3s;
    box-sizing: border-box;
    max-width: 100%;
}

.form-group input[type="date"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.form-group input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.8;
    filter: invert(1);
}

.form-group select option {
    background: #ffffff;
    color: #000000;
    font-weight: 600;
    padding: 10px;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: #0066ff;
    background: rgba(255, 255, 255, 0.08);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
}

.btn-primary,
.btn-secondary {
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: none;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-primary {
    background: #0066ff;
    color: #fff;
}

.btn-primary:hover {
    background: #0052cc;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.4);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Vista de locales estilo Google Maps */
.local-detail-panel {
    position: fixed;
    bottom: 0;
    left: 280px;
    right: 0;
    background: rgba(26, 26, 26, 0.98);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    max-height: 80vh;
    overflow-y: auto;
    animation: slideUp 0.3s ease-out;
    transition: left 0.3s ease;
}

/* Si el sidebar está cerrado, el panel ocupa todo el ancho */
body.sidebar-closed .local-detail-panel {
    left: 0;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.panel-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.3s;
}

.panel-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.local-detail-header {
    padding: 24px;
    padding-right: 80px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.local-detail-header h2 {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 20px 0;
}

.local-detail-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-action {
    flex: 1;
    min-width: 120px;
    padding: 12px 16px;
    background: rgba(0, 102, 255, 0.1);
    border: 1px solid rgba(0, 102, 255, 0.3);
    border-radius: 12px;
    color: #0066ff;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s;
}

.btn-action:hover {
    background: rgba(0, 102, 255, 0.2);
    border-color: rgba(0, 102, 255, 0.5);
    transform: translateY(-2px);
}

.btn-action svg {
    width: 20px;
    height: 20px;
}

.local-detail-content {
    padding: 24px;
}

.local-fotos {
    margin-bottom: 24px;
}

.fotos-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.foto-item {
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
}

.foto-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.local-info-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.info-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.info-item svg {
    color: #0066ff;
    flex-shrink: 0;
    margin-top: 2px;
}

.info-item strong {
    display: block;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.info-item p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin: 0;
}

/* Rutas asignadas */
.rutas-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 24px;
}

.rutas-list-card {
    grid-column: 1 / -1;
    min-width: 0;
    overflow-x: hidden;
}

/* Pestañas Asignar Rutas */
.asignar-rutas-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    padding-bottom: 0;
}

.asignar-tab {
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.asignar-tab:hover {
    color: #fff;
    background: rgba(255,255,255,0.06);
}

.asignar-tab.active {
    color: #fff;
    background: rgba(255,255,255,0.08);
    border-bottom-color: var(--accent-color, #4f9cf9);
}

.asignar-panel {
    display: none;
}

.asignar-panel.active {
    display: block;
}

.asignar-panel {
    min-width: 0;
    overflow-x: hidden;
}

.asignar-panel-card {
    max-width: 900px;
    width: 100%;
    box-sizing: border-box;
}

.asignar-panel-card.rutas-list-card {
    max-width: none;
}

.asignar-panel-card .panel-desc,
.programacion-recojo-card .panel-desc {
    color: rgba(255,255,255,0.65);
    font-size: 0.9em;
    margin: -4px 0 20px 0;
    line-height: 1.4;
}

.asignar-panel-card .field-hint {
    display: block;
    color: rgba(255,255,255,0.5);
    font-size: 0.82em;
    margin-top: 6px;
}

.programacion-block {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.programacion-block:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.programacion-block h4,
.programaciones-list-wrap h4 {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 12px 0;
}

.programacion-block p {
    color: rgba(255,255,255,0.6);
    font-size: 0.88em;
    margin: 0 0 14px 0;
}

.form-row-inline {
    align-items: flex-end;
}

.form-group-btn {
    display: flex;
    align-items: flex-end;
}

.form-group-btn .btn-primary {
    margin-bottom: 0;
}

.rutas-form-card,
.rutas-list-card,
.programacion-recojo-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow-x: hidden;
    box-sizing: border-box;
}

.rutas-form-card h3,
.rutas-list-card h3 {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 20px 0;
}

.rutas-filters {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
}

/* Input de búsqueda para rutas */
.rutas-filters .search-input-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.rutas-filters .search-icon {
    position: absolute;
    left: 14px;
    color: rgba(255, 255, 255, 0.5);
    z-index: 1;
    pointer-events: none;
}

.rutas-filters .search-input {
    width: 100%;
    padding: 12px 14px 12px 42px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    transition: all 0.2s;
    box-sizing: border-box;
}

.rutas-filters .search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.rutas-filters .search-input:focus {
    outline: none;
    border-color: #0066ff;
    background: rgba(255, 255, 255, 0.08);
}

.rutas-filters .btn-clear-search {
    position: absolute;
    right: 8px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
    z-index: 1;
}

.rutas-filters .btn-clear-search:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

/* Contenedor de filtros */
.rutas-filters .filters-container-locales {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}

.rutas-filters .filter-group-locales {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
}

.rutas-filters .filter-group-locales label {
    display: block;
    margin-bottom: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.rutas-filters .filter-input {
    width: 100%;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    transition: all 0.2s;
    box-sizing: border-box;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='rgba(255,255,255,0.7)' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 36px;
}

.rutas-filters .filter-input:focus {
    outline: none;
    border-color: #0066ff;
    background-color: rgba(255, 255, 255, 0.08);
}

.rutas-filters .filter-input option {
    background: #1a1a1a;
    color: #fff;
    font-weight: 500;
    padding: 10px;
}

.rutas-filters select {
    flex: 1;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
}

.rutas-filters select option {
    background: #1a1a1a;
    color: #fff;
    font-weight: 600;
    padding: 10px;
}

.rutas-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    overflow-x: hidden;
}

.ruta-item {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.ruta-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.ruta-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.ruta-header h4 {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px 0;
}

.ruta-conductor {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    margin: 0;
}

.estado-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.estado-pendiente {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
}

.estado-proceso {
    background: rgba(0, 102, 255, 0.2);
    color: #0066ff;
}

.estado-completada {
    background: rgba(0, 255, 136, 0.2);
    color: #00ff88;
}

.estado-cancelada {
    background: rgba(255, 107, 107, 0.2);
    color: #ff6b6b;
}

.estado-activa {
    background: rgba(22, 163, 74, 0.2);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.25);
}

.ruta-info {
    margin-bottom: 12px;
}

.ruta-info p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin: 8px 0;
}

.ruta-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-small {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: none;
    transition: all 0.3s;
}

.btn-small.btn-success {
    background: rgba(0, 255, 136, 0.2);
    color: #00ff88;
    border: 1px solid rgba(0, 255, 136, 0.3);
}

.btn-small.btn-success:hover {
    background: rgba(0, 255, 136, 0.3);
}

.btn-small.btn-primary {
    background: rgba(0, 102, 255, 0.2);
    color: #0066ff;
    border: 1px solid rgba(0, 102, 255, 0.3);
}

.btn-small.btn-primary:hover {
    background: rgba(0, 102, 255, 0.3);
}

.btn-small.btn-danger {
    background: rgba(255, 107, 107, 0.2);
    color: #ff6b6b;
    border: 1px solid rgba(255, 107, 107, 0.3);
}

.btn-small.btn-danger:hover {
    background: rgba(255, 107, 107, 0.3);
}

.btn-small.btn-delete-route {
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.26);
    min-width: 42px;
    width: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-small.btn-delete-route:hover {
    background: rgba(239, 68, 68, 0.28);
}

.btn-small.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-small.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
}

.form-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Responsive */
@media (max-width: 768px) {
    .navigation-guidance-panel {
        top: 12px;
        bottom: auto;
        left: 12px;
        right: 12px;
        transform: none;
        width: auto;
        padding: 10px 12px;
        border-radius: 18px;
        box-shadow:
            0 10px 24px rgba(0, 0, 0, 0.24),
            0 0 0 1px rgba(255, 255, 255, 0.06);
    }

    .navigation-guidance-top {
        grid-template-columns: 40px minmax(0, 1fr) 38px;
        gap: 8px;
        align-items: start;
    }

    .navigation-guidance-voice-btn {
        grid-column: auto;
        justify-self: end;
        margin-top: 0;
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }

    .navigation-guidance-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .navigation-guidance-title {
        font-size: 14px;
        line-height: 1.2;
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .navigation-guidance-subtitle {
        display: none;
    }

    .navigation-guidance-meta {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        margin-top: 8px;
    }

    .navigation-guidance-stat {
        padding: 7px 8px;
        border-radius: 12px;
        gap: 2px;
    }

    .navigation-guidance-stat-value {
        font-size: 13px;
    }

    .navigation-guidance-stat-label {
        font-size: 9px;
        letter-spacing: 0.03em;
    }

    .navigation-guidance-badge-row {
        gap: 6px;
        margin-bottom: 6px;
    }

    .navigation-guidance-badge {
        min-height: 22px;
        padding: 4px 8px;
        font-size: 10px;
    }

    .navigation-guidance-badge-muted {
        display: none;
    }

    .control-panel {
        bottom: 12px;
        left: 12px;
        right: 12px;
        transform: none;
        padding: 10px 12px;
        min-width: auto;
        max-width: calc(100vw - 24px);
        border-radius: 14px;
        gap: 10px;
        backdrop-filter: blur(14px);
    }
    
    .status-indicator {
        width: 100%;
        justify-content: center;
        font-size: 12px;
        padding: 5px 10px;
        border-radius: 14px;
    }
    
    .btn {
        padding: 11px 16px;
        font-size: 14px;
        min-width: auto;
        width: 100%;
        border-radius: 12px;
    }
    
    .btn svg {
        width: 16px;
        height: 16px;
    }
    
    .info-panel {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        flex-wrap: nowrap;
        justify-content: stretch;
        width: 100%;
        padding-top: 10px;
    }
    
    .info-item {
        min-width: 0;
        padding: 8px 6px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.05);
    }
    
    .info-label {
        font-size: 9px;
        letter-spacing: 0.03em;
    }
    
    .info-value {
        font-size: 13px;
    }

    .route-estimated-info {
        display: none !important;
    }
    
    .sidebar {
        box-shadow: 4px 0 32px rgba(0, 0, 0, 0.5);
    }
    
    .locales-panel {
        width: calc(100% - 40px);
        right: 20px;
        left: 20px;
        top: 70px;
        max-height: calc(100vh - 90px);
        padding: 16px;
    }
    
    .locales-header {
        padding: 16px;
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .locales-header h3 {
        font-size: 18px;
    }
    
    .locales-header-actions {
        width: 100%;
        justify-content: space-between;
        gap: 8px;
    }
    
    .locales-header-actions .btn-primary {
        flex: 1;
        padding: 10px 12px;
        font-size: 13px;
    }
    
    .locales-header-actions .btn-primary .btn-text {
        display: inline;
    }
    
    .locales-header-actions .btn-minimize {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
    }
    
    .locales-list {
        padding: 10px;
    }
    
    .local-item {
        padding: 12px;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .local-info h4 {
        font-size: 15px;
    }
    
    .local-direccion {
        font-size: 13px;
    }
    
    .rutas-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 16px;
    }
    
    .rutas-form-card,
    .rutas-list-card {
        padding: 16px;
    }
    
    .rutas-form-card h3,
    .rutas-list-card h3 {
        font-size: 18px;
        margin-bottom: 16px;
    }
    
    .rutas-filters {
        flex-direction: column;
        gap: 10px;
        padding: 0;
    }
    
    .rutas-filters .filters-container-locales {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .rutas-filters .search-input-wrapper {
        width: 100%;
        margin-bottom: 0;
    }
    
    .rutas-filters .filter-group-locales {
        width: 100%;
        margin-bottom: 0;
    }
    
    .rutas-filters select,
    .rutas-filters .filter-input {
        width: 100%;
        box-sizing: border-box;
    }
    
    .rutas-list-card {
        overflow-x: hidden;
    }
    
    .form-container {
        gap: 12px;
    }
    
    .form-group {
        margin-bottom: 16px;
    }
    
    .form-actions {
        flex-direction: column;
        gap: 8px;
    }
    
    .form-actions button {
        width: 100%;
    }
    
    .ruta-item {
        padding: 12px;
    }
    
    .ruta-header {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
    
    .ruta-actions {
        flex-direction: column;
        gap: 6px;
    }
    
    .ruta-actions .btn-small {
        width: 100%;
        padding: 10px;
        font-size: 13px;
    }
    
    .local-detail-actions {
        flex-direction: column;
    }
    
    .btn-action {
        width: 100%;
    }
    
    .fotos-gallery {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
    
    .local-detail-panel {
        left: 0;
    }
    
    body.sidebar-closed .local-detail-panel {
        left: 0;
    }
    
    .local-info-section {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    /* Ajustes adicionales para el mapa en móviles */
    .maplibregl-ctrl-top-right {
        top: 70px;
        right: 20px;
    }
}

@media (max-width: 520px) {
    .navigation-guidance-panel {
        left: 12px;
        right: 12px;
        padding: 9px 10px;
    }

    .navigation-guidance-top {
        grid-template-columns: 36px minmax(0, 1fr) 34px;
    }

    .navigation-guidance-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .navigation-guidance-badge-row {
        margin-bottom: 4px;
    }

    .navigation-guidance-badge {
        font-size: 9px;
        padding: 3px 7px;
    }

    .navigation-guidance-title {
        font-size: 13px;
    }

    .navigation-guidance-voice-btn {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }

    .navigation-guidance-meta {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    .navigation-guidance-stat {
        padding: 6px;
    }

    .navigation-guidance-stat-value {
        font-size: 12px;
    }

    .navigation-guidance-stat-label {
        font-size: 8px;
    }

    .control-panel {
        padding: 9px 10px;
        bottom: 10px;
    }

    .btn {
        padding: 10px 14px;
        font-size: 13px;
    }

    .status-indicator {
        font-size: 11px;
    }

    .info-panel {
        gap: 6px;
    }

    .info-item {
        padding: 7px 4px;
    }

    .info-value {
        font-size: 12px;
    }
}

/* Estilos para pantallas muy pequeñas (menos de 480px) */
@media (max-width: 480px) {
    .locales-panel {
        width: calc(100vw - 32px);
        top: 60px;
        right: 16px;
        left: 16px;
        padding: 12px;
        max-height: calc(100vh - 80px);
        border-radius: 12px;
    }
    
    .locales-header {
        padding: 12px;
    }
    
    .locales-header h3 {
        font-size: 16px;
    }
    
    .locales-header-actions .btn-primary {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .locales-header-actions .btn-primary .btn-text {
        display: inline;
        margin-left: 4px;
    }
    
    .locales-header-actions .btn-primary svg {
        width: 16px;
        height: 16px;
    }
    
    .locales-header-actions .btn-minimize {
        width: 32px;
        height: 32px;
    }
    
    .locales-list {
        padding: 8px;
    }
    
    .local-item {
        padding: 10px;
    }
    
    .local-info h4 {
        font-size: 14px;
    }
    
    .local-direccion {
        font-size: 12px;
    }
    
    /* Estilos responsive adicionales para asignar-rutas */
    .rutas-grid {
        gap: 12px;
    }
    
    .rutas-form-card,
    .rutas-list-card {
        padding: 12px;
    }
    
    .rutas-form-card h3,
    .rutas-list-card h3 {
        font-size: 16px;
        margin-bottom: 12px;
    }
    
    .form-group label {
        font-size: 13px;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 14px;
        padding: 10px 12px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .form-group input[type="date"] {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 10px 12px;
    }
    
    .ruta-item {
        padding: 10px;
    }
    
    .ruta-header h4 {
        font-size: 15px;
    }
    
    .ruta-conductor {
        font-size: 13px;
    }
    
    .ruta-info p {
        font-size: 13px;
        margin: 6px 0;
    }
    
    .estado-badge {
        font-size: 11px;
        padding: 4px 10px;
    }
    
    .section-container {
        padding: 16px 8px;
    }
    
    .section-header h2 {
        font-size: 20px;
    }
    
    .section-header p {
        font-size: 13px;
    }
    
    .rutas-grid {
        gap: 10px;
        margin-top: 12px;
    }
    
    .rutas-form-card,
    .rutas-list-card {
        padding: 10px;
    }
    
    .rutas-form-card h3,
    .rutas-list-card h3 {
        font-size: 15px;
        margin-bottom: 10px;
    }
    
    .form-group {
        margin-bottom: 12px;
    }
    
    .form-group label {
        font-size: 12px;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 13px;
        padding: 8px 10px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .form-group input[type="date"] {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 8px 10px;
        font-size: 13px;
    }
    
    .rutas-form-card {
        overflow-x: hidden;
    }
    
    .ruta-item {
        padding: 8px;
    }
    
    .ruta-header h4 {
        font-size: 14px;
    }
    
    .ruta-conductor {
        font-size: 12px;
    }
    
    .ruta-info p {
        font-size: 12px;
        margin: 4px 0;
    }
    
    .ruta-actions .btn-small {
        padding: 8px;
        font-size: 12px;
    }
    
    /* Usuarios responsive para pantallas muy pequeñas */
    .usuarios-panel {
        margin: 8px;
        max-height: calc(100vh - 90px);
    }
    
    .usuarios-header {
        padding: 12px;
    }
    
    .usuarios-header h3 {
        font-size: 16px;
    }
    
    .usuarios-header .btn-primary {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .usuarios-list {
        padding: 10px;
    }
    
    .usuario-item {
        padding: 10px;
        gap: 10px;
    }
    
    .usuario-avatar {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
    
    .usuario-details h4 {
        font-size: 14px;
    }
    
    .usuario-email {
        font-size: 12px;
    }
    
    .badge,
    .status-badge {
        font-size: 10px;
        padding: 3px 8px;
    }
    
    .usuario-actions {
        gap: 6px;
    }
    
    .usuario-actions .btn-icon {
        width: 28px;
        height: 28px;
    }
    
    .modal-content {
        max-width: 98%;
        margin: 5px;
    }
    
    .modal-header {
        padding: 16px;
    }
    
    .modal-header h3 {
        font-size: 18px;
    }
    
    .modal-body {
        padding: 16px;
    }
    
    .form-group input,
    .form-group select {
        font-size: 13px;
        padding: 8px 10px;
    }
    
    .conductores-panel {
        width: calc(100vw - 32px);
        top: 60px;
        right: 16px;
        left: 16px;
        padding: 12px;
        max-height: calc(100vh - 80px);
        border-radius: 12px;
    }
    
    .conductores-header {
        margin-bottom: 10px;
        padding-bottom: 10px;
    }
    
    .conductores-header h3 {
        font-size: 14px;
    }
    
    .conductor-item {
        padding: 8px;
        gap: 8px;
        border-radius: 10px;
    }
    
    .conductor-avatar {
        width: 36px;
        height: 36px;
        font-size: 14px;
        border-radius: 10px;
    }
    
    .conductor-name {
        font-size: 12px;
    }
    
    .conductor-status {
        font-size: 10px;
    }
    
    .conductor-speed {
        font-size: 11px;
    }
    
    .menu-toggle-btn {
        top: 12px;
        left: 12px;
        width: 40px;
        height: 40px;
    }
    
    .maplibregl-ctrl-top-right {
        top: 60px;
        right: 16px;
    }
    
    /* Control panel responsive para pantallas muy pequeñas */
    .control-panel {
        bottom: 10px;
        left: 10px;
        right: 10px;
        padding: 12px;
        border-radius: 12px;
    }
    
    .btn {
        padding: 12px 20px;
        font-size: 14px;
    }
    
    .info-panel {
        gap: 12px;
    }
    
    .info-item {
        min-width: 70px;
    }
    
    .info-label {
        font-size: 9px;
    }
    
    .info-value {
        font-size: 14px;
    }
    
    /* Rutas panel responsive para pantallas muy pequeñas */
    .rutas-panel {
        top: 60px;
        left: 10px;
        right: 10px;
        width: calc(100% - 20px);
        max-height: calc(100vh - 180px);
    }
    
    .rutas-panel-header {
        padding: 12px;
    }
    
    .rutas-panel-header h3 {
        font-size: 15px;
    }
    
    .panel-toggle {
        width: 26px;
        height: 26px;
    }
    
    .rutas-panel.collapsed {
        transform: translateX(calc(100% - 50px));
    }
    
    .btn-refresh,
    .btn-minimize {
        width: 28px;
        height: 28px;
    }
    
    .btn-refresh svg,
    .btn-minimize svg {
        width: 14px;
        height: 14px;
    }
}

/* Asegurar que el panel no se superponga con el sidebar en móviles */
@media (max-width: 768px) {
    body.sidebar-open .conductores-panel {
        left: 20px;
        right: 20px;
        width: calc(100vw - 40px);
    }
}

/* ==================== ESTILOS PARA REPORTES ==================== */

.reportes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.reporte-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    transition: all 0.3s;
}

.reporte-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.reporte-card h3 {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.reporte-value {
    color: #fff;
    font-size: 36px;
    font-weight: 700;
    margin: 0 0 8px 0;
}

.reporte-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    margin: 0;
}

/* Secciones de reportes administrativos */
.reportes-section {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 32px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.reportes-section-header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}
.reportes-section-header-row .section-title {
    margin: 0;
    border-bottom: none;
    flex: 1;
    min-width: 200px;
}
.filter-select-filtracion {
    min-width: 220px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}
.filter-select-filtracion:focus {
    outline: none;
    border-color: var(--primary-color, #4a9eff);
}

/* Choices.js: select con búsqueda (filtración por local) */
.reportes-section-header-row .choices {
    min-width: 260px;
}
.reportes-section-header-row .choices__inner {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    min-height: 44px !important;
    color: #fff !important;
}
.reportes-section-header-row .choices__list--single .choices__item {
    color: #fff !important;
    opacity: 1 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}
.reportes-section-header-row .choices__list--single .choices__placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
    opacity: 1 !important;
}
.reportes-section-header-row .choices__input {
    background: transparent !important;
    color: #fff !important;
}
.reportes-section-header-row .choices__input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
.reportes-section-header-row .choices[data-type*="select-one"] .choices__item--selectable {
    color: #fff;
}
.reportes-section-header-row .choices__list--dropdown {
    background: rgba(30, 35, 45, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 10px !important;
    z-index: 100;
}
.reportes-section-header-row .choices__list--dropdown .choices__item--selectable {
    color: rgba(255, 255, 255, 0.9);
}
.reportes-section-header-row .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background: rgba(74, 158, 255, 0.25) !important;
    color: #fff;
}
.reportes-section-header-row .choices__item--choice {
    color: rgba(255, 255, 255, 0.9);
}

.section-title {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 12px 0;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}
.section-desc {
    font-size: 14px;
}

/* Estadísticas de mercadería */
.mercaderia-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.stat-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-label {
    display: block;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value {
    display: block;
    color: #fff;
    font-size: 32px;
    font-weight: 700;
}

/* Estadísticas de rutas */
.estadisticas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.estadistica-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.estadistica-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.estadistica-value {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
}

/* Tablas de reportes */
.reportes-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
}

.reportes-table thead {
    background: rgba(255, 255, 255, 0.05);
}

.reportes-table th {
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    font-weight: 600;
    padding: 12px 16px;
    text-align: left;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.reportes-table td {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.reportes-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.reportes-table tbody tr:last-child td {
    border-bottom: none;
}

/* Badges */
.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge-success {
    background: rgba(46, 213, 115, 0.2);
    color: #2ed573;
    border: 1px solid rgba(46, 213, 115, 0.3);
}

.badge-warning {
    background: rgba(255, 184, 0, 0.2);
    color: #ffb800;
    border: 1px solid rgba(255, 184, 0, 0.3);
}

.badge-info {
    background: rgba(0, 168, 255, 0.2);
    color: #00a8ff;
    border: 1px solid rgba(0, 168, 255, 0.3);
}

.badge-danger {
    background: rgba(255, 107, 107, 0.2);
    color: #ff6b6b;
    border: 1px solid rgba(255, 107, 107, 0.3);
}

.badge-secondary {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Restricción vial: zona por tramo / mapa */
.restriccion-zona-block { margin-top: 16px; }
.restriccion-zona-block .field-hint { margin-bottom: 12px; color: rgba(255,255,255,0.7); font-size: 0.9em; }
.restriccion-zona-opciones .restriccion-tramo,
.restriccion-zona-opciones .restriccion-mapa { padding: 12px; background: rgba(255,255,255,0.05); border-radius: 10px; }
.restriccion-zona-opciones .restriccion-mapa { margin-top: 12px; }
.restriccion-zona-resumen { margin-top: 12px; padding: 10px 14px; background: rgba(46, 213, 115, 0.15); border: 1px solid rgba(46, 213, 115, 0.3); border-radius: 10px; color: #2ed573; font-size: 0.9em; }
.restriccion-coords-avanzado { margin-top: 16px; }
.restriccion-coords-avanzado summary { cursor: pointer; color: rgba(255,255,255,0.8); padding: 8px 0; }
.restriccion-coords-avanzado[open] summary { margin-bottom: 8px; }
.modal-content-map { max-width: 640px; }
.restriccion-mapa-search { margin-bottom: 10px; }
.restricciones-list-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(0, 168, 255, 0.08);
    border: 1px solid rgba(0, 168, 255, 0.18);
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
}
.restricciones-list-hint-icon {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 168, 255, 0.18);
    color: #73c8ff;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.restriccion-item-card {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
    padding: 18px;
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)),
        rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    cursor: pointer;
}
.restriccion-item-card:hover {
    transform: translateY(-1px);
    border-color: rgba(94, 179, 255, 0.28);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.24);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.04)),
        rgba(15, 23, 42, 0.62);
}
.restriccion-item-main {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.restriccion-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}
.restriccion-item-title {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    min-width: 0;
    word-break: break-word;
}
.restriccion-item-badges {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    flex-shrink: 0;
}
.restriccion-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
.restriccion-chip-vehicle {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.12);
    text-transform: capitalize;
}
.restriccion-chip-trazo {
    background: rgba(0, 168, 255, 0.14);
    color: #73c8ff;
    border: 1px solid rgba(0, 168, 255, 0.22);
}
.restriccion-chip-box {
    background: rgba(255, 184, 0, 0.12);
    color: #ffd369;
    border: 1px solid rgba(255, 184, 0, 0.2);
}
.restriccion-item-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    min-width: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    line-height: 1.45;
}
.restriccion-meta-label {
    color: rgba(255, 255, 255, 0.45);
    font-weight: 600;
}
.restriccion-meta-value {
    min-width: 0;
    word-break: break-word;
}
.restriccion-meta-separator {
    color: rgba(255, 255, 255, 0.28);
}
.restriccion-item-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}
.restriccion-item-hint {
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
}
.restriccion-item-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.restriccion-switch {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 32px;
    flex-shrink: 0;
}
.restriccion-switch-track {
    width: 52px;
    height: 32px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.16);
    display: flex;
    align-items: center;
    padding: 4px;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.restriccion-switch-thumb {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.24);
    transform: translateX(0);
    transition: transform 0.2s ease, background 0.2s ease;
}
.restriccion-switch.is-on .restriccion-switch-track {
    background: #16a34a;
    border-color: #15803d;
    box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.18), 0 8px 18px rgba(22, 163, 74, 0.32);
}
.restriccion-switch.is-on .restriccion-switch-thumb {
    transform: translateX(20px);
    background: #f0fdf4;
}
.restriccion-switch.is-off .restriccion-switch-track {
    background: #dc2626;
    border-color: #b91c1c;
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.14), 0 8px 18px rgba(220, 38, 38, 0.26);
}
.restriccion-switch:hover .restriccion-switch-track {
    filter: brightness(1.05);
}
.restriccion-switch:focus-visible {
    outline: 2px solid rgba(94, 179, 255, 0.7);
    outline-offset: 2px;
    border-radius: 999px;
}
.restriccion-action-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.action-modal-content {
    max-width: 520px;
    width: min(92vw, 520px);
    border-radius: 18px;
    overflow: hidden;
}
.action-modal-header {
    padding: 20px 22px 0;
    border-bottom: none;
}
.action-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
}
.action-modal-body {
    padding: 12px 22px 8px;
}
.action-modal-message {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 15px;
    line-height: 1.6;
}
.action-modal-footer {
    padding: 16px 22px 22px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}
.action-modal-footer .btn-primary,
.action-modal-footer .btn-secondary {
    min-width: 110px;
}

/* Loading state */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: rgba(255, 255, 255, 0.6);
}

.spinner-small {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: #00a8ff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 12px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Responsive para reportes */
@media (max-width: 768px) {
    .reportes-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .reporte-card {
        padding: 20px;
    }
    
    .reporte-value {
        font-size: 28px;
    }
    
    .reportes-section {
        padding: 20px;
        margin-bottom: 24px;
    }
    
    .section-title {
        font-size: 18px;
    }
    
    .mercaderia-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .estadisticas-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .stat-value {
        font-size: 24px;
    }
    
    .estadistica-value {
        font-size: 22px;
    }
    
    .reportes-table {
        font-size: 12px;
    }
    
    .reportes-table th,
    .reportes-table td {
        padding: 10px 8px;
    }
    
    .table-container {
        overflow-x: auto;
    }
}

@media (max-width: 480px) {
    .reportes-grid {
        grid-template-columns: 1fr;
    }
    
    .mercaderia-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .estadisticas-grid {
        grid-template-columns: 1fr;
    }
    
    .reportes-table {
        font-size: 11px;
    }
    
    .reportes-table th,
    .reportes-table td {
        padding: 8px 6px;
    }
}

.reportes-detalle {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.reportes-detalle h3 {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 20px 0;
}

.reportes-filters {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.filter-input {
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-family: inherit;
    min-width: 200px;
}

.filter-input:focus {
    outline: none;
    border-color: #0066ff;
    background: rgba(255, 255, 255, 0.08);
}

.reportes-table-container {
    overflow-x: auto;
}

.reportes-table {
    width: 100%;
    border-collapse: collapse;
}

.reportes-table thead {
    background: rgba(255, 255, 255, 0.05);
}

.reportes-table th {
    padding: 12px 16px;
    text-align: left;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.reportes-table td {
    padding: 12px 16px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.reportes-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.reportes-table tbody tr:last-child td {
    border-bottom: none;
}

/* ==================== ESTILOS PARA TABLA DE PLANTA ==================== */

.table-container {
    background: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 12px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow-x: auto;
    margin-top: 16px;
    -webkit-overflow-scrolling: touch;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.data-table thead {
    background: rgba(0, 102, 255, 0.2);
    border-bottom: 2px solid rgba(0, 102, 255, 0.4);
}

.data-table th {
    padding: 8px 6px;
    text-align: left;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.data-table td {
    padding: 8px 6px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
    word-break: break-word;
    max-width: 120px;
}

.data-table tbody tr {
    transition: background 0.2s ease;
}

.data-table tbody tr:hover {
    background: rgba(0, 102, 255, 0.1);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table .btn-icon {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 2px;
    width: 28px;
    height: 28px;
}

.data-table .btn-icon svg {
    width: 14px;
    height: 14px;
}

.data-table .btn-icon:hover {
    background: rgba(0, 102, 255, 0.3);
    border-color: rgba(0, 102, 255, 0.5);
    color: #fff;
    transform: translateY(-1px);
}

.data-table .btn-icon.btn-danger {
    background: rgba(255, 107, 107, 0.2);
    border-color: rgba(255, 107, 107, 0.4);
    color: #ff6b6b;
}

.data-table .btn-icon.btn-danger:hover {
    background: rgba(255, 107, 107, 0.3);
    border-color: rgba(255, 107, 107, 0.6);
    color: #ff6b6b;
}

.data-table .empty-state {
    text-align: center;
    padding: 30px 15px;
    color: rgba(255, 255, 255, 0.7);
}

.data-table .empty-state p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
}

.data-table .loading-state {
    text-align: center;
    padding: 30px 15px;
    color: rgba(255, 255, 255, 0.7);
}

.data-table .loading-state p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    margin-top: 12px;
}

.data-table a {
    color: #0066ff;
    text-decoration: none;
    transition: color 0.2s;
    font-size: 11px;
}

.data-table a:hover {
    color: #00ff88;
    text-decoration: underline;
}

/* Vista móvil - Cards en lugar de tabla */
@media (max-width: 768px) {
    .main-content {
        padding: 10px;
        padding-top: 80px;
        height: 100vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .page-header {
        margin-bottom: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .page-header h1 {
        font-size: 24px;
        margin: 0;
    }
    
    .page-header .btn-primary {
        padding: 10px 14px;
        font-size: 13px;
        white-space: nowrap;
    }
    
    .table-container {
        padding: 8px;
        margin-top: 12px;
        border-radius: 8px;
        overflow-x: auto;
    }
    
    .data-table {
        display: none;
    }
    
    .data-table-mobile {
        display: block;
        padding-bottom: 20px;
    }
    
    .planta-card {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 12px;
        margin-bottom: 12px;
    }
    
    .planta-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .planta-card-id {
        font-size: 12px;
        font-weight: 600;
        color: #0066ff;
    }
    
    .planta-card-actions {
        display: flex;
        gap: 6px;
    }
    
    .planta-card-field {
        display: flex;
        flex-direction: column;
        margin-bottom: 8px;
    }
    
    .planta-card-label {
        font-size: 10px;
        color: rgba(255, 255, 255, 0.6);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 4px;
    }
    
    .planta-card-value {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.9);
        word-break: break-word;
    }
    
    .planta-card-photo {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #0066ff;
        font-size: 12px;
        text-decoration: none;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        transition: color 0.2s ease, transform 0.2s ease;
    }
    
    .planta-card-photo:hover {
        color: #0080ff;
        transform: scale(1.05);
    }
    
    .planta-card-photo svg {
        width: 16px;
        height: 16px;
    }
    
    /* Modal responsive para planta */
    .modal-content {
        max-width: 95%;
        margin: 10px;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .modal-header {
        padding: 20px;
    }
    
    .modal-header h3 {
        font-size: 20px;
    }
    
    .modal-body {
        padding: 20px;
    }
    
    .form-group {
        margin-bottom: 16px;
    }
    
    .form-group label {
        font-size: 13px;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 14px;
        padding: 10px 12px;
        width: 100%;
        box-sizing: border-box;
    }
    
    .form-group input[type="datetime-local"] {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .form-group input[type="file"] {
        padding: 8px;
    }
    
    .form-actions {
        flex-direction: column;
        gap: 8px;
    }
    
    .form-actions button {
        width: 100%;
    }
}

@media (min-width: 769px) {
    .data-table-mobile {
        display: none;
    }
}

/* Responsive para planta en pantallas muy pequeñas */
@media (max-width: 480px) {
    .main-content {
        padding: 8px;
        padding-top: 70px;
    }
    
    .page-header {
        margin-bottom: 12px;
    }
    
    .page-header h1 {
        font-size: 20px;
    }
    
    .page-header .btn-primary {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .config-content {
        gap: 16px;
    }
    
    .config-section {
        padding: 16px;
    }
    
    .config-section h3 {
        font-size: 16px;
        margin-bottom: 12px;
    }
    
    .config-item {
        margin-bottom: 12px;
    }
    
    .config-input {
        padding: 10px 14px;
        font-size: 14px;
    }
    
    .btn-save,
    .btn-add-user {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    .table-container {
        padding: 6px;
        margin-top: 10px;
    }
    
    .planta-card {
        padding: 10px;
    }
    
    .planta-card-header {
        margin-bottom: 8px;
        padding-bottom: 6px;
    }
    
    .planta-card-id {
        font-size: 11px;
    }
    
    .planta-card-field {
        margin-bottom: 6px;
    }
    
    .planta-card-label {
        font-size: 9px;
    }
    
    .planta-card-value {
        font-size: 12px;
    }
    
    .planta-card-actions .btn-icon {
        width: 28px;
        height: 28px;
    }
    
    .planta-card-actions .btn-icon svg {
        width: 12px;
        height: 12px;
    }
    
    .modal-content {
        max-width: 98%;
        margin: 5px;
        max-height: 95vh;
    }
    
    .modal-header {
        padding: 16px;
    }
    
    .modal-header h3 {
        font-size: 18px;
    }
    
    .modal-body {
        padding: 16px;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 13px;
        padding: 8px 10px;
    }
}

/* ==================== MODAL DE FOTOS CON ANIMACIÓN TIPO RESORTE ==================== */

.modal-foto-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-foto-overlay.modal-foto-open {
    opacity: 1;
}

.modal-foto-content {
    position: relative;
    max-width: 95vw;
    max-height: 95vh;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.3) rotate(-5deg);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.4s ease;
}

.modal-foto-overlay.modal-foto-open .modal-foto-content {
    transform: scale(1) rotate(0deg);
    opacity: 1;
}

.modal-foto-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(26, 26, 26, 0.9);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 100%;
    max-height: 100%;
}

.modal-foto-container img {
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    border-radius: 8px;
    object-fit: contain;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.modal-foto-close {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 40px;
    height: 40px;
    background: rgba(26, 26, 26, 0.95);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #fff;
    font-size: 24px;
    font-weight: 300;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3001;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.modal-foto-close:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.1) rotate(90deg);
}

.modal-foto-close:active {
    transform: scale(0.95) rotate(90deg);
}

/* Animación de entrada tipo resorte */
@keyframes springIn {
    0% {
        transform: scale(0.3) rotate(-5deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.1) rotate(2deg);
    }
    70% {
        transform: scale(0.95) rotate(-1deg);
    }
    85% {
        transform: scale(1.02) rotate(0.5deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* Animación de salida */
@keyframes springOut {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: scale(0.3) rotate(5deg);
        opacity: 0;
    }
}

/* Responsive para modal de fotos */
@media (max-width: 768px) {
    .modal-foto-container {
        padding: 15px;
        border-radius: 12px;
    }
    
    .modal-foto-container img {
        max-width: 95vw;
        max-height: 85vh;
    }
    
    .modal-foto-close {
        top: -10px;
        right: -10px;
        width: 35px;
        height: 35px;
        font-size: 20px;
    }
}

/* ==================== ESTILOS PARA MODAL DE FINALIZACIÓN DE RUTA ==================== */

/* Modal de advertencia de peaje */
.toll-warning-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(6px);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.toll-warning-panel {
    background: rgba(26, 26, 26, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 32px;
    max-width: 450px;
    width: 100%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(255, 193, 7, 0.3);
    animation: slideDown 0.3s ease-out;
}

.toll-warning-header {
    text-align: center;
    margin-bottom: 32px;
}

.toll-warning-header svg {
    color: #ffc107;
    margin-bottom: 16px;
}

.toll-warning-header h2 {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 12px 0;
}

.toll-warning-header p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 15px;
    margin: 0;
    line-height: 1.5;
}

.toll-warning-header #tollDistance {
    color: #ffc107;
    font-weight: 700;
    font-size: 16px;
}

.toll-warning-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.toll-warning-btn {
    width: 100%;
    padding: 16px 20px;
    border-radius: 12px;
    border: 2px solid;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-sizing: border-box;
}

.toll-warning-yes {
    background: rgba(76, 175, 80, 0.1);
    border-color: #4CAF50;
    color: #4CAF50;
}

.toll-warning-yes:hover {
    background: rgba(76, 175, 80, 0.2);
    border-color: #45a049;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(76, 175, 80, 0.3);
}

.toll-warning-no {
    background: rgba(255, 193, 7, 0.1);
    border-color: #ffc107;
    color: #ffc107;
}

.toll-warning-no:hover {
    background: rgba(255, 193, 7, 0.2);
    border-color: #ffb300;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(255, 193, 7, 0.3);
}

.toll-warning-btn:active {
    transform: translateY(0);
}

.toll-warning-btn svg {
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .toll-warning-panel {
        padding: 24px;
        max-width: 90%;
    }
    
    .toll-warning-header h2 {
        font-size: 20px;
    }
    
    .toll-warning-btn {
        padding: 14px 18px;
        font-size: 14px;
    }
}

/* Modal de selección de tipo de vehículo */
.vehicle-type-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.vehicle-type-panel {
    background: rgba(26, 26, 26, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 32px;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: slideDown 0.3s ease-out;
}

.vehicle-type-header {
    text-align: center;
    margin-bottom: 32px;
}

.vehicle-type-header h2 {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px 0;
}

.vehicle-type-header p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin: 0;
}

.vehicle-type-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.vehicle-type-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: all 0.3s;
    color: #fff;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

.vehicle-type-btn:hover {
    background: rgba(0, 102, 255, 0.1);
    border-color: #0066ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 102, 255, 0.3);
}

.vehicle-type-btn:active {
    transform: translateY(0);
}

.vehicle-type-btn svg {
    flex-shrink: 0;
    color: #0066ff;
}

.vehicle-type-btn div {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vehicle-type-btn strong {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

.vehicle-type-btn span {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.vehicle-type-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.vehicle-type-continue {
    flex: 1;
    padding: 14px 20px;
    background: #0066ff;
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.vehicle-type-continue:hover:not(:disabled) {
    background: #0052cc;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 102, 255, 0.4);
}

.vehicle-type-continue:active:not(:disabled) {
    transform: translateY(0);
}

.vehicle-type-continue:disabled {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.4);
    cursor: not-allowed;
    opacity: 0.5;
}

.vehicle-type-continue svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.vehicle-type-cancel {
    flex: 1;
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}

.vehicle-type-cancel:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Estado seleccionado para botones de tipo de vehículo */
.vehicle-type-btn.selected {
    background: rgba(0, 102, 255, 0.2);
    border-color: #0066ff;
    box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.3);
}

.vehicle-type-btn.selected svg {
    color: #0066ff;
}

.vehicle-type-btn.selected strong {
    color: #0066ff;
}

@media (max-width: 768px) {
    .vehicle-type-panel {
        padding: 24px;
        max-width: 90%;
    }
    
    .vehicle-type-header h2 {
        font-size: 20px;
    }
    
    .vehicle-type-btn {
        padding: 16px;
    }
}

/* Modal de llegada estilo Google Maps */
.arrival-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: fadeIn 0.3s ease-out;
}

.arrival-panel {
    background: #fff;
    width: 100%;
    max-width: 100%;
    border-radius: 24px 24px 0 0;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}

.arrival-handle {
    width: 40px;
    height: 4px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    margin: 12px auto;
    cursor: grab;
}

.arrival-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 24px;
    color: #000;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
    z-index: 10;
}

.arrival-close:hover {
    background: rgba(0, 0, 0, 0.05);
}

.arrival-content {
    padding: 24px 20px 32px;
}

.arrival-title {
    font-size: 28px;
    font-weight: 700;
    color: #000;
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.arrival-address {
    font-size: 16px;
    color: #666;
    margin: 0 0 24px 0;
    line-height: 1.4;
}

.arrival-photos-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 24px;
}

.arrival-photo-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.arrival-photo-label {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.arrival-photo-upload {
    position: relative;
    width: 100%;
    min-height: 120px;
    border: 2px dashed #ddd;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    background: #f9f9f9;
    overflow: hidden;
}

.arrival-photo-upload:hover {
    border-color: #0066ff;
    background: #f0f5ff;
}

.arrival-photo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #666;
    font-size: 14px;
}

.arrival-photo-placeholder svg {
    color: #999;
}

.arrival-photo-preview {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 120px;
}

.arrival-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.arrival-photo-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 5;
}

.arrival-photo-remove:hover {
    background: rgba(0, 0, 0, 0.8);
}

.arrival-notas-section {
    margin-bottom: 24px;
}

.arrival-notas-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
}

.arrival-notas-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    min-height: 72px;
    box-sizing: border-box;
}

.arrival-notas-input:focus {
    outline: none;
    border-color: #0066ff;
    box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.15);
}

.arrival-notas-input::placeholder {
    color: #999;
}

.arrival-btn-finalizar {
    width: 100%;
    padding: 16px;
    background: #0066ff;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 8px;
}

.arrival-btn-finalizar:hover:not(:disabled) {
    background: #0052cc;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.3);
}

.arrival-btn-finalizar:active:not(:disabled) {
    transform: translateY(0);
}

.arrival-btn-finalizar:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Animaciones para notificaciones de nuevas rutas */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes slideUpNotification {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
}

.arrival-cantidades-section {
    margin-top: 24px;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100%;
}

.arrival-cantidades-title {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    margin: 20px 0 16px 0;
}

.arrival-cantidades-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 100%;
}

.arrival-cantidad-item {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.arrival-cantidad-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    margin-bottom: 8px;
    display: block;
    font-weight: 500;
}

.arrival-cantidad-input {
    width: 100%;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.arrival-cantidad-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.arrival-cantidad-input:focus {
    outline: none;
    border-color: #2031E6;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(32, 49, 230, 0.2);
}

.arrival-cantidad-input:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
}

/* Responsive para cantidades */
@media (max-width: 768px) {
    .arrival-cantidades-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

.arrival-cantidad-item {
    margin: 0;
}

.arrival-cantidad-label {
    color: #333;
    font-size: 13px;
    margin-bottom: 8px;
    display: block;
    font-weight: 500;
}

.arrival-cantidad-input {
    width: 100%;
    padding: 10px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    color: #000;
    font-size: 14px;
    box-sizing: border-box;
}

.arrival-cantidad-input:focus {
    outline: none;
    border-color: #0066ff;
    background: #fff;
}

@media (max-width: 768px) {
    .arrival-cantidades-grid {
        grid-template-columns: 1fr;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .arrival-panel {
        max-height: 90vh;
    }
    
    .arrival-title {
        font-size: 24px;
    }
    
    .arrival-address {
        font-size: 15px;
    }
    
    .arrival-cantidades-grid {
        grid-template-columns: 1fr;
    }
}

.finalizar-ruta-modal {
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-sizing: border-box;
    overflow-x: hidden;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Configuración de campos del modal de finalización - Tema Oscuro (Default) */
.config-campos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 8px;
}

/* Label principal de la sección - Tema Oscuro */
#grupoConfigCampos > label,
#grupoConfigCampos label:first-child,
#grupoConfigCampos .form-group > label {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 600;
    margin-bottom: 12px;
    display: block;
    font-size: 14px;
}

.config-campo-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.config-campo-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.config-campo-item:active {
    transform: scale(0.98);
}

.config-campo-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #2031E6;
    flex-shrink: 0;
}

.config-campo-item span {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    user-select: none;
    line-height: 1.4;
}

.config-campo-item input[type="checkbox"]:checked + span {
    color: #fff;
    font-weight: 500;
}

.config-campo-item input[type="checkbox"]:checked ~ span {
    color: #fff;
    font-weight: 500;
}

/* Tema Claro para configuración de campos */
body.light-theme #grupoConfigCampos > label,
body.light-theme #grupoConfigCampos label:first-child,
body.light-theme #grupoConfigCampos .form-group > label,
[data-theme="light"] #grupoConfigCampos > label,
[data-theme="light"] #grupoConfigCampos label:first-child,
[data-theme="light"] #grupoConfigCampos .form-group > label {
    color: rgba(0, 0, 0, 0.9) !important;
}

body.light-theme .config-campo-item,
[data-theme="light"] .config-campo-item {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

body.light-theme .config-campo-item:hover,
[data-theme="light"] .config-campo-item:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}

body.light-theme .config-campo-item:active,
[data-theme="light"] .config-campo-item:active {
    background: rgba(0, 0, 0, 0.07) !important;
    transform: scale(0.98);
}

body.light-theme .config-campo-item span,
[data-theme="light"] .config-campo-item span {
    color: rgba(0, 0, 0, 0.8) !important;
}

body.light-theme .config-campo-item input[type="checkbox"]:checked + span,
[data-theme="light"] .config-campo-item input[type="checkbox"]:checked + span {
    color: #000 !important;
    font-weight: 500;
}

body.light-theme .config-campo-item input[type="checkbox"]:checked ~ span,
[data-theme="light"] .config-campo-item input[type="checkbox"]:checked ~ span {
    color: #000 !important;
    font-weight: 500;
}

body.light-theme .config-campo-item input[type="checkbox"],
[data-theme="light"] .config-campo-item input[type="checkbox"] {
    accent-color: #2031E6;
}

@media (max-width: 768px) {
    .config-campos-grid {
        grid-template-columns: 1fr;
    }
}

.modal-header h2 {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 32px;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.3s;
    line-height: 1;
    padding: 0;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.finalizar-ruta-steps {
    padding: 24px;
}

.step-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.step-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
    transition: all 0.3s;
}

.step-number.active {
    background: #0066ff;
    border-color: #0066ff;
    color: #fff;
}

.step-header h3 {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.step-description {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    margin: 0 0 20px 0;
}

.step-content {
    flex: 1;
}

.form-control {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-family: inherit;
    transition: all 0.3s;
    box-sizing: border-box;
    resize: vertical;
}

.form-control:focus {
    outline: none;
    border-color: #0066ff;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
}

.form-control::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.photo-upload-area {
    position: relative;
    width: 100%;
    min-height: 300px;
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    max-width: 100%;
}

.photo-upload-area:hover {
    border-color: rgba(0, 102, 255, 0.5);
    background: rgba(255, 255, 255, 0.05);
}

.photo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 40px;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
}

.photo-placeholder svg {
    color: rgba(255, 255, 255, 0.3);
}

.photo-placeholder p {
    margin: 0;
    font-size: 14px;
}

.photo-preview {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
}

.photo-preview img {
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
    border-radius: 8px;
    box-sizing: border-box;
}

.btn-remove-photo {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 107, 107, 0.9);
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    line-height: 1;
    padding: 0;
}

.btn-remove-photo:hover {
    background: #ff6b6b;
    transform: scale(1.1);
}

.step-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.step-actions .btn {
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: none;
    transition: all 0.3s;
}

.step-actions .btn-primary {
    background: #0066ff;
    color: #fff;
}

.step-actions .btn-primary:hover {
    background: #0052cc;
}

.step-actions .btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.step-actions .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.step-actions .btn-success {
    background: #00ff88;
    color: #000;
    font-weight: 700;
}

.step-actions .btn-success:hover {
    background: #00e677;
}

.btn-completar {
    background: rgba(0, 255, 136, 0.2);
    color: #00ff88;
    border: 1px solid rgba(0, 255, 136, 0.3);
}

.btn-completar:hover {
    background: rgba(0, 255, 136, 0.3);
}

/* Responsive para modal de finalización */
@media (max-width: 768px) {
    .finalizar-ruta-modal {
        width: 95%;
        max-width: 95%;
        max-height: 95vh;
        margin: 10px;
    }

    .modal-header {
        padding: 16px;
        flex-wrap: wrap;
        gap: 12px;
    }

    .modal-header h2 {
        font-size: 18px;
        flex: 1;
        min-width: 0;
    }

    .modal-close {
        width: 32px;
        height: 32px;
        font-size: 24px;
    }

    .finalizar-ruta-steps {
        padding: 16px;
    }

    .step-container {
        gap: 16px;
    }

    .step-header {
        gap: 12px;
        flex-wrap: wrap;
    }

    .step-number {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .step-header h3 {
        font-size: 16px;
        flex: 1;
        min-width: 0;
    }

    .step-description {
        font-size: 13px;
        margin-bottom: 16px;
    }

    .photo-upload-area {
        min-height: 250px;
        max-width: 100%;
    }

    .photo-placeholder {
        padding: 30px 20px;
        gap: 12px;
    }

    .photo-placeholder svg {
        width: 48px;
        height: 48px;
    }

    .photo-placeholder p {
        font-size: 13px;
    }

    .photo-preview {
        min-height: 250px;
    }

    .photo-preview img {
        max-height: 300px;
    }

    .btn-remove-photo {
        top: 8px;
        right: 8px;
        width: 32px;
        height: 32px;
        font-size: 20px;
    }

    .step-actions {
        flex-direction: column;
        gap: 8px;
    }

    .step-actions .btn {
        width: 100%;
        padding: 12px 20px;
        font-size: 14px;
    }

    textarea.form-control {
        width: 100%;
        box-sizing: border-box;
        padding: 12px;
        font-size: 14px;
    }
}

/* Responsive para modal de finalización en pantallas muy pequeñas */
@media (max-width: 480px) {
    .finalizar-ruta-modal {
        width: 98%;
        max-width: 98%;
        max-height: 98vh;
        margin: 5px;
        border-radius: 12px;
    }

    .modal-header {
        padding: 12px;
    }

    .modal-header h2 {
        font-size: 16px;
    }

    .modal-close {
        width: 28px;
        height: 28px;
        font-size: 20px;
    }

    .finalizar-ruta-steps {
        padding: 12px;
    }

    .step-container {
        gap: 12px;
    }

    .step-header {
        gap: 10px;
    }

    .step-number {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .step-header h3 {
        font-size: 15px;
    }

    .step-description {
        font-size: 12px;
        margin-bottom: 12px;
    }

    .photo-upload-area {
        min-height: 200px;
    }

    .photo-placeholder {
        padding: 20px 16px;
        gap: 10px;
    }

    .photo-placeholder svg {
        width: 40px;
        height: 40px;
    }

    .photo-placeholder p {
        font-size: 12px;
    }

    .photo-preview {
        min-height: 200px;
    }

    .photo-preview img {
        max-height: 250px;
    }

    .btn-remove-photo {
        top: 6px;
        right: 6px;
        width: 28px;
        height: 28px;
        font-size: 18px;
    }

    .step-actions .btn {
        padding: 10px 16px;
        font-size: 13px;
    }

    textarea.form-control {
        padding: 10px;
        font-size: 13px;
    }
}

/* ==================== ESTILOS PARA PANEL DE RUTAS EN MAPA ==================== */

.rutas-panel {
    position: fixed;
    top: 80px;
    right: 20px;
    width: 320px;
    max-height: calc(100vh - 120px);
    background: rgba(26, 26, 26, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
   
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.rutas-panel.collapsed {
    transform: translateX(calc(100% - 60px));
    max-width: fit-content;
}

.rutas-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.rutas-panel-header h3 {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    flex: 1;
}

.rutas-panel-filters {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.rutas-panel-filters label {
    display: block;
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 8px;
    font-weight: 500;
}

.rutas-panel-filters input[type="date"] {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 0.9em;
    font-family: inherit;
    box-sizing: border-box;
    transition: all 0.3s;
}

.rutas-panel-filters input[type="date"]:focus {
    outline: none;
    border-color: #0066ff;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.2);
}

.rutas-panel-filters input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

.rutas-panel.collapsed .rutas-panel-filters {
    display: none;
}

.panel-toggle {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.3s;
    flex-shrink: 0;
    margin-left: 12px;
}

.panel-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.rutas-panel.collapsed .panel-toggle svg {
    transform: rotate(180deg);
}

.rutas-panel.collapsed .rutas-list {
    display: none;
}

.rutas-panel.collapsed .rutas-panel-header {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.rutas-panel.collapsed .rutas-panel-header h3 {
    display: none;
}

.rutas-panel.collapsed {
    transform: translateX(calc(100% - 60px));
    max-width: fit-content;
    width: auto;
}

.rutas-panel.collapsed .rutas-list {
    display: none;
}

.rutas-panel.collapsed .rutas-panel-header {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.rutas-panel.collapsed .rutas-panel-header h3 {
    display: none;
}

/* Estilos para botón deshabilitado */
.btn.disabled {
    background: rgba(128, 128, 128, 0.3) !important;
    color: rgba(255, 255, 255, 0.4) !important;
    border-color: rgba(128, 128, 128, 0.3) !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

.btn.disabled:hover {
    background: rgba(128, 128, 128, 0.3) !important;
    transform: none !important;
}

/* Estilos para marcador de vehículo */
.carrito-marker {
    /* NO usar position fixed o absolute aquí - el marcador debe ser posicionado por MapLibre */
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    /* El tamaño se define en JavaScript, no forzar aquí */
}

.carrito-marker:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

.carrito-marker svg {
    display: block !important;
}

@keyframes vehiculoFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    25% {
        transform: translateY(-4px) rotate(-1deg);
    }
    50% {
        transform: translateY(-6px) rotate(0deg);
    }
    75% {
        transform: translateY(-4px) rotate(1deg);
    }
}

@keyframes carritoFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    25% {
        transform: translateY(-4px) rotate(-2deg);
    }
    50% {
        transform: translateY(-6px) rotate(0deg);
    }
    75% {
        transform: translateY(-4px) rotate(2deg);
    }
}

.rutas-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ruta-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.3s;
}

.ruta-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(0, 102, 255, 0.5);
    transform: translateY(-2px);
}

.ruta-item.selected {
    background: rgba(0, 102, 255, 0.15);
    border-color: #0066ff;
}

.ruta-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.ruta-item-header h4 {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    flex: 1;
}

.ruta-item-direccion {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin: 8px 0 4px 0;
    line-height: 1.4;
}

.ruta-item-fecha {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    margin: 0;
}

.ruta-item-observaciones {
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    margin: 8px 0 0 0;
    padding: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid rgba(0, 102, 255, 0.5);
    border-radius: 4px;
    line-height: 1.4;
}

.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.5);
}

.loading-state {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.5);
}

.ruta-marker {
    cursor: pointer;
}

.destination-marker {
    z-index: 1000;
}

/* Responsive para panel de rutas */
@media (max-width: 768px) {
    .rutas-panel {
        width: min(300px, calc(100vw - 24px));
        left: auto;
        right: 12px;
        top: 60px;
        max-height: min(42vh, calc(100vh - 220px));
        border-radius: 12px;
    }
    
    .rutas-panel-header {
        padding: 16px;
    }
    
    .rutas-panel-header h3 {
        font-size: 16px;
    }
    
    .panel-toggle {
        width: 28px;
        height: 28px;
        margin-left: 8px;
    }
    
    .panel-toggle svg {
        width: 16px;
        height: 16px;
    }
    
    .rutas-list {
        padding: 12px;
    }
    
    .ruta-item {
        padding: 12px;
    }
    
    .ruta-item-header h4 {
        font-size: 15px;
    }
    
    .ruta-item-direccion {
        font-size: 13px;
    }
    
    .ruta-item-fecha {
        font-size: 11px;
    }
    
    .rutas-panel.collapsed {
        transform: translateX(calc(100% - 60px));
        max-width: fit-content;
    }
    
    .local-detail-panel {
        left: 0;
        right: 0;
        max-height: 70vh;
    }
    
    .local-detail-actions {
        flex-direction: column;
        gap: 8px;
    }
    
    .local-info-section {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .btn-action {
        width: 100%;
        padding: 12px;
        font-size: 13px;
    }
}

/* ==================== ESTILOS PARA USUARIOS ==================== */

.usuarios-panel {
    background: rgba(26, 26, 26, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    margin: 20px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 100px);
    overflow: hidden;
}

.usuarios-header {
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.usuarios-header h3 {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.usuarios-list {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.usuario-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.usuario-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(0, 102, 255, 0.3);
    transform: translateY(-2px);
}

.usuario-item.inactive {
    opacity: 0.6;
}

.usuario-info {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.usuario-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
}

.usuario-details {
    flex: 1;
}

.usuario-details h4 {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px 0;
}

.usuario-email {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    margin: 0 0 8px 0;
}

.usuario-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.usuario-extra {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
}

.badge-planta {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
    display: inline-block;
}

.badge-conductor {
    background: rgba(0, 102, 255, 0.2);
    color: #0066ff;
    border: 1px solid rgba(0, 102, 255, 0.3);
}

.badge-operador {
    background: rgba(0, 102, 255, 0.2);
    color: #0066ff;
    border: 1px solid rgba(0, 102, 255, 0.3);
}

.badge-asesor {
    background: rgba(0, 255, 136, 0.2);
    color: #00ff88;
    border: 1px solid rgba(0, 255, 136, 0.3);
}

.badge-administrador {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.status-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.status-badge.active {
    background: rgba(0, 255, 136, 0.2);
    color: #00ff88;
    border: 1px solid rgba(0, 255, 136, 0.3);
}

.status-badge.inactive {
    background: rgba(255, 107, 107, 0.2);
    color: #ff6b6b;
    border: 1px solid rgba(255, 107, 107, 0.3);
}

.usuario-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Switch Toggle */
.switch-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.2);
    transition: 0.3s;
    border-radius: 26px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    transition: 0.3s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #00ff88;
}

input:checked + .slider:before {
    transform: translateX(24px);
}

.switch-label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 500;
}

/* Page Header */
.page-header {
    margin-bottom: 24px;
}

.page-header h1 {
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    margin: 0;
}

/* Responsive para usuarios */
@media (max-width: 768px) {
    .main-content {
        padding: 10px;
        padding-top: 80px;
    }
    
    .page-header {
        margin-bottom: 16px;
    }
    
    .page-header h1 {
        font-size: 24px;
    }
    
    .usuarios-panel {
        margin: 10px;
        max-height: calc(100vh - 100px);
        border-radius: 12px;
    }
    
    .usuarios-header {
        padding: 16px;
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .usuarios-header h3 {
        font-size: 18px;
    }
    
    .usuarios-header .btn-primary {
        padding: 10px 14px;
        font-size: 13px;
        white-space: nowrap;
    }
    
    .usuarios-list {
        padding: 12px;
    }
    
    .usuario-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 12px;
    }
    
    .usuario-info {
        width: 100%;
        gap: 12px;
    }
    
    .usuario-avatar {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    
    .usuario-details h4 {
        font-size: 15px;
    }
    
    .usuario-email {
        font-size: 13px;
    }
    
    .usuario-meta {
        margin-top: 8px;
        gap: 6px;
    }
    
    .badge,
    .status-badge {
        font-size: 11px;
        padding: 4px 10px;
    }
    
    .usuario-actions {
        width: 100%;
        justify-content: space-between;
        gap: 8px;
    }
    
    .usuario-actions .switch {
        width: 45px;
        height: 24px;
    }
    
    .usuario-actions .slider:before {
        width: 18px;
        height: 18px;
    }
    
    input:checked + .slider:before {
        transform: translateX(21px);
    }
    
    .usuario-actions .btn-icon {
        width: 32px;
        height: 32px;
    }
    
    .usuario-actions .btn-icon svg {
        width: 14px;
        height: 14px;
    }
    
    /* Modal responsive */
    .modal-content {
        max-width: 95%;
        margin: 10px;
    }
    
    .modal-header {
        padding: 20px;
    }
    
    .modal-header h3 {
        font-size: 20px;
    }
    
    .modal-body {
        padding: 20px;
    }
    
    .form-group {
        margin-bottom: 16px;
    }
    
    .form-group label {
        font-size: 13px;
    }
    
    .form-group input,
    .form-group select {
        font-size: 14px;
        padding: 10px 12px;
    }
    
    .form-actions {
        flex-direction: column;
        gap: 8px;
    }
    
    .form-actions button {
        width: 100%;
    }
    
    .switch-container {
        flex-wrap: wrap;
    }
    
    .switch-label {
        font-size: 13px;
    }
}

/* Responsive para usuarios en pantallas muy pequeñas */
@media (max-width: 480px) {
    .main-content {
        padding: 8px;
        padding-top: 70px;
    }
    
    .page-header h1 {
        font-size: 20px;
    }
    
    /* Historial responsive para pantallas muy pequeñas */
    .historial-content {
        padding: 12px;
    }
    
    .historial-item {
        padding: 12px;
    }
    
    .historial-header h3 {
        font-size: 15px;
    }
    
    .historial-header p {
        font-size: 12px;
    }
    
    .historial-stats {
        gap: 8px;
        flex-direction: column;
    }
    
    .historial-stats span {
        width: 100%;
        text-align: center;
        font-size: 11px;
        padding: 8px;
    }
    
    .historial-filters {
        gap: 6px;
    }
    
    .filter-input {
        font-size: 14px;
        padding: 10px 12px;
    }
    
    .filter-btn {
        padding: 10px 16px;
        font-size: 13px;
    }
    
    .usuarios-panel {
        margin: 8px;
        max-height: calc(100vh - 90px);
        border-radius: 10px;
    }
    
    .usuarios-header {
        padding: 12px;
    }
    
    .usuarios-header h3 {
        font-size: 16px;
    }
    
    .usuarios-header .btn-primary {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .usuarios-list {
        padding: 10px;
    }
    
    .usuario-item {
        padding: 10px;
        gap: 10px;
    }
    
    .usuario-avatar {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
    
    .usuario-details h4 {
        font-size: 14px;
    }
    
    .usuario-email {
        font-size: 12px;
    }
    
    .badge,
    .status-badge {
        font-size: 10px;
        padding: 3px 8px;
    }
    
    .usuario-actions {
        gap: 6px;
    }
    
    .usuario-actions .btn-icon {
        width: 28px;
        height: 28px;
    }
    
    .modal-content {
        max-width: 98%;
        margin: 5px;
    }
    
    .modal-header {
        padding: 16px;
    }
    
    .modal-header h3 {
        font-size: 18px;
    }
    
    .modal-body {
        padding: 16px;
    }
    
    .form-group input,
    .form-group select {
        font-size: 13px;
        padding: 8px 10px;
    }
}

/* Interruptor de Tema */
.theme-toggle-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.theme-toggle-container:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

.theme-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.theme-icon svg {
    width: 20px;
    height: 20px;
    transition: all 0.3s ease;
    display: block;
}

.theme-icon-sun {
    color: rgba(255, 255, 255, 0.5);
}

.theme-icon-moon {
    color: rgba(255, 255, 255, 0.5);
}

.theme-icon-sun.active {
    color: #ffd700;
}

.theme-icon-moon.active {
    color: #0066ff;
}

.theme-toggle-container .switch {
    position: relative;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
    margin: 0;
}

.theme-toggle-container .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.theme-toggle-container .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.2);
    transition: 0.3s;
    border-radius: 28px;
}

.theme-toggle-container .slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.theme-toggle-container input:checked + .slider {
    background-color: #0066ff;
}

.theme-toggle-container input:checked + .slider:before {
    transform: translateX(24px);
}

/* Tema Claro */
[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-tertiary: #e8e8e8;
    --text-primary: #1a1a1a;
    --text-secondary: #4a4a4a;
    --text-tertiary: #6a6a6a;
    --border-color: rgba(0, 0, 0, 0.1);
    --shadow: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] body {
    background: #f5f5f5;
    color: var(--text-primary);
}

[data-theme="light"] .sidebar {
    background: rgba(255, 255, 255, 0.98);
    border-right: 1px solid var(--border-color);
    box-shadow: 4px 0 24px var(--shadow);
}

[data-theme="light"] .sidebar-header {
    border-bottom: 1px solid var(--border-color);
}

[data-theme="light"] .logo {
    color: var(--text-primary);
}

[data-theme="light"] .sidebar-toggle {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-primary);
}

[data-theme="light"] .sidebar-toggle:hover {
    background: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .nav-item {
    color: var(--text-secondary);
}

[data-theme="light"] .nav-item:hover {
    background: rgba(0, 102, 255, 0.1);
    color: #0066ff;
}

[data-theme="light"] .nav-item.active {
    background: rgba(0, 102, 255, 0.15);
    color: #0066ff;
    border-left-color: #0066ff;
}

[data-theme="light"] .sidebar-footer {
    border-top: 1px solid var(--border-color);
}

[data-theme="light"] .user-name {
    color: var(--text-primary);
}

[data-theme="light"] .user-role {
    color: var(--text-primary);
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.15), rgba(0, 82, 204, 0.15));
    border-color: rgba(0, 102, 255, 0.3);
}

[data-theme="light"] .theme-toggle-container {
    background: rgba(0, 0, 0, 0.05);
    border-color: var(--border-color);
}

[data-theme="light"] .theme-toggle-container:hover {
    background: rgba(0, 0, 0, 0.08);
    border-color: var(--border-color);
}

[data-theme="light"] .theme-icon {
    color: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .theme-icon-sun {
    color: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .theme-icon-moon {
    color: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .theme-icon-sun.active {
    color: #ff9500;
}

[data-theme="light"] .theme-icon-moon.active {
    color: #0066ff;
}

[data-theme="light"] .theme-toggle-container .slider {
    background-color: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .theme-toggle-container .slider:before {
    background-color: white;
}

[data-theme="light"] .theme-toggle-container input:checked + .slider {
    background-color: #0066ff;
}

[data-theme="light"] .btn-logout {
    background: rgba(255, 59, 48, 0.1);
    color: #ff3b30;
    border: 1px solid rgba(255, 59, 48, 0.2);
}

[data-theme="light"] .btn-logout:hover {
    background: rgba(255, 59, 48, 0.15);
    border-color: rgba(255, 59, 48, 0.3);
}

[data-theme="light"] .main-content {
    background: var(--bg-secondary) !important;
}

[data-theme="light"] .page-section {
    background: var(--bg-secondary) !important;
    color: var(--text-primary);
}

[data-theme="light"] .section-container {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color);
}

[data-theme="light"] .section-header h2 {
    color: var(--text-primary);
}

[data-theme="light"] .section-header p {
    color: var(--text-secondary);
}

[data-theme="light"] .stat-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .stat-label {
    color: var(--text-secondary);
}

[data-theme="light"] .stat-value {
    color: var(--text-primary) !important;
}

/* Estilos adicionales para estadisticas.php en tema claro */
[data-theme="light"] .stat-icon[style*="background: rgba(0, 102, 255"] {
    background: rgba(0, 102, 255, 0.1) !important;
}

[data-theme="light"] .stat-icon[style*="background: rgba(0, 255, 136"] {
    background: rgba(0, 255, 136, 0.1) !important;
}

[data-theme="light"] .stat-icon[style*="background: rgba(255, 193, 7"] {
    background: rgba(255, 193, 7, 0.1) !important;
}

[data-theme="light"] .config-section {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .config-section h3 {
    color: var(--text-primary);
}

[data-theme="light"] .config-item label {
    color: var(--text-secondary);
}

[data-theme="light"] .config-input {
    background: rgba(0, 0, 0, 0.05);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="light"] .config-input:focus {
    background: rgba(0, 0, 0, 0.08);
    border-color: #0066ff;
}

[data-theme="light"] .btn-primary {
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    color: #fff;
}

[data-theme="light"] .btn-secondary {
    background: rgba(255, 59, 48, 0.9);
    color: #fff;
}

[data-theme="light"] .info-label {
    color: var(--text-secondary);
}

[data-theme="light"] .info-value {
    color: var(--text-primary);
}

[data-theme="light"] ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(0, 102, 255, 0.3);
    border: 2px solid rgba(245, 245, 245, 0.5);
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 102, 255, 0.5);
}

[data-theme="light"] * {
    scrollbar-color: rgba(0, 102, 255, 0.3) rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .modal-overlay {
    background: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .modal-content {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 32px var(--shadow);
}

[data-theme="light"] .modal-header {
    border-bottom: 1px solid var(--border-color);
}

[data-theme="light"] .modal-header h3 {
    color: var(--text-primary);
}

[data-theme="light"] .modal-close {
    color: var(--text-secondary);
}

[data-theme="light"] .modal-close:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .action-modal-content {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.18);
}
[data-theme="light"] .action-modal-header h3 {
    color: #0f172a;
}
[data-theme="light"] .action-modal-message {
    color: #475569;
}

[data-theme="light"] .share-companions-help {
    color: var(--text-secondary);
}

[data-theme="light"] .share-companion-input {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="light"] .share-companion-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.75;
}

[data-theme="light"] .share-companion-input:focus {
    background: var(--bg-primary);
    border-color: #0066ff;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.12);
}

[data-theme="light"] .share-companion-remove-btn {
    background: rgba(15, 23, 42, 0.04);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="light"] .share-companion-remove-btn:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
    color: #dc2626;
}

[data-theme="light"] .share-companion-add-btn,
[data-theme="light"] #btnCancelarShareCompanions {
    background: rgba(15, 23, 42, 0.04);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="light"] .share-companion-add-btn:hover,
[data-theme="light"] #btnCancelarShareCompanions:hover {
    background: rgba(15, 23, 42, 0.08);
    border-color: rgba(15, 23, 42, 0.14);
}

[data-theme="light"] .data-table {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .data-table thead {
    background: var(--bg-secondary);
}

[data-theme="light"] .data-table th {
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="light"] .data-table td {
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="light"] .data-table tbody tr:hover {
    background: rgba(0, 102, 255, 0.05);
}

[data-theme="light"] .form-group label {
    color: var(--text-secondary);
}

[data-theme="light"] .form-group input,
[data-theme="light"] .form-group select,
[data-theme="light"] .form-group textarea {
    background: rgba(0, 0, 0, 0.05);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="light"] .form-group input:focus,
[data-theme="light"] .form-group select:focus,
[data-theme="light"] .form-group textarea:focus {
    background: rgba(0, 0, 0, 0.08);
    border-color: #0066ff;
}

[data-theme="light"] .filter-input {
    background: rgba(0, 0, 0, 0.05);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="light"] .filter-btn {
    background: rgba(0, 102, 255, 0.1);
    color: #0066ff;
    border: 1px solid rgba(0, 102, 255, 0.2);
}

[data-theme="light"] .filter-btn:hover {
    background: rgba(0, 102, 255, 0.15);
}

[data-theme="light"] .loading-state {
    color: var(--text-secondary);
}

[data-theme="light"] .empty-state {
    color: var(--text-secondary);
}

[data-theme="light"] .empty-state p {
    color: var(--text-primary);
}

[data-theme="light"] .empty-state h3 {
    color: var(--text-primary);
}

/* Rutas List - Tema claro */
[data-theme="light"] .rutas-list {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    background: var(--bg-primary);
}

[data-theme="light"] .rutas-list-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .rutas-list-card h3 {
    color: var(--text-primary);
}

[data-theme="light"] .rutas-form-card,
[data-theme="light"] .programacion-recojo-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .asignar-rutas-tabs {
    border-bottom-color: var(--border-color);
}

[data-theme="light"] .asignar-tab {
    color: var(--text-secondary);
}

[data-theme="light"] .asignar-tab:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

[data-theme="light"] .asignar-tab.active {
    color: var(--text-primary);
    background: var(--bg-secondary);
    border-bottom-color: var(--accent-color, #4f9cf9);
}

[data-theme="light"] .asignar-panel-card .panel-desc,
[data-theme="light"] .programacion-recojo-card .panel-desc {
    color: var(--text-secondary);
}

[data-theme="light"] .programacion-recojo-card .prog-item {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="light"] .programacion-recojo-card .prog-item:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: var(--border-color);
}

[data-theme="light"] .programacion-recojo-card .prog-item .prog-title {
    color: var(--text-primary);
}

[data-theme="light"] .programacion-recojo-card .prog-item .prog-meta-item {
    color: var(--text-secondary);
}

[data-theme="light"] .programacion-recojo-card .prog-item .prog-badge-frecuencia {
    background: rgba(0, 102, 255, 0.12);
    color: #0066cc;
}

[data-theme="light"] .badge-secondary {
    background: rgba(148, 163, 184, 0.14);
    color: #64748b;
    border: 1px solid rgba(148, 163, 184, 0.22);
}

[data-theme="light"] .restricciones-list-hint {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.14);
    color: #475569;
}

[data-theme="light"] .restricciones-list-hint-icon {
    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
}

[data-theme="light"] .restriccion-item-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .restriccion-item-card:hover {
    border-color: rgba(37, 99, 235, 0.22);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.1);
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(241,245,249,0.98));
}

[data-theme="light"] .restriccion-item-title {
    color: #0f172a;
}

[data-theme="light"] .restriccion-chip-vehicle {
    background: rgba(148, 163, 184, 0.12);
    color: #334155;
    border-color: rgba(148, 163, 184, 0.2);
}

[data-theme="light"] .restriccion-chip-trazo {
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
    border-color: rgba(37, 99, 235, 0.16);
}

[data-theme="light"] .restriccion-chip-box {
    background: rgba(245, 158, 11, 0.1);
    color: #b45309;
    border-color: rgba(245, 158, 11, 0.16);
}

[data-theme="light"] .restriccion-item-meta {
    color: #475569;
}

[data-theme="light"] .restriccion-meta-label {
    color: #64748b;
}

[data-theme="light"] .restriccion-meta-separator {
    color: rgba(100, 116, 139, 0.45);
}

[data-theme="light"] .restriccion-item-hint {
    color: #64748b;
}

[data-theme="light"] .restriccion-switch-track {
    background: rgba(148, 163, 184, 0.18);
    border-color: rgba(148, 163, 184, 0.24);
}

[data-theme="light"] .restriccion-switch-thumb {
    background: #ffffff;
}

[data-theme="light"] .restriccion-switch.is-on .restriccion-switch-track {
    background: #16a34a;
    border-color: #15803d;
    box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.16), 0 8px 18px rgba(22, 163, 74, 0.22);
}

[data-theme="light"] .restriccion-switch.is-on .restriccion-switch-thumb {
    background: #ffffff;
}

[data-theme="light"] .restriccion-switch.is-off .restriccion-switch-track {
    background: #dc2626;
    border-color: #b91c1c;
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.12), 0 8px 18px rgba(220, 38, 38, 0.18);
}

[data-theme="light"] .restriccion-action-btn {
    background: rgba(15, 23, 42, 0.04);
    color: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.18);
}

[data-theme="light"] .restriccion-action-btn:hover {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.16);
}

[data-theme="light"] .programacion-recojo-card .prog-item .prog-badge-activa {
    background: rgba(0, 200, 100, 0.15);
    color: #00884a;
}

[data-theme="light"] .programacion-recojo-card .prog-item .prog-badge-inactiva {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-secondary);
}

[data-theme="light"] .programacion-recojo-card .prog-item .btn-prog-edit {
    background: rgba(0, 0, 0, 0.08);
    color: var(--text-primary);
}

[data-theme="light"] .programacion-recojo-card .prog-item .btn-prog-edit:hover {
    background: rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .programacion-recojo-card .prog-item .btn-prog-delete {
    background: rgba(255, 80, 80, 0.12);
    color: #c62828;
}

[data-theme="light"] .programacion-recojo-card .prog-item .btn-prog-delete:hover {
    background: rgba(255, 80, 80, 0.2);
}

[data-theme="light"] .programacion-recojo-card .prog-item .prog-actions {
    border-top-color: var(--border-color);
}

[data-theme="light"] .programacion-block {
    border-top-color: var(--border-color);
}

[data-theme="light"] .programacion-block h4 {
    color: var(--text-primary);
}

[data-theme="light"] .programacion-block p {
    color: var(--text-secondary);
}

.programacion-recojo-card .section-desc {
    color: rgba(255,255,255,0.7);
    font-size: 0.9em;
    margin: -8px 0 16px 0;
}

.programacion-recojo-card .form-row-2,
.asignar-rutas-page .form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.programacion-recojo-card .form-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

.programacion-recojo-card .dias-semana-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
}

.programacion-recojo-card .dias-semana-checkboxes label.checkbox-inline,
.programacion-recojo-card label.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: normal;
    cursor: pointer;
}

.programacion-recojo-card .generar-asignaciones-box {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.programacion-recojo-card .generar-asignaciones-box h4,
.programacion-recojo-card .programaciones-list-wrap h4 {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.programacion-recojo-card .generar-asignaciones-box p,
.programacion-recojo-card .programaciones-list-wrap p {
    color: rgba(255,255,255,0.7);
    font-size: 0.85em;
    margin: 0 0 12px 0;
}

.programacion-recojo-card .programaciones-list-wrap {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.programacion-recojo-card .programaciones-list {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Tarjeta de programación: estética y responsive */
.programacion-recojo-card .prog-item {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: background 0.2s, border-color 0.2s;
}

.programacion-recojo-card .prog-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

.programacion-recojo-card .prog-item .prog-info {
    flex: 1 1 200px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.programacion-recojo-card .prog-item .prog-title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
    margin: 0;
}

.programacion-recojo-card .prog-item .prog-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
}

.programacion-recojo-card .prog-item .prog-meta-item {
    color: rgba(255, 255, 255, 0.6);
}

.programacion-recojo-card .prog-item .prog-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
}

.programacion-recojo-card .prog-item .prog-badge-frecuencia {
    background: rgba(0, 102, 255, 0.2);
    color: #5eb3ff;
}

.programacion-recojo-card .prog-item .prog-badge-activa {
    background: rgba(0, 255, 136, 0.2);
    color: #00e68a;
}

.programacion-recojo-card .prog-item .prog-badge-inactiva {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
}

.programacion-recojo-card .prog-item .prog-actions {
    display: flex;
    flex-shrink: 0;
    gap: 8px;
    align-items: center;
}

.programacion-recojo-card .prog-item .btn-prog {
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: none;
    transition: background 0.2s, color 0.2s;
    min-height: 36px;
}

.programacion-recojo-card .prog-item .btn-prog-edit {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.programacion-recojo-card .prog-item .btn-prog-edit:hover {
    background: rgba(255, 255, 255, 0.18);
}

.programacion-recojo-card .prog-item .btn-prog-delete {
    background: rgba(255, 107, 107, 0.2);
    color: #ff8a8a;
}

.programacion-recojo-card .prog-item .btn-prog-delete:hover {
    background: rgba(255, 107, 107, 0.3);
}

/* ========== Asignar Rutas: un solo scroll + UX responsive ========== */
.asignar-rutas-page {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.asignar-rutas-page .section-container {
    flex: 0 0 auto;
    padding-bottom: 48px;
}

.asignar-rutas-page .section-header {
    flex-shrink: 0;
    margin-bottom: 20px;
}

.asignar-rutas-page .asignar-rutas-tabs {
    flex-shrink: 0;
    margin-bottom: 24px;
}

.asignar-rutas-page .asignar-panel {
    flex: 1 1 auto;
    min-height: 0;
}

.asignar-rutas-page .rutas-list-card,
.asignar-rutas-page .rutas-form-card,
.asignar-rutas-page .programacion-recojo-card {
    overflow: visible;
}

.asignar-rutas-page .rutas-list {
    overflow: visible;
    max-height: none;
}

.asignar-rutas-page .programaciones-list {
    overflow: visible;
    max-height: none;
}

/* Tabs responsive y touch-friendly */
.asignar-rutas-page .asignar-tab {
    padding: 14px 18px;
    min-height: 48px;
    font-size: 15px;
}

/* Cards con más aire */
.asignar-rutas-page .rutas-form-card,
.asignar-rutas-page .rutas-list-card,
.asignar-rutas-page .programacion-recojo-card {
    padding: 24px;
    border-radius: 12px;
}

.asignar-rutas-page .rutas-list-card h3,
.asignar-rutas-page .rutas-form-card h3 {
    margin-bottom: 8px;
    font-size: 18px;
}

.asignar-rutas-page .ruta-item {
    padding: 16px;
}
.asignar-rutas-page .programaciones-list {
    min-width: 0;
    gap: 14px;
}
.asignar-rutas-page .programaciones-list > * {
    min-width: 0;
}

.asignar-rutas-page .ruta-actions .btn-small {
    padding: 10px 14px;
    font-size: 13px;
    min-height: 40px;
}

.asignar-rutas-page .form-actions .btn-primary,
.asignar-rutas-page .form-actions .btn-secondary {
    min-height: 44px;
    padding: 12px 20px;
    font-size: 15px;
}

.asignar-rutas-page .form-group input,
.asignar-rutas-page .form-group select,
.asignar-rutas-page .form-group textarea {
    min-height: 44px;
    padding: 12px 14px;
}

/* Choices.js en Asignar Rutas (tema oscuro) */
.asignar-rutas-page .choices__inner {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    min-height: 44px !important;
    color: #fff !important;
}
.asignar-rutas-page .choices__list--single .choices__item {
    color: #fff !important;
    opacity: 1 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}
.asignar-rutas-page .choices__list--single .choices__placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
    opacity: 1 !important;
}
.asignar-rutas-page .choices__input {
    background: transparent !important;
    color: #fff !important;
}
.asignar-rutas-page .choices__input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
.asignar-rutas-page .choices[data-type*="select-one"] .choices__item--selectable {
    color: #fff;
}
.asignar-rutas-page .choices__list--dropdown {
    background: rgba(30, 35, 45, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 10px !important;
    z-index: 100;
}
.asignar-rutas-page .choices__list--dropdown .choices__item--selectable {
    color: rgba(255, 255, 255, 0.9);
}
.asignar-rutas-page .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background: rgba(74, 158, 255, 0.25) !important;
    color: #fff;
}
.asignar-rutas-page .choices__item--choice {
    color: rgba(255, 255, 255, 0.9);
}

/* ========== Panel Orden (tema oscuro + UX) ========== */
#panel-orden .asignar-panel-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 24px;
}
#panel-orden .panel-desc {
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 20px;
}
/* Operador y Fecha misma anchura */
#panel-orden .rutas-filters .filters-container-locales {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: end;
    max-width: 560px;
}
#panel-orden .rutas-filters .filter-group-locales {
    min-width: 0;
}
#panel-orden .rutas-filters .filter-input,
#panel-orden .rutas-filters input[type="date"] {
    width: 100%;
    min-height: 44px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 14px;
    box-sizing: border-box;
}
#panel-orden .rutas-filters input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.7;
}
#panel-orden .rutas-list {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
#panel-orden .orden-ruta-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    min-height: 56px;
}
#panel-orden .orden-ruta-item:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.18);
}
/* Badge circular con letra/número (A, B, C...) */
#panel-orden .orden-badge {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(74, 158, 255, 0.25);
    border: 2px solid rgba(74, 158, 255, 0.5);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
/* Contenido: nombre + dirección */
#panel-orden .orden-ruta-content {
    flex: 1;
    min-width: 0;
}
#panel-orden .orden-ruta-nombre {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
}
#panel-orden .orden-ruta-direccion {
    margin: 4px 0 0 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.35;
}
/* Asa de arrastre (≡) */
#panel-orden .orden-drag-handle {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    cursor: grab;
    transition: color 0.2s, background 0.2s;
    -webkit-tap-highlight-color: transparent;
}
#panel-orden .orden-drag-handle:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.08);
}
#panel-orden .orden-drag-handle:active {
    cursor: grabbing;
}
/* Estados de Sortable */
#panel-orden .orden-sortable-ghost {
    opacity: 0.45;
    background: rgba(74, 158, 255, 0.15);
    border-color: rgba(74, 158, 255, 0.4);
}
#panel-orden .orden-sortable-chosen {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(74, 158, 255, 0.35);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
#panel-orden .orden-sortable-drag {
    opacity: 1;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
#panel-orden .empty-state {
    padding: 32px 24px;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.15);
}
#panel-orden .form-actions {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
#panel-orden .form-actions .btn-primary {
    min-height: 48px;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 12px;
}

/* Choices.js en móvil: dropdown visible sin scroll de página */
@media (max-width: 768px) {
    .choices__list--dropdown {
        max-height: 55vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        z-index: 9999 !important;
    }
    .choices {
        overflow: visible !important;
    }
    .choices.is-open .choices__inner {
        position: relative;
        z-index: 9998;
    }
}

.asignar-rutas-page .programacion-block {
    margin-top: 24px;
    padding-top: 20px;
}

/* Responsive asignar-rutas */
@media (max-width: 768px) {
    .asignar-rutas-page {
        padding: 72px 16px 24px;
    }
    
    .asignar-rutas-page .section-container {
        padding: 0 4px 32px;
    }
    
    .asignar-rutas-page .section-header h2 {
        font-size: 24px;
    }
    
    .asignar-rutas-page .section-header p {
        font-size: 14px;
    }
    
    .asignar-rutas-page .asignar-rutas-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        margin: 0 -4px 20px;
        padding-bottom: 0;
        gap: 0;
        scrollbar-width: none;
    }
    
    .asignar-rutas-page .asignar-rutas-tabs::-webkit-scrollbar {
        display: none;
    }
    
    .asignar-rutas-page .asignar-tab {
        flex: 0 0 auto;
        padding: 12px 16px;
        font-size: 14px;
        white-space: nowrap;
        min-height: 44px;
    }
    
    .asignar-rutas-page .rutas-form-card,
    .asignar-rutas-page .rutas-list-card,
    .asignar-rutas-page .programacion-recojo-card {
        padding: 20px 16px;
    }
    
    .asignar-rutas-page .form-row-2,
    .asignar-rutas-page .form-row-3 {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .restriccion-item-card {
        flex-direction: column;
        align-items: stretch;
    }
    .restriccion-item-top {
        flex-direction: column;
    }
    .restriccion-item-badges {
        justify-content: flex-start;
    }
    .restriccion-item-actions {
        width: 100%;
        justify-content: flex-end;
    }
    .action-modal-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .action-modal-footer .btn-primary,
    .action-modal-footer .btn-secondary {
        width: 100%;
    }
    
    .asignar-rutas-page .rutas-filters .filters-container-locales {
        grid-template-columns: 1fr;
    }
    #panel-orden .rutas-filters .filters-container-locales {
        max-width: none;
        grid-template-columns: 1fr;
    }
    #panel-orden .asignar-panel-card {
        padding: 20px 16px;
    }
    #panel-orden .orden-ruta-item {
        padding: 12px 14px;
        gap: 12px;
    }
    #panel-orden .orden-badge {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
    #panel-orden .orden-drag-handle {
        width: 36px;
        height: 36px;
    }
    #panel-orden .form-actions .btn-primary {
        width: 100%;
        min-height: 48px;
    }
    
    .asignar-rutas-page .form-row-inline {
        flex-direction: column;
        align-items: stretch;
    }
    
    .asignar-rutas-page .form-group-btn .btn-primary {
        width: 100%;
    }
    
    .asignar-rutas-page .dias-semana-checkboxes {
        gap: 10px 16px;
    }
    
    .asignar-rutas-page .dias-semana-checkboxes label {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    
    .asignar-rutas-page .ruta-actions {
        gap: 8px;
    }
    
    .asignar-rutas-page .ruta-actions .btn-small {
        flex: 1 1 auto;
        min-width: 0;
    }
    
    /* prog-item responsive */
    .asignar-rutas-page .programacion-recojo-card .prog-item {
        flex-direction: column;
        align-items: stretch;
        padding: 14px;
        gap: 12px;
    }
    
    .asignar-rutas-page .programacion-recojo-card .prog-item .prog-info {
        flex: none;
    }
    
    .asignar-rutas-page .programacion-recojo-card .prog-item .prog-meta {
        gap: 6px 10px;
    }
    
    .asignar-rutas-page .programacion-recojo-card .prog-item .prog-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
        padding-top: 4px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
    
    .asignar-rutas-page .programacion-recojo-card .prog-item .btn-prog {
        min-height: 44px;
        padding: 10px 16px;
        font-size: 14px;
        flex: 1 1 auto;
        min-width: 100px;
    }
}

@media (max-width: 480px) {
    .asignar-rutas-page .section-header h2 {
        font-size: 20px;
    }
    
    .asignar-rutas-page .asignar-tab {
        padding: 10px 14px;
        font-size: 13px;
    }
    
    .asignar-rutas-page .rutas-list-card h3,
    .asignar-rutas-page .rutas-form-card h3 {
        font-size: 16px;
    }
    
    .asignar-rutas-page .programacion-recojo-card .prog-item {
        padding: 12px;
    }
    
    .asignar-rutas-page .programacion-recojo-card .prog-item .prog-title {
        font-size: 14px;
    }
    
    .asignar-rutas-page .programacion-recojo-card .prog-item .prog-meta {
        font-size: 12px;
    }
    
    .asignar-rutas-page .programacion-recojo-card .prog-item .btn-prog {
        min-width: 0;
        flex: 1 1 45%;
    }
}

[data-theme="light"] .rutas-form-card h3 {
    color: var(--text-primary);
}

[data-theme="light"] .ruta-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .ruta-header h4 {
    color: var(--text-primary);
}

[data-theme="light"] .ruta-conductor {
    color: var(--text-secondary);
}

[data-theme="light"] .ruta-info {
    color: var(--text-secondary);
}

[data-theme="light"] .ruta-info strong {
    color: var(--text-primary);
}

[data-theme="light"] .estado-activa {
    background: rgba(22, 163, 74, 0.12);
    color: #15803d;
    border: 1px solid rgba(22, 163, 74, 0.2);
}

[data-theme="light"] .btn-small.btn-delete-route {
    background: rgba(239, 68, 68, 0.1);
    color: #b91c1c;
    border: 1px solid rgba(239, 68, 68, 0.16);
}

[data-theme="light"] .btn-small.btn-delete-route:hover {
    background: rgba(239, 68, 68, 0.16);
}

[data-theme="light"] .menu-toggle-btn {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    box-shadow: 0 4px 16px var(--shadow);
}

[data-theme="light"] .menu-toggle-btn:hover {
    background: var(--bg-secondary);
}

[data-theme="light"] .my-location-btn {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    box-shadow: 0 8px 20px var(--shadow);
}

[data-theme="light"] .my-location-btn:hover {
    background: var(--bg-secondary);
}

/* Estilos específicos para páginas - Tema Claro */

/* Rutas */
[data-theme="light"] .filters-container {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="light"] .filter-group label {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .filter-group select,
[data-theme="light"] .filter-group input {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .filter-group select:focus,
[data-theme="light"] .filter-group input:focus {
    background: rgba(0, 0, 0, 0.08) !important;
    border-color: #0066ff !important;
}

[data-theme="light"] .filter-group select option {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .table-container {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="light"] .rutas-table {
    background: var(--bg-primary) !important;
}

[data-theme="light"] .rutas-table thead {
    background: rgba(0, 102, 255, 0.1) !important;
}

[data-theme="light"] .rutas-table th {
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

[data-theme="light"] .rutas-table td {
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

[data-theme="light"] .rutas-table tbody tr:hover {
    background: rgba(0, 102, 255, 0.05) !important;
}

[data-theme="light"] .foto-placeholder {
    background: rgba(0, 0, 0, 0.05) !important;
    color: var(--text-secondary) !important;
}

[data-theme="light"] .loading-state {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .rutas-container {
    background: transparent;
}

/* Estilos adicionales para rutas.php en tema claro */
[data-theme="light"] .filters-container {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="light"] .filter-group select,
[data-theme="light"] .filter-group input {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .filter-group select:focus,
[data-theme="light"] .filter-group input:focus {
    background: rgba(0, 0, 0, 0.08) !important;
    border-color: #0066ff !important;
}

[data-theme="light"] .filter-group select option {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .filter-group select,
[data-theme="light"] .filter-group input {
    background: rgba(0, 0, 0, 0.05);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="light"] .filter-group select:focus,
[data-theme="light"] .filter-group input:focus {
    background: rgba(0, 0, 0, 0.08);
    border-color: #0066ff;
}

[data-theme="light"] .filter-group select option {
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* Choices.js en rutas.php - tema claro */
[data-theme="light"] .filters-container .choices__inner {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
[data-theme="light"] .filters-container .choices__list--single .choices__item,
[data-theme="light"] .filters-container .choices__list--single .choices__placeholder {
    color: var(--text-primary) !important;
    opacity: 1 !important;
}
[data-theme="light"] .filters-container .choices__input {
    background: transparent !important;
    color: var(--text-primary) !important;
}
[data-theme="light"] .filters-container .choices__input::placeholder {
    color: var(--text-secondary);
}
[data-theme="light"] .filters-container .choices__list--dropdown {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}
[data-theme="light"] .filters-container .choices__list--dropdown .choices__item--selectable {
    color: var(--text-primary);
}
[data-theme="light"] .filters-container .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background: rgba(37, 99, 235, 0.12) !important;
    color: var(--text-primary);
}

/* Locales */
[data-theme="light"] .locales-search-bar {
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="light"] .search-input {
    background: rgba(0, 0, 0, 0.05);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="light"] .search-input:focus {
    background: rgba(0, 0, 0, 0.08);
    border-color: #0066ff;
}

[data-theme="light"] .search-icon {
    color: var(--text-secondary);
}

[data-theme="light"] .btn-clear-search {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-secondary);
}

[data-theme="light"] .btn-clear-search:hover {
    background: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .local-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .local-card:hover {
    background: var(--bg-secondary);
    box-shadow: 0 4px 16px var(--shadow);
}

[data-theme="light"] .local-name {
    color: var(--text-primary);
}

[data-theme="light"] .local-address {
    color: var(--text-secondary);
}

/* Locales - Filtros y búsqueda */
[data-theme="light"] .filters-container-locales {
    background: transparent;
}

.gm-style .gm-style-iw-c {
    padding: 0 !important;
    border-radius: 18px !important;
    background: #0f172a !important;
    box-shadow: 0 18px 44px rgba(2, 6, 23, 0.34) !important;
    overflow: hidden !important;
}

.gm-style .gm-style-iw-d {
    overflow: hidden !important;
}

.gm-style .gm-ui-hover-effect {
    top: 10px !important;
    right: 10px !important;
    opacity: 0.82;
}

.local-map-tooltip {
    min-width: 300px;
    max-width: 340px;
    padding: 16px;
    color: #e5eefb;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.18), transparent 32%),
        linear-gradient(180deg, #0f172a 0%, #111827 100%);
}

.local-map-tooltip__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.local-map-tooltip__pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.16);
    border: 1px solid rgba(96, 165, 250, 0.22);
    color: #bfdbfe;
    font-size: 11px;
    font-weight: 700;
}

.local-map-tooltip__title {
    margin-bottom: 6px;
    padding-right: 28px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
}

.local-map-tooltip__address {
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(226, 232, 240, 0.76);
}

.local-map-tooltip__meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.local-map-tooltip__meta-item {
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.12);
}

.local-map-tooltip__meta-label {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.88);
}

.local-map-tooltip__meta-value {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #f8fafc;
}

.local-map-tooltip__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.local-map-tooltip__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
}

.local-map-tooltip__badge--frequency {
    background: rgba(59, 130, 246, 0.18);
    color: #bfdbfe;
    border-color: rgba(96, 165, 250, 0.28);
}

.local-map-tooltip__badge--warning {
    background: rgba(245, 158, 11, 0.16);
    color: #fde68a;
    border-color: rgba(245, 158, 11, 0.28);
}

.local-map-tooltip__badge--danger {
    background: rgba(239, 68, 68, 0.16);
    color: #fecaca;
    border-color: rgba(248, 113, 113, 0.24);
}

.local-map-tooltip__badge--muted {
    background: rgba(148, 163, 184, 0.14);
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.2);
}

.local-map-tooltip__action {
    width: 100%;
    border: 0;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.24);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.local-map-tooltip__action:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.3);
    filter: brightness(1.04);
}

.local-map-tooltip__action:active {
    transform: translateY(0);
}

[data-theme="light"] .filter-group-locales label {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .filter-input {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
}

[data-theme="light"] .filter-input:focus {
    background: rgba(0, 0, 0, 0.08) !important;
    border-color: #0066ff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230066ff' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
}

[data-theme="light"] .filter-input option {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .filter-input:hover {
    border-color: var(--border-color) !important;
}

[data-theme="light"] .gm-style .gm-style-iw-c {
    background: #ffffff !important;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14) !important;
}

[data-theme="light"] .local-map-tooltip {
    color: var(--text-primary);
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.1), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

[data-theme="light"] .local-map-tooltip__pill {
    background: rgba(37, 99, 235, 0.08);
    color: #1d4ed8;
    border-color: rgba(37, 99, 235, 0.14);
}

[data-theme="light"] .local-map-tooltip__title {
    color: var(--text-primary);
}

[data-theme="light"] .local-map-tooltip__address {
    color: var(--text-secondary);
}

[data-theme="light"] .local-map-tooltip__meta-item {
    background: rgba(15, 23, 42, 0.03);
    border-color: rgba(148, 163, 184, 0.16);
}

[data-theme="light"] .local-map-tooltip__meta-label {
    color: #64748b;
}

[data-theme="light"] .local-map-tooltip__meta-value {
    color: var(--text-primary);
}

[data-theme="light"] .local-map-tooltip__badge--frequency {
    background: rgba(37, 99, 235, 0.1);
    color: #1d4ed8;
    border-color: rgba(37, 99, 235, 0.16);
}

[data-theme="light"] .local-map-tooltip__badge--warning {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
    border-color: rgba(245, 158, 11, 0.18);
}

[data-theme="light"] .local-map-tooltip__badge--danger {
    background: rgba(239, 68, 68, 0.1);
    color: #b91c1c;
    border-color: rgba(239, 68, 68, 0.16);
}

[data-theme="light"] .local-map-tooltip__badge--muted {
    background: rgba(148, 163, 184, 0.12);
    color: #475569;
    border-color: rgba(148, 163, 184, 0.16);
}

/* Locales - Botones de exportación */
[data-theme="light"] .export-buttons {
    background: transparent;
}

[data-theme="light"] .btn-export {
    background: rgba(0, 102, 255, 0.1) !important;
    border: 1px solid rgba(0, 102, 255, 0.3) !important;
    color: #0066ff !important;
}

[data-theme="light"] .btn-export:hover {
    background: #0066ff !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.3) !important;
}

[data-theme="light"] .btn-export-pdf-local {
    background: rgba(0, 102, 255, 0.1) !important;
    border: 1px solid rgba(0, 102, 255, 0.3) !important;
    color: #0066ff !important;
}

[data-theme="light"] .btn-export-pdf-local:hover {
    background: #0066ff !important;
    color: #fff !important;
}

/* Locales - Panel principal */
[data-theme="light"] .locales-panel {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 16px var(--shadow) !important;
}

[data-theme="light"] .locales-header {
    background: transparent !important;
    border-bottom: 1px solid var(--border-color) !important;
}

[data-theme="light"] .locales-header h3 {
    color: var(--text-primary) !important;
}

[data-theme="light"] #localesCounter {
    color: var(--text-secondary) !important;
}

[data-theme="light"] #localesCounter span {
    color: var(--text-secondary) !important;
}

[data-theme="light"] #pendientesCertificacion {
    color: #ff9500 !important;
}

[data-theme="light"] .locales-header-actions .btn-primary {
    background: #0066ff !important;
    color: #fff !important;
}

[data-theme="light"] .locales-header-actions .btn-primary:hover {
    background: #0052cc !important;
}

[data-theme="light"] .locales-header-actions .btn-minimize {
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .locales-header-actions .btn-minimize:hover {
    background: rgba(0, 0, 0, 0.1) !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .locales-header-actions .btn-minimize svg {
    color: var(--text-primary) !important;
}

[data-theme="light"] .locales-list {
    background: transparent !important;
}

/* Locales - Items de la lista */
[data-theme="light"] .local-item {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="light"] .local-item:hover {
    background: rgba(0, 102, 255, 0.05) !important;
    border-color: #0066ff !important;
}

[data-theme="light"] .local-info h4 {
    color: var(--text-primary) !important;
}

[data-theme="light"] .local-direccion {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .local-meta {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .local-actions {
    background: transparent;
}

[data-theme="light"] .local-actions button {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .local-actions button:hover {
    color: #0066ff !important;
    background: rgba(0, 102, 255, 0.1) !important;
}

/* Locales - Panel de detalle */
[data-theme="light"] .local-detail-header {
    background: transparent !important;
    border-bottom: 1px solid var(--border-color) !important;
}

[data-theme="light"] .local-detail-actions {
    background: transparent;
}

[data-theme="light"] .local-detail-actions .btn-action {
    background: rgba(0, 102, 255, 0.1) !important;
    color: #0066ff !important;
    border: 1px solid rgba(0, 102, 255, 0.2) !important;
}

[data-theme="light"] .local-detail-actions .btn-action:hover {
    background: rgba(0, 102, 255, 0.15) !important;
}

[data-theme="light"] .local-detail-content {
    background: transparent;
}

/* Locales - Fotos */
[data-theme="light"] .local-fotos {
    background: transparent;
}

[data-theme="light"] .local-fotos h3 {
    color: var(--text-primary) !important;
}

[data-theme="light"] .fotos-gallery {
    background: transparent;
}

[data-theme="light"] .foto-item {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="light"] .foto-item:hover {
    border-color: #0066ff !important;
}

/* Locales - Información detallada */
[data-theme="light"] .local-info-section {
    background: transparent;
}

[data-theme="light"] .info-item {
    background: transparent;
    border-bottom: 1px solid var(--border-color) !important;
}

[data-theme="light"] .info-item svg {
    color: #0066ff !important;
}

[data-theme="light"] .info-item strong {
    color: var(--text-primary) !important;
}

[data-theme="light"] .info-item p {
    color: var(--text-secondary) !important;
}

[data-theme="light"] #localTelefonoAsesor,
[data-theme="light"] #localTelefonoEncargado {
    color: var(--text-secondary) !important;
}

/* Locales - Sobrescribir estilos inline */
[data-theme="light"] .locales-search-bar[style*="background"] {
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

[data-theme="light"] .search-input[style*="background"] {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .search-input[style*="color"] {
    color: var(--text-primary) !important;
}

[data-theme="light"] .filter-input[style*="background"] {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .filter-input[style*="color"] {
    color: var(--text-primary) !important;
}

[data-theme="light"] #localesCounter[style*="color"] {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .local-fotos h3[style*="color"] {
    color: var(--text-primary) !important;
}

[data-theme="light"] #localTelefonoAsesor[style*="color"],
[data-theme="light"] #localTelefonoEncargado[style*="color"] {
    color: var(--text-secondary) !important;
}

[data-theme="light"] #coordenadasStatus[style*="color"],
[data-theme="light"] small[style*="color"] {
    color: var(--text-secondary) !important;
}

/* Planta */
[data-theme="light"] .page-header h1 {
    color: var(--text-primary);
}

[data-theme="light"] .filters-container {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="light"] .filters-container h3 {
    color: var(--text-primary) !important;
}

[data-theme="light"] .filters-container h3[style*="color"] {
    color: var(--text-primary) !important;
}

/* Estilos específicos para planta.php en tema claro */
[data-theme="light"] .filters-container {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="light"] .filters-container label {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .filters-container input,
[data-theme="light"] .filters-container select {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .filters-container input:focus,
[data-theme="light"] .filters-container select:focus {
    background: rgba(0, 0, 0, 0.08) !important;
    border-color: #0066ff !important;
}

[data-theme="light"] .filters-container select option {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .planta-card {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="light"] .planta-card-header {
    border-bottom: 1px solid var(--border-color);
}

[data-theme="light"] .planta-card-id {
    color: #0066ff !important;
}

[data-theme="light"] .planta-card-label {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .planta-card-value {
    color: var(--text-primary) !important;
}

[data-theme="light"] .planta-card-photo {
    color: #0066ff !important;
}

[data-theme="light"] .planta-card-photo:hover {
    color: #0052cc !important;
}

[data-theme="light"] .btn-remove-photo {
    background: rgba(255, 59, 48, 0.1) !important;
    color: #ff3b30 !important;
    border: 1px solid rgba(255, 59, 48, 0.2) !important;
}

[data-theme="light"] .btn-remove-photo:hover {
    background: rgba(255, 59, 48, 0.15) !important;
}

[data-theme="light"] .modal-foto-overlay {
    background: rgba(0, 0, 0, 0.7) !important;
}

[data-theme="light"] .modal-foto-content {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="light"] .modal-foto-close {
    color: var(--text-primary) !important;
    background: rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .modal-foto-close:hover {
    background: rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .data-table-mobile {
    background: transparent;
}

[data-theme="light"] .data-table .loading-state,
[data-theme="light"] .data-table .empty-state {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .data-table .loading-state p,
[data-theme="light"] .data-table .empty-state p {
    color: var(--text-secondary) !important;
}

/* Sobrescribir estilos inline de planta.php */
[data-theme="light"] .filters-container[style*="background"] {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="light"] .filters-container h3[style*="color"] {
    color: var(--text-primary) !important;
}

[data-theme="light"] .filters-container label[style*="color"] {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .filters-container input[style*="background"],
[data-theme="light"] .filters-container select[style*="background"] {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .filters-container input[style*="color"] {
    color: var(--text-primary) !important;
}

[data-theme="light"] .filters-container select[style*="color"] {
    color: var(--text-primary) !important;
}

[data-theme="light"] .form-group small[style*="color"] {
    color: var(--text-secondary) !important;
}

/* Usuarios */
[data-theme="light"] .usuarios-container {
    background: var(--bg-secondary);
}

[data-theme="light"] .usuarios-panel {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 8px 32px var(--shadow) !important;
}

[data-theme="light"] .usuarios-header {
    background: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

[data-theme="light"] .usuarios-header h1,
[data-theme="light"] .usuarios-header h3 {
    color: var(--text-primary) !important;
}

[data-theme="light"] .usuarios-list {
    background: var(--bg-primary);
}

[data-theme="light"] .usuario-item {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="light"] .usuario-item:hover {
    background: rgba(0, 102, 255, 0.05) !important;
    border-color: rgba(0, 102, 255, 0.2) !important;
}

[data-theme="light"] .usuario-details h4 {
    color: var(--text-primary) !important;
}

[data-theme="light"] .usuario-email {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .usuario-info {
    background: transparent;
}

[data-theme="light"] .usuario-avatar {
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%) !important;
    color: #fff !important;
}

[data-theme="light"] .usuario-meta {
    background: transparent;
}

[data-theme="light"] .usuario-item.inactive {
    opacity: 0.6;
    background: rgba(0, 0, 0, 0.02) !important;
}

/* Badges de roles */
[data-theme="light"] .badge {
    background: rgba(0, 0, 0, 0.05) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .badge-planta {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #fff !important;
}

[data-theme="light"] .badge-conductor {
    background: rgba(0, 102, 255, 0.15) !important;
    color: #0066ff !important;
    border: 1px solid rgba(0, 102, 255, 0.3) !important;
}

[data-theme="light"] .badge-operador {
    background: rgba(0, 102, 255, 0.15) !important;
    color: #0066ff !important;
    border: 1px solid rgba(0, 102, 255, 0.3) !important;
}

[data-theme="light"] .badge-asesor {
    background: rgba(0, 255, 136, 0.15) !important;
    color: #00a86b !important;
    border: 1px solid rgba(0, 255, 136, 0.3) !important;
}

[data-theme="light"] .badge-administrador {
    background: rgba(255, 193, 7, 0.15) !important;
    color: #d4a017 !important;
    border: 1px solid rgba(255, 193, 7, 0.3) !important;
}

/* Status badges */
[data-theme="light"] .status-badge {
    background: rgba(0, 0, 0, 0.05) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .status-badge.active {
    background: rgba(0, 255, 136, 0.15) !important;
    color: #00a86b !important;
    border: 1px solid rgba(0, 255, 136, 0.3) !important;
}

[data-theme="light"] .status-badge.inactive {
    background: rgba(255, 107, 107, 0.15) !important;
    color: #d32f2f !important;
    border: 1px solid rgba(255, 107, 107, 0.3) !important;
}

/* Acciones de usuario */
[data-theme="light"] .usuario-actions {
    background: transparent;
}

/* Estilos generales para btn-icon en tema claro */
[data-theme="light"] .btn-icon {
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .btn-icon:hover {
    background: rgba(0, 0, 0, 0.1) !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .btn-icon svg {
    color: var(--text-primary) !important;
}

[data-theme="light"] .btn-icon.btn-danger {
    color: #ff3b30 !important;
}

[data-theme="light"] .btn-icon.btn-danger:hover {
    background: rgba(255, 59, 48, 0.1) !important;
    border-color: rgba(255, 59, 48, 0.2) !important;
}

[data-theme="light"] .usuario-actions .btn-icon {
    color: var(--text-secondary) !important;
    background: rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .usuario-actions .btn-icon:hover {
    color: #0066ff !important;
    background: rgba(0, 102, 255, 0.1) !important;
}

[data-theme="light"] .switch-container {
    background: transparent;
}

[data-theme="light"] .switch-label {
    color: var(--text-primary) !important;
}

/* Error messages */
[data-theme="light"] .error-message {
    background: rgba(244, 67, 54, 0.1) !important;
    color: #d32f2f !important;
    border-left-color: #d32f2f !important;
}

[data-theme="light"] .form-group input.error {
    border-color: #d32f2f !important;
    background-color: rgba(244, 67, 54, 0.05) !important;
}

[data-theme="light"] .form-group input.error:focus {
    border-color: #d32f2f !important;
    box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.2) !important;
}

/* Loading y empty states */
[data-theme="light"] .loading-state,
[data-theme="light"] .empty-state {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .loading-state p,
[data-theme="light"] .empty-state p {
    color: var(--text-secondary) !important;
}

/* Sobrescribir estilos inline */
[data-theme="light"] small[style*="color"] {
    color: var(--text-secondary) !important;
}

[data-theme="light"] #passwordHint[style*="color"] {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .form-group input.error:focus {
    border-color: #d32f2f !important;
    box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.1) !important;
}

[data-theme="light"] #passwordHint {
    color: var(--text-secondary) !important;
}

/* Reportes */
[data-theme="light"] .reportes-container {
    background: var(--bg-secondary);
}

[data-theme="light"] .reportes-header {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="light"] .reportes-header h1 {
    color: var(--text-primary);
}

[data-theme="light"] .reportes-grid {
    background: transparent;
}

[data-theme="light"] .reporte-card {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 2px 8px var(--shadow) !important;
}

[data-theme="light"] .reporte-card h3 {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .reporte-value {
    color: var(--text-primary) !important;
}

[data-theme="light"] .reporte-label {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .reportes-section {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="light"] .section-title {
    color: var(--text-primary) !important;
}

[data-theme="light"] .reportes-section-header-row .section-title {
    color: var(--text-primary) !important;
}

[data-theme="light"] .filter-select-filtracion {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .filter-select-filtracion:focus {
    border-color: var(--primary-color, #2563eb) !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15) !important;
}

[data-theme="light"] .filter-select-filtracion option {
    background: var(--bg-primary);
    color: var(--text-primary);
}

[data-theme="light"] .reportes-section-header-row .choices__inner {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
[data-theme="light"] .reportes-section-header-row .choices__list--single .choices__item,
[data-theme="light"] .reportes-section-header-row .choices__list--single .choices__placeholder {
    color: var(--text-primary) !important;
    opacity: 1 !important;
}
[data-theme="light"] .reportes-section-header-row .choices__input {
    background: transparent !important;
    color: var(--text-primary) !important;
}
[data-theme="light"] .reportes-section-header-row .choices__input::placeholder {
    color: var(--text-secondary);
}
[data-theme="light"] .reportes-section-header-row .choices__list--dropdown {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}
[data-theme="light"] .reportes-section-header-row .choices__list--dropdown .choices__item--selectable,
[data-theme="light"] .reportes-section-header-row .choices__item--choice {
    color: var(--text-primary);
}
[data-theme="light"] .reportes-section-header-row .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background: rgba(37, 99, 235, 0.12) !important;
    color: var(--text-primary);
}

[data-theme="light"] .section-desc {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .reportes-table {
    background: var(--bg-primary) !important;
}

[data-theme="light"] .reportes-table thead {
    background: var(--bg-secondary) !important;
}

[data-theme="light"] .reportes-table th {
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

[data-theme="light"] .reportes-table td {
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

[data-theme="light"] .reportes-table tbody tr:hover {
    background: rgba(0, 102, 255, 0.05) !important;
}

[data-theme="light"] .mercaderia-stats-grid {
    background: transparent;
}

[data-theme="light"] .stat-item {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="light"] .stat-label {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .stat-value {
    color: var(--text-primary) !important;
}

[data-theme="light"] .estadisticas-grid {
    background: transparent;
}

[data-theme="light"] .estadistica-item {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="light"] .estadistica-label {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .estadistica-value {
    color: var(--text-primary) !important;
}

[data-theme="light"] .reportes-detalle {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="light"] .reportes-detalle h3 {
    color: var(--text-primary) !important;
}

/* Conductores */
[data-theme="light"] .conductores-panel {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 16px var(--shadow);
}

[data-theme="light"] .conductores-header h3 {
    color: var(--text-primary);
}

[data-theme="light"] .conductor-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .conductor-item:hover {
    background: rgba(0, 102, 255, 0.05);
}

[data-theme="light"] .conductor-name {
    color: var(--text-primary);
}

[data-theme="light"] .conductor-status {
    color: var(--text-secondary);
}

/* Historial */
[data-theme="light"] .historial-content {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="light"] .historial-filters {
    background: transparent;
}

[data-theme="light"] .historial-list {
    background: transparent;
}

[data-theme="light"] .historial-item {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="light"] .historial-item:hover {
    background: var(--bg-secondary) !important;
    border-color: rgba(0, 102, 255, 0.2) !important;
}

[data-theme="light"] .historial-header h3 {
    color: var(--text-primary) !important;
}

[data-theme="light"] .historial-header p {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .historial-stats {
    background: transparent;
}

[data-theme="light"] .historial-stats span {
    color: var(--text-secondary) !important;
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="light"] .btn-view-route {
    background: rgba(0, 102, 255, 0.1) !important;
    color: #0066ff !important;
    border: 1px solid rgba(0, 102, 255, 0.2) !important;
}

[data-theme="light"] .btn-view-route:hover {
    background: rgba(0, 102, 255, 0.15) !important;
    border-color: rgba(0, 102, 255, 0.3) !important;
}

/* Estadísticas */
[data-theme="light"] .stats-grid {
    background: transparent;
}

[data-theme="light"] .stat-card {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 2px 8px var(--shadow) !important;
}

[data-theme="light"] .stat-card:hover {
    border-color: rgba(0, 102, 255, 0.3) !important;
    box-shadow: 0 4px 12px var(--shadow) !important;
}

[data-theme="light"] .stat-icon {
    background: rgba(0, 102, 255, 0.1) !important;
}

[data-theme="light"] .stat-icon[style*="background"] {
    background: rgba(0, 102, 255, 0.1) !important;
}

[data-theme="light"] .stat-icon svg {
    color: #0066ff !important;
}

[data-theme="light"] .stat-label {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .stat-value {
    color: var(--text-primary) !important;
}

[data-theme="light"] .stats-chart {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 2px 8px var(--shadow) !important;
}

[data-theme="light"] .stats-chart h3 {
    color: var(--text-primary) !important;
}

[data-theme="light"] .stats-chart canvas {
    background: var(--bg-secondary);
}

/* Configuración */
[data-theme="light"] .config-content {
    background: var(--bg-secondary);
}

/* Asignar Rutas */
[data-theme="light"] .asignar-rutas-container {
    background: var(--bg-secondary);
}

[data-theme="light"] .asignar-rutas-header {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="light"] .asignar-rutas-header h1 {
    color: var(--text-primary);
}

/* Choices.js en Asignar Rutas (tema claro) */
[data-theme="light"] .asignar-rutas-page .choices__inner {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
[data-theme="light"] .asignar-rutas-page .choices__list--single .choices__item,
[data-theme="light"] .asignar-rutas-page .choices__list--single .choices__placeholder {
    color: var(--text-primary) !important;
    opacity: 1 !important;
}
[data-theme="light"] .asignar-rutas-page .choices__input {
    background: transparent !important;
    color: var(--text-primary) !important;
}
[data-theme="light"] .asignar-rutas-page .choices__input::placeholder {
    color: var(--text-secondary);
}
[data-theme="light"] .asignar-rutas-page .choices__list--dropdown {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}
[data-theme="light"] .asignar-rutas-page .choices__list--dropdown .choices__item--selectable,
[data-theme="light"] .asignar-rutas-page .choices__item--choice {
    color: var(--text-primary);
}
[data-theme="light"] .asignar-rutas-page .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background: rgba(37, 99, 235, 0.12) !important;
    color: var(--text-primary);
}

/* Panel Orden - tema claro */
[data-theme="light"] #panel-orden .asignar-panel-card {
    background: var(--bg-primary);
    border-color: var(--border-color);
}
[data-theme="light"] #panel-orden .panel-desc {
    color: var(--text-secondary);
}
[data-theme="light"] #panel-orden .rutas-filters .filter-input,
[data-theme="light"] #panel-orden .rutas-filters input[type="date"] {
    background: rgba(0, 0, 0, 0.04);
    border-color: var(--border-color);
    color: var(--text-primary);
}
[data-theme="light"] #panel-orden .rutas-filters input[type="date"]::-webkit-calendar-picker-indicator {
    filter: none;
    opacity: 0.6;
}
[data-theme="light"] #panel-orden .orden-ruta-item {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}
[data-theme="light"] #panel-orden .orden-ruta-item:hover {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(37, 99, 235, 0.3);
}
[data-theme="light"] #panel-orden .orden-ruta-nombre {
    color: var(--text-primary);
}
[data-theme="light"] #panel-orden .orden-ruta-direccion {
    color: var(--text-secondary);
}
[data-theme="light"] #panel-orden .orden-badge {
    background: rgba(37, 99, 235, 0.15);
    border-color: rgba(37, 99, 235, 0.45);
    color: var(--text-primary);
}
[data-theme="light"] #panel-orden .orden-drag-handle {
    color: var(--text-secondary);
}
[data-theme="light"] #panel-orden .orden-drag-handle:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] #panel-orden .orden-sortable-ghost {
    background: rgba(37, 99, 235, 0.1);
    border-color: rgba(37, 99, 235, 0.3);
}
[data-theme="light"] #panel-orden .orden-sortable-chosen {
    border-color: rgba(37, 99, 235, 0.4);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
[data-theme="light"] #panel-orden .empty-state {
    background: rgba(0, 0, 0, 0.02);
    border-color: var(--border-color);
    color: var(--text-secondary);
}
[data-theme="light"] #panel-orden .form-actions {
    border-top-color: var(--border-color);
}

/* Vista Locales */
[data-theme="light"] .vista-locales-container {
    background: var(--bg-secondary);
}

/* Paneles y Controles */
[data-theme="light"] .control-panel {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 16px var(--shadow);
}

[data-theme="light"] .navigation-guidance-panel {
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(255, 255, 255, 0.96)),
        var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

[data-theme="light"] .navigation-guidance-icon {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(255, 255, 255, 0.92));
    border-color: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
}

[data-theme="light"] .navigation-guidance-badge {
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
}

[data-theme="light"] .navigation-guidance-badge-muted {
    background: rgba(15, 23, 42, 0.06);
    color: var(--text-secondary);
}

[data-theme="light"] .navigation-guidance-subtitle,
[data-theme="light"] .navigation-guidance-stat-label {
    color: var(--text-secondary);
}

[data-theme="light"] .navigation-guidance-voice-btn {
    background: rgba(15, 23, 42, 0.06);
    color: var(--text-primary);
}

[data-theme="light"] .navigation-guidance-voice-btn:hover {
    background: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .navigation-guidance-stat {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.08);
}

[data-theme="light"] .status-indicator {
    color: var(--text-primary);
}

[data-theme="light"] .status-text {
    color: var(--text-secondary);
}

[data-theme="light"] .rutas-panel {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 16px var(--shadow) !important;
}

[data-theme="light"] .rutas-panel-header {
    border-bottom: 1px solid var(--border-color) !important;
    background: transparent !important;
}

[data-theme="light"] .rutas-panel-header h3 {
    color: var(--text-primary) !important;
}

[data-theme="light"] .rutas-panel-filters {
    border-bottom: 1px solid var(--border-color) !important;
}

[data-theme="light"] .rutas-panel-filters label {
    color: var(--text-primary) !important;
}

[data-theme="light"] .rutas-panel-filters input[type="date"] {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .rutas-panel-filters input[type="date"]:focus {
    border-color: #0066ff !important;
    background: var(--bg-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.2) !important;
}

[data-theme="light"] .rutas-panel-filters input[type="date"]::-webkit-calendar-picker-indicator {
    filter: none !important;
    opacity: 0.7;
    cursor: pointer;
}

[data-theme="light"] .rutas-panel-filters input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

[data-theme="light"] .panel-toggle {
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .panel-toggle:hover {
    background: rgba(0, 0, 0, 0.1) !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .rutas-list {
    background: transparent !important;
}

[data-theme="light"] .ruta-item {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="light"] .ruta-item:hover {
    background: rgba(0, 102, 255, 0.05) !important;
    border-color: #0066ff !important;
}

[data-theme="light"] .ruta-item.selected {
    background: rgba(0, 102, 255, 0.1) !important;
    border-color: #0066ff !important;
}

[data-theme="light"] .ruta-item-header h4 {
    color: var(--text-primary) !important;
}

[data-theme="light"] .ruta-item-direccion {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .ruta-item-fecha {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .ruta-header h4,
[data-theme="light"] .ruta-item-header h4,
[data-theme="light"] .ruta-nombre {
    color: var(--text-primary) !important;
}

[data-theme="light"] .ruta-conductor,
[data-theme="light"] .ruta-info,
[data-theme="light"] .ruta-info p,
[data-theme="light"] .ruta-item-direccion,
[data-theme="light"] .ruta-item-fecha,
[data-theme="light"] .empty-state,
[data-theme="light"] .loading-state {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .ruta-item-observaciones {
    color: var(--text-primary) !important;
    background: rgba(0, 102, 255, 0.05);
    border-left-color: #0066ff;
}

[data-theme="light"] .empty-state {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .loading-state {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .ruta-nombre {
    color: var(--text-primary) !important;
}

[data-theme="light"] .ruta-info {
    color: var(--text-secondary) !important;
}

/* Local Detail Panel */
[data-theme="light"] .local-detail-panel {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 16px var(--shadow);
}

[data-theme="light"] .local-detail-header h2 {
    color: var(--text-primary);
}

[data-theme="light"] .local-info-section .info-item strong {
    color: var(--text-primary);
}

[data-theme="light"] .local-info-section .info-item p {
    color: var(--text-secondary);
}

/* Arrival Overlay */
[data-theme="light"] .arrival-overlay {
    background: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .arrival-panel {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .arrival-title {
    color: var(--text-primary);
}

[data-theme="light"] .arrival-address {
    color: var(--text-secondary);
}

/* Botones adicionales */
[data-theme="light"] .btn-refresh {
    background: #0066ff;
    color: #fff;
}

[data-theme="light"] .btn-refresh:hover {
    background: #0052cc;
}

[data-theme="light"] .btn-minimize {
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .btn-minimize:hover {
    background: rgba(0, 0, 0, 0.1) !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .btn-minimize svg {
    color: var(--text-primary) !important;
}

[data-theme="light"] .btn-action {
    background: rgba(0, 102, 255, 0.1);
    color: #0066ff;
    border: 1px solid rgba(0, 102, 255, 0.2);
}

[data-theme="light"] .btn-action:hover {
    background: rgba(0, 102, 255, 0.15);
}

[data-theme="light"] .panel-toggle {
    color: var(--text-secondary);
}

[data-theme="light"] .panel-toggle:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .panel-close {
    color: var(--text-secondary);
}

[data-theme="light"] .panel-close:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.05);
}

/* Arrival Panel - Tema Claro */
[data-theme="light"] .arrival-handle {
    background: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .arrival-close {
    color: var(--text-primary);
}

[data-theme="light"] .arrival-close:hover {
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .arrival-photo-label {
    color: var(--text-primary);
}

[data-theme="light"] .arrival-photo-upload {
    border-color: var(--border-color);
    background: var(--bg-secondary);
}

[data-theme="light"] .arrival-photo-upload:hover {
    border-color: #0066ff;
    background: rgba(0, 102, 255, 0.05);
}

[data-theme="light"] .arrival-photo-placeholder {
    color: var(--text-secondary);
}

[data-theme="light"] .arrival-photo-placeholder svg {
    color: var(--text-tertiary);
}

[data-theme="light"] .arrival-photo-remove {
    background: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .arrival-photo-remove:hover {
    background: rgba(0, 0, 0, 0.8);
}

[data-theme="light"] .arrival-cantidades-section {
    margin-top: 24px;
}

[data-theme="light"] .arrival-cantidades-title {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    margin: 20px 0 16px 0;
}

[data-theme="light"] .arrival-cantidades-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

[data-theme="light"] .arrival-cantidad-item {
    margin: 0;
}

[data-theme="light"] .arrival-cantidad-label {
    color: var(--text-secondary);
    font-size: 13px;
    margin-bottom: 8px;
    display: block;
    font-weight: 500;
}

[data-theme="light"] .arrival-cantidad-input {
    width: 100%;
    padding: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

[data-theme="light"] .arrival-cantidad-input::placeholder {
    color: var(--text-tertiary);
}

[data-theme="light"] .arrival-cantidad-input:focus {
    outline: none;
    border-color: #2031E6;
    background: var(--bg-primary);
    box-shadow: 0 0 0 3px rgba(32, 49, 230, 0.1);
}

[data-theme="light"] .arrival-cantidad-input:hover {
    border-color: rgba(0, 0, 0, 0.2);
    background: var(--bg-primary);
}

[data-theme="light"] .ruta-telefono-encargado {
    font-size: 0.9em;
    color: var(--text-secondary);
}

/* Paginación - Tema Claro */
[data-theme="light"] .pagination-container {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .pagination-info {
    color: var(--text-secondary);
}

[data-theme="light"] .pagination-btn {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="light"] .pagination-btn:hover:not(:disabled) {
    background: rgba(0, 102, 255, 0.1);
    border-color: #0066ff;
}

[data-theme="light"] .pagination-page-btn {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="light"] .pagination-page-btn:hover {
    background: rgba(0, 102, 255, 0.1);
    border-color: #0066ff;
}

[data-theme="light"] .pagination-page-btn.active {
    background: #0066ff;
    border-color: #0066ff;
    color: #fff;
}

[data-theme="light"] .pagination-ellipsis {
    color: var(--text-secondary);
}

[data-theme="light"] .pagination-size label {
    color: var(--text-secondary);
}

[data-theme="light"] .pagination-size select {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="light"] .pagination-size select:focus {
    border-color: #0066ff;
}

[data-theme="light"] .pagination-size select option {
    background: var(--bg-primary);
    color: var(--text-primary);
}

[data-theme="light"] .arrival-notas-label {
    color: var(--text-primary);
}

[data-theme="light"] .arrival-notas-input {
    background: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="light"] .arrival-notas-input:focus {
    border-color: #0066ff;
}

[data-theme="light"] .arrival-notas-input::placeholder {
    color: var(--text-secondary);
}

[data-theme="light"] .arrival-btn-finalizar {
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    color: #fff;
}

[data-theme="light"] .arrival-btn-finalizar:hover:not(:disabled) {
    background: linear-gradient(135deg, #0052cc 0%, #0040a3 100%);
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.3);
}

[data-theme="light"] .arrival-btn-finalizar:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Animaciones para notificaciones de nuevas rutas */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes slideUpNotification {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
}

/* ===== Mini-modal selector de origen de foto (cámara o galería) ===== */
.photo-source-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 10010;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: fadeIn 0.25s ease-out;
}
.photo-source-sheet {
    background: #fff;
    width: 100%;
    max-width: 520px;
    border-radius: 20px 20px 0 0;
    padding: 16px 20px 24px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.18);
    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.photo-source-handle {
    width: 44px;
    height: 4px;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 2px;
    margin: 0 auto 14px;
}
.photo-source-title {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 600;
    color: #111;
    text-align: center;
}
.photo-source-option {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 14px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #f7f7f9;
    border-radius: 14px;
    cursor: pointer;
    margin-bottom: 10px;
    text-align: left;
    transition: background 0.2s ease, transform 0.05s ease;
}
.photo-source-option:hover { background: #eef0f3; }
.photo-source-option:active { transform: scale(0.99); }
.photo-source-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(32, 49, 230, 0.12);
    color: #2031E6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.photo-source-text { display: flex; flex-direction: column; }
.photo-source-text strong { font-size: 14px; color: #111; }
.photo-source-text small { font-size: 12px; color: #666; }
.photo-source-cancel {
    width: 100%;
    padding: 12px;
    margin-top: 6px;
    background: #fff;
    color: #d32f2f;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
}
.photo-source-cancel:hover { background: #fff5f5; }

[data-theme="dark"] .photo-source-sheet { background: #1f1f24; }
[data-theme="dark"] .photo-source-title { color: #f1f1f1; }
[data-theme="dark"] .photo-source-option {
    background: #2a2a30;
    border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .photo-source-option:hover { background: #34343c; }
[data-theme="dark"] .photo-source-text strong { color: #f1f1f1; }
[data-theme="dark"] .photo-source-text small { color: #b5b5b5; }
[data-theme="dark"] .photo-source-cancel {
    background: #2a2a30;
    color: #ff6b6b;
    border-color: rgba(255, 255, 255, 0.08);
}

/* ===== Permisos de menú agrupados por rol ===== */
.permisos-menu-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 8px;
}
.permisos-grupo {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    overflow: hidden;
}
.permisos-grupo-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.permisos-grupo-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.permisos-grupo.grupo-asesor   .permisos-grupo-icon { background: rgba(32, 49, 230, 0.85); }
.permisos-grupo.grupo-planta   .permisos-grupo-icon { background: rgba(255, 145, 0, 0.85); }
.permisos-grupo.grupo-operador .permisos-grupo-icon { background: rgba(46, 125, 50, 0.85); }
.permisos-grupo-title-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.permisos-grupo-title {
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
}
.permisos-grupo-desc {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11.5px;
    line-height: 1.3;
}
.permisos-grupo-toggle {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.permisos-grupo-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.35);
}
.permisos-grupo-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 12px 14px 14px;
}

/* Tema claro */
[data-theme="light"] .permisos-grupo {
    background: rgba(0, 0, 0, 0.025);
    border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .permisos-grupo-header {
    background: rgba(0, 0, 0, 0.04);
    border-bottom-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .permisos-grupo-title { color: #111; }
[data-theme="light"] .permisos-grupo-desc { color: rgba(0, 0, 0, 0.55); }
[data-theme="light"] .permisos-grupo-toggle {
    color: rgba(0, 0, 0, 0.75);
    border-color: rgba(0, 0, 0, 0.18);
}
[data-theme="light"] .permisos-grupo-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.35);
}

@media (max-width: 600px) {
    .permisos-grupo-items {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   HOJA DE RUTA + HISTORIAL HR (web)
   ============================================================ */

/* Card genérica de las secciones de la hoja de ruta */
.hr-card {
    background: var(--bg-elevated, #1a1a1a);
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}
[data-theme="light"] .hr-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
/* Card oscura especial para el header del usuario */
.hr-card-dark {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    color: #fff;
    border: none;
}
[data-theme="light"] .hr-card-dark {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    color: #fff;
}

.hr-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.hr-card-title h3 {
    margin: 0;
    flex: 1;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary, #fff);
}
[data-theme="light"] .hr-card-title h3 { color: #1a1a1a; }
.hr-card-dark .hr-card-title h3,
[data-theme="light"] .hr-card-dark .hr-card-title h3 { color: #fff; }

.hr-card-icon {
    width: 32px; height: 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Datos chofer/fecha/placa */
.hr-kv-grid { display: flex; flex-direction: column; gap: 4px; }
.hr-kv-row {
    display: flex; align-items: center; gap: 8px;
    color: rgba(255,255,255,0.9);
    font-size: 13px;
}
.hr-kv-key {
    width: 70px;
    color: rgba(255,255,255,0.6);
    font-size: 12px;
}
.hr-kv-sep { color: rgba(255,255,255,0.5); }
.hr-kv-value {
    font-weight: 700;
    color: #fff;
    flex: 1;
}
.hr-kv-badge {
    background: rgba(255,255,255,0.18);
    color: #fff;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
}
.hr-kv-fecha {
    cursor: pointer;
    border-radius: 8px;
    padding: 4px 6px;
    transition: background 0.18s;
    position: relative;
}
.hr-kv-fecha:hover { background: rgba(255,255,255,0.06); }
.hr-kv-edit-icon { color: rgba(255,255,255,0.7); flex-shrink: 0; }
.hr-fecha-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    pointer-events: none; /* el row hace de click, esto solo para que pueda abrirse */
}

.hr-input-dark {
    width: 100%;
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    box-sizing: border-box;
    font-family: inherit;
}
.hr-input-dark::placeholder { color: rgba(255,255,255,0.45); }
.hr-input-dark:focus { outline: none; border-color: #2031E6; background: rgba(255,255,255,0.12); }

/* Botón "Agregar" pequeño dentro de cada card */
.hr-btn-add {
    padding: 6px 12px !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}
.hr-btn-add-danger {
    background: rgba(211, 47, 47, 0.1) !important;
    border-color: rgba(211, 47, 47, 0.3) !important;
    color: #D32F2F !important;
}
[data-theme="light"] .hr-btn-add-danger {
    background: rgba(211, 47, 47, 0.08) !important;
    color: #D32F2F !important;
}

/* Empty states */
.hr-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 12px;
    color: var(--text-secondary, #888);
    text-align: center;
}
.hr-empty svg { color: var(--text-secondary, #888); opacity: 0.6; }

/* Fila de local */
.hr-fila-local {
    background: var(--bg-secondary, #232323);
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
}
[data-theme="light"] .hr-fila-local {
    background: #f8fafc;
    border-color: #e2e8f0;
}
.hr-fila-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.hr-fila-num {
    width: 28px; height: 28px;
    background: rgba(32,49,230,0.12);
    color: #2031E6;
    font-weight: 800;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}
.hr-fila-info { flex: 1; min-width: 0; }
.hr-fila-info strong {
    display: block;
    font-size: 13px;
    color: var(--text-primary, #fff);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-theme="light"] .hr-fila-info strong { color: #1a1a1a; }
.hr-fila-info small {
    display: block;
    font-size: 11px;
    color: var(--text-secondary, #888);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hr-fila-del {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #ef5350;
    padding: 6px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hr-fila-del:hover { background: rgba(239, 83, 80, 0.12); }

/* Grupo cantidad/precio dentro de una fila de local */
.hr-grupo {
    border: 1px solid;
    border-radius: 10px;
    padding: 8px 10px;
    margin-bottom: 8px;
}
.hr-grupo-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 11px;
}
.hr-grupo-head strong { font-weight: 800; flex: 1; }
.hr-grupo-total { font-weight: 800; font-size: 12px; }
.hr-color-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.hr-grupo-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.hr-input-num {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: #1a1a1a;
    box-sizing: border-box;
    width: 100%;
    font-family: inherit;
}
.hr-input-num:focus {
    outline: none;
    border-color: #2031E6;
    box-shadow: 0 0 0 2px rgba(32, 49, 230, 0.18);
}
[data-theme="dark"] .hr-input-num {
    background: #2a2a30;
    border-color: rgba(255,255,255,0.12);
    color: #f1f1f1;
}

.hr-fila-subtotal {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(32,49,230,0.08);
    border-radius: 8px;
    padding: 8px 10px;
    margin-top: 4px;
}
.hr-fila-subtotal span { font-size: 12px; font-weight: 700; flex: 1; }
.hr-fila-subtotal strong { color: #2031E6; font-weight: 900; font-size: 13px; }

/* Filas de gastos */
.hr-gasto-row {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(211, 47, 47, 0.06);
    border: 1px solid rgba(211, 47, 47, 0.25);
    border-radius: 10px;
    padding: 8px;
    margin-bottom: 8px;
}
[data-theme="light"] .hr-gasto-row {
    background: #fdf2f2;
}

/* Resumen final */
.hr-caja-wrap { margin-bottom: 12px; }
.hr-caja-label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary, #888);
    margin-bottom: 6px;
    font-weight: 600;
}
.hr-caja-input {
    width: 100%;
    background: rgba(46,125,50,0.06);
    border: 1px solid rgba(46,125,50,0.25);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary, #fff);
    box-sizing: border-box;
    font-family: inherit;
}
[data-theme="light"] .hr-caja-input {
    background: #f1f8e9;
    color: #1a1a1a;
}
.hr-caja-input:focus {
    outline: none;
    border-color: #2E7D32;
    box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.18);
}

.hr-totales { display: flex; flex-direction: column; gap: 4px; }
.hr-total-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    font-size: 12.5px;
}
.hr-total-row span:nth-of-type(2) { flex: 1; color: var(--text-secondary, #aaa); }
.hr-total-row strong { font-weight: 800; font-size: 13.5px; }
.hr-total-final {
    border-top: 1px solid var(--border-color, rgba(255,255,255,0.1));
    margin-top: 4px;
    padding-top: 10px;
}
.hr-total-final span { color: var(--text-primary, #fff) !important; font-weight: 800; font-size: 14px; }
[data-theme="light"] .hr-total-final span { color: #1a1a1a !important; }
.hr-total-final strong { font-size: 16px; font-weight: 900; }

.hr-vuelto {
    margin-top: 10px;
    padding: 14px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, #2E7D32, #1B5E20);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}
.hr-vuelto.hr-vuelto-neg {
    background: linear-gradient(135deg, #D32F2F, #B71C1C);
}
.hr-vuelto-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 14px;
    flex: 1;
}
.hr-vuelto strong { font-size: 20px; font-weight: 900; }

.hr-btn-exportar {
    width: 100%;
    margin-top: 12px;
    padding: 12px !important;
    background: #D32F2F !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer;
}
.hr-btn-exportar:hover { background: #B71C1C !important; }

/* Modal seleccionar local */
.hr-local-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    background: var(--bg-secondary, #1a1a1a);
    border-radius: 10px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: background 0.18s;
}
[data-theme="light"] .hr-local-item {
    background: #f8fafc;
    border-color: #e2e8f0;
}
.hr-local-item:hover { background: rgba(32, 49, 230, 0.08); }
.hr-local-ico {
    width: 34px; height: 34px;
    background: rgba(32, 49, 230, 0.12);
    color: #2031E6;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hr-local-info { flex: 1; min-width: 0; }
.hr-local-info strong {
    display: block;
    font-size: 13px;
    color: var(--text-primary, #fff);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-theme="light"] .hr-local-info strong { color: #1a1a1a; }
.hr-local-info small {
    display: block;
    font-size: 11px;
    color: var(--text-secondary, #888);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hr-local-add { flex-shrink: 0; }

/* ====== HISTORIAL HR ====== */
.hr-filters-bar {
    display: flex;
    align-items: end;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--bg-elevated, #1a1a1a);
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    padding: 14px 16px;
    border-radius: 12px;
    margin-bottom: 16px;
}
[data-theme="light"] .hr-filters-bar {
    background: #ffffff;
    border-color: #e2e8f0;
}
.hr-filter-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 160px;
}
.hr-filter-item label {
    font-size: 12px;
    color: var(--text-secondary, #888);
    font-weight: 600;
}
.hr-filter-item select,
.hr-filter-item input {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color, rgba(255,255,255,0.12));
    background: var(--bg-secondary, #2a2a30);
    color: var(--text-primary, #fff);
    font-size: 13px;
    font-family: inherit;
}
[data-theme="light"] .hr-filter-item select,
[data-theme="light"] .hr-filter-item input {
    background: #ffffff;
    color: #1a1a1a;
    border-color: #e2e8f0;
}

.hr-historial-list { display: flex; flex-direction: column; gap: 12px; }

.hr-historial-card {
    background: var(--bg-elevated, #1a1a1a);
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .hr-historial-card {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.hr-historial-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.hr-historial-fecha-chip {
    background: rgba(32, 49, 230, 0.12);
    color: #2031E6;
    padding: 6px 10px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.hr-historial-chofer { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.hr-historial-chofer strong {
    color: var(--text-primary, #fff);
    font-size: 13px;
    font-weight: 800;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-theme="light"] .hr-historial-chofer strong { color: #1a1a1a; }
.hr-historial-chofer small { color: var(--text-secondary, #888); font-size: 11px; }
.hr-historial-vuelto {
    text-align: right;
    display: flex; flex-direction: column;
}
.hr-historial-vuelto small {
    color: var(--text-secondary, #888);
    font-size: 10px;
}
.hr-historial-vuelto strong { font-weight: 900; font-size: 14px; }

.hr-historial-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 10px;
}
.hr-historial-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 8px;
    border: 1px solid;
    font-size: 11px;
    font-weight: 700;
}

.hr-historial-mini-totales {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 10px;
}
.hr-historial-mini {
    padding: 8px;
    border-radius: 8px;
    border: 1px solid;
    display: flex; flex-direction: column;
    min-width: 0;
}
.hr-historial-mini small {
    font-size: 10px;
    color: var(--text-secondary, #aaa);
    font-weight: 600;
}
.hr-historial-mini strong {
    font-size: 12.5px;
    font-weight: 800;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.hr-historial-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.hr-btn-regenerar {
    flex: 1;
    color: #D32F2F !important;
    background: transparent !important;
    border: 1px solid #D32F2F !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 10px !important;
}
.hr-btn-regenerar:hover { background: rgba(211, 47, 47, 0.08) !important; }
.hr-btn-eliminar {
    background: transparent;
    border: 1px solid rgba(211, 47, 47, 0.4);
    border-radius: 10px;
    padding: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hr-btn-eliminar:hover { background: rgba(211, 47, 47, 0.08); }

@media (max-width: 700px) {
    .hr-historial-mini-totales { grid-template-columns: repeat(2, 1fr); }
    .hr-historial-top { flex-wrap: wrap; }
}

/* ============================================================
   Panel "Llegaste a..." (finalizar ruta) - Tema OSCURO
   El panel base estaba fijo en blanco. Aquí lo adaptamos
   cuando el tema activo es oscuro.
   ============================================================ */
[data-theme="dark"] .arrival-panel {
    background: #1f1f24;
    color: #f1f1f1;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .arrival-handle {
    background: rgba(255, 255, 255, 0.25);
}
[data-theme="dark"] .arrival-close {
    color: #f1f1f1;
}
[data-theme="dark"] .arrival-close:hover {
    background: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .arrival-title {
    color: #ffffff;
}
[data-theme="dark"] .arrival-address {
    color: rgba(255, 255, 255, 0.65);
}
[data-theme="dark"] .arrival-cantidades-title {
    color: #ffffff;
}
[data-theme="dark"] .arrival-photo-label,
[data-theme="dark"] .arrival-cantidad-label,
[data-theme="dark"] .arrival-notas-label {
    color: rgba(255, 255, 255, 0.85);
}
[data-theme="dark"] .arrival-photo-upload {
    background: #2a2a30;
    border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .arrival-photo-upload:hover {
    border-color: #4f8dff;
    background: rgba(79, 141, 255, 0.08);
}
[data-theme="dark"] .arrival-photo-placeholder {
    color: rgba(255, 255, 255, 0.65);
}
[data-theme="dark"] .arrival-photo-placeholder svg {
    color: rgba(255, 255, 255, 0.45);
}
[data-theme="dark"] .arrival-photo-remove {
    background: rgba(0, 0, 0, 0.7);
}
[data-theme="dark"] .arrival-cantidad-input,
[data-theme="dark"] .arrival-notas-input {
    background: #2a2a30;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #f1f1f1;
}
[data-theme="dark"] .arrival-cantidad-input::placeholder,
[data-theme="dark"] .arrival-notas-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}
[data-theme="dark"] .arrival-cantidad-input:focus,
[data-theme="dark"] .arrival-notas-input:focus {
    background: #34343c;
    border-color: #4f8dff;
    box-shadow: 0 0 0 2px rgba(79, 141, 255, 0.25);
    outline: none;
}
[data-theme="dark"] .arrival-btn-finalizar {
    background: linear-gradient(135deg, #4f8dff 0%, #2031E6 100%);
    color: #fff;
}
[data-theme="dark"] .arrival-btn-finalizar:hover:not(:disabled) {
    background: linear-gradient(135deg, #2031E6 0%, #0F1FB8 100%);
    box-shadow: 0 4px 14px rgba(79, 141, 255, 0.35);
}
[data-theme="dark"] .arrival-btn-finalizar:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ============================================================
   Recogerás / Pagarás en (chips dentro del panel de ruta y
   mini-panel flotante "rutaInfoFloating")
   ============================================================ */
.ruta-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.ruta-chip {
    --c: #455A64;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(69, 90, 100, 0.10);
    border: 1px solid rgba(69, 90, 100, 0.35);
    font-size: 12px;
    line-height: 1.1;
    color: var(--c);
    font-weight: 700;
    white-space: nowrap;
}
.ruta-chip-ico { font-size: 13px; }
.ruta-chip-label {
    font-size: 11px;
    color: var(--text-secondary, #666);
    font-weight: 500;
    margin-right: 1px;
}
.ruta-chip-value { color: var(--c); }

.ruta-chip-pago {
    --c: #2E7D32;
    background: rgba(46, 125, 50, 0.10);
    border-color: rgba(46, 125, 50, 0.35);
}

[data-theme="dark"] .ruta-chip-label {
    color: rgba(255, 255, 255, 0.65);
}

/* Mini-panel flotante encima del mapa durante el tracking */
.ruta-info-floating {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1500;
    width: min(560px, calc(100vw - 24px));
    background: #ffffff;
    color: #1a1a1a;
    border: 1px solid rgba(32, 49, 230, 0.25);
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    padding: 12px 14px 14px;
    animation: hrSlideDown 0.25s ease-out;
}
@keyframes hrSlideDown {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
.ruta-floating-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: transparent;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
}
.ruta-floating-close:hover { background: rgba(0,0,0,0.06); color: #222; }
.ruta-floating-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.ruta-floating-ico {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: rgba(32, 49, 230, 0.12);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.ruta-floating-titles { min-width: 0; }
.ruta-floating-title {
    font-size: 14px;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.1;
}
.ruta-floating-sub {
    font-size: 12px;
    color: #666;
    font-weight: 500;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ruta-floating-empty {
    margin-top: 8px;
    font-size: 12px;
    color: #777;
    background: #f3f3f5;
    padding: 6px 10px;
    border-radius: 8px;
}
.ruta-floating-divider {
    height: 1px;
    background: rgba(0,0,0,0.08);
    margin: 10px 0;
}
.ruta-floating-pagar-head {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 700; color: #1a1a1a;
}

/* Tema oscuro para el panel flotante */
[data-theme="dark"] .ruta-info-floating {
    background: #1f1f24;
    color: #f1f1f1;
    border-color: rgba(79, 141, 255, 0.35);
    box-shadow: 0 6px 24px rgba(0,0,0,0.45);
}
[data-theme="dark"] .ruta-floating-close { color: #c0c0c0; }
[data-theme="dark"] .ruta-floating-close:hover { background: rgba(255,255,255,0.08); color: #fff; }
[data-theme="dark"] .ruta-floating-ico { background: rgba(79, 141, 255, 0.18); }
[data-theme="dark"] .ruta-floating-title { color: #fff; }
[data-theme="dark"] .ruta-floating-sub { color: rgba(255,255,255,0.7); }
[data-theme="dark"] .ruta-floating-empty {
    background: #2a2a30;
    color: rgba(255,255,255,0.75);
}
[data-theme="dark"] .ruta-floating-divider { background: rgba(255,255,255,0.12); }
[data-theme="dark"] .ruta-floating-pagar-head { color: #fff; }

@media (max-width: 600px) {
    .ruta-info-floating { top: 70px; padding: 10px 12px 12px; }
    .ruta-floating-title { font-size: 13px; }
    .ruta-chip { font-size: 11px; padding: 3px 8px; }
}

/* ============================================================
   Rutas alternativas (sugerencias estilo Waze)
   Badges flotantes encima de cada ruta gris alternativa.
   ============================================================ */
.route-alt-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.96);
    color: #1a1a1a;
    border: 1px solid #b0bec5;
    border-radius: 12px;
    padding: 4px 9px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    font-weight: 700;
    line-height: 1.05;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    user-select: none;
    min-width: 64px;
    text-align: center;
}
.route-alt-badge:hover {
    transform: scale(1.06);
    box-shadow: 0 4px 14px rgba(0,0,0,0.22);
    border-color: #2031E6;
}
.route-alt-badge-time {
    font-size: 12px;
    color: #1a1a1a;
}
.route-alt-badge-diff {
    font-size: 10px;
    color: #607d8b;
    font-weight: 600;
    margin-top: 1px;
}
[data-theme="dark"] .route-alt-badge {
    background: rgba(33, 33, 38, 0.95);
    color: #f1f1f1;
    border-color: rgba(255,255,255,0.25);
    box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
[data-theme="dark"] .route-alt-badge:hover {
    border-color: #4f8dff;
}
[data-theme="dark"] .route-alt-badge-time { color: #fff; }
[data-theme="dark"] .route-alt-badge-diff { color: rgba(255,255,255,0.7); }

/* ============================================================
   Historial: chip "operador" visible para admin/asesor cuando
   ven el historial global de todos los operadores.
   ============================================================ */
.historial-item .historial-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.historial-operador-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(32, 49, 230, 0.12);
    color: #4f8dff;
    border: 1px solid rgba(32, 49, 230, 0.35);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
[data-theme="light"] .historial-operador-chip {
    background: rgba(32, 49, 230, 0.08);
    color: #2031E6;
    border-color: rgba(32, 49, 230, 0.3);
}

.btn-caja-diaria {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    box-shadow: 0 2px 8px rgba(46, 125, 50, 0.35);
}
.btn-caja-diaria:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 4px 14px rgba(46, 125, 50, 0.45);
}
.btn-caja-diaria:active { transform: translateY(0); }

[data-theme="light"] .btn-caja-diaria {
    background: linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%);
    color: #fff;
    border-color: rgba(0, 0, 0, 0.08);
}

@media (max-width: 768px) {
    .btn-caja-diaria { width: 32px; height: 32px; }
}
@media (max-width: 480px) {
    .btn-caja-diaria { width: 28px; height: 28px; }
    .btn-caja-diaria svg { width: 14px; height: 14px; }
}

/* Overlay y contenido del modal */
.caja-diaria-modal {
    z-index: 2200;
}
body.caja-modal-open { overflow: hidden; }

.caja-diaria-content {
    background: rgba(20, 22, 28, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 18px;
    width: 100%;
    max-width: 640px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    position: relative;
}

.caja-diaria-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.caja-diaria-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.caja-diaria-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.4);
}

.caja-diaria-title-wrap h3 {
    margin: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
}

.caja-diaria-title-wrap p {
    margin: 2px 0 0 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    font-weight: 500;
}

/* Toolbar (fecha + búsqueda) */
.caja-diaria-toolbar {
    display: flex;
    gap: 8px;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    align-items: stretch;
    flex-wrap: wrap;
}

.caja-diaria-date,
.caja-diaria-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 8px 12px;
    color: rgba(255, 255, 255, 0.8);
    transition: border-color 0.2s, background 0.2s;
}
.caja-diaria-date {
    color: #4CAF50;
    background: rgba(46, 125, 50, 0.12);
    border-color: rgba(46, 125, 50, 0.35);
    font-weight: 700;
    font-size: 13px;
}
.caja-diaria-date svg { color: #4CAF50; }

.caja-diaria-date input,
.caja-diaria-search input {
    background: transparent;
    border: 0;
    outline: 0;
    color: #fff;
    font-size: 13px;
    font-family: inherit;
    padding: 0;
    min-width: 0;
}
.caja-diaria-date input {
    color: #4CAF50;
    font-weight: 700;
    color-scheme: dark;
}
.caja-diaria-date input::-webkit-calendar-picker-indicator {
    filter: invert(0.6) sepia(1) saturate(5) hue-rotate(80deg);
    cursor: pointer;
}
.caja-diaria-search { flex: 1; min-width: 180px; }
.caja-diaria-search input { width: 100%; }
.caja-diaria-search input::placeholder { color: rgba(255, 255, 255, 0.4); }

.caja-diaria-date:focus-within,
.caja-diaria-search:focus-within {
    border-color: rgba(46, 125, 50, 0.6);
    background: rgba(46, 125, 50, 0.1);
}

/* Body / lista */
.caja-diaria-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px 18px;
    -webkit-overflow-scrolling: touch;
}

.caja-diaria-loading,
.caja-diaria-empty,
.caja-diaria-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
}
.caja-diaria-error { color: #ff9b9b; }
.caja-diaria-error svg { color: #ff5252; }
.caja-retry-btn {
    margin-top: 6px;
    padding: 8px 16px;
    background: #2E7D32;
    border: 0;
    border-radius: 10px;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    font-size: 13px;
}
.caja-retry-btn:hover { background: #1B5E20; }

.caja-diaria-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.caja-row {
    display: grid;
    grid-template-columns: 36px 1fr auto auto auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    transition: background 0.15s, border-color 0.15s;
}
.caja-row:hover { background: rgba(255, 255, 255, 0.05); }

.caja-row.is-assigned {
    background: rgba(46, 125, 50, 0.08);
    border-color: rgba(46, 125, 50, 0.3);
}

.caja-row-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.caja-row-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.caja-row-name {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.caja-row-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
}
.caja-row-status.assigned { color: #66BB6A; }
.caja-row-status.pending { color: rgba(255, 255, 255, 0.45); font-weight: 600; }

.caja-row-amount {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 6px 10px;
    transition: border-color 0.2s, background 0.2s;
}
.caja-row-amount:focus-within {
    border-color: #4CAF50;
    background: rgba(46, 125, 50, 0.15);
}
.caja-row-currency {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-weight: 700;
}
.caja-monto-input {
    width: 84px;
    background: transparent;
    border: 0;
    outline: 0;
    color: #4CAF50;
    font-weight: 800;
    font-size: 14px;
    text-align: right;
    font-family: inherit;
    padding: 0;
}
.caja-monto-input::placeholder { color: rgba(255, 255, 255, 0.3); font-weight: 600; }
.caja-monto-input:disabled { opacity: 0.5; cursor: not-allowed; }

.caja-row-btn {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.15s, color 0.15s, border-color 0.15s;
}
.caja-row-btn:hover { transform: translateY(-1px); }
.caja-row-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.caja-row-btn.save {
    background: rgba(46, 125, 50, 0.18);
    border-color: rgba(46, 125, 50, 0.45);
    color: #66BB6A;
}
.caja-row-btn.save:hover:not(:disabled) {
    background: #2E7D32;
    border-color: #2E7D32;
    color: #fff;
}

.caja-row-btn.delete {
    background: rgba(244, 67, 54, 0.12);
    border-color: rgba(244, 67, 54, 0.35);
    color: #ef5350;
}
.caja-row-btn.delete:hover:not(:disabled) {
    background: rgba(244, 67, 54, 0.22);
    color: #fff;
    border-color: #ef5350;
}

.caja-row-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: caja-spin 0.7s linear infinite;
    display: inline-block;
}
@keyframes caja-spin { to { transform: rotate(360deg); } }

/* Toast interno del modal */
.caja-toast {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translate(-50%, 16px);
    background: rgba(20, 20, 20, 0.95);
    color: #fff;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
    z-index: 5;
    max-width: 90%;
    text-align: center;
}
.caja-toast.visible {
    opacity: 1;
    transform: translate(-50%, 0);
}
.caja-toast[data-type="success"] {
    border-color: rgba(46, 125, 50, 0.6);
    background: rgba(27, 60, 30, 0.95);
}
.caja-toast[data-type="error"] {
    border-color: rgba(244, 67, 54, 0.6);
    background: rgba(60, 24, 24, 0.95);
}

/* Light theme */
[data-theme="light"] .caja-diaria-content {
    background: #fff;
    border-color: var(--border-color);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}
[data-theme="light"] .caja-diaria-header {
    border-bottom-color: var(--border-color);
}
[data-theme="light"] .caja-diaria-title-wrap h3 { color: var(--text-primary); }
[data-theme="light"] .caja-diaria-title-wrap p { color: var(--text-secondary); }

[data-theme="light"] .caja-diaria-toolbar { border-bottom-color: var(--border-color); }
[data-theme="light"] .caja-diaria-search {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}
[data-theme="light"] .caja-diaria-search input { color: var(--text-primary); }
[data-theme="light"] .caja-diaria-search input::placeholder { color: var(--text-secondary); }
[data-theme="light"] .caja-diaria-date {
    background: rgba(46, 125, 50, 0.08);
    border-color: rgba(46, 125, 50, 0.3);
    color: #2E7D32;
}
[data-theme="light"] .caja-diaria-date input { color: #2E7D32; color-scheme: light; }
[data-theme="light"] .caja-diaria-date input::-webkit-calendar-picker-indicator { filter: none; }

[data-theme="light"] .caja-row {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}
[data-theme="light"] .caja-row:hover { background: rgba(46, 125, 50, 0.05); }
[data-theme="light"] .caja-row.is-assigned {
    background: rgba(46, 125, 50, 0.08);
    border-color: rgba(46, 125, 50, 0.3);
}
[data-theme="light"] .caja-row-avatar {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    color: #fff;
}
[data-theme="light"] .caja-row-name { color: var(--text-primary); }
[data-theme="light"] .caja-row-status.pending { color: var(--text-secondary); }
[data-theme="light"] .caja-row-amount {
    background: #fff;
    border-color: var(--border-color);
}
[data-theme="light"] .caja-row-currency { color: var(--text-primary); }
[data-theme="light"] .caja-monto-input { color: #2E7D32; }
[data-theme="light"] .caja-row-btn {
    background: #fff;
    border-color: var(--border-color);
    color: var(--text-primary);
}
[data-theme="light"] .caja-diaria-loading,
[data-theme="light"] .caja-diaria-empty { color: var(--text-secondary); }

/* Responsive */
@media (max-width: 600px) {
    .caja-diaria-content { max-width: 100%; border-radius: 14px 14px 0 0; max-height: 95vh; }
    .caja-diaria-modal { align-items: flex-end; padding: 0; }
    .caja-diaria-header { padding: 14px 16px; }
    .caja-diaria-toolbar { padding: 10px 16px; gap: 6px; }
    .caja-diaria-body { padding: 10px 12px 14px; }
    .caja-row {
        grid-template-columns: 32px 1fr auto;
        grid-template-areas:
            "avatar info amount"
            "avatar info actions";
        row-gap: 6px;
    }
    .caja-row-avatar { grid-area: avatar; width: 32px; height: 32px; font-size: 13px; }
    .caja-row-info { grid-area: info; }
    .caja-row-amount { grid-area: amount; }
    .caja-row-btn { width: 30px; height: 30px; }
    .caja-row .caja-row-btn.save { grid-area: actions; justify-self: end; }
    .caja-row .caja-row-btn.delete { grid-area: actions; justify-self: start; }
    .caja-monto-input { width: 70px; font-size: 13px; }
    .caja-diaria-title-wrap h3 { font-size: 15px; }
}

/* ============================================================
   MÉTODOS DE PAGO — chips multi-select en el formulario,
   chips read-only en el panel de detalle, y modal CRUD.
   Réplica visual de _MetodosPagoManagerSheet y
   _buildMetodosPagoSection (Flutter, locales_screen.dart).
   ============================================================ */

/* Botón en el header del panel de locales */
.btn-metodos-pago {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.35);
    flex-shrink: 0;
}
.btn-metodos-pago:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.45);
}
.btn-metodos-pago:active { transform: translateY(0); }

[data-theme="light"] .btn-metodos-pago {
    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
    color: #fff;
    border-color: rgba(0, 0, 0, 0.08);
}
@media (max-width: 768px) { .btn-metodos-pago { width: 32px; height: 32px; } }
@media (max-width: 480px) {
    .btn-metodos-pago { width: 28px; height: 28px; }
    .btn-metodos-pago svg { width: 14px; height: 14px; }
}

/* === Sección dentro del formulario de Local === */
.metodos-pago-form-group {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.02);
}
.metodos-pago-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.metodos-pago-form-header label {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}
.metodos-pago-form-refresh {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, transform 0.15s;
}
.metodos-pago-form-refresh:hover {
    background: rgba(99, 102, 241, 0.18);
    color: #a5b4fc;
    transform: rotate(-90deg);
}

.metodos-pago-chips,
.metodos-pago-chips-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 38px;
}
.metodos-pago-chips-loading,
.metodos-pago-chips-empty,
.metodos-pago-chips-error {
    width: 100%;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12.5px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    font-style: italic;
}
.metodos-pago-chips-error { color: #ff9b9b; border-color: rgba(244, 67, 54, 0.35); background: rgba(244, 67, 54, 0.05); font-style: normal; }

.metodo-pago-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px 7px 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
    user-select: none;
}
.metodo-pago-chip:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.35);
    color: #fff;
}
.metodo-pago-chip:active { transform: scale(0.97); }
.metodo-pago-chip.selected {
    background: rgba(99, 102, 241, 0.18);
    border-color: #6366F1;
    color: #fff;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}
.metodo-pago-chip-icon {
    display: inline-flex;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.15s;
}
.metodo-pago-chip.selected .metodo-pago-chip-icon { color: #a5b4fc; }
.metodo-pago-chip-check {
    display: none;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #6366F1;
    color: #fff;
    margin-left: 2px;
}
.metodo-pago-chip.selected .metodo-pago-chip-check { display: inline-flex; }

/* Light theme — form chips */
[data-theme="light"] .metodos-pago-form-group {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}
[data-theme="light"] .metodos-pago-form-header label { color: var(--text-primary); }
[data-theme="light"] .metodos-pago-form-refresh {
    background: #fff;
    border-color: var(--border-color);
    color: var(--text-secondary);
}
[data-theme="light"] .metodos-pago-chips-loading,
[data-theme="light"] .metodos-pago-chips-empty {
    background: #fff;
    border-color: var(--border-color);
    color: var(--text-secondary);
}
[data-theme="light"] .metodo-pago-chip {
    background: #fff;
    border-color: var(--border-color);
    color: var(--text-primary);
}
[data-theme="light"] .metodo-pago-chip:hover {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.4);
}
[data-theme="light"] .metodo-pago-chip.selected {
    background: rgba(99, 102, 241, 0.12);
    color: #4F46E5;
}
[data-theme="light"] .metodo-pago-chip-icon { color: var(--text-secondary); }

/* === Chips read-only en el panel de detalle === */
.local-metodos-pago-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.local-metodo-pago-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.4);
    border-radius: 999px;
    color: #c7d2fe;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.local-metodo-pago-chip svg {
    width: 13px;
    height: 13px;
    color: #a5b4fc;
}
[data-theme="light"] .local-metodo-pago-chip {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.35);
    color: #4F46E5;
}
[data-theme="light"] .local-metodo-pago-chip svg { color: #6366F1; }

/* === Modal manager CRUD === */
.metodos-pago-modal { z-index: 2200; }
body.metodos-pago-modal-open { overflow: hidden; }

.metodos-pago-content {
    background: rgba(20, 22, 28, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 18px;
    width: 100%;
    max-width: 560px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    position: relative;
}

.metodos-pago-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.metodos-pago-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}
.metodos-pago-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
}
.metodos-pago-title-wrap h3 {
    margin: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
}
.metodos-pago-title-wrap p {
    margin: 2px 0 0 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
}

.metodos-pago-create {
    display: flex;
    gap: 8px;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.metodos-pago-create-input {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 8px 12px;
    color: rgba(255, 255, 255, 0.6);
    transition: border-color 0.2s, background 0.2s;
}
.metodos-pago-create-input:focus-within {
    border-color: rgba(99, 102, 241, 0.6);
    background: rgba(99, 102, 241, 0.08);
    color: #a5b4fc;
}
.metodos-pago-create-input input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    color: #fff;
    font-size: 13px;
    font-family: inherit;
    padding: 0;
    min-width: 0;
}
.metodos-pago-create-input input::placeholder { color: rgba(255, 255, 255, 0.4); }

.metodos-pago-create-btn {
    position: relative;
    padding: 0 18px;
    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
    border: 0;
    border-radius: 10px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    transition: filter 0.15s, transform 0.1s;
}
.metodos-pago-create-btn:hover:not(:disabled) { filter: brightness(1.08); }
.metodos-pago-create-btn:active { transform: translateY(1px); }
.metodos-pago-create-btn:disabled { opacity: 0.7; cursor: not-allowed; }

.metodos-pago-create-spinner {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: metodos-pago-spin 0.7s linear infinite;
}
@keyframes metodos-pago-spin { to { transform: rotate(360deg); } }

.metodos-pago-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px 18px;
    -webkit-overflow-scrolling: touch;
}
.metodos-pago-loading,
.metodos-pago-empty,
.metodos-pago-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
}
.metodos-pago-error { color: #ff9b9b; }
.metodos-pago-retry-btn {
    margin-top: 6px;
    padding: 8px 16px;
    background: #6366F1;
    border: 0;
    border-radius: 10px;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    font-size: 13px;
}
.metodos-pago-retry-btn:hover { background: #4F46E5; }

.metodo-pago-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.metodo-pago-row {
    display: grid;
    grid-template-columns: 36px 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    transition: background 0.15s, border-color 0.15s;
}
.metodo-pago-row:hover {
    background: rgba(99, 102, 241, 0.06);
    border-color: rgba(99, 102, 241, 0.25);
}
.metodo-pago-row-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(99, 102, 241, 0.3);
}
.metodo-pago-row-name {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.metodo-pago-row-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.15s, color 0.15s, border-color 0.15s;
}
.metodo-pago-row-btn:hover { transform: translateY(-1px); }
.metodo-pago-row-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.metodo-pago-row-btn.edit {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.35);
    color: #a5b4fc;
}
.metodo-pago-row-btn.edit:hover:not(:disabled) {
    background: #6366F1;
    border-color: #6366F1;
    color: #fff;
}
.metodo-pago-row-btn.delete {
    background: rgba(244, 67, 54, 0.12);
    border-color: rgba(244, 67, 54, 0.35);
    color: #ef5350;
}
.metodo-pago-row-btn.delete:hover:not(:disabled) {
    background: rgba(244, 67, 54, 0.25);
    color: #fff;
    border-color: #ef5350;
}
.metodo-pago-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: metodos-pago-spin 0.7s linear infinite;
    display: inline-block;
}

/* Toast del modal */
.metodos-pago-toast {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translate(-50%, 16px);
    background: rgba(20, 20, 20, 0.95);
    color: #fff;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
    z-index: 5;
    max-width: 90%;
    text-align: center;
}
.metodos-pago-toast.visible { opacity: 1; transform: translate(-50%, 0); }
.metodos-pago-toast[data-type="success"] {
    border-color: rgba(99, 102, 241, 0.6);
    background: rgba(35, 30, 80, 0.95);
}
.metodos-pago-toast[data-type="error"] {
    border-color: rgba(244, 67, 54, 0.6);
    background: rgba(60, 24, 24, 0.95);
}

/* Light theme — modal */
[data-theme="light"] .metodos-pago-content {
    background: #fff;
    border-color: var(--border-color);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}
[data-theme="light"] .metodos-pago-header { border-bottom-color: var(--border-color); }
[data-theme="light"] .metodos-pago-title-wrap h3 { color: var(--text-primary); }
[data-theme="light"] .metodos-pago-title-wrap p { color: var(--text-secondary); }
[data-theme="light"] .metodos-pago-create { border-bottom-color: var(--border-color); }
[data-theme="light"] .metodos-pago-create-input {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}
[data-theme="light"] .metodos-pago-create-input input { color: var(--text-primary); }
[data-theme="light"] .metodos-pago-create-input input::placeholder { color: var(--text-secondary); }
[data-theme="light"] .metodo-pago-row {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}
[data-theme="light"] .metodo-pago-row:hover {
    background: rgba(99, 102, 241, 0.06);
    border-color: rgba(99, 102, 241, 0.3);
}
[data-theme="light"] .metodo-pago-row-name { color: var(--text-primary); }
[data-theme="light"] .metodos-pago-loading,
[data-theme="light"] .metodos-pago-empty { color: var(--text-secondary); }

/* Responsive del modal */
@media (max-width: 600px) {
    .metodos-pago-content { max-width: 100%; border-radius: 14px 14px 0 0; max-height: 95vh; }
    .metodos-pago-modal { align-items: flex-end; padding: 0; }
    .metodos-pago-header { padding: 14px 16px; }
    .metodos-pago-create { padding: 10px 16px; }
    .metodos-pago-body { padding: 10px 12px 14px; }
    .metodos-pago-title-wrap h3 { font-size: 15px; }
    .metodo-pago-row { grid-template-columns: 32px 1fr auto auto; gap: 8px; padding: 8px 10px; }
    .metodo-pago-row-icon { width: 32px; height: 32px; }
    .metodo-pago-row-btn { width: 30px; height: 30px; }
    .metodos-pago-create-btn { padding: 0 12px; min-width: 70px; font-size: 12px; }
}

/* ============================================================
   CERTIFICADO — Réplica visual de _buildCertificadoSection
   (panel de detalle) y _buildCertificadoFileSection (formulario)
   de app/lib/screens/locales_screen.dart.
   ============================================================ */

/* ---------- Sección en el panel de DETALLE ---------- */
.local-certificado-section {
    margin-top: 8px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.local-certificado-section.is-emitido {
    background: rgba(34, 197, 94, 0.06);
    border-color: rgba(34, 197, 94, 0.35);
}
.local-certificado-section.is-pendiente {
    background: rgba(245, 158, 11, 0.06);
    border-color: rgba(245, 158, 11, 0.35);
}

.cert-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
}
.cert-head-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
}
.local-certificado-section.is-emitido .cert-head-icon { background: rgba(34, 197, 94, 0.18); color: #4ade80; }
.local-certificado-section.is-pendiente .cert-head-icon { background: rgba(245, 158, 11, 0.18); color: #fbbf24; }
.local-certificado-section.is-emitido .cert-head-label { color: #86efac; }
.local-certificado-section.is-pendiente .cert-head-label { color: #fcd34d; }

.cert-busy-indicator {
    margin-left: auto;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: cert-spin 0.7s linear infinite;
}
@keyframes cert-spin { to { transform: rotate(360deg); } }

/* Preview */
.certificado-preview {
    position: relative;
    width: 100%;
    min-height: 110px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    transition: border-color 0.15s, transform 0.15s;
}
.certificado-preview:hover { border-color: rgba(99, 102, 241, 0.5); transform: scale(1.005); }
.certificado-preview.image img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}
.certificado-preview-broken {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 24px;
    color: rgba(255, 255, 255, 0.5);
}
.certificado-preview.preview-error .certificado-preview-broken { display: flex; }
.certificado-preview.pdf {
    flex-direction: column;
    padding: 18px 12px;
    background: rgba(220, 53, 69, 0.07);
    color: #fca5a5;
    gap: 4px;
}
.certificado-preview-title {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    margin-top: 4px;
}
.certificado-preview-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
}

.cert-helper {
    margin: 0;
    padding: 8px 10px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    line-height: 1.45;
}

/* Botones de acción */
.cert-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.cert-btn {
    flex: 1 1 90px;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
    white-space: nowrap;
}
.cert-btn:hover:not(:disabled) { transform: translateY(-1px); }
.cert-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.cert-btn-view { color: #a5b4fc; border-color: rgba(99, 102, 241, 0.35); background: rgba(99, 102, 241, 0.08); }
.cert-btn-view:hover:not(:disabled) { background: #6366F1; color: #fff; border-color: #6366F1; }

.cert-btn-replace { color: #4ade80; border-color: rgba(34, 197, 94, 0.4); background: rgba(34, 197, 94, 0.08); }
.cert-btn-replace:hover:not(:disabled) { background: rgba(34, 197, 94, 0.85); color: #fff; border-color: rgba(34, 197, 94, 0.9); }

.cert-btn-delete { color: #fca5a5; border-color: rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.08); }
.cert-btn-delete:hover:not(:disabled) { background: rgba(239, 68, 68, 0.85); color: #fff; border-color: rgba(239, 68, 68, 0.9); }

.cert-btn-upload-primary {
    width: 100%;
    flex: 0 0 100%;
    padding: 11px 14px;
    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
}
.cert-btn-upload-primary:hover:not(:disabled) { filter: brightness(1.08); }

/* Toggle de estado manual */
.cert-toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.78);
}
.cert-toggle-label {
    flex: 1;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
}
.cert-toggle-switch {
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, border-color 0.2s;
    flex-shrink: 0;
}
.cert-toggle-switch.on {
    background: #22c55e;
    border-color: #16a34a;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}
.cert-toggle-switch:disabled { opacity: 0.5; cursor: not-allowed; }
.cert-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s;
}
.cert-toggle-switch.on .cert-toggle-knob { transform: translateX(16px); }

/* Light theme — detalle */
[data-theme="light"] .local-certificado-section {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}
[data-theme="light"] .local-certificado-section.is-emitido {
    background: rgba(34, 197, 94, 0.05);
    border-color: rgba(34, 197, 94, 0.3);
}
[data-theme="light"] .local-certificado-section.is-pendiente {
    background: rgba(245, 158, 11, 0.05);
    border-color: rgba(245, 158, 11, 0.3);
}
[data-theme="light"] .local-certificado-section.is-emitido .cert-head-label { color: #15803d; }
[data-theme="light"] .local-certificado-section.is-pendiente .cert-head-label { color: #b45309; }
[data-theme="light"] .cert-helper {
    background: #fff;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}
[data-theme="light"] .certificado-preview { background: #f8fafc; color: var(--text-secondary); }
[data-theme="light"] .certificado-preview-title { color: var(--text-primary); }
[data-theme="light"] .certificado-preview-sub { color: var(--text-secondary); }
[data-theme="light"] .cert-btn {
    background: #fff;
    color: var(--text-primary);
    border-color: var(--border-color);
}
[data-theme="light"] .cert-toggle-row {
    background: #fff;
    border-color: var(--border-color);
    color: var(--text-secondary);
}

/* ---------- Sección en el FORMULARIO ---------- */
.certificado-file-group {
    padding: 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.certificado-file-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    font-size: 14px;
}
.certificado-file-header svg { color: #a5b4fc; flex-shrink: 0; }
.certificado-file-help {
    display: block;
    margin: 6px 0 10px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    line-height: 1.4;
}
.certificado-file-help strong { color: rgba(255, 255, 255, 0.85); }

.certificado-file-preview {
    margin-bottom: 10px;
}
.cert-file-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
}
.cert-file-card-new {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.4);
}
.cert-file-card-existing {
    background: rgba(59, 130, 246, 0.07);
    border-color: rgba(59, 130, 246, 0.35);
}
.cert-file-card-info { min-width: 0; }
.cert-file-card-title {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cert-file-card-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 2px;
}
.cert-file-card-sub a { color: #a5b4fc; text-decoration: underline; }
.cert-file-card-remove {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fca5a5;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.cert-file-card-remove:hover {
    background: #ef4444;
    color: #fff;
}

.certificado-file-pick-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1.5px dashed rgba(99, 102, 241, 0.5);
    background: rgba(99, 102, 241, 0.06);
    color: #a5b4fc;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.certificado-file-pick-btn:hover {
    background: rgba(99, 102, 241, 0.12);
    border-color: #6366F1;
    color: #c7d2fe;
}

[data-theme="light"] .certificado-file-group {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}
[data-theme="light"] .certificado-file-header { color: var(--text-primary); }
[data-theme="light"] .certificado-file-help { color: var(--text-secondary); }
[data-theme="light"] .certificado-file-help strong { color: var(--text-primary); }
[data-theme="light"] .cert-file-card {
    background: #fff;
    border-color: var(--border-color);
}
[data-theme="light"] .cert-file-card-title { color: var(--text-primary); }
[data-theme="light"] .cert-file-card-sub { color: var(--text-secondary); }
[data-theme="light"] .certificado-file-pick-btn {
    background: rgba(99, 102, 241, 0.05);
    color: #4F46E5;
}

/* ---------- Lightbox para abrir el certificado en grande ---------- */
.cert-lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(6px);
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.cert-lightbox-overlay.visible { display: flex; }
.cert-lightbox-img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
    object-fit: contain;
}
.cert-lightbox-close {
    position: absolute;
    top: 18px;
    right: 22px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.15s;
}
.cert-lightbox-close:hover { background: rgba(239, 68, 68, 0.85); transform: rotate(90deg); }

/* ---------- Toast simple del módulo certificado ---------- */
.cert-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translate(-50%, 16px);
    background: rgba(20, 20, 20, 0.96);
    color: #fff;
    padding: 12px 18px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
    z-index: 3100;
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
    pointer-events: none;
}
.cert-toast.visible { opacity: 1; transform: translate(-50%, 0); }
.cert-toast-success { border-color: rgba(34, 197, 94, 0.6); background: rgba(20, 60, 30, 0.96); }
.cert-toast-error { border-color: rgba(239, 68, 68, 0.6); background: rgba(60, 20, 20, 0.96); }

/* Responsive */
@media (max-width: 600px) {
    .cert-actions { gap: 6px; }
    .cert-btn { font-size: 11px; padding: 8px 6px; gap: 4px; flex-basis: 100px; }
    .cert-btn-upload-primary { font-size: 12px; padding: 12px; }
    .certificado-preview.image img { height: 130px; }
    .cert-toggle-row { padding: 8px; }
}

/* ==========================================================
   MÓDULO CERTIFICADOS (nuevo, prefijo .crt-)
   Página /certificados.php con tabs Pendientes / Historial,
   carga de archivo o foto desde la cámara y visor en modal.
   ========================================================== */

.crt-main {
    padding: 24px 28px 60px;
    color: #fff;
}

.crt-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.crt-page-title { display: flex; align-items: center; gap: 14px; }
.crt-page-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(34,197,94,.22), rgba(16,185,129,.18));
    border: 1px solid rgba(34,197,94,.35);
    color: #4ade80;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(34,197,94,.18);
}
.crt-page-title h1 {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: #fff;
    letter-spacing: -.01em;
}
.crt-page-subtitle {
    margin: 4px 0 0;
    color: rgba(255,255,255,.55);
    font-size: 13px;
    max-width: 640px;
    line-height: 1.4;
}
.crt-page-actions { display: flex; gap: 10px; align-items: center; }

.crt-btn-refresh {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 10px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.88);
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    transition: background .15s, border-color .15s, transform .15s;
}
.crt-btn-refresh:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); transform: translateY(-1px); }

/* ---------- Stats ---------- */
.crt-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}
.crt-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(8px);
}
.crt-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.crt-stat-pendientes .crt-stat-icon { background: rgba(245,158,11,.15); color: #fbbf24; }
.crt-stat-historial .crt-stat-icon { background: rgba(34,197,94,.15); color: #4ade80; }
.crt-stat-mes .crt-stat-icon { background: rgba(99,102,241,.15); color: #a5b4fc; }
.crt-stat-info { display: flex; flex-direction: column; }
.crt-stat-value { font-size: 22px; font-weight: 700; color: #fff; line-height: 1; }
.crt-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.55); margin-top: 4px; }

/* ---------- Tabs ---------- */
.crt-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 5px;
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    margin-bottom: 18px;
}
.crt-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 9px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,.6);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.crt-tab:hover { color: rgba(255,255,255,.85); }
.crt-tab.active,
.crt-tab.active:hover {
    background: linear-gradient(135deg, #0066ff, #0052cc);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,102,255,.35);
}
.crt-tab.active svg { color: #fff; }
.crt-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    border-radius: 10px;
    background: rgba(255,255,255,.12);
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,.85);
}
.crt-tab.active .crt-tab-count {
    background: rgba(255,255,255,.22);
    color: #fff;
}

.crt-tab-panel { display: none; }
.crt-tab-panel.active { display: block; }

/* ---------- Toolbar / búsqueda ---------- */
.crt-toolbar {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.crt-toolbar-historial,
.crt-toolbar-pendientes { justify-content: flex-start; }
.crt-search-wrap {
    position: relative;
    width: 100%;
}
.crt-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,.45);
    pointer-events: none;
}
.crt-search-wrap input {
    width: 100%;
    padding: 8px 12px 8px 36px;
    border-radius: 8px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    color: #fff;
    font-size: 13px;
    transition: border-color .15s, background .15s;
}
.crt-search-wrap input:focus {
    outline: none;
    border-color: #0066ff;
    background: rgba(255,255,255,.07);
    box-shadow: 0 0 0 3px rgba(0,102,255,.15);
}

.crt-filter-dates { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.crt-filter-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.crt-filter-item label { font-size: 11px; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .04em; }
.crt-filter-search {
    flex: 1 1 280px;
    min-width: 240px;
    max-width: 380px;
}
.crt-filter-item input[type="date"] {
    padding: 8px 10px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-family: inherit;
    color-scheme: dark;
}
.crt-btn-filter {
    padding: 9px 16px;
    border-radius: 8px;
    background: linear-gradient(135deg, #0066ff, #0052cc);
    color: #fff;
    border: none;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: filter .15s, transform .15s;
}
.crt-btn-filter:hover { filter: brightness(1.1); transform: translateY(-1px); }

.crt-btn-clear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.75);
    font-weight: 500;
    font-size: 12px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    height: 36px;
    align-self: flex-end;
    white-space: nowrap;
}
.crt-btn-clear:hover {
    background: rgba(239,68,68,.12);
    border-color: rgba(239,68,68,.4);
    color: #fca5a5;
}
.crt-btn-clear svg { flex-shrink: 0; }

/* ---------- Grid de pendientes ---------- */
.crt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 14px;
}

.crt-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 16px;
    transition: transform .15s, border-color .15s, box-shadow .15s;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.crt-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,.18);
    box-shadow: 0 10px 32px rgba(0,0,0,.3);
}
.crt-card-pendiente { border-left: 3px solid #fbbf24; }
.crt-card-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.crt-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.crt-badge-pendiente { background: rgba(245,158,11,.18); color: #fbbf24; border: 1px solid rgba(245,158,11,.35); }
.crt-card-envase {
    font-size: 11px;
    color: rgba(255,255,255,.55);
    padding: 3px 8px;
    background: rgba(255,255,255,.05);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
}
.crt-card-title { font-size: 15px; font-weight: 700; color: #fff; margin: 0; line-height: 1.3; }
.crt-card-line {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    color: rgba(255,255,255,.65);
    font-size: 12px;
    line-height: 1.4;
}
.crt-card-line svg { flex-shrink: 0; margin-top: 1px; color: rgba(255,255,255,.4); }
.crt-card-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.crt-card-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: rgba(255,255,255,.6);
    padding: 3px 8px;
    border-radius: 8px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
}
.crt-card-meta-item svg { color: rgba(255,255,255,.45); }
.crt-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px dashed rgba(255,255,255,.08);
}
.crt-card-ultima { font-size: 11px; color: rgba(255,255,255,.5); }
.crt-card-ultima strong { color: rgba(255,255,255,.8); font-weight: 600; }
.crt-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    border: none;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: filter .15s, transform .15s, box-shadow .15s;
    box-shadow: 0 4px 14px rgba(34,197,94,.25);
}
.crt-card-btn:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(34,197,94,.35); }

/* ---------- Empty states ---------- */
.crt-empty {
    text-align: center;
    padding: 56px 24px;
    color: rgba(255,255,255,.55);
    grid-column: 1 / -1;
    background: rgba(255,255,255,.03);
    border: 1px dashed rgba(255,255,255,.1);
    border-radius: 16px;
}
.crt-empty svg { color: rgba(255,255,255,.4); margin-bottom: 10px; }
.crt-empty h3 { font-size: 16px; color: #fff; margin: 6px 0 4px; font-weight: 600; }
.crt-empty p { margin: 0; font-size: 13px; }
.crt-empty-success svg { color: #4ade80; }

/* ---------- Lista de historial ---------- */
.crt-historial-list { display: flex; flex-direction: column; gap: 10px; }
.crt-hist-row {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    transition: border-color .15s, background .15s;
}
.crt-hist-row:hover { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06); }
.crt-hist-thumb {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.08);
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.crt-hist-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crt-hist-thumb-pdf {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: #fca5a5;
    width: 100%;
    height: 100%;
}
.crt-hist-thumb-pdf span { font-size: 9px; font-weight: 700; letter-spacing: .04em; }
.crt-hist-info { min-width: 0; }
.crt-hist-info-line { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.crt-hist-local {
    color: #fff;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.crt-hist-date { color: rgba(255,255,255,.5); font-size: 11px; flex-shrink: 0; }
.crt-hist-meta-line { color: rgba(255,255,255,.55); font-size: 12px; margin-top: 2px; line-height: 1.3; }
.crt-hist-meta-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.crt-hist-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 10px;
    border-radius: 8px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.65);
}
.crt-hist-chip svg { color: rgba(255,255,255,.45); }
.crt-hist-chip-ruta { background: rgba(99,102,241,.1); border-color: rgba(99,102,241,.3); color: #c7d2fe; }
.crt-hist-chip-ruta svg { color: #a5b4fc; }
.crt-hist-observ {
    margin-top: 8px;
    padding: 6px 10px;
    border-left: 2px solid rgba(255,255,255,.15);
    color: rgba(255,255,255,.7);
    font-size: 12px;
    font-style: italic;
    line-height: 1.4;
}
.crt-hist-actions { display: flex; gap: 6px; flex-shrink: 0; }
.crt-hist-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.7);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s, border-color .15s;
}
.crt-hist-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.crt-hist-btn-view:hover { border-color: rgba(99,102,241,.4); color: #a5b4fc; background: rgba(99,102,241,.1); }
.crt-hist-btn-download:hover { border-color: rgba(34,197,94,.4); color: #4ade80; background: rgba(34,197,94,.1); }
.crt-hist-btn-delete:hover { border-color: rgba(239,68,68,.4); color: #fca5a5; background: rgba(239,68,68,.1); }

/* ---------- Modal subir certificado ---------- */
.crt-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.7);
    backdrop-filter: blur(8px);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.crt-modal {
    background: #1a1a1a;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.1);
    width: 100%;
    max-width: 560px;
    max-height: 92vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 70px rgba(0,0,0,.65);
    animation: crtFadeIn .2s ease;
}
@keyframes crtFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.crt-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    gap: 12px;
}
.crt-modal-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.crt-modal-title-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: rgba(34,197,94,.18);
    color: #4ade80;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.crt-modal-title h3 { margin: 0; font-size: 15px; font-weight: 700; color: #fff; }
.crt-modal-local-nombre { margin: 2px 0 0; font-size: 12px; color: rgba(255,255,255,.55); }

.crt-modal-body { padding: 18px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.crt-ruta-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(99,102,241,.1);
    border: 1px solid rgba(99,102,241,.25);
    border-radius: 9px;
    color: #c7d2fe;
    font-size: 12px;
}
.crt-ruta-info svg { color: #a5b4fc; flex-shrink: 0; }

.crt-source-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 4px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 11px;
}
.crt-source-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,.6);
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.crt-source-tab:hover { color: rgba(255,255,255,.85); }
.crt-source-tab.active { background: rgba(255,255,255,.1); color: #fff; }

.crt-dropzone {
    display: block;
    padding: 28px 20px;
    border: 1.5px dashed rgba(255,255,255,.18);
    border-radius: 12px;
    background: rgba(255,255,255,.03);
    text-align: center;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.crt-dropzone:hover, .crt-dropzone-hover { background: rgba(0,102,255,.06); border-color: rgba(0,102,255,.45); }
.crt-dropzone-content { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.crt-dropzone-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,102,255,.12);
    color: #60a5fa;
}
.crt-dropzone-text strong { display: block; font-size: 14px; color: #fff; }
.crt-dropzone-text small { display: block; color: rgba(255,255,255,.55); font-size: 11px; margin-top: 3px; }

.crt-camera-wrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
}
.crt-camera-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
.crt-camera-controls { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.crt-btn-cam {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: filter .15s;
}
.crt-btn-cam-primary {
    background: linear-gradient(135deg, #0066ff, #0052cc);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,102,255,.3);
}
.crt-btn-cam-primary:hover { filter: brightness(1.1); }
.crt-btn-cam-ghost {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.75);
}
.crt-btn-cam-ghost:hover { background: rgba(255,255,255,.1); color: #fff; }

.crt-preview {
    padding: 12px;
    border-radius: 12px;
    background: rgba(34,197,94,.06);
    border: 1px solid rgba(34,197,94,.25);
}
.crt-preview-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.crt-preview-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #86efac;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.crt-preview-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    border-radius: 10px;
    background: rgba(34,197,94,.25);
    color: #86efac;
    font-size: 11px;
    font-weight: 800;
    text-transform: none;
    letter-spacing: 0;
}

/* Lista de archivos seleccionados / fotos capturadas */
.crt-preview-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 4px;
}
.crt-preview-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    transition: border-color .15s;
}
.crt-preview-item:hover { border-color: rgba(255,255,255,.22); }
.crt-preview-item.crt-preview-item-image {
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    min-height: 150px;
}
.crt-preview-item.crt-preview-item-image img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    display: block;
    background: #000;
}
.crt-preview-item.crt-preview-item-image .crt-preview-item-info {
    width: 100%;
    padding: 6px 8px 8px;
    text-align: left;
}
.crt-preview-item-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.crt-preview-item-pdf { background: rgba(239,68,68,.18); color: #fca5a5; }
.crt-preview-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.crt-preview-item-info strong {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.crt-preview-item-info small { color: rgba(255,255,255,.55); font-size: 10.5px; }
.crt-preview-item-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,.65);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, transform .15s;
    z-index: 2;
}
.crt-preview-item-remove:hover { background: #ef4444; transform: scale(1.08); }
.crt-preview-item:not(.crt-preview-item-image) .crt-preview-item-remove {
    position: static;
    margin-left: auto;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
}
.crt-preview-item:not(.crt-preview-item-image) .crt-preview-item-remove:hover {
    background: #ef4444;
    border-color: #ef4444;
}

/* Hint debajo de la cámara */
.crt-camera-hint {
    margin: 8px 0 0;
    padding: 6px 10px;
    background: rgba(99,102,241,.1);
    border: 1px solid rgba(99,102,241,.25);
    border-radius: 8px;
    color: #c7d2fe;
    font-size: 11.5px;
    text-align: center;
}

/* Estado del botón Guardar mientras sube */
.crt-btn-save.crt-uploading {
    opacity: .85;
    cursor: progress;
    filter: brightness(.95);
}

/* Toolbar pendientes (similar a historial pero permite wrap) */
.crt-filter-item > input[type="text"] {
    padding: 8px 10px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-family: inherit;
    min-width: 160px;
}
.crt-filter-item > input[type="text"]:focus {
    outline: none;
    border-color: #0066ff;
    background: rgba(255,255,255,.07);
    box-shadow: 0 0 0 3px rgba(0,102,255,.15);
}

.crt-observ-group { display: flex; flex-direction: column; gap: 6px; }
.crt-observ-group label { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.75); }
.crt-observ-group textarea {
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
    min-height: 60px;
}
.crt-observ-group textarea:focus { outline: none; border-color: #0066ff; box-shadow: 0 0 0 3px rgba(0,102,255,.15); }

.crt-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(255,255,255,.06);
    margin-top: 4px;
}
.crt-btn-cancel {
    padding: 10px 18px;
    border-radius: 9px;
    background: transparent;
    border: 1px solid rgba(255,255,255,.15);
    color: rgba(255,255,255,.75);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.crt-btn-cancel:hover { background: rgba(255,255,255,.06); color: #fff; }
.crt-btn-save {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 9px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border: none;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(34,197,94,.3);
    transition: filter .15s, transform .15s, opacity .15s;
}
.crt-btn-save:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
.crt-btn-save:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.5); }

/* ---------- Viewer ---------- */
.crt-viewer-modal {
    background: #0d0d0d;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.1);
    width: 92vw;
    max-width: 1100px;
    height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.crt-viewer-body {
    flex: 1;
    overflow: auto;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.crt-viewer-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.crt-viewer-iframe { width: 100%; height: 100%; border: 0; background: #fff; }

/* ---------- Toasts ---------- */
.crt-toast-host {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 3200;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.crt-toast-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(20,20,20,.96);
    color: #fff;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 12px 28px rgba(0,0,0,.5);
    font-size: 13px;
    font-weight: 600;
    transform: translateX(16px);
    opacity: 0;
    transition: transform .25s ease, opacity .25s ease;
    pointer-events: auto;
}
.crt-toast-item.crt-toast-show { transform: translateX(0); opacity: 1; }
.crt-toast-item.crt-toast-success { border-color: rgba(34,197,94,.5); background: rgba(20,55,30,.96); }
.crt-toast-item.crt-toast-error { border-color: rgba(239,68,68,.5); background: rgba(55,20,20,.96); }
.crt-toast-icon { display: inline-flex; }
.crt-toast-success .crt-toast-icon { color: #4ade80; }
.crt-toast-error .crt-toast-icon { color: #fca5a5; }


[data-theme="light"] .crt-main { color: var(--text-primary); }
[data-theme="light"] .crt-page-title h1 { color: var(--text-primary); }
[data-theme="light"] .crt-page-subtitle { color: var(--text-secondary); }
[data-theme="light"] .crt-page-icon {
    background: linear-gradient(135deg, rgba(34,197,94,.15), rgba(16,185,129,.12));
    border-color: rgba(34,197,94,.3);
    color: #16a34a;
    box-shadow: 0 6px 18px rgba(34,197,94,.12);
}
[data-theme="light"] .crt-btn-refresh {
    background: #fff;
    border-color: var(--border-color);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
[data-theme="light"] .crt-btn-refresh:hover {
    background: var(--bg-secondary);
    border-color: rgba(0,0,0,.18);
    transform: translateY(-1px);
}

/* Stats */
[data-theme="light"] .crt-stat {
    background: #fff;
    border-color: var(--border-color);
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
[data-theme="light"] .crt-stat-value { color: var(--text-primary); }
[data-theme="light"] .crt-stat-label { color: var(--text-secondary); }
[data-theme="light"] .crt-stat-pendientes .crt-stat-icon { background: rgba(245,158,11,.18); color: #d97706; }
[data-theme="light"] .crt-stat-historial .crt-stat-icon { background: rgba(34,197,94,.18); color: #16a34a; }
[data-theme="light"] .crt-stat-mes .crt-stat-icon { background: rgba(99,102,241,.18); color: #4f46e5; }

/* Tabs */
[data-theme="light"] .crt-tabs {
    background: #fff;
    border-color: var(--border-color);
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
[data-theme="light"] .crt-tab { color: var(--text-secondary); }
[data-theme="light"] .crt-tab:hover { color: var(--text-primary); background: rgba(0,0,0,.04); }
[data-theme="light"] .crt-tab-count { background: rgba(0,0,0,.07); color: var(--text-secondary); }
/* Pestaña activa: blanco siempre (sobre el degradado azul), tanto el texto
   como el icono y el contador. La regla anterior de tema claro tenía la
   misma especificidad y sobrescribía el color base en .crt-tab.active. */
[data-theme="light"] .crt-tab.active,
[data-theme="light"] .crt-tab.active:hover {
    color: #fff;
    background: linear-gradient(135deg, #0066ff, #0052cc);
    box-shadow: 0 4px 14px rgba(0,102,255,.3);
}
[data-theme="light"] .crt-tab.active svg { color: #fff; }
[data-theme="light"] .crt-tab.active .crt-tab-count {
    background: rgba(255,255,255,.22);
    color: #fff;
}

/* Toolbar / búsqueda / filtros */
[data-theme="light"] .crt-search-wrap input,
[data-theme="light"] .crt-filter-item input[type="date"] {
    background: #fff;
    color: var(--text-primary);
    border-color: var(--border-color);
    color-scheme: light;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
[data-theme="light"] .crt-search-wrap input::placeholder { color: rgba(0,0,0,.4); }
[data-theme="light"] .crt-search-wrap input:focus,
[data-theme="light"] .crt-filter-item input[type="date"]:focus {
    border-color: #0066ff;
    box-shadow: 0 0 0 3px rgba(0,102,255,.12);
}
[data-theme="light"] .crt-search-icon { color: var(--text-secondary); }
[data-theme="light"] .crt-filter-item label { color: var(--text-secondary); }
[data-theme="light"] .crt-btn-clear {
    background: #fff;
    border-color: var(--border-color);
    color: var(--text-primary);
}
[data-theme="light"] .crt-btn-clear:hover {
    background: rgba(239,68,68,.08);
    border-color: rgba(239,68,68,.4);
    color: #dc2626;
}

/* Cards */
[data-theme="light"] .crt-card {
    background: #fff;
    border-color: var(--border-color);
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
[data-theme="light"] .crt-card:hover {
    border-color: rgba(0,0,0,.18);
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
[data-theme="light"] .crt-card-pendiente { border-left-color: #f59e0b; }
[data-theme="light"] .crt-card-title { color: var(--text-primary); }
[data-theme="light"] .crt-card-line { color: var(--text-secondary); }
[data-theme="light"] .crt-card-line svg { color: rgba(0,0,0,.35); }
[data-theme="light"] .crt-card-envase {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-color: var(--border-color);
}
[data-theme="light"] .crt-card-meta-item {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-color: var(--border-color);
}
[data-theme="light"] .crt-card-meta-item svg { color: rgba(0,0,0,.4); }
[data-theme="light"] .crt-card-footer { border-top-color: var(--border-color); }
[data-theme="light"] .crt-card-ultima { color: var(--text-secondary); }
[data-theme="light"] .crt-card-ultima strong { color: var(--text-primary); }
[data-theme="light"] .crt-badge-pendiente { background: rgba(245,158,11,.18); color: #b45309; border-color: rgba(245,158,11,.35); }

/* Empty */
[data-theme="light"] .crt-empty {
    background: #fff;
    color: var(--text-secondary);
    border-color: var(--border-color);
}
[data-theme="light"] .crt-empty h3 { color: var(--text-primary); }
[data-theme="light"] .crt-empty svg { color: rgba(0,0,0,.3); }
[data-theme="light"] .crt-empty-success svg { color: #16a34a; }

/* Historial */
[data-theme="light"] .crt-hist-row {
    background: #fff;
    border-color: var(--border-color);
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
[data-theme="light"] .crt-hist-row:hover {
    background: var(--bg-secondary);
    border-color: rgba(0,0,0,.18);
}
[data-theme="light"] .crt-hist-thumb {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}
[data-theme="light"] .crt-hist-thumb-pdf { color: #dc2626; }
[data-theme="light"] .crt-hist-local { color: var(--text-primary); }
[data-theme="light"] .crt-hist-date { color: var(--text-secondary); }
[data-theme="light"] .crt-hist-meta-line { color: var(--text-secondary); }
[data-theme="light"] .crt-hist-chip {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-color: var(--border-color);
}
[data-theme="light"] .crt-hist-chip svg { color: rgba(0,0,0,.4); }
[data-theme="light"] .crt-hist-chip-ruta {
    background: rgba(99,102,241,.08);
    color: #4338ca;
    border-color: rgba(99,102,241,.25);
}
[data-theme="light"] .crt-hist-chip-ruta svg { color: #4338ca; }
[data-theme="light"] .crt-hist-observ {
    color: var(--text-secondary);
    border-left-color: var(--border-color);
    background: rgba(0,0,0,.02);
}
[data-theme="light"] .crt-hist-btn {
    background: #fff;
    color: var(--text-secondary);
    border-color: var(--border-color);
}
[data-theme="light"] .crt-hist-btn:hover { background: var(--bg-secondary); color: var(--text-primary); }
[data-theme="light"] .crt-hist-btn-view:hover {
    border-color: rgba(99,102,241,.4);
    color: #4f46e5;
    background: rgba(99,102,241,.08);
}
[data-theme="light"] .crt-hist-btn-download:hover {
    border-color: rgba(34,197,94,.4);
    color: #16a34a;
    background: rgba(34,197,94,.08);
}
[data-theme="light"] .crt-hist-btn-delete:hover {
    border-color: rgba(239,68,68,.4);
    color: #dc2626;
    background: rgba(239,68,68,.08);
}

/* Modal subir certificado */
[data-theme="light"] .crt-modal-overlay { background: rgba(15,23,42,.5); }
[data-theme="light"] .crt-modal {
    background: #fff;
    border-color: var(--border-color);
    box-shadow: 0 24px 70px rgba(0,0,0,.25);
}
[data-theme="light"] .crt-modal-header { border-bottom-color: var(--border-color); }
[data-theme="light"] .crt-modal-title h3 { color: var(--text-primary); }
[data-theme="light"] .crt-modal-local-nombre { color: var(--text-secondary); }
[data-theme="light"] .crt-modal-title-icon { background: rgba(34,197,94,.15); color: #16a34a; }
[data-theme="light"] .crt-modal-actions { border-top-color: var(--border-color); }

/* Source tabs */
[data-theme="light"] .crt-source-tabs {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}
[data-theme="light"] .crt-source-tab { color: var(--text-secondary); }
[data-theme="light"] .crt-source-tab:hover { color: var(--text-primary); }
[data-theme="light"] .crt-source-tab.active {
    background: #fff;
    color: var(--text-primary);
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* Dropzone */
[data-theme="light"] .crt-dropzone {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}
[data-theme="light"] .crt-dropzone:hover,
[data-theme="light"] .crt-dropzone-hover {
    background: rgba(0,102,255,.06);
    border-color: rgba(0,102,255,.5);
}
[data-theme="light"] .crt-dropzone-icon {
    background: rgba(0,102,255,.12);
    color: #0066ff;
}
[data-theme="light"] .crt-dropzone-text strong { color: var(--text-primary); }
[data-theme="light"] .crt-dropzone-text small { color: var(--text-secondary); }

/* Cámara */
[data-theme="light"] .crt-camera-wrap {
    background: #0f172a;
    border-color: var(--border-color);
}
[data-theme="light"] .crt-btn-cam-ghost {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}
[data-theme="light"] .crt-btn-cam-ghost:hover { background: rgba(0,0,0,.06); }

/* Observaciones */
[data-theme="light"] .crt-observ-group label { color: var(--text-primary); }
[data-theme="light"] .crt-observ-group textarea {
    background: #fff;
    color: var(--text-primary);
    border-color: var(--border-color);
}
[data-theme="light"] .crt-observ-group textarea::placeholder { color: rgba(0,0,0,.4); }
[data-theme="light"] .crt-observ-group textarea:focus {
    border-color: #0066ff;
    box-shadow: 0 0 0 3px rgba(0,102,255,.12);
}

/* Botones */
[data-theme="light"] .crt-btn-cancel {
    color: var(--text-primary);
    border-color: var(--border-color);
    background: #fff;
}
[data-theme="light"] .crt-btn-cancel:hover { background: var(--bg-secondary); }

/* Preview (lista de archivos a subir) */
[data-theme="light"] .crt-preview {
    background: rgba(34,197,94,.07);
    border-color: rgba(34,197,94,.3);
}
[data-theme="light"] .crt-preview-label { color: #15803d; }
[data-theme="light"] .crt-preview-count { background: rgba(34,197,94,.2); color: #15803d; }
[data-theme="light"] .crt-preview-item {
    background: #fff;
    border-color: var(--border-color);
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
[data-theme="light"] .crt-preview-item:hover { border-color: rgba(0,0,0,.2); }
[data-theme="light"] .crt-preview-item-pdf { background: rgba(239,68,68,.12); color: #dc2626; }
[data-theme="light"] .crt-preview-item-info strong { color: var(--text-primary); }
[data-theme="light"] .crt-preview-item-info small { color: var(--text-secondary); }
[data-theme="light"] .crt-preview-item:not(.crt-preview-item-image) .crt-preview-item-remove {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}
[data-theme="light"] .crt-preview-item:not(.crt-preview-item-image) .crt-preview-item-remove:hover {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
}

[data-theme="light"] .crt-camera-hint {
    background: rgba(99,102,241,.08);
    border-color: rgba(99,102,241,.25);
    color: #4338ca;
}

/* Inputs de texto en filtros */
[data-theme="light"] .crt-filter-item > input[type="text"] {
    background: #fff;
    color: var(--text-primary);
    border-color: var(--border-color);
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
[data-theme="light"] .crt-filter-item > input[type="text"]::placeholder { color: rgba(0,0,0,.4); }
[data-theme="light"] .crt-filter-item > input[type="text"]:focus {
    border-color: #0066ff;
    box-shadow: 0 0 0 3px rgba(0,102,255,.12);
}

/* Viewer */
[data-theme="light"] .crt-viewer-modal {
    background: #fff;
    border-color: var(--border-color);
    box-shadow: 0 24px 70px rgba(0,0,0,.25);
}
[data-theme="light"] .crt-viewer-body { background: #f1f5f9; }

/* Ruta info chip */
[data-theme="light"] .crt-ruta-info {
    background: rgba(99,102,241,.08);
    color: #4338ca;
    border-color: rgba(99,102,241,.25);
}
[data-theme="light"] .crt-ruta-info svg { color: #4338ca; }

/* Toasts */
[data-theme="light"] .crt-toast-item {
    background: #fff;
    color: var(--text-primary);
    border-color: var(--border-color);
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
}
[data-theme="light"] .crt-toast-item.crt-toast-success {
    background: #f0fdf4;
    border-color: rgba(34,197,94,.4);
    color: #14532d;
}
[data-theme="light"] .crt-toast-item.crt-toast-error {
    background: #fef2f2;
    border-color: rgba(239,68,68,.4);
    color: #7f1d1d;
}
[data-theme="light"] .crt-toast-success .crt-toast-icon { color: #16a34a; }
[data-theme="light"] .crt-toast-error .crt-toast-icon { color: #dc2626; }

/* Modal close button (cuando se usa el del sistema) en light */
[data-theme="light"] .crt-modal-header .modal-close,
[data-theme="light"] .crt-viewer-modal .modal-close {
    color: var(--text-secondary);
}
[data-theme="light"] .crt-modal-header .modal-close:hover,
[data-theme="light"] .crt-viewer-modal .modal-close:hover {
    background: rgba(0,0,0,.06);
    color: var(--text-primary);
}

/* Responsive */
@media (max-width: 720px) {
    .crt-main { padding: 16px 14px 60px; }
    .crt-page-header { flex-direction: column; align-items: flex-start; }
    .crt-tabs { width: 100%; display: flex; }
    .crt-tab { flex: 1; justify-content: center; }
    .crt-hist-row { grid-template-columns: 56px 1fr; }
    .crt-hist-actions { grid-column: 1 / -1; justify-content: flex-end; }
    .crt-modal { max-height: 96vh; }
    .crt-viewer-modal { width: 100vw; height: 100vh; border-radius: 0; }
}