/* ─────────────────────────────────────────────────────────────────────────────
   Portada de acceso de la app nueva (login.php). Va después de css/app2.css y
   solo tiene lo propio de esta página: todo cuelga de .acceso*.

   Tres formas, el mismo marcado:
   - móvil (<520px): la marca arriba en oscuro, como la pantalla del campo, y el
     formulario en una hoja blanca que sube hasta el borde de abajo. El formulario
     no se centra en vertical: con el teclado abierto el correo sigue a la vista. En
     los móviles altos la marca crece (45 % de la altura) y el contacto baja al pie;
   - tableta (520-899px): una tarjeta centrada con la marca arriba;
   - ordenador (≥900px, y los móviles en horizontal): marca a la izquierda y
     formulario a la derecha, en una sola ventana.
   ───────────────────────────────────────────────────────────────────────────── */

/* el fondo de arriba es la marca (oscura): así el rebote de iOS no enseña una franja clara.
   (El hueco de la barra de desplazamiento ya no se reserva: app2.css pone scrollbar-gutter:auto sin .app-barra) */
html:has(body.acceso-body){background:var(--pantalla);overflow-x:hidden}
/* nada puede ensanchar la página: en iOS, lo que sobresale (las líneas del campo, giradas y al 150 %) dejaba
   que la página se moviera de lado al abrir el teclado */
body.acceso-body{overflow-x:hidden}
body.acceso-body{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;background:var(--papel)}
.acceso{flex:1;display:flex;flex-direction:column;width:100%}
.acceso-caja{position:relative;flex:1;display:flex;flex-direction:column;width:100%;min-width:0}
/* franja de la marca arriba, a todo lo ancho (la de la pantalla del campo es local → rival) */
.acceso-caja::before{content:"";position:absolute;z-index:2;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#2563eb,#0891b2 58%,#0d9488)}

/* ── Marca: el bloque oscuro de la pantalla del campo ── */
.acceso-marca{position:relative;isolation:isolate;overflow:hidden;overflow:clip;contain:paint;color:#fff;text-align:center;
  background:radial-gradient(120% 95% at 50% -12%,var(--pantalla2),var(--pantalla) 72%);
  padding:calc(18px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 48px max(20px,env(safe-area-inset-left))}
/* las líneas del campo, de fondo */
.acceso-lineas{position:absolute;z-index:-1;left:50%;top:50%;width:150%;max-width:none;height:auto;transform:translate(-50%,-50%) rotate(90deg);
  color:rgba(255,255,255,.055);pointer-events:none}
.acceso-marca picture{display:block}
/* el logo lleva un halo oscuro alrededor: sobre la pantalla no se nota y el icono queda en el centro */
.acceso-logo{display:block;width:92px;height:auto;margin:0 auto -4px}
.acceso-nombre{margin:0;color:#fff;font:800 1.75rem/1.05 var(--f-tit);letter-spacing:-.035em}
.acceso-lema{margin:8px auto 0;max-width:32ch;color:rgba(255,255,255,.8);font:700 1rem/1.3 var(--f-tit);letter-spacing:-.01em;text-wrap:balance}
.acceso-lema em{font-style:normal;color:#67d4f1}
/* el degradado de la marca en el texto, solo donde se puede recortar (si no, el texto quedaría transparente) */
@supports (-webkit-background-clip:text) or (background-clip:text){
  .acceso-lema em{background:linear-gradient(100deg,#7cb4ff,#22d3ee 55%,#5eead4);-webkit-background-clip:text;background-clip:text;color:transparent}
}
.acceso-lema-sub{display:none;margin:0;color:rgba(255,255,255,.66);font-size:.98rem;line-height:1.5;max-width:40ch}

/* ── Formulario: hoja blanca que monta sobre la marca ── */
.acceso-form{position:relative;z-index:1;flex:1;background:var(--papel);border-radius:26px 26px 0 0;margin-top:-26px;
  padding:24px max(20px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
.acceso-form-in{width:100%;max-width:400px;margin:0 auto}
.acceso-tit{margin:0 0 18px;font-size:1.5rem;line-height:1.15;letter-spacing:-.03em}
.acceso-form .aviso{margin-bottom:14px}
.acceso-form .form-group{margin-bottom:14px}

/* campos con su icono a la izquierda (el ojo de la contraseña, a la derecha, es el de .campo-pass) */
.acceso-campo{position:relative}
.acceso-campo>.ic{position:absolute;left:15px;top:50%;transform:translateY(-50%);z-index:1;color:var(--claro);pointer-events:none;
  transition:color .15s}
/* el icono se ilumina solo con el foco en el campo (no con el foco en el ojo, que no pinta anillo en el campo) */
.acceso-campo:has(>.form-control:focus)>.ic{color:var(--club-texto)}
.acceso-campo .form-control{min-height:52px;padding-left:46px}
.acceso-campo .pass-ver{z-index:1}
/* el anillo del ojo por dentro y sin el ojo propio de Edge (::-ms-reveal): ya lo hace app2.css */

.acceso-entrar{margin-top:20px;box-shadow:0 10px 22px -8px rgba(30,107,255,.55)}
.acceso-entrar .ic{margin-right:-4px}

/* contacto: la misma dirección que login.php, discreta, con una etiqueta delante que dice para qué es.
   Si no cabe en una línea (320 px), el enlace baja entero debajo de la etiqueta */
.acceso-ayuda{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:2px;margin:16px 0 0;padding-top:8px;
  border-top:1px solid var(--linea);color:var(--gris);font-size:.9rem;line-height:1.35;text-align:center}
.acceso-ayuda>span{padding:4px 0}
/* el enlace mide 44 px para el dedo, pero solo ocupa 32 en la línea (margen negativo): con la etiqueta
   encima no alarga la hoja. Lo que sobra va 4 px hacia arriba (sobre la etiqueta, que no se toca; nunca
   sobre «Entrar») y 8 px hacia abajo, dentro del relleno de la hoja */
.acceso-ayuda a{display:inline-flex;align-items:center;min-height:44px;margin:-4px 0 -8px;padding:0 6px;color:var(--club-texto);font-weight:700;border-radius:10px;
  text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:3px;overflow-wrap:anywhere}
@media(hover:hover){.acceso-ayuda a:hover{text-decoration-color:currentColor}}

/* ── Móvil: sin rebote al final (debajo de la hoja blanca asomaría el azul marino del fondo; iOS 16+) ── */
@media(max-width:519px){
  html:has(body.acceso-body){overscroll-behavior-y:none}
}

/* ── Tableta: tarjeta centrada, marca arriba ── */
@media(min-width:520px){
  html:has(body.acceso-body){background:var(--fondo)}
  body.acceso-body{background:
    radial-gradient(700px 420px at 8% 0%,rgba(37,99,235,.13),transparent 70%),
    radial-gradient(640px 460px at 96% 6%,rgba(6,182,212,.15),transparent 70%),
    radial-gradient(820px 420px at 50% 104%,rgba(13,148,136,.09),transparent 70%),
    var(--fondo)}
  .acceso{align-items:center;justify-content:center;
    padding:max(28px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))}
  .acceso-caja{flex:none;width:100%;max-width:460px;overflow:hidden;border-radius:28px;background:var(--papel);
    border:1px solid var(--linea);box-shadow:0 2px 6px rgba(15,23,42,.04),0 30px 70px -20px rgba(15,23,42,.28)}
  .acceso-marca{padding:28px 32px 54px}
  .acceso-logo{width:104px}
  .acceso-nombre{font-size:1.9rem}
  .acceso-form{flex:none;padding:28px 36px 22px}
}

/* ── Ordenador (y móvil en horizontal): marca a la izquierda, formulario a la derecha ── */
@media(min-width:900px),(min-width:560px) and (max-height:520px) and (orientation:landscape){
  /* 580px de alto, o lo que quepa en la pantalla (portátiles bajitos): el contenido manda si necesita más */
  .acceso-caja{max-width:1000px;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);min-height:min(580px,calc(100vh - 56px))}
  .acceso-marca{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;padding:56px 52px 60px}
  .acceso-lineas{width:118%;transform:translate(-50%,-50%)}
  .acceso-logo{width:176px;margin:0 0 4px -26px}
  .acceso-nombre{font-size:2.6rem}
  .acceso-lema{margin:14px 0 0;max-width:none;color:#fff;font-size:1.75rem;line-height:1.14;letter-spacing:-.03em}
  .acceso-lema em{display:block}
  .acceso-lema-sub{display:block;margin-top:16px}
  .acceso-form{display:flex;align-items:center;margin:0;border-radius:0;padding:52px 52px 40px}
  .acceso-tit{font-size:1.75rem;margin-bottom:24px}
}
/* móvil en horizontal: poca altura, todo más prieto y sin el texto largo. La marca, que es
   adorno, cede ancho al formulario */
@media(min-width:560px) and (max-height:520px) and (orientation:landscape){
  .acceso{padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
  .acceso-caja{grid-template-columns:minmax(0,.7fr) minmax(0,1fr);min-height:0;max-width:820px;border-radius:24px}
  .acceso-marca{padding:20px 22px 22px}
  .acceso-logo{width:80px;margin:0 0 0 -10px}
  .acceso-nombre{font-size:1.6rem}
  .acceso-lema{font-size:1.05rem;margin-top:8px}
  .acceso-lema-sub{display:none}
  .acceso-form{padding:16px 24px 10px}
  .acceso-tit{font-size:1.3rem;margin-bottom:12px}
  .acceso-form .aviso{margin-bottom:10px;padding:9px 12px;font-size:.88rem;border-radius:13px}
  .acceso-form .form-group{margin-bottom:10px}
  .acceso-form .form-group>label{font-size:.85rem}
  .acceso-campo .form-control{min-height:48px}
  .acceso-entrar{margin-top:12px;min-height:48px}
  .acceso-ayuda{margin-top:4px;padding-top:0;border-top:0;font-size:.85rem}
  /* con un aviso de error la marca se retira y el aviso pasa a la izquierda, junto al formulario:
     con la poca altura del móvil en horizontal, «Entrar» se ve sin desplazar también con dos avisos */
  .acceso-caja:has(.aviso){grid-template-columns:minmax(0,1fr)}
  /* oculta a la vista pero no al lector de pantalla (como .sr): así la página conserva su h1 */
  .acceso-caja:has(.aviso) .acceso-marca{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  .acceso-caja:has(.aviso) .acceso-form-in{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    grid-template-rows:auto auto 1fr;column-gap:24px;align-items:start}
  .acceso-caja:has(.aviso) .acceso-form-in>*{grid-column:1}
  .acceso-caja:has(.aviso) .acceso-form-in>form{grid-column:2;grid-row:1/span 3}
  /* el contacto, abajo a la izquierda, en el hueco que dejan los avisos: así la columna del formulario
     no se alarga y todo cabe sin desplazar */
  .acceso-caja:has(.aviso) .acceso-ayuda{grid-column:1;grid-row:3;align-self:end;justify-content:flex-start;text-align:left;margin:0}
  .acceso-caja:has(.aviso) .acceso-ayuda a{margin-left:-6px}
}
/* móvil de pie no muy alto: con un aviso de error, fuera el lema, para que «Entrar» quede a la vista */
@media(max-width:519px) and (max-height:700px){
  .acceso-caja:has(.aviso) .acceso-lema{display:none}
}
/* móviles bajitos (SE, 320×568): la marca más pequeña para que el correo quede más arriba */
@media(max-width:519px) and (max-height:600px){
  .acceso-marca{padding-top:calc(12px + env(safe-area-inset-top));padding-bottom:42px}
  .acceso-logo{width:76px}
  .acceso-nombre{font-size:1.55rem}
  .acceso-lema{margin-top:6px;font-size:.92rem}
  .acceso-form{padding-top:20px}
  .acceso-tit{margin-bottom:14px}
  /* con avisos (peor caso: dos, en alemán, a 320×568) todo un poco más prieto para que «Entrar» quepa entero */
  .acceso-caja:has(.aviso) .acceso-logo{width:60px}
  .acceso-caja:has(.aviso) .acceso-marca{padding-bottom:36px}
  .acceso-caja:has(.aviso) .acceso-tit{margin-bottom:10px}
  .acceso-form .aviso{margin-bottom:10px;padding:9px 12px;font-size:.9rem;border-radius:13px}
  .acceso-caja:has(.aviso) .acceso-entrar{margin-top:14px}
  .acceso-form{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .acceso-ayuda{margin-top:12px}
}
/* móviles de pie altos (la mayoría: 390×844, 412×915): la marca crece con el lema largo y el contacto
   baja al pie de la hoja, para que no quede media pantalla en blanco. El correo sigue en la mitad de
   arriba (≈ 420-450 px), por encima del teclado */
@media(max-width:519px) and (min-height:740px){
  /* la marca ocupa algo menos de la mitad de arriba, con su contenido centrado (svh: la altura con las
     barras del navegador a la vista) */
  .acceso-marca{display:flex;flex-direction:column;justify-content:center;min-height:45vh;min-height:45svh;
    padding-top:calc(28px + env(safe-area-inset-top));padding-bottom:58px}
  .acceso-logo{width:112px}
  .acceso-nombre{font-size:2rem}
  .acceso-lema{margin-top:10px;font-size:1.06rem}
  .acceso-lema-sub{display:block;margin:10px auto 0;max-width:34ch;font-size:.92rem;line-height:1.45}
  .acceso-form{display:flex;flex-direction:column}
  .acceso-form-in{flex:1;display:flex;flex-direction:column}
  .acceso-ayuda{margin-top:auto}
  .acceso-entrar{margin-bottom:20px}
  /* con avisos, la marca vuelve a su tamaño corto: primero el aviso y el formulario */
  .acceso-caja:has(.aviso) .acceso-marca{min-height:0;padding-top:calc(22px + env(safe-area-inset-top));padding-bottom:48px}
  .acceso-caja:has(.aviso) .acceso-logo{width:92px}
  .acceso-caja:has(.aviso) .acceso-nombre{font-size:1.75rem}
  .acceso-caja:has(.aviso) .acceso-lema-sub{display:none}
}
@media(min-width:1200px){
  .acceso-caja{max-width:1060px;min-height:min(620px,calc(100vh - 56px))}
  .acceso-marca{padding:64px 60px 68px}
  .acceso-form{padding:60px 64px 44px}
}