/*
 * house-acceso.css: acceso en dos paneles (marca con hero + formulario).
 *
 * Solo el reparto y el teletipo. El hero está en house-hero.css; el
 * formulario, los botones, el offcanvas y el separador son Tabler nativo.
 */

.house-acceso {
  min-height: 100vh;
  min-height: 100dvh; /* en móvil, descuenta la barra del navegador */
  display: flex;
}

.house-acceso__panel {
  flex: 0 0 var(--house-acceso-panel);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--house-aire-ancho);
  background: var(--tblr-bg-surface);
}

.house-acceso__interior {
  width: 100%;
  max-width: var(--house-acceso-interior);
}

.house-acceso__logo {
  display: block;
  height: var(--house-logo-alto);
  width: auto;
  margin-bottom: var(--house-aire-ancho);
}

/* Sin logo no se pinta uno inventado: se dice que falta, en su mismo hueco. */
.house-acceso__logo-vacio {
  display: inline-flex;
  align-items: center;
  height: var(--house-logo-alto);
  margin-bottom: var(--house-aire-ancho);
  padding: 0 var(--tblr-spacer-2);
  border: var(--tblr-border-width) dashed var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-sm);
  font-size: var(--tblr-font-size-h5);
  color: var(--tblr-secondary);
}

/* Teletipo sobre el hero: su color es el acento de esa hora (particulas.js),
   no un cian fijo que sobre el naranja del atardecer cantaba. */
.house-acceso__teletipo {
  display: inline-flex;
  align-items: center;
  gap: var(--tblr-spacer-2);
  min-height: 2.25rem;
  margin-top: var(--house-aire-ancho);
  padding: var(--tblr-spacer-2) .875rem;
  border: var(--tblr-border-width) solid var(--house-borde-oscuro);
  border-radius: var(--house-radio-pildora);
  background: var(--house-poso);
  font-family: var(--tblr-font-monospace);
  font-size: var(--tblr-body-font-size);
  color: var(--house-acento-oscuro);
}

.house-acceso__teletipo::before {
  content: "\203A";
  opacity: .6;
}

.house-acceso__cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: currentColor;
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: house-parpadeo 1s step-end infinite;
}

@keyframes house-parpadeo { 50% { opacity: 0; } }

/* Botón flotante de configuración de la demo (?panel=no lo oculta). */
.house-acceso__ajustes {
  position: fixed;
  right: var(--house-aire);
  bottom: var(--house-aire);
  z-index: 1030;
}

/* lg de Tabler */
@media (max-width: 991.98px) {
  .house-acceso { flex-direction: column; }
  .house-acceso__panel { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .house-acceso__cursor { animation: none; }
}