/* Ajustes del ingreso con la apariencia de la bienvenida Hermes.
   Solo apariencia: se apoya en la estructura existente (body.bienvenida, .card, marca y ojo).
   Requiere tipografia-hermes.css, tarjeta-hermes.css y fondo-dinamico.css. */

body.bienvenida{background:transparent!important;color:var(--bv-text);}

/* El ingreso es siempre oscuro: el boton de tema no se muestra (el tema interno de la app no se toca). */
.bienvenida #btn-tema{display:none;}

/* Marca cuadrada. */
.bienvenida .card #acceso-marca,.bienvenida .card #app-marca{
  background:var(--bv-paper);color:var(--bv-primary);border-radius:var(--bv-radius);
  font-family:var(--bv-font-compressed);font-weight:500;font-size:22px;
}

/* Contrasena con el ojo: el margen que pone el input Hermes desalinea el boton absoluto. */
.bienvenida .card #acceso-clave{margin:0;padding-right:48px;}
.bienvenida .card .relative{margin-bottom:16px;}
.bienvenida .card #btn-ojo{color:var(--bv-text-soft);}
.bienvenida .card #btn-ojo:hover{color:var(--bv-text);}

/* Aviso de error, legible sobre el azul oscuro. */
.bienvenida .card #aviso{color:#ffc2c2;font-size:12px;margin:0 0 14px;}
.bienvenida .card [hidden]{display:none;}

/* «Entrando…» */
#btn-entrar:disabled{opacity:.6;cursor:not-allowed;}

/* Foco de teclado visible. */
.bienvenida .card :focus-visible{outline:2px solid var(--bv-paper);outline-offset:2px;}

/* Texto de relleno y autocompletado del navegador sobre el campo oscuro. */
.bienvenida .card input::placeholder{color:rgba(242,242,255,.45);}
.bienvenida .card input:-webkit-autofill,
.bienvenida .card input:-webkit-autofill:hover,
.bienvenida .card input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--bv-text);
  caret-color:var(--bv-text);
  box-shadow:0 0 0 1000px rgba(0,0,40,.55) inset;
}

/* Enlace de terminos legible. */
.bienvenida .card a{color:var(--bv-text);text-decoration:underline;text-underline-offset:2px;}

/* Si fondo-dinamico.js no carga, la tarjeta aparece igual. */
@keyframes bv-mostrar{to{opacity:1;transform:none}}
.bienvenida .card{animation:bv-mostrar .6s ease 4s forwards;}

/* La tarjeta puede ser más angosta que su contenedor (max-w-sm = 384 px): se centra. */
.bienvenida .card{margin-left:auto;margin-right:auto;}

/* ===== Tamaño de la tarjeta según la pantalla (lote LANDING2): escritorio >=1920 queda igual (384 px) ===== */
@media (max-width:1919px){
  .bienvenida .card{width:min(340px,92vw);padding:22px 22px 20px;}
  .bienvenida .card h1,.bienvenida .card h2{font-size:40px;margin:16px 0 14px;}
}
@media (max-width:1365px){
  .bienvenida .card{width:min(320px,92vw);padding:20px 20px 18px;}
  .bienvenida .card h1,.bienvenida .card h2{font-size:36px;margin:14px 0 12px;}
  .bienvenida .card p,.bienvenida .card small{margin-top:10px;}
}
@media (max-width:820px){
  .bienvenida .card{width:min(300px,92vw);}
}
/* En vertical las figuras quedan abajo (en «manos», arriba): la tarjeta sube (o baja en «manos») para no taparlas. */
@media (orientation:portrait){
  .bienvenida main{align-items:flex-start;padding-top:7vh;}
  .bienvenida[data-fondo="manos"] main{align-items:flex-end;padding-top:2rem;padding-bottom:7vh;}
}

/* En horizontal por debajo de 1920 la figura llega cerca del centro: la tarjeta se va al lado contrario de la figura (lote LANDING3). */
@media (orientation:landscape) and (max-width:1919px){
  .bienvenida[data-lado="izq"] main{justify-content:flex-end;padding-right:5vw;}
  .bienvenida[data-lado="der"] main{justify-content:flex-start;padding-left:5vw;}
}
@media (orientation:landscape) and (max-width:1365px){
  .bienvenida[data-lado="izq"] main{padding-right:9vw;}
  .bienvenida[data-lado="der"] main{padding-left:9vw;}
}

/* ===== Tarjetas de aplicaciones del administrador (lote TARJETAS1) =====
   #panel-apps es la MISMA .card del ingreso (hereda ancho, padding y posición); solo se le añaden las filas. */
#panel-apps[hidden]{display:none;}
#panel-apps .app-fila{
  display:block;border:1px solid rgba(242,242,255,.22);background:rgba(0,0,40,.55);
  border-radius:var(--bv-radius);padding:14px;margin:0 0 10px;text-decoration:none;
}
#panel-apps a.app-fila{color:var(--bv-text);text-decoration:none;}
#panel-apps a.app-fila:hover,#panel-apps a.app-fila:focus-visible{border-color:var(--bv-paper);}
#panel-apps .app-nombre{
  display:block;font-family:var(--bv-font-display);font-weight:300;font-size:22px;line-height:1.1;
  letter-spacing:var(--bv-h1-ls);color:var(--bv-text);
}
#panel-apps .app-tag{
  display:block;font-family:var(--bv-font-mono);font-size:11px;line-height:1.4;
  text-transform:uppercase;color:var(--bv-text-soft);margin-top:6px;
}
#panel-apps .app-prox{opacity:.55;cursor:default;}
#panel-apps #app-salir{
  background:transparent;border:0;padding:4px 0;cursor:pointer;
  font-family:var(--bv-font-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--bv-text-soft);text-decoration:underline;text-underline-offset:2px;
}
#panel-apps #app-salir:hover{color:var(--bv-text);}
@media (max-width:1365px){
  #panel-apps .app-nombre{font-size:20px;}
}