/* ENTRAR DESDE EL PORTAL: el formulario, el menú de sociedades y los cristales apagados.
   Los tamaños van en rem como el resto del portal (1 rem = 10 px de la imagen). */

/* el velo y la tarjeta de cristal del formulario */
#velo-entrar {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(20, 22, 58, .28); backdrop-filter: blur(0.4rem);
  display: flex; align-items: center; justify-content: center;
}
#velo-entrar[hidden] { display: none; }
.tarjeta-entrar {
  width: 42rem; box-sizing: border-box; padding: 3.2rem 3.6rem 3rem;
  background: rgba(255, 255, 255, .86); border: 0.1rem solid rgba(255, 255, 255, .95);
  border-radius: 2rem; box-shadow: 0 2rem 6rem rgba(20, 22, 58, .25); backdrop-filter: blur(1.2rem);
  position: relative;
}
.tarjeta-entrar h2 { margin: 0 0 0.6rem; font-size: 2.6rem; font-weight: 800; letter-spacing: -0.08rem; color: var(--marino); }
.tarjeta-entrar p { margin: 0 0 2.2rem; font-size: 1.5rem; color: var(--gris); }
.tarjeta-entrar label { display: block; font-size: 1.3rem; color: var(--gris-claro); margin: 1.2rem 0 0.4rem; }
.tarjeta-entrar input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 1.7rem; color: var(--texto);
  height: 4.6rem; padding: 0 1.4rem; border: 0.1rem solid #d9dbe8; border-radius: 0.8rem; background: #fff;
}
.tarjeta-entrar input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 0.3rem rgba(15, 16, 232, .15); }
.tarjeta-entrar .acciones { display: flex; align-items: center; justify-content: space-between; margin-top: 2.4rem; gap: 1rem; }
/* el boton principal de CADA tarjeta (Entrar, Activar, Guardar, Quitar, «Activar la aplicacion del movil»): todos los de .acciones, un solo estilo (crm#117) */
.tarjeta-entrar .acciones button {
  font: inherit; font-size: 1.7rem; font-weight: 600; color: #fff; background: var(--azul);
  border: 0; border-radius: 2.4rem; height: 4.8rem; padding: 0 2.8rem; cursor: pointer;
  box-shadow: 0 0.8rem 2rem rgba(15, 16, 232, .22);
}
.tarjeta-entrar .acciones button:disabled { opacity: .6; cursor: progress; }
.tarjeta-entrar .cerrar {
  position: absolute; top: 1.4rem; right: 1.4rem; width: 3.2rem; height: 3.2rem; border-radius: 50%;
  border: 0; background: rgba(20, 22, 58, .1); color: var(--marino); font-size: 1.8rem; cursor: pointer;
}
#aviso-entrar { font-size: 1.4rem; color: #b3261e; min-height: 1.8rem; }

/* desde el icono del cliente (#entrar&icono): sólo usuario y contraseña; la cabecera y los cristales,
   al entrar (Javier, 25/10/2026) */
body.desde-icono .cabecera, body.desde-icono .paneles, body.desde-icono .marcos, body.desde-icono .nota { visibility: hidden; }
body.desde-icono #cerrar-entrar, body.desde-icono .tarjeta-entrar .mantener, body.desde-icono #ayuda-mantener { display: none; }

/* el menú de sociedades (se pulsa en el grupo o en el usuario) */
#menu-sociedades, #menu-usuario {
  position: absolute; left: 107.5rem; top: 6.4rem; z-index: 15; min-width: 24rem;
  background: rgba(255, 255, 255, .94); border: 0.1rem solid rgba(255, 255, 255, .95);
  border-radius: 1.2rem; box-shadow: 0 1rem 3rem rgba(40, 50, 120, .18); padding: 0.6rem;
  display: flex; flex-direction: column;
}
#menu-sociedades[hidden], #menu-usuario[hidden] { display: none; }
#menu-sociedades button, #menu-usuario button {
  font: inherit; font-size: 1.5rem; color: var(--texto); text-align: left; cursor: pointer;
  background: none; border: 0; border-radius: 0.8rem; padding: 0.9rem 1.2rem;
}
#menu-sociedades button:hover, #menu-usuario button:hover { background: rgba(15, 16, 232, .06); }
#menu-sociedades .aviso-elegir { margin: 0; padding: 0.9rem 1.2rem; font-size: 1.4rem; font-weight: 700; color: var(--azul); border-bottom: 0.1rem solid #e2e8f0; }
#menu-sociedades button.activa { font-weight: 700; color: var(--azul); }
#menu-sociedades button.salir, #menu-usuario button.salir { border-top: 0.1rem solid #e2e8f0; margin-top: 0.4rem; border-radius: 0 0 0.8rem 0.8rem; color: var(--gris); }

/* los cristales apagados: se ven, no abren */
.panel.apagado { backdrop-filter: grayscale(.9) brightness(1.04); background: rgba(255, 255, 255, .16); cursor: default; }
.panel.apagado:hover { box-shadow: none; background: rgba(255, 255, 255, .16); }
.panel.apagado .rotulo { opacity: .45; }
/* crm#152: el cristal pintado es verde; lo no contratado se apaga en gris, y su dibujo tambien */
.panel.apagado .dibujo { filter: grayscale(1) opacity(.55); }

/* crm#53: el código por correo y el segundo factor */
.tarjeta-entrar .enlace {
  display: block; margin: 1.4rem 0 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 1.4rem; color: var(--azul); text-decoration: underline;
}
.tarjeta-entrar .enlace[hidden] { display: none; }
#aviso-entrar.bien, #aviso-segundo-factor.bien { color: #1e7b34; }
#velo-segundo-factor {
  position: fixed; inset: 0; z-index: 21;
  background: rgba(20, 22, 58, .28); backdrop-filter: blur(0.4rem);
  display: flex; align-items: center; justify-content: center;
}
#velo-segundo-factor[hidden] { display: none; }
.tarjeta-segundo-factor { width: 46rem; max-height: 92vh; overflow-y: auto; }
.tarjeta-segundo-factor p { margin: 0 0 1.2rem; }
#sf-qr { display: block; margin: 0 auto 1.2rem; width: 18rem; height: 18rem; background: #fff; border-radius: 0.8rem; }
.sf-clave code { font-size: 1.4rem; letter-spacing: 0.1rem; word-break: break-all; color: var(--marino); }
.tarjeta-segundo-factor .sf-guardar { font-size: 1.4rem; color: var(--texto); font-weight: 600; }
.ayuda-sf { display: inline-block; width: 2rem; height: 2rem; margin-left: 0.4rem; padding: 0; border: 0.1rem solid var(--marino); border-radius: 50%; background: #fff; color: var(--marino); font: inherit; font-size: 1.3rem; font-weight: 700; line-height: 1.8rem; cursor: pointer; }
.sf-detalle { font-size: 1.25rem !important; color: var(--gris-claro) !important; }
.sf-detalle[hidden], #sf-guardar[hidden], #sf-codigos[hidden] { display: none; }
#sf-codigos { columns: 2; margin: 0 0 1.2rem; padding-left: 2.4rem; font-family: ui-monospace, Consolas, monospace; font-size: 1.5rem; color: var(--marino); }
#aviso-segundo-factor { font-size: 1.4rem; color: #b3261e; min-height: 1.8rem; }

/* crm#109: «Mi seguridad» (una linea por dato: nombre a la izquierda, valor a la derecha) */
#velo-seguridad {
  position: fixed; inset: 0; z-index: 21;
  background: rgba(20, 22, 58, .28); backdrop-filter: blur(0.4rem);
  display: flex; align-items: center; justify-content: center;
}
#velo-seguridad[hidden] { display: none; }
.tarjeta-seguridad { width: 46rem; max-height: 92vh; overflow-y: auto; }
.linea-seguridad { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; padding: 0.8rem 0; border-bottom: 0.1rem solid #e2e8f0; }
.linea-seguridad .nombre { font-size: 1.5rem; font-weight: 700; color: var(--marino); }
.linea-seguridad .valor { font-size: 1.5rem; color: var(--texto); }
.linea-seguridad .valor.activo { color: #1e7b34; font-weight: 700; }
.ayuda-seguridad { font-size: 1.25rem !important; color: var(--gris-claro) !important; margin: 0.8rem 0 1.2rem !important; }
#seg-sin[hidden], #seg-con[hidden] { display: none; }
.tarjeta-entrar .check.recordar { display: flex; align-items: center; gap: 0.6rem; margin: 0.8rem 0 0; font-size: 1.35rem; color: var(--texto); cursor: pointer; }
.tarjeta-entrar .check.recordar input { width: 1.6rem; height: 1.6rem; margin: 0; accent-color: var(--marino); }
/* crm#167: mantener la sesión (en el formulario) y los equipos con la sesión abierta (en Mi seguridad), como los dispositivos */
.tarjeta-entrar .check.mantener { display: flex; align-items: center; gap: 0.6rem; margin: 1rem 0 0; font-size: 1.35rem; color: var(--texto); cursor: pointer; }
.tarjeta-entrar .check.mantener input { width: 1.6rem; height: 1.6rem; margin: 0; accent-color: var(--marino); }
.tarjeta-entrar .ayuda-mantener { margin: 0.3rem 0 0 2.2rem; font-size: 1.2rem; color: var(--gris-claro); }
#seg-dispositivos, #seg-sesiones { list-style: none; margin: 0 0 0.4rem; padding: 0; }
#seg-sesiones li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; font-size: 1.35rem; color: var(--texto); border-bottom: 0.1rem dashed #e2e8f0; }
#seg-sesiones li .cuando { color: var(--gris-claro); font-size: 1.2rem; }
#seg-sesiones li.vacio { color: var(--gris-claro); border-bottom: 0; }
#seg-sesiones button { padding: 0.2rem 0.8rem; border: 0.1rem solid var(--marino); border-radius: 0.6rem; background: #fff; color: var(--marino); font: inherit; font-size: 1.25rem; cursor: pointer; }
#seg-dispositivos li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; font-size: 1.35rem; color: var(--texto); border-bottom: 0.1rem dashed #e2e8f0; }
#seg-dispositivos li .cuando { color: var(--gris-claro); font-size: 1.2rem; }
#seg-dispositivos li.vacio { color: var(--gris-claro); border-bottom: 0; }
#seg-dispositivos button { padding: 0.2rem 0.8rem; border: 0.1rem solid var(--marino); border-radius: 0.6rem; background: #fff; color: var(--marino); font: inherit; font-size: 1.25rem; cursor: pointer; }
#aviso-seguridad { font-size: 1.4rem; color: #b3261e; min-height: 1.8rem; }
#aviso-seguridad.bien { color: #1e7b34; }

/* crm#107: la pantalla de entrada (que ensena cada ventana), con checks por fila */
#velo-pantalla {
  position: fixed; inset: 0; z-index: 21;
  background: rgba(20, 22, 58, .28); backdrop-filter: blur(0.4rem);
  display: flex; align-items: center; justify-content: center;
}
#velo-pantalla[hidden] { display: none; }
.tarjeta-pantalla { width: 56rem; max-height: 92vh; overflow-y: auto; }
.fila-ventana { display: flex; align-items: center; gap: 1.4rem; padding: 0.8rem 0; border-bottom: 0.1rem solid #e2e8f0; }
.fila-ventana .nombre { flex: none; width: 9rem; font-size: 1.5rem; font-weight: 700; color: var(--marino); }
.fila-ventana .checks { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; }
.fila-ventana .check { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1.4rem; color: var(--texto); cursor: pointer; }
.fila-ventana .check input { width: 1.6rem; height: 1.6rem; margin: 0; accent-color: var(--marino); }
.ayuda-pantalla { font-size: 1.25rem !important; color: var(--gris-claro) !important; margin: 0.6rem 0 0 !important; }
#aviso-pantalla { font-size: 1.4rem; color: #b3261e; min-height: 1.8rem; }