"<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Solicitud de cita previa &#8212; Laboratorio</title>\n    <link rel=\"stylesheet\" href=\"css/style.css\">\n</head>\n<body>\n    <div class=\"page-wrapper\">\n        <header class=\"site-header\">\n            <div class=\"header-top\">\n                <div class=\"container\">\n                    <h1 class=\"site-title\">Solicitud de cita previa</h1>\n                    <span class=\"lab-badge\">ENTORNO DE LABORATORIO &#8212; NO ES UN SERVICIO OFICIAL</span>\n                </div>\n            </div>\n        </header>\n        <main class=\"main-content\">\n            <div class=\"container\">\n                <div class=\"steps\" id=\"steps\">\n                    <div class=\"step active\" data-step=\"1\"><span class=\"step-num\">1</span><span class=\"step-label\">Tramite</span></div>\n                    <div class=\"step\" data-step=\"2\"><span class=\"step-num\">2</span><span class=\"step-label\">Identificacion</span></div>\n                    <div class=\"step\" data-step=\"3\"><span class=\"step-num\">3</span><span class=\"step-label\">Disponible</span></div>\n                    <div class=\"step\" data-step=\"4\"><span class=\"step-num\">4</span><span class=\"step-label\">Captcha</span></div>\n                    <div class=\"step\" data-step=\"5\"><span class=\"step-num\">5</span><span class=\"step-label\">Confirmacion</span></div>\n                </div>\n                <section class=\"step-panel active\" id=\"panel-step-1\">\n                    <h2>Seleccione el tramite</h2>\n                    <div class=\"tramite-card\">\n                        <h3>Alta o cambio de domicilio en el Padr&#243;n Municipal</h3>\n                        <p>Gestione su alta o cambio de domicilio registrado.</p>\n                    </div>\n                    <button class=\"btn btn-primary\" id=\"btn-step1\">Continuar</button>\n                </section>\n                <section class=\"step-panel\" id=\"panel-step-2\">\n                    <h2>Datos de identificaci&#243;n</h2>\n                    <form id=\"form-identificacion\" novalidate>\n                        <div class=\"form-row\"><label>Tipo de documento<select name=\"tipo_documento\" required><option value=\"\">&#8212; Seleccione &#8212;</option><option value=\"DNI\">DNI</option><option value=\"NIE\">NIE</option><option value=\"PASAPORTE\">Pasaporte</option></select></label></div>\n                        <div class=\"form-row\"><label>N&#250;mero de documento<input type=\"text\" name=\"documento\" placeholder=\"12345678A\" required></label></div>\n                        <div class=\"form-row\"><label>Nombre<input type=\"text\" name=\"nombre\" placeholder=\"Nombre\" required></label></div>\n                        <div class=\"form-row\"><label>Primer apellido<input type=\"text\" name=\"primer_apellido\" placeholder=\"Primer apellido\" required></label></div>\n                        <div class=\"form-row\"><label>Segundo apellido<input type=\"text\" name=\"segundo_apellido\" placeholder=\"Segundo apellido\" required></label></div>\n                        <div class=\"form-row\"><label>Tel&#233;fono<input type=\"tel\" name=\"telefono\" placeholder=\"+34 600 000 000\" required></label></div>\n                        <div class=\"form-row\"><label>Correo electr&#243;nico<input type=\"email\" name=\"email\" placeholder=\"correo@ejemplo.com\" required></label></div>\n                        <div class=\"form-actions\"><button type=\"button\" class=\"btn btn-secondary\" id=\"btn-back-2\">Atr&#225;s</button><button type=\"submit\" class=\"btn btn-primary\">Continuar</button></div>\n                    </form>\n                </section>\n                <section class=\"step-panel\" id=\"panel-step-3\">\n                    <h2>Consulta de disponibilidad</h2>\n                    <div id=\"availability-loading\" class=\"loading\"><div class=\"spinner\"></div><p>Consultando citas disponibles&hellip;</p></div>\n                    <div id=\"availability-empty\" class=\"alert alert-warning\" style=\"display:none;\"><p>No existen citas disponibles en este momento.</p></div>\n                    <div id=\"availability-slots\" class=\"slots-list\" style=\"display:none;\"></div>\n                </section>\n                <section class=\"step-panel\" id=\"panel-step-4\">\n                    <h2>Verificaci&#243;n de seguridad</h2>\n                    <div class=\"captcha-area\" id=\"captcha-area\">\n                        <div class=\"test-mode-banner\" id=\"test-mode-banner\" style=\"display:none;\">&#9888; MODO LABORATORIO ACTIVO &#8212; CAPTCHA DE PRUEBA</div>\n                        <p>Por favor, verifique que no es un robot.</p>\n                        <div id=\"g-recaptcha\"></div>\n                        <input type=\"hidden\" id=\"captcha-token\" name=\"captcha_token\" value=\"\">\n                        <div class=\"form-actions\"><button type=\"button\" class=\"btn btn-secondary\" id=\"btn-back-4\">Atr&#225;s</button><button class=\"btn btn-primary\" id=\"btn-submit-reserva\" disabled>Confirmar reserva</button></div>\n                    </div>\n                </section>\n                <section class=\"step-panel\" id=\"panel-step-5\">\n                    <div class=\"confirmation\">\n                        <div class=\"check-circle\">&#10004;</div>\n                        <h2>Cita confirmada</h2>\n                        <div id=\"confirmation-details\" class=\"confirmation-details\"></div>\n                    </div>\n                </section>\n            </div>\n        </main>\n        <footer class=\"site-footer\"><div class=\"container\"><span class=\"lab-badge small\">Laboratorio de pruebas &#8212; citas.pakm4n.es</span></div></footer>\n    </div>\n    <script src=\"js/app.js\"></script>\n</body>\n</html>\n"