/* --------------------------------------------------------------------------
   Auth central — la puerta común de Inbox y TeamSpace.

   No inventa una identidad nueva: toma la que los dos ya comparten. El azul y
   el naranja son los del logotipo de SmartCampus, y son los mismos que Inbox
   usa en el halo detrás de su login y TeamSpace en el suyo. Los roles se
   respetan como están hoy: el azul estructura y el naranja actúa, que es el
   botón que el equipo ya viene pulsando para entrar a TeamSpace.

   Una sola hoja para las tres pantallas (entrar, elegir sistema y administrar
   el segundo factor): son formularios cortos y separarlos sería más trabajo de
   mantener que de leer.
   -------------------------------------------------------------------------- */

:root{
  --marca-azul:    #3474B4;
  --marca-naranja: #F19434;

  --bg:        #F4F5F8;
  --superficie:#FFFFFF;
  --hundido:   #FAFAFC;
  --linea:     #E6E6EC;
  --linea-fuerte:#D9D9E1;
  --texto-1:   #1B1B1F;
  --texto-2:   #6B6B72;
  --texto-3:   #9A9AA2;
  --accent:      var(--marca-azul);
  --accent-suave:rgba(52,116,180,.13);
  --accion:      #F5921E;
  --accion-fin:  #E07D0A;
  --accion-sombra:rgba(241,148,52,.34);
  --error:     #C0392B;
  --error-suave:#FDECEA;
  --ok:        #1E7B4B;
  --sombra:    0 20px 44px -14px rgba(15,23,42,.16), 0 2px 8px rgba(15,23,42,.05);
  --radio:     16px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:        #121215;
    --superficie:#1C1C21;
    --hundido:   #222228;
    --linea:     #32323A;
    --linea-fuerte:#3D3D46;
    --texto-1:   #F0F0F3;
    --texto-2:   #A0A0A8;
    --texto-3:   #76767E;
    /* El azul de marca no tiene contraste suficiente sobre fondo oscuro:
       se aclara para el foco y los enlaces, sin cambiar de familia. */
    --accent:      #5E9BE0;
    --accent-suave:rgba(94,155,224,.18);
    --error:     #FF6B5A;
    --error-suave:#3A1D19;
    --ok:        #57C98A;
    --sombra:    0 20px 44px -14px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
  }
}

*{box-sizing:border-box;}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  position:relative;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--texto-1);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* Los dos halos de la casa, detrás de la tarjeta: el mismo recurso que ya
   usan los dos logins, para que entrar acá no se sienta un sitio ajeno. */
body::before,
body::after{
  content:"";
  position:fixed;
  width:460px;
  height:460px;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
}
body::before{
  background:radial-gradient(circle, var(--marca-naranja) 0%, transparent 70%);
  opacity:.17;
  top:-150px;
  left:calc(50% - 360px);
}
body::after{
  background:radial-gradient(circle, var(--marca-azul) 0%, transparent 70%);
  opacity:.19;
  bottom:-170px;
  right:calc(50% - 360px);
}
@media (prefers-color-scheme: dark){
  body::before{opacity:.13;}
  body::after{opacity:.15;}
}

/* Envuelve la tarjeta y lo que va debajo (el recordatorio de a qué sistemas
   abre esta puerta), para que el conjunto quede centrado como una sola pieza */
.pantalla{
  position:relative;
  z-index:1;
  width:100%;
  max-width:400px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.pantalla.ancha{max-width:520px;}
.pantalla.amplia{max-width:680px;}

.tarjeta{
  position:relative;
  z-index:1;
  width:100%;
  max-width:400px;
  background:var(--superficie);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  box-shadow:var(--sombra);
  padding:32px 30px;
  animation:subir .45s cubic-bezier(.16,1,.3,1);
  overflow:hidden;   /* recorta la cinta a las esquinas redondeadas */
}

/* Una línea con los dos colores de la casa: es el único sitio donde se tocan,
   y basta para que la tarjeta se lea como SmartCampus y no como un formulario
   cualquiera. */
.tarjeta::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg, var(--marca-naranja) 0%, var(--marca-azul) 100%);
}
.tarjeta.ancha{max-width:520px;}
/* La lista de cuentas: una línea por persona sin que el detalle se parta */
.tarjeta.amplia{max-width:680px;}

@keyframes subir{
  from{opacity:0;transform:translateY(10px);}
  to  {opacity:1;transform:translateY(0);}
}
@media (prefers-reduced-motion: reduce){
  .tarjeta{animation:none;}
}

/* --- Barra superior -------------------------------------------------------
   Reemplaza a los enlaces sueltos que había al pie de cada tarjeta: todo lo
   que es "mi cuenta" vive en un solo sitio, que es donde la gente lo busca. */
body.con-barra{
  display:block;
  padding:0 24px 48px;
}
body.con-barra .pantalla{margin:0 auto;}

.barra{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  max-width:1080px;
  margin:0 auto 40px;
  padding:14px 0;
}
.barra-marca{
  display:flex;
  align-items:center;
  gap:9px;
  text-decoration:none;
  color:var(--texto-1);
  font-weight:650;
  font-size:15px;
  letter-spacing:-.01em;
}
.barra-marca img{width:30px;height:30px;border-radius:8px;display:block;}

.barra-usuario{position:relative;}
.usuario-boton{
  display:flex;
  align-items:center;
  gap:9px;
  padding:5px 11px 5px 5px;
  border:1px solid transparent;
  border-radius:24px;
  background:transparent;
  color:var(--texto-1);
  font-size:14px;
  cursor:pointer;
  transition:background .15s, border-color .15s;
}
.usuario-boton:hover{background:var(--superficie);border-color:var(--linea);}
.usuario-nombre{font-weight:600;}
.usuario-flecha{color:var(--texto-3);flex-shrink:0;}

.avatar{
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--marca-azul);
  color:#fff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  flex-shrink:0;
}

.menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:250px;
  background:var(--superficie);
  border:1px solid var(--linea);
  border-radius:13px;
  box-shadow:var(--sombra);
  padding:6px;
  animation:menu-entra .13s ease-out;
}
@keyframes menu-entra{
  from{opacity:0;transform:translateY(-4px);}
  to{opacity:1;transform:translateY(0);}
}
@media (prefers-reduced-motion: reduce){
  .menu{animation:none;}
}
.menu-cabecera{padding:10px 12px 12px;border-bottom:1px solid var(--linea);margin-bottom:6px;}
.menu-nombre{font-weight:650;font-size:14px;}
.menu-email{font-size:12.5px;color:var(--texto-3);margin-top:1px;overflow-wrap:anywhere;}

.menu-item{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:9px 12px;
  border:0;
  border-radius:9px;
  background:none;
  color:var(--texto-1);
  font-size:14px;
  font-family:inherit;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
}
.menu-item svg{width:17px;height:17px;color:var(--texto-3);flex-shrink:0;}
.menu-item:hover{background:var(--hundido);}
.menu-item.activo{color:var(--accent);font-weight:600;}
.menu-item.activo svg{color:var(--accent);}
.menu-item.salir{
  color:var(--error);
  margin-top:6px;
  border-top:1px solid var(--linea);
  border-radius:0 0 9px 9px;
  padding-top:12px;
}
.menu-item.salir svg{color:var(--error);}
.menu-item.salir:hover{background:var(--error-suave);}

/* --- Reglas de la contraseña ----------------------------------------------
   Se ven desde el principio y se marcan al cumplirse: así se sabe qué hace
   falta antes de intentarlo, en vez de descubrirlo a base de rechazos. */
.reglas{
  list-style:none;
  margin:0 0 18px;
  padding:12px 14px;
  background:var(--hundido);
  border:1px solid var(--linea);
  border-radius:10px;
  display:grid;
  gap:7px;
}
.regla{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:13px;
  color:var(--texto-2);
  transition:color .15s;
}
.regla-marca{
  width:16px;
  height:16px;
  border-radius:50%;
  border:1.5px solid var(--linea-fuerte);
  flex-shrink:0;
  position:relative;
  transition:background .15s, border-color .15s;
}
.regla.cumplida{color:var(--ok);}
.regla.cumplida .regla-marca{background:var(--ok);border-color:var(--ok);}
/* El visto se dibuja con dos bordes girados: sin imagen ni fuente de iconos */
.regla.cumplida .regla-marca::after{
  content:"";
  position:absolute;
  left:5px;
  top:2px;
  width:4px;
  height:8px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

/* --- Marca ----------------------------------------------------------------
   Va FUERA de la tarjeta, como en el login de TeamSpace: la tarjeta es el
   formulario y la marca es de quién es la casa. */
.marca{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-bottom:26px;
}
.marca-caja{
  width:46px;
  height:46px;
  border-radius:13px;
  background:var(--superficie);
  display:grid;
  place-items:center;
  box-shadow:0 4px 16px -4px rgba(52,116,180,.35), 0 1px 3px rgba(15,23,42,.08);
  flex-shrink:0;
}
.marca-caja img{width:32px;height:32px;border-radius:8px;display:block;}
.marca-nombre{
  display:flex;
  flex-direction:column;
  line-height:1.2;
  text-align:left;
}
h1{font-size:18px;font-weight:700;letter-spacing:-.015em;margin:0;}
.marca-sub{
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--texto-3);
  margin-top:2px;
}

/* Título dentro de la tarjeta */
.titulo{
  font-size:21px;
  font-weight:700;
  letter-spacing:-.02em;
  text-align:center;
  margin:0 0 6px;
}
.sub{color:var(--texto-2);font-size:13.5px;text-align:center;margin:0 0 24px;}
.sub.izq{text-align:left;}

/* --- Campos --------------------------------------------------------------- */
label{display:block;font-size:12.5px;font-weight:600;color:var(--texto-2);margin-bottom:6px;}
.campo{margin-bottom:16px;}

/* El icono dentro del campo es el patrón que TeamSpace ya usa en su login */
.campo-caja{position:relative;display:flex;align-items:center;}
.campo-icono{
  position:absolute;
  left:11px;
  display:flex;
  color:var(--texto-3);
  pointer-events:none;
  transition:color .12s;
}
.campo-caja:focus-within .campo-icono{color:var(--accent);}

input[type=email],input[type=password],input[type=text]{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--linea-fuerte);
  border-radius:9px;
  background:var(--hundido);
  color:var(--texto-1);
  font-size:15px;
  font-family:inherit;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.campo-caja input{padding-left:36px;}
input:hover{border-color:var(--texto-3);}
input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-suave);
  background:var(--superficie);
}

.codigo{
  font-size:26px;
  letter-spacing:.32em;
  text-align:center;
  font-variant-numeric:tabular-nums;
  padding:12px;
}
.campo-caja .codigo{padding-left:12px;}

.recordarme{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 18px;
  font-size:13.5px;
  color:var(--texto-2);
}
.recordarme input{width:15px;height:15px;accent-color:var(--accent);margin:0;cursor:pointer;}
.recordarme label{margin:0;font-weight:400;font-size:13.5px;cursor:pointer;user-select:none;}

/* --- Botones -------------------------------------------------------------- */
button{font-family:inherit;}

.btn{
  width:100%;
  padding:11px;
  border:0;
  border-radius:9px;
  background:linear-gradient(135deg, var(--accion) 0%, var(--accion-fin) 100%);
  color:#fff;
  font-size:14.5px;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 2px 10px var(--accion-sombra);
  transition:box-shadow .15s, transform .15s, opacity .15s;
}
.btn:hover:not(:disabled){box-shadow:0 4px 16px var(--accion-sombra);transform:translateY(-1px);}
.btn:active:not(:disabled){transform:translateY(0);}
.btn:disabled{opacity:.6;cursor:default;box-shadow:none;}

.btn.secundario{
  background:transparent;
  color:var(--texto-2);
  border:1px solid var(--linea-fuerte);
  font-weight:500;
  box-shadow:none;
}
.btn.secundario:hover:not(:disabled){background:var(--hundido);color:var(--texto-1);transform:none;}
.btn.peligro{
  background:transparent;
  border:1px solid var(--error);
  color:var(--error);
  box-shadow:none;
}
.btn.peligro:hover:not(:disabled){background:var(--error-suave);transform:none;}

.btn:focus-visible,a:focus-visible,input:focus-visible,button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.enlace{
  display:block;
  width:100%;
  margin-top:14px;
  background:none;
  border:0;
  color:var(--accent);
  font-size:13.5px;
  cursor:pointer;
  text-align:center;
}
.enlace:hover{text-decoration:underline;}
/* El de la barra inferior va junto a otro contenido, no ocupando toda la fila */
.enlace-pie{width:auto;margin:0;}
/* Dos botones apilados necesitan aire entre ellos */
.btn-apilado{margin-bottom:10px;}
/* En una fila con texto al lado, el botón no ocupa el ancho completo */
.btn-angosto{width:auto;padding:8px 16px;font-size:13.5px;flex-shrink:0;}

/* --- Administración de cuentas --------------------------------------------
   Una fila por persona, todas iguales: avatar, quién es, y un único botón de
   acciones a la derecha. Los cinco botones de texto que había antes se
   envolvían distinto en cada fila y la lista parecía una escalera. */
.cuenta{
  display:flex;
  align-items:center;
  gap:13px;
  padding:14px 4px;
  border-bottom:1px solid var(--linea);
}
.cuenta:last-child{border-bottom:0;}

.cuenta-avatar{
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--hundido);
  border:1px solid var(--linea);
  color:var(--texto-2);
  font-size:13px;
  font-weight:700;
  flex-shrink:0;
}
.cuenta.de-baja .cuenta-avatar{opacity:.55;}

.cuenta-datos{min-width:0;flex:1;}
.cuenta-nombre{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  font-weight:600;
  font-size:14.5px;
}
.cuenta-detalle{
  font-size:12.5px;
  color:var(--texto-3);
  margin-top:2px;
  overflow-wrap:anywhere;
}
.cuenta.de-baja .cuenta-nombre{color:var(--texto-3);}

/* El botón de acciones: cuadrado, siempre en el mismo sitio de cada fila */
.acciones{position:relative;flex-shrink:0;}
.acciones-boton{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:var(--texto-3);
  cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
}
.acciones-boton:hover,
.acciones-boton[aria-expanded="true"]{
  background:var(--hundido);
  border-color:var(--linea);
  color:var(--texto-1);
}
.acciones-boton svg{width:17px;height:17px;}

/* La barra de la lista: cuántas cuentas hay y de dónde traer más */
.barra-lista{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 4px 12px;
  border-bottom:1px solid var(--linea);
  margin-bottom:4px;
}
.barra-lista-texto{font-size:12.5px;color:var(--texto-3);}

/* Lo que traería una sincronización, antes de aplicarla */
.previa{padding:16px 4px;}
.previa-lista{
  list-style:none;
  margin:10px 0 0;
  padding:12px 14px;
  background:var(--hundido);
  border:1px solid var(--linea);
  border-radius:10px;
  font-size:13px;
  display:grid;
  gap:7px;
}
.previa-lista.avisos{color:var(--texto-2);}
.previa-acciones{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;}

/* La contraseña temporal ocupa la fila entera: es lo único que importa en ese
   momento y se lee de una vez */
.temporal{
  flex:1;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.temporal-texto{font-size:12.5px;color:var(--texto-2);}
.temporal-clave{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:18px;
  letter-spacing:.06em;
  padding:7px 12px;
  background:var(--accent-suave);
  border:1px solid var(--accent);
  border-radius:9px;
  color:var(--accent);
  user-select:all;   /* un clic la selecciona entera */
}

/* --- Avisos --------------------------------------------------------------- */
.aviso{
  margin-top:16px;
  padding:10px 12px;
  border-radius:9px;
  font-size:13.5px;
  display:none;
}
.aviso.error{background:var(--error-suave);color:var(--error);display:block;}
.aviso.ok{background:var(--accent-suave);color:var(--accent);display:block;}

/* --- Elegir sistema ------------------------------------------------------- */
.sistemas{display:flex;flex-direction:column;gap:10px;margin-top:20px;}
.sistema{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border:1px solid var(--linea);
  border-radius:11px;
  text-decoration:none;
  color:inherit;
  background:var(--hundido);
  transition:border-color .15s, background .15s, transform .15s;
}
.sistema:hover{border-color:var(--accent);background:var(--superficie);transform:translateY(-1px);}
.sistema-icono{
  width:36px;
  height:36px;
  border-radius:10px;
  display:grid;
  place-items:center;
  color:#fff;
  flex-shrink:0;
}
.sistema-icono svg{width:19px;height:19px;display:block;}
/* Los colores de las aplicaciones. Se reparten por orden desde PHP, así que
   una aplicación nueva toma el siguiente sin tocar nada. */
.sistema-icono.color-1{background:#3474B4;}
.sistema-icono.color-2{background:#F19434;}
.sistema-icono.color-3{background:#4A8C6F;}
.sistema-icono.color-4{background:#8A5BB8;}
.sistema-nombre{font-weight:600;}
.sistema-url{font-size:12.5px;color:var(--texto-3);}
.flecha{margin-left:auto;color:var(--texto-3);}

/* --- Cuenta y segundo factor ---------------------------------------------- */
.fila{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 0;
  border-bottom:1px solid var(--linea);
}
.fila:last-of-type{border-bottom:0;}
.fila-titulo{font-weight:600;font-size:14.5px;}
.fila-detalle{color:var(--texto-2);font-size:13px;margin-top:2px;}
.chip{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:20px;white-space:nowrap;}
.chip.on{background:var(--accent-suave);color:var(--accent);}
.chip.off{background:var(--hundido);color:var(--texto-3);}
.chip.aviso-chip{background:var(--error-suave);color:var(--error);}

.qr{
  display:block;
  width:220px;height:220px;
  margin:18px auto 12px;
  background:#fff;          /* el QR necesita fondo blanco también en oscuro */
  border-radius:10px;
  padding:8px;
}
.secreto{
  text-align:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;
  color:var(--texto-2);
  word-break:break-all;
  margin-bottom:18px;
}

.codigos{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  margin:16px 0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:14px;
}
.codigos span{
  padding:8px;
  background:var(--hundido);
  border:1px solid var(--linea);
  border-radius:7px;
  text-align:center;
}

/* --- Pie ------------------------------------------------------------------ */
.pie{
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid var(--linea);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:13px;
  color:var(--texto-3);
}
.pie a{color:var(--texto-2);}

/* Debajo de la tarjeta: recuerda de qué es la puerta esta pantalla */
.pie-sistemas{
  position:relative;
  z-index:1;
  margin-top:20px;
  text-align:center;
  font-size:12.5px;
  color:var(--texto-2);
  opacity:.85;
}
.pie-sistemas b{color:var(--texto-2);font-weight:600;}