/* Pantallas del paciente (r1, r2, r4, r6 y vecinas). Lo común está en /comun/estilos.css; aquí solo lo propio de estas pantallas,
   copiado de las animaciones elegidas «08 · Trazo que se dibuja» (parte-r1 … parte-r6). */

.r-form{display:contents}

/* Trazos SVG que dibujan bordes (encima del contenido, sin recibir toques). */
.r-trazo{position:absolute;pointer-events:none;overflow:visible;z-index:2}
#app .b-field{position:relative}
/* Mientras el trazo azul marca el campo activo, el contorno del CSS común no se duplica. */
#app .b-field.r-con-trazo:focus-within{outline:none;border-color:var(--linea-campo)}
#app .b-field.error .r-foco rect{stroke:var(--rojo)} /* con error, el trazo del foco no tapa el rojo */

/* Puntos de r2 y de la pantalla entre cuestionarios: el activo se estira. */
#app .b-dots i{transition:width .35s cubic-bezier(.4,0,.2,1),background-color .35s}
/* Un correo largo de contacto no se sale de la pantalla. */
#app .b-sub{overflow-wrap:break-word}

/* Avance «Ánimo · N de 9» con «Anterior» discreto a la izquierda. */
.r-cab{display:flex;justify-content:space-between;align-items:center;gap:12px}
.r-n{font-variant-numeric:tabular-nums;text-align:right}
.r-ant{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-left:-8px;padding:0 8px;border-radius:10px;color:var(--suave);font:700 15px/1 "Nunito Sans",sans-serif}
.r-ant span{font-size:22px;line-height:1;margin-top:-3px}
@media (hover:hover){.r-ant:hover:not(:disabled){color:var(--marino)}}
/* Encabezado del cuestionario, chico, encima de cada pregunta; empuja la pregunta hacia el pulgar. */
.r-enc{margin:auto 0 0;color:var(--suave);font-size:15px;line-height:1.4}
#app[data-p="r4"] .b-q{margin-top:8px}
#app[data-p="r4"] .r-enc[hidden] + .b-q{margin-top:auto}

/* Respuesta tocada: se pone azul al instante (sin transición) y entra la siguiente pregunta.
   Alto mínimo en vez de fijo: si la letra del aparato es grande, la respuesta pasa a dos líneas sin salirse. */
.r-op{position:relative}
#app .r-op{height:auto;min-height:62px;padding:10px 16px;line-height:1.2}
#app .r-op.on{transition:none}

/* Pantalla de apoyo: números grandes que llaman al tocarlos (tel:). */
.r-ayuda{margin:24px 0 0;font-size:16px;font-weight:700;color:var(--tinta)}
#app .r-tel{display:flex;align-items:center;gap:16px;min-height:44px;margin-top:12px;padding:14px 18px;border-radius:18px;border:1px solid var(--linea-campo);background:var(--lila);color:var(--tinta);text-decoration:none;transition:transform .12s ease-out,border-color .15s}
.r-tel b{flex:none;min-width:2.6ch;font:800 40px/1 Montserrat,sans-serif;letter-spacing:-.02em;color:var(--marino);font-variant-numeric:tabular-nums}
.r-tel span{font-size:15px;line-height:1.35;color:var(--suave)}
.r-tel strong{display:block;font:800 17px/1.25 "Nunito Sans",sans-serif;color:var(--marino)}
.r-tel:active{transform:scale(.98)}
@media (hover:hover){.r-tel:hover{border-color:var(--acento)}}

/* r6 (y «No acepto»): la misma ayuda, discreta, al pie. */
.r-pie{margin:20px 0 0;text-align:center;font-size:15px;line-height:1.4;color:var(--suave)}
.r-pie a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 8px;font-weight:700;color:var(--marino)}
.r-pie>span{white-space:nowrap} /* si no cabe en una línea, los dos números bajan juntos */
#app[data-p="no"] .r-pie{text-align:left}
/* r6: el agradecimiento se lee bien debajo del número grande. */
#app[data-p="r6"] .b-sub{color:var(--tinta);font-size:18px}

/* Número de r6: ancho fijo por cifra para que no baile al rodar. */
.r-total{font-variant-numeric:tabular-nums}

/* ── Computadora: página web, no una pantalla de celular centrada ──
   John (6 nov 2026): el paciente puede usar computadora y debe verla como sitio web. Debajo de 900 px queda el diseño de celular. */
.r-web{display:none}
@media (min-width:900px){
  body{display:flex;flex-direction:column;align-items:center;padding-bottom:40px;box-sizing:border-box}
  .r-web{display:flex;align-items:center;gap:18px;width:min(860px,calc(100% - 64px));margin-top:28px;color:var(--suave);font:700 17px/1 "Nunito Sans",sans-serif}
  .r-web .b-lg{width:120px;height:54px}
  .r-web span:last-child{padding-left:18px;border-left:1px solid var(--linea-campo)}
  body:has(#app[data-p="r1"]) .r-web{display:none}

  /* La tarjeta mide lo que su contenido y queda centrada en el alto que sobra. */
  #app.b-ph{width:min(860px,calc(100% - 64px));min-height:0;margin:auto 0 0;padding:48px 60px 52px;border-radius:24px;font-size:16px}
  body > #app.b-ph{margin-top:auto;margin-bottom:auto}
  /* En celular los títulos se empujan con margin-top:auto; aquí llevan un espacio fijo. */
  #app.b-ph > :is(.b-h1,.b-q){margin-top:24px!important}
  #app .b-h1{font-size:40px}
  #app .b-sub{font-size:18px;max-width:62ch}
  #app .b-q{font-size:28px;line-height:1.3;margin-bottom:28px;max-width:40ch}
  #app .b-dots{margin-top:40px}
  /* Botones de acción con su ancho, alineados a la izquierda, como en una página web. */
  #app :is(button,a):is(.b-cta,.b-ghost):not(.r-op){width:auto;min-width:280px;padding:0 40px;align-self:flex-start}
  #app .b-cta{margin-top:32px!important}
  #app[data-p="no"] .b-ghost{margin-top:32px!important}

  /* r1: entrada angosta, como la de la psicóloga. */
  #app[data-p="r1"]{width:min(480px,calc(100% - 64px));padding:40px 44px 44px}
  #app[data-p="r1"] :is(button,a).b-cta{width:100%;align-self:stretch}

  /* r4: las cuatro respuestas en 2 × 2. */
  #app[data-p="r4"]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px;align-content:start}
  #app[data-p="r4"] > :not(.r-op){grid-column:1/-1}
  #app[data-p="r4"] > .r-enc{margin-top:28px;font-size:17px;max-width:62ch}
  #app[data-p="r4"] > .b-q{margin-top:8px!important}
  #app[data-p="r4"] > .r-enc[hidden] + .b-q{margin-top:28px!important}

  /* Apoyo: los números no se estiran a todo el ancho. */
  #app[data-p="apoyo"] .r-ayuda{font-size:18px}
  #app[data-p="apoyo"] .r-tel{max-width:560px}

  /* r6: cierre centrado. */
  #app[data-p="r6"]{align-items:center;text-align:center}
  #app[data-p="r6"] .b-done{margin:8px 0 0}
  #app[data-p="r6"] .b-big{font-size:72px}
  #app[data-p="r6"] .r-pie{margin-top:28px}
  #app[data-p="r6"] :is(button,a).b-ghost{align-self:center;margin-top:20px}
}