<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* Variables CSS con tu paleta de colores fríos y formas redondas */ :root { --color-principal: #6c4b8b; /* Morado base */ --color-secundario: #a385bd; /* Lila para botones secundarios */ --color-fondo: #f4f0f7; /* Fondo pastel muy suave */ --borde-redondeado: 15px; /* Border-radius amplio para contención */ } body { font-family: Arial, sans-serif; background-color: var(--color-fondo); padding: 20px; } /* Contenedor principal Mobile-First */ .modulo-agendamiento { display: flex; flex-wrap: wrap; /* Permite que colapse en celulares */ background-color: white; border-radius: var(--borde-redondeado); box-shadow: 0 4px 10px rgba(0,0,0,0.1); overflow: hidden; max-width: 1000px; margin: 0 auto; } /* Cabeceras moradas de cada paso */ .paso-header { background-color: var(--color-principal); color: white; padding: 15px; text-align: center; font-weight: bold; } .paso-columna { flex: 1; min-width: 250px; /* Ancho mínimo para celulares */ display: flex; flex-direction: column; border-right: 1px solid #eee; } .paso-columna:last-child { border-right: none; } .paso-contenido { padding: 20px; display: flex; flex-direction: column; gap: 15px; } /* Estilos de botones y selectores */ .btn-opcion { padding: 10px; background-color: transparent; border: none; text-align: left; cursor: pointer; font-size: 16px; } .btn-opcion:hover { color: var(--color-principal); font-weight: bold; } .selector-desplegable, .input-datos { padding: 10px; border: 1px solid #ccc; border-radius: 8px; /* Formas redondas en inputs */ width: 100%; box-sizing: border-box; } .btn-buscar { background-color: var(--color-secundario); color: white; padding: 15px; border: none; border-radius: var(--borde-redondeado); font-weight: bold; cursor: pointer; margin-top: auto; } .btn-buscar:hover { background-color: var(--color-principal); } </style> </head> <body> <!-- Módulo de Agendamiento Secuencial --> <div class="modulo-agendamiento"> <!-- Paso 1 --> <div class="paso-columna"> <div class="paso-header">1. Modo de búsqueda</div> <div class="paso-contenido"> <button class="btn-opcion">🩺 Especialidad</button> <button class="btn-opcion">👨⚕️ Profesional</button> <button class="btn-opcion">📍 Región y centro</button> <button class="btn-opcion">➕ Área</button> </div> </div> <!-- Paso 2 --> <div class="paso-columna" style="background-color: #fafafa;"> <div class="paso-header">2. Búsqueda por</div> <div class="paso-contenido"> <select class="selector-desplegable"> <option>Selecciona área...</option> </select> <input type="text" class="input-datos" placeholder="Especialidad" disabled> <input type="text" class="input-datos" placeholder="Centro de atención" disabled> </div> </div> <!-- Paso 3 --> <div class="paso-columna"> <div class="paso-header">3. Ingresa tus datos</div> <div class="paso-contenido"> <div style="display: flex; gap: 10px; background: #eee; padding: 5px; border-radius: 20px;"> <button style="flex:1; border:none; background:var(--color-principal); color:white; border-radius:15px; padding:8px;">Rut</button> <button style="flex:1; border:none; background:transparent; padding:8px;">Pasaporte</button> </div> <p style="margin-bottom: 5px;">Indique su identificación</p> <input type="text" class="input-datos" placeholder="Ej: 12345678-9"> <button class="btn-buscar">Buscar Horas</button> </div> </div> </div> </body> </html>