/* el SEOmanal · acceso: login, 2FA, registro y verificación. Autónomo sobre tokens.css: no carga base.css ni componentes.css.
   Fuentes: se declaran en fonts.css, que se carga antes que ninguna otra hoja, y se precargan en metas.php. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: var(--sm-s-4) var(--sm-s-3); background: var(--sm-hielo); color: var(--sm-gris-texto); font-family: var(--sm-sans); font-size: var(--sm-t-sm); line-height: 1.55; }
img, svg { display: block; max-width: 100%; height: auto; }
h1 { font-family: var(--sm-serif); color: var(--sm-tinta); font-size: var(--sm-t-h3); line-height: 1.15; font-weight: 700; margin: 0 0 var(--sm-s-3); }
p { margin: 0 0 var(--sm-s-3); }
a { color: var(--sm-azul); text-decoration: underline; text-decoration-color: var(--sm-azul-claro); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { text-decoration-color: var(--sm-azul); }
:focus-visible { outline: 3px solid var(--sm-azul); outline-offset: 2px; }
::selection { background: var(--sm-azul-claro); color: var(--sm-tinta); }
code { font-family: var(--sm-mono); font-size: .9em; background: var(--sm-hielo); padding: 1px 5px; border-radius: 3px; word-break: break-all; }

/* Caja: ancho fijo y alto mínimo reservado para que el contenido no empuje nada al cargar. */
.acceso-caja { background: var(--sm-papel); border-top: 4px solid var(--sm-azul); padding: var(--sm-s-5); width: min(440px, 100%); }
.acceso-caja.ancha { width: min(560px, 100%); }
.acceso-marca { display: flex; align-items: center; gap: var(--sm-s-2); text-decoration: none; color: var(--sm-tinta); font-family: var(--sm-serif); font-weight: 700; font-size: var(--sm-t-lg); margin-bottom: var(--sm-s-4); }
.acceso-marca img { width: 48px; height: 48px; }

form { display: grid; gap: var(--sm-s-2); }
label { display: block; font-weight: 500; color: var(--sm-tinta); }
input[type="text"], input[type="email"], input[type="password"], input[type="url"] { font: inherit; color: inherit; width: 100%; padding: 10px 12px; border: 1px solid var(--sm-gris-meta); border-radius: var(--sm-radio); background: var(--sm-papel); }
input:focus { border-color: var(--sm-azul); outline: 3px solid var(--sm-azul-claro); outline-offset: 0; }
input.codigo { font-family: var(--sm-mono); font-size: 1.25rem; letter-spacing: .2em; text-align: center; }
[aria-invalid="true"] { border-color: var(--sm-error); }
.check { display: flex; align-items: flex-start; gap: var(--sm-s-2); font-weight: 400; color: var(--sm-gris-texto); }
.check input { margin-top: 4px; }
.ayuda { font-size: var(--sm-t-xs); color: var(--sm-gris-meta); margin: 0; }
.campo-error { font-size: var(--sm-t-xs); color: var(--sm-error); font-weight: 600; margin: 0; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.btn { display: inline-block; margin-top: var(--sm-s-2); font: inherit; font-weight: 600; padding: 10px 18px; border-radius: var(--sm-radio); border: 1px solid var(--sm-azul); background: var(--sm-azul); color: #fff; text-decoration: none; cursor: pointer; line-height: 1.2; text-align: center; }
.btn:hover { background: var(--sm-azul-oscuro); border-color: var(--sm-azul-oscuro); color: #fff; }
.btn.terc { background: transparent; color: var(--sm-tinta); border-color: var(--sm-linea); }

.aviso { padding: var(--sm-s-2) var(--sm-s-3); border-radius: var(--sm-radio); background: var(--sm-hielo); color: var(--sm-tinta); }
.aviso.error { background: #FBE9E7; color: var(--sm-error); }
.aviso.ok { background: #E6F2EB; color: var(--sm-ok); }
.pie-acceso { margin: var(--sm-s-4) 0 0; padding-top: var(--sm-s-3); border-top: 1px solid var(--sm-linea); font-size: var(--sm-t-xs); color: var(--sm-gris-meta); }

.secreto { font-family: var(--sm-mono); font-size: 1rem; letter-spacing: .08em; background: var(--sm-hielo); border-left: 3px solid var(--sm-azul); padding: var(--sm-s-2) var(--sm-s-3); word-break: break-all; margin: 0 0 var(--sm-s-3); }
.codigos { list-style: none; padding: 0; margin: 0 0 var(--sm-s-3); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sm-s-1) var(--sm-s-3); font-family: var(--sm-mono); font-size: 1rem; color: var(--sm-tinta); }
.pasos { padding-left: 1.25em; margin: 0 0 var(--sm-s-3); }
.pasos li { margin-bottom: var(--sm-s-1); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

/* Barra de desplazamiento con la marca (misma regla que base.css; el acceso no la carga). */
html { scrollbar-color: var(--sm-tinta) var(--sm-hielo); }
@supports not (scrollbar-color: auto) {
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track { background: var(--sm-hielo); }
  ::-webkit-scrollbar-thumb { background: var(--sm-tinta); border: 3px solid var(--sm-hielo); border-radius: var(--sm-radio); }
  ::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background: var(--sm-azul); }
}
.acceso-olvido { margin: var(--sm-s-2) 0 0; font-size: var(--sm-t-xs); }
form.reenviar { margin-top: var(--sm-s-2); }
form.reenviar .btn { width: 100%; }

/* ═══ El gorila de la pantalla de acceso (partials/gorila-acceso.php, assets/js/gorila.js) ═══
   Sigue con los ojos lo que escribes, se tapa los ojos en la contraseña y asoma un ojo con «Mostrar».
   Todo el dibujo está en coordenadas 0-512 del SVG: los px de estos transform son unidades del dibujo. */
.acceso-gorila { flex-direction: column; gap: var(--sm-s-1); justify-content: center; margin-bottom: var(--sm-s-4); }
.acceso-gorila .gorila { width: 150px; height: 150px; overflow: hidden; }
.acceso-gorila span { font-size: var(--sm-t-lg); }
.gorila-ojo { fill: #fff; }
.gorila-ojos { transition: transform .18s ease-out; }
.gorila-mano { transition: transform .45s cubic-bezier(.34, 1.3, .64, 1); }
.gorila-mano-izq { transform: translate(204px, 640px); }
.gorila-mano-der { transform: translate(308px, 640px); }
.tapa .gorila-mano-izq { transform: translate(204px, 274px); }
.tapa .gorila-mano-der { transform: translate(308px, 274px); transition-delay: .05s; }
.gorila-dedo, .gorila-palma, .gorila-pulgar { fill: #1D4FD7; stroke: #0C1E47; stroke-width: 6; stroke-linejoin: round; }
.gorila-dedo { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .3s ease-out; }
/* Asoma: la mano de la izquierda separa los dos dedos de en medio y deja ver un ojo */
.asoma .gorila-mano-izq .gorila-dedo-1 { transform: translateX(-7px) rotate(-4deg); }
.asoma .gorila-mano-izq .gorila-dedo-2 { transform: translateX(-14px) rotate(-10deg); }
.asoma .gorila-mano-izq .gorila-dedo-3 { transform: translateX(14px) rotate(10deg); }
.asoma .gorila-mano-izq .gorila-dedo-4 { transform: translateX(7px) rotate(4deg); }

/* Mostrar u ocultar la contraseña */
.campo-clave { position: relative; display: block; }
.campo-clave input { padding-right: 92px; }
.ver-clave { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); padding: 6px 10px; font: inherit; font-size: var(--sm-t-xs); font-weight: 600; color: var(--sm-azul); background: none; border: 0; border-radius: var(--sm-radio); cursor: pointer; }
.ver-clave:hover { background: var(--sm-hielo); }
.ver-clave:focus-visible { outline: 2px solid var(--sm-azul); outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
  .gorila-ojos, .gorila-mano, .gorila-dedo { transition: none; }
}
@media (max-width: 480px) {
  .acceso-gorila .gorila { width: 120px; height: 120px; }
}

/* Medidor de contraseña (assets/js/clave.js) */
.clave-medidor { margin: 6px 0 10px; }
.clave-medidor meter { display: block; width: 100%; height: 8px; }
.clave-texto { margin: 4px 0 0; font-size: var(--sm-t-xs); color: var(--sm-gris-meta); }
.clave-medidor[data-nivel="0"] .clave-texto, .clave-medidor[data-nivel="1"] .clave-texto { color: var(--sm-error, #b91c1c); }
.clave-medidor[data-nivel="3"] .clave-texto, .clave-medidor[data-nivel="4"] .clave-texto { color: #15803d; }
/* Entrar con Google: botón blanco con la «G», y el separador «o» entre el formulario y el botón */
.google-form { margin: 0; }
.btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin: 0; font: inherit; font-weight: 600; padding: 10px 18px; border-radius: var(--sm-radio); border: 1px solid var(--sm-linea); background: #fff; color: var(--sm-tinta); cursor: pointer; line-height: 1.2; }
.btn-google:hover { border-color: var(--sm-tinta); background: var(--sm-papel); }
.btn-google svg { flex: none; }
.o-bien { display: flex; align-items: center; gap: var(--sm-s-2); margin: var(--sm-s-3) 0; font-size: var(--sm-t-xs); color: var(--sm-gris-meta); }
.o-bien::before, .o-bien::after { content: ""; flex: 1; border-top: 1px solid var(--sm-linea); }