/* ==========================================================================
   movil.css · App del panel en el celular (canon). Diseño aprobado 2026-10-05 (DISENO-App-Movil).
   Capa propia: todo vive bajo `.m-app` y con clases `m-*`, así no cambia el panel de computadora ni la bandeja.
   Solo usa tokens de canon-tokens.css. El teléfono corre a la escala de letra y controles de la propuesta (§4.1).
   ========================================================================== */
.m-app {
  --fs-micro: 11px; --fs-meta: 12px; --fs-body: 13px; --fs-title: 16px; --fs-screen: 18px; --fs-display: 24px; /* título 16 px: los campos de texto no deben bajar de 16 (iOS acerca la pantalla al escribir) */
  --ctl-sm: 30px; --ctl-md: 34px; --ctl-lg: 38px; /* dibujo compacto (SpeedGas: 38 en teléfono); el dedo recibe 44 px con el área invisible de canon-components (--ctl-touch) */
  --row-h: 56px; --head-h: 52px; --ctl-tab: 56px;
  --app-gutter: var(--sp-4);
  position: fixed; inset: 0; display: flex; flex-direction: column; overflow: hidden;
  height: 100vh; height: 100dvh;
  background: var(--canvas); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
.m-app *, .m-app *::before, .m-app *::after { box-sizing: border-box; }
.m-app :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.m-app :is(.ui-input, .ui-select, .ui-textarea):focus-visible { outline-offset: -1px; }
.m-app [hidden] { display: none !important; }
.m-app button { font: inherit; }
.m-screen { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.m-scroll { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

.m-appbar { height: var(--head-h); flex: none; display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-2) 0 var(--app-gutter); background: var(--surface-1); border-bottom: var(--border-w) solid var(--border-soft); }
.m-appbar h1 { flex: 1; min-width: 0; margin: 0; font-size: var(--fs-title); font-weight: var(--fw-bold); color: var(--text-heading); line-height: var(--lh-tight); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-appbar .m-sub { display: block; font-size: var(--fs-meta); font-weight: var(--fw-regular); color: var(--text-muted); }
.m-appbar .ui-status { flex: none; }

/* Barra inferior: 4 pestañas (rubro sin citas) o 5, en cuadrícula simétrica */
.m-tabbar { flex: none; height: calc(var(--ctl-tab) + env(safe-area-inset-bottom)); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--surface-1); border-top: var(--border-w) solid var(--border-default); padding-bottom: env(safe-area-inset-bottom); }
.m-tabbar button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; border: 0; background: transparent; color: var(--text-muted); font-size: var(--fs-micro); font-weight: var(--fw-medium); cursor: pointer; padding: 0; }
.m-tabbar button .ui-icon, .m-tabbar button svg { width: var(--icon-lg); height: var(--icon-lg); }
.m-tabbar button[aria-current="page"] { color: var(--brand-strong); }
.m-tabbar button[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: var(--sp-1); border-radius: 0 0 var(--r-sm) var(--r-sm); background: var(--brand); }
.m-tabbar .m-badge { position: absolute; top: 6px; left: calc(50% + 6px); min-width: var(--sp-5); height: var(--sp-5); padding: 0 5px; border-radius: var(--r-full); background: var(--rail-badge-alert-bg); color: var(--rail-badge-alert-ink); font-size: var(--fs-micro); font-weight: var(--fw-bold); line-height: var(--sp-5); text-align: center; font-variant-numeric: tabular-nums; }
.m-tabbar .m-badge.is-calm { background: var(--unread-bg); color: var(--unread-on); }

/* ---------- Piezas ---------- */
.m-block { background: var(--surface-1); border-bottom: var(--border-w) solid var(--border-soft); }
.m-block + .m-block { margin-top: var(--sp-2); border-top: var(--border-w) solid var(--border-soft); }
.m-block-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-3) var(--app-gutter) var(--sp-1); }
.m-block-head h2 { margin: 0; font-size: var(--fs-title); font-weight: var(--fw-bold); color: var(--text-strong); line-height: var(--lh-snug); }
.m-block-head .m-count { color: var(--text-muted); font-weight: var(--fw-regular); }
.m-block-foot { padding: var(--sp-2) var(--app-gutter) var(--sp-3); }
.m-note { margin: 0; padding: var(--sp-3) var(--app-gutter); color: var(--text-value); font-size: var(--fs-body); line-height: var(--lh-snug); }
.m-note.is-foot { background: var(--surface-2); color: var(--text-value); font-size: var(--fs-meta); }
.m-note a { color: var(--brand-strong); font-weight: var(--fw-medium); }

.m-row { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: var(--row-h); padding: var(--sp-2) var(--app-gutter); border: 0; border-top: var(--border-w) solid var(--border-soft); color: inherit; text-decoration: none; text-align: left; background: var(--surface-1); }
.m-block-head + .m-row, .m-row:first-child { border-top: 0; }
button.m-row { cursor: pointer; }
button.m-row:active { background: var(--surface-hover); }
.m-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.m-row-name { font-weight: var(--fw-medium); color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-row-text { color: var(--text-value); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-row-meta { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.m-row-meta .t-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-avatar { position: relative; flex: none; width: var(--avatar-md); height: var(--avatar-md); border-radius: var(--r-full); display: grid; place-items: center; color: var(--on-avatar); font-size: var(--fs-meta); font-weight: var(--fw-bold); }

/* Franjas (estado, no botón) */
.m-alert { display: flex; gap: var(--sp-3); align-items: flex-start; width: 100%; padding: var(--sp-3) var(--app-gutter); border: 0; background: var(--danger-soft); color: var(--danger-ink); border-bottom: var(--border-w) solid color-mix(in srgb, var(--danger-solid) 30%, transparent); text-align: left; text-decoration: none; }
.m-alert .ui-icon, .m-alert svg { flex: none; margin-top: 2px; }
.m-alert p { margin: 0; flex: 1; min-width: 0; font-size: var(--fs-body); line-height: var(--lh-snug); }
.m-alert p b { display: block; }
.m-alert.is-pause { background: var(--warning-soft); color: var(--warning-ink); border-color: color-mix(in srgb, var(--warning-solid) 35%, transparent); align-items: center; }
.m-alert.is-link { align-items: center; cursor: pointer; }
.m-alert-go { flex: none; font-weight: var(--fw-bold); font-size: var(--fs-body); text-decoration: underline; background: transparent; border: 0; color: inherit; padding: 0; cursor: pointer; }
.m-alert.is-credit { text-align: left; font: inherit; }
.m-alert.is-credit.is-critical { background: var(--danger-soft); color: var(--danger-ink); border-color: color-mix(in srgb, var(--danger-solid) 35%, transparent); }
.m-offline { padding: var(--sp-2) var(--app-gutter); background: var(--surface-3); color: var(--text-value); font-size: var(--fs-meta); text-align: center; }

/* Números del día */
.m-metrics { display: grid; grid-template-columns: 1fr 1fr; }
.m-metric { padding: var(--sp-3) var(--app-gutter); border-top: var(--border-w) solid var(--border-soft); min-width: 0; }
.m-metric:nth-child(odd) { border-right: var(--border-w) solid var(--border-soft); }
.m-metric b { display: block; font-size: var(--fs-display); line-height: var(--lh-tight); color: var(--text-strong); font-variant-numeric: tabular-nums; letter-spacing: -.01em; overflow-wrap: anywhere; }
.m-metric span { font-size: var(--fs-meta); color: var(--text-muted); line-height: var(--lh-snug); }

/* Avance del día */
.m-progress { padding: var(--sp-1) var(--app-gutter) var(--sp-3); }
.m-progress-line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-body); flex-wrap: wrap; }
.m-progress-line b { color: var(--text-strong); }
.m-bar { height: var(--sp-2); border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; margin: var(--sp-2) 0; }
.m-bar i { display: block; height: 100%; border-radius: inherit; background: var(--brand); }

/* Buscador y filtros */
.m-tools { padding: var(--sp-3) var(--app-gutter) var(--sp-2); background: var(--surface-1); display: grid; gap: var(--sp-2); border-bottom: var(--border-w) solid var(--border-soft); }
.m-search { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--ctl-lg); padding: 0 var(--pad-x-lg); border: var(--border-w) solid var(--border-default); border-radius: var(--r-md); background: var(--surface-2); color: var(--text-muted); }
.m-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--text-primary); outline: none; min-height: var(--ctl-lg); margin-block: calc(var(--border-w) * -1); }
.m-search input::placeholder { color: var(--text-placeholder); }
.m-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; --ctl-h: var(--ctl-lg); }
.m-seg[role="tablist"] { margin-bottom: 0; }
.m-app .ui-seg { height: auto; min-height: var(--ctl-lg); }
.m-app .ui-seg > button, .m-app .ui-seg > label, .m-app .ui-input, .m-app .ui-select, .m-app .ui-textarea { min-height: var(--ctl-lg); }
.m-app .ui-chip { min-height: var(--ctl-md); }
.m-app .ui-composer-box, .m-app .ui-composer-box textarea { min-height: var(--ctl-lg); }
.m-app .ui-btn { --ctl-h: var(--ctl-md); font-size: var(--fs-body); }
.m-app .ui-btn.ui-sm { --ctl-h: var(--ctl-sm); font-size: var(--fs-meta); }
.m-app .ui-btn.ui-lg { --ctl-h: var(--ctl-lg); }
.m-app .ui-btn.is-danger-outline { border-color: color-mix(in srgb, var(--danger-solid) 50%, transparent); color: var(--danger-ink); background: var(--surface-1); }
.m-app .ui-iconbtn { --ctl-h: var(--ctl-md); }
.m-app .ui-status.is-sm { font-size: var(--fs-micro); padding: 1px var(--sp-2); }

/* ---------- Bandeja: la lista reutiliza la fila canon (.cv-row) en una sola columna ---------- */
.m-list { background: var(--surface-1); }
.m-list ul { list-style: none; margin: 0; padding: 0; }
.m-list .cv-row { border-radius: 0; border-width: 0 0 var(--border-w) 0; margin: 0; box-shadow: none; min-height: var(--row-h); padding: var(--sp-3) var(--app-gutter); width: 100%; }
.m-list .cv-row:first-child { border-top: 0; }
.m-more { width: 100%; }
.m-empty { padding: var(--sp-6) var(--app-gutter); text-align: center; color: var(--text-value); display: grid; gap: var(--sp-3); justify-items: center; }
.m-skel { display: grid; gap: 1px; background: var(--border-soft); }
.m-skel span { display: block; height: var(--row-h); background: var(--surface-1); position: relative; overflow: hidden; }
.m-skel span::after { content: ""; position: absolute; inset: var(--sp-3) var(--app-gutter); background: var(--surface-3); border-radius: var(--r-md); opacity: .6; }

/* ---------- Chat (reutiliza la ventana canon, con piel de teléfono) ---------- */
.m-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; background: var(--canvas); }
.m-chat .cv-chat { flex: 1; min-height: 0; height: auto; border: 0; width: 100%; max-width: 100%; }
.m-chat .cv-chat.is-mobile { display: flex; flex-direction: column; }
.m-chat .cv-chat.is-mobile .cv-head { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: center; column-gap: var(--sp-2); row-gap: 0; height: auto; min-height: var(--head-h); padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-1); }
.m-chat .cv-chat.is-mobile .cv-ctl { display: contents; }
.m-chat .cv-chat.is-mobile .cv-who { min-width: 0; }
.m-chat .cv-chat.is-mobile .cv-who .t-strong { font-size: var(--fs-title); font-weight: var(--fw-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.m-chat .cv-chat.is-mobile .cv-who small { display: block; color: var(--text-muted); font-size: var(--fs-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-chat .cv-chat.is-mobile .cv-who small.is-empty { display: none; }
.m-chat .cv-chat.is-mobile .cv-stx { display: none; }
.m-chat .cv-chat.is-mobile .cv-ficha-btn, .m-chat .cv-chat.is-mobile .cv-labelbar { display: none; }
.m-chat .cv-chat.is-mobile .cv-call { grid-column: 4; }
.m-chat .cv-chat.is-mobile .cv-more { grid-column: 5; }
.m-chat .cv-chat.is-mobile .cv-hold { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3); margin: var(--sp-1) calc(-1 * var(--sp-2)) calc(-1 * var(--sp-1)) calc(-1 * var(--sp-1)); border-top: var(--border-w) solid var(--border-soft); background: var(--surface-1); }
.m-chat .cv-chat.is-mobile .cv-hold .ui-btn { flex: none; }
.m-chat .cv-chat.is-mobile .cv-msgs { flex: 1; min-height: 0; }
.m-fact { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--app-gutter); background: var(--surface-2); border-bottom: var(--border-w) solid var(--border-soft); font-size: var(--fs-meta); color: var(--text-value); min-width: 0; }
.m-fact span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-fact b { color: var(--text-strong); font-weight: var(--fw-medium); }
.m-quick { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; padding: var(--sp-2) var(--sp-3) 0; background: var(--surface-1); }
.m-quick::-webkit-scrollbar { display: none; }
.m-quick button { flex: none; height: var(--ctl-sm); max-width: 70vw; padding: 0 var(--sp-3); border: var(--border-w) solid var(--border-default); border-radius: var(--r-md); background: var(--surface-1); color: var(--text-strong); font-size: var(--fs-meta); font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.m-quick button:active { background: var(--surface-hover); }
.m-chat .cv-composer .ui-composer-box { border-radius: var(--r-lg); }
.m-chat .ui-composer-note { font-size: var(--fs-meta); }

/* ---------- Agenda ---------- */
.m-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); background: var(--surface-1); }
.m-days button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; height: calc(var(--ctl-lg) + var(--sp-2)); min-width: 0; border: var(--border-w) solid transparent; border-radius: var(--r-md); background: transparent; color: var(--text-value); cursor: pointer; padding: 0; }
.m-days button small { font-size: var(--fs-micro); color: var(--text-muted); }
.m-days button b { font-size: var(--fs-title); font-variant-numeric: tabular-nums; }
.m-days button[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); }
.m-days button[aria-pressed="true"] small { color: var(--on-brand); }
.m-days button .m-has { width: 4px; height: var(--sp-1); border-radius: var(--r-sm); background: var(--brand); margin-top: 2px; }
.m-days button[aria-pressed="true"] .m-has { background: var(--on-brand); }
.m-days button .m-none { width: 4px; height: var(--sp-1); margin-top: 2px; }
.m-appt { display: grid; grid-template-columns: 5.4em minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); min-height: var(--row-h); padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--app-gutter); border-top: var(--border-w) solid var(--border-soft); background: var(--surface-1); }
.m-appt-time { white-space: nowrap; font-weight: var(--fw-bold); color: var(--text-strong); font-variant-numeric: tabular-nums; line-height: var(--lh-snug); }
.m-appt-time small { display: block; font-weight: var(--fw-regular); font-size: var(--fs-meta); color: var(--text-muted); }
.m-appt.is-done .m-appt-time, .m-appt.is-done .m-row-name { color: var(--text-muted); }
.m-appt-actions { display: flex; gap: var(--sp-1); align-items: center; }
.m-now { display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--app-gutter); height: calc(var(--sp-5) + 2px); font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--danger-ink); background: var(--surface-1); }
.m-now::after { content: ""; flex: 1; height: 2px; background: var(--danger-solid); border-radius: var(--r-full); }
.m-pick { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; padding: var(--sp-2) var(--app-gutter); background: var(--surface-1); }

/* ---------- Avisos ---------- */
.m-notice { display: grid; gap: var(--sp-1); padding: var(--sp-3) var(--app-gutter); border-top: var(--border-w) solid var(--border-soft); background: var(--surface-1); }
.m-block-head + .m-notice, .m-notice:first-child { border-top: 0; }
.m-notice-meta { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-muted); font-size: var(--fs-meta); min-width: 0; }
.m-notice-meta span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-notice h3 { margin: 0; font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--text-strong); line-height: var(--lh-snug); }
.m-notice p { margin: 0; color: var(--text-value); line-height: var(--lh-snug); }
.m-notice-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.m-notice.is-read h3 { font-weight: var(--fw-regular); }

/* ---------- Ajustes ---------- */
.m-set { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--row-h); padding: var(--sp-2) var(--app-gutter); border-top: var(--border-w) solid var(--border-soft); background: var(--surface-1); }
.m-block-head + .m-set { border-top: 0; }
.m-set .m-row-main span { font-size: var(--fs-meta); color: var(--text-muted); line-height: var(--lh-snug); }
.m-set .m-row-main b { font-weight: var(--fw-medium); color: var(--text-strong); }
/* El botón mide 56×44 (área de toque); el dibujo del interruptor (48×28) va en ::before y la perilla en ::after, sin cambiar cómo se ve. */
.m-switch { position: relative; flex: none; width: 56px; height: var(--ctl-touch); border: 0; background: transparent; cursor: pointer; padding: 0; }
.m-switch::before { content: ""; position: absolute; left: 4px; top: 8px; width: 48px; height: calc(var(--sp-6) + var(--sp-1)); border-radius: var(--r-full); background: var(--border-strong); }
.m-switch::after { content: ""; position: absolute; top: 11px; left: 7px; width: 22px; height: calc(var(--sp-5) + 2px); border-radius: var(--r-full); background: var(--surface-1); box-shadow: var(--shadow-1); transition: transform var(--dur-fast) var(--ease); }
.m-switch[aria-checked="true"]::before { background: var(--brand); }
.m-switch[aria-checked="true"]::after { transform: translateX(20px); }
.m-btn-row { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); padding: var(--sp-2) var(--app-gutter) var(--sp-3); }
.m-btn-row.is-two { grid-template-columns: 1fr 1fr; }
.m-btn-row .ui-btn { width: 100%; }

/* ---------- Hoja inferior y aviso breve ---------- */
.m-scrim { position: absolute; inset: 0; background: var(--overlay); z-index: 40; display: flex; align-items: flex-end; }
.m-sheet { width: 100%; background: var(--surface-1); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--shadow-3); padding: var(--sp-2) 0 calc(var(--sp-3) + env(safe-area-inset-bottom)); max-height: 85%; overflow: auto; animation: m-rise var(--dur-base) var(--ease); }
.m-sheet:focus { outline: none; }
.m-sheet .m-grip { width: 40px; height: var(--sp-1); border-radius: var(--r-full); background: var(--border-strong); margin: 0 auto var(--sp-2); }
.m-sheet h2 { margin: 0; padding: var(--sp-2) var(--app-gutter) 0; font-size: var(--fs-title); color: var(--text-strong); }
.m-sheet > p { margin: var(--sp-1) 0 var(--sp-2); padding: 0 var(--app-gutter); color: var(--text-value); line-height: var(--lh-snug); }
.m-sheet-item { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: calc(var(--ctl-lg) + var(--sp-2)); padding: 0 var(--app-gutter); border: 0; border-top: var(--border-w) solid var(--border-soft); background: transparent; color: var(--text-strong); font-size: var(--fs-body); text-align: left; text-decoration: none; cursor: pointer; }
.m-sheet-item:active { background: var(--surface-hover); }
.m-sheet-item.is-danger { color: var(--danger-ink); }
.m-sheet-item small { margin-left: auto; color: var(--text-muted); font-size: var(--fs-meta); }
.m-choice { display: flex; align-items: center; gap: var(--sp-3); min-height: calc(var(--ctl-lg) + var(--sp-2)); padding: 0 var(--app-gutter); border-top: var(--border-w) solid var(--border-soft); cursor: pointer; color: var(--text-strong); }
.m-choice input { width: 20px; height: var(--icon-lg); accent-color: var(--brand); margin: 0; }
.m-toast { position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: calc(var(--ctl-tab) + var(--sp-3) + env(safe-area-inset-bottom)); z-index: 50; display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--hero-bg); color: var(--hero-ink); font-size: var(--fs-body); box-shadow: var(--shadow-2); animation: m-rise var(--dur-base) var(--ease); }
.m-toast.is-error { background: var(--danger-solid); color: var(--on-brand); }
.m-toast .ui-icon, .m-toast svg { flex: none; color: var(--success-solid); }
.m-toast.is-error .ui-icon, .m-toast.is-error svg { color: inherit; }
@keyframes m-rise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .m-sheet, .m-toast { animation: none; } .m-switch::after { transition: none; } }

/* El chat ocupa toda la pantalla: sin barra inferior (se vuelve con «atrás») */
.m-app.is-chat .m-tabbar { display: none; }
.m-app.is-chat .m-toast { bottom: calc(var(--sp-8) + env(safe-area-inset-bottom) + 72px); }

/* ---------- Fase 3: reprogramar, comprobantes, instalar ---------- */
.m-app .m-alert.is-pay { background: var(--info-soft); color: var(--info-ink); border-color: color-mix(in srgb, var(--info-solid) 35%, transparent); align-items: center; cursor: pointer; }
.m-set.is-button { width: 100%; border-left: 0; border-right: 0; border-bottom: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.m-set.is-button:active { background: var(--surface-hover); }
.m-field { display: grid; gap: var(--sp-2); padding: var(--sp-2) var(--app-gutter); }
.m-field .ui-input, .m-field .ui-textarea { font-size: var(--fs-title); }
.m-field .ui-input.ui-lg { --ctl-h: var(--ctl-lg); }
.m-sheet-error { margin: 0; padding: var(--sp-1) var(--app-gutter); }

/* Reprogramar: días en una fila que se desliza, horarios como botones de 44 px */
.m-pick { gap: var(--sp-1); }
.m-daychip { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 52px; height: calc(var(--ctl-lg) + var(--sp-2)); padding: 0 var(--sp-2); border: var(--border-w) solid var(--border-default); border-radius: var(--r-md); background: var(--surface-1); color: var(--text-value); cursor: pointer; }
.m-daychip small { font-size: var(--fs-micro); color: var(--text-muted); }
.m-daychip b { font-size: var(--fs-title); font-variant-numeric: tabular-nums; }
.m-daychip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.m-daychip[aria-pressed="true"] small { color: var(--on-brand); }
.m-slots-wrap { padding: var(--sp-1) 0; }
.m-slots { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-2) var(--app-gutter); }
.m-slots .ui-chip { --ctl-h: var(--ctl-lg); min-width: 76px; justify-content: center; font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.m-slots .ui-chip small { color: var(--text-muted); font-weight: var(--fw-regular); }
.m-slots .ui-chip[aria-pressed="true"] small { color: inherit; }
.m-slots .m-reason { flex: 0 1 auto; max-width: 100%; height: auto; min-height: var(--ctl-lg); padding-block: var(--sp-2); white-space: normal; text-align: left; justify-content: flex-start; line-height: var(--lh-snug); }
.m-picked { display: flex; align-items: center; gap: var(--sp-2); padding-block: var(--sp-1); color: var(--text-strong); font-weight: var(--fw-medium); }

/* Comprobantes */
.m-proof { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); padding: var(--sp-3) 0 var(--sp-1); border-top: var(--border-w) solid var(--border-soft); background: var(--surface-1); }
.m-block-head + .m-proof, .m-proof:first-of-type { border-top: 0; }
.m-proof-photo { position: relative; display: block; width: calc(100% - 2 * var(--app-gutter)); height: calc(var(--row-h) * 3.5); margin: 0 var(--app-gutter); padding: 0; border: var(--border-w) solid var(--border-default); border-radius: var(--r-md); background: var(--surface-3); overflow: hidden; cursor: zoom-in; }
.m-proof-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.m-proof-photo.is-missing { display: grid; place-content: center; justify-items: center; gap: var(--sp-2); height: auto; min-height: calc(var(--row-h) * 2); padding: var(--sp-4); cursor: default; color: var(--text-value); text-align: center; }
.m-proof-photo.is-missing p { margin: 0; }
.m-proof-loading { position: absolute; inset: 0; background: var(--surface-3); }
.m-proof-zoom { position: absolute; right: var(--sp-2); bottom: var(--sp-2); display: inline-flex; align-items: center; gap: var(--sp-1); height: var(--ctl-sm); padding: 0 var(--sp-3); border-radius: var(--r-md); background: var(--hero-bg); color: var(--hero-ink); font-size: var(--fs-meta); font-weight: var(--fw-medium); }
.m-proof-info { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); min-width: 0; padding: 0 var(--app-gutter); }
.m-proof-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.m-proof-amount { margin: 0; display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.m-proof-amount b { font-size: var(--fs-display); line-height: var(--lh-tight); color: var(--text-strong); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.m-proof-amount span { font-size: var(--fs-meta); color: var(--text-muted); }
.m-proof.is-done { opacity: .85; padding-bottom: var(--sp-3); }

/* Instalar la app */
.m-steps { list-style: none; margin: 0; padding: 0; }
.m-step { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--row-h); padding: var(--sp-3) var(--app-gutter); border-top: var(--border-w) solid var(--border-soft); }
.m-step-n { flex: none; display: grid; place-items: center; width: var(--sp-6); height: var(--sp-6); border-radius: var(--r-md); background: var(--brand-soft); color: var(--brand-strong); font-weight: var(--fw-bold); font-size: var(--fs-meta); }
.m-step-art { flex: none; display: grid; place-items: center; width: var(--ctl-lg); height: var(--ctl-lg); border-radius: var(--r-md); border: var(--border-w) solid var(--border-default); background: var(--surface-2); color: var(--info-ink); }
.m-step .m-row-main b { font-weight: var(--fw-medium); color: var(--text-strong); }
.m-step .m-row-main span { font-size: var(--fs-meta); color: var(--text-value); line-height: var(--lh-snug); }
.m-tip { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-3); align-items: start; padding: var(--sp-3) var(--app-gutter); background: var(--info-soft); color: var(--info-ink); border-bottom: var(--border-w) solid color-mix(in srgb, var(--info-solid) 35%, transparent); }
.m-tip .ui-icon, .m-tip svg { margin-top: 2px; }
.m-tip p { margin: 0; font-size: var(--fs-body); line-height: var(--lh-snug); }
.m-tip p b { display: block; }
.m-tip-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.m-tip .ui-btn.ui-btn-text { color: var(--info-ink); }
/* ---------- Avisos de este teléfono: estado, guía y interruptores apagados ---------- */
.m-push-state { display: grid; justify-items: start; gap: var(--sp-1); padding: var(--sp-1) var(--app-gutter) var(--sp-2); }
.m-push-state p { margin: 0; color: var(--text-value); font-size: var(--fs-body); line-height: var(--lh-snug); }
.m-steps { margin: var(--sp-1) var(--app-gutter) var(--sp-2); }
.m-set.is-off .m-row-main b, .m-set.is-off .m-row-main span { color: var(--text-muted); }
.m-switch:disabled { cursor: not-allowed; opacity: .55; }

/* Áreas táctiles de 44 px también dentro de la ficha del contacto y de otras piezas del canon que la app móvil reutiliza. El dibujo no cambia: el elemento mide 44 y lo visible va en ::before / ::after. */
.m-app .cv-num, .m-app .cv-ficha summary { display: flex; align-items: center; min-height: var(--ctl-lg); }
.m-app .ui-switch.ui-switch { width: 56px; height: var(--ctl-touch); border: 0; background: transparent; }
.m-app .ui-switch::before { inset: auto; left: 4px; top: 50%; width: 48px; height: calc(var(--sp-6) + var(--sp-1)); transform: translateY(-50%); border: var(--border-w) solid var(--text-muted); border-radius: var(--r-full); background: var(--surface-3); }
.m-app .ui-switch::after { left: 8px; width: calc(var(--sp-5) + 2px); height: calc(var(--sp-5) + 2px); }
.m-app .ui-switch:is(:checked, [aria-checked="true"], .is-on)::before { border-color: var(--brand); background: var(--brand-soft); }
.m-app .ui-switch:is(:checked, [aria-checked="true"], .is-on)::after { transform: translate(var(--sp-5), -50%); }
.m-app input[type="checkbox"], .m-app input[type="radio"] { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: var(--ctl-touch); height: var(--ctl-touch); margin: 0; border: 0; background: transparent; cursor: pointer; }
.m-app input[type="checkbox"]::before, .m-app input[type="radio"]::before { content: ""; position: absolute; inset: 50% auto auto 50%; width: calc(var(--sp-5) + 2px); height: calc(var(--sp-5) + 2px); transform: translate(-50%, -50%); border: calc(var(--border-w) * 2) solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface-1); }
.m-app input[type="radio"]::before { border-radius: var(--r-full); }
.m-app input[type="checkbox"]:checked::before { border-color: var(--brand); background: var(--brand); box-shadow: inset 0 0 0 3px var(--surface-1); }
.m-app input[type="radio"]:checked::before { border-color: var(--brand); background: var(--brand); box-shadow: inset 0 0 0 4px var(--surface-1); }