/* Buscador v3 (flag mt5_search_v3_enabled; vista site/index-v3). Mobile-first: celular = atajos de un toque + «Filtrar»
   a pantalla completa; tablet (≥ 640 px) = «Filtrar» como panel lateral; computadora (≥ 980 px) = columna de filtros a
   la izquierda, como Mercado Libre, y el contenedor más ancho (hasta 1320 px).

   Marca: sistema de diseño «Revamp v6» de la app (RENT-A-SOFT-SA/mrturno_app, docs/ui_ux_design.md y
   src/ui/shared/theme/tokens.ts, shadows.ts, variantTokens.ts). Nunito; escala con base 17 px en el celular; un solo
   acento naranja (#FF7300, sólo para la acción principal); neutros cálidos marrones (nunca grises fríos); cards sin
   borde con sombra marrón casi imperceptible; chips de radio 12, badges de 8, cards y botones de 16.
   Contraste: texto naranja sobre blanco #B85300 (AA); links y acciones terciarias #D86100 (excepción de marca, como en
   la app); texto sobre naranja claro #B04F00.

   Todo lo que toca el layout compartido (mainv2.php: espaciador, comentarios) va con `body:has(#mt5v3)`: sólo
   aplica en esta página, que sólo existe con el flag prendido. Con el flag apagado el sitio queda igual. Desde la
   ronda 4 la cabecera (buscador, zona y «Turno para»), la barra de abajo del celular y el pie son del layout, en todas
   las páginas: css/site-v3.css. */
.mt5v3, body:has(#mt5v3) {
  /* Naranja (escala de la app) */
  --v3-or: #FF7300;          /* orange-500: fondo de la acción principal (CTA) */
  --v3-or-pressed: #E46700;  /* orange-600: CTA presionado y foco de escritura */
  --v3-link: #D86100;        /* orange-700: links y acciones terciarias */
  --v3-or-text: #B85300;     /* orange-800: dato naranja destacado sobre blanco */
  --v3-on-soft: #B04F00;     /* orange-900: texto sobre naranja claro */
  --v3-soft: #FFF2E7;        /* orange-50: superficie seleccionada */
  --v3-peach: #FFE7D1;       /* orange-100: botón secundario */
  --v3-peach-2: #FFD9B8;     /* orange-200: secundario presionado */
  /* Neutros cálidos (gray y sand de la app) */
  --v3-ink: #231F1D;         /* gray-900: texto principal */
  --v3-ink-2: #3F3835;       /* gray-800: texto secundario prominente */
  --v3-ink-3: #6E6560;       /* gray-600: texto auxiliar */
  --v3-off: #BDB3AC;         /* gray-400: deshabilitado */
  --v3-bg: #FCF8F6;          /* sand-50: fondo */
  --v3-sand: #F3EDE9;        /* sand-100: superficie neutra suave */
  --v3-line: #F1EAE4;        /* sand-200: divisores */
  --v3-ring: #E6DED8;        /* sand-400: borde de botones outline */
  --v3-card: #FFFFFF;
  /* Estados */
  --v3-ok: #10816A; --v3-ok-soft: #D7F3E9; --v3-ok-dark: #0F7260;
  --v3-info: #0077B5; --v3-info-soft: #D9F1F9; --v3-info-dark: #005F8E;
  --v3-warn: #8A6C00; --v3-warn-soft: #FFF0C2; --v3-warn-dark: #6E5600;
  --v3-danger: #D2242C;
  /* Sombras (marrón cálido, nunca negro) y el glow del CTA */
  --v3-shadow-card: 0 3px 12px rgba(70, 50, 30, .06);
  --v3-shadow-input: 0 2px 6px rgba(70, 50, 30, .05);
  --v3-glow: 0 8px 18px -6px rgba(255, 115, 0, .45);
  /* Tipografía (standard de la app) */
  --v3-caption: 13px; --v3-caption-lh: 18px;
  --v3-small: 15px; --v3-small-lh: 20px;
  --v3-body: 17px; --v3-body-lh: 24px;
  --v3-lead: 19px; --v3-lead-lh: 26px;
  --v3-subtitle: 21px; --v3-subtitle-lh: 28px;
  --v3-title: 26px; --v3-title-lh: 33px;
  --v3-font: Nunito, "Nunito Regular", "Segoe UI", system-ui, sans-serif;
}
.mt5v3 {
  color: var(--v3-ink);
  font-family: var(--v3-font);
  font-size: var(--v3-body);
  line-height: var(--v3-body-lh);
  display: grid;
  gap: 16px;
  margin: 0 -12px;
}
.mt5v3 *, .mt5v3 *::before, .mt5v3 *::after { box-sizing: border-box; }
.mt5v3 button { font: inherit; color: inherit; cursor: pointer; }
.mt5v3 [hidden] { display: none !important; }
.mt5v3 :focus-visible { outline: 2px solid var(--v3-or-pressed); outline-offset: 2px; }
.mt5v3 b, .mt5v3 strong { font-weight: 800; }
.mt5v3 h1, .mt5v3 h2, .mt5v3 h3, .mt5v3 h4 { font-family: var(--v3-font); }
/* Ronda 9: título de cada página v3 como <h1> real (antes un div con role="heading"). Pisa la regla vieja del logo
   (site-custom.css y el CSS del micrositio: h1 { height: 12px; text-indent: -9999px; background: logo }). */
/* Ronda 15: «width: auto» también (el CSS del micrositio fija h1 { width: 360px } para el logo viejo: el título se salía del celular). */
h1.mt5v3-h1 { width: auto; height: auto; text-indent: 0; background: none; cursor: auto; margin: 0; padding: 0; letter-spacing: normal; }
.mt5v3 a { color: var(--v3-link); }

/* Layout compartido, sólo en esta página: fondo cálido, sin el espaciador .pt-5 (ninguna franja entre la cabecera y
   el contenido) y sin el alto mínimo de 100vh del contenedor (el hueco antes del pie). */
html:has(#mt5v3) { background: #FCF8F6; }
body:has(#mt5v3) { background: var(--v3-bg); }
body:has(#mt5v3) .mrturno-h100 > .pt-5 { display: none; }
body:has(#mt5v3) .mrturno-h100 { min-height: 0 !important; }

/* ---------- Inicio ---------- */
.mt5v3-home { display: grid; gap: 20px; padding: 16px 16px 8px; }
.mt5v3-blk h2 { margin: 0 0 10px; font-size: var(--v3-lead); line-height: var(--v3-lead-lh); font-weight: 800; color: var(--v3-ink); text-align: left; }
.mt5v3-tops { display: flex; flex-wrap: wrap; gap: 8px; }
/* Chips (patrón de la app): sin borde, blanco con sombra; activo en naranja claro. */
.mt5v3-top { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 12px; background: var(--v3-card); box-shadow: var(--v3-shadow-input); font-weight: 700; font-size: var(--v3-small); color: var(--v3-ink-2) !important; text-decoration: none; }
.mt5v3-top:hover { background: var(--v3-soft); color: var(--v3-on-soft) !important; }
.mt5v3-again { display: grid; gap: 10px; }
.mt5v3-again-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--v3-card); border-radius: 16px; box-shadow: var(--v3-shadow-card); }
.mt5v3-again-t { flex: 1; min-width: 0; font-size: var(--v3-small); line-height: var(--v3-small-lh); }
.mt5v3-again-t small { display: block; color: var(--v3-ink-3); font-size: var(--v3-caption); line-height: var(--v3-caption-lh); }
.mt5v3-again-go { background: var(--v3-peach); color: var(--v3-link) !important; font-weight: 800; border-radius: 12px; padding: 10px 14px; font-size: var(--v3-small); white-space: nowrap; text-decoration: none; }
.mt5v3-again-row .mt5v3-ph { width: 44px; height: 44px; font-size: var(--v3-small); }
.mt5v3 .mt5-live { margin: 0; font-size: var(--v3-small); background: var(--v3-card); border: 0; border-radius: 16px; box-shadow: var(--v3-shadow-card); color: var(--v3-ink-2); }
.mt5v3 .mt5-live .mt5-live-num { color: var(--v3-or-text); }

/* ---------- Atajos de un toque (celular y tablet): saltan de línea ---------- */
.mt5v3-quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px 0; }
.mt5v3-qc { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 14px; border: 0; border-radius: 12px; background: var(--v3-card); box-shadow: var(--v3-shadow-input); font-weight: 700; font-size: var(--v3-small); color: var(--v3-ink-2) !important; max-width: 100%; text-align: left; }
.mt5v3-qc.is-on { background: var(--v3-soft); box-shadow: none; color: var(--v3-on-soft) !important; font-weight: 800; }
.mt5v3-qc--filt { font-weight: 800; color: var(--v3-ink) !important; }
.mt5v3-n { background: var(--v3-or); color: #fff; border-radius: 8px; font-size: var(--v3-caption); line-height: 18px; padding: 0 7px; }

/* ---------- Resultados ---------- */
.mt5v3-body { display: grid; gap: 16px; padding: 0 16px; }
.mt5v3-side { display: none; }
.mt5v3-main { display: grid; gap: 12px; min-width: 0; align-content: start; }
.mt5v3-res-title { margin: 0; font-size: var(--v3-subtitle); line-height: var(--v3-subtitle-lh); font-weight: 800; color: var(--v3-ink); text-wrap: balance; }
.mt5v3-res-title small { font-size: var(--v3-small); font-weight: 400; color: var(--v3-ink-3); margin-left: 6px; }
.mt5v3-note { margin: -4px 0 0; font-size: var(--v3-small); line-height: var(--v3-small-lh); color: var(--v3-ink-3); }
.mt5v3-applied { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mt5v3-tag { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 12px; border-radius: 12px; background: var(--v3-soft); color: var(--v3-on-soft); font-size: var(--v3-small); font-weight: 700; max-width: 100%; }
.mt5v3-tag button { border: 0; background: none; color: var(--v3-on-soft); font-size: 20px; line-height: 1; padding: 0 6px; border-radius: 8px; min-width: 36px; min-height: 36px; }
.mt5v3-tag button:hover { background: var(--v3-peach); }
.mt5v3-clear { border: 0; background: none; color: var(--v3-link) !important; font-weight: 800; font-size: var(--v3-small); padding: 8px 6px; }
.mt5v3-empty { text-align: center; color: var(--v3-ink-2); padding: 28px 16px; background: var(--v3-card); border-radius: 16px; box-shadow: var(--v3-shadow-card); font-size: var(--v3-small); line-height: var(--v3-small-lh); }

/* Tarjeta (Revamp: sin borde, radio 16, sombra cálida): datos del profesional y UNA acción, los horarios. */
.mt5v3-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.mt5v3-card { background: var(--v3-card); border-radius: 16px; box-shadow: var(--v3-shadow-card); padding: 16px; display: grid; gap: 14px; }
.mt5v3-card-top { display: flex; gap: 12px; align-items: flex-start; }
/* Lugar para la foto del médico: un círculo de 52 px (después va la foto); sin foto, las iniciales. */
.mt5v3-ph { width: 52px; height: 52px; border-radius: 50%; background: var(--v3-sand); color: var(--v3-ink-3); font-weight: 800; display: grid; place-items: center; flex: none; font-size: var(--v3-lead); overflow: hidden; }
.mt5v3-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt5v3-card-t { min-width: 0; flex: 1; }
.mt5v3-name { font-size: var(--v3-body); line-height: var(--v3-body-lh); color: var(--v3-ink) !important; text-decoration: none; }
.mt5v3-name b { font-weight: 800; }
.mt5v3-name:hover { color: var(--v3-or-text) !important; }
.mt5v3-spec { font-weight: 700; font-size: var(--v3-small); line-height: var(--v3-small-lh); color: var(--v3-ink-2); margin-top: 2px; }
.mt5v3-meta { color: var(--v3-ink-3); font-size: var(--v3-small); line-height: var(--v3-small-lh); }
.mt5v3-meta a { color: inherit !important; }
.mt5v3-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mt5v3-bd { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 8px; font-size: var(--v3-caption); line-height: var(--v3-caption-lh); font-weight: 700; background: var(--v3-ok-soft); color: var(--v3-ok-dark); }
.mt5v3-bd--tele { background: var(--v3-info-soft); color: var(--v3-info-dark); }
.mt5v3-bd--off { background: var(--v3-warn-soft); color: var(--v3-warn-dark); }
.mt5v3-card-r { display: grid; gap: 10px; align-content: start; min-width: 0; }
.mt5v3-slots { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Horario: chip de una sola línea («Hoy 16:30», «Lun 9/11 09:00»), naranja claro con texto AA, 44 px de alto. */
.mt5v3 .mt5v3-slot { display: inline-flex; align-items: center; justify-content: center; flex: none; width: auto; white-space: nowrap; min-height: 44px; padding: 0 14px; font-size: var(--v3-small); font-weight: 800; border: 0; border-radius: 12px; background: var(--v3-soft); color: var(--v3-on-soft) !important; text-decoration: none; }
.mt5v3 .mt5v3-slot:hover, .mt5v3 .mt5v3-slot:focus-visible { background: var(--v3-or); color: #fff !important; box-shadow: var(--v3-glow); }
.mt5v3-more-slots { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-size: var(--v3-small); font-weight: 800; color: var(--v3-link) !important; white-space: nowrap; text-decoration: none; }
.mt5v3-more-slots:hover { text-decoration: underline; }
.mt5v3-next { margin: 0; font-size: var(--v3-small); line-height: var(--v3-small-lh); color: var(--v3-ink-3); }
.mt5v3-next .bi, .mt5v3-next b { color: var(--v3-or-text); }
.mt5v3-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mt5v3-see, .mt5v3-phone { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 16px; font-weight: 800; font-size: var(--v3-small); text-decoration: none; white-space: nowrap; }
/* «Ver horarios»: botón secundario de la app (peach con label naranja). */
.mt5v3-see { background: var(--v3-peach); border: 0; color: var(--v3-link) !important; }
.mt5v3-see:hover { background: var(--v3-peach-2); }
.mt5v3-phone { background: var(--v3-card); border: 1px solid var(--v3-ring); color: var(--v3-ink-2); }

/* Agenda de la tarjeta (ronda 4, como la agenda de www.mrturno.com): un día por fila con el rango en gris a la
   izquierda y las horas a la derecha en UNA fila (alto fijo: entran las que caben según el ancho); flechas de semana
   propias de cada tarjeta; «Más horarios ›» abajo a la derecha. */
.mt5v3-ag { display: grid; gap: 0; min-width: 0; }
.mt5v3-ag[aria-busy="true"] { opacity: .55; pointer-events: none; }
.mt5v3-ag-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 4px; }
.mt5v3-ag-lbl { font-size: var(--v3-caption); line-height: var(--v3-caption-lh); color: var(--v3-ink-3); font-weight: 700; }
.mt5v3-wk { display: inline-flex; align-items: center; gap: 2px; }
.mt5v3-wk button { width: 36px; height: 36px; border: 0; border-radius: 99px; background: none; color: var(--v3-ink-3); display: grid; place-items: center; padding: 0; }
.mt5v3-wk button:hover:not(:disabled) { background: var(--v3-sand); color: var(--v3-ink); }
.mt5v3-wk button:disabled { opacity: .28; cursor: default; }
/* Ronda 5 (Daniel: «salen muy grandes, todas muy destacadas y se salen del tamaño vertical de la línea»): la línea del día
   mide 44 px con todo centrado; las horas son botones de 30 px, blancos con borde naranja suave, que se llenan al tocar.
   Una sola fila (entran las que caben): la caja mide 44 px para que el área táctil (::after, 7 px arriba y abajo)
   quede adentro, y la segunda fila arranca en 51 px, fuera de la vista. */
.mt5v3-dr { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 44px; padding: 0; border-top: 1px solid var(--v3-line); }
.mt5v3-dl { min-width: 0; line-height: 1.2; }
.mt5v3-dl b { display: block; font-size: var(--v3-small); line-height: var(--v3-small-lh); font-weight: 800; color: var(--v3-ink); white-space: nowrap; }
.mt5v3-dl small { display: block; font-size: var(--v3-caption); line-height: var(--v3-caption-lh); color: var(--v3-ink-3); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt5v3-hrs { display: flex; flex-wrap: wrap; align-content: flex-start; column-gap: 6px; row-gap: 14px; height: 44px; padding: 7px 2px 0; overflow: hidden; min-width: 0; box-sizing: border-box; }
.mt5v3 .mt5v3-hr { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; height: 30px; min-width: 54px; padding: 0 8px; border: 1px solid var(--v3-peach-2); border-radius: 7px; background: #fff; color: var(--v3-or-text) !important; font-weight: 700; font-size: 13.5px; line-height: 1; font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; }
.mt5v3 .mt5v3-hr::after { content: ""; position: absolute; inset: -7px 0; }
.mt5v3 .mt5v3-hr:hover, .mt5v3 .mt5v3-hr:focus-visible { background: var(--v3-or); border-color: var(--v3-or); color: #fff !important; }
.mt5v3 .mt5v3-hr:focus-visible { outline: 2px solid var(--v3-or-pressed); outline-offset: 1px; }
/* Ronda 7 (Daniel: «se ven como pestañas, el borde de abajo queda cortado»): la clase compartida .mt5-slot-btn
   (site-custom.css) les ponía min-height: 44px, así que el botón medía 44 y la caja de 44 con 7 arriba le cortaba el
   borde de abajo. Acá mide 30 de verdad: entra entero (los 4 bordes y las 4 esquinas) con 7 px libres arriba y abajo.
   Con más peso que `:root .mt5-slot-btn` del micrositio, que pisaba borde y fondo. El foco va adentro (la caja recorta
   lo que sale). */
.mt5v3 .mt5v3-hrs .mt5v3-hr { min-height: 0; height: 30px; margin: 0; padding: 0 8px; border: 1px solid var(--v3-peach-2); border-radius: 8px; background: #fff; color: var(--v3-or-text) !important; }
.mt5v3 .mt5v3-hrs .mt5v3-hr:hover, .mt5v3 .mt5v3-hrs .mt5v3-hr:focus-visible { background: var(--v3-or); border-color: var(--v3-or); color: #fff !important; }
.mt5v3 .mt5v3-hrs .mt5v3-hr:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
/* Ronda 7: «Actualizar» (turnos en vivo) al lado de las flechas: ícono y texto en compu y tablet, sólo el ícono en el
   celular; mientras consulta, el ícono gira. Abajo, la línea chica de cómo salió. */
.mt5v3-wk .mt5v3-live { width: auto; min-width: 36px; padding: 0 10px; margin-right: 4px; display: inline-flex; align-items: center; gap: 6px; color: var(--v3-link); font-weight: 800; font-size: 13px; line-height: 1; }
.mt5v3-wk .mt5v3-live:hover:not(:disabled) { background: var(--v3-soft); color: var(--v3-on-soft); }
.mt5v3-wk .mt5v3-live:focus-visible { outline: 2px solid var(--v3-or-pressed); outline-offset: 1px; }
.mt5v3-ag.is-live-loading .mt5v3-live svg { animation: mt5v3-spin .9s linear infinite; }
@keyframes mt5v3-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mt5v3-ag.is-live-loading .mt5v3-live svg { animation: none; } }
.mt5v3-ag-st { margin: 0; padding: 6px 0 4px; border-top: 1px solid var(--v3-line); font-size: 12.5px; line-height: 17px; color: var(--v3-ink-3); font-weight: 600; }
.mt5v3-ag-st.is-live { color: var(--v3-ok-dark); }
.mt5v3-ag-st.is-live::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--v3-ok); vertical-align: 1px; }
@media (max-width: 639px) {
  .mt5v3-wk .mt5v3-live { padding: 0; width: 36px; justify-content: center; margin-right: 0; }
  .mt5v3-wk .mt5v3-live span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.mt5v3-ag-f { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 0 12px; padding-top: 2px; border-top: 1px solid var(--v3-line); }
.mt5v3-ag-f.has-waitl { justify-content: space-between; }
/* «Avisame si se libera un turno» (ronda 5): gris, discreto, al lado de «Más horarios»; en las tarjetas sin agenda, solo. */
.mt5v3-waitl { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; color: var(--v3-ink-3) !important; font-size: 13.5px; font-weight: 700; text-decoration: none; }
.mt5v3-waitl svg { flex: none; color: var(--v3-link); }
.mt5v3-waitl:hover, .mt5v3-waitl:focus-visible { color: var(--v3-link) !important; text-decoration: underline; }
.mt5v3-card-r > .mt5v3-waitl { justify-self: start; min-height: 36px; }
.mt5v3-moreh { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; color: var(--v3-link) !important; font-weight: 800; font-size: 14px; text-decoration: none; white-space: nowrap; }
.mt5v3-moreh:hover { text-decoration: underline; }
.mt5v3-nod { padding: 10px 0; border-top: 1px solid var(--v3-line); font-size: var(--v3-small); line-height: var(--v3-small-lh); color: var(--v3-ink-3); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.mt5v3-nod button { border: 0; background: none; color: var(--v3-link) !important; font-weight: 800; padding: 0; min-height: 36px; }

/* ---------- Columna de filtros (computadora) y hoja «Filtrar»: el mismo contenido ---------- */
.mt5v3-fx { display: grid; gap: 10px; }
.mt5v3-fx-title { font-size: var(--v3-subtitle); line-height: var(--v3-subtitle-lh); font-weight: 800; text-wrap: balance; }
.mt5v3-fx-sub { font-size: var(--v3-small); color: var(--v3-ink-3); }
.mt5v3-fx-note { margin: 0; font-size: var(--v3-caption); line-height: var(--v3-caption-lh); color: var(--v3-ink-3); }
.mt5v3-tg { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--v3-card); border: 0; border-radius: 16px; box-shadow: var(--v3-shadow-card); width: 100%; text-align: left; }
.mt5v3-tg-tx { flex: 1; min-width: 0; font-size: var(--v3-small); font-weight: 800; line-height: var(--v3-small-lh); }
.mt5v3-tg-tx small { display: block; font-weight: 400; color: var(--v3-ink-3); font-size: var(--v3-caption); line-height: var(--v3-caption-lh); }
.mt5v3-sw { width: 42px; height: 26px; border-radius: 99px; background: var(--v3-ring); position: relative; flex: none; transition: background .15s; }
.mt5v3-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--v3-shadow-input); transition: transform .15s; }
.mt5v3-tg[aria-pressed="true"] .mt5v3-sw { background: var(--v3-or); }
.mt5v3-tg[aria-pressed="true"] .mt5v3-sw::after { transform: translateX(16px); }
@media (prefers-reduced-motion: reduce) { .mt5v3-sw, .mt5v3-sw::after { transition: none; } }
.mt5v3-fs { padding: 2px 0; }
.mt5v3-fs h3 { margin: 6px 0 6px; font-size: var(--v3-body); line-height: var(--v3-body-lh); font-weight: 800; color: var(--v3-ink); text-align: left; }
.mt5v3-fl { display: grid; gap: 1px; }
.mt5v3-fo { display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 44px; padding: 10px 0; border: 0; background: none; text-align: left; font-size: var(--v3-body); line-height: var(--v3-body-lh); color: var(--v3-ink-2); }
.mt5v3-fo:hover .mt5v3-lb { color: var(--v3-or-text); }
.mt5v3-ck { width: 20px; height: 20px; margin-top: 2px; border-radius: 6px; border: 1.5px solid var(--v3-off); flex: none; display: grid; place-items: center; font-size: 13px; color: #fff; background: #fff; }
.mt5v3-fo--radio .mt5v3-ck { border-radius: 50%; }
.mt5v3-fo.is-on .mt5v3-ck { background: var(--v3-or); border-color: var(--v3-or); }
.mt5v3-fo--radio.is-on .mt5v3-ck { box-shadow: inset 0 0 0 4px #fff; }
.mt5v3-fo.is-on .mt5v3-lb { font-weight: 800; color: var(--v3-ink); }
.mt5v3-lb { min-width: 0; overflow-wrap: anywhere; }
.mt5v3-lb small { color: var(--v3-ink-3); font-weight: 400; font-size: var(--v3-caption); }
.mt5v3-ct { color: var(--v3-ink-3); font-size: var(--v3-caption); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mt5v3-fo[disabled] { color: var(--v3-off); cursor: default; }
.mt5v3-fo[disabled] .mt5v3-ct { color: var(--v3-off); }
.mt5v3-fo[disabled]:hover .mt5v3-lb { color: inherit; }
.mt5v3-days { display: flex; flex-wrap: wrap; gap: 6px; }
.mt5v3-dy { width: 44px; height: 44px; border-radius: 12px; border: 0; background: var(--v3-card); box-shadow: var(--v3-shadow-input); font-weight: 700; font-size: var(--v3-small); color: var(--v3-ink-2) !important; }
.mt5v3-dy.is-on { background: var(--v3-soft); box-shadow: none; color: var(--v3-on-soft) !important; font-weight: 800; }
.mt5v3-more { border: 0; background: none; color: var(--v3-link) !important; font-weight: 800; font-size: var(--v3-small); padding: 8px 0; text-align: left; }
.mt5v3-fx hr { border: 0; border-top: 1px solid var(--v3-line); margin: 2px 0; opacity: 1; }
.mt5v3-cov-q { margin-top: 6px; }
.mt5v3-cov-q input { width: 100%; height: 48px; border: 1px solid var(--v3-ring); border-radius: 16px; padding: 0 14px; background: var(--v3-card); font-size: var(--v3-small); color: var(--v3-ink); }
.mt5v3-cov-q input::placeholder { color: var(--v3-ink-3); }
.mt5v3-cov-q input:focus { border-color: var(--v3-or-pressed); outline: none; box-shadow: 0 6px 18px -10px rgba(255, 132, 0, .3); }
.mt5v3-cov-hits { margin-top: 6px; display: grid; background: var(--v3-card); border-radius: 16px; box-shadow: var(--v3-shadow-card); overflow: hidden; }
.mt5v3-cov-hits button { border: 0; border-bottom: 1px solid var(--v3-line); background: none; text-align: left; padding: 12px 14px; font-size: var(--v3-small); color: var(--v3-ink-2); }
.mt5v3-cov-hits button:last-child { border-bottom: 0; }
.mt5v3-cov-hits button:hover { background: var(--v3-soft); color: var(--v3-on-soft); }
.mt5v3-cov-none { padding: 10px 14px; font-size: var(--v3-small); color: var(--v3-ink-3); }

/* ---------- Hoja «Filtrar» (por encima del aviso de cookies, que usa 9999) ---------- */
.mt5v3-ov { position: fixed; inset: 0; background: rgba(35, 31, 29, .4); z-index: 10000; }
.mt5v3-sheet { position: fixed; inset: 0; z-index: 10001; background: var(--v3-bg); display: flex; flex-direction: column; }
.mt5v3-sh-h { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--v3-card); border-bottom: 1px solid var(--v3-line); }
.mt5v3-sh-h h2 { margin: 0; font-size: var(--v3-subtitle); line-height: var(--v3-subtitle-lh); font-weight: 800; text-align: left; color: var(--v3-ink); }
.mt5v3-x { border: 0; background: none; font-size: 28px; line-height: 1; color: var(--v3-ink-3); padding: 0 6px; min-width: 44px; min-height: 44px; border-radius: 12px; }
.mt5v3-sh-b { flex: 1; overflow-y: auto; padding: 14px 16px; min-height: 0; overscroll-behavior: contain; }
.mt5v3-sh-f { display: flex; gap: 10px; padding: 12px 16px; background: var(--v3-card); border-top: 1px solid var(--v3-line); }
.mt5v3-btn-g { min-height: 56px; padding: 0 20px; border-radius: 16px; border: 1px solid var(--v3-ring); background: var(--v3-card); font-weight: 800; font-size: var(--v3-body); color: var(--v3-ink-2); }
.mt5v3-btn-m { flex: 1; min-height: 56px; border: 0; border-radius: 16px; background: var(--v3-or); color: #fff !important; font-weight: 800; font-size: var(--v3-body); box-shadow: var(--v3-glow); }
.mt5v3-btn-m:active { background: var(--v3-or-pressed); }

/* ---------- Pie del buscador: comentarios y sumar un centro, una línea cada uno ---------- */
.mt5v3-foot { display: grid; gap: 12px; padding: 8px 16px 4px; }
.mt5v3-foot-links { display: grid; gap: 6px; }
.mt5v3-feedback, .mt5v3-join { margin: 0; font-size: var(--v3-small); line-height: var(--v3-small-lh); color: var(--v3-ink-2); text-align: center; }
.mt5v3-feedback a, .mt5v3-join a { color: var(--v3-link) !important; font-weight: 800; text-decoration: none; }
.mt5v3-feedback a:hover, .mt5v3-join a:hover { text-decoration: underline; }
.mt5v3-feedback span { display: block; font-size: var(--v3-caption); line-height: var(--v3-caption-lh); color: var(--v3-ink-3); }
.mt5v3-feedback .bi, .mt5v3-join .bi { color: var(--v3-or-text); margin-right: 2px; }

/* Comentarios del layout: la tarjeta grande se reemplaza por la línea de arriba; el modal y su envío quedan igual. */
body:has(#mt5v3) #form-feedback > .mt-card { display: none !important; }
body:has(#mt5v3) .mrturno-h100 > .mt-4.mb-4 { margin: 0 !important; }

/* La pregunta «¿Querés que la próxima vez…?» del perfil, alineada con el resto (vacía no ocupa lugar). */
.mt5v3 > .mt5-profile { margin: 0 16px; }
.mt5v3 > .mt5-profile:not(:has(*)) { display: none; }

/* ---------- Tablet ---------- */
@media (min-width: 640px) {
  .mt5v3 { margin: 0; }
  .mt5v3 > .mt5-profile { margin: 0; }
  .mt5v3-sheet { right: auto; width: 420px; box-shadow: 8px 0 30px rgba(70, 50, 30, .16); }
  .mt5v3-home { grid-template-columns: 1fr 1fr; padding: 4px 0 8px; }
  .mt5v3-wide { grid-column: 1 / -1; }
  .mt5v3-body, .mt5v3-quick, .mt5v3-foot { padding-left: 0; padding-right: 0; }
  .mt5v3-home { padding-top: 16px; }
  .mt5v3-quick { padding-top: 14px; }
  .mt5v3-card { grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr); column-gap: 18px; align-items: start; padding: 16px 18px; }
}

/* ---------- Computadora: contenedor más ancho, banda en una fila y columna de filtros a la izquierda ---------- */
@media (min-width: 980px) {
  body:has(#mt5v3) .container.mrturno-h100 { max-width: 1320px; }
  .mt5v3 { margin-top: 16px; font-size: 15px; line-height: 22px; }
  .mt5v3-quick { display: none; }
  .mt5v3-body { grid-template-columns: 264px minmax(0, 1fr); gap: 28px; padding: 4px 0 0; }
  .mt5v3-side { display: block; }
  .mt5v3-side .mt5v3-fx { position: sticky; top: 132px; }
  .mt5v3-card { grid-template-columns: minmax(0, .8fr) minmax(0, 1.45fr); column-gap: 22px; padding: 18px 20px; }
  .mt5v3-dl b { font-size: 14px; }
  .mt5v3-name { font-size: var(--v3-body); }
  .mt5v3-fo { font-size: var(--v3-small); line-height: var(--v3-small-lh); min-height: 34px; padding: 6px 0; }
  .mt5v3-fs h3 { font-size: var(--v3-small); }
  .mt5v3-days { gap: 4px; }
  .mt5v3-dy { width: 33px; height: 38px; font-size: var(--v3-caption); }
  .mt5v3-home { grid-template-columns: 1.3fr 1fr; }
  .mt5v3-ov, .mt5v3-sheet { display: none !important; }
  .mt5v3-foot { padding-top: 16px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
  .mt5v3-feedback, .mt5v3-join { text-align: left; }
}

/* ---------- Ronda 6: perfil del profesional, sede, institución y micrositio (las mismas tarjetas) ----------
   site/view-professional-v3, view-subsidiary-v3, view-institution-v3 y microsite/index (con el flag). Estilo Revamp v6:
   tarjetas blancas de radio 16 sin borde, sombra cálida, Nunito, el naranja de la marca (en el micrositio, el color del
   centro: SearchCardV3::brandTokens en .mt5v3-micro-card). */
.mt5v3-pg { padding: 12px 16px 8px; }
.mt5v3-back { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-size: var(--v3-small); font-weight: 800; color: var(--v3-link) !important; text-decoration: none; }
.mt5v3-back:hover { text-decoration: underline; }
.mt5v3-pg-head { display: flex; gap: 16px; align-items: flex-start; background: var(--v3-card); border-radius: 16px; box-shadow: var(--v3-shadow-card); padding: 18px 16px; }
.mt5v3-ph--lg { width: 72px; height: 72px; font-size: var(--v3-subtitle); }
.mt5v3-pg-head-t { min-width: 0; flex: 1; display: grid; gap: 6px; }
.mt5v3-pg-title { font-size: var(--v3-subtitle); line-height: var(--v3-subtitle-lh); font-weight: 600; color: var(--v3-ink); text-wrap: balance; }
.mt5v3-pg-head--sede .mt5v3-pg-title { font-weight: 800; }
.mt5v3-pg-sub { margin: 0; color: var(--v3-ink-3); font-size: var(--v3-small); line-height: var(--v3-small-lh); font-weight: 700; }
.mt5v3-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mt5v3-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 99px; background: var(--v3-sand); color: var(--v3-ink-2); font-size: var(--v3-caption); line-height: var(--v3-caption-lh); font-weight: 700; }
.mt5v3-pg-h2 { margin: 8px 0 0; font-size: var(--v3-lead); line-height: var(--v3-lead-lh); font-weight: 800; color: var(--v3-ink); text-align: left; }
.mt5v3-pg-h3 { margin: 4px 0 8px; font-size: var(--v3-body); line-height: var(--v3-body-lh); font-weight: 800; color: var(--v3-ink-2); text-align: left; }
.mt5v3-pg-group { display: grid; }
.mt5v3-pg-facts { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: var(--v3-small); line-height: var(--v3-small-lh); color: var(--v3-ink-2); }
.mt5v3-pg-facts li { display: flex; gap: 8px; align-items: flex-start; }
.mt5v3-pg-facts li > svg, .mt5v3-pg-facts li > .bi { flex: none; margin-top: 2px; color: var(--v3-ink-3); }
/* Ronda 9: teléfono y WhatsApp de los perfiles como links (tel: / wa.me), con 44 px de alto táctil sin agrandar la fila. */
.mt5v3-pg-facts .mt5v3-fact-a { color: var(--v3-link); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; position: relative; }
.mt5v3-pg-facts .mt5v3-fact-a::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }
.mt5v3-pg-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.mt5v3-pg-link { border: 0; background: none; padding: 6px 0; min-height: 36px; color: var(--v3-link) !important; font-weight: 800; font-size: var(--v3-small); text-decoration: none; display: inline-flex; align-items: center; }
.mt5v3-pg-link:hover { text-decoration: underline; }
.mt5v3-pg-sede-name { font-size: var(--v3-body); line-height: var(--v3-body-lh); font-weight: 800; color: var(--v3-ink); }
.mt5v3-pg-sede-name a { color: var(--v3-ink) !important; text-decoration: none; }
.mt5v3-pg-sede-name a:hover { color: var(--v3-or-text) !important; text-decoration: underline; }
.mt5v3-pg-more { display: grid; gap: 14px; border-top: 1px solid var(--v3-line); padding-top: 12px; }
.mt5v3-pg-col h3 { margin: 0 0 6px; font-size: var(--v3-small); line-height: var(--v3-small-lh); font-weight: 800; color: var(--v3-ink); text-align: left; }
.mt5v3-pg-col > * + h3 { margin-top: 12px; }
.mt5v3-pg-days { margin: 0; display: grid; gap: 2px; font-size: var(--v3-small); line-height: var(--v3-small-lh); }
.mt5v3-pg-days > div { display: flex; justify-content: space-between; gap: 12px; max-width: 280px; }
.mt5v3-pg-days dt { font-weight: 700; color: var(--v3-ink-2); }
.mt5v3-pg-days dd { margin: 0; color: var(--v3-ink-3); font-variant-numeric: tabular-nums; }
.mt5v3-pg-muted { margin: 0; color: var(--v3-ink-3); font-size: var(--v3-small); line-height: var(--v3-small-lh); }
.mt5v3-pg-warn { margin: 0 0 8px; display: inline-block; padding: 4px 10px; border-radius: 8px; background: var(--v3-warn-soft); color: var(--v3-warn-dark); font-size: var(--v3-caption); line-height: var(--v3-caption-lh); font-weight: 700; }
.mt5v3-pg-note { margin: 0; font-size: var(--v3-small); line-height: var(--v3-small-lh); color: var(--v3-ink-2); }
.mt5v3-pg-note summary { cursor: pointer; list-style: none; }
.mt5v3-pg-note summary span { color: var(--v3-link); font-weight: 800; }
.mt5v3-pg-note[open] summary { display: none; }
.mt5v3-pg-filter { width: 100%; max-width: 360px; height: 44px; border: 1px solid var(--v3-ring); border-radius: 12px; padding: 0 12px; font: inherit; font-size: var(--v3-small); color: var(--v3-ink); background: #fff; }
.mt5v3-pg-filter:focus { outline: 2px solid var(--v3-or-pressed); outline-offset: 1px; border-color: transparent; }
.mt5v3-pg-os { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mt5v3-pg-os li { padding: 3px 10px; border-radius: 8px; background: var(--v3-sand); color: var(--v3-ink-2); font-size: var(--v3-caption); line-height: var(--v3-caption-lh); font-weight: 700; }
.mt5v3-pg-box { background: var(--v3-card); border-radius: 16px; box-shadow: var(--v3-shadow-card); padding: 16px; display: grid; gap: 8px; }
.mt5v3-pg-box .mt5v3-pg-h2 { margin: 0; }
.mt5v3-pg-box p { margin: 0; }
.mt5v3-pg-rich { font-size: var(--v3-small); line-height: var(--v3-small-lh); color: var(--v3-ink-2); }
.mt5v3-pg-rich p { margin: 0 0 6px; }
.mt5v3-pg-tools { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.mt5v3-pg-sel { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--v3-small); font-weight: 800; color: var(--v3-ink-2); }
.mt5v3-pg-sel select { height: 44px; border: 0; border-radius: 12px; background: #fff; box-shadow: var(--v3-shadow-input); padding: 0 12px; font: inherit; font-weight: 700; color: var(--v3-ink); max-width: 260px; }
.mt5v3-pg-tools .mt5v3-tg { width: auto; padding: 8px 14px; }
/* Ronda 7: «Especialidad» se veía chica y gris (un estilo de etiquetas del sitio le ganaba): igual que «Sólo con turnos online». */
.mt5v3 .mt5v3-pg-tools .mt5v3-pg-sel > span { font-size: var(--v3-small); line-height: var(--v3-small-lh); font-weight: 800; color: var(--v3-ink); letter-spacing: 0; text-transform: none; }
.mt5v3-pg-sedes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mt5v3-pg-sedes li { display: grid; gap: 2px; font-size: var(--v3-small); line-height: var(--v3-small-lh); color: var(--v3-ink-3); padding-top: 10px; border-top: 1px solid var(--v3-line); }
.mt5v3-pg-sedes li:first-child { padding-top: 0; border-top: 0; }
.mt5v3-pg-sedes b a { color: var(--v3-ink) !important; }
.mt5v3-pg-sedes-grid { display: grid; gap: 12px; }
.mt5v3-pg-sedecard { gap: 6px; }
.mt5v3-pg-sedecard .mt5v3-actions { margin-top: 6px; }
/* Tarjeta de sede en la página de la institución: una sola columna (nombre, ciudad, datos y el botón abajo), no la
   grilla de dos columnas de la tarjeta del profesional, que en la grilla de sedes la dejaba angosta y cortaba el botón. */
.mt5v3-card.mt5v3-pg-sedecard { display: flex; flex-direction: column; align-items: stretch; }
.mt5v3-card.mt5v3-pg-sedecard .mt5v3-pg-facts { min-width: 0; overflow-wrap: anywhere; }
.mt5v3-card.mt5v3-pg-sedecard .mt5v3-actions { margin-top: auto; padding-top: 6px; }
.mt5v3-card.mt5v3-pg-sedecard .mt5v3-see { white-space: normal; text-align: center; max-width: 100%; }
.mt5v3-pg-src { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font-size: var(--v3-caption); line-height: var(--v3-caption-lh); color: var(--v3-ink-3); font-style: italic; }
.mt5v3-pg-src a { color: inherit !important; }
/* Micrositio: cada tarjeta va en su contenedor con los colores del centro (sin el margen negativo del buscador). */
.mt5v3.mt5v3-micro-card { display: block; margin: 0 0 12px; }
.mt5v3.mt5v3-micro-card:has(> .hidden) { display: none; }
@media (min-width: 640px) {
  .mt5v3-pg { padding: 16px 0 8px; }
  .mt5v3-pg-head { padding: 22px 24px; }
  .mt5v3-ph--lg { width: 88px; height: 88px; }
  .mt5v3-pg-sede { grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr); column-gap: 18px; align-items: start; padding: 16px 18px; }
  .mt5v3-pg-sede > .mt5v3-pg-more { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .mt5v3-pg-sedes-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .mt5v3.mt5v3-micro-card .mt5v3-card { grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr); column-gap: 18px; align-items: start; }
}
@media (min-width: 980px) {
  .mt5v3-pg { max-width: 1100px; margin: 0 auto; width: 100%; }
  .mt5v3-pg-sede { grid-template-columns: minmax(0, .8fr) minmax(0, 1.45fr); column-gap: 22px; padding: 18px 20px; }
}
/* Ronda 7: el pie del buscador lleva el componente de comentarios de todas las pantallas (layouts/_v3-feedback), que
   arma sus propias dos columnas en compu. */
.mt5v3-foot > .mt5v3-fbk { grid-column: 1 / -1; }

/* ---------- Ronda 8: «Confirmar turno» (slot-booking/confirm-v3, sólo con el flag) ----------
   Arriba y destacado, en un solo bloque, el día y la hora grandes, el profesional y el lugar; después paciente y
   cobertura compactos; junto al botón las indicaciones y «Acepto las políticas»; el motivo plegado; «Cómo llegar y
   contacto» plegado abajo. Una columna de hasta 640 px, centrada (es una sola decisión: confirmar). */
.mt5v3-cf { max-width: 640px; width: 100%; margin: 0 auto; padding: 12px 16px 8px; gap: 14px; align-content: start; }
.mt5v3-cf-title { margin: 0; font-size: var(--v3-subtitle); line-height: var(--v3-subtitle-lh); font-weight: 800; color: var(--v3-ink); text-align: left; }
.mt5v3-cf-main { background: var(--v3-card); border-radius: 16px; box-shadow: var(--v3-shadow-card); padding: 18px 16px; display: grid; gap: 14px; border-top: 4px solid var(--v3-or); }
.mt5v3-cf-when { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--v3-ink); }
.mt5v3-cf-cal { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--v3-soft); color: var(--v3-on-soft); flex: none; }
.mt5v3-cf-day { font-size: var(--v3-lead); line-height: var(--v3-lead-lh); font-weight: 800; }
.mt5v3-cf-dot { color: var(--v3-ink-3); font-weight: 800; }
.mt5v3-cf-time { font-size: var(--v3-title); line-height: var(--v3-title-lh); font-weight: 900; color: var(--v3-or-text); font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.mt5v3-cf-pro { display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--v3-line); }
.mt5v3-cf-pro .mt5v3-ph { width: 56px; height: 56px; }
.mt5v3-cf-pro-t { min-width: 0; }
.mt5v3-cf-name { margin: 0; font-size: var(--v3-body); line-height: var(--v3-body-lh); color: var(--v3-ink); overflow-wrap: anywhere; }
.mt5v3-cf-spec { margin: 2px 0 0; font-size: var(--v3-small); line-height: var(--v3-small-lh); font-weight: 700; color: var(--v3-ink-2); }
.mt5v3-cf-place { margin: 0; display: flex; align-items: flex-start; gap: 8px; color: var(--v3-ink-2); font-size: var(--v3-small); line-height: var(--v3-small-lh); }
.mt5v3-cf-place > svg { flex: none; margin-top: 1px; color: var(--v3-or-text); }
.mt5v3-cf-place span { min-width: 0; overflow-wrap: anywhere; }
.mt5v3-cf-place b { color: var(--v3-ink); }
.mt5v3-cf-place small, .mt5v3-cf-more-b small { display: block; font-size: var(--v3-small); color: var(--v3-ink-3); }
.mt5v3-cf-form, .mt5v3-cf-box { display: grid; gap: 12px; margin: 0; }
.mt5v3-cf-who { background: var(--v3-card); border-radius: 16px; box-shadow: var(--v3-shadow-card); padding: 12px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.mt5v3-cf-who > div { min-width: 0; }
.mt5v3-cf-who span { display: block; font-size: var(--v3-caption); line-height: var(--v3-caption-lh); color: var(--v3-ink-3); font-weight: 700; }
.mt5v3-cf-who b { display: block; font-size: var(--v3-small); line-height: var(--v3-small-lh); color: var(--v3-ink); overflow-wrap: anywhere; }
.mt5v3-cf-change { grid-column: 1 / -1; margin: 4px 0 0; padding-top: 8px; border-top: 1px solid var(--v3-line); font-size: var(--v3-caption); line-height: var(--v3-caption-lh); color: var(--v3-ink-3); }
.mt5v3-cf-change a { color: var(--v3-link) !important; font-weight: 800; text-decoration: none; }
.mt5v3-cf-change a:hover { text-decoration: underline; }
.mt5v3-cf-note { background: var(--v3-warn-soft); border-left: 4px solid var(--v3-warn); border-radius: 12px; padding: 12px 14px; color: var(--v3-ink); font-size: var(--v3-small); line-height: var(--v3-small-lh); }
.mt5v3-cf-note b { display: block; margin-bottom: 2px; color: var(--v3-warn-dark); }
.mt5v3-cf-note p { margin: 0; overflow-wrap: anywhere; }
.mt5v3-cf-policy { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 12px 14px; background: var(--v3-card); border: 1.5px solid var(--v3-peach-2); border-radius: 12px; cursor: pointer; font-size: var(--v3-body); line-height: var(--v3-body-lh); color: var(--v3-ink); }
/* La regla vieja `label span` / `label a` de site-app.css (Rubik 12 px gris, subrayado) no aplica acá. */
.mt5v3 .mt5v3-cf-policy > span { font-family: inherit; font-size: var(--v3-body); line-height: var(--v3-body-lh); color: var(--v3-ink); font-weight: 600; }
.mt5v3 .mt5v3-cf-policy > span a { font-family: inherit; font-size: inherit; font-style: normal; text-decoration: underline; text-underline-offset: 3px; }
.mt5v3-cf-policy input { flex: none; width: 24px; height: 24px; margin: 0 0 0 0; position: relative; top: 1px; accent-color: var(--v3-or-pressed); cursor: pointer; }
.mt5v3-cf-policy a { color: var(--v3-link) !important; font-weight: 800; }
.mt5v3-cf-policy small { display: block; font-size: var(--v3-caption); line-height: var(--v3-caption-lh); color: var(--v3-ink-3); font-weight: 700; }
.mt5v3-cf-policy:has(input:checked) { border-color: var(--v3-ok); background: var(--v3-ok-soft); }
.mt5v3-cf-why { margin: 0; }
.mt5v3-cf-why summary { display: block; padding: 9px 0; min-height: 44px; cursor: pointer; color: var(--v3-link); font-weight: 800; font-size: var(--v3-small); list-style: none; }
.mt5v3-cf-why summary::-webkit-details-marker { display: none; }
.mt5v3-cf-why summary::before { content: "+"; display: inline-block; width: 16px; font-weight: 900; font-size: 18px; line-height: 1; }
.mt5v3-cf-why[open] summary::before { content: "\2013"; }
.mt5v3-cf-why summary span { color: var(--v3-ink-3); font-weight: 600; }
.mt5v3-cf-why textarea { display: block; width: 100%; margin-top: 4px; border: 1px solid var(--v3-ring); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: var(--v3-small); color: var(--v3-ink); background: #fff; resize: vertical; }
.mt5v3-cf-why textarea:focus { outline: 2px solid var(--v3-or-pressed); outline-offset: 1px; }
.mt5v3-cf-why small { display: block; margin-top: 4px; font-size: var(--v3-caption); line-height: var(--v3-caption-lh); color: var(--v3-ink-3); }
.mt5v3 .mt5v3-cf-go { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; border: 0; border-radius: 16px; background: var(--v3-or); color: #fff !important; font-weight: 800; font-size: var(--v3-lead); line-height: 1.2; text-decoration: none; box-shadow: var(--v3-glow); }
.mt5v3 .mt5v3-cf-go:hover { background: var(--v3-or-pressed); }
.mt5v3-cf-hint { margin: -4px 0 0; text-align: center; font-size: var(--v3-caption); line-height: var(--v3-caption-lh); color: var(--v3-ink-3); }
.mt5v3-cf-txt { margin: 0; font-size: var(--v3-small); line-height: var(--v3-small-lh); color: var(--v3-ink-2); }
.mt5v3-cf-warn { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--v3-warn-soft); color: var(--v3-warn-dark); font-size: var(--v3-small); line-height: var(--v3-small-lh); font-weight: 700; }
.mt5v3-cf-more { background: var(--v3-sand); border-radius: 12px; padding: 0 14px; }
.mt5v3-cf-more summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; cursor: pointer; color: var(--v3-ink-2); font-weight: 700; font-size: var(--v3-small); list-style: none; }
.mt5v3-cf-more summary::-webkit-details-marker { display: none; }
.mt5v3-cf-more summary::after { content: "\203A"; font-size: 20px; line-height: 1; transform: rotate(90deg); transition: transform .15s ease; }
.mt5v3-cf-more[open] summary::after { transform: rotate(-90deg); }
.mt5v3-cf-more-b { display: grid; gap: 8px; padding: 0 0 14px; font-size: var(--v3-small); line-height: var(--v3-small-lh); color: var(--v3-ink-2); }
.mt5v3-cf-more-b > p { margin: 0; display: flex; align-items: flex-start; gap: 8px; }
.mt5v3-cf-more-b > p > svg { flex: none; margin-top: 1px; color: var(--v3-ink-3); }
.mt5v3-cf-desc { color: var(--v3-ink-3); overflow-wrap: anywhere; }
.mt5v3-cf-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.mt5v3-cf-act { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: #fff; color: var(--v3-ink-2) !important; font-weight: 700; font-size: var(--v3-small); text-decoration: none; box-shadow: var(--v3-shadow-input); }
.mt5v3-cf-act:hover { background: var(--v3-soft); }
.mt5v3-cf-act--wa i { color: #1E8E4E; }
@media (prefers-reduced-motion: reduce) { .mt5v3-cf-more summary::after { transition: none; } }
@media (min-width: 640px) {
  .mt5v3-cf { padding: 20px 0 8px; }
  .mt5v3-cf-main { padding: 22px 24px; }
  .mt5v3-cf-who { padding: 14px 24px; }
}

/* ---------- Ronda 8: letra un punto más grande en el celular (< 640 px) ----------
   +1 px a toda la escala tipográfica del v3 (también los textos chicos de 12-13 px). Mismos selectores que arriba, al
   final del archivo para que ganen sólo en el celular; tablet y compu quedan igual. Sin los íconos de texto (×, ▾). */
@media (max-width: 639px) {
  .mt5v3, body:has(#mt5v3) {
    --v3-caption: 14px; --v3-caption-lh: 19px;
    --v3-small: 16px; --v3-small-lh: 21px;
    --v3-body: 18px; --v3-body-lh: 25px;
    --v3-lead: 20px; --v3-lead-lh: 27px;
    --v3-subtitle: 22px; --v3-subtitle-lh: 29px;
    --v3-title: 27px; --v3-title-lh: 34px;
  }
}
@media (max-width: 639px) {
  .mt5v3 .mt5v3-hr { font-size: 14.5px; }
  .mt5v3-wk .mt5v3-live { font-size: 14px; }
  .mt5v3-ag-st { font-size: 13.5px; }
  .mt5v3-waitl { font-size: 14.5px; }
  .mt5v3-moreh { font-size: 15px; }
}


/* ---------- Ronda 10: perfil, sede, institución y micrositio en el celular ----------
   El 95 % de las vistas son del celular y la mitad del tráfico aterriza en estas páginas (sede 119 visitas por día,
   perfil 52, micrositio 27; la Home 84). En 360 px el primer viewport dice quién es, qué hace y dónde atiende, y deja a la
   vista la agenda o «Ver horarios» de la primera tarjeta: cabecera sin caja y más baja, contacto como botones de un
   toque, y el filtro de especialidad (el elemento más tocado del sitio) como chips con conteo arriba de la cartilla. */
.mt5v3-pg-addr { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: var(--v3-small); line-height: var(--v3-small-lh); color: var(--v3-ink-2); }
.mt5v3-pg-addr > svg { flex: none; margin-top: 2px; color: var(--v3-ink-3); }
.mt5v3-pg-addr b { font-weight: 800; color: var(--v3-ink-2); }
/* Contacto de la cabecera: links de un toque (44 px de alto) en una sola fila, sin cajas, para que entren en 360 px. */
.mt5v3-pg-acts { display: flex; flex-wrap: wrap; gap: 0 20px; }
.mt5v3-pg-act { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; color: var(--v3-link) !important; font-size: var(--v3-small); font-weight: 800; white-space: nowrap; text-decoration: none; }
.mt5v3-pg-act:hover { text-decoration: underline; text-underline-offset: 3px; }
.mt5v3-pg-act:focus-visible { outline: 2px solid var(--v3-or-pressed); outline-offset: 2px; border-radius: 4px; }
/* Chips de especialidad (site/_espchips-v3): blancos con la sombra de los campos; el elegido en durazno con ✓ (guía §6.4). */
.mt5v3-espchips { min-width: 0; max-width: 100%; }
.mt5v3-espchips-in { position: relative; list-style: none; margin: 0 -16px; padding: 2px 16px 6px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mt5v3-espchips-in::-webkit-scrollbar { display: none; }
.mt5v3-espchips-in > li { flex: none; display: flex; }
.mt5v3-espchip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: #fff; box-shadow: var(--v3-shadow-input), inset 0 0 0 1px var(--v3-line); color: var(--v3-ink-2) !important; font-family: var(--v3-font); font-size: var(--v3-small); line-height: 1; font-weight: 700; white-space: nowrap; text-decoration: none; cursor: pointer; }
.mt5v3-espchip:hover { color: var(--v3-ink) !important; box-shadow: var(--v3-shadow-input), inset 0 0 0 1.5px var(--v3-ring); }
.mt5v3-espchip:focus-visible { outline: 2px solid var(--v3-or-pressed); outline-offset: 2px; }
.mt5v3-espchip-n { min-width: 22px; padding: 0 6px; border-radius: 8px; background: var(--v3-sand); color: var(--v3-ink-3); font-size: var(--v3-caption); line-height: 22px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.mt5v3-espchip-ok { display: none; flex: none; }
.mt5v3-espchip[aria-current="true"], .mt5v3-espchip[aria-pressed="true"] { background: var(--v3-soft); color: var(--v3-on-soft) !important; font-weight: 800; box-shadow: inset 0 0 0 1.5px var(--v3-peach-2); }
.mt5v3-espchip[aria-current="true"] .mt5v3-espchip-ok, .mt5v3-espchip[aria-pressed="true"] .mt5v3-espchip-ok { display: inline; }
.mt5v3-espchip[aria-current="true"] .mt5v3-espchip-n { background: #fff; color: var(--v3-on-soft); }
.mt5v3-espchip--tg { margin-left: 4px; }
/* Micrositio: los chips van en el contenedor del micrositio (márgenes de Bootstrap), con el color del centro. */
.mt5v3.mt5v3-espchips--micro { display: block; margin: 0 0 4px; }
.mt5v3-espchips--micro .mt5v3-espchips-in { margin: 0 -12px; padding: 2px 12px 6px; }
/* Obras sociales del paciente primero (site/_plans-v3). */
.mt5v3-pg-mine { margin: 0 0 6px; font-size: var(--v3-small); line-height: var(--v3-small-lh); color: var(--v3-ink-2); }
.mt5v3-pg-os li.is-mine { background: var(--v3-soft); color: var(--v3-on-soft); font-weight: 800; box-shadow: inset 0 0 0 1px var(--v3-peach-2); }
@media (min-width: 640px) {
  .mt5v3-espchips-in, .mt5v3-espchips--micro .mt5v3-espchips-in { flex-wrap: wrap; overflow: visible; margin: 0; padding: 2px 0 4px; }
  /* En tablet y compu el micrositio ya tiene «Sólo turnos online» en la línea fina de la cabecera. */
  .mt5v3-espchips--micro li:has(> .mt5v3-espchip--tg) { display: none; }
}
@media (max-width: 639px) {
  .mt5v3.mt5v3-pg { gap: 10px; padding-top: 4px; }
  /* La cabecera del perfil sin caja (las personas y los centros son encabezados, no tarjetas: guía §6.3) y más baja. */
  .mt5v3-pg-head { background: none; box-shadow: none; padding: 2px 0 0; gap: 12px; border-radius: 0; }
  .mt5v3-pg-head .mt5v3-ph--lg { width: 56px; height: 56px; font-size: var(--v3-lead); }
  .mt5v3-pg-head-t { gap: 4px; }
  .mt5v3-pg-acts { gap: 0 18px; margin-top: -4px; }
  .mt5v3-pg-h3 { margin: 0 0 4px; }
  .mt5v3-pg-group .mt5v3-card, .mt5v3-micro-card .mt5v3-card, .mt5v3-card.mt5v3-pg-sede { gap: 10px; }
  .mt5v3-pg-h2 { margin: 4px 0 0; }
}
/* ---------- Ronda 11: la tarjeta ----------
   «Reservar turno» vuelve (en www, el 37 % de los turnos del buscador) como secundario durazno (guía §6.1: en una lista
   el naranja pleno no se repite por fila), en el mismo pie que «Avisame» y «Más horarios ›». «Avisame» queda a la
   izquierda; «Más horarios ›» y «Reservar turno» juntos a la derecha: si no entran en una línea con «Avisame» (en el
   celular ya no entraban), bajan juntos a la segunda, a la derecha. Botón de 38 px con 44 px táctiles (::after). En el
   micrositio toma los colores del centro (brandTokens pisa --v3-peach y --v3-link). */
.mt5v3-ag-go { display: inline-flex; align-items: center; gap: 0 14px; margin-left: auto; }
.mt5v3-resv { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 38px; margin: 3px 0; padding: 0 14px; border-radius: 12px; background: var(--v3-peach); color: var(--v3-link) !important; font-weight: 800; font-size: 14px; line-height: 1; text-decoration: none; white-space: nowrap; }
.mt5v3-resv::after { content: ""; position: absolute; inset: -3px 0; }
.mt5v3-resv:hover, .mt5v3-resv:focus-visible { background: var(--v3-peach-2); }
/* «Se acaba de ocupar» en «Confirmar turno» (guía §9.3, sin rojo): los horarios en vivo más cercanos, de 44 px. */
.mt5v3-cf-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.mt5v3 .mt5v3-cf-slot { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--v3-peach-2); border-radius: 12px; background: #fff; color: var(--v3-or-text) !important; font-weight: 800; font-size: var(--v3-small); font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; }
.mt5v3 .mt5v3-cf-slot:hover, .mt5v3 .mt5v3-cf-slot:focus-visible { background: var(--v3-soft); }
.mt5v3 .mt5v3-cf-all { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; color: var(--v3-link) !important; font-weight: 800; font-size: var(--v3-small); text-decoration: none; }
.mt5v3 .mt5v3-cf-all:hover { text-decoration: underline; }
@media (max-width: 639px) {
  .mt5v3-resv { font-size: 15px; }
}

/* ---------- Ronda 13: la Home según el estado (site/_home-v3) ----------
   Invitado o sin turno próximo: h1 + «Cambiar zona» + el buscador centrado (el único naranja pleno) + «Lo más
   buscado». Con un turno próximo: la tarjeta del turno como héroe («Ver turno» es el primario) y el buscador como una
   fila. Debajo, la banda de anuncios (ronda 12), «Volvé a reservar» y, al invitado, el plan en 3 pasos. */
.mt5v3-home3 { display: grid; gap: 22px; max-width: 760px; margin: 0 auto; padding: 20px 16px 8px; }
.mt5v3-home3 h2 { margin: 0 0 10px; font-size: var(--v3-lead); line-height: var(--v3-lead-lh); font-weight: 800; color: var(--v3-ink); text-align: left; }
.mt5v3-home3 > .mt5v3-ad--band { margin: 0; }
.mt5v3-hero { display: grid; gap: 12px; justify-items: center; text-align: center; }
.mt5v3-hero-h { margin: 0; font-size: var(--v3-title); line-height: var(--v3-title-lh); font-weight: 800; color: var(--v3-ink); text-wrap: balance; }
.mt5v3-hz { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: -8px; padding: 0 10px; border: 0; border-radius: 12px; background: transparent; color: var(--v3-link); font-weight: 800; font-size: var(--v3-small); text-decoration: underline; text-underline-offset: 3px; }
.mt5v3-hz:hover { background: var(--v3-soft); }
.mt5v3-hz svg { flex: none; }
.mt5v3 .mt5v3-q--hero, .mt5v3 .mt5v3-q--row { grid-area: auto; width: 100%; background: var(--v3-card); border-radius: 16px; box-shadow: var(--v3-shadow-card), 0 0 0 1px var(--v3-ring); }
.mt5v3 .mt5v3-q--hero { height: 58px; }
.mt5v3 .mt5v3-q--hero input[type="search"] { height: 58px; padding: 0 124px 0 16px; border-radius: 16px; font-size: 17px; color: var(--v3-ink); }
.mt5v3 .mt5v3-q--row, .mt5v3 .mt5v3-q--row input[type="search"] { height: 52px; }
.mt5v3 .mt5v3-q--row input[type="search"] { border-radius: 16px; font-size: 17px; color: var(--v3-ink); }
.mt5v3 .mt5v3-q--row .mt5v3-go { top: 8px; right: 8px; }
.mt5v3 .mt5v3-q--hero:focus-within, .mt5v3 .mt5v3-q--row:focus-within { outline: 2px solid var(--v3-or-pressed); outline-offset: 2px; }
.mt5v3-hero-go { position: absolute; top: 6px; right: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 6px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--v3-or); color: #fff; font-weight: 800; font-size: 17px; box-shadow: var(--v3-glow); }
.mt5v3-hero-go:hover, .mt5v3-hero-go:focus-visible { background: var(--v3-or-pressed); }
.mt5v3-hpara { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; max-width: 100%; padding: 4px 12px; border: 0; border-radius: 12px; background: var(--v3-sand); color: var(--v3-ink-2); font-size: var(--v3-small); text-align: left; }
.mt5v3-hpara > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt5v3-hpara small { font-size: inherit; color: var(--v3-ink-3); }
.mt5v3-htops { width: 100%; margin-top: 6px; }
.mt5v3-htops h2 { text-align: center; }
.mt5v3-htops .mt5v3-tops { justify-content: center; }
/* La tarjeta del turno (guía §6.3: fecha y hora como héroe, estado arriba a la derecha, una sola acción). */
.mt5v3-turn { display: grid; gap: 4px; padding: 16px; background: var(--v3-card); border-radius: 16px; box-shadow: var(--v3-shadow-card); }
.mt5v3-turn.is-urgent { box-shadow: inset 4px 0 0 var(--v3-or), var(--v3-shadow-card); }
.mt5v3-turn-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.mt5v3-turn-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--v3-soft); color: var(--v3-on-soft); }
.mt5v3-turn-badge { padding: 3px 10px; border-radius: 8px; background: var(--v3-sand); color: var(--v3-ink-2); font-size: var(--v3-caption); line-height: var(--v3-caption-lh); font-weight: 700; }
.mt5v3-turn.is-urgent .mt5v3-turn-badge { background: var(--v3-warn-soft); color: var(--v3-warn-dark); }
.mt5v3-turn-h { margin: 0; font-size: var(--v3-lead); line-height: var(--v3-lead-lh); font-weight: 800; color: var(--v3-ink); }
.mt5v3-turn-when { margin: 0; font-size: var(--v3-title); line-height: var(--v3-title-lh); font-weight: 800; color: var(--v3-or-text); }
.mt5v3-turn-pro, .mt5v3-turn-at, .mt5v3-turn-for { margin: 0; font-size: var(--v3-small); line-height: var(--v3-small-lh); color: var(--v3-ink-2); }
.mt5v3-turn-pro b { color: var(--v3-ink); }
.mt5v3-turn-for { font-weight: 700; }
.mt5v3-turn-next { margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--v3-soft); color: var(--v3-on-soft); font-size: var(--v3-small); line-height: var(--v3-small-lh); }
.mt5v3-turn-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 12px; }
.mt5v3 .mt5v3-turn-go { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 12px; background: var(--v3-or); color: #fff !important; font-weight: 800; font-size: var(--v3-body); text-decoration: none; box-shadow: var(--v3-glow); }
.mt5v3 .mt5v3-turn-go:hover { background: var(--v3-or-pressed); }
.mt5v3 .mt5v3-turn-all { display: inline-flex; align-items: center; min-height: 44px; color: var(--v3-link) !important; font-weight: 800; font-size: var(--v3-small); text-decoration: underline; text-underline-offset: 3px; }
.mt5v3-hrow { display: grid; gap: 8px; justify-items: start; }
.mt5v3-hrow-t { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 8px; width: 100%; }
.mt5v3-hrow-t h2 { margin: 0; }
.mt5v3-hrow .mt5v3-hz { margin-top: 0; }
/* El plan en 3 pasos (guía §4.3), texto sin imágenes. */
.mt5v3-steps ol { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.mt5v3-steps li { display: flex; align-items: flex-start; gap: 12px; font-size: var(--v3-small); line-height: var(--v3-small-lh); color: var(--v3-ink-2); }
.mt5v3-steps b { display: block; color: var(--v3-ink); }
.mt5v3-step-n { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--v3-soft); color: var(--v3-on-soft); font-weight: 800; }
@media (max-width: 639px) {
  .mt5v3 .mt5v3-turn-go { flex: 1 1 100%; }
  /* En el celular el texto de ayuda entra entero: el botón «Buscar» va debajo, a todo el ancho (zona del pulgar). */
  .mt5v3 .mt5v3-q--hero { height: auto; flex-direction: column; gap: 10px; background: transparent; box-shadow: none; border-radius: 0; }
  .mt5v3 .mt5v3-q--hero:focus-within { outline: 0; }
  .mt5v3 .mt5v3-q--hero input[type="search"] { flex: none; height: 56px; padding: 0 16px; background: var(--v3-card); box-shadow: var(--v3-shadow-card), 0 0 0 1px var(--v3-ring); }
  .mt5v3 .mt5v3-q--hero input[type="search"]:focus { outline: 2px solid var(--v3-or-pressed); outline-offset: 2px; }
  .mt5v3-hero-go { position: static; justify-content: center; min-height: 52px; width: 100%; }
}
@media (min-width: 640px) {
  .mt5v3-home3 { padding-top: 32px; }
  .mt5v3-hpara { display: none; }
  .mt5v3-steps ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 980px) {
  .mt5v3-home3 { max-width: 820px; padding-top: 48px; gap: 28px; }
  .mt5v3-hero-h { font-size: 34px; line-height: 42px; }
}

/* ---------- Ronda 16: el resumen de la reserva paso a paso (turn/resumen, la misma confirm-v3) ----------
   La seña del horario (si la pide) y, si hay, usar un pago anterior. Sin naranja pleno: el primario sigue siendo
   «Confirmar turno». */
.mt5v3-cf-sena { background: var(--v3-soft); border: 1.5px solid var(--v3-peach-2); border-radius: 12px; padding: 12px 14px; color: var(--v3-ink); font-size: var(--v3-small); line-height: var(--v3-small-lh); }
.mt5v3-cf-sena > b { display: block; margin-bottom: 2px; font-size: var(--v3-body); color: var(--v3-ink); }
.mt5v3-cf-sena > p { margin: 0; }
.mt5v3-cf-prev { margin: 10px 0 0; padding: 0; border: 0; display: grid; gap: 4px; }
.mt5v3-cf-prev legend { float: none; width: auto; margin: 0 0 2px; padding: 0; font-size: var(--v3-small); line-height: var(--v3-small-lh); font-weight: 800; color: var(--v3-ink); }
.mt5v3-cf-prev label { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.mt5v3-cf-prev input { width: 22px; height: 22px; flex: none; accent-color: var(--v3-or); }