/*
 * D-UI-ACCESO — pantalla de acceso (login) y su estado de carga, en los dos estilos (mesa claude/_CLAUDE_D_UI_ACCESO_MESA.md).
 * Mismo lenguaje que la selección (ui/seleccion.css): fondo cálido, título dorado, botón dorado, ui-marco.
 *   B · Estandartes  — un estandarte colgado con el acceso dentro, rayos de luz.
 *   A · Salón dorado — panel central con marco de oro y esquinas.
 * Trampas: v2-theme fuerza la tipografía con `* { … !important }` (P-UI-13): las fuentes van con !important.
 * rpg-typography.css trae reglas viejas por id (#emailAuthPanel > p, #splashLoginSkeletonWrap > p): se pisan aquí.
 */

#splashScreen.acc-pantalla { position: fixed; inset: 0; z-index: 20100; overflow-x: hidden; overflow-y: auto; margin: 0; padding: 0;
  background: #070503; color: var(--ui-tinta-1); display: block; }
#splashScreen.acc-pantalla.hidden { display: none !important; }
/* El gate y script_core esconden con la clase `hidden` (la de Tailwind, sin peso): dentro del splash manda siempre */
#splashScreen .hidden { display: none !important; }

/* ── El hueco entre pantallas (smoke en prod .511): con sesión el splash ni sale, y entre la carga y la selección se
   veía el fondo de siempre NÍTIDO (#v2Atmosphere y body::before con fondo.png, más niebla y relámpago v2). Se vela
   igual que la selección (seleccion.css .sel-fondo/.sel-velo): el paso a la selección ya no cambia de cuadro. ── */
/* Sólo fuera de la ciudad (body.ui-marco-activo la pone ui/marco.js con la ciudad a la vista): la ciudad y el combate,
   dentro del marco, no cambian. */
body.rpg-app:not(.ui-marco-activo)::before,
body:not(.ui-marco-activo) #v2Atmosphere .v2-atmosphere-gradient { filter: blur(4px) brightness(.4) sepia(.45) saturate(1.25) !important; }
body:not(.ui-marco-activo) #v2Atmosphere::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, rgba(90,58,14,.25), rgba(4,3,2,.88) 70%),
              linear-gradient(180deg, rgba(4,3,2,.5) 0%, transparent 30%, rgba(4,3,2,.9) 82%, #040302 100%); }
body:not(.ui-marco-activo) #v2Atmosphere .v2-atmosphere-fog,
body:not(.ui-marco-activo) #v2Atmosphere .v2-atmosphere-fog-bottom,
body:not(.ui-marco-activo) #v2Atmosphere .v2-atmosphere-lightning-tr { display: none !important; }
/* el pie viejo de app-shell (versión + copyright) asomaba arriba en el hueco; la versión ya sale en cada pantalla */
body:not(.ui-marco-activo) .app-shell > footer { display: none !important; }

/* ── Esqueletos y huecos (ui/acceso.js) ── */
#splashScreen [data-hueco] { display: contents; }
#splashScreen .acc-almacen, #splashScreen [data-esqueleto][hidden] { display: none !important; }

/* ── Fondo cálido (el de la selección: el paso de una a otra no se nota) ── */
#splashScreen .acc-fondo { position: fixed; inset: -24px; background: url('../assets/backgrounds/fondo.png') center 30% / cover;
  filter: blur(4px) brightness(.4) sepia(.45) saturate(1.25); }
#splashScreen .acc-velo { position: fixed; inset: 0;
  background: radial-gradient(ellipse at 50% 42%, rgba(90,58,14,.25), rgba(4,3,2,.88) 70%),
              linear-gradient(180deg, rgba(4,3,2,.5) 0%, transparent 30%, rgba(4,3,2,.9) 82%, #040302 100%); }
#splashScreen .acc-rayos { position: fixed; left: 50%; top: -220px; width: 1700px; height: 1300px; transform: translateX(-50%); opacity: .55; pointer-events: none;
  background: repeating-conic-gradient(from 180deg at 50% 0%, rgba(255,214,140,.12) 0deg 3deg, transparent 3deg 11deg);
  -webkit-mask: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 68%); mask: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 68%);
  animation: acc-girar 70s linear infinite; }
#splashScreen[data-estilo="A"] .acc-rayos { display: none; }
@keyframes acc-girar { to { transform: translateX(-50%) rotate(6deg); } }
/* polvo dorado que sube (sólo CSS: sale antes que cualquier script) */
#splashScreen .acc-polvo { position: fixed; inset: 0; pointer-events: none; opacity: .7;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 82%, rgba(255,214,140,.8), transparent 60%),
    radial-gradient(1px 1px at 28% 64%, rgba(255,214,140,.7), transparent 60%),
    radial-gradient(2px 2px at 47% 90%, rgba(255,214,140,.6), transparent 60%),
    radial-gradient(1px 1px at 63% 72%, rgba(255,214,140,.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 81% 86%, rgba(255,214,140,.6), transparent 60%),
    radial-gradient(1px 1px at 92% 58%, rgba(255,214,140,.7), transparent 60%);
  background-size: 640px 640px; animation: acc-polvo 26s linear infinite; }
@keyframes acc-polvo { to { background-position: 40px -640px; } }

/* ── Esqueleto común: columna centrada, pie abajo ── */
#splashScreen .acc-esq { position: relative; z-index: 2; min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3vh; padding: 5vh 16px 11vh; }
#splashScreen .acc-pie { position: absolute; left: 4vw; right: 4vw; bottom: 2.6vh; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }

/* ── Título ── */
#splashScreen .acc-titulo-bloque { text-align: center; }
#splashScreen .acc-titulo { margin: 0; font-family: 'Cinzel', serif !important; font-weight: 700 !important; font-size: clamp(30px, 3.1vw, 62px); line-height: 1.05;
  letter-spacing: .14em; text-transform: uppercase;
  background: linear-gradient(180deg, #fff3c4, #e0b252 55%, #9a6a1c); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(233,196,106,.38)) drop-shadow(0 2px 0 #000); }
#splashScreen .acc-lema { margin: 1vh 0 0; font-family: 'Cinzel', serif !important; font-size: clamp(13px, .95vw, 18px); letter-spacing: .26em; text-transform: uppercase;
  color: #e9d9b6; text-shadow: 0 2px 8px #000; }

/* ── B · Estandartes ── */
#splashScreen .acc-b-estandarte { position: relative; width: min(470px, 92vw); margin-top: 1vh; filter: drop-shadow(0 18px 30px rgba(0,0,0,.65)); }
#splashScreen .acc-b-tela { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 44px 36px 76px;
  clip-path: polygon(0 0, 100% 0, 100% 91%, 50% 100%, 0 91%);
  background: radial-gradient(ellipse at 50% 0%, rgba(255,214,140,.12), transparent 60%), linear-gradient(180deg, #4d1a12 0%, #2c0e09 55%, #180806 100%); }
#splashScreen .acc-b-tela::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 2px, transparent 2px 7px), linear-gradient(180deg, rgba(255,255,255,.07), transparent 30%, rgba(0,0,0,.4)); }
#splashScreen .acc-b-tela > * { position: relative; z-index: 1; }
#splashScreen .acc-b-borde { position: absolute; inset: -4px; clip-path: polygon(0 0, 100% 0, 100% 91%, 50% 100%, 0 91%);
  background: linear-gradient(135deg, #fff3c4, #c8963a 30%, #6b4a14 50%, #e9c46a 70%, #fff3c4); background-size: 300% 300%; animation: acc-oro 6s linear infinite; }
@keyframes acc-oro { to { background-position: 300% 0; } }
#splashScreen .acc-b-barra { position: absolute; left: -18px; right: -18px; top: -13px; height: 20px; border-radius: 10px; z-index: 3;
  background: linear-gradient(180deg, #ffe7a1, #9a6a1c); box-shadow: 0 3px 8px rgba(0,0,0,.7); }
#splashScreen .acc-b-barra::before, #splashScreen .acc-b-barra::after { content: ''; position: absolute; top: -5px; width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff3c4, #b07d26 70%); }
#splashScreen .acc-b-barra::before { left: -10px; }
#splashScreen .acc-b-barra::after { right: -10px; }

/* ── A · Salón dorado ── */
#splashScreen .acc-a-cabecera { text-align: center; }
#splashScreen .acc-esq--A .acc-titulo { letter-spacing: .22em; }
#splashScreen .acc-a-filete { width: 440px; max-width: 70vw; height: 14px; margin: 1.2vh auto 0; background:
  linear-gradient(90deg, transparent, #e0b252 30%, #ffe7a1 50%, #e0b252 70%, transparent) center/100% 1px no-repeat,
  radial-gradient(circle, #ffe7a1 0 3px, transparent 4px) center/14px 14px no-repeat; }
#splashScreen .acc-a-panel { width: min(470px, 92vw); box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; padding: 30px 32px;
  background: linear-gradient(180deg, rgba(22,16,8,.9), rgba(10,8,5,.94)); }

/* ── Estado del gate ── */
#splashScreen .acc-estado__panel { margin: 0; }
#splashScreen .acc-estado__texto { margin: 0; text-align: center; font-size: 13px; line-height: 1.5; color: #f1e3c4; }
#splashScreen .acc-estado__texto:empty, #splashScreen .acc-estado__panel:has(.acc-estado__texto:empty) { display: none; }
/* la línea de versión y uid de la cuenta (depuración): fuera de la vista */
#splashScreen .acc-espejo { display: none; }

/* ── Carga: sello y textos; compacta junto al formulario, grande cuando ya no hay formulario (paso a la selección) ── */
#splashScreen .acc-carga__inicio { display: flex; align-items: center; justify-content: center; gap: 14px; }
#splashScreen .acc-sello { flex: none; width: 42px; height: 42px; color: #e0b252; filter: drop-shadow(0 0 8px rgba(233,196,106,.45)); }
#splashScreen .acc-sello__giro { transform-origin: 50px 50px; animation: acc-sello 9s linear infinite; }
@keyframes acc-sello { to { transform: rotate(360deg); } }
#splashScreen .acc-carga__textos { min-width: 0; }
#splashScreen .acc-carga__titulo, #splashScreen #splashLoginSkeletonWrap > p:first-child { margin: 0; font-family: 'Cinzel', serif !important; font-weight: 700 !important;
  font-size: 12px !important; letter-spacing: .22em !important; text-transform: uppercase; color: #ffe7a1 !important; text-align: left; }
#splashScreen .acc-carga__estado { margin: 3px 0 0; font-size: 12px; line-height: 1.45; color: #c9b48c; font-style: italic; }
body.v2-auth--ready #splashScreen .acc-acceso { display: none; }
body.v2-auth--ready #splashScreen .acc-carga__inicio,
#splashScreen:has(#splashAuthColumn.hidden) .acc-carga__inicio { flex-direction: column; gap: 18px; padding: 10px 0 6px; }
body.v2-auth--ready #splashScreen .acc-sello,
#splashScreen:has(#splashAuthColumn.hidden) .acc-sello { width: 104px; height: 104px; }
body.v2-auth--ready #splashScreen .acc-carga__inicio .acc-carga__titulo,
#splashScreen:has(#splashAuthColumn.hidden) .acc-carga__inicio .acc-carga__titulo { font-size: 15px !important; text-align: center; }
body.v2-auth--ready #splashScreen .acc-carga__estado,
#splashScreen:has(#splashAuthColumn.hidden) .acc-carga__estado { text-align: center; font-size: 13px; }

/* «Preparando tus héroes…»: siluetas que brillan (estandartes en B, filas en A) */
#splashScreen .acc-carga__heroes { display: flex; flex-direction: column; gap: 14px; }
#splashScreen .acc-carga__heroes.hidden { display: none; }
#splashScreen #splashLoginSkeletonWrap > p:first-child { text-align: center; font-size: 14px !important; }
#splashScreen .acc-fantasmas { display: flex; gap: 12px; justify-content: center; }
#splashScreen .acc-fantasma { position: relative; overflow: hidden; width: 30%; height: 150px; border: 1px solid rgba(200,168,96,.3);
  clip-path: polygon(0 0, 100% 0, 100% 88%, 50% 100%, 0 88%); background: linear-gradient(180deg, rgba(233,196,106,.2), rgba(120,84,30,.12) 60%, rgba(30,20,8,.3)); }
#splashScreen[data-estilo="A"] .acc-fantasmas { flex-direction: column; }
#splashScreen[data-estilo="A"] .acc-fantasma { width: auto; height: 54px; clip-path: none; border-radius: 6px;
  background: linear-gradient(90deg, rgba(40,30,14,.6), rgba(16,12,7,.45)); }
#splashScreen .acc-fantasma::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 50%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,231,161,.22), transparent); animation: acc-barrido 1.8s ease-in-out infinite; }

/* ── Formulario ── */
/* textos corridos en Montserrat (el tema viejo pone Cinzel a todo con !important) */
#splashScreen .acc-form__pista, #splashScreen .acc-casilla, #splashScreen .acc-casilla span, #splashScreen .acc-estado__texto,
#splashScreen .acc-carga__estado { font-family: 'Montserrat', sans-serif !important; letter-spacing: normal !important; text-transform: none !important; }
#splashScreen .acc-acceso.hidden, #splashScreen .acc-acceso__columna.hidden { display: none; }
#splashScreen .acc-form { display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
#splashScreen .acc-form__titulo, #splashScreen #emailAuthPanel > p:first-of-type { margin: 0; display: flex; align-items: center; gap: 12px; font-family: 'Cinzel', serif !important;
  font-weight: 700 !important; font-size: 13px !important; letter-spacing: .26em !important; text-transform: uppercase; color: #e9c46a !important; }
#splashScreen .acc-form__titulo::before, #splashScreen .acc-form__titulo::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(233,196,106,.6)); }
#splashScreen .acc-form__titulo::after { background: linear-gradient(90deg, rgba(233,196,106,.6), transparent); }
#splashScreen .acc-form__pista { margin: 0; text-align: center; font-size: 12px; line-height: 1.5; color: #a8957a; display: block; }
#splashScreen .acc-form__grupo { display: flex; flex-direction: column; gap: 11px; }
#splashScreen .acc-form__grupo.hidden { display: none; }
#splashScreen .acc-campo { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 5px; font-family: 'Montserrat', sans-serif !important; font-size: 15px;
  color: #f6e6c2; background: rgba(6,5,3,.78); border: 1px solid rgba(200,168,96,.45); box-shadow: inset 0 1px 4px rgba(0,0,0,.6);
  -webkit-user-select: text; user-select: text; transition: border-color .15s, box-shadow .15s; }
#splashScreen .acc-campo::placeholder { color: #7d6c52; font-family: 'Montserrat', sans-serif !important; }
#splashScreen .acc-campo:focus { outline: none; border-color: #ffe7a1; box-shadow: inset 0 1px 4px rgba(0,0,0,.6), 0 0 0 3px rgba(233,196,106,.2), 0 0 16px rgba(233,196,106,.25); }
#splashScreen .acc-campo--codigo { text-align: center; font-size: 22px; letter-spacing: .5em; font-family: ui-monospace, Consolas, monospace !important; }
#splashScreen .acc-casilla { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #c9b48c; cursor: pointer; -webkit-user-select: none; user-select: none; }
#splashScreen .acc-casilla input { width: 16px; height: 16px; margin: 0; accent-color: #c8963a; cursor: pointer; }
#splashScreen .acc-form__botones { display: flex; gap: 10px; margin-top: 4px; }
#splashScreen .acc-form__botones.hidden { display: none; }
#splashScreen .acc-form__botones--columna { flex-direction: column; }
#splashScreen .acc-boton { flex: 1; cursor: pointer; border-radius: 5px; padding: 12px 14px; font-family: 'Cinzel', serif !important; font-weight: 700 !important;
  font-size: 12px; letter-spacing: .14em !important; text-transform: uppercase; color: #f1e3c4; background: rgba(10,8,5,.78); border: 1px solid rgba(200,168,96,.5);
  transition: border-color .15s, box-shadow .15s, filter .15s; touch-action: manipulation; }
#splashScreen .acc-boton:hover, #splashScreen .acc-boton:focus-visible { outline: none; border-color: #ffe7a1; color: #fff3c4; box-shadow: 0 0 14px rgba(233,196,106,.3); }
#splashScreen .acc-boton--principal { color: #1b1406; border-color: #e9c46a; background: linear-gradient(180deg, #ffe7a1 0%, #e0b252 45%, #b07d26 100%);
  box-shadow: 0 0 0 1px #5a3f10 inset, 0 0 18px rgba(233,196,106,.35); }
#splashScreen .acc-boton--principal:hover, #splashScreen .acc-boton--principal:focus-visible { color: #1b1406; filter: brightness(1.08); box-shadow: 0 0 0 1px #5a3f10 inset, 0 0 26px rgba(233,196,106,.6); }
#splashScreen .acc-boton:disabled { filter: grayscale(.8) brightness(.6); cursor: default; }

/* ── Entrar al mundo (tras sesión), cerrar sesión, versión ── */
#splashScreen .acc-entrar { position: relative; overflow: hidden; cursor: pointer; width: 100%; border: 1px solid #e9c46a; border-radius: 50px; padding: 18px 30px;
  font-family: 'Cinzel', serif !important; font-weight: 700 !important; letter-spacing: .16em !important; text-transform: uppercase; font-size: 17px; color: #1b1406;
  background: linear-gradient(180deg, #ffe7a1 0%, #e0b252 45%, #b07d26 100%); box-shadow: 0 0 0 1px #5a3f10 inset, 0 0 26px rgba(233,196,106,.5), 0 8px 18px rgba(0,0,0,.6); }
#splashScreen .acc-entrar.hidden { display: none; }
#splashScreen .acc-entrar::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: acc-barrido 3.6s ease-in-out infinite; }
@keyframes acc-barrido { 0%, 55% { left: -60%; } 100% { left: 140%; } }
#splashScreen .acc-salir { cursor: pointer; border-radius: 5px; padding: 9px 18px; background: rgba(10,8,5,.75); color: #d9c9a6; border: 1px solid rgba(200,168,96,.45);
  font-family: 'Cinzel', serif !important; letter-spacing: .12em !important; text-transform: uppercase; font-size: 12px; }
#splashScreen .acc-salir.hidden { display: none; }
#splashScreen .acc-salir:hover { border-color: #e9c46a; color: #ffe7a1; }
#splashScreen .acc-version { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #7d6c52; }

/* ── Efectos reducidos ── */
body.ui-efectos-reducidos #splashScreen .acc-rayos, body.ui-efectos-reducidos #splashScreen .acc-polvo { display: none; }
body.ui-efectos-reducidos #splashScreen .acc-b-borde, body.ui-efectos-reducidos #splashScreen .acc-entrar::after,
body.ui-efectos-reducidos #splashScreen .acc-sello__giro, body.ui-efectos-reducidos #splashScreen .acc-fantasma::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
  #splashScreen .acc-rayos, #splashScreen .acc-polvo, #splashScreen .acc-b-borde, #splashScreen .acc-entrar::after,
  #splashScreen .acc-sello__giro, #splashScreen .acc-fantasma::after { animation: none; }
}

/* ── Pantallas bajas y móvil: todo en columna y con desplazamiento ── */
@media (max-height: 760px) {
  #splashScreen .acc-esq { justify-content: flex-start; gap: 2vh; padding-top: 3vh; }
  #splashScreen .acc-b-tela { padding: 36px 28px 64px; gap: 12px; }
  #splashScreen .acc-a-panel { padding: 22px 26px; gap: 12px; }
}
@media (max-width: 600px) {
  #splashScreen .acc-esq { padding: 4vh 12px 3vh; }
  #splashScreen .acc-pie { position: static; width: 100%; margin-top: 2vh; }
  #splashScreen .acc-b-tela { padding: 36px 20px 60px; }
  #splashScreen .acc-a-panel { padding: 22px 18px; }
  #splashScreen .acc-form__botones { flex-direction: column; }
  #splashScreen .acc-fantasma { height: 110px; }
}