:root{
  --borgona:#5B3A40; --pizarra:#56666A; --arena:#C7AD8B; --piedra:#D8D3CB;
  --marfil:#F7F4EE; --grafito:#2D3232; --blanco:#FFFFFF; --resumen:#EFE7DD; --error:#9B2C2C;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--marfil);color:var(--grafito);font-family:'DM Sans',system-ui,sans-serif;-webkit-text-size-adjust:100%}
a{color:var(--borgona)}a:hover{color:var(--grafito)}
button{font:inherit;cursor:pointer}
.app{max-width:480px;min-height:100dvh;margin:0 auto;display:flex;flex-direction:column;background:var(--marfil)}
@media (min-width:600px){.app{border-left:1px solid var(--piedra);border-right:1px solid var(--piedra)}}

header.barra{padding:20px 24px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--piedra);min-height:64px}
.logo{font-family:'DM Serif Display',serif;font-size:20px;letter-spacing:7px;color:var(--grafito);text-decoration:none}
.volver{background:none;border:0;color:var(--borgona);font-size:14px;min-height:44px;padding:0 4px}

.encabezado{padding:18px 24px 8px;display:flex;flex-direction:column;gap:8px}
.pasos{display:flex;gap:6px}
.pasos span{flex:1;height:4px;border-radius:2px;background:var(--piedra)}
.pasos span.on{background:var(--borgona)}
.paso{font-size:12px;letter-spacing:2px;color:var(--pizarra)}
h1{margin:0;font-family:'DM Serif Display',serif;font-weight:400;font-size:28px;line-height:1.15}
.sub{margin:0;font-size:15px;color:var(--pizarra)}

main{flex:1;padding:12px 24px 16px;display:flex;flex-direction:column;gap:10px}
footer.pie{position:sticky;bottom:0;padding:12px 24px 20px;border-top:1px solid var(--piedra);background:var(--marfil);display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--pizarra);text-align:center}

.buscar{height:44px;border:1px solid var(--piedra);border-radius:10px;background:var(--blanco);padding:0 14px;font:inherit;font-size:16px;color:var(--grafito);width:100%}
.tarjeta{background:var(--blanco);border:1px solid var(--piedra);border-radius:12px;padding:12px 16px;display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--grafito);min-height:60px}
.tarjeta:hover{border-color:var(--borgona);color:var(--grafito)}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--piedra);display:flex;align-items:center;justify-content:center;font-family:'DM Serif Display',serif;font-size:15px;color:var(--borgona);flex-shrink:0}
.avatar.grande{width:56px;height:56px;font-size:20px}
.tarjeta .txt{display:flex;flex-direction:column;gap:2px;flex:1;text-align:left}
.nombre{font-size:15px;font-weight:600}
.esp{font-size:13px;color:var(--pizarra)}
.flecha{color:var(--borgona);font-size:18px}

.perfil{display:flex;gap:14px;align-items:center;padding:4px 0 8px}

.dias{display:flex;gap:8px;overflow-x:auto;padding:4px 0 6px;scrollbar-width:none}
.dias::-webkit-scrollbar{display:none}
.dia{flex:0 0 58px;min-height:60px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;background:var(--blanco);border:1px solid var(--piedra);color:var(--pizarra)}
.dia b{font-size:17px;font-weight:600;color:var(--grafito)}
.dia small{font-size:11px}
.dia[aria-pressed="true"]{background:var(--borgona);border-color:var(--borgona);color:#F7F4EE}
.dia[aria-pressed="true"] b{color:var(--blanco)}
.mas{flex:0 0 auto;padding:0 12px;border-style:dashed}

.filtro{display:inline-flex;border:1px solid var(--piedra);border-radius:10px;overflow:hidden;align-self:flex-start}
.filtro button{min-height:40px;padding:0 14px;border:0;background:var(--blanco);color:var(--grafito);font-size:14px}
.filtro button[aria-pressed="true"]{background:var(--grafito);color:var(--blanco)}

.horas{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.hora{min-height:44px;border-radius:10px;border:1px solid var(--piedra);background:var(--blanco);color:var(--grafito);font-size:15px;font-weight:500}
.hora[aria-pressed="true"]{background:var(--borgona);border-color:var(--borgona);color:var(--blanco)}
.nota{font-size:13px;color:var(--pizarra)}

.boton{height:52px;border-radius:10px;background:var(--borgona);color:var(--blanco);font-size:16px;font-weight:500;border:0;width:100%;display:flex;align-items:center;justify-content:center;text-decoration:none}
.boton:hover{color:var(--blanco);filter:brightness(1.1)}
.boton:disabled{background:var(--piedra);color:var(--pizarra);cursor:not-allowed;filter:none}
.boton.sec{background:var(--blanco);color:var(--borgona);border:1px solid var(--piedra)}

.resumen{padding:12px 14px;border-radius:10px;background:var(--resumen);font-size:14px;display:flex;flex-direction:column;gap:2px}
.resumen b{font-weight:600}
.resumen span{color:var(--pizarra)}

form{display:flex;flex-direction:column;gap:12px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{font-size:13px;font-weight:500}
.campo input{height:48px;border:1px solid var(--piedra);border-radius:10px;background:var(--blanco);padding:0 14px;font:inherit;font-size:16px;color:var(--grafito);width:100%}
.campo input:focus,.buscar:focus{outline:2px solid var(--borgona);outline-offset:1px;border-color:transparent}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.error{background:#F8E9E9;color:var(--error);border-radius:10px;padding:10px 14px;font-size:14px}
.acepto{font-size:12px;color:var(--pizarra)}

.cargando{padding:24px 0;text-align:center;color:var(--pizarra);font-size:14px}
.vacio{background:var(--blanco);border:1px solid var(--piedra);border-radius:12px;padding:16px;font-size:14px;color:var(--pizarra);display:flex;flex-direction:column;gap:10px}

.listo{flex:1;padding:56px 32px 40px;display:flex;flex-direction:column;gap:18px;position:relative;overflow:hidden}
.listo .logo{font-size:24px;letter-spacing:9px;text-align:center}
.check{margin-top:16px;width:56px;height:56px;border-radius:50%;background:var(--borgona);display:flex;align-items:center;justify-content:center;align-self:center}
.listo h1{text-align:center;font-size:30px}
.caja{background:var(--blanco);border:1px solid var(--piedra);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:6px;font-size:15px;position:relative}
.caja b{font-weight:600}
.caja span{color:var(--pizarra)}
.lema{margin-top:auto;text-align:center;font-family:'DM Serif Display',serif;font-style:italic;font-size:18px;color:var(--pizarra);position:relative}
.trazo{position:absolute;left:0;bottom:0;width:100%;height:260px;pointer-events:none}