<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prueba Barra Desplazamiento</title>
    <style>
        .contenido-derivaciones-ocultas {
            max-height: 500px;
            overflow-y: auto;
            border: 2px solid #ccc;
            padding: 10px;
            margin: 10px 0;
            background: #f9f9f9;
        }
        .derivacion-item {
            background: white;
            border: 1px solid #ddd;
            padding: 10px;
            margin: 5px 0;
            border-radius: 5px;
        }
        .test-button {
            background: #6c757d;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 10px 5px;
        }
    </style>
</head>
<body>
    <h2>PRUEBA - Barra de Desplazamiento Vertical</h2>
    
    <button class="test-button" onclick="toggleView()"> Ver Ocultas</button>
    <button class="test-button" onclick="toggleView()"> Ver Normales</button>
    
    <div id="contenido-derivaciones-ocultas" class="contenido-derivaciones-ocultas" style="display: none;">
        <h3>Derivaciones Ocultas</h3>
        <div class="derivacion-item">
            <strong>Derivación 1</strong><br>
            Paciente: Juan Pérez<br>
            Fecha: 2025-09-20<br>
            Descripción: Cone Beam 5x5
        </div>
        <div class="derivacion-item">
            <strong>Derivación 2</strong><br>
            Paciente: María García<br>
            Fecha: 2025-09-19<br>
            Descripción: Panorámica
        </div>
        <div class="derivacion-item">
            <strong>Derivación 3</strong><br>
            Paciente: Carlos López<br>
            Fecha: 2025-09-18<br>
            Descripción: Radiografía
        </div>
        <div class="derivacion-item">
            <strong>Derivación 4</strong><br>
            Paciente: Ana Martínez<br>
            Fecha: 2025-09-17<br>
            Descripción: Tomografía
        </div>
        <div class="derivacion-item">
            <strong>Derivación 5</strong><br>
            Paciente: Luis Rodríguez<br>
            Fecha: 2025-09-16<br>
            Descripción: Resonancia
        </div>
        <div class="derivacion-item">
            <strong>Derivación 6</strong><br>
            Paciente: Carmen Sánchez<br>
            Fecha: 2025-09-15<br>
            Descripción: Ecografía
        </div>
        <div class="derivacion-item">
            <strong>Derivación 7</strong><br>
            Paciente: Pedro González<br>
            Fecha: 2025-09-14<br>
            Descripción: Mamografía
        </div>
        <div class="derivacion-item">
            <strong>Derivación 8</strong><br>
            Paciente: Laura Fernández<br>
            Fecha: 2025-09-13<br>
            Descripción: Densitometría
        </div>
        <div class="derivacion-item">
            <strong>Derivación 9</strong><br>
            Paciente: Miguel Torres<br>
            Fecha: 2025-09-12<br>
            Descripción: Endoscopía
        </div>
        <div class="derivacion-item">
            <strong>Derivación 10</strong><br>
            Paciente: Elena Ruiz<br>
            Fecha: 2025-09-11<br>
            Descripción: Colonoscopía
        </div>
    </div>
    
    <div id="contenido-derivaciones-normales" style="display: block;">
        <h3>Derivaciones Normales</h3>
        <p>Contenido de derivaciones normales...</p>
    </div>
    
    <script>
        let vistaActual = "normal";
        
        function toggleView() {
            const contenidoOcultas = document.getElementById("contenido-derivaciones-ocultas");
            const contenidoNormales = document.getElementById("contenido-derivaciones-normales");
            
            if (vistaActual === "normal") {
                // Cambiar a vista de ocultas
                contenidoNormales.style.display = "none";
                contenidoOcultas.style.display = "block";
                contenidoOcultas.style.maxHeight = "500px";
                contenidoOcultas.style.overflowY = "auto";
                vistaActual = "ocultas";
                console.log("Cambiado a vista de derivaciones ocultas");
            } else {
                // Cambiar a vista normal
                contenidoOcultas.style.display = "none";
                contenidoOcultas.style.maxHeight = "0px";
                contenidoOcultas.style.overflowY = "hidden";
                contenidoNormales.style.display = "block";
                vistaActual = "normal";
                console.log("Cambiado a vista de derivaciones normales");
            }
        }
    </script>
</body>
</html>