/* --- 👥 Cuentas: inicio de sesión, lo que cada rol ve, Usuarios y Mis claves --- */

/* Lo que es solo del administrador (el servidor lo bloquea igual; aquí solo se esconde) */
body:not(.p-admin) [data-permiso="admin"],
body:not(.p-admin) [data-grupo="administrar"], body:not(.p-admin) .nav a[data-vista="pedir"],
body:not(.p-admin) .nav a[data-vista="descargas"], body:not(.p-admin) .nav a[data-vista="conexion"],
body:not(.p-admin) .nav a[data-vista="movil"], body:not(.p-admin) .nav a[data-vista="ia"],
body:not(.p-admin) #estado-ia, body:not(.p-admin) #libro-carpeta, body:not(.p-admin) #libro-completar,
body:not(.p-admin) [data-cap="editar"], body:not(.p-admin) [data-cap="redetectar"], body:not(.p-admin) [data-cap="servidor"],
body:not(.p-admin) [data-cat-accion],
body:not(.p-admin) #cat-refrescar, body:not(.p-admin) #cat-faltantes, body:not(.p-admin) .fila-mas[href="#/pedir"],
body:not(.p-admin) .fila-mas[href="#/descargas"], body:not(.p-admin) .grupo-mas.solo-admin,
body:not(.p-admin) #ini-categorizando, body:not(.p-admin) [data-descargar-nuevo],
body:not(.p-admin) [data-ver-socio], body:not(.p-admin) [data-descargar-todos-nuevos], body:not(.p-admin) #modal-descargar, body:not(.p-admin) [data-act="descargar"] { display: none !important; }

/* Lo que gasta IA: un beta tester no lo ve */
body:not(.p-ia) [data-permiso="ia"], body:not(.p-ia) [data-accion="tutor"], body:not(.p-ia) [data-pestana="tutor"],
body:not(.p-ia) #panel-tutor, body:not(.p-ia) [data-aprender], body:not(.p-ia) [data-acc="revisar"],
body:not(.p-ia) [data-mi-resumen], body:not(.p-ia) [data-mentor] { display: none !important; }
body:not(.p-mis_claves) [data-permiso="mis_claves"] { display: none !important; }

/* Quién eres (abajo en el menú lateral) */
.cuenta-yo { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--suave); }
.cuenta-yo b { color: var(--texto); }
.cuenta-yo .rol { font-size: 11.5px; padding: 1px 7px; border-radius: 99px; background: var(--panel-2); border: 1px solid var(--borde); }
.cuenta-yo .salir { margin-left: auto; font-size: 12.5px; color: var(--tenue); background: none; border: 0; padding: 0; text-decoration: underline; }

/* Pantalla de inicio de sesión */
.login-fondo { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(circle at 50% 20%, var(--panel-2) 0, var(--fondo) 70%); }
.login h1 { font-family: var(--serif); }
.login { width: min(360px, 100%); display: grid; gap: 14px; text-align: center; }
.login img { width: 132px; height: auto; margin: 0 auto 4px; }
.login .firma-dgc { margin-top: -8px; }
.login h1 { margin: 0; font-size: 22px; }
.login p { margin: 0; color: var(--suave); font-size: 14px; line-height: 1.45; }
.login .campo { width: 100%; font-size: 17px; padding: 12px 14px; text-align: center; }
.login .btn { padding: 12px; font-size: 16px; justify-content: center; text-align: center; }
.login .error { color: var(--error); font-size: 14px; min-height: 1.2em; }
.login .error.bien { color: var(--acento); }
.login .btn.enlace-suave { background: none; border: none; box-shadow: none; padding: 4px; font-size: 14px; color: var(--acento); }

/* Etiquetas GRATIS / PAGO */
.etq { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; padding: 2px 8px; border-radius: 6px; vertical-align: middle; }
.etq.gratis { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.etq.barato { background: color-mix(in srgb, var(--aviso) 18%, transparent); color: var(--aviso-texto); }
.etq.pago { background: color-mix(in srgb, var(--error) 16%, transparent); color: var(--error-texto); }
.etq.rol-admin { background: var(--acento-fondo); color: var(--acento-2); }
.etq.rol-miembro { background: color-mix(in srgb, var(--info) 16%, transparent); color: var(--info); }
.etq.rol-beta { background: var(--tinte-2); color: var(--suave); }

/* Tarjetas de Usuarios y de Mis claves */
.tarjetas-cuenta { display: grid; gap: 14px; }
.tarjeta-cuenta { padding: 18px 20px; }
.tarjeta-cuenta h3 { margin: 0 0 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 17px; }
.tarjeta-cuenta .pasos { margin: 8px 0 12px; padding-left: 20px; color: var(--suave); line-height: 1.55; font-size: 14px; }
.tarjeta-cuenta .fila { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.tarjeta-cuenta .fila .campo { flex: 1; min-width: 160px; }
.tarjeta-cuenta.suspendido { opacity: .6; }
.barra-tope { height: 6px; border-radius: 99px; background: var(--panel-2); overflow: hidden; margin-top: 6px; }
.barra-tope > i { display: block; height: 100%; background: var(--ok); }
.barra-tope > i.alerta { background: var(--aviso); }
.barra-tope > i.mal { background: var(--error); }
.form-nuevo { display: grid; grid-template-columns: 1fr 140px 170px auto; gap: 10px; align-items: center; }
@media (max-width: 760px) { .form-nuevo { grid-template-columns: 1fr 1fr; } .form-nuevo .btn { grid-column: 1 / -1; } }

/* Invitaciones: crear tu cuenta (la persona) y el asistente «Invitar a alguien» (administrador) */
.login .etiqueta-campo { text-align: left; font-size: 13px; color: var(--suave); margin: 2px 0 -8px; }
.login .nota { font-size: 12.5px; color: var(--tenue); margin-top: 0; }
.asistente-invitar .etiqueta-campo { display: block; font-size: 13px; color: var(--suave); margin: 14px 0 6px; }
.asistente-invitar #inv-para { width: 100%; }
.opciones-rol { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opcion-rol { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--borde); border-radius: 12px; background: var(--panel); }
.opcion-rol input { grid-row: span 2; accent-color: var(--acento); }
.opcion-rol span { font-size: 13px; color: var(--suave); }
.opcion-rol:has(input:checked) { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento-fondo); }
.asistente-invitar .interruptor { margin-top: 12px; }
.mensaje-invitacion { width: 100%; font-size: 14px; line-height: 1.5; resize: vertical; }
#u-invitaciones .item .etq { margin-left: 4px; }
@media (max-width: 760px) { .opciones-rol { grid-template-columns: 1fr; } }
.reglas-sin-red .campo { width: 76px; flex: none; }