/* El `min-width` es lo que arregla el aplastamiento, y costo dos intentos.
   El globo se dimensiona a su contenido (`align-self:flex-start`) y el
   retrato lleva `float:left`: 28px mas 9 de margen. Con un mensaje CORTO el
   globo se encogia a 59px —37 por dentro— y el float se los comia enteros,
   asi que al texto le quedaban cero y el nombre caia partido letra a letra.
   Medido: «bob» ocupaba tres renglones.
   `break-word` en vez de `anywhere` se queda como segunda proteccion: parte
   igual las palabras que no caben, pero sin hundir el ancho minimo. Por si
   solo NO arreglaba esto; hacia falta el ancho minimo. */
.lobby-charla>.dicho{display:block;align-self:flex-start;min-width:min(150px,100%);max-width:90%;background:var(--panel);border:1px solid var(--borde);border-radius:10px;padding:7px 10px;overflow-wrap:break-word}
.lobby-charla>.dicho.mio{align-self:flex-end;background:#4b52d626}
.lobby-charla>.dicho .de{display:block;font-size:10px;margin:0 0 3px}
.lobby-charla>.dicho .mensaje-texto{display:block;white-space:pre-wrap;line-height:1.45}
.lobby-charla>.dicho .hora{display:block;font-size:9px;line-height:1.3;color:var(--tenue);margin:4px 0 0;text-align:right;font-weight:400}
.aventuras-cabecera{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:12px 0 28px;flex-wrap:wrap}
.aventuras-cabecera .titulazo{margin:5px 0 10px}.aventuras-cabecera p{margin:0;max-width:540px;line-height:1.6}
.ceja{font-size:11px;letter-spacing:2px;color:var(--oro);font-weight:600}
.campanas-catalogo{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(245px,100%),1fr));gap:18px;margin-bottom:28px}
.campana-carta{display:flex;flex-direction:column;gap:13px;text-align:left;padding:22px;border:1px solid var(--borde);border-radius:15px;background:linear-gradient(155deg,#242035aa,#12121feb);color:var(--texto);font:inherit;min-width:0;overflow:hidden}
button.campana-carta{cursor:pointer;transition:border-color .2s,transform .2s}button.campana-carta:hover{border-color:var(--oro);transform:translateY(-3px)}
.campana-carta strong,.campana-carta h4{font-family:'Grenze Gotisch',serif;font-size:26px;font-weight:600;line-height:1.2;margin:0;overflow-wrap:anywhere}
.campana-portada{font-size:42px;color:var(--oro);height:85px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #e6b45522;background:radial-gradient(ellipse,#e6b45510,transparent 70%);margin:-12px -12px 4px}
.campana-carta .nota{line-height:1.6;margin:0}.campana-entrar{margin-top:auto;font-size:12px;color:var(--oro);padding-top:8px}
.tienda-carta .btn{margin-top:auto}.tienda-carta select{margin-top:8px}
.campanas-vacio{grid-column:1/-1;padding:42px 20px;text-align:center;border:1px dashed var(--borde);border-radius:16px;background:#12121f99}.campanas-vacio>span{font-size:50px;color:var(--oro)}.campanas-vacio p{color:var(--tenue);font-size:14px}
.preparar-aventura{border:1px solid #e6b45555;border-radius:16px;padding:24px;background:var(--panel);scroll-margin-top:25px}.preparar-aventura h2{margin:7px 0;font-family:'Grenze Gotisch',serif;font-size:30px}.preparar-aventura h3{margin-top:24px}.preparar-aventura details>label{display:block;margin:15px 0 7px}
.preparar-pie{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:24px;border-top:1px solid var(--borde);padding-top:20px}.preparar-pie .fila{margin-left:auto}
.crear-invitacion{padding:22px;border:1px solid #e6b45544;border-radius:14px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:#e6b45508;flex-wrap:wrap}.crear-invitacion h3{margin:0}.crear-invitacion p{margin-bottom:0}
#vCrearPersonaje{max-width:1180px}#vCrearPersonaje>.tarjeta{padding:28px}#vCrearPersonaje #plantillas{display:none}
#vCrearPersonaje .creador-heroe-personalizado #plantillas{display:grid}
@media(max-width:600px){.aventuras-cabecera{gap:14px;margin-bottom:20px}.aventuras-cabecera .fila{width:100%}.aventuras-cabecera .btn{flex:1}.preparar-aventura{padding:16px}.preparar-pie .fila{width:100%}.preparar-pie .btn{width:100%}#vCrearPersonaje>.tarjeta{padding:16px}.campana-portada{height:60px}}
