:root {
			--tamaño-portrait-grupo: 350px;
		}

        .pnj-portrait-wrapper {
			position: relative; 
			z-index: 1; 
			line-height: 0; 
			height: var(--tamaño-portrait-grupo);
			overflow: hidden;
		}

		.pnj-portrait-wrapper img {
			width: 100%;
			height: 100%; 
			object-fit: cover; 
			object-position: top center;
			transform: scale(2.5);
			transform-origin: top center;
			display: block; 
            border-radius: 4px;
			cursor: pointer;
			transition: opacity 0.2s;
		}

		.pnj-portrait-wrapper img.criatura {
			object-position: center center;
			transform: scale(1.2);
			transform-origin: center center;
		}

		.pnj-portrait-wrapper img:hover {
			opacity: 0.8;
		}

		.pnj-portrait-wrapper div {
			width: 100%;
			height: 100%; 
			display: flex;
			align-items: center;
			justify-content: center;
			color: #555;
			font-size: 0.8em;
			background-color: #111;
		}
		
        body { 
            font-family: 'Alfa Slab One', 'Georgia', serif; 
            background-color: #0a0a0a; 
            color: #E8E8E8; 
            margin: 0; 
            padding: 0; 
            height: 100dvh;
            width: 100vw;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        * { box-sizing: border-box; }
        @keyframes brillo-install { 0%, 100% { color: #aaaaaa; transform: scale(1) translateZ(0); } 50% { color: var(--color-botones, #F0A300); transform: scale(1.18) translateZ(0); } }
		
        ::-webkit-scrollbar { width: 5px; }
        ::-webkit-scrollbar-track { background: #222222; }
        ::-webkit-scrollbar-thumb { background: #666666; border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: #888888; }
        
        h1, h2, h3 { font-family: 'Alfa Slab One', serif; color: #F0A300; }
        
        /* Estructura Flex que impide desbordamientos */
        .pantalla { display: none; flex: 1; min-height: 0; width: 100%; overflow: hidden; }
        .pantalla.activa { display: flex; flex-direction: column; }
        
        #menu-principal { align-items: center; justify-content: center; overflow: hidden; position: relative; z-index: 0; }
        #menu-principal.activa { animation: entradaMenu 0.8s ease-out; }
        @keyframes entradaMenu { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }
        #menu-flash { position: absolute; inset: 0; z-index: 5; background: radial-gradient(circle, rgba(200,225,255,0.95) 0%, rgba(120,170,255,0.6) 40%, transparent 75%); pointer-events: none; opacity: 0; animation: destelloPortalEntrada 1.1s ease-out; }
        @keyframes destelloPortalEntrada { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
        #seleccion-modo-partida { align-items: center; justify-content: flex-start; overflow-y: auto; overflow-x: hidden; position: relative; z-index: 0; }
        #menu-fondo-wrap { position: absolute; top: -20px; left: -20px; right: -20px; bottom: -20px; z-index: -2; transition: transform 0.4s ease-out; }
        #menu-fondo-imagen { position: absolute; inset: 0; background-image: url('/static/fondo-menu.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; animation: zoomLento 50s ease-in-out infinite alternate; }
        #menu-portal-brillo { position: absolute; left: 50%; top: 62%; width: 340px; height: 340px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(140,200,255,0.55) 0%, rgba(100,160,255,0.25) 35%, transparent 70%); mix-blend-mode: screen; animation: respirarPortal 6s ease-in-out infinite; pointer-events: none; }
        #menu-destello { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
        @keyframes zoomLento { from { transform: scale(1); } to { transform: scale(1.045); } }
        @keyframes respirarPortal { 0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); } }
        @keyframes cruceDestello { 0% { transform: translateX(0%); } 18% { transform: translateX(600%); } 100% { transform: translateX(600%); } }
        #menu-particulas { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
        .chispa { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #ffb347; box-shadow: 0 0 6px 2px rgba(255,179,71,0.8); animation-name: elevarChispa; animation-timing-function: ease-out; animation-iteration-count: infinite; }
        .chispa-acento { background: var(--color-botones, #00ff88); box-shadow: 0 0 6px 2px var(--color-botones, #00ff88); }
        @keyframes elevarChispa { 0% { transform: translate(0, 0) scale(0.4); opacity: 0; } 12% { opacity: 1; transform: translate(2px, -20px) scale(1); } 70% { opacity: 0.7; } 100% { transform: translate(-6px, -110px) scale(0.3); opacity: 0; } }
        #menu-principal h1 { font-size: 4.5em; margin: 20px 0 0 0; text-align: center; white-space: nowrap; }
        .menu-titulo-bloque { display: inline-flex; flex-direction: column; align-items: center; margin-bottom: 20px; }
        #frase-matriz { color: #ffffff; font-style: italic; font-size: 0.95em; text-align: center; opacity: 0; transition: opacity 1.2s ease; pointer-events: none; height: 3.2em; display: flex; align-items: center; justify-content: center; width: 0; min-width: 75%; word-wrap: break-word; overflow-wrap: break-word; line-height: 1.5; }
        #menu-barra-superior { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px; }
        #menu-contador-miacciones { display: flex; align-items: center; gap: 8px; font-size: 1.1em; font-weight: bold; font-family: 'Alfa Slab One', serif; }
        .menu-tab-btn { padding: 6px 14px; border: none; cursor: pointer; font-weight: bold; border-radius: 4px; transition: all 0.3s; font-family: inherit; background-color: var(--color-botones, #F0A300); color: #000; font-size: 0.82em; }
        .menu-tab-btn:hover { opacity: 0.8; }
        
        .menu-btn { font-family: inherit; font-size: 1.2em; background-color: #3a3a3a; color: #aaaaaa; border: 1px solid #444; border-radius: 4px; padding: 15px 30px; margin: 10px; min-width: 200px; text-align: center; cursor: pointer; letter-spacing: 2px; transition: color 0.3s, border-color 0.3s, background-color 0.3s; }
        .menu-btn:hover { background-color: var(--color-botones, #00ff88); color: #000; border-color: var(--color-botones, #00ff88); }
        .menu-btn:active { background-color: var(--color-botones, #00ff88); border-color: var(--color-botones, #00ff88); filter: brightness(0.85); }
		.hero-aventura-libre { position: relative; width: calc(100% - 80px); height: 460px; flex-shrink: 0; margin: 40px 40px 0; padding: 0; border: 2px solid var(--color-botones, #00ff88); border-radius: 6px; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: pointer; font-family: inherit; background-color: var(--color-fondo, #0a0a0a); background-image: url('/static/hero-aventura-libre.webp'), linear-gradient(160deg, var(--color-botones, #00ff88) 0%, transparent 55%); background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; transition: transform 0.2s ease, box-shadow 0.2s ease; }
        .seccion-aventuras-predefinidas { width: 100%; max-width: 960px; flex-shrink: 0; margin: 32px auto 0; padding: 0 20px; }
        .hero-aventura-libre-fondo { position: absolute; inset: 0; }
        .hero-aventura-libre-texto { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 32px; }
        .hero-aventura-libre-titulo { display: block; font-size: 2.4em; color: var(--color-titulos, #E8E8E8); font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 4px 24px rgba(0,0,0,0.85); }
        .hero-aventura-libre-descripcion { display: block; font-size: 0.85em; letter-spacing: 0.5px; color: #999; margin-top: 12px; text-transform: none; text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 2px 16px rgba(0,0,0,0.85); }
        .seccion-aventuras-predefinidas { width: 100%; max-width: 960px; margin: 32px auto 0; padding: 0 20px; }
        .etiqueta-aventuras-predefinidas { text-align: center; color: #888; font-size: 0.75em; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 32px; }
        .grid-aventuras-predefinidas { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
        .tarjeta-aventura { width: 220px; display: flex; flex-direction: column; margin: 0; padding: 0; border: 1px solid var(--color-botones, #00ff88); border-radius: 6px; overflow: hidden; cursor: pointer; font-family: inherit; background-color: var(--color-fondo, #0a0a0a); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
        .tarjeta-aventura:hover { transform: scale(1.06) translateY(-4px); box-shadow: 0 0 22px 2px var(--color-botones, #00ff88); border-color: var(--color-botones, #00ff88); }
        .tarjeta-aventura-titulo { display: block; font-size: 1.15em; color: var(--color-titulos, #E8E8E8); font-weight: bold; text-align: center; padding: 12px 10px 8px; }
        .tarjeta-aventura-imagen { aspect-ratio: 9 / 16; margin: -2px 8px 0; border-radius: 3px; background-image: url('/static/yate_del_amor/yate-amor.webp'), linear-gradient(160deg, var(--color-botones, #00ff88) 0%, transparent 60%); background-size: contain, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; }
        .tarjeta-aventura-descripcion { display: block; font-size: 0.95em; letter-spacing: 0.3px; color: #999; text-transform: none; line-height: 1.3; text-align: center; padding: 10px 12px 14px; }
        .tarjeta-aventura-proximamente { width: 220px; border: 1px dashed #555; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #666; font-size: 0.85em; letter-spacing: 0.3px; gap: 6px; padding: 14px; }
        .tarjeta-aventura-proximamente-icono { font-size: 2.2em; color: #555; }
        #creacion-personaje { flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow-y: auto; }
        .creacion-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 70%; margin-bottom: 20px; }
        .creacion-campo { text-align: left; position: relative; }
        .creacion-campo p { margin: 0 0 5px 0; color: #F0A300; } 
        .creacion-input { 
            background-color: var(--color-fondo, #202020); 
            color: #E8E8E8; 
            border: 2px solid #555;
            border-radius: 4px; 
            padding: 8px 35px 8px 8px; 
            font-family: inherit; 
            font-size: 1em; 
            width: 100%; 
            box-sizing: border-box; 
            height: 44px; 
            line-height: 1.6;
        }
        .btn-dado { 
            position: absolute; 
            right: 8px; 
            top: 8px;
            width: 24px; 
            height: 24px; 
            background-color: transparent; 
            border: 1px solid #333; 
            border-radius: 4px;
            cursor: pointer; 
            font-size: 14px; 
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            color: #777;
            transition: background-color 0.3s, border-color 0.3s, color 0.3s;
        }
        .creacion-input:not(textarea) + .btn-dado {
            top: 50%;
            transform: translateY(-50%);
        }
        .btn-dado:hover { background-color: var(--color-botones, #00ff88); border-color: var(--color-botones, #00ff88); color: #000; }
        textarea.creacion-input { 
            resize: vertical; 
            min-height: 80px; 
            height: auto; 
            padding-top: 8px;
        }
        /* === ESTRUCTURA PRINCIPAL TIPO COLUMNA === */
        #pantalla-juego.activa { 
            flex-direction: column; /* Cambiado a columna para poner la barra abajo */
            overflow: hidden;
        }

        /* Nuevo contenedor para los 3 paneles superiores */
        #contenedor-paneles-juego {
            display: flex;
            flex-direction: row;
            flex: 1; /* Ocupa todo el alto disponible menos la barra */
            width: 100%;
            overflow: hidden;
            min-height: 0;
        }
        
        #panel-izquierdo, #panel-derecho { 
            width: 20%; 
            padding: 8px 8px 13px 8px; 
            border: none; 
            overflow-y: auto; 
            background-color: #0a0a0a; 
            height: 100%; 
        }
        
        #panel-central { 
            width: 60%; 
            display: flex; 
            flex-direction: column; 
            padding: 5px 1vw 12px 1vw; 
            height: 100%; 
            overflow: hidden; 
            position: relative; 
        }
        
        .header-panel { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #444; padding-bottom: 5px; margin-bottom: 10px; flex-shrink: 0; }
        .header-panel h3 { margin: 0; padding: 0; border: none; font-size: 1.3em; }
        .header-panel span { font-family: 'Alfa Slab One', serif; font-size: 1.3em; font-weight: 400; } 
        
        #narrativa-wrapper {
            flex: 1;
            min-height: 0;
            display: flex;
            flex-direction: column;
            border: 2px solid #555;
            border-radius: 8px;
            margin-bottom: 12px;
            overflow: hidden;
        }
        #narrativa { 
            font-size: 1.5em; 
            flex: 1; 
            min-height: 0; 
            overflow-y: auto; 
            padding: 8px; 
            white-space: pre-wrap; 
            line-height: 1.3; 
        }
        
        .prompt-usuario { color: #F0A300; font-style: italic; border-top: 1px solid #222; padding-top: 10px; }       		
        #franja-narrativa-superior { display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; padding: 8px 10px; margin-bottom: 10px; background: linear-gradient(to bottom, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.4) 70%, transparent 100%); border-radius: 8px 8px 0 0; }
        #franja-ubicacion { display: none; }
        #franja-segunda-linea { display: contents; }
        #franja-miacciones-centro { display: flex; align-items: center; gap: 8px; }
        #btn-swap-juego, #btn-logs-juego { font-size: 0.9em; padding: 5px 14px; }
        #franja-tiempo { font-weight: bold; font-size: 0.9em; flex-shrink: 0; }
        #franja-turnos { display: none; flex-direction: row; align-items: center; justify-content: center; flex-shrink: 0; gap: 5px; }
        #franja-turnos-label { font-size: 0.9em; font-weight: bold; }
        #franja-turnos-numeros { font-size: 0.9em; font-weight: bold; }
        #franja-miacciones { display: flex; align-items: center; gap: 8px; font-size: 1.1em; font-weight: bold; font-family: 'Alfa Slab One', serif; position: absolute; left: 50%; transform: translateX(-50%); }
        #zona-sugerencias-turnos { display: flex; flex-shrink: 0; gap: 8px; align-items: stretch; border-top: 1px solid #555; padding: 5px 8px; background-color: var(--color-fondo, #1A1A1A); }
        #sugerencias { flex: 1; padding: 2px 4px; font-size: 1.05em; display: flex; flex-direction: column; gap: 1px; align-items: flex-start; }
        .sugerencia-item { cursor: pointer; padding: 1px 4px; border-radius: 3px; transition: background-color 0.15s; line-height: 1.3; }
        .sugerencia-item:hover { background-color: rgba(255,255,255,0.08); }
        #contador-turnos { display: none; }
        #btn-toggle-sugerencias { display: none; }
        
        #entrada { 
            display: flex; 
            flex-shrink: 0; 
            margin-bottom: 10px; 
            background-color: inherit;
            position: relative;
            z-index: 100;
            padding-top: 5px;
        }
        #input-usuario { 
            flex-grow: 1; 
            background-color: var(--color-fondo, #202020); 
            color: #E8E8E8; 
            border: 2px solid #555; 
            padding: 10px; 
            font-family: inherit; 
            font-size: 1em;
            margin-right: 5px; 
        }
        #btn-enviar { 
            padding: 0 15px; 
            font-size: 1.1em; 
            font-family: 'Alfa Slab One', serif;
            margin-left: 0;
        }
        #btn-guardar, #btn-cargar-juego, #btn-opciones-juego, #btn-ayuda-juego, #btn-volver-menu { 
            padding: 0 15px; 
            margin-left: 0; 
            font-size: 1.1em; 
            font-family: 'Alfa Slab One', serif;
        }
		.renombrar-btn { background: none; border: none; cursor: pointer; font-size: 0.85em; opacity: 0.6; padding: 0 2px; transition: opacity 0.2s; }
        .renombrar-btn:hover { opacity: 1; }
        .expulsar-btn { 
            background-color: #555; 
            color: #E0E0E0; 
            border: 1px solid #777; 
            padding: 1px 3px; 
            font-size: 0.75em;
            cursor: pointer;
            margin-left: 5px;
            white-space: nowrap; 
            line-height: 1;
        }
        .expulsar-btn:hover { background-color: #777; color: #FFFFFF; } 
        
        #panel-izquierdo h3, #panel-derecho h3 { text-align: center; border-bottom: none; padding-bottom: 0; margin-top: 0; font-size: 1.3em; }

.buscador-panel {
    width: 100%;
    background-color: var(--color-fondo, #202020);
    color: #E8E8E8;
    border: 2px solid #555;
    border-radius: 4px;
    padding: 6px 10px;
    font-family: inherit;
    font-size: 0.95em;
    margin-bottom: 8px;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
}

.buscador-panel:focus {
    border-color: var(--color-botones, #00ff88);
}
		.character-card, .inventory-item {    
			background-color: var(--color-fondo, #202020); 
			border: 2px solid #555; 
			border-radius: 4px; 
			padding: 8px; 
			margin-bottom: 4px; 
			font-size: 1.1em; 
			line-height: 1.1; 
			
			position: relative;
		}
		.character-card p, .inventory-item p { 
			margin: 0; 
			padding: 1px 0; 
			word-wrap: break-word;
			overflow-wrap: break-word;
			white-space: normal;
		}
        
        .equipamiento-container {
            display: flex;
            flex-direction: column;
            height: 100%;
            gap: 10px;
        }
        
        .equipamiento-seccion-superior {
            flex: 0 0 60%;
            display: flex;
            flex-direction: row;
            overflow: hidden;
            padding: 10px;
            background-color: var(--color-fondo, #181818);
            border: 2px solid #444;
            border-radius: 4px;
            gap: 0;
            align-items: stretch;
        }
        
        .equipamiento-silueta {
            position: relative;
            flex-shrink: 0;
            width: auto;
            height: 100%;
            display: flex;
            align-items: stretch;
        }

        .equipamiento-silueta-img {
            height: 100%;
            width: 50px;
            display: block;
            background-color: var(--color-botones, #F0A300);
            -webkit-mask-image: url('/static/hombre.png');
            -webkit-mask-size: 100% 100%;
            -webkit-mask-repeat: no-repeat;
            mask-image: url('/static/hombre.png');
            mask-size: 100% 100%;
            mask-repeat: no-repeat;
        }
        
        .equipamiento-slots-lista {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 0;
            overflow: hidden;
            padding: 0;
            justify-content: space-between;
        }
        
        .slot-equipamiento {
            position: relative;
            width: 100%;
            flex: 1;
            background-color: var(--color-fondo, rgba(42, 42, 42, 0.85));
            border: 2px solid #555;
            border-right: none;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            cursor: pointer;
            transition: all 0.3s;
            overflow: hidden;
            text-align: left;
            font-size: 1.1em;
            color: var(--color-titulos, #999);
            padding: 3px 10px;
            border-radius: 3px 0 0 3px;
            mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
            -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
        }

        .slot-equipamiento.ocupado .item-equipado {
            color: var(--color-texto, #E8E8E8) !important;
        }
        
        .slot-label {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.2;
            width: 100%;
            font-size: 0.95em;
            display: block;
        }
        
        .slot-equipamiento.ocupado {
			background-color: #3a3a3a;
			border-color: var(--color-botones, #F0A300);
			color: var(--color-texto, #E8E8E8);
		}
        
        .item-equipado {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            background: transparent;
            border: none;
            padding: 0;
            margin: 0;
            color: inherit;
            font-size: 1.1em;
            cursor: grab;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.2;
            text-align: left;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
        }
        
        .item-equipado:active {
            cursor: grabbing;
        }

        .slot-equipamiento:hover {
            background-color: rgba(45, 45, 45, 0.9);
            border-color: #777;
        }
        
        .slot-equipamiento.drag-over {
            background-color: rgba(58, 58, 58, 0.95);
            border-color: #999;
            border-style: solid;
        }
       
        
        .equipamiento-seccion-inferior {
			flex: 0 0 40%;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			background-color: var(--color-fondo, #181818);
			border: 2px solid #444;
			border-radius: 4px;
			padding: 10px;
		}
        
        .contenedor-carga-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            padding-bottom: 8px;
            border-bottom: 1px solid #444;
        }
        
        .contenedor-carga-titulo {
            font-size: 1.1em;
            color: #F0A300;
            font-weight: bold;
        }
        
        .contenedor-carga-capacidad {
			font-size: 0.9em;
			color: #aaa;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			gap: 8px;
			min-height: fit-content;
		}

		.contenedor-carga-capacidad span:first-child {
			flex: 1 1 auto;
			min-width: 0;
			word-wrap: break-word;
			overflow-wrap: break-word;
		}

		.contenedor-carga-capacidad span:last-child {
			flex: 0 0 auto;
			white-space: nowrap;
		}
				
		.contenedor-carga-lista {
			display: flex;
			flex-direction: column;
			gap: 3px;
			min-height: 200px;
			flex: 1;
			overflow-y: auto;
			overflow-x: hidden;
		}

        .inventory-item {
            background-color: #3a3a3a;
            border: none;
            border-radius: 4px;
            padding: 2px 8px;
            font-size: 1em;
            line-height: 1.3;
            cursor: grab;
            transition: background-color 0.2s;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
            color: var(--color-texto, #E8E8E8);
            word-break: break-word;
            overflow-wrap: break-word;
            white-space: normal;
        }
        
        .inventory-item:hover {
            background-color: #2a2a2a !important;
        }
        
        .inventory-item:active {
            cursor: grabbing;
        }
        
        .inventory-item.dragging {
            opacity: 0.5;
            cursor: grabbing;
        }
        
        .item-equipado {
            background-color: transparent;
            border: none;
            border-radius: 0;
            padding: 0;
            font-size: 1em;
            line-height: 1.2;
            cursor: grab;
            transition: all 0.2s;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
            text-align: left;
        }
        
        .item-equipado:hover {
            background-color: transparent;
            border-color: transparent;
        }
        
        .item-equipado:active {
            cursor: grabbing;
        }
        
        .peso-total-display {
			margin-top: auto;
			padding-top: 10px;
			border-top: 1px solid #444;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 0.9em;
			color: #aaa;
		}

		.trash-icon {
			cursor: pointer;
			padding: 4px;
			border-radius: 4px;
			border: 1px solid var(--color-botones, #00ff88);
			transition: background-color 0.3s, color 0.3s;
			user-select: none;
			display: flex;
			align-items: center;
			justify-content: center;
			min-width: 24px;
			min-height: 24px;
			color: var(--color-botones, #00ff88);
		}

		.trash-icon svg {
			width: 16px;
			height: 16px;
			stroke: currentColor;
			pointer-events: none;
		}

		.trash-icon:hover {
			background-color: var(--color-botones, #00ff88);
			color: #000;
		}

		.trash-icon.drag-over {
			background-color: #FF4500;
			border-color: #FF4500;
			color: #FFFFFF;
		}

		.trash-icon.drag-over svg {
			stroke: currentColor;
		}

		.loading-dots-overlay {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 9999;
			pointer-events: none;
		}

		.loading-dots-container {
			display: flex;
			gap: 15px;
		}

		.loading-dot {
			width: 20px;
			height: 20px;
			border-radius: 50%;
			background-color: var(--color-botones, #F0A300);
			animation: bounce 1.4s infinite ease-in-out;
		}

		.loading-dot:nth-child(1) {
			animation-delay: -0.32s;
		}

		.loading-dot:nth-child(2) {
			animation-delay: -0.16s;
		}

		.loading-dot:nth-child(3) {
			animation-delay: 0s;
		}

		@keyframes bounce {
			0%, 80%, 100% {
				transform: scale(0.8);
				opacity: 0.5;
			}
			40% {
				transform: scale(1.2);
				opacity: 1;
			}
		}
        
        .peso-excedido {
            color: #ff5555 !important;
            font-weight: bold;
        }
        
        .character-card h3 { 
            margin: 0 0 5px 0; 
            padding-bottom: 3px; 
            font-size: 1.2em; 
            text-transform: capitalize;
        }
        .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); align-items: center; justify-content: center; }
        .modal-contenido { 
            background-color: #111; 
            margin: 0; 
            padding: 20px; 
            border: 1px solid #333; 
            border-radius: 8px;
            width: 90%; 
            max-width: 800px; 
            color: #E0E0E0; 
            max-height: 80vh; 
            overflow-y: auto;
            overflow-x: hidden;
            display: flex; 
            flex-direction: column;
            position: relative;
        }
        .modal-header { width: 100%; text-align: center; margin-bottom: 15px; flex-shrink: 0; padding: 4px 0; }
		.modal-header h3 { margin: 0; }
		.modal-close { position: absolute; right: 20px; top: 13px; color: var(--color-botones, #aaa); font-size: 22px; font-weight: bold; cursor: pointer; line-height: 1; }
        .modal-close:hover { color: #fff; }
        .modal-input { width: calc(100% - 20px); padding: 10px; background-color: var(--color-fondo, #111); color: #ccc; border: 2px solid #555; border-radius: 4px; margin-bottom: 15px; font-family: inherit; }
        .partida-item { background-color: var(--color-fondo, #1a1a1a); border: 2px solid #555; padding: 10px; margin-bottom: 10px; border-radius: 4px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
        .partida-item:hover { background-color: #2a2a2a; }
        .partida-item.seleccionada { background-color: #333; border-color: #555; }
        .partida-info { flex: 1; min-width: 0; overflow-wrap: anywhere; }
        .partida-acciones { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; max-width: 100%; }
        @media (max-width: 600px) {
            .partida-item { flex-wrap: wrap; }
            .partida-info { flex-basis: 100%; }
        }
        .partida-btn { background-color: #3a3a3a; border: 1px solid #444; color: #aaaaaa; padding: 5px 12px; border-radius: 4px; cursor: pointer; font-family: inherit; font-size: 0.85em; letter-spacing: 1px; transition: color 0.3s, border-color 0.3s, background-color 0.3s; }
        .partida-btn:hover { background-color: var(--color-botones, #00ff88); color: #000; border-color: var(--color-botones, #00ff88); }
        .partida-btn:active { background-color: var(--color-botones, #00ff88); border-color: var(--color-botones, #00ff88); filter: brightness(0.85); }
        .partida-nombre { font-weight: bold; margin-bottom: 5px; color: #FFFFFF !important; }
        .partida-fecha { font-size: 0.8em; color: #aaa; }
        .modal-buttons { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 20px; flex-shrink: 0; }
        .modal-buttons .menu-btn { min-width: 120px; margin: 5px; padding: 11px 20px; }
        #modal-swap { align-items: center; justify-content: center; }
        #modal-swap .modal-contenido { max-width: 600px; max-height: none; height: auto; margin: 0; }
        #swap-direccion-box { background: #111; border: 1px solid #444; border-radius: 6px; padding: 12px 16px; font-family: monospace; font-size: 0.85em; color: var(--color-botones, #87CEEB); word-break: break-all; text-align: center; margin: 10px 0; cursor: pointer; transition: border-color 0.2s; }
        #swap-direccion-box:hover { border-color: #87CEEB; }
        .swap-redes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 12px 0; }
        .swap-red-badge { background: #2a2a2a; border: 1px solid #555; border-radius: 20px; padding: 5px 14px; font-size: 0.82em; color: #ccc; }
        .swap-paquetes { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 16px 0; }
        .swap-paquete { background: #2a2a2a; border: 2px solid #444; border-radius: 8px; padding: 16px 20px; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; min-width: 120px; }
        .swap-paquete:hover { border-color: var(--color-botones, #F0A300); background: #333; }
        .swap-paquete .swap-precio { font-size: 1.4em; font-weight: bold; color: #fff; }
        .swap-paquete .swap-miacciones { font-size: 0.85em; color: #87CEEB; margin-top: 4px; }
        .swap-aviso { font-size: 0.78em; color: #777; text-align: center; margin-top: 14px; line-height: 1.5; }
        #swap-copiado-msg { color: #7BCC70; font-size: 0.82em; text-align: center; height: 18px; margin-top: 4px; }
        #modal-opciones .modal-contenido { max-width: 560px; max-height: none; overflow: visible; }
        #modal-opciones { align-items: flex-start; padding-top: 12vh; }
        #modal-logs .modal-contenido { max-width: 520px; }
        #modal-logs .modal-header h3 { color: #ccc; }
        .log-entrada { border-bottom: 1px solid #2a2a2a; padding: 14px 0; }
        .log-entrada:last-child { border-bottom: none; }
        .log-version { color: var(--color-botones, #F0A300); font-weight: bold; font-size: 0.95em; flex-shrink: 0; }
        .log-encabezado { display: flex; align-items: flex-start; gap: 10px; }
        .log-titulo { color: #87CEEB; font-size: 0.95em; }
        .log-cuerpo { display: flex; gap: 10px; margin-top: 8px; }
        .log-version-spacer { flex-shrink: 0; visibility: hidden; font-size: 0.95em; font-weight: bold; }
        .log-descripcion { color: #ccc; font-size: 0.88em; line-height: 1.6; margin: 0; }
        #modal-opciones .modal-header { margin-bottom: 0; padding-bottom: 15px; }
		#modal-cargar .modal-header { padding: 5px 0 15px 0; }
		#modal-guardar .modal-header { padding: 5px 0 15px 0; }
		.opciones-tabs-inner { display: flex; gap: 0; margin-bottom: 20px; border-bottom: 1px solid #444; }
        .opciones-tab-btn-modal { background: none; border: none; border-bottom: 2px solid transparent; color: #777; padding: 10px 20px; cursor: pointer; font-family: inherit; font-size: 0.95em; font-weight: bold; letter-spacing: 1px; transition: color 0.2s, border-color 0.2s; margin-bottom: -1px; }
        .opciones-tab-btn-modal:hover { color: #aaa; }
        .opciones-tab-btn-modal.activa { color: var(--color-botones, #F0A300); border-bottom-color: var(--color-botones, #F0A300); }
        .opciones-tab-panel { display: none; flex-direction: column; gap: 18px; padding-right: 4px; }
        .opciones-tab-panel.activa { display: flex; }
        .opciones-seccion { display: flex; flex-direction: column; gap: 8px; }
        .opciones-seccion-titulo { font-size: 0.75em; font-weight: bold; color: #666; text-transform: uppercase; letter-spacing: 2px; padding-bottom: 6px; border-bottom: 1px solid #333; margin-bottom: 2px; }
        .opciones-colores-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .opciones-color-item { display: flex; flex-direction: column; gap: 4px; }
        .opciones-color-item label { font-size: 0.82em; color: #999; }
        .opciones-fuentes-fila { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
        .opciones-fuente-item { display: flex; flex-direction: column; gap: 4px; }
        .opciones-fuente-item label { font-size: 0.82em; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .opciones-voz-bloque { background: var(--color-fondo, #1a1a1a); border-radius: 4px; padding: 12px; display: flex; flex-direction: column; gap: 10px; border: 1px solid #333; }
        .opciones-voz-titulo { font-size: 0.75em; font-weight: bold; color: #666; text-transform: uppercase; letter-spacing: 2px; padding-bottom: 6px; border-bottom: 1px solid #333; margin-bottom: 2px; }
        .opciones-voz-fila { display: flex; justify-content: space-between; align-items: center; }
        
        .switch {
          position: relative;
          display: inline-block;
          width: 50px; 
          height: 24px; 
        }

        .switch input { 
          opacity: 0;
          width: 0;
          height: 0;
        }

        .slider {
          position: absolute;
          cursor: pointer;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: #ccc; 
          -webkit-transition: .4s;
          transition: .4s;
          border-radius: 24px; 
        }
        
        .slider-polly {
            background-color: #ccc !important; 
        }
        
        #narradorVozInterruptorPolly:checked + .slider-polly {
            background-color: #28a745 !important; 
        }
        
        .slider-azure {
            background-color: #ccc !important; 
        }
        
        #narradorVozInterruptorEdge:checked + .slider-edge { background-color: var(--color-botones, #28a745); }

        #narradorVozInterruptorAzure:checked + .slider-azure {
            background-color: #28a745 !important; 
        }

        .slider:before, .slider-polly:before, .slider-azure:before {
          position: absolute;
          content: "";
          height: 16px;
          width: 16px;
          left: 4px;
          bottom: 4px;
          background-color: white;
          -webkit-transition: .4s;
          transition: .4s;
          border-radius: 50%; 
        }
        
        #narradorVozInterruptorNativa:checked + .slider {
          background-color: var(--color-botones, #28a745); 
        }
        
        #sonido-btn-interruptor + .slider {
          background-color: #555;
        }
        
        #sonido-btn-interruptor:checked + .slider {
          background-color: var(--color-botones, #28a745);
        }
        input:checked + .slider:before, input:checked + .slider-polly:before, input:checked + .slider-azure:before {
          -webkit-transform: translateX(26px);
          -ms-transform: translateX(26px);
          transform: translateX(26px);
	    }
        
		.respuesta-ia {
			margin-top: 0;
			padding: 0;
		}
        .escenario-imagen {
            width: 100% !important; 
            max-width: 100%;
            height: auto;
            display: block;
            border-radius: 4px;
            object-fit: cover;
            margin-bottom: 15px !important; 
        }
		#narrativa > div {
            margin-top: 0px;
            margin-bottom: 0.8em;
        }
        #narrativa p {
            margin-bottom: 0.7em;
            margin-top: 0;
        }
        
        .pnj-info-wrapper {
            position: absolute; 
            bottom: 0; 
            left: 0; 
            width: 100%; 
            box-sizing: border-box; 
            z-index: 2; 
            display: flex;
            flex-direction: column;
            justify-content: flex-end; 
            padding: 8px; 
            min-height: 0; 
            color: inherit;
            background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 60%, transparent 100%);
            border-radius: 0 0 4px 4px;
        }

        .character-card .pnj-info-wrapper {
            position: relative;
            bottom: auto;
            left: auto;
            background: none;
        }
        .character-card .pnj-portrait-wrapper ~ .pnj-info-wrapper {
            position: absolute;
            bottom: 0;
            left: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 60%, transparent 100%);
        }
        
        .pnj-info-wrapper h3, .pnj-info-wrapper p {
            color: inherit; 
            margin: 0;
            padding: 1px 0;
        }
        .pnj-info-wrapper h3 {
             padding-bottom: 3px;
        }
        
        #modal-portrait {
            background-color: rgba(0,0,0,0.7);
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            padding: 0;
            margin: 0;
        }

        #modal-portrait .modal-contenido {
            width: auto; 
            height: auto; 
            padding: 0; 
            margin: 0;
            background-color: transparent; 
            border: none; 
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            max-width: none;
            max-height: none;
        }
        
        #modal-portrait img {
            width: auto; 
            height: 90vh; 
            max-width: 50vw; 
            max-height: 90vh; 
            object-fit: contain;
            object-position: center center;
            margin: 0; 
            display: block;
            border: 5px solid #555555;
            border-radius: 12px;
            box-shadow: 0 0 20px rgba(0,0,0,0.7);
        }
        
        #modal-portrait .modal-buttons {
            display: none;
        }

        #modal-portrait .modal-close {
            position: absolute; 
            top: 5px;
            right: 5px;
            color: #FFFFFF; 
            font-size: 40px;
            font-weight: bold;
            cursor: pointer;
            z-index: 1002; 
            line-height: 1;
            background-color: rgba(0,0,0,0.7);
            width: 45px;
            height: 45px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            border: 2px solid #555555;
        }
        
        #modal-portrait .modal-close:hover {
            color: #CCCCCC;
            background-color: rgba(0,0,0,0.9);
            transform: scale(1.1);
        }

        .nombre-pnj-narrativa {
            color: var(--color-titulos, #F0A300);
            cursor: pointer;
        }

        #portrait-tooltip {
            position: fixed;
            z-index: 8000;
            pointer-events: none;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 0 20px rgba(0,0,0,0.7);
            border: 5px solid #555555;
            width: 160px;
            height: 160px;
            background-color: #000;
            display: none;
        }

        #portrait-tooltip img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top center;
            transform: scale(2.5) translateY(-12px);
            transform-origin: top center;
            display: block;
        }

        #portrait-tooltip img.criatura {
            object-fit: contain;
            transform: scale(1.2);
            transform-origin: center center;
        }

        /* === NUEVOS ESTILOS === */
        
        /* PESTAÑAS */
        .tab-contenedor {
            display: flex; 
            gap: 5px; 
            margin-bottom: 10px; 
        }
        .tab-btn-izq {
            flex: 1; 
            padding: 8px; 
            border: none; 
            cursor: pointer; 
            font-weight: bold; 
            border-radius: 4px;
            transition: all 0.3s;
            font-family: inherit;
        }
        .tab-btn-izq.activa {
            background-color: #F0A300 !important;
            color: #000000 !important;
        }
        .tab-btn-izq.inactiva {
            background-color: #3a3a3a !important;
            color: #aaaaaa !important;
        }
        .tab-btn-izq:hover { opacity: 0.9; }

        .tab-btn-der {
            flex: 1; 
            padding: 8px; 
            border: none; 
            cursor: pointer; 
            font-weight: bold; 
            border-radius: 4px;
            transition: all 0.3s;
            font-family: inherit;
        }
        .tab-btn-der.activa {
            background-color: #F0A300 !important;
            color: #000000 !important;
        }
        .tab-btn-der.inactiva {
            background-color: #3a3a3a !important;
            color: #aaaaaa !important;
        }
        .tab-btn-der:hover { opacity: 0.9; }
        
        .bitacora-item {
            background-color: var(--color-fondo, #202020);
            border-left: 3px solid #F0A300;
            padding: 10px;
            margin-bottom: 15px;
            border-radius: 0 4px 4px 0;
            position: relative;
        }
        .bitacora-fecha {
            font-size: 0.8em;
            color: #F0A300;
            margin-bottom: 5px;
            font-weight: bold;
            text-transform: uppercase;
            border-bottom: 1px solid #444;
            padding-bottom: 2px;
        }
        .bitacora-texto {
            font-size: 0.95em;
            line-height: 1.4;
            color: #E8E8E8;
            white-space: pre-wrap;
        }
        .bitacora-nivel {
            display: inline-block;
            font-size: 0.7em;
            color: #ffd700;
            background: rgba(255, 215, 0, 0.1);
            padding: 4px 8px;
            border-radius: 3px;
            margin-bottom: 8px;
            border: 1px solid rgba(255, 215, 0, 0.3);
        }

        #area-anotaciones {
            width: 100%;
            height: 100%;
            background-color: var(--color-fondo, #222);
            color: var(--color-texto, #E8E8E8);
            border: 2px solid #555;
            border-radius: 4px;
            padding: 10px;
            font-family: inherit;
            font-size: 1em;
            resize: none;
            outline: none;
            line-height: 1.4;
        }
        #area-anotaciones:focus {
            border-color: #F0A300;
        }

        #area-anotaciones::placeholder {
            font-family: inherit;
            font-size: 1em;
            color: #777;
            opacity: 1;
        }

        #barra-inferior-container {
            display: flex;
            align-items: stretch;
            width: 100%;
            height: 50px;
            background-color: transparent;
            border-top: 1px solid #333;
            flex-shrink: 0;
            z-index: 200;
            margin: 0;
            padding: 0;
        }
		
        #info-contexto-box {
            width: 20%; 
            min-width: auto;
            height: 100%;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            background-color: var(--color-fondo, #1A1A1A);
            border-right: none;
            padding: 0 15px;
            font-size: 0.85em;
            color: var(--color-texto, #E8E8E8);
            box-sizing: border-box;
            white-space: nowrap;
            overflow: visible;
        }

        #ubicacion-texto {
            font-weight: bold;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        #tiempo-texto-box {
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 5px;
            flex-shrink: 0;
        }

        #display-clima {
            cursor: default;
        }

        #zona-input-central {
            width: 60%;
            height: 100%;
            display: flex;
            align-items: stretch;
            flex-shrink: 0;
            padding: 0 1vw; /* Padding idéntico al panel de narrativa */
        }

        #input-usuario {
            flex-grow: 1;
            height: 100%;
            background-color: #202020;
            color: #E8E8E8;
            border: none;
            border-right: 2px solid #555;
            border-left: 2px solid #555;
            border-radius: 0;
            padding: 0 15px;
            font-family: inherit;
            font-size: 1em;
            box-sizing: border-box;
            margin: 0;
        }
        
        #input-usuario:focus {
            outline: none;
            background-color: var(--color-fondo, #202020);
        }

        .contenedor-botones {
            display: flex;
            height: 100%;
            flex-shrink: 0;
        }

        .contenedor-botones button,
        #btn-enviar {
			height: 100%;
			background-color: #3a3a3a;
			color: #aaaaaa;
			border: none;
			border-right: 1px solid #444;
			padding: 0 15px;
			cursor: pointer;
			font-size: 1.1em;
			font-family: 'Alfa Slab One', serif;
			letter-spacing: 2px;
			transition: color 0.3s, background-color 0.3s;
		}

		.contenedor-botones button:hover,
        #btn-enviar:hover {
			background-color: var(--color-botones, #00ff88);
			color: #000;
		}

		.contenedor-botones button:active,
        #btn-enviar:active {
			background-color: var(--color-botones, #00ff88);
			filter: brightness(0.85);
		}

        #btn-enviar {
            border-left: none;
        }

        .contenedor-botones button:first-child {
            border-left: none;
        }

        .contenedor-botones button:last-child {
            border-right: 2px solid #555;
        }

        #ctrl-repro-integrado {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 20%;
            min-width: auto;
            height: 100%;
            flex-shrink: 0;
            background-color: var(--color-fondo, #1A1A1A);
            border: none;
            padding: 0 10px;
            box-sizing: border-box;
            gap: 8px;
        }

        #btn-play-pause {
            background: transparent;
            border: 1px solid var(--color-botones, #00ff88);
            border-radius: 50%;
            color: var(--color-botones, #00ff88);
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            cursor: pointer;
            flex-shrink: 0;
            padding: 0;
            margin: 0;
            padding-left: 2px;
            transition: background-color 0.3s, color 0.3s;
        }
        #btn-play-pause.pausado {
            background: var(--color-botones, #00ff88);
            color: #000;
            border-color: var(--color-botones, #00ff88);
        }
        @media (hover: hover) {
            #btn-play-pause:hover {
                background-color: var(--color-botones, #00ff88);
                color: #000;
            }
        }
        #btn-play-pause:active {
            background-color: var(--color-botones, #00ff88);
            filter: brightness(0.85);
        }

        .repro-barras {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 4px;
            overflow: visible;
            min-width: 0;
        }

        .repro-fila {
            display: flex;
            align-items: center;
            gap: 5px;
            height: 14px;
            overflow: visible;
        }

        .repro-ico {
            font-size: 10px;
            color: #888;
            width: 12px;
            text-align: center;
        }

        .repro-slider {
            -webkit-appearance: none;
            width: 100%;
            height: 3px;
            background: #555;
            border-radius: 2px;
            outline: none;
            margin: 0;
            padding: 0;
        }
        .repro-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 10px;
            height: 10px;
            background: #F0A300;
            border-radius: 50%;
            cursor: pointer;
        }
        #ctrl-tiempo, #ctrl-repro { display: none !important; }
        
        #btn-fullscreen {
            background: transparent;
            border: 1px solid #444;
            color: #777;
            width: 32px;
            height: 32px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            cursor: pointer;
            flex-shrink: 0;
            padding: 0;
            margin: 0;
            transition: background-color 0.3s, border-color 0.3s, color 0.3s;
        }
        @media (hover: hover) {
            #btn-fullscreen:hover {
                background-color: var(--color-botones, #00ff88);
                color: #000;
                border-color: var(--color-botones, #00ff88);
            }
        }
        #btn-fullscreen:active {
            background-color: var(--color-botones, #00ff88);
            filter: brightness(0.85);
        }

        #btn-notificaciones {
            display: none;
        }

        #btn-enviar-movil {
            display: none;
        }

        #badge-notificaciones {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #e53935;
            color: #fff;
            border-radius: 50%;
            font-size: 10px;
            min-width: 18px;
            height: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            font-weight: bold;
            padding: 0 1px;
            font-family: sans-serif;
            line-height: 1;
            box-sizing: border-box;
        }

        #panel-notificaciones {
            display: none;
        }

        #panel-notificaciones-header {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 8px 12px;
            border-bottom: 1px solid #333;
            position: relative;
        }

        #notif-panel-titulo {
            font-size: 0.85em;
            font-weight: bold;
            color: var(--color-botones, #F0A300);
        }

        #btn-cerrar-notificaciones {
            background: none;
            border: none;
            color: #666;
            font-size: 1.1em;
            cursor: pointer;
            padding: 0;
            line-height: 1;
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
        }

        #btn-cerrar-notificaciones:hover {
            color: #fff;
        }

        #lista-notificaciones {
            overflow-y: auto;
            min-height: 120px;
        }

        .notif-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 7px 12px;
            border-bottom: 1px solid #2a2a2a;
            font-size: 0.85em;
            color: #ccc;
        }

        .notif-item:last-child {
            border-bottom: none;
        }

        .notif-icono {
            font-size: 1em;
            flex-shrink: 0;
        }

        .notif-texto {
            flex: 1;
            line-height: 1.3;
        }

        .auth-pantalla {
            align-items: center;
            justify-content: center;
            background-color: #0a0a0a;
        }

        .auth-box {
            background-color: #111;
            border: 1px solid #444;
            border-radius: 8px;
            padding: 40px 36px;
            width: 100%;
            max-width: 380px;
            min-height: 420px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
        }

        .auth-titulo {
            font-size: 2.2em;
            margin-bottom: 8px;
            letter-spacing: 2px;
            color: #F0A300;
        }

        .auth-titulo-m {
            color: #87CEEB;
        }

        .auth-titulo-ia {
            color: #FFFFFF;
        }

        .auth-titulo-ventura {
            color: #87CEEB;
        }

        .auth-tabs {
            display: flex;
            width: 100%;
            border-bottom: 1px solid #444;
            margin-bottom: 4px;
        }

        .auth-tab {
            flex: 1;
            background: none;
            border: none;
            color: #666;
            padding: 8px 0;
            cursor: pointer;
            font-size: 0.95em;
            border-bottom: 2px solid transparent;
            transition: color 0.2s, border-color 0.2s;
        }

        .auth-tab.activa {
            color: var(--color-botones, #00ff88);
            border-bottom: 2px solid var(--color-botones, #00ff88);
        }

        .auth-form {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .auth-input {
            width: 100%;
            background-color: var(--color-fondo, #1a1a1a);
            border: 1px solid #555;
            border-radius: 4px;
            color: #eee;
            padding: 10px 12px;
            font-size: 0.95em;
            box-sizing: border-box;
            outline: none;
            transition: border-color 0.2s;
        }

        .auth-input:focus {
            border-color: #00ff88;
        }

        .auth-recordar {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #888;
            font-size: 0.88em;
            cursor: pointer;
            user-select: none;
        }

        .auth-recordar input[type="checkbox"] {
            accent-color: #00ff88;
            width: 14px;
            height: 14px;
            cursor: pointer;
        }

       .auth-btn {
            width: 100%;
            background-color: #3a3a3a;
            color: #aaaaaa;
            border: 1px solid #444;
            border-radius: 4px;
            padding: 11px;
            font-size: 1em;
            font-weight: bold;
            cursor: pointer;
            letter-spacing: 2px;
            transition: color 0.3s, border-color 0.3s, background-color 0.3s;
            margin-top: 4px;
        }

        .auth-btn:hover {
            background-color: var(--color-botones, #00ff88);
            color: #000;
            border-color: var(--color-botones, #00ff88);
        }

        .auth-btn:active {
            background-color: var(--color-botones, #00ff88);
            border-color: var(--color-botones, #00ff88);
            filter: brightness(0.85);
        }

        .auth-error {
            color: #ff4444;
            font-size: 0.85em;
            min-height: 18px;
            text-align: center;
        }

        @keyframes authFadeIn {
            from {
                opacity: 0;
                transform: translateY(18px) scale(0.98);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .auth-box {
            animation: authFadeIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
        }

        .auth-input {
            transition: border-color 0.25s, box-shadow 0.25s, transform 0.2s;
        }

        .auth-input:focus {
            border-color: var(--color-botones, #00ff88);
            box-shadow: 0 0 8px var(--color-botones, #00ff88);
            transform: scale(1.01);
        }

        .auth-tabs {
            transition: border-color 0.2s;
        }

        .auth-tab {
            transition: color 0.2s, border-color 0.2s, transform 0.15s;
        }

        .auth-tab:hover {
            transform: translateY(-1px);
            color: var(--color-botones, #00ff88);
        }

        .custom-select-wrapper {
            position: relative;
            width: 100%;
        }

        .custom-select-wrapper select {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
            pointer-events: none;
        }

        .custom-select-display {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 36px 10px 12px;
            background-color: var(--color-fondo, #3a3a3a);
            color: var(--color-texto, #aaaaaa);
            border: 2px solid #555;
            border-radius: 4px;
            font-family: inherit;
            font-size: 1em;
            cursor: pointer;
            position: relative;
            z-index: 1;
            pointer-events: auto;
        }

        .custom-select-arrow {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
            z-index: 1;
            color: var(--color-botones, #00ff88);
        }

        .custom-select-dropdown {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            background-color: #3a3a3a;
            border: 2px solid #555;
            border-top: none;
            border-radius: 0 0 4px 4px;
            z-index: 9999;
            max-height: 220px;
            overflow-y: auto;
        }

        .custom-select-dropdown.abierto {
            display: block;
        }

        .custom-select-option {
            padding: 9px 12px;
            color: #aaaaaa;
            cursor: pointer;
            font-family: inherit;
            font-size: 1em;
        }

        .custom-select-option:hover,
        .custom-select-option.seleccionada {
            background-color: var(--color-botones, #00ff88);
            color: #000;
        }
        #barra-nav-movil {
            display: none;
        }

        @media (max-width: 768px) {

            #menu-principal h1 {
                font-size: 10.5vw;
                white-space: nowrap;
                text-align: center;
                margin: 5px 0 8px 0;
                text-shadow: 0 2px 4px rgba(0,0,0,1), 0 4px 12px rgba(0,0,0,0.95), 0 8px 28px rgba(0,0,0,0.9), 0 0 40px rgba(0,0,0,0.75);
            }

            #menu-principal {
                padding-top: 13vh;
                justify-content: flex-start;
            }

            #menu-principal .menu-titulo-bloque {
                position: relative;
                z-index: 1;
            } 

            #menu-principal .menu-btn {
                margin: 4px;
                padding: 10px 20px;
                font-size: 1em;
                background-image: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 55%);
                box-shadow: 0 5px 18px rgba(0,0,0,0.65), 0 0 16px -4px var(--color-botones, #00ff88);
            }

            #frase-matriz {
                font-size: 0.85em;
                height: 5em;
                margin-top: 6px;
                margin-bottom: 6px;
                text-shadow: 0 2px 3px rgba(0,0,0,1), 0 3px 10px rgba(0,0,0,0.95), 0 6px 20px rgba(0,0,0,0.9);
            }

            #btn-nota-autor {
                position: static !important;
                margin-top: 5px;
                letter-spacing: 0;
                padding-left: 20px;
                padding-right: 20px;
                background-image: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, transparent 60%);
                box-shadow: 0 5px 18px rgba(0,0,0,0.65), 0 0 20px -2px var(--color-botones, #00ff88);
            }

            #menu-barra-superior {
                text-shadow: 0 2px 3px rgba(0,0,0,1), 0 3px 10px rgba(0,0,0,0.95), 0 6px 18px rgba(0,0,0,0.9);
            }

            #menu-barra-superior button {
                box-shadow: 0 5px 18px rgba(0,0,0,0.65), 0 0 16px -2px var(--color-botones, #00ff88);
                background-image: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, transparent 60%);
            }

            .auth-pantalla {
                overflow-y: auto;
            }

            .auth-box {
                padding: 24px 20px;
                gap: 10px;
                min-height: unset;
            }

            #creacion-personaje {
                justify-content: flex-start;
                padding-top: 20px;
            }

            #modal-opciones .modal-contenido {
                height: auto;
                max-height: none;
                overflow: visible;
                margin: 0;
            }

            .opciones-tab-panel {
                max-height: none;
                overflow: visible;
            }

            #modal-opciones {
                align-items: flex-start;
                padding-top: 5vh;
                overflow-y: auto;
            }

            #modal-opciones .custom-select-wrapper {
                position: static;
            }

            #modal-opciones .custom-select-dropdown {
                position: static;
                width: 100%;
                border-top: none;
                margin-top: -2px;
            }

            .opciones-tabs-inner {
                display: flex !important;
                width: 100%;
                justify-content: space-evenly;
            }

            .opciones-tab-btn-modal {
                flex: none !important;
                padding: 8px 4px !important;
                font-size: 0.8em !important;
                letter-spacing: 0 !important;
            }

            .creacion-grid {
                grid-template-columns: 1fr 1fr;
                width: 92%;
                gap: 10px;
            }

            #btn-comenzar,
            #btn-aleatorizar-todo,
            #btn-volver {
                width: 92%;
                min-width: unset;
                margin: 0;
                padding: 10px 15px;
                font-size: 1em;
                background-color: var(--color-botones, #7c3aed);
                color: #111;
                border-color: transparent;
            }

            #texto-costo-partida {
                display: block;
                width: 92%;
                margin: 0 auto;
                box-sizing: border-box;
            }

            textarea.creacion-input {
                min-height: unset;
                height: 44px;
                overflow-y: hidden;
                resize: none;
            }

            .creacion-selects-fila {
                flex-direction: column;
            }

            .creacion-contexto-fila {
                flex-direction: column;
            }

            .creacion-contexto-fila > div:last-child {
                display: flex !important;
                flex-direction: row !important;
                flex-wrap: wrap;
                gap: 8px;
            }

            .creacion-contexto-fila > div:last-child .menu-btn {
                flex: 1;
                min-width: 0;
            }

            .creacion-contexto-fila > div:last-child .menu-btn:last-child {
                width: 100%;
                flex: none;
            }

            #contenedor-paneles-juego {
                position: relative;
            }

            #panel-izquierdo,
            #panel-derecho {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                display: none;
                overflow-y: auto;
                padding: 0;
            }

            #panel-central {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                padding: 0 0 4px 0;
                display: none;
            }

            .panel-visible-movil {
                display: block !important;
            }

            #panel-central.panel-visible-movil {
                display: flex !important;
            }

            #barra-nav-movil {
                display: flex;
                width: 100%;
                background-color: #111;
                border-top: 1px solid #333;
                flex-shrink: 0;
                border-radius: 8px 8px 0 0;
                overflow: hidden;
            }

            .nav-movil-btn {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 6px 4px;
                background: none;
                border: none;
                border-right: 1px solid #333;
                color: #666;
                font-family: inherit;
                font-size: 0.72em;
                cursor: pointer;
                gap: 2px;
                transition: color 0.2s, background-color 0.2s;
            }

            .nav-movil-btn:last-child {
                border-right: none;
            }

            .nav-movil-btn.nav-movil-activa {
                color: var(--color-botones, #F0A300);
                background-color: #1a1a1a;
            }

            .nav-movil-icono {
                font-size: 1.3em;
            }

            #narrativa-wrapper {
                margin: 0 8px 4px 8px;
                border: 2px solid #555;
                border-top: none;
                border-radius: 0 0 6px 6px;
                display: flex;
                flex-direction: column;
            }
            #narrativa {
                font-size: 1.15em;
                border: none;
                border-radius: 0;
                margin: 0;
                padding-top: 8px;
            }

            #info-contexto-box {
                display: none;
            }

            #barra-inferior-container {
                flex-wrap: wrap;
                height: auto;
                position: relative;
            }

            #zona-input-central {
				display: flex;
				flex-wrap: wrap;
				width: 60%;
				height: auto;
				padding: 0 0 30px 0;
				position: relative;
			}

            #input-usuario {
                flex: none;
                width: 100%;
                height: 34px;
                padding: 0 10px;
                font-size: 0.95em;
                border-left: 1px solid #333;
                border-right: none;
                border-bottom: 1px solid #333;
                box-sizing: border-box;
            }

            #btn-enviar {
                display: none;
            }

            #btn-guardar,
            #btn-cargar-juego,
            #btn-opciones-juego,
            #btn-ayuda-juego,
            #btn-volver-menu {
                height: 30px;
                flex: 1;
                min-width: 0;
                padding: 0 2px;
                font-size: 15px;
                letter-spacing: 0;
                font-family: sans-serif;
                overflow: hidden;
                background-color: var(--color-botones, #F0A300);
                color: #111;
                border: none;
                border-right: 1px solid #333;
                border-bottom: 1px solid #333;
                box-sizing: border-box;
            }

            #btn-guardar {
                border-left: 1px solid #333;
                box-sizing: border-box;
            }

            #ctrl-repro-integrado {
				position: absolute;
				right: 0;
				top: 0;
				width: 40%;
				height: 34px;
				min-width: unset;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-evenly;
				gap: 4px;
				padding: 0;
				background-color: var(--color-fondo, #202020);
				border-left: 1px solid #333;
				border-right: 1px solid #333;
				border-bottom: 1px solid #333;
			}

            .contenedor-botones {
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100vw;
                height: 30px;
            }

            #ctrl-repro-integrado #btn-play-pause {
                width: 24px;
                height: 24px;
                flex-shrink: 0;
            }

            #ctrl-repro-integrado #btn-fullscreen {
                width: 22px;
                height: 22px;
                flex-shrink: 0;
            }

            #btn-enviar-movil {
                display: flex;
                width: 22px;
                height: 22px;
                flex-shrink: 0;
                background: transparent;
                border: 1px solid var(--color-botones, #F0A300);
                border-radius: 50%;
                color: var(--color-botones, #F0A300);
                align-items: center;
                justify-content: center;
                cursor: pointer;
                position: relative;
                padding: 0;
                font-size: 11px;
                transition: background-color 0.3s, color 0.3s;
            }

            #btn-enviar-movil:active {
                background-color: var(--color-botones, #F0A300);
                filter: brightness(0.85);
            }

            #btn-notificaciones {
                display: flex;
                width: 22px;
                height: 22px;
                flex-shrink: 0;
                background: transparent;
                border: 1px solid var(--color-botones, #F0A300);
                border-radius: 50%;
                color: var(--color-botones, #F0A300);
                align-items: center;
                justify-content: center;
                cursor: pointer;
                position: relative;
                padding: 0;
                font-size: 11px;
                transition: background-color 0.3s, color 0.3s;
            }

            #btn-notificaciones:active {
                background-color: var(--color-botones, #F0A300);
                filter: brightness(0.85);
            }

            @media (hover: hover) {
                #btn-enviar-movil:hover {
                    background-color: var(--color-botones, #F0A300);
                    color: #000;
                }

                #btn-notificaciones:hover {
                    background-color: var(--color-botones, #F0A300);
                    color: #000;
                }
            }

            #panel-notificaciones {
                display: block;
                position: absolute;
                bottom: 100%;
                left: 0;
                width: 100%;
                background-color: var(--color-fondo, #1A1A1A);
                border: 2px solid #555;
                border-bottom: none;
                border-width: 0;
                border-radius: 6px 6px 0 0;
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.25s ease;
                pointer-events: none;
                z-index: 10;
            }

            #panel-notificaciones.visible {
                max-height: 50vh;
                overflow-y: auto;
                pointer-events: auto;
                border-width: 2px;
                border-style: solid;
            }

            #ctrl-repro-integrado .repro-barras {
                display: none;
            }

            .opciones-fuentes-fila {
                grid-template-columns: 1fr 1fr;
            }

            #modal-terminos > div {
                width: 92vw;
            }

            #modal-portrait img {
                max-width: 90vw;
                height: auto;
                max-height: 80vh;
            }

            #franja-narrativa-superior {
                display: grid;
                grid-template-columns: 1fr auto 1fr;
                padding: 0;
                column-gap: 0;
                row-gap: 0;
                border-radius: 0;
                background: transparent;
                border: none;
                margin-bottom: 0;
            }

            #franja-miacciones {
                display: contents;
            }

            #franja-miacciones-centro {
                background: none;
            }

            #franja-segunda-linea {
                display: grid;
                grid-template-columns: 1fr auto 1fr;
                grid-auto-flow: dense;
                grid-column: 1 / -1;
                border: 2px solid #555;
                border-radius: 8px 8px 0 0;
                overflow: hidden;
                margin: 8px 8px 0 8px;
                background: var(--color-fondo, #1A1A1A);
            }

            #btn-swap-juego {
                grid-column: 1;
                grid-row: 1;
                border-top: 2px solid #555;
                border-left: 2px solid #555;
                border-right: 1px solid #555;
                border-bottom: 1px solid #555;
                padding: 6px 8px;
                text-align: center;
                border-radius: 0;
            }

            #franja-miacciones-centro {
                grid-column: 2;
                grid-row: 1;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 6px;
                font-size: 0.95em;
                background: #000;
                align-self: stretch;
            }

            #btn-logs-juego {
                grid-column: 3;
                grid-row: 1;
                border-top: 2px solid #555;
                border-right: 2px solid #555;
                border-left: 1px solid #555;
                border-bottom: 1px solid #555;
                padding: 6px 8px;
                text-align: center;
                border-radius: 0;
            }

            #franja-ubicacion {
                display: block;
                grid-column: 3;
                border-left: 1px solid #555;
                font-size: 0.82em;
                font-weight: bold;
                font-family: 'Alfa Slab One', serif;
                color: var(--color-botones, #F0A300);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                text-align: right;
                padding: 3px 6px;
                cursor: pointer;
            }

            #franja-tiempo {
                display: flex;
                grid-column: 2;
                align-items: center;
                justify-content: center;
                font-size: 0.85em;
                font-weight: bold;
                font-family: 'Alfa Slab One', serif;
                white-space: nowrap;
                padding: 3px 6px;
            }

            #franja-turnos {
                display: flex;
                grid-column: 1;
                border-right: 1px solid #555;
                justify-content: flex-start;
                align-items: center;
                font-size: 0.85em;
                padding: 3px 6px;
                gap: 4px;
            }

            #btn-toggle-sugerencias {
                display: flex;
                width: 100%;
                align-items: center;
                justify-content: center;
                padding: 3px 5px;
                background: transparent;
                border: none;
                color: var(--color-botones, #F0A300);
                font-family: inherit;
                font-size: 0.85em;
                font-weight: bold;
                cursor: pointer;
            }

            #zona-sugerencias-turnos {
                flex-direction: column;
                gap: 0;
                padding: 0;
                border-top: 2px solid #555;
                background: var(--color-fondo, #1A1A1A);
                border-radius: 0;
            }

            #zona-sugerencias-turnos #sugerencias {
                display: none;
                padding: 4px 2px;
                border-top: 1px solid #333;
            }

            #zona-sugerencias-turnos.expandida #sugerencias {
                display: flex;
                border-radius: 0;
            }

            #zona-sugerencias-turnos .sugerencia-item {
                padding: 1px 2px;
                width: 100%;
            }

            .equipamiento-container {
                gap: 5px;
            }

            .equipamiento-seccion-superior {
                flex: 0 0 58%;
                overflow: hidden;
                padding: 2px;
                border: none;
                background-color: transparent;
                border-radius: 0;
            }

            .equipamiento-silueta-img {
                width: 35px;
            }

            .slot-equipamiento {
                font-size: 0.72em;
                padding: 1px 5px;
                mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
                -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
            }

            .equipamiento-seccion-inferior {
                flex: 1;
                max-height: none;
                padding: 3px 8px;
            }

            #inventario-header {
                margin-bottom: 3px !important;
                padding-bottom: 3px !important;
            }

            .contenedor-carga-capacidad {
                font-size: 0.72em;
                gap: 3px;
            }

            .contenedor-carga-lista {
                min-height: 0;
                gap: 2px;
            }

            #lista-inventario .inventory-item {
                font-size: 11px !important;
                padding: 1px 5px !important;
                margin-bottom: 0 !important;
                line-height: 1.1 !important;
            }

            .peso-total-display {
                padding-top: 4px;
            }
        }

        #panel-derecho #time-indicator-title,
        #panel-derecho #audio-player-title {
            display: none !important;
        }

        .ctrl-juego {
            position: fixed;
            background: rgba(32,32,32,0.95);
            border: 2px solid #555;
            border-radius: 8px;
            z-index: 999;
            display: none;
        }
        .ctrl-juego.visible { display: block !important; }
        #ctrl-tiempo {
            left: 15px;
            bottom: 15px;
            padding: 8px 12px;
            font-size: 1em;
            color: #F0A300;
            font-weight: bold;
        }
        #ctrl-repro {
            right: 15px;
            bottom: 15px;
            padding: 10px;
            width: 280px;
        }
        #ctrl-repro .flex { display: flex; align-items: center; gap: 8px; }
        #ctrl-repro button {
            background: #4a4;
            color: #fff;
            border: none;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1.2em;
            flex-shrink: 0;
        }
        #ctrl-repro button:hover { background: #5b5; }
        #ctrl-repro button.pausado { background: #000; }
        #ctrl-repro .barras { flex: 1; display: flex; flex-direction: column; gap: 6px; }
        #ctrl-repro .fila { display: flex; align-items: center; gap: 5px; }
        #ctrl-repro .ico { font-size: 0.85em; color: #aaa; width: 16px; }
        #ctrl-repro input[type="range"] {
            width: 100%;
            height: 4px;
            cursor: pointer;
            -webkit-appearance: none;
            background: #555;
            border-radius: 2px;
        }
        #ctrl-repro input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 12px;
            height: 12px;
            background: #F0A300;
            cursor: pointer;
            border-radius: 50%;
        }
        #ctrl-repro input[type="range"]::-moz-range-thumb {
            width: 12px;
            height: 12px;
            background: #F0A300;
            cursor: pointer;
            border-radius: 50%;
            border: none;
        }
        .tab-btn-izq {
            transition: all 0.3s;
        }
        .tab-btn-izq:hover {
            opacity: 0.8;
        }
        .tab-btn-izq.active {
            background: #F0A300 !important;
            color: #000 !important;
        }
		@media (max-width: 768px) {
            #menu-fondo-imagen { background-image: url('/static/fondo-menu-mobile.webp'); background-size: cover; }
        }