/* Interfaz de fantasía: piedra oscura, latón envejecido y escenas de la campaña. */
:root{color-scheme:dark;--fondo:#101112;--papel:#191a1b;--tinta:#e9e1d1;--suave:#b8b1a3;--linea:#66543a;--acento:#c4a26a;--oscuro:#0c0e10;--agua:#d0b17c;--error:#ef9d91;--oro:#c4a26a;--oro-claro:#ecd7ab;font-family:'Segoe UI',system-ui,sans-serif;background:#101112;color:var(--tinta)}
body{background:radial-gradient(ellipse at 80% 0,#31302844,transparent 60%),#101112;min-height:100vh}
body:has(#acceso:not([hidden])){background:linear-gradient(90deg,#070c12a8,#080d1377 50%,#070a0ee8),linear-gradient(0deg,#090b0f 0%,transparent 70%),url('/fondo-acceso') center/cover fixed no-repeat}
header{position:relative;z-index:2;min-height:90px;padding:1.4rem clamp(1rem,4vw,5rem);background:linear-gradient(#0c0e10f5,#101112cc);border-bottom:1px solid #9b80514d;box-shadow:0 8px 40px #0003}
.marca{font:1.5rem/1.15 Georgia,'Times New Roman',serif;letter-spacing:.09em;text-transform:uppercase;color:var(--oro-claro);text-shadow:0 2px 16px #000}
.marca span{display:inline-block;font-size:2rem;color:#cba46c;margin-right:.7rem;vertical-align:middle}
#identidad{color:#d5c8b0;letter-spacing:.035em}
#salir{color:var(--oro-claro);border-color:#8f754b;background:#151619}
main{max-width:1500px;padding:2rem clamp(1rem,4vw,5rem) 5rem}
h1,h2,h3{color:#f2e8d5;font-family:Georgia,'Times New Roman',serif;font-weight:400}
h1{font-size:clamp(2rem,3.2vw,3.5rem);letter-spacing:-.025em;line-height:1.1}
h2{font-size:1.7rem}h3{font-size:1.1rem;color:#e5cca2}
p{line-height:1.75}.etiqueta{font-size:.7rem;color:var(--oro);letter-spacing:.2em;font-weight:600}.nota{color:var(--suave)}
.tarjeta{position:relative;border-radius:2px;border:1px solid #8d744448;background:linear-gradient(135deg,#252522aa,#17191bed);box-shadow:0 12px 38px #0002}
button{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:.92rem;text-transform:uppercase;letter-spacing:.055em;border-radius:1px;border:1px solid #d1ad71;background:linear-gradient(115deg,#e1c691,#ad8551);color:#191817;box-shadow:inset 0 0 0 3px #17130d22;padding:.75rem 1.2rem;transition:border-color .15s,background .15s,box-shadow .15s}
button:hover{filter:none;background:linear-gradient(115deg,#f1dab0,#c29c68);box-shadow:0 0 22px #c49d5426,inset 0 0 0 3px #17130d22}
button:disabled{opacity:.45}.secundario{color:#e6d4b5;background:linear-gradient(135deg,#282621,#191b1e);border-color:#8e744d80;box-shadow:inset 0 0 0 3px #13141570}
.secundario:hover{background:#363025;border-color:var(--oro);color:#fff0d8}
:focus-visible{outline:2px solid #f2ce87;outline-offset:4px}
input,textarea,select{background:#0e1115;color:#f0e6d5;border:1px solid #7c6849;border-radius:1px;box-shadow:inset 0 2px 6px #0003}
input::placeholder,textarea::placeholder{color:#979184}label{color:#d9c6a3;font-size:.9rem;font-weight:500}
.barra{padding-bottom:1.3rem;border-bottom:1px solid #9b805144;margin-bottom:2rem;gap:.7rem}
nav{gap:.4rem}nav button{font-size:.8rem;letter-spacing:.08em;border:1px solid transparent;color:#bcae96;background:none;box-shadow:none}
nav button:hover{color:#f3dbaf;background:#a17e3e12;box-shadow:none;border-color:#8c724444}
nav button[aria-current=page]{color:#eed5a3;background:linear-gradient(#5a422a44,#33291d55);border-color:#a98a5677;box-shadow:inset 0 -2px #c3a066}
#conexion{font-size:.75rem;color:#a59c8c}
.acceso{max-width:none;margin:5vh 0 3vh;min-height:65vh;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(310px,.8fr);align-items:center;gap:clamp(2rem,7vw,7rem)}
.acceso-relato{padding:2rem 0}.acceso-relato h1{font-size:clamp(3rem,6.3vw,6.4rem);line-height:1.02;letter-spacing:-.045em;margin:1.3rem 0 1.5rem;text-shadow:0 3px 25px #0008}
.acceso-relato>p:last-child{font-size:1.1rem;line-height:1.9;color:#e4ded0;font-weight:300}
.ornamento{display:flex;align-items:center;gap:1rem;color:#cba870;font-size:.7rem;max-width:320px;margin:2rem 0}.ornamento:before,.ornamento:after{content:'';height:1px;flex:1;background:linear-gradient(90deg,transparent,#cba870)}.ornamento:after{transform:scaleX(-1)}
.acceso-formulario{background:#101419e8;border-color:#c5a16b88;padding:2.4rem;box-shadow:0 20px 80px #0008,inset 0 0 0 6px #8c754618;backdrop-filter:blur(14px)}
.acceso-formulario:before,.acceso-formulario:after{content:none}
.acceso-formulario h2{font-size:1.9rem}.acceso form button{width:100%;margin:1.6rem 0 1.1rem}.acceso .nota{text-align:left;margin-bottom:1rem}.acceso .acceso-pie{text-align:center;font-size:.72rem;margin-bottom:0;color:#a89a82}
.cabecera-vista{align-items:center}.insignia{border-radius:1px;border-color:#b2935c77;background:#342c2055;color:#e1c797;font-family:Georgia,serif;letter-spacing:.03em}
.escena{position:relative;margin:1.8rem 0 0;padding:0;display:grid;overflow:hidden;border:1px solid #8c744a75;box-shadow:0 12px 50px #0006}
.escena>.ilustracion-localizacion{grid-area:1/1;display:block;width:100%;height:auto;max-height:none;max-width:100%;object-fit:initial;border-radius:0;background:none}
.escena-cabecera{grid-area:1/1;align-self:end;position:relative;z-index:1;padding:clamp(1rem,3vw,2.8rem);padding-top:4.5rem;background:linear-gradient(transparent,#060b10de);pointer-events:none}
.escena-cabecera .etiqueta{color:#e6cd9b;margin-bottom:.5rem}.escena-cabecera h2{font-size:clamp(1.6rem,3vw,3.1rem);margin:0;line-height:1.1;text-shadow:0 2px 10px #0008}
.escena .revelacion-personaje{grid-column:1;padding:1.8rem;margin-top:0;background:#15191c;border-color:#73604366}
.mapa-columnas{margin-top:2rem;gap:1.5rem}.mapa-progresivo{border-radius:2px;border-color:#9f8157;background:#eee4d2;box-shadow:0 10px 35px #0004}.mapa-lienzo{line-height:0}.rotulo-mapa{position:absolute;z-index:2;transform:translate(-50%,-125%);max-width:min(30vw,15rem);padding:.12rem .52rem;border:1px solid #6d5838;border-radius:2px;background:#fff6e5ed;color:#251d13;box-shadow:0 1px 4px #0005;font:clamp(1rem,2vw,1.65rem)/1 Gabriola,'Apple Chancery','URW Chancery L',cursive;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.015em}.punto-mapa{z-index:3}.formulario-evolucion{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.2rem 1rem}.formulario-evolucion h2,.formulario-evolucion p,.formulario-evolucion .acciones{grid-column:1/-1}.formulario-evolucion p{margin-bottom:.5rem}.lista-marcas{gap:.7rem}.lista-marcas>h2{font-size:1.25rem;margin:.1rem 0 .5rem;color:#d8c29a}
.selector-mapas{margin:1.4rem 0 0;padding:1rem 1.1rem;border:1px solid #8d744448;background:#171817}.selector-mapas>.etiqueta{margin:.1rem 0 .8rem}.selector-mapas .acciones{gap:.5rem;flex-wrap:wrap}.selector-mapas button[aria-pressed=true]{border-color:#efd5a2;box-shadow:inset 0 0 0 2px #17130d33,0 0 18px #c49d5420}.nombre-capital-evolucionado{grid-template-columns:1fr;margin-top:.9rem}.nombre-capital-evolucionado label,.nombre-capital-evolucionado input{grid-column:1;width:100%}
.fila-marca{border-radius:1px;background:linear-gradient(125deg,#242522,#191b1d);border-color:#745d3d55;border-left:2px solid #ae8b52;padding:1rem 1.15rem}.fila-marca h3{font-size:1.17rem}.fila-marca .nota{font-size:.8rem}
.panel-direccion{padding:1rem;background:#1b1c1d;border:1px solid #79634244;gap:.7rem}.panel-direccion button{font-size:.8rem;min-height:3rem}
.puertas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.puertas button{height:100%;padding:.8rem .6rem}.puertas button:nth-child(n+5){grid-column:1/-1}
.perfil{gap:2.7rem;grid-template-columns:minmax(230px,330px) minmax(0,1fr)}.perfil>aside{position:sticky;top:1.5rem}.retrato{border-radius:1px;border:1px solid #b39159;padding:6px;background:#15191b;box-shadow:0 10px 40px #0007}
.descripcion-personaje{border-top:2px solid #bb975d}.descripcion-personaje h2,.rasgos h2{color:#e8ce9d}.descripcion-personaje p{font-size:1.02rem;color:#d3cabb}.rasgos{background:#1b1d1e}.rasgos article+article{border-color:#6a583d66}
.titulo-seccion{display:flex;align-items:center;gap:1rem;color:#e4c68e;margin:2.2rem 0 1.2rem}.titulo-seccion:after{content:'';height:1px;flex:1;background:linear-gradient(90deg,#8c724b,transparent)}
.capacidad{border-left:2px solid #ac8c56}.capacidad-cabecera{gap:1rem}.capacidad-cabecera h2{font-size:1.4rem;color:#e7d2ad}.icono-capacidad{border-radius:2px;background:radial-gradient(circle,#67542d70,#1b2024);border-color:#94794988}
.arcano{background:#11161a;border-color:#6f5d414f;border-radius:1px}.arcano h3{color:#e1bf84}.hechizo-referencia,.ingredientes{border-color:#77604466}.hechizo-referencia strong{color:#ccb58e}.ejemplo-general{border-color:#9b7d4a;color:#bcb2a1}.ejemplo-general strong{color:#dfc594}.ingrediente{background:#25251f;border-color:#7a674477;border-radius:2px;color:#d6c7ac}
.previsualizacion{background:#1c1e20;border-color:#aa895266;border-radius:2px}.acceso-fila{background:#1b1e20}.acceso-fila form{max-width:520px}
.chat-caja{background:linear-gradient(135deg,#232524,#14181d)}.conversaciones button{font-family:'Segoe UI',sans-serif;letter-spacing:0;text-transform:none;background:#1c2023;border-color:#68573b55;color:#cbbda4}.conversaciones button[aria-pressed=true]{background:#4a3e2b;color:#f0dab1;border-color:#be9c63}
.mensaje{background:#2b3032;border:1px solid #685f4f66;color:#e2d9c9;border-radius:4px 4px 4px 0}.mensaje.propio{background:#3d3529;border-color:#9c7d4e66;border-radius:4px 4px 0 4px}.mensaje small{color:#baad96}.compositor{border-color:#7d664b66}.compositor textarea{background:#10161b}
dialog{color:var(--tinta);background:linear-gradient(140deg,#282923,#15191e);border:1px solid #b9985f;border-radius:2px;box-shadow:0 30px 100px #000b}dialog::backdrop{background:#030609c4;backdrop-filter:blur(5px)}
#aviso{background:#302b21;border:1px solid #c8a76a;color:#f2e1c2;border-radius:2px;box-shadow:0 8px 35px #0007}
.vacio{background:#171c20;color:#a99e8c}.vacio h2{color:#e0c69c}.nombre-pendiente{background:#302c20!important;color:#f1ddb7}.ilustracion-personaje{background:#202629;border-radius:2px}hr{border:0;border-top:1px solid #7c674355;margin:2rem 0}
@media(max-width:1000px){.acceso{gap:2rem;grid-template-columns:1fr 1fr}.acceso-formulario{padding:1.8rem}.perfil{gap:1.5rem}.puertas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){header{padding:1rem;min-height:74px}.marca{font-size:1.15rem}.marca span{font-size:1.4rem}main{padding:1.4rem 1rem 4rem}.acceso{display:block;margin:0 auto;max-width:500px}.acceso-relato{padding:.8rem 0 1rem}.acceso-relato h1{font-size:3.3rem;margin:.8rem 0}.acceso-relato>p:last-child{font-size:.95rem}.acceso-relato .ornamento{margin:1.2rem 0}.acceso-formulario{padding:1.7rem}.barra{margin-bottom:1.5rem;gap:.6rem}nav{gap:.2rem}nav button{font-size:.72rem;padding:.65rem .7rem}.perfil>aside{position:static}.escena-cabecera{padding:1.2rem;padding-top:3.5rem}.panel-direccion{padding:.7rem}.puertas{grid-template-columns:1fr 1fr}.puertas button{font-size:.75rem}.cabecera-vista h1{font-size:2rem}.capacidad-cabecera h2{font-size:1.15rem}.mapa-columnas{margin-top:1.2rem}.selector-mapas{padding:.8rem}.selector-mapas .acciones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.selector-mapas button{font-size:.72rem;min-width:0;padding:.7rem .45rem}}
@media(max-width:380px){.acceso-relato h1{font-size:2.6rem}.acceso-formulario{padding:1.2rem}.puertas{grid-template-columns:1fr}.puertas button:nth-child(n+5){grid-column:auto}.escena-cabecera h2{font-size:1.5rem}}
@media(prefers-reduced-motion:reduce){button{transition:none}}
.viaje{padding:.75rem 1rem;border-left:2px solid #ba965c;color:#ddc99f;letter-spacing:.025em}
.habilidades-reservadas{border-left:2px solid #927750}.habilidades-reservadas h2{color:#e4ca98}
.estado-habilidades{min-width:190px;border:1px solid #8b744d;border-radius:2px;background:#322a21;color:#efd4a0;font-size:.9rem;letter-spacing:.035em}
.estado-habilidades[aria-pressed=true]{border-color:#82a87a;background:#24382b;color:#d4edcb}
.estado-habilidades[aria-pressed=false]{border-color:#987647;background:#392d20;color:#f0d5a3}
.empezar-campana{min-height:3.25rem;padding:.8rem 1.7rem;border:1px solid #d5b578;border-radius:2px;background:linear-gradient(115deg,#705633,#3d3021);color:#fff0cf;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 0 0 1px #c39c5a33,inset 0 0 18px #d2ad5c12}
.empezar-campana:hover{filter:brightness(1.18);box-shadow:0 0 18px #c99f5a48}
#dialogo-qr{width:min(94vw,560px);max-height:92dvh;overflow:auto;padding:clamp(1rem,4vw,2rem)}
#dialogo-qr form{min-width:0}#dialogo-qr .acciones{margin-top:1rem}
#qr-presentacion{display:grid;justify-items:center;gap:.8rem;padding:1rem;border:1px solid #8f764d;background:#f6f1e7;color:#171717}
#qr-imagen{display:block;width:min(100%,320px);height:auto;image-rendering:pixelated}
.enlace-personal{display:block;width:100%;overflow-wrap:anywhere;color:#5c4524;text-align:center;font-size:.9rem}
@media(max-width:700px){header{padding-top:max(1rem,env(safe-area-inset-top));padding-left:max(1rem,env(safe-area-inset-left));padding-right:max(1rem,env(safe-area-inset-right))}main{padding-bottom:max(4rem,env(safe-area-inset-bottom))}#dialogo-qr .acciones button{flex:1 1 100%;min-height:48px}.enlace-personal{font-size:.78rem}}

@media(max-width:600px){.formulario-evolucion{grid-template-columns:1fr}.rotulo-mapa{max-width:38vw;font-size:1.05rem;padding:.1rem .35rem}}
