/* Micrositio v3, ronda 7 (flag mt5_search_v3_enabled; layouts/_v3-microsite-header.php, mainv2-microsite.php y
   microsite-blank.php): el diseño general de MrTurno (la misma franja, línea fina y pie del sitio, site-v3.css) con los
   colores y la fuente DEL CENTRO y sólo con sus datos. Los colores los calcula MicrositeV3::chrome() con contraste AA y
   el layout los pone en body.mt5m:
     --mt5m-bg     franja (color de encabezado del centro)      --mt5m-fg   texto de la franja (blanco o casi negro)
     --mt5m-line   divisores sobre la franja                     --mt5m-hover fondo al pasar sobre la franja
     --mt5m-foot   pie (el color del centro oscurecido hasta AA con texto blanco)
     --mt5m-link   links y acciones sobre blanco (color de acción oscurecido hasta AA)
     --mt5m-soft / --mt5m-peach  fondos suaves del color de acción
     --mt5m-font   la fuente del cuerpo del micrositio
   Celular < 640 px; tablet 640–979; computadora ≥ 980. Sin las variables (centro sin colores válidos), el naranja. */
body.mt5m {
  --mt5m-ink: #231F1D;
  --mt5m-ink-2: #3F3835;
  --mt5m-ink-3: #6E6560;
}
/* height/margin: el CSS del micrositio y el viejo del sitio le ponen alto fijo y margen al <header>. */
.mt5m-h { position: sticky; top: 0; z-index: 1040; height: auto !important; min-height: 0 !important; margin: 0 !important; background: var(--mt5m-bg, #FF7300) !important; color: var(--mt5m-fg, #fff); font-family: var(--mt5m-font, Nunito, "Segoe UI", system-ui, sans-serif); padding-top: env(safe-area-inset-top, 0px); box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
.mt5m-h *, .mt5m-h *::before, .mt5m-h *::after { box-sizing: border-box; }
.mt5m-h button { font: inherit; cursor: pointer; }
.mt5m-h :focus-visible { outline: 2px solid var(--mt5m-fg, #fff); outline-offset: 2px; }
.mt5m-h-in { max-width: 1344px; margin: 0 auto; padding: 10px 16px; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; grid-template-areas: "logo . me" "q q q"; gap: 10px 14px; align-items: center; }
.mt5m-h.is-simple .mt5m-h-in { grid-template-areas: "logo"; grid-template-columns: auto; }
.mt5m-logo { grid-area: logo; justify-self: start; display: inline-flex; align-items: center; line-height: 0; text-decoration: none; min-width: 0; }
.mt5m-logo img { display: block; height: 40px; width: auto; max-width: 150px; object-fit: contain; background: #fff; border-radius: 10px; padding: 4px 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.mt5m-logo b { color: var(--mt5m-fg, #fff); font-size: 18px; line-height: 1.2; font-weight: 800; }
.mt5m-q { grid-area: q; position: relative; display: flex; height: 46px; margin: 0; background: #fff; border-radius: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); min-width: 0; }
.mt5m-q:focus-within { outline: 2px solid var(--mt5m-fg, #fff); outline-offset: 2px; }
.mt5m-q input[type="search"] { flex: 1; min-width: 0; height: 46px; border: 0; border-radius: 12px; padding: 0 50px 0 14px; background: transparent; color: var(--mt5m-ink); font-size: 16px; font-family: inherit; box-shadow: none; }
.mt5m-q input[type="search"]::placeholder { color: var(--mt5m-ink-3); }
.mt5m-q input[type="search"]:focus { outline: none; }
.mt5m-go { position: absolute; right: 5px; top: 5px; width: 36px; height: 36px; border: 0; border-radius: 9px; background: var(--mt5m-soft, #FFF2E7); color: var(--mt5m-link, #B04F00) !important; display: grid; place-items: center; padding: 0; }
.mt5m-go:hover { background: var(--mt5m-peach, #FFE7D1); }
.mt5m-guest { grid-area: me; justify-self: end; display: flex; align-items: center; gap: 12px; }
.mt5m-reg { color: var(--mt5m-fg, #fff) !important; font-weight: 700; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.mt5m-login { background: #fff; color: var(--mt5m-link, #B04F00) !important; font-weight: 800; font-size: 14px; padding: 9px 14px; border-radius: 10px; white-space: nowrap; text-decoration: none; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.mt5m-login:hover { background: var(--mt5m-soft, #FFF2E7); }
.mt5m-me { grid-area: me; justify-self: end; border: 0; background: none; padding: 0; display: grid; place-items: center; min-width: 44px; min-height: 44px; }
.mt5m-avatar { width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--mt5m-link, #B04F00); font-weight: 900; font-size: 13px; display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }
.mt5m-me:hover .mt5m-avatar { box-shadow: 0 0 0 3px var(--mt5m-hover, rgba(255, 255, 255, .35)); }

/* Línea fina (tablet y compu): «Especialidades ›», «Sólo turnos online» o los menús de la cuenta, y «Turnos gestionados por». */
.mt5m-sub { display: none; border-top: 1px solid var(--mt5m-line, rgba(255, 255, 255, .26)); }
.mt5m-sub-in { max-width: 1344px; margin: 0 auto; padding: 0 16px; min-height: 42px; display: flex; align-items: center; gap: 22px; }
.mt5m-sub a, .mt5m-sub button { border: 0; border-bottom: 2px solid transparent; background: none; color: var(--mt5m-fg, #fff) !important; padding: 0; height: 42px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.mt5m-sub a:hover, .mt5m-sub button:hover { border-bottom-color: currentColor; }
.mt5m-sub a.is-on { font-weight: 800; border-bottom-color: currentColor; }
.mt5m-sub .mt5m-idx { font-weight: 800; }
.mt5m-sp { flex: 1; }
.mt5m-tg .mt5m-sw { position: relative; width: 36px; height: 22px; border-radius: 99px; background: var(--mt5m-hover, rgba(255, 255, 255, .16)); box-shadow: inset 0 0 0 1.5px var(--mt5m-line, rgba(255, 255, 255, .4)); flex: none; transition: background .15s; }
.mt5m-tg .mt5m-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--mt5m-fg, #fff); transition: transform .15s; }
.mt5m-tg[aria-pressed="true"] .mt5m-sw { background: var(--mt5m-fg, #fff); box-shadow: none; }
.mt5m-tg[aria-pressed="true"] .mt5m-sw::after { transform: translateX(14px); background: var(--mt5m-bg, #FF7300); }
@media (prefers-reduced-motion: reduce) { .mt5m-tg .mt5m-sw, .mt5m-tg .mt5m-sw::after { transition: none; } }
.mt5m-sub .mt5m-by { border-bottom: 0; font-size: 12.5px; font-weight: 600; gap: 7px; opacity: .95; }
.mt5m-sub .mt5m-by:hover { border-bottom: 0; opacity: 1; }
.mt5m-by img { height: 19px; width: auto; display: block; }

/* Celular: las especialidades como chips deslizables, dentro de la franja. */
.mt5m-chips { display: flex; gap: 8px; overflow-x: auto; padding: 0 16px 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mt5m-chips::-webkit-scrollbar { display: none; }
.mt5m-chip { flex: none; min-height: 36px; padding: 0 14px; border-radius: 99px; border: 1.5px solid var(--mt5m-line, rgba(255, 255, 255, .4)); background: transparent; color: var(--mt5m-fg, #fff); font-size: 14px; font-weight: 700; white-space: nowrap; }
.mt5m-chip[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--mt5m-link, #B04F00); font-weight: 800; }
.mt5m-chip--on { margin-left: 4px; }

/* La línea «Estás en el micrositio de…» (antes el recuadro grande del logo) */
.mt5m-info { margin: 0; padding: 12px 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; font-family: var(--mt5m-font, Nunito, system-ui, sans-serif); }
.mt5m-info p { margin: 0; font-size: 13.5px; line-height: 19px; color: var(--mt5m-ink-3); }
.mt5m-info b { color: var(--mt5m-ink-2); font-weight: 800; }
.mt5m-info a { color: var(--mt5m-link, #D86100) !important; font-weight: 700; }
.mt5m-info .mt5m-by { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--mt5m-ink-3) !important; text-decoration: none; }
.mt5m-by--m img { height: 18px; }
.mt5m-gap { height: 12px; }

/* «Nueva App MrTurno», discreto y descartable (partials/_app-banner-line) */
.mt5m-app { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 6px 6px 6px 10px; background: #fff; border-radius: 12px; box-shadow: 0 3px 12px rgba(70, 50, 30, .06); font-family: var(--mt5m-font, Nunito, system-ui, sans-serif); }
.mt5m-app[hidden] { display: none; }
.mt5m-app img { flex: none; width: 28px; height: 28px; object-fit: contain; }
.mt5m-app p { flex: 1; min-width: 0; margin: 0; font-size: 14px; line-height: 19px; color: var(--mt5m-ink-2); }
.mt5m-app a { flex: none; color: var(--mt5m-link, #D86100) !important; font-weight: 800; font-size: 14px; text-decoration: none; padding: 8px 6px; }
.mt5m-app a:hover { text-decoration: underline; }
.mt5m-app .mt-app-banner__close { position: relative; top: auto; right: auto; flex: none; width: 36px; height: 36px; border: 0; border-radius: 99px; background: none; color: var(--mt5m-ink-3); display: grid; place-items: center; padding: 0; box-shadow: none; }
.mt5m-app .mt-app-banner__close:hover { background: #F3EDE9; }
.mt5m-app .mt-app-banner__close::before { inset: 0; }

/* La cartilla: títulos de especialidad alineados con las tarjetas y en la fuente del centro */
body.mt5m .mt-specialty[hidden], body.mt5m .mt5v3-micro-card[hidden] { display: none !important; }
body.mt5m .mt-specialty .specialty-title { margin: 18px 0 8px !important; text-align: left; font-family: var(--mt5m-font, Nunito, system-ui, sans-serif); font-size: 19px; line-height: 26px; font-weight: 800; }
body.mt5m .mt5v3-micro-card, body.mt5m .mt5v3-espchips--micro { --v3-font: var(--mt5m-font, Nunito, "Segoe UI", system-ui, sans-serif); }
.mt5m-empty { margin: 8px 0; padding: 14px 16px; background: #fff; border-radius: 16px; box-shadow: 0 3px 12px rgba(70, 50, 30, .06); font-size: 15px; line-height: 21px; color: var(--mt5m-ink-2); font-family: var(--mt5m-font, Nunito, system-ui, sans-serif); }
.mt5m-empty[hidden] { display: none; }
.mt5m-empty button { border: 0; background: none; padding: 0; color: var(--mt5m-link, #D86100); font-weight: 800; }
.mt5m-empty button:hover { text-decoration: underline; }

/* Hoja «Especialidades de <centro>» */
.mt5m-ov { position: fixed; inset: 0; z-index: 100000; background: rgba(35, 31, 29, .4); }
.mt5m-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100001; max-height: 80vh; display: flex; flex-direction: column; background: #FCF8F6; border-radius: 18px 18px 0 0; font-family: var(--mt5m-font, Nunito, system-ui, sans-serif); color: var(--mt5m-ink); box-shadow: 0 -8px 30px rgba(70, 50, 30, .18); }
.mt5m-sheet[hidden], .mt5m-ov[hidden] { display: none !important; }
.mt5m-sheet-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: #fff; border-bottom: 1px solid #F1EAE4; border-radius: 18px 18px 0 0; }
.mt5m-sheet-h h2 { margin: 0; font-size: 19px; line-height: 26px; font-weight: 800; color: var(--mt5m-ink); text-align: left; font-family: inherit; }
.mt5m-sheet-x { border: 0; background: none; font-size: 28px; line-height: 1; color: var(--mt5m-ink-3); min-width: 44px; min-height: 44px; border-radius: 12px; }
.mt5m-sheet-b { overflow-y: auto; padding: 12px 16px 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 12px; overscroll-behavior: contain; }
.mt5m-sheet-b button { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 10px; background: none; text-align: left; font: inherit; font-size: 15px; font-weight: 700; color: var(--mt5m-ink-2); }
.mt5m-sheet-b button small { font-size: 13px; color: var(--mt5m-ink-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.mt5m-sheet-b button:hover { background: var(--mt5m-soft, #FFF2E7); }
.mt5m-sheet-b button[aria-pressed="true"] { background: var(--mt5m-soft, #FFF2E7); color: var(--mt5m-link, #B04F00); font-weight: 800; }
.mt5m-sheet-b button:focus-visible { outline: 2px solid var(--mt5m-link, #D86100); outline-offset: 1px; }

/* Pie con el color del centro (texto blanco con contraste AA) */
.mt5v3-f.mt5v3-f--brand { background: var(--mt5m-foot, #B04F00); font-family: var(--mt5m-font, Nunito, system-ui, sans-serif); }

/* Ingreso del micrositio (microsite-blank): la franja simple con el logo y el pie abajo. */
body.mt5m-blank { min-height: 100vh; display: flex; flex-direction: column; }
body.mt5m-blank > .container { flex: 1 0 auto; }
body.mt5m-blank .mt5m-h { box-shadow: none; }

@media (max-width: 639px) {
  .mt5m-logo img { height: 36px; max-width: 128px; padding: 3px 8px; }
  .mt5m-guest { gap: 10px; }
  .mt5m-login { padding: 9px 12px; }
  .mt5m-h-in { padding: 10px 16px 12px; }
}
@media (max-width: 380px) {
  .mt5m-reg, .mt5m-login { font-size: 13px; }
  .mt5m-login { padding: 8px 10px; }
}
@media (min-width: 640px) {
  .mt5m-h-in { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo q me"; padding: 10px 20px; column-gap: 18px; }
  .mt5m-sub { display: block; }
  .mt5m-sub-in { padding: 0 20px; }
  .mt5m-chips { display: none; }
  .mt5m-by--m { display: none !important; }
  .mt5m-sheet { left: 50%; right: auto; bottom: auto; top: 120px; width: min(720px, calc(100vw - 40px)); transform: translateX(-50%); max-height: calc(100vh - 160px); border-radius: 18px; }
}
@media (min-width: 640px) and (max-width: 979px) {
  .mt5m-sub-in { gap: 16px; }
  .mt5m-sub a, .mt5m-sub button { font-size: 13.5px; }
  .mt5m-sub .mt5m-by span { display: none; }
}
@media (min-width: 980px) {
  .mt5m-h-in { padding: 12px 24px; grid-template-columns: minmax(170px, auto) minmax(0, 1fr) auto; column-gap: 24px; }
  .mt5m-q { max-width: 640px; }
  .mt5m-q, .mt5m-q input[type="search"] { height: 48px; }
  .mt5m-go { top: 6px; }
  .mt5m-sub-in { padding: 0 24px; gap: 26px; }
}

/* ---------- 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) {
  .mt5m-logo b { font-size: 19px; }
  .mt5m-q input[type="search"] { font-size: 17px; }
  .mt5m-reg { font-size: 15px; }
  .mt5m-login { font-size: 15px; }
  .mt5m-avatar { font-size: 14px; }
  .mt5m-sub a, .mt5m-sub button { font-size: 15px; }
  .mt5m-sub .mt5m-by { font-size: 13.5px; }
  .mt5m-chip { font-size: 15px; }
  .mt5m-info p { font-size: 14.5px; }
  .mt5m-info .mt5m-by { font-size: 13px; }
  .mt5m-app p { font-size: 15px; }
  .mt5m-app a { font-size: 15px; }
  body.mt5m .mt-specialty .specialty-title { font-size: 20px; }
  .mt5m-empty { font-size: 16px; }
  .mt5m-sheet-h h2 { font-size: 20px; }
  .mt5m-sheet-b button { font-size: 16px; }
  .mt5m-sheet-b button small { font-size: 14px; }
}
@media (max-width: 380px) {
  .mt5m-q input[type="search"] { font-size: 16px; } /* 360 px: el texto de ayuda del buscador entra entero (16 px: sin zoom en iOS) */
  .mt5m-reg, .mt5m-login { font-size: 14px; }
}

/* ---------- Hotfix «cabecera de alto fijo» (08/11/2026): la cabecera del centro en el celular (< 640 px) ----------
   La misma regla que el sitio (site-v3.css, «cabecera de alto fijo»), con los colores del centro: SIEMPRE el mismo alto
   (--mt5m-hh, 112 px más el safe area: la fila del logo del centro y el avatar o el ingreso, de 44 px, y el buscador del
   centro, de 44 px), sticky con `top: 0` en el flujo, sin JS ni `top` negativo. El nombre del centro sin logo va en una
   línea con elipsis (antes podía ocupar dos y cambiar el alto). La versión simple (ingreso) queda igual. */
@media (max-width: 639px) {
  :root { --mt5m-hh: 112px; }
  .mt5m-h:not(.is-simple) { top: 0; height: calc(var(--mt5m-hh) + env(safe-area-inset-top, 0px)) !important; }
  .mt5m-h:not(.is-simple) .mt5m-h-in { height: var(--mt5m-hh); padding: 8px 16px; grid-template-rows: 44px 44px; row-gap: 8px; }
  .mt5m-h:not(.is-simple) .mt5m-logo { height: 44px; }
  .mt5m-logo b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mt5m-h:not(.is-simple) .mt5m-q, .mt5m-h:not(.is-simple) .mt5m-q input[type="search"] { height: 44px; }
  .mt5m-h:not(.is-simple) .mt5m-q input[type="search"] { text-overflow: ellipsis; }
  .mt5m-h:not(.is-simple) .mt5m-go { top: 4px; }
  /* Los saltos a una sección dejan el destino debajo de la cabecera, no detrás. */
  html:has(#mt5m-header:not(.is-simple)) { scroll-padding-top: calc(var(--mt5m-hh) + 8px + env(safe-area-inset-top, 0px)); }
}