@font-face{font-family:Hue;src:url('./assets/hb-hue.woff2') format('woff2');font-display:swap}
:root{--fondo:#fff;--tinta:#232a32;--azul:#244487;--borde:#d3cfc7;--suave:#545b64;--papel:#fff;--foco:#ac4a24}
*{box-sizing:border-box}body{margin:0;background:var(--fondo);color:var(--tinta);font:15px/1.45 system-ui,sans-serif;min-height:100svh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100svh;overflow:hidden}
button,select{font:inherit;color:inherit;min-height:44px;border:1px solid var(--borde);border-radius:5px;background:var(--papel);padding:8px 14px}button{cursor:pointer}button:disabled,select:disabled{opacity:.5;cursor:default}button:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid var(--foco);outline-offset:3px}button[aria-pressed=true],#ir{background:var(--azul);color:#fff;border-color:var(--azul)}button svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
header{padding:20px 30px 12px;display:flex;align-items:center;justify-content:space-between;gap:18px}.identidad,.planta{display:flex;align-items:center;gap:22px}.identidad img{height:40px;width:83px}h1{font-family:Hue,Georgia,serif;font-size:32px;font-weight:400;line-height:1;margin:0}.planta span{font-variant-numeric:tabular-nums}
main{position:relative;min-height:0;isolation:isolate}#escena{position:absolute;inset:0}canvas{display:block;width:100%;height:100%;touch-action:none;outline-offset:-4px}#estado{position:absolute;left:30px;bottom:8px;margin:0;padding:7px 11px;max-width:min(500px,calc(100% - 100px));background:var(--fondo);pointer-events:none;font-size:14px}.herramientas{position:absolute;right:24px;bottom:16px;display:flex;flex-direction:column;gap:7px}.herramientas button{padding:11px}
footer{padding:13px 30px 16px;border-top:1px solid var(--borde);background:var(--fondo)}.recorrido{display:flex;align-items:center;gap:10px}.recorrido select{min-width:220px;max-width:100%}.ayuda{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:8px}.ayuda p,.nota{margin:0;color:var(--suave);font-size:13px}.nota{margin-top:3px;font-size:12px}.ayuda button{border:0;background:transparent;text-decoration:underline;text-underline-offset:4px;padding-right:0}.ayuda button[aria-pressed=true]{color:var(--azul)}#error{position:absolute;inset:25% 15% auto;background:var(--papel);border:1px solid var(--borde);padding:24px;z-index:2}#error[hidden]{display:none}::selection{background:#c4d4ef;color:var(--tinta)}select{accent-color:var(--azul)}
@media(hover:hover){button:enabled:hover{border-color:var(--azul)}#ir:enabled:hover{background:#1c376d}}
@media(max-width:650px){header{padding:16px 16px 8px}.identidad,.planta{gap:10px}.identidad img{width:61px;height:30px}h1{font-size:27px}.planta span{font-size:13px}.planta button{padding:8px 12px}footer{padding:10px 16px 14px}.recorrido{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px}.recorrido select{min-width:0;width:100%;font-size:14px}.recorrido #parar{grid-column:3}.recorrido #ir{grid-column:2;grid-row:2}.ayuda{align-items:flex-start;gap:8px}.ayuda p{font-size:12px;max-width:220px}.ayuda button{font-size:12px;white-space:nowrap;padding:0;min-height:44px}#estado{left:12px;font-size:12px;bottom:8px}.herramientas{right:12px;bottom:10px}.nota{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}}
canvas{cursor:grab}canvas.arrastrando{cursor:grabbing}.recorrido [hidden]{display:none}
.herramientas{align-items:flex-end}.herramientas select{max-width:150px;font-size:12px;width:150px}.etiqueta-vista{font-size:12px;background:var(--fondo)}#girar{font-size:13px;min-width:64px}
#animacion{font-size:12px;white-space:nowrap;padding:5px}
@media(max-width:650px){.herramientas{gap:5px}.herramientas select{width:110px;max-width:110px}#animacion{white-space:normal}.ayuda{flex-wrap:wrap}.ayuda p{max-width:none;flex-basis:100%}}
@media(max-width:650px){.recorrido #levantarse{grid-column:3;grid-row:2;font-size:12px;padding:8px}.herramientas{top:8px;bottom:auto;display:grid;grid-template-columns:repeat(3,44px);gap:5px}.herramientas .etiqueta-vista{display:none}.herramientas select{grid-column:span 2;width:93px;max-width:93px;padding:5px}.herramientas #girar{min-width:0;padding:5px;font-size:12px}.herramientas button{padding:11px}}
#tu-personaje{position:absolute;left:0;top:0;font-size:12px;font-weight:600;line-height:1.3;color:#fff;background:var(--azul);padding:3px 7px;border-radius:3px;pointer-events:none;transform:translate(-100px,-100px)}
dialog{width:min(580px,calc(100% - 24px));max-height:calc(100svh - 24px);padding:24px;border:1px solid var(--borde);border-radius:8px;color:var(--tinta);background:var(--fondo);overflow-y:auto;overscroll-behavior:contain}dialog::backdrop{background:rgb(35 42 50 / .42)}.perfil-cabecera{display:flex;align-items:center;justify-content:space-between;gap:16px}.perfil-cabecera h2{font:30px/1.1 Hue,Georgia,serif;margin:0}.perfil-aviso{font-size:13px;color:var(--suave);line-height:1.5;margin:14px 0 22px}form label{display:block;margin:14px 0 5px}form input:not([type=radio]),form textarea{font:inherit;width:100%;min-width:0;border:1px solid var(--borde);border-radius:4px;background:var(--papel);color:inherit;padding:10px;min-height:44px}form textarea{resize:vertical}form input:focus-visible,form textarea:focus-visible{outline:3px solid var(--foco);outline-offset:2px}.perfil-dos{display:grid;grid-template-columns:1fr 1fr;gap:16px}.foto-edicion{display:flex;align-items:center;gap:12px;margin-top:8px}.foto-edicion img,#ficha-foto{object-fit:cover;border-radius:50%}.elegir-avatar{padding:12px;border:1px solid var(--borde);border-radius:4px;margin:22px 0 12px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.elegir-avatar legend{padding:0 5px}.elegir-avatar label{display:grid;grid-template-columns:auto 1fr;gap:4px;align-items:center;justify-items:center;margin:0;cursor:pointer;padding:4px;border-radius:4px;min-height:44px}.elegir-avatar label:has(:checked){background:#e3e9f4;outline:1px solid var(--azul)}.elegir-avatar img{grid-column:1 / -1;grid-row:1;object-fit:contain}.elegir-avatar input{accent-color:var(--azul);width:18px;height:18px}.perfil-acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}#guardar-perfil{background:var(--azul);color:white;border-color:var(--azul)}#perfil-estado{font-size:14px;line-height:1.5}.ficha-identidad{display:flex;align-items:center;gap:15px}.ficha-identidad h3{font-size:21px;line-height:1.3;overflow-wrap:anywhere;margin:0 0 4px}.ficha-identidad p{margin:0}.ficha-identidad>div{flex:1;min-width:0}#ficha-avatar{object-fit:contain;flex-shrink:0}#ficha-inicial{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;background:#e3e9f4;color:var(--azul);font-size:27px;flex-shrink:0}#ficha-inicial[hidden]{display:none}#ficha-resumen,dd{white-space:pre-wrap;overflow-wrap:anywhere}dl{display:grid;gap:14px}dt{font-size:13px;color:var(--suave)}dd{margin:2px 0 0}#ficha-enlace{color:var(--azul);overflow-wrap:anywhere}#ficha [hidden],form[hidden],section[hidden]{display:none}
@media(max-width:650px){header{flex-wrap:wrap;gap:10px}.planta{flex:1;justify-content:flex-end;gap:8px}#abrir-perfil{padding:8px 10px;font-size:13px}.planta span{position:absolute;top:58px;left:16px;font-size:12px}main{margin-top:14px}dialog{padding:18px}.perfil-dos{grid-template-columns:1fr;gap:0}.ficha-identidad{gap:10px}#ficha-foto{width:60px;height:60px}#ficha-inicial{width:54px;height:54px}.elegir-avatar{padding:10px;gap:4px}.elegir-avatar label{font-size:13px}}

#perfil-dialogo{width:min(760px,calc(100% - 24px))}
main{overflow:hidden}
#creador-personaje{margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--borde)}
.personaje-cabecera{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.personaje-cabecera h3{margin:0;font:25px/1.2 Hue,Georgia,serif}
.personaje-editor{display:grid;grid-template-columns:minmax(180px,.9fr) minmax(0,1fr);gap:24px;align-items:start}
.personaje-vista{background:var(--papel);padding:8px 14px 14px;border-radius:5px}
#personaje-previa{height:290px;display:flex;justify-content:center}
#personaje-previa canvas{width:auto;height:100%;max-width:100%;object-fit:contain}
.personaje-vista label{margin-top:0;font-size:13px}
form #personaje-giro{padding:0;accent-color:var(--azul);background:transparent;border:0;cursor:ew-resize}
.personaje-campos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.personaje-campos label{margin:0 0 5px;font-size:13px}
.personaje-campos select{width:100%;min-width:0;padding:8px;font-size:14px}
.personaje-opciones .elegir-avatar{grid-template-columns:1fr 1fr;margin:18px 0 12px;padding:10px;gap:6px}
.personaje-opciones .elegir-avatar label{display:flex;justify-content:flex-start;gap:6px;padding:6px;font-size:13px}
.muestra{display:inline-block;width:17px;height:17px;border:1px solid var(--tinta);border-radius:3px;flex-shrink:0}
.muestra.azul{background:#244487}.muestra.coral{background:#b76040}.muestra.lila{background:#9978bb}.muestra.oliva{background:#7c8157}
#personaje-estado{margin-top:12px}
#ficha-avatar{width:84px;height:105px}
dialog::backdrop{background:#fff}
.perfil-cabecera h2 img{display:block;width:83px;height:auto}
.solo-lectura{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#menu-salon{margin-left:auto}
.salon-limpio .planta,.salon-limpio .herramientas,.salon-limpio footer{display:none}
.salon-limpio{grid-template-rows:auto minmax(0,1fr)}
.salon-limpio main{margin-top:0}
@media(max-width:650px){body:not(.salon-limpio) .planta{flex-basis:100%}body:not(.salon-limpio) .planta span{position:static;margin-right:auto}}

@media(max-width:650px){
  .personaje-editor{grid-template-columns:1fr;gap:18px}
  #personaje-previa{height:220px}
  .personaje-cabecera h3{font-size:23px}
  .personaje-cabecera button{padding:8px 10px;font-size:13px}
  .personaje-opciones .elegir-avatar{grid-template-columns:1fr 1fr}
}