/* App del celular (/citas): sólo para agendar. Botones grandes, para el dedo. */
body.movil { background: var(--fondo); }
.m-barra { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; background: #fff;
  border-bottom: 1px solid var(--borde); padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top)); }
.m-nombre { flex: 1; min-width: 0; color: var(--marino); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-barra .btn { min-height: 38px; padding: 6px 12px; }
.m-cuerpo { padding: 14px 16px calc(100px + env(safe-area-inset-bottom)); max-width: 640px; margin: 0 auto; }
.m-titulo { font-size: 20px; margin: 0; }
.m-cuerpo select { width: auto; max-width: 55%; padding: 8px 10px; font-size: 15px; }
.m-dias { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scroll-snap-type: x proximity; scrollbar-width: none; }
.m-dias::-webkit-scrollbar { display: none; }
.m-dia { flex: none; width: 58px; scroll-snap-align: center; border: 1px solid var(--borde); background: #fff; border-radius: 12px;
  padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; font: inherit; cursor: pointer; color: var(--texto); }
.m-dia small { font-size: 12px; color: var(--suave); }
.m-dia b { font-size: 20px; color: var(--marino); }
.m-dia[aria-selected="true"] { background: var(--acento); border-color: var(--acento); }
.m-dia[aria-selected="true"] small, .m-dia[aria-selected="true"] b { color: var(--acento-texto, #fff); }
.m-lista { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.m-cita { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: var(--texto);
  border: 1px solid var(--borde); border-left: 5px solid var(--color); border-radius: 12px; padding: 12px; cursor: pointer; min-height: 64px; }
.m-cita.asistio, .m-cita.no_asistio { opacity: .6; }
.m-hora { display: flex; flex-direction: column; align-items: center; min-width: 52px; }
.m-hora b { font-size: 18px; color: var(--marino); }
.m-hora small, .m-info small { color: var(--suave); font-size: 13px; }
.m-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.m-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-vacio { text-align: center; color: var(--suave); padding: 40px 10px; background: #fff; border-radius: 12px; border: 1px dashed var(--borde); }
.m-agendar { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); min-height: 56px; font-size: 17px;
  box-shadow: 0 8px 24px rgba(16, 34, 58, .25); max-width: 608px; margin: 0 auto; }
.m-acciones { display: grid; gap: 8px; margin-top: 8px; }
/* Asistente para agendar */
.m-asistente .dialogo-cabeza .btn { visibility: inherit; }
.m-asistente h2 { margin-bottom: 14px !important; }
.m-asistente input { font-size: 17px; padding: 14px; }
.m-opciones { display: grid; gap: 8px; margin-top: 10px; }
.m-opciones.dos { grid-template-columns: 1fr 1fr; }
.m-opcion { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; font: inherit; color: var(--texto);
  background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: 14px; min-height: 56px; cursor: pointer; }
.m-opcion b { font-size: 16px; }
.m-opcion small { color: var(--suave); }
.m-opcion[aria-pressed="true"] { border-color: var(--azul); background: var(--activo); }
.m-opcion.nuevo { color: var(--azul); font-weight: 600; border-style: dashed; }
.m-horas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.m-hora-btn { font: inherit; font-weight: 700; font-size: 17px; min-height: 52px; border-radius: 12px; border: 1px solid var(--borde);
  background: #fff; color: var(--marino); cursor: pointer; }
.m-hora-btn:active { background: var(--activo); }
.m-resumen { background: var(--fondo); border-radius: 12px; padding: 4px 14px; margin-bottom: 16px; }
.m-resumen-fila { display: flex; flex-direction: column; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.m-resumen-fila:last-child { border-bottom: 0; }
.m-resumen-fila small { color: var(--suave); font-size: 13px; }
.m-confirmar { min-height: 56px; font-size: 17px; }