/*
 * Pantalla de entrada al aula — maqueta del equipo de diseño, tal cual.
 * Lo único añadido: la regla contra el clearfix del tema Mesmerize, que mete
 * elementos vacíos dentro de cada bloque y descuadra la rejilla de dos
 * columnas, y el hueco de la barra de administración.
 */
/* El tema no manda en esta pantalla: ni su columna, ni su tipografía, ni sus
   enlaces subrayados. Es la primera impresión del estudiante. */
body.at-acceso-pantalla{margin:0 !important;padding:0 !important;background:var(--gris) !important}
body.at-acceso-pantalla .at-acceso{width:100% !important;max-width:none !important;margin:0 !important;
  padding:0 !important;float:none !important}
/* Si algún tema o plugin envuelve la pantalla en su columna, esa columna
   se ensancha: solo la que contiene la entrada, ninguna más. */
body.at-acceso-pantalla .at-ancho,
body.at-acceso-pantalla *:has(> .at-acceso),
body.at-acceso-pantalla *:has(.at-acceso){width:100% !important;max-width:none !important;
  margin:0 !important;padding:0 !important;float:none !important}
body.at-acceso-pantalla .at-acceso a{text-decoration:none}
body.at-acceso-pantalla .at-acceso h1,
body.at-acceso-pantalla .at-acceso h2{font-family:var(--f-tit) !important;text-transform:none !important;
  letter-spacing:normal !important}
body.at-acceso-pantalla .at-acceso,
body.at-acceso-pantalla .at-acceso p,
body.at-acceso-pantalla .at-acceso label,
body.at-acceso-pantalla .at-acceso input,
body.at-acceso-pantalla .at-acceso button{font-family:var(--f-txt) !important;text-align:left}
body.at-acceso-pantalla .at-google-n,
body.at-acceso-pantalla .at-alta,
body.at-acceso-pantalla .at-legal{text-align:center}
/* Y por si el tema deja su botón flotante encima de la tarjeta. */
body.at-acceso-pantalla .joinchat,body.at-acceso-pantalla .at-contactar{display:none !important}

body.at-acceso-pantalla :is(div,section,main,aside,form)::before,
body.at-acceso-pantalla :is(div,section,main,aside,form)::after{content:none !important;display:none !important}
body.admin-bar .at-acceso{min-height:calc(100dvh - var(--wp-admin--admin-bar--height,32px))}


:root{
  --azul:#2553CB; --marino:#0B1B3A; --naranja:#F28731; --verde:#12844C; --rojo:#B42318;
  --texto:#0B1B3A; --texto-2:#4A5A78; --gris:#F4F7FC; --borde:#DCE6F4;
  --r:12px; --sombra:0 1px 2px rgba(11,27,58,.06),0 8px 24px rgba(11,27,58,.08);
  --f-tit:"Plus Jakarta Sans",system-ui,sans-serif;
  --f-txt:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;min-height:100dvh;background:var(--gris);color:var(--texto);font:400 16px/1.7 var(--f-txt)}
h1,h2{font-family:var(--f-tit);font-weight:600;line-height:1.25;margin:0}
a{color:var(--azul)}
/* El foco tiene que verse.
 *
 * Estaba al 45 % de opacidad: sobre el azul marino del modo oscuro daba 2,6:1,
 * por debajo del 3:1 que exige la norma para un indicador. Sólido da 8,3:1, y
 * la sombra blanca alrededor lo separa de cualquier fondo. */
:focus-visible{outline:3px solid #2553CB; outline-offset:2px; border-radius:8px;
  box-shadow:0 0 0 5px rgba(255,255,255,.55)}

.at-acceso{min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}

/* Panel de marca */
.at-entrada-marca{position:relative;overflow:hidden;color:#fff;padding:48px 56px;display:flex;flex-direction:column;justify-content:space-between;gap:48px;
  background:radial-gradient(90% 70% at 100% 100%,#1E5BD8 0%,transparent 60%),linear-gradient(160deg,#0B1B3A 0%,#10275A 100%)}
.at-entrada-marca::after{content:"";position:absolute;inset:auto -120px -160px auto;width:420px;height:420px;border-radius:50%;
  border:1px solid rgba(255,255,255,.12);box-shadow:0 0 0 60px rgba(255,255,255,.03),0 0 0 120px rgba(255,255,255,.02)}
.at-logo{font:600 22px/1 var(--f-tit);letter-spacing:.02em;color:#fff;text-decoration:none}
.at-logo b{color:var(--naranja)}
.at-entrada-marca-c{position:relative;z-index:1;max-width:460px}
.at-entrada-marca-k{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.at-entrada-marca h1{font-size:40px;line-height:48px;margin:12px 0 16px}
.at-entrada-marca p{margin:0;color:rgba(255,255,255,.8);font-size:17px}
.at-puntos{list-style:none;margin:32px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
.at-puntos li{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center;font-size:15px;color:rgba(255,255,255,.88);line-height:1.5}
.at-puntos .ic{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.1);display:grid;place-items:center}
.at-puntos svg{width:20px;height:20px}
.at-entrada-marca-pie{position:relative;z-index:1;font-size:13px;color:rgba(255,255,255,.6)}

/* Formulario */
.at-lado{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px}
.at-card{width:100%;max-width:420px;background:#fff;border:1px solid var(--borde);border-radius:16px;box-shadow:var(--sombra);padding:40px}
.at-card h2{font-size:28px;line-height:36px}
.at-sub{margin:8px 0 32px;color:var(--texto-2);font-size:15px}

.at-google{width:100%;height:48px;display:flex;align-items:center;justify-content:center;gap:12px;border:1px solid #747775;border-radius:10px;
  background:#fff;color:#1F1F1F;font:600 15px/1 var(--f-txt);cursor:pointer;transition:background .15s}
.at-google:hover{background:#F8FAFD}
.at-google svg{width:20px;height:20px;flex:none}
.at-google-n{margin:8px 0 0;font-size:13px;color:var(--texto-2);text-align:center}

.at-sep{display:flex;align-items:center;gap:12px;margin:24px 0;font-size:13px;color:var(--texto-2)}
.at-sep::before,.at-sep::after{content:"";flex:1;height:1px;background:var(--borde)}

.at-campo{margin-bottom:16px}
.at-campo label{display:block;font-size:14px;font-weight:600;margin-bottom:8px}
.at-campo-fila{display:flex;justify-content:space-between;align-items:baseline}
.at-campo-fila a{font-size:14px;font-weight:600;text-decoration:none}
.at-input{position:relative}
.at-input input{width:100%;height:48px;border:1px solid var(--borde);border-radius:10px;padding:0 14px;font:400 16px var(--f-txt);color:var(--texto);background:#fff}
.at-input input:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(37,83,203,.18)}
.at-input input[aria-invalid="true"]{border-color:var(--rojo)}
.at-ver{position:absolute;right:4px;top:4px;height:40px;padding:0 12px;border:0;border-radius:8px;background:none;color:var(--azul);font:600 14px var(--f-txt);cursor:pointer}
.at-ver:hover{background:var(--gris)}
.at-input input[type=password],.at-input input.pw{padding-right:84px}
.at-error{display:none;margin:8px 0 0;font-size:14px;color:var(--rojo)}
.at-error.on{display:block}

.at-recordar{display:flex;align-items:center;gap:12px;min-height:44px;margin:4px 0 16px;font-size:15px;cursor:pointer}
.at-recordar input{width:20px;height:20px;accent-color:var(--azul)}

.at-cta{width:100%;height:52px;border:0;border-radius:10px;background:var(--naranja);color:var(--marino);font:600 16px var(--f-txt);cursor:pointer;
  box-shadow:0 2px 8px rgba(242,135,49,.35)}
.at-cta:hover{filter:brightness(1.04)}
.at-cta[disabled]{opacity:.7;cursor:progress}

.at-alta{margin:24px 0 0;padding-top:24px;border-top:1px solid var(--borde);font-size:15px;color:var(--texto-2);text-align:center}
.at-alta a{font-weight:600}
.at-legal{max-width:420px;margin:24px 0 0;font-size:13px;color:var(--texto-2);text-align:center;line-height:1.6}
.at-legal a{color:var(--texto-2)}

.at-aviso{display:none;margin:0 0 16px;padding:12px 16px;border-radius:10px;background:#FDF2F2;color:var(--rojo);font-size:14px;line-height:1.5}
.at-aviso.on{display:block}
.at-aviso.ok{background:#E9F6EF;color:var(--verde)}

@media (max-width:960px){
  .at-acceso{grid-template-columns:minmax(0,1fr)}
  .at-entrada-marca{padding:24px 24px 32px;gap:24px}
  .at-entrada-marca::after{display:none}
  .at-entrada-marca h1{font-size:26px;line-height:32px;margin:8px 0 8px}
  .at-entrada-marca p{font-size:15px}
  .at-puntos,.at-entrada-marca-pie{display:none}
  .at-lado{justify-content:flex-start;padding:24px 16px 40px;margin-top:-16px}
}
@media (max-width:480px){
  .at-card{padding:24px 20px;border-radius:14px}
  .at-card h2{font-size:24px;line-height:30px}
  .at-sub{margin-bottom:24px}
}


/* --- Selector de apariencia ------------------------------------------ */
.at-tema-acceso{width:100%;max-width:420px;display:flex;justify-content:flex-end;margin:0 0 12px}
.at-tema-acceso .at-tema{display:flex;align-items:center;gap:6px}
.at-tema-acceso .at-tema-etiqueta{font-size:12px;color:var(--texto-2);margin-right:2px}
.at-tema-acceso .at-tema button{min-height:32px;padding:0 10px;border:1px solid var(--borde);
  border-radius:8px;background:#fff;color:var(--texto-2);font:600 12px var(--f-txt);cursor:pointer}
.at-tema-acceso .at-tema button[aria-pressed="true"]{background:var(--azul);color:#fff;border-color:var(--azul)}

/* --- Modo oscuro ------------------------------------------------------
 * Escrito sin `:is()` y con `!important` donde hace falta: las reglas de
 * arriba llevan `!important` para defenderse del tema, así que las del modo
 * oscuro necesitan la misma fuerza, y hay navegadores que descartan la regla
 * entera si no entienden `:is()`.
 */
html[data-at-resolved-theme="dark"] body.at-acceso-pantalla{background:#101B2E !important}
html[data-at-resolved-theme="dark"] body.at-acceso-pantalla .at-card{
  background:#15243A;border-color:#344967;box-shadow:0 8px 24px rgba(0,0,0,.35)}
html[data-at-resolved-theme="dark"] body.at-acceso-pantalla .at-card h2,
html[data-at-resolved-theme="dark"] body.at-acceso-pantalla .at-card label,
html[data-at-resolved-theme="dark"] body.at-acceso-pantalla .at-recordar{color:#F2F6FF !important}
html[data-at-resolved-theme="dark"] body.at-acceso-pantalla .at-sub,
html[data-at-resolved-theme="dark"] body.at-acceso-pantalla .at-google-n,
html[data-at-resolved-theme="dark"] body.at-acceso-pantalla .at-sep,
html[data-at-resolved-theme="dark"] body.at-acceso-pantalla .at-alta,
html[data-at-resolved-theme="dark"] body.at-acceso-pantalla .at-legal{color:#C6D4E8 !important}
html[data-at-resolved-theme="dark"] body.at-acceso-pantalla .at-sep::before,
html[data-at-resolved-theme="dark"] body.at-acceso-pantalla .at-sep::after{background:#344967}
html[data-at-resolved-theme="dark"] body.at-acceso-pantalla .at-input input{
  background:#0F1B2E;border-color:#344967;color:#F2F6FF}
html[data-at-resolved-theme="dark"] body.at-acceso-pantalla .at-input input::placeholder{color:#7C8CA6}
html[data-at-resolved-theme="dark"] body.at-acceso-pantalla .at-ver{color:#9EC5FF}
html[data-at-resolved-theme="dark"] body.at-acceso-pantalla .at-ver:hover{background:#1E3050}
html[data-at-resolved-theme="dark"] body.at-acceso-pantalla .at-alta{border-top-color:#344967}
html[data-at-resolved-theme="dark"] body.at-acceso-pantalla .at-alta a,
html[data-at-resolved-theme="dark"] body.at-acceso-pantalla .at-legal a,
html[data-at-resolved-theme="dark"] body.at-acceso-pantalla .at-campo-fila a{color:#9EC5FF !important}
html[data-at-resolved-theme="dark"] body.at-acceso-pantalla .at-tema-acceso .at-tema button{
  background:#15243A;border-color:#344967;color:#C6D4E8}
html[data-at-resolved-theme="dark"] body.at-acceso-pantalla .at-tema-acceso .at-tema-etiqueta{color:#8FA3C6}
html[data-at-resolved-theme="dark"] body.at-acceso-pantalla .at-aviso{background:#3A1E1E;color:#FFB4A9}
html[data-at-resolved-theme="dark"] body.at-acceso-pantalla .at-aviso.ok{background:#16301F;color:#8FE0B0}

/* El panel de marca conserva su fondo y su texto: es la identidad. */
html[data-at-resolved-theme="dark"] body.at-acceso-pantalla .at-entrada-marca h1,
html[data-at-resolved-theme="dark"] body.at-acceso-pantalla .at-entrada-marca .at-logo{color:#fff !important}
html[data-at-resolved-theme="dark"] body.at-acceso-pantalla .at-entrada-marca p,
html[data-at-resolved-theme="dark"] body.at-acceso-pantalla .at-entrada-marca li{color:rgba(255,255,255,.86) !important}

/* El botón de Google siempre en blanco: es su marca, no la nuestra. */
body.at-acceso-pantalla .at-google{background:#fff !important;color:#1F1F1F !important;
  border-color:#747775 !important}


/* --- Que quepa, sea cual sea el alto de la ventana -------------------
 * Nada de puntos de corte fijos: las medidas se calculan sobre el alto de la
 * ventana, así que la tarjeta entera se ve tanto en un portátil de 720 px
 * como en un monitor de 1440. En escritorio la pantalla no se desplaza; en el
 * teléfono sí, que es lo natural ahí.
 */
@media (min-width:961px){
  html:has(body.at-acceso-pantalla),
  body.at-acceso-pantalla{height:100%;max-height:100%;overflow:hidden !important}
  body.at-acceso-pantalla .at-acceso{height:100dvh;min-height:0;align-items:stretch}

  body.at-acceso-pantalla .at-entrada-marca{
    padding:clamp(20px,4vh,48px) clamp(28px,3vw,56px);
    gap:clamp(14px,3vh,48px);overflow:hidden}
  body.at-acceso-pantalla .at-entrada-marca h1{
    font-size:clamp(24px,4.4vh,40px);line-height:1.18;margin:clamp(6px,1.4vh,12px) 0 clamp(6px,1.4vh,16px)}
  body.at-acceso-pantalla .at-entrada-marca p{font-size:clamp(14px,1.9vh,17px)}
  body.at-acceso-pantalla .at-puntos{margin-top:clamp(12px,2.6vh,32px);gap:clamp(8px,1.8vh,16px)}
  body.at-acceso-pantalla .at-puntos li{font-size:clamp(13px,1.7vh,15px)}
  body.at-acceso-pantalla .at-puntos .ic{width:clamp(28px,4vh,40px);height:clamp(28px,4vh,40px)}

  body.at-acceso-pantalla .at-lado{
    padding:clamp(12px,2.4vh,40px) 24px;gap:clamp(6px,1.2vh,14px);justify-content:center}
  body.at-acceso-pantalla .at-card{padding:clamp(18px,3vh,36px) clamp(20px,2.4vw,40px)}
  body.at-acceso-pantalla .at-card h2{font-size:clamp(20px,3vh,28px);line-height:1.2}
  body.at-acceso-pantalla .at-sub{margin:clamp(4px,.8vh,8px) 0 clamp(12px,2.4vh,28px);
    font-size:clamp(13px,1.7vh,15px)}
  body.at-acceso-pantalla .at-google,
  body.at-acceso-pantalla .at-input input{height:clamp(40px,5.4vh,48px)}
  body.at-acceso-pantalla .at-cta{height:clamp(44px,6vh,52px)}
  body.at-acceso-pantalla .at-ver{height:clamp(32px,4.4vh,40px)}
  body.at-acceso-pantalla .at-sep{margin:clamp(10px,2vh,24px) 0}
  body.at-acceso-pantalla .at-campo{margin-bottom:clamp(8px,1.6vh,16px)}
  body.at-acceso-pantalla .at-recordar{margin:0 0 clamp(8px,1.6vh,16px);min-height:36px}
  body.at-acceso-pantalla .at-alta{margin-top:clamp(10px,2vh,24px);padding-top:clamp(10px,2vh,24px);
    font-size:clamp(13px,1.7vh,15px)}

  /* Lo prescindible se retira cuando la ventana es baja, en este orden. */
  @media (max-height:820px){
    body.at-acceso-pantalla .at-legal{display:none}
    body.at-acceso-pantalla .at-tema-acceso{margin-bottom:4px}
  }
  @media (max-height:700px){
    body.at-acceso-pantalla .at-google-n{display:none}
    /* El pie del panel se aprieta, pero no se va: lleva el contacto. */
    body.at-acceso-pantalla .at-entrada-marca-pie{padding-top:10px;font-size:12px}
    body.at-acceso-pantalla .at-pie-redes{margin-top:5px}
    body.at-acceso-pantalla .at-pie-redes a{width:28px;height:28px}
  }
  @media (max-height:620px){
    body.at-acceso-pantalla .at-puntos{display:none}
    body.at-acceso-pantalla .at-alta{display:none}
  }
}

/* En el teléfono manda el desplazamiento normal. */
@media (max-width:960px){
  body.at-acceso-pantalla{overflow:auto}
  body.at-acceso-pantalla .at-acceso{min-height:100dvh}
}


/* --- El panel de marca, centrado -------------------------------------
 * Con `space-between` y el pie oculto en ventanas bajas, el texto se iba al
 * fondo: el logo arriba y todo lo demás pegado abajo. Con una rejilla de tres
 * filas, el mensaje queda centrado y el pie en su sitio cuando existe.
 */
body.at-acceso-pantalla .at-entrada-marca{
  display:grid;grid-template-rows:auto 1fr auto;justify-content:stretch;align-content:stretch}
body.at-acceso-pantalla .at-entrada-marca .at-logo{align-self:start}
body.at-acceso-pantalla .at-entrada-marca-c{align-self:center}
body.at-acceso-pantalla .at-entrada-marca-pie{align-self:end}

/* El título del panel es blanco en los dos modos: el tema le ponía su color
   de encabezado y quedaba azul sobre azul. */
body.at-acceso-pantalla .at-entrada-marca h1,
body.at-acceso-pantalla .at-entrada-marca .at-entrada-marca-k,
body.at-acceso-pantalla .at-entrada-marca .at-logo{color:#fff !important}
body.at-acceso-pantalla .at-entrada-marca .at-logo b{color:var(--naranja) !important}
body.at-acceso-pantalla .at-entrada-marca p,
body.at-acceso-pantalla .at-entrada-marca li{color:rgba(255,255,255,.88) !important}
body.at-acceso-pantalla .at-entrada-marca-k{color:rgba(255,255,255,.72) !important}


/* --- Pie del panel de marca: empresa a la izquierda, contacto a la derecha */
body.at-acceso-pantalla .at-entrada-marca-pie{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-top:16px;border-top:1px solid rgba(255,255,255,.14);
  font-size:13px;line-height:1.6;color:rgba(255,255,255,.72)}
body.at-acceso-pantalla .at-pie-empresa{display:flex;flex-direction:column}
body.at-acceso-pantalla .at-pie-empresa strong{color:#fff;font-size:14px}
body.at-acceso-pantalla .at-pie-contacto{display:flex;flex-direction:column;gap:3px;
  align-items:flex-end;text-align:right}
body.at-acceso-pantalla .at-pie-contacto p{margin:0;display:flex;align-items:center;gap:7px;
  color:rgba(255,255,255,.82) !important}
body.at-acceso-pantalla .at-pie-contacto a{color:rgba(255,255,255,.9) !important;text-decoration:none}
body.at-acceso-pantalla .at-pie-contacto a:hover{color:#fff !important;text-decoration:underline}
body.at-acceso-pantalla .at-pie-contacto svg{width:15px;height:15px;flex:none;opacity:.8}
body.at-acceso-pantalla .at-pie-sep{opacity:.5;margin:0 2px}
body.at-acceso-pantalla .at-pie-redes{display:flex;gap:8px;margin-top:8px}
body.at-acceso-pantalla .at-pie-redes a{width:32px;height:32px;border-radius:8px;
  background:rgba(255,255,255,.12);display:grid;place-items:center;transition:background .15s}
body.at-acceso-pantalla .at-pie-redes a:hover{background:var(--naranja)}
body.at-acceso-pantalla .at-pie-redes svg{width:17px;height:17px;opacity:1}

@media (max-width:960px){
  body.at-acceso-pantalla .at-entrada-marca-pie{display:none}
}