:root {
    --color-primario: #2563EB;
    --color-secundario: #0EA5E9;
    --color-texto: #1E293B;
    --color-texto-claro: #64748B;
    --color-fondo: #F8FAFC;
    --color-borde: #E2E8F0;
    --color-exito: #16A34A;
    --color-alerta: #DC2626;
    --color-blanco: #FFFFFF;
    --radio: 12px;
    --sombra: 0 2px 8px rgba(15, 23, 42, 0.06);
    --sombra-hover: 0 8px 24px rgba(15, 23, 42, 0.10);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--color-fondo); color: var(--color-texto); line-height: 1.6; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
.contenedor { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

.header { background: var(--color-blanco); border-bottom: 1px solid var(--color-borde); position: sticky; top: 0; z-index: 100; }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; max-width: 1100px; margin: 0 auto; }
.logo { font-size: 1.4rem; font-weight: 800; color: var(--color-primario); display: flex; align-items: center; gap: 8px; }

.btn { display: inline-block; padding: 12px 24px; border-radius: var(--radio); font-weight: 600; font-size: 0.95rem; border: none; cursor: pointer; transition: all .2s; text-align: center; }
.btn-primario { background: var(--color-primario); color: white; }
.btn-primario:hover { opacity: 0.9; }
.btn-primario:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-secundario { background: var(--color-blanco); color: var(--color-primario); border: 1.5px solid var(--color-primario); }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 16px; font-size: 0.85rem; }
.btn-peligro { background: var(--color-alerta); color: white; }

.hero { background: linear-gradient(135deg, var(--color-primario), var(--color-secundario)); color: white; padding: 56px 24px; text-align: center; }
.hero h1 { font-size: 2.1rem; font-weight: 800; margin-bottom: 12px; max-width: 600px; margin-inline: auto; }
.hero p { font-size: 1.05rem; opacity: 0.95; max-width: 520px; margin: 0 auto 24px; }

.seccion { padding: 48px 24px; }
.seccion-titulo { text-align: center; margin-bottom: 32px; }
.seccion-titulo h2 { font-size: 1.7rem; font-weight: 800; margin-bottom: 6px; }
.seccion-titulo p { color: var(--color-texto-claro); }

.grid-servicios { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; max-width: 760px; margin: 0 auto; }
.card-servicio { background: var(--color-blanco); border: 1.5px solid var(--color-borde); border-radius: var(--radio); padding: 20px; cursor: pointer; transition: all .2s; }
.card-servicio:hover { border-color: var(--color-primario); box-shadow: var(--sombra-hover); }
.card-servicio.seleccionado { border-color: var(--color-primario); background: #EFF6FF; }
.card-servicio h3 { font-size: 1.05rem; margin-bottom: 6px; }
.card-servicio p { font-size: 0.88rem; color: var(--color-texto-claro); margin-bottom: 10px; }
.card-servicio .meta { display: flex; justify-content: space-between; font-size: 0.85rem; }
.card-servicio .precio { font-weight: 700; color: var(--color-primario); }

.form-card { background: var(--color-blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: 36px; max-width: 460px; margin: 50px auto; }
.form-card h2 { margin-bottom: 8px; }
.form-card .subtitulo { color: var(--color-texto-claro); margin-bottom: 24px; font-size: 0.92rem; }
.campo { margin-bottom: 16px; }
.campo label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 6px; }
.campo input, .campo select, .campo textarea { width: 100%; padding: 11px 14px; border: 1.5px solid var(--color-borde); border-radius: 8px; font-size: 0.95rem; font-family: inherit; }
.campo input:focus, .campo select:focus { outline: none; border-color: var(--color-primario); }
.alerta { padding: 12px 16px; border-radius: 8px; font-size: 0.88rem; margin-bottom: 18px; }
.alerta-error { background: #FEF2F2; color: var(--color-alerta); border: 1px solid #FECACA; }
.alerta-exito { background: #F0FDF4; color: var(--color-exito); border: 1px solid #BBF7D0; }

.pasos-reserva { display: flex; justify-content: center; gap: 8px; margin-bottom: 28px; }
.paso-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-borde); }
.paso-dot.activo { background: var(--color-primario); }

.grid-profesionales { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; max-width: 600px; margin: 0 auto; }
.card-profesional { background: var(--color-blanco); border: 1.5px solid var(--color-borde); border-radius: var(--radio); padding: 18px; text-align: center; cursor: pointer; transition: all .2s; }
.card-profesional:hover, .card-profesional.seleccionado { border-color: var(--color-primario); background: #EFF6FF; }
.card-profesional .avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--color-primario); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; margin: 0 auto 10px; }

.grid-horarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 10px; max-width: 560px; margin: 0 auto; }
.slot-horario { background: var(--color-blanco); border: 1.5px solid var(--color-borde); border-radius: 8px; padding: 10px; text-align: center; cursor: pointer; font-weight: 600; font-size: 0.9rem; transition: all .2s; }
.slot-horario:hover, .slot-horario.seleccionado { border-color: var(--color-primario); background: var(--color-primario); color: white; }

.layout-app { display: flex; min-height: 100vh; }
.sidebar { width: 240px; background: var(--color-blanco); border-right: 1px solid var(--color-borde); padding: 24px 0; flex-shrink: 0; }
.sidebar-logo { padding: 0 24px 24px; font-weight: 800; font-size: 1.15rem; color: var(--color-primario); }
.sidebar-nav a { display: block; padding: 12px 24px; color: var(--color-texto-claro); font-weight: 500; border-left: 3px solid transparent; }
.sidebar-nav a:hover, .sidebar-nav a.activo { background: var(--color-fondo); color: var(--color-primario); border-left-color: var(--color-primario); }
.main-content { flex: 1; padding: 32px; max-width: 100%; overflow-x: auto; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.topbar h1 { font-size: 1.5rem; }

.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-bottom:28px; }
.stat-card { background:white; border-radius:var(--radio); padding:18px; box-shadow:var(--sombra); }
.stat-card .numero { font-size:1.6rem; font-weight:800; }
.stat-card .label { font-size:0.82rem; color:var(--color-texto-claro); }

.badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 0.78rem; font-weight: 600; }
.badge-pendiente { background: #FFFBEB; color: #B45309; }
.badge-confirmado { background: #F0FDF4; color: var(--color-exito); }
.badge-cancelado { background: #FEF2F2; color: var(--color-alerta); }
.badge-completado { background: #EFF6FF; color: var(--color-primario); }
.badge-ausente { background: #F1F5F9; color: var(--color-texto-claro); }

.tabla-admin { width: 100%; background: var(--color-blanco); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); border-collapse: collapse; }
.tabla-admin th, .tabla-admin td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--color-borde); font-size: 0.88rem; }
.tabla-admin th { background: var(--color-fondo); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; color: var(--color-texto-claro); }
.tabla-admin tr:last-child td { border-bottom: none; }
.acciones-fila { display: flex; gap: 6px; flex-wrap: wrap; }

.modulo-bloque { background: var(--color-blanco); border-radius: var(--radio); margin-bottom: 16px; box-shadow: var(--sombra); overflow: hidden; }
.modulo-header { padding: 14px 20px; font-weight: 700; background: var(--color-fondo); border-bottom: 1px solid var(--color-borde); }

.footer { background: var(--color-texto); color: #CBD5E1; padding: 36px 24px; text-align: center; font-size: 0.86rem; }

@media (max-width: 768px) {
    .layout-app { flex-direction: column; }
    .sidebar { width: 100%; }
    .hero h1 { font-size: 1.6rem; }
    .main-content { padding: 16px; }
}