/* ============================================================
   MUESTRA HELSEK — /muestras/turno/  (portal del paciente)
   ------------------------------------------------------------
   Este archivo hace SÓLO tres cosas. Ninguna es maquillaje:

   1. DESTRABA los choques entre las tres hojas que se cargan
      antes. panel.css trae el CSS real del sistema y muestra.css
      trae la cáscara de la muestra, y muestra.css se carga
      DESPUÉS: su `.btn` (0,1,0) le gana al `.btn-secundario`
      (0,1,0) del sistema por orden, y los botones "Volver" del
      wizard salían pintados de azul como si fueran el primario.
      Todo lo que se re-declara acá va bajo `.portal-body` (0,2,0)
      para ganar por especificidad y no por orden.

   2. REPONE lo que en el portal de verdad no está en la hoja:
      el cielo (allá lo pinta un telón SVG fijo que acá no se
      copia) y los ~40 `style=` inline de las vistas PHP, que
      acá no pueden existir porque la CSP prohíbe estilo inline.
      Los valores son los del original, no aproximaciones.

   3. AGREGA las piezas que son sólo de la muestra: las ayudas
      de demostración, los dos mails dibujados y el bloque que
      muestra el turno entrando en la agenda del consultorio.
      Van con nombres propios (`-muestra`, `mail-`, `agenda-`)
      para que se vea de un saque qué es del sistema y qué no.

   ⚠️ LO MÁS DELICADO DE ESTA PÁGINA está en dos lugares:
      · el presupuesto de 78 px (ver la sección 3), y
      · el bloque `prefers-reduced-motion` del final, que tiene
        que DESHACER el apagón global de panel.css:436 o las
        animaciones quedan clavadas en su último frame.
   ============================================================ */


/* ============================================================
   1. LA CÁSCARA: cinta, topbar y cielo
   ============================================================ */

/* La cinta de demostración es `position:fixed` y mide 34px, y la
   topbar del portal es `position:sticky; top:0`: sin esto la
   topbar se pega al borde del viewport y la cinta le tapa el
   logo cuando se scrollea. El padding del <body> lo pone
   muestra.css con `.con-cinta`. */
.portal-body .portal-topbar { top: var(--cinta-alto); }
.portal-body .portal-topbar .marca { text-decoration: none; }
.portal-body .portal-topbar .marca:hover { text-decoration: none; }

/* Los accesos de la topbar tienen que poder envolver. Sin esto,
   el último botón —justamente "Pedir turno", el CTA— se sale del
   contenedor y queda cortado por el borde derecho. Verificado en
   una captura a 1280: se veía medio botón. */
.portal-body .portal-acciones {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; justify-content: flex-end; min-width: 0;
}
/* Y de 720 para abajo la topbar se apila en dos renglones en
   lugar de apretar la marca hasta romperla. */
@media (max-width: 720px) {
  .portal-body .topbar-adentro {
    flex-wrap: wrap; row-gap: 10px; justify-content: space-between;
  }
  .portal-body .portal-acciones { width: 100%; justify-content: flex-start; }
}

/* EL CIELO. En el portal real esto no lo pinta ninguna de estas
   reglas: lo pinta `fondo_lineas.php` + `fondo-lineas.css`, una
   sola capa `position:fixed; z-index:-1` con 28 curvas. Esa pieza
   no se copia (es media hoja de CSS y un SVG generado por PHP),
   así que acá el cielo es un degradé fijo con los MISMOS tokens
   que consumía el telón —`--portal-brillo-a/b` y `--portal-cielo`—
   pero repintados con la paleta Helsek: el lienzo del sistema es
   #1A2140 (azul noche violáceo) y la tinta de Helsek es #12263F.
   Va `fixed` a propósito: así no hay ningún borde de degradé que
   pueda cortar al medio lo que cuelga sobre la banda. */
/* Los tokens --portal-* NO se redefinen acá: los repinta
   marca-helsek.css, que es la hoja compartida de la marca. Tener
   la paleta en dos lugares es cómo terminan divergiendo. Acá
   sólo se usa. */
.portal-body {
  background:
    radial-gradient(760px 420px at 82% -8%,  var(--portal-brillo-a), transparent 68%),
    radial-gradient(620px 380px at -6% 10%,  var(--portal-brillo-b), transparent 70%),
    var(--portal-cielo);
  background-attachment: fixed;
  background-repeat: no-repeat;

  /* muestra.css le pone Inter al <body> y acá Inter no se carga
     (la CSP de esta página no habilita Google Fonts). Se vuelve a
     la tipografía del sistema, que sí viaja self-hosted en
     /fonts/. El fallback largo es por si panel.css no llegara a
     cargar: la muestra se ve sobria, no sin tipografía. */
  font-family: var(--fuente, 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
  font-size: 15px;
}

/* La barra inferior de las muestras es `fixed` y flota sobre el
   pie: sin este colchón tapa el último renglón del pie. */
.portal-body .portal-pie { padding-bottom: 104px; }


/* ============================================================
   2. DESTRABAR muestra.css DENTRO DEL PORTAL
   ------------------------------------------------------------
   Nada de esto es una decisión de diseño nueva: son los valores
   del sistema, re-declarados con un `.portal-body` adelante para
   ganarle por especificidad a las reglas de la cáscara. Si algún
   día muestra.css deja de pisar, se puede borrar entero y la
   página se ve igual.
   ============================================================ */

.portal-body h1, .portal-body h2,
.portal-body h3, .portal-body h4 {
  margin: 0 0 .4em; font-weight: 800; letter-spacing: -.015em;
}
.portal-body h1 { font-size: 26px; line-height: 1.2; }
.portal-body h2 { font-size: 20px; line-height: 1.25; }
.portal-body h3 { font-size: 16px; line-height: 1.3; }

/* Los botones. El original: borde transparente, radio 10, 9x16. */
.portal-body .btn {
  border: 1px solid transparent; border-radius: 10px;
  padding: 9px 16px; font-size: 14px; font-weight: 700;
  background: none; color: inherit; box-shadow: none;
  transform: none;
}
.portal-body .btn-chico { padding: 5px 11px; font-size: 13px; border-radius: 8px; }
.portal-body .btn-primario { background: var(--indigo); color: #fff; }
.portal-body .btn-primario:hover { background: var(--indigo-osc); color: #fff; transform: none; box-shadow: none; }
.portal-body .btn-secundario { background: var(--blanco); color: var(--tinta); border-color: var(--linea); }
.portal-body .btn-secundario:hover { background: var(--blanco); border-color: var(--tinta-3); transform: none; }
.portal-body .btn-menta { border-color: transparent; }
.portal-body .btn:active { transform: scale(.97); }
.portal-body .btn[disabled],
.portal-body .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.portal-body .btn[disabled]:hover,
.portal-body .btn[aria-disabled="true"]:hover { transform: none; }

/* El foco de muestra.css es azul de 2px: sobre el lienzo oscuro
   casi no se ve. El del sistema es el celeste de 3px. */
.portal-body :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--luna); outline-offset: 2px; border-radius: 4px;
}

/* muestra.css pinta todo <em> de azul Helsek; adentro de una
   tarjeta blanca eso está bien, pero sobre el lienzo oscuro no
   se lee. Los <em> de esta página son todos de los títulos de
   venta, que van sobre oscuro. */
.portal-body .titulo-venta em { color: var(--luna); }


/* ============================================================
   3. ⚠️ EL PRESUPUESTO DE 78 PX
   ------------------------------------------------------------
   La cadena de medidas del portal, tal cual está en panel.css:

     .portal-banda-corta        → height: 130px  (espaciador)
     .portal-contenido.angosto  → margin-top: -78px

   O sea: el contenido arranca 78 px ANTES de que termine la
   banda, y esos 78 px son TODO el alto útil que hay sobre el
   azul. El número es fijo: no crece con el ancho de pantalla.

   Lo único que vive ahí arriba es la barra de `.pasos`. Si mide
   más de 78 px no desborda ni da error: se pasa de largo y queda
   partida al medio por el borde de la banda. Ya pasó —la versión
   de escritorio envolvía en tres renglones y medía 94 px en
   celular— y por eso de 900 px para abajo la barra es una barra
   de progreso de un solo renglón.

   MEDIDO en esta página (Edge, sobre las 5 hojas cargadas):
     320 px → 52 px   (círculo 26 + padding-bottom 26)
     390 px → 52 px
     768 px → 52 px   (768 ≤ 900 ⇒ sigue en modo progreso)
     1280 px → 26 px  (un renglón, los 6 rótulos entran)

   Los 26 px de `padding-bottom` son el renglón del rótulo del
   paso activo, que va `position:absolute; bottom:0`. Con 52 + 16
   de `margin-bottom` = 68 ≤ 78, la primera tarjeta blanca todavía
   asoma 10 px dentro del azul, que es el solape que da la
   sensación de profundidad.

   ⚠️ Si algún día se agrega algo más arriba de la tarjeta (un
   aviso, un volver, un título), hay que volver a medir: el
   presupuesto es de 78 px para TODO lo que esté arriba.
   ============================================================ */

/* La pantalla final es otra página en el portal real
   (/portal/gracias): no lleva barra de pasos. Sin esto el
   atributo `hidden` no alcanza, porque `.pasos` es `display:flex`
   y gana por especificidad. */
.portal-body .pasos[hidden] { display: none; }

/* Colores de FONDO OSCURO para lo que vive sobre el azul. */
.portal-body .titulo-venta {
  color: var(--portal-tinta);
  font-size: clamp(20px, 1.3vw + 14px, 26px);
  margin: 34px 0 6px;
}
.portal-body .bajada-venta {
  color: var(--portal-tinta-2);
  font-size: 15px; line-height: 1.55; max-width: 62ch;
  margin: 0 0 16px;
}
.portal-body .rotulo-venta {
  color: var(--luna);
  font-size: 11.5px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  margin: 0 0 6px;
}


/* ============================================================
   4. LOS `style=` INLINE DEL WIZARD, PASADOS A CLASES
   ------------------------------------------------------------
   Las vistas del portal traen el estilo pegado en el atributo.
   Acá no se puede (la CSP no habilita 'unsafe-inline' para
   estilo de atributo), así que cada uno tiene su clase con los
   MISMOS valores. Donde el original usa `var(--borde, #E4E7EF)`
   se replica igual: `--borde` no existe en la hoja del sistema
   —lo dice el comentario de panel.css:717— y los 19 usos inline
   del portal caen al fallback. Copiarlo literal es lo correcto:
   si mañana alguien define `--borde`, esta muestra cambia junto
   con el sistema y no se queda en una medida vieja.
   ============================================================ */

/* La fila de botones al pie de cada paso. En el original es un
   div con style="display:flex; gap:10px; margin-top:22px". El
   "Volver" queda a la izquierda y el "Continuar" a la derecha,
   que es el orden que espera el pulgar en un celular. */
.acciones-paso {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 22px; align-items: center;
}
.acciones-paso .btn-menta { margin-left: auto; }
@media (max-width: 460px) {
  /* A 460 no entran los dos botones en un renglón: apilados, y
     el de avanzar arriba, que es el que se va a tocar. */
  .acciones-paso { flex-direction: column-reverse; align-items: stretch; }
  .acciones-paso .btn-menta { margin-left: 0; }
}

/* El navegador de mes del paso 4. */
.nav-mes {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin: 4px 0 14px;
}
.nav-mes-rotulo {
  font-weight: 800; font-size: 15px; text-transform: capitalize;
  min-width: 11ch; text-align: center;
}

/* El "(opcional)" de las etiquetas: el sistema lo pone en un
   <span> con el gris atenuado. */
.opcional { color: var(--tinta-3); font-weight: 600; }

/* Sub-bloques que se abren debajo de un paso (el código de 6
   dígitos, la salida por WhatsApp). */
.bloque-abajo {
  margin-top: 18px; padding-top: 18px;
  border-top: 1px solid var(--borde, #E4E7EF);
}
.bloque-abajo.centrado { text-align: center; }
.bloque-abajo .subtexto { margin-bottom: 10px; }

/* Grupos de elección del paso 3 (modalidad / médico / cobertura). */
.grupo-eleccion { margin-bottom: 18px; }
.grupo-eleccion:last-of-type { margin-bottom: 0; }
.rotulo-grupo { margin: 12px 0 8px; font-weight: 800; color: var(--tinta); font-size: 14px; }
.rotulo-grupo:first-child { margin-top: 0; }

.separado-arriba { margin-top: 16px; }
.separado-abajo  { margin-bottom: 14px; }
.sin-margen-abajo { margin-bottom: 0; }

/* El resumen del paso 6. En el original es
   style="background:var(--fondo); box-shadow:none" — y es justo
   el uso de `--fondo` que panel.css decidió NO teñir. */
.resumen-turno {
  background: var(--fondo); box-shadow: none;
  margin-bottom: 18px;
}
.resumen-turno p { margin: 0; }
.resumen-turno p + p { margin-top: 6px; }
.resumen-turno .resumen-nombre { font-size: 17px; font-weight: 800; }
.resumen-turno .alerta { margin: 12px 0 0; }

/* El cartel de spam, en sus dos tamaños. Sale de un helper de
   PHP (`aviso_spam()`), no de una vista: es el mismo HTML en las
   nueve pantallas que lo usan. */
.aviso-spam-grande {
  margin: 22px auto 0; max-width: 520px;
  background: var(--ambar-suave); border: 2px solid var(--ambar);
  border-radius: 14px; padding: 20px 18px; text-align: center;
}
.aviso-spam-grande .sobre { font-size: 34px; color: var(--ambar); line-height: 1; }
.aviso-spam-grande .tit {
  margin: 10px 0 6px; font-size: 20px; font-weight: 800; color: var(--ambar-texto);
}
.aviso-spam-grande .txt { margin: 0; font-size: 15px; color: var(--ambar-texto); }

.aviso-spam-chico {
  margin: 0 0 14px;
  background: var(--ambar-suave); border: 1px solid var(--ambar);
  border-radius: 10px; padding: 11px 13px;
  display: flex; gap: 10px; align-items: flex-start;
}
.aviso-spam-chico .sobre { color: var(--ambar); font-size: 17px; margin-top: 2px; }
.aviso-spam-chico .txt { font-size: 14px; color: var(--ambar-texto); line-height: 1.45; }

/* La pantalla de gracias. */
.gracias { text-align: center; padding: 40px 26px; }
.gracias .tilde { color: var(--menta); line-height: 1; margin-bottom: 14px; }
.gracias h2 { margin-bottom: 10px; }
.gracias .subtexto { margin-left: auto; margin-right: auto; }
.gracias .turno-dicho { font-size: 15px; }
.gracias .nota-chica { font-size: 13px; margin-top: 10px; }
.gracias .linea-boton { margin-top: 18px; }
.gracias .linea-volver { margin: 24px 0 0; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* La caja verde de "dejá el turno confirmado". */
.caja-confirmar {
  margin: 22px auto 6px; max-width: 420px;
  background: #EAF7F2; border: 1px solid #CDEBE0;
  border-radius: 12px; padding: 18px;
}
.caja-confirmar p { margin: 0 0 12px; font-size: 15px; color: var(--tinta); }
.caja-confirmar.listo { background: var(--menta-suave); border-color: #A9DCC9; }
.caja-confirmar .ya-esta { margin: 0; font-weight: 800; color: var(--menta-texto); }

/* La caja lila de la consulta virtual. Los colores son los del
   original: es el único lugar del sistema con familia violeta. */
.caja-virtual {
  margin: 16px auto 0; max-width: 480px;
  background: #ECE7FB; border: 1px solid #D8CEF6;
  border-radius: 12px; padding: 18px 16px; text-align: left;
}
.caja-virtual .tit { margin: 0 0 6px; font-size: 15px; font-weight: 800; color: #3A2A6B; }
.caja-virtual .txt { margin: 0; font-size: 14.5px; color: #3A2A6B; line-height: 1.5; }

/* "Dónde te atendemos", al pie de la pantalla de gracias. */
.donde-atendemos {
  margin: 26px auto 0; max-width: 520px;
  border-top: 1px solid var(--linea); padding-top: 20px;
}
.donde-atendemos .rotulo {
  text-transform: uppercase; letter-spacing: .5px;
  font-size: 12px; font-weight: 800; color: var(--tinta-2);
}
.donde-atendemos .direccion { margin: 6px 0 0; font-size: 16px; font-weight: 700; }
.donde-atendemos .direccion .fa { color: var(--indigo); }

/* El verde de WhatsApp es el de la marca de WhatsApp: no sale de
   ningún token del sistema y está escrito a mano también allá. */
.portal-body .btn-wa { background: #25D366; color: #fff; border-color: transparent; }
.portal-body .btn-wa:hover { background: #1FBA5A; color: #fff; }


/* ============================================================
   5. PIEZAS QUE SON SÓLO DE LA MUESTRA
   ============================================================ */

/* Las ayudas de demostración. Van con borde punteado y el rótulo
   "muestra" a propósito: quien ve esto en una reunión tiene que
   poder distinguir en un segundo qué es el portal de verdad y
   qué es un atajo para no tipear un DNI en el celular de otro. */
.ayuda-muestra {
  margin: 0 0 18px;
  background: var(--azul-suave);
  border: 1.5px dashed #BBD1F0;
  border-radius: 12px; padding: 13px 15px;
}
.ayuda-muestra .rotulo {
  display: inline-block; margin: 0 0 6px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--indigo);
}
.ayuda-muestra p { margin: 0 0 10px; font-size: 13.5px; color: var(--tinta-2); line-height: 1.5; }
.ayuda-muestra p:last-child { margin-bottom: 0; }
.ayuda-muestra .botones { display: flex; gap: 8px; flex-wrap: wrap; }
.ayuda-muestra .dato { font-weight: 800; color: var(--tinta); letter-spacing: .02em; }

/* El widget anti-bot. En el portal real acá va Turnstile de
   Cloudflare, que no se puede embeber en una muestra estática
   (necesita su clave de sitio y su endpoint). Se dibuja el
   resultado, no el widget: lo que el paciente ve cuando pasa. */
.verif-bot {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 16px; padding: 10px 13px;
  background: var(--fondo); border: 1px solid var(--linea);
  border-radius: 10px;
  font-size: 13px; color: var(--tinta-2);
}
.verif-bot .tilde {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  background: var(--menta-suave); color: var(--menta-texto);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
}

/* Las tres ventajas, abajo del bloque de la agenda. */
.venta-lista { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.venta-lista li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 14.5px; line-height: 1.5; color: var(--tinta);
}
.venta-lista .fa {
  flex: 0 0 auto; margin-top: 3px;
  color: var(--menta); font-size: 15px;
}
.venta-lista b { color: var(--tinta); }

/* ------------------------------------------------------------
   La agenda del consultorio, en chico
   ------------------------------------------------------------
   No es la agenda del panel (esa vive en la otra muestra, con su
   propio CSS): es un resumen de cinco renglones para que se vea
   el turno recién entrado en su lugar y en su horario. Se usan
   los `.pill` del sistema para los estados, que son los mismos
   que ve el consultorio.
   ------------------------------------------------------------ */
.agenda-mini { margin-top: 4px; }
.agenda-cab {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.agenda-cab .dia { font-weight: 800; font-size: 15px; text-transform: capitalize; }
.agenda-cab .quien { font-size: 13px; color: var(--tinta-2); }

.fila-agenda {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  gap: 4px 12px; align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--linea); border-radius: 10px;
  background: var(--blanco);
}
.fila-agenda + .fila-agenda { margin-top: 6px; }
.fila-agenda .hora { font-weight: 800; font-size: 14.5px; font-variant-numeric: tabular-nums; }
/* display:block, o el "30 min" se pega al horario y se lee
   "08:0030 min". Medido en la captura, no supuesto. */
.fila-agenda .dur { display: block; font-size: 11px; color: var(--tinta-3); font-weight: 700; }
.fila-agenda .quien { min-width: 0; }
.fila-agenda .nombre { font-weight: 700; font-size: 14px; }
.fila-agenda .motivo {
  font-size: 12.5px; color: var(--tinta-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fila-agenda .estados { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* El renglón que acaba de entrar. El borde y el fondo lo marcan
   solos: el latido es un refuerzo, no la única señal —si se
   apaga, el renglón sigue destacado. */
.fila-agenda.nueva {
  border: 2px solid var(--menta); background: var(--menta-suave);
  animation: entro-turno 2.6s var(--curva) 3;
}
@keyframes entro-turno {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46, 125, 91, 0); }
  45%      { box-shadow: 0 0 0 6px rgba(46, 125, 91, .18); }
}
.fila-agenda.nueva .nombre { color: var(--menta-texto); }

@media (max-width: 560px) {
  .fila-agenda { grid-template-columns: 52px 1fr; }
  .fila-agenda .estados { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ------------------------------------------------------------
   Los dos mails
   ------------------------------------------------------------
   El sistema manda dos: uno al paciente (`turno_solicitado`) y
   uno al centro (`turno_nuevo_centro`). Se dibujan como sobres,
   no como capturas: una captura de un cliente de mail se ve
   vieja y además arrastra la marca de Gmail.
   ------------------------------------------------------------ */
.mails { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.mail-mock {
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra);
  overflow: hidden;
}
.mail-cab { background: var(--fondo); border-bottom: 1px solid var(--linea); padding: 12px 15px; }
.mail-para {
  display: inline-block; margin: 0 0 8px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--indigo);
}
.mail-fila { display: grid; grid-template-columns: 52px 1fr; gap: 2px 8px; font-size: 12.5px; }
.mail-fila dt { color: var(--tinta-3); font-weight: 700; }
.mail-fila dd { margin: 0; color: var(--tinta-2); overflow-wrap: anywhere; }
.mail-fila dd.asunto { color: var(--tinta); font-weight: 800; }
.mail-cuerpo { padding: 16px 15px; font-size: 13.5px; line-height: 1.55; color: var(--tinta); }
.mail-cuerpo p { margin: 0 0 10px; }
.mail-cuerpo p:last-child { margin-bottom: 0; }
.mail-cuerpo .dato-mail {
  background: var(--fondo); border: 1px solid var(--linea); border-radius: 9px;
  padding: 11px 13px; margin: 0 0 12px;
}
.mail-cuerpo .dato-mail dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 13px; }
.mail-cuerpo .dato-mail dt { color: var(--tinta-2); font-weight: 700; }
.mail-cuerpo .dato-mail dd { margin: 0; font-weight: 700; }
.mail-cuerpo .boton-falso {
  display: inline-block; background: var(--indigo); color: #fff;
  font-weight: 800; font-size: 13px; padding: 9px 15px; border-radius: 9px;
}
.mail-cuerpo .pie-mail { font-size: 12px; color: var(--tinta-3); }

/* Un día del calendario sin lugar. No existe en el sistema real
   —allá el AJAX devuelve sólo los días CON hueco, así que no hay
   nada que pintar— pero en una muestra conviene que se vean:
   una agenda donde todos los días tienen lugar se lee como
   inventada. */
.chip-dia.sin-lugar {
  background: var(--fondo); border-style: dashed; cursor: not-allowed;
  opacity: .72;
}
.chip-dia.sin-lugar .dia-num { color: var(--tinta-3); }
.chip-dia.sin-lugar .dia-mes { color: var(--tinta-3); font-weight: 700; }
.chip-dia.sin-lugar:hover { border-color: var(--linea); }

.leyenda-dias {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin: 12px 0 0; font-size: 12.5px; color: var(--tinta-2);
}
.leyenda-dias span { display: flex; align-items: center; gap: 6px; }
.leyenda-dias i {
  width: 14px; height: 14px; border-radius: 4px;
  border: 1.5px solid var(--linea); background: var(--blanco);
}
.leyenda-dias .muestra-sin { border-style: dashed; background: var(--fondo); }

/* El emblema del consultorio ficticio: un PNG cuadrado que ya
   vive en la landing. Se usa la clase del sistema
   (`.logo-consultorio`, 42x42 con object-fit) y sólo se le suma
   el fondo, porque el PNG es oscuro y sobre la topbar oscura le
   falta un borde que lo despegue. */
.portal-body .logo-consultorio {
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--portal-vidrio-borde);
}

/* El pie de la muestra: aclara de nuevo que nada de esto existe. */
.aclaracion-pie {
  max-width: 62ch; margin: 0 auto 8px;
  font-size: 12.5px; line-height: 1.5; color: var(--portal-tinta-3);
}


/* ============================================================
   6. ⚠️ MENOS MOVIMIENTO — y el apagón que hay que deshacer
   ------------------------------------------------------------
   panel.css:436 trae un barrido con `!important`:

     *:not(.hero-escena, .hero-escena *, .fondo-lineas, ...) {
       transition: none !important;
       animation-duration: .01ms !important;
       animation-iteration-count: 1 !important;
     }

   Eso NO apaga una animación: la corre entera en .01ms y la
   deja congelada en su último frame. Para un latido que empieza
   y termina transparente, el resultado es un elemento que se ve
   apagado o a medio dibujar, y se lee como un bug.

   Esta máquina tiene los efectos de Windows desactivados: acá
   `reduce` está SIEMPRE activo, así que este bloque no es un
   detalle de accesibilidad, es el estado normal de la página
   cuando se la revisa.

   Como no se puede tocar panel.css (es la copia del sistema),
   se le gana por especificidad: el barrido es `*:not(.clase)`,
   que puntúa 0,1,0. Cualquier selector con dos clases lo pasa,
   y con `!important` de los dos lados gana el más específico.
   Lo que se repone se AQUIETA (duración larga, iteración
   infinita), no se apaga.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {

  /* El punto de la cinta. muestra.css ya lo estira a 6s, pero sin
     `!important`, así que el barrido de panel.css le gana y lo
     deja quieto y medio transparente: un punto muerto arriba de
     todo, que es lo primero que se ve de la muestra. */
  .portal-body .cinta .punto {
    animation-duration: 6s !important;
    animation-iteration-count: infinite !important;
    animation-delay: 0s !important;
  }

  /* El renglón que acaba de entrar en la agenda. Late más lento
     y no para: es lo que la muestra quiere que se mire. */
  .portal-body .fila-agenda.nueva {
    animation-duration: 7s !important;
    animation-iteration-count: infinite !important;
    animation-delay: 0s !important;
  }

  /* El paso de un paso al siguiente. Sin esto el barrido lo
     corre en .01ms; como termina en opacidad 1 no se rompe nada,
     pero el cambio queda seco y no se entiende que la página
     avanzó. Un tercio de segundo alcanza para seguirlo. */
  .portal-body .panel-paso.activo {
    animation-duration: .34s !important;
    animation-iteration-count: 1 !important;
  }
}

/* La entrada del paso activo. Va con `both` para que el estado
   final sea el visible, que es lo que la hace inofensiva si
   alguna vez queda congelada. */
.portal-body .panel-paso.activo { animation: paso-entra .26s var(--curva) both; }
@keyframes paso-entra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}