/* Pantallas de estado (enlace invalido, sesion caida, recurso inexistente).
   ==========================================================================================
   Fuente unica del estilo de `shared/ui/BrandedErrorScreen.jsx`, que montan los cuatro
   modulos. Va DESPUES de `tokens.css`, cuyas variables consume (CLAUDE.md seccion 3.7).
   ========================================================================================== */

.branded-state {
  max-width: 34em;
  margin: 0 auto;
  padding: 4.5rem 1.5rem 5rem;
  text-align: center;
  position: relative;
  color: var(--charcoal);
  /* La pantalla ocupa el alto libre y centra su contenido, en vez de amontonarlo arriba y
     dejar un hueco muerto debajo. */
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 60vh;
}
/* Variante para cuando la pantalla de estado NO es lo unico que hay: debajo cuelga una accion
   real -- hoy, la puerta de entrada del Connect. Sin esto, el `min-height: 60vh` y el padding
   pensados para ocupar la pantalla entera dejan ~240px de vacio entre el mensaje y lo que sigue,
   y el paciente ni siquiera ve que hay una salida sin desplazarse.
   
   VA DESPUES de `.branded-state` a proposito: misma especificidad (una clase), asi que gana la
   que se declara la ultima. Puesta antes, no anulaba nada -- y no lo hacia en silencio, que es
   el modo en que fallan estas cosas. */
.branded-state--compact {
  min-height: 0;
  flex: none;
  padding-top: 2.5rem;
  padding-bottom: 1.5rem;
}

/* Marca de agua GRANDE y muy tenue, detras del texto -- el legacy usa el isologo asi, a escala
   de pagina (Nexus/portal/index.html:923). En su primera version era un bloque de 210px con
   `margin-bottom: -105px`, que quedaba como un adorno pequeño con el titulo cortandolo por la
   mitad. Posicionada en absoluto: al salir del flujo deja de empujar el texto y de decidir la
   altura de la seccion.
   `pointer-events: none` para que el boton de contacto siga siendo pulsable donde se solapan. */
.state-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, 78vw);
  height: auto;
  opacity: 0.09;
  pointer-events: none;
  user-select: none;
}
.state-body { position: relative; z-index: 1; }
.state-title {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--deep-navy);
  margin: 0 0 0.85rem;
}
.state-text {
  font-size: 0.98rem;
  line-height: 1.7;
  /* Tinta, no acento: `--muted` como color de LETRA da 2.38:1 (seccion 3.6). */
  color: var(--ink-muted);
  margin: 0 auto 1.25rem;
}
.state-hint {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  opacity: 0.8;
  margin: 0 auto 1.25rem;
}
.state-action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  background: var(--deep-navy);
  color: #fff;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: opacity 0.2s ease;
}
.state-action:hover { opacity: 0.88; }
/* `outline`, nunca `box-shadow`: un ancestro con `overflow: hidden` lo recorta (seccion 3.6). */
.state-action:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 3px; }

@media (max-width: 600px) {
  .branded-state { padding: 3rem 1.25rem 3.5rem; min-height: 55vh; }
  /* Y la variante otra vez aqui: esta regla va DESPUES en el documento, asi que sin esto el
     `min-height` volveria a ganar en movil, justo donde el hueco molesta mas. */
  .branded-state--compact { min-height: 0; padding: 2rem 1.25rem 1.25rem; }
  .state-title { font-size: 1.45rem; }
  .state-action { width: 100%; justify-content: center; min-height: 46px; }
}