/* =============================================================
   Grupo Bande · Centro de sistemas
   La PUERTA (lib/puerta.php). Hoja aparte: solo la carga la puerta,
   asi el indice no paga este CSS en cada visita.

   La idea. El portal ES un indice numerado de sistemas, asi que la
   pantalla de entrada no puede ser un formulario centrado en el
   vacio: tiene que ser ESE indice, cerrado. A la izquierda la frase
   y la accion; a la derecha las filas del indice con los nombres
   tapados y un candado. Se ve exactamente lo que hay detras de la
   puerta sin decir una palabra de lo que es.

   Las filas tapadas son un numero FIJO y decorativo: publicar
   cuantos sistemas hay ya seria informacion. Y no llevan animacion
   de carga a proposito, para que no se lean como un "cargando".
   ============================================================= */

.gate {
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(34px, 5vw, 72px);
  align-content: center;
  align-items: center;
  /* La puerta si se centra en el alto: es una pantalla de una sola
     idea, y arrimada arriba quedaba flotando en el vacio. */
  flex: 1;
  min-height: 0;
}

.gate-say { min-width: 0; }

/* El titular puede respirar mas que en la portada: aqui es lo unico
   que compite por la atencion. */
.gate-say h1 { max-width: 15ch; }
.gate-say p { max-width: 44ch; }

/* ── La accion: navy macizo ──────────────────────────────────
   Todas las filas del indice son claras y se rellenan de navy al
   enfocar. Este boton NACE navy: es el inverso de todo lo demas en
   pantalla, y por eso se lee como LA accion sin tener que ser mas
   grande. Al enfocar, el barrido de la casa va al reves (entra el
   papel): mismo gesto, sentido contrario. */
.gate-btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center; gap: 16px;
  margin: 32px 0 0;
  /* Tope de ancho: en una sola columna (tablet) el boton se estiraba a 800px
     y dejaba de leerse como un boton para parecer una banda, con la flecha
     perdida en la otra punta. */
  max-width: 30rem;
  padding: 17px 19px;
  background: var(--invert-bg);
  border: 1.5px solid var(--invert-bg);
  border-radius: 16px;
  text-decoration: none;
  color: var(--invert-fg);
  transition: transform .32s cubic-bezier(.2,.7,.3,1),
              color .3s ease, box-shadow .32s ease;
}
.gate-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--invert-fg);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .46s cubic-bezier(.19,1,.22,1);
}
.gate-btn-logo {
  width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  transition: background .3s ease, border-color .3s ease, transform .32s cubic-bezier(.2,.7,.3,1);
}
.gate-btn-logo svg { width: 21px; height: 21px; }
.gate-btn-txt { min-width: 0; }
.gate-btn-txt strong {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.06rem, 1.5vw, 1.26rem);
  letter-spacing: -.018em; line-height: 1.15;
  /* Sin esto "Entrar con Microsoft" se partia en tres lineas dentro
     de una columna angosta: era el bug de la primera version. */
  white-space: nowrap;
}
.gate-btn-txt small {
  display: block; margin-top: 3px;
  font-size: 12.5px; font-weight: 500; color: var(--invert-soft);
  transition: color .3s ease;
}
.gate-btn-go {
  flex: none; width: 38px; height: 38px; border-radius: 999px;
  display: grid; place-items: center;
  border: 1.5px solid var(--invert-fg); color: var(--invert-fg);
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .32s cubic-bezier(.2,.7,.3,1);
}
.gate-btn-go svg { width: 17px; height: 17px; }

.gate-btn:hover, .gate-btn:focus-visible {
  transform: translateX(4px);
  color: var(--invert-bg);
  box-shadow: var(--shadow-row);
  outline: none;
}
.gate-btn:hover::before, .gate-btn:focus-visible::before { transform: scaleX(1); }
.gate-btn:hover .gate-btn-txt small,
.gate-btn:focus-visible .gate-btn-txt small { color: var(--ink-soft); }
.gate-btn:hover .gate-btn-logo, .gate-btn:focus-visible .gate-btn-logo {
  background: rgba(13,19,31,.06); border-color: var(--line-strong); transform: scale(1.04);
}
.gate-btn:hover .gate-btn-go, .gate-btn:focus-visible .gate-btn-go {
  background: var(--invert-bg); color: var(--invert-fg);
  border-color: var(--invert-bg); transform: translateX(3px);
}

/* Sin SSO configurado no hay accion: la pieza se apaga y no finge. */
.gate-btn--off {
  background: var(--card); border-color: var(--line-strong); color: var(--ink-faint);
  border-style: dashed; cursor: not-allowed;
}
.gate-btn--off .gate-btn-logo { background: var(--glyph-bg); border-color: var(--line); }
.gate-btn--off .gate-btn-txt small { color: var(--ink-faint); }

/* ── El indice tapado: la pieza firma de esta pantalla ─────── */
.gate-locked { min-width: 0; }
.gate-locked-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1.5px solid var(--ink);
}
.gate-locked-head h2 {
  margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.02rem; letter-spacing: -.01em;
}
.gate-lock {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint); white-space: nowrap;
}
.gate-lock svg { width: 13px; height: 13px; }

.gate-rows { display: grid; gap: 9px; }

/* Misma silueta que una fila real (mismo alto, mismo radio) pero de
   trazo discontinuo: se reconoce el indice y se ve que esta cerrado. */
.gate-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center; gap: 16px;
  padding: 16px 17px;
  background: var(--card);
  border: 1.5px dashed var(--line-strong);
  border-radius: 16px;
}
.gate-row-idx {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint); text-align: right;
}

/* La barra tapa el nombre. Ancho variable por fila: un nombre tapado
   no mide siempre lo mismo, y todas iguales se leerian como un
   esqueleto de carga. El rayado diagonal remata la diferencia. */
.gate-bar {
  height: 11px; width: var(--w, 60%);
  border-radius: 999px;
  background: repeating-linear-gradient(
    -45deg,
    var(--line-strong) 0 2px,
    transparent 2px 6px
  );
}

/* ── Aviso de rechazo ────────────────────────────────────────
   La unica pieza que grita: si Microsoft o el dominio rechazaron a
   alguien, tiene que quedar claro antes de que vuelva a intentar. */
.gate-alert {
  margin: 22px 0 0;
  padding: 12px 15px;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--focus);
  border-radius: 0 10px 10px 0;
  background: var(--card);
  font-size: 13.5px; line-height: 1.5; color: var(--ink);
}

@media (max-width: 900px) {
  .gate { grid-template-columns: minmax(0, 1fr); align-content: start; }
  /* En una columna el indice tapado va DEBAJO de la accion: primero
     se entra, despues se entiende que hay detras. */
  .gate-say { order: 1; }
  .gate-locked { order: 2; }
  .gate-rows { gap: 7px; }
  .gate-row { padding: 13px 15px; }
}

@media (max-width: 560px) {
  .gate-btn { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 13px; padding: 14px 15px; }
  .gate-btn-logo { width: 38px; height: 38px; border-radius: 11px; }
  .gate-btn-txt strong { font-size: 1.02rem; }
  /* El titular de la accion no se parte nunca; si no cabe, se recorta
     el subtitulo, que es lo prescindible. */
  .gate-btn-txt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}