.planvisit-content {
    display: flex;
    flex-direction: column;
    gap: var(--filtro-gap);
    padding: var(--filtro-padding);
    background-color: var(--light-gray);
    font-family: Calibri, sans-serif;
    font-size: var(--font-md);
}

.planvisit-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--gap-md);
    padding-bottom: var(--gap-sm);
    /*border-bottom: 2px solid var(--border-color);*/
}

.fecha-selector,
.zona-selector,
.cliente-selector,
.actividad-checker {
    margin-bottom: clamp(0.75rem, 2vh, 1.25rem);
}

.table {
    font-size: var(--font-md);
    overflow-x: auto;
    display: block;
}

    .table th {
        background-color: var(--accent-color);
        text-transform: uppercase;
        font-weight: 600;
    }

    .table td,
    .table th {
        padding: var(--gap-sm);
        white-space: nowrap;
    }

button.btn {
    transition: all 0.2s ease-in-out;
}

    button.btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

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

    .btn-primary:hover {
        background-color: #1565c0;
    }

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

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

.btn-outline-danger {
    color: #dc3545;
    border-color: #dc3545;
}

    .btn-outline-danger:hover {
        background-color: #dc3545;
        color: white;
    }

.formulario-nueva-actividad {
    background-color: white;
    padding: var(--gap-md);
    border: 1px solid var(--border-color);
    border-radius: calc(0.375rem / var(--zoom-factor));
}

.formulario-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.35);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    overflow-y: auto; /* 🔥 Habilita scroll si el contenido excede */
    padding: 1rem; /* Evita que el contenido pegue al borde */
}

.formulario-nueva-actividad.centrado {
    background-color: white;
    padding: var(--gap-md);
    border-radius: calc(0.5rem / var(--zoom-factor));
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    width: var(--form-width);
    max-width: 95vw;
    max-height: 95vh; /* 🔒 Evita que crezca más allá de la pantalla */
    overflow-y: auto; /* 🔥 Scroll interno si el contenido excede */
}

h5 {
    border-left: 5px solid var(--primary-color);
    padding-left: calc(12px / var(--zoom-factor));
    font-weight: 600;
    color: #333;
}

.alerta-fecha,
.mensaje-ruta {
    font-weight: 500;
    color: #c62828;
    background-color: #ffebee;
    border-left: 4px solid #c62828;
    padding: var(--gap-sm) var(--gap-md);
    margin-top: var(--gap-sm);
    border-radius: calc(4px / var(--zoom-factor));
}

.fila-editada {
    background-color: var(--highlight);
    animation: resaltado 2s ease-in-out;
}

@keyframes resaltado {
    from {
        background-color: #fff59d;
    }

    to {
        background-color: var(--highlight);
    }
}

.table-success {
    transition: background-color 0.6s ease;
}

.selector-formulario {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    margin-bottom: var(--gap-md);
    max-width: var(--form-width);
}

.grupo-formulario {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    flex-wrap: wrap;
}

    .grupo-formulario label {
        min-width: clamp(3rem, 10vw, 3.75rem);
        margin-bottom: 0;
    }

    .grupo-formulario input,
    .grupo-formulario select {
        flex: 1;
    }