body { margin: 0; padding: 0; font-family: 'Lato', sans-serif; background-color: #1a1a1a; color: #333; display: flex; flex-direction: column; align-items: center; height: 100vh; height: 100dvh; width: 100vw; width: 100dvw; overflow: hidden; position: fixed; top: 0; left: 0; touch-action: none; }
.pantalla-inicio { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; z-index: 200; background-color: #111; overflow: hidden; }
.pantalla-inicio.oculto { display: none; }
.menu-lateral-inicio { width: 300px; height: 100%; background-color: #1a1a1a; border-right: 1px solid #d4af37; padding: 30px; box-sizing: border-box; display: flex; flex-direction: column; overflow-y: auto; }
.menu-lateral-inicio h1 { font-family: 'Playfair Display', serif; color: #d4af37; font-size: 3.5em; margin: 0 0 10px 0; text-align: center; }
.separador-titulo { height: 1px; background-color: #d4af37; width: 100%; margin: 20px 0; }
.botones-inicio { display: flex; flex-direction: column; gap: 15px; width: 100%; flex-grow: 1; }
.btn-inicio { background: transparent; color: #f0f0f0; border: 1px solid #444; padding: 12px; font-family: 'Playfair Display', serif; font-size: 1.1em; cursor: pointer; text-align: left; }
.btn-inicio:active { background-color: #d4af37; color: #111; border-color: #d4af37; }
.btn-exit { background: transparent; color: #ff4d4d; border: 1px solid #444; padding: 12px; font-family: 'Lato', sans-serif; cursor: pointer; margin-top: 20px; font-size: 1em; }
.btn-exit:active { background-color: #ff4d4d; color: #fff; }
.btn-dev { background: transparent; color: #aaa; border: 1px dashed #555; padding: 8px; font-family: 'Lato', sans-serif; cursor: pointer; margin-top: 10px; font-size: 0.8em; margin-bottom: 20px; }
.btn-dev:active { background-color: #333; }
.parpadeando { animation: parpadeo 1.5s infinite; border-color: #d4af37 !important; color: #d4af37 !important; }
@keyframes parpadeo { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }

/* CAJA OBJETIVO */
.caja-objetivo { margin-top: 20px; background: rgba(212, 175, 55, 0.1); border: 1px solid #d4af37; border-radius: 8px; padding: 15px; text-align: center; }
.caja-objetivo h3 { margin: 0 0 10px 0; font-size: 1em; color: #d4af37; font-family: 'Playfair Display', serif; }
.caja-objetivo p { margin: 0; font-size: 0.9em; color: #f0f0f0; }
.barra-progreso-obj { width: 100%; height: 6px; background: #444; border-radius: 3px; margin-top: 10px; overflow: hidden; }
#progreso-obj { height: 100%; width: 0%; background: #d4af37; transition: width 0.5s ease-out; }

.imagen-destacada-inicio { flex: 1; background-image: url('inicial.jpg'); background-size: cover; background-position: center; position: relative; }
.caja-estatus-inicio { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.8); border: 1px solid #d4af37; border-radius: 10px; padding: 15px 30px; color: #d4af37; display: flex; flex-direction: column; gap: 5px; font-size: 1.2em; backdrop-filter: blur(5px); box-shadow: 0px 10px 20px rgba(0,0,0,0.5); align-items: center; width: fit-content; max-width: 90%; }

.header { width: 100%; background-color: #111; padding: 10px 15px; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #d4af37; z-index: 10; }
.texto-header { color: #f0f0f0; font-size: 1.1em; letter-spacing: 1px; }
.btn-menu { color: #d4af37; font-size: 1.2em; cursor: pointer; }
.museo { width: 100vw; max-width: 100%; flex: 1; background-image: url('frontal.jpg'); background-size: 135% 130%; background-position: center 40%; background-repeat: no-repeat; position: relative; overflow: hidden; touch-action: none; }
.flecha-nav { position: absolute; top: 45%; transform: translateY(-50%); background-color: rgba(0,0,0,0.5); color: #d4af37; font-size: 1.8em; padding: 5px 10px; cursor: pointer; z-index: 20; border-radius: 5px; }
.flecha-izq { left: 10px; } .flecha-der { right: 10px; }
.zona-bloqueada { position: absolute; display: none; background-color: rgba(255, 0, 0, 0.2); border: 1px dashed #ff0000; z-index: 10; pointer-events: none; }

.fondo-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 50; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.fondo-overlay.activo { opacity: 1; pointer-events: auto; }
.panel-inventario { position: fixed; top: 0; left: 0; height: 100%; width: 300px; background-color: rgba(245, 245, 240, 0.98); backdrop-filter: blur(10px); border-right: 1px solid #d4af37; padding: 20px; box-sizing: border-box; z-index: 60; transform: translateX(-100%); transition: transform 0.3s ease-out; overflow-y: auto; }
.panel-inventario.activo { transform: translateX(0); }
.header-inventario { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.header-inventario h2 { font-family: 'Playfair Display', serif; color: #222; margin: 0; font-size: 1.8em; }
.btn-volver { color: #666; cursor: pointer; font-size: 0.9em; }
.categoria-bloque { background: #222; color: #d4af37; padding: 15px; font-family: 'Playfair Display', serif; font-size: 1.1em; cursor: pointer; display: flex; justify-content: space-between; align-items: center; border-radius: 4px; margin-bottom: 5px; }
.flecha-categoria { font-size: 0.8em; transition: transform 0.2s; }
.categoria-bloque.abierta .flecha-categoria { transform: rotate(180deg); }
.items-categoria { display: flex; flex-direction: column; gap: 10px; margin-bottom: 15px; }
.item-card { background-color: #fff; border: 1px solid #ddd; border-radius: 4px; width: 100%; box-shadow: 0 2px 5px rgba(0,0,0,0.05); display: flex; align-items: center; gap: 15px; padding: 10px; }
.item-img-placeholder { width: 50px; height: 50px; background-size: cover; background-position: center; background-color: #f0f0f0; flex-shrink: 0; border: 1px solid #ddd; cursor: pointer; }
.item-info { display: flex; flex-direction: column; flex-grow: 1; }
.item-info strong { color: #222; font-size: 0.95em; }
.item-info span { color: #888; font-size: 0.8em; font-style: italic; }
.btn-colocar { background: #d4af37; color: #111; border: none; padding: 8px; cursor: grab; font-size: 1.2em; border-radius: 4px; flex-shrink: 0; }

.cuadro-pendiente { background-size: cover; background-position: center; border: 3px dashed #28a745; position: absolute; z-index: 15; box-shadow: 0px 0px 20px rgba(40, 167, 69, 0.4); opacity: 0.95; cursor: grabbing; touch-action: none; }
.cuadro-colocado { 
    background-size: cover; 
    background-position: center; 
    border: 3px solid #D4AF37; 
    position: absolute; 
    z-index: 15; 
    box-shadow: 0px 15px 30px rgba(0,0,0,0.5); 
    cursor: pointer; 
    border-width: 3px; 
    touch-action: none; 
}

/* NUEVO: Objetos sin marco (Jarrones, Joyas, Mobiliario) */
.cuadro-colocado.sin-marco {
    border: none;
    box-shadow: 0px 10px 20px rgba(0,0,0,0.3);
    mix-blend-mode: multiply; /* ¡ESTO QUITA EL FONDO BLANCO MÁGICAMENTE! */
}
.barra-confirmacion { position: fixed; bottom: 30px; left: 0; width: 100%; z-index: 30; display: none; justify-content: center; gap: 30px; }
.barra-confirmacion.activa { display: flex; }
.btn-grande { padding: 15px 40px; font-family: 'Playfair Display', serif; font-size: 1.3em; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; box-shadow: 0px 5px 15px rgba(0,0,0,0.5); }
.btn-grande.si { background: #28a745; color: #fff; }
.btn-grande.no { background: #dc3545; color: #fff; }
.menu-retirar { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); background-color: rgba(0,0,0,0.9); color: #d4af37; border: 1px solid #d4af37; padding: 8px 15px; font-size: 0.9em; cursor: pointer; border-radius: 4px; z-index: 25; white-space: nowrap; font-family: 'Playfair Display', serif; box-shadow: 0px 5px 10px rgba(0,0,0,0.5); }

.modal-zoom { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.95); z-index: 100; display: none; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 40px; box-sizing: border-box; }
.zoom-contenido { max-width: 90%; text-align: center; position: relative; }
.zoom-imagen { max-width: 100%; max-height: 65vh; border: 10px solid #222; box-shadow: 0 0 50px rgba(212, 175, 55, 0.3); }
.zoom-info { color: #ccc; margin-top: 20px; }
.zoom-info h3 { font-family: 'Playfair Display', serif; color: #d4af37; font-size: 2em; margin: 0; }
.zoom-info p { font-size: 1.1em; }
.historia-cuadro { margin-top: 15px; font-size: 0.9em; color: #aaa; line-height: 1.5; max-width: 500px; margin-left: auto; margin-right: auto; }
.btn-info { background: transparent; color: #d4af37; border: 1px solid #d4af37; padding: 5px 15px; font-size: 0.8em; cursor: pointer; margin-top: 15px; }
.btn-cerrar-zoom { position: absolute; top: 20px; left: 20px; color: #d4af37; font-size: 2em; cursor: pointer; background: rgba(0,0,0,0.5); width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; border: 1px solid #d4af37; z-index: 110; }
.btn-mostrar-info { position: absolute; bottom: 30px; right: 30px; background: rgba(0,0,0,0.7); color: #d4af37; border: 1px solid #d4af37; padding: 10px 25px; border-radius: 30px; cursor: pointer; font-family: 'Playfair Display', serif; font-size: 1em; z-index: 110; display: block; }
.modal-ficha { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 200; display: none; justify-content: center; align-items: center; padding: 20px; box-sizing: border-box; }
.ficha-contenido { background: #111; border: 1px solid #d4af37; max-width: 600px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 40px; color: #ccc; position: relative; }
.ficha-contenido h2 { font-family: 'Playfair Display', serif; color: #d4af37; margin: 0 0 30px 0; text-align: center; }
.cuerpo-ficha p { margin: 10px 0; font-size: 0.9em; line-height: 1.6; }
.cuerpo-ficha strong { color: #fff; }
.btn-volver-ficha { background: #d4af37; color: #111; border: none; padding: 10px 20px; cursor: pointer; margin-top: 30px; width: 100%; font-weight: bold; }
.modal-aviso { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 300; display: none; justify-content: center; align-items: center; }
.aviso-caja { background: #1a1a1a; border: 1px solid #d4af37; padding: 40px; text-align: center; max-width: 300px; }
.aviso-caja h3 { font-family: 'Playfair Display', serif; color: #d4af37; margin: 0 0 15px 0; }
.aviso-caja p { color: #ccc; font-size: 0.9em; line-height: 1.5; }

/* MERCADO DEL ARTE (ART-EX) */
.modal-mercado { position: fixed; top: 0; left: 0; width: 100dvw; height: 100dvh; background-color: #000; color: #0f0; z-index: 250; display: none; flex-direction: column; font-family: 'Courier New', monospace; }
.modal-mercado.activo { display: flex; }
.mercado-header { display: flex; justify-content: space-between; align-items: center; padding: 15px; border-bottom: 2px solid #d4af37; background-color: #111; color: #fff; }
.mercado-header h2 { font-family: 'Playfair Display', serif; color: #d4af37; font-size: 1.5em; margin: 0; letter-spacing: 2px; }
.btn-volver-mercado { color: #888; cursor: pointer; font-size: 0.9em; }
.tabla-mercado { flex: 1; overflow-y: auto; padding: 10px; }
.header-tabla { display: flex; padding: 5px; border-bottom: 1px solid #333; color: #d4af37; font-size: 0.75em; text-transform: uppercase; font-weight: bold; }
.header-tabla span:nth-child(1) { flex: 2; } 
.header-tabla span:nth-child(2) { flex: 1; text-align: center; } 
.header-tabla span:nth-child(3) { flex: 1; text-align: center; } 
.fila-mercado { display: flex; align-items: center; padding: 10px 5px; border-bottom: 1px solid #222; font-size: 0.9em; cursor: pointer; }
.fila-mercado .autor { color: #fff; font-family: 'Lato', sans-serif; flex: 2; }
.fila-mercado .autor span { color: #888; font-size: 0.85em; }
.fila-mercado .valor { color: #fff; flex: 1; text-align: center; font-family: 'Courier New', monospace; }
.fila-mercado .variacion { flex: 1; text-align: center; font-weight: bold; }
.verde { color: #00ff00; } .rojo { color: #ff0000; }
.ticker-mercado { background-color: #111; border-top: 1px solid #333; padding: 10px 0; white-space: nowrap; overflow: hidden; }
.ticker-mercado span { display: inline-block; padding-left: 100%; color: #d4af37; font-size: 1.1em; white-space: nowrap; }
.ticker-mercado span.animacion { animation: ticker 120s linear infinite; }
.ticker-mercado span.pausa { padding-left: 15px; transform: translateX(0); animation: none; }
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

/* PERIÓDICO, OPORTUNIDADES, ENCARGOS, GESTIÓN */
.modal-noticias { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); z-index: 260; display: none; justify-content: center; align-items: flex-start; padding: 40px 20px; box-sizing: border-box; overflow-y: auto; }
.periodico-contenido { background-color: #f4f0ec; color: #222; max-width: 500px; width: 100%; padding: 40px; box-sizing: border-box; position: relative; border: 1px solid #d4af37; box-shadow: 0 0 30px rgba(0,0,0,0.5); font-family: 'Playfair Display', serif; }
.periodico-contenido h2 { text-align: center; font-size: 2.2em; margin: 0 0 5px 0; color: #111; border-bottom: 3px double #222; padding-bottom: 10px; }
.fecha-periodico { text-align: center; color: #555; font-style: italic; font-size: 0.9em; margin-bottom: 25px; }
.cuerpo-periodico { display: flex; flex-direction: column; gap: 20px; }
.noticia-item { background: #fff; padding: 15px; border-left: 4px solid #d4af37; box-shadow: 2px 2px 5px rgba(0,0,0,0.1); font-family: 'Lato', sans-serif; }
.noticia-item h3 { margin: 0 0 10px 0; font-size: 1.1em; color: #111; }
.noticia-item p { margin: 0; font-size: 0.9em; line-height: 1.5; color: #444; }
.noticia-item .efecto-mercado { display: block; margin-top: 10px; font-size: 0.8em; font-weight: bold; }
.sube { color: #28a745; } .baja { color: #dc3545; }

@media (orientation: landscape) {
    .modal-zoom { flex-direction: row; padding-top: 0; justify-content: center; align-items: center; overflow-y: auto; }
    .zoom-contenido { display: flex; flex-direction: row; align-items: center; gap: 30px; max-width: 95%; }
    .zoom-imagen { max-height: 80vh; max-width: 50vw; }
    .zoom-info { text-align: left; margin-top: 0; max-width: 40vw; }
    .btn-mostrar-info { right: auto; left: 50%; transform: translateX(-50%); bottom: 20px; }
}

/* TEXTO FLOTANTE DE INGRESOS */
.texto-flotante {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(40, 167, 69, 0.9);
    color: #fff;
    padding: 10px 20px;
    border-radius: 20px;
    font-family: 'Playfair Display', serif;
    font-size: 1.2em;
    font-weight: bold;
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: all 2s ease-out;
}
.texto-flotante.activo {
    opacity: 1;
    bottom: 150px;
}

/* BOTÓN REINICAR PARTIDA */
.btn-dev.rojo { color: #dc3545 !important; border-color: #dc3545 !important; }

/* PESTAÑAS DEL INVENTARIO */
.tabs-inventario { display: flex; gap: 5px; margin-bottom: 15px; }
.btn-tab { 
    flex: 1; background: #eee; border: 1px solid #ddd; padding: 8px; 
    cursor: pointer; border-radius: 4px; font-size: 0.85em; font-family: 'Lato', sans-serif;
    transition: background 0.2s;
}
.btn-tab.activo { background: #222; color: #d4af37; border-color: #222; }

/* PANTALLA DE INTRODUCCIÓN */
.pantalla-intro {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #0a0a0f; z-index: 500; display: flex; 
    justify-content: center; align-items: center; text-align: center;
    background-image: url('inicial.jpg'); background-size: cover; background-position: center;
}
.pantalla-intro::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.85); }
.intro-contenido { position: relative; z-index: 2; color: #fff; padding: 40px; max-width: 600px; }
.pantalla-intro h1 { font-family: 'Playfair Display', serif; color: #d4af37; font-size: 4em; margin: 0; text-shadow: 0 0 30px rgba(212, 175, 55, 0.5); }
.intro-subtitulo { color: #888; letter-spacing: 5px; margin: 5px 0 40px 0; }
.intro-texto { color: #ccc; font-size: 1.1em; line-height: 1.8; font-family: 'Lato', sans-serif; }

/* BOTÓN GUIADO (Parpadeo Dorado) */
/* TUTORIAL: ILUMINAR CUALQUIER BOTÓN */
.pulsar-tutorial {
    animation: pulsoTutorial 1.2s infinite;
    background-color: rgba(212, 175, 55, 0.2) !important;
    border-color: #d4af37 !important;
    color: #d4af37 !important;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.6);
}
@keyframes pulsoTutorial {
    0% { background-color: rgba(212, 175, 55, 0.1); }
    50% { background-color: rgba(212, 175, 55, 0.4); }
    100% { background-color: rgba(212, 175, 55, 0.1); }
}

/* TUTORIAL: FLECHA SEÑALANDO EL BOTÓN DE COLOCAR */
.btn-colocar.tutorial-colocar {
    animation: pulsoColocar 1s infinite;
    box-shadow: 0 0 15px rgba(40, 167, 69, 0.8);
    position: relative;
}
@keyframes pulsoColocar {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* FAVORITOS */
.item-info strong span {
    user-select: none;
    -webkit-user-select: none;
    margin-left: 5px;
}