/* --- ESTILOS EXISTENTES --- */
html {
    scroll-behavior: smooth;
}
/* --- Dark Theme --- */
.dark-theme {
    background-color: #1e1e1e;
    color: #e0e0e0;
}
.dark-theme h2 {
    background-color: #333333;
    color: #f0f0f0;
    border-bottom: 1px solid #444;
}
.dark-theme #escena-vista, .dark-theme #editor, .dark-theme .personaje, .dark-theme .escena, .dark-theme .frameh {
    background-color: #2c2c2c;
    color: #e0e0e0;
    border-color: #444;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
/* Estilo del modal de configuración en tema oscuro */
.dark-theme #lugares {
    background-color: #2c2c2c;
    color: #e0e0e0;
    border: 1px solid #555;
}
.dark-theme #chat {
    background: #252525;
    border: 1px solid #444;
}
.dark-theme #chat p:nth-child(odd) { /* Gemini */
    background-color: #333;
    color: #e0e0e0;
}
.dark-theme #chat p:nth-child(even) { /* Usuario */
    background-color: #3a3a3a;
    color: #e0e0e0;
}
.dark-theme #user-input, .dark-theme .personaje textarea, .dark-theme .frameh textarea, .dark-theme #gemini1, .dark-theme #apiInput {
    background-color: #333;
    color: #e0e0e0;
    border: 1px solid #555;
}
.dark-theme button {
    background-color: #444;
    color: #e0e0e0;
    border: 1px solid #666;
}
.dark-theme button:hover {
    background-color: #555;
}
.dark-theme .pro {
    background-color: #00529B; /* Un azul oscuro para botones pro */
    color: white;
}



.pro5 {background-color:transparent!important; color:rgb(0, 0, 0)!important; border:none !important;
z-index: 1000!important;
height: fit-content!important;
width: fit-content!important;
position: absolute !important;
bottom: 2% !important;  transition: transform 0.3s ease;

left: 50% !important;
transform: translateX(-50%) !important;
font-size: 3em !important;
padding: 2px !important;
margin: 0px !important;



} 
.dark-theme .pro6 {
    background-color: #313131; /* Un azul oscuro para botones pro */
    color: white;
}

.pro6 {background-color:transparent !important; color: #000000 !important; border:none !important;
z-index: 1000!important;
height: fit-content!important;
width: fit-content!important;
position: absolute !important;
top: 20% !important;
left: 3% !important;  transition: transform 0.3s ease;

transform: translateX(-50%) !important;
font-size: xx-large !important;
padding: 2px !important;
margin: 0px !important;
padding-left: 1% !important; padding-right: 1% !important; /* Añadido para margen horizontal */
} 
.pro16 {background-color: transparent !important; color: #000000 !important; border:none !important;
z-index: 1000!important;
height: fit-content!important;
width: fit-content!important;
position: absolute !important;  transition: transform 0.3s ease;

top: 40% !important;
left: 3% !important;
transform: translateX(-50%) !important;
font-size: xx-large !important;
padding: 2px !important;
margin: 0px !important;
padding-left: 1% !important; padding-right: 1% !important; /* Añadido para margen horizontal */
} 

.pro17 {background-color: transparent !important; color: #000000 !important; border:none !important;
z-index: 1000!important;
height: fit-content!important;
width: fit-content!important;
position: absolute !important;
top: 60% !important;
left: 3% !important;
transform: translateX(-50%) !important;
font-size: xx-large !important;
padding: 2px !important;
margin: 0px !important;   transition: transform 0.3s ease;

padding-left: 1% !important; padding-right: 1% !important; /* Añadido para margen horizontal */
} 

.pro18 {background-color: transparent !important; color: #000000 !important; border:none !important;
z-index: 1000!important;
height: fit-content!important;
width: fit-content!important;
position: absolute !important;
top: 80% !important;
left:3% !important;
transform: translateX(-50%) !important;
font-size: xx-large !important;
padding: 2px !important;
margin: 0px !important;   transition: transform 0.3s ease;

padding-left: 1% !important; padding-right: 1% !important; /* Añadido para margen horizontal */
} 
 .pro6:hover  {transform: translateX(-50%) scale(1.3) !important;}
 .pro7:hover  {transform: translateX(-50%) scale(1.3) !important;}
 .pro5:hover {transform: translateX(-50%) scale(1.3) !important;}

 .pro17:hover  {transform: translateX(-50%) scale(1.3) !important;}
 .pro16:hover {transform: translateX(-50%) scale(1.3) !important;}
 .pro18:hover {transform: translateX(-50%) scale(1.3) !important;}
 

.pro7 {background-color: transparent!important; color: #333 !important; border:none !important;
z-index: 1000!important;
height: fit-content!important;
width: fit-content!important;
position: fixed !important;
top: 40% !important;
left: 3% !important;
transform: translateX(-50%) !important;
font-size: x-large !important;
padding: 2px !important;  transition: transform 0.3s ease;

margin: 0px !important;
padding-left: 1% !important; padding-right: 1% !important; /* Añadido para margen horizontal */
}



.dark-theme .imput { /* Input de nombre de escena */
    background-color: #333;
    color: #e0e0e0;
    border: 0px solid #555;
}

/* ========= INICIO: NUEVOS ESTILOS ========= */
.dark-theme .input-no-editable {
    background-color: #3a3a3a !important; /* Un poco más oscuro */
    color: #a0a0a0 !important; /* Texto grisáceo */
    cursor: not-allowed;
}
/* ========= FIN: NUEVOS ESTILOS ========= */


.dark-theme #guion-literario {
    background-color: #2c2c2c; /* Fondo principal del guion */
}
.dark-theme #indice-capitulos-guion {
    background-color: #252525; /* Fondo del índice */
    border-color: #444;
}
.dark-theme .titulo-capitulo-indice {
    background-color: #333;
    color: #e0e0e0;
    border-bottom-color: #444;
}
.dark-theme .titulo-capitulo-indice:hover {
    background-color: #3a3a3a;
}
.dark-theme .titulo-capitulo-indice.activo {
    background-color: #00529B; /* Azul para activo */
}
.dark-theme #contenido-capitulo-activo input[type="text"], .dark-theme #contenido-capitulo-activo textarea, .dark-theme .capitulo-guion input[type="text"], .dark-theme .capitulo-guion textarea {
    background-color: #33333300;
    color: #ffffff;
    border-color: #555;
}
.dark-theme .capitulo-guion {
    background-color: #3a3a3a; /* Fondo de cada capítulo */
    border-color: #444;
}
.dark-theme .titulo-capitulo-indice-container {
    border-bottom-color: #444;
    background-color: #333;
}
.dark-theme .titulo-capitulo-indice-container:hover {
    background-color: #3a3a3a;
}
.dark-theme .titulo-capitulo-indice-container.activo-container {
    background-color: #00529B; /* Azul para activo */
}
.dark-theme .eliminar-capitulo-btn-indice {
    color: #ff8a80; /* Light red for dark theme */
    background-color: transparent; /* Ensure it's transparent initially */
}
.dark-theme .eliminar-capitulo-btn-indice:hover {
    background-color: #5a3e3e; /* Darker red background on hover */
    color: #ff5252;
}
.dark-theme #contenido-capitulo-activo .mensaje-placeholder, .dark-theme .mensaje-placeholder {
    color: #aaa; /* Lighter placeholder text for dark theme */
}
.dark-theme #gemini-raw-output {
    background-color: #22272e; 
    color: #c9d1d9; 
    border-color: #484f58; 
}


/* --- ESTILOS PARA LA BARRA DE DESPLAZAMIENTO (SCROLLBAR) --- */

/* Define el tamaño general de la barra de desplazamiento */
::-webkit-scrollbar {
    width: 10px;  /* Ancho para barras verticales */
    height: 10px; /* Alto para barras horizontales */
}

/* Estiliza la pista (la "línea" de fondo) */
::-webkit-scrollbar-track {
    background-color: #ff000000; /* Un gris muy claro para el tema por defecto */
    border-radius: 10px;
}

/* Estiliza el control deslizante (el "punto") */
::-webkit-scrollbar-thumb {
    background-color: #000000; /* Negro, como se solicitó */
    border-radius: 10px;
    transition: background-color 0.3s ease;
}

/* Estilo del control al pasar el ratón por encima */
::-webkit-scrollbar-thumb:hover {
    background-color: #333333; /* Un gris oscuro para el efecto hover */
}

/* --- AJUSTES PARA EL TEMA OSCURO --- */

/* En el tema oscuro, la pista necesita un color que contraste con el fondo oscuro y el control negro */
.dark-theme ::-webkit-scrollbar-track {
    background-color: #ff000000; /* Un gris más oscuro pero visible */
}

/* El control sigue siendo negro en el tema oscuro, como se solicitó */
.dark-theme ::-webkit-scrollbar-thumb {
    background-color: #000000;
}

/* Efecto hover ligeramente diferente para el tema oscuro */
.dark-theme ::-webkit-scrollbar-thumb:hover {
    background-color: #222222; /* Un negro un poco más claro */
}





body input, body textarea {
    -webkit-autofill: none; font-size: large; }

h2 {background-color: black; font: helvetica !important; 
    color:#ffffff; 
     padding: 1%;
    line-height: 1;
  margin-left: 0.7%;
  margin-top: 0.2%;
    border-radius: 5px;
    width: 37%;
    height: 30%;
    max-height: auto; 
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
    flex-direction: column;
    text-align: left;
    word-wrap: break-word;
    border-bottom: 1px solid #eee;} 

p {background-color: #2e2e5e00;
    border-radius: 5px; width: 90%;}
#chat {margin-top: 35%;
    margin-left: -2%;
    width: 102%;
     font-size:small;
     line-height: 1.4;
    height: 50%;
    overflow-y: auto;
    border: 1px solid #ccc;
    background: #fff;
    display: flex;
    flex-direction: column; }
#chat p { margin: 0;
    padding: 8px;
    border-radius: 5px;
    white-space: pre-line; }
#chat p strong {
    display: block;
    margin-bottom: 4px;
}
#chat p:nth-child(odd) {
    background-color: #f1f3f5; 
   color: #333;}
#chat p:nth-child(even) {
    background-color: #e9ecef; 
    color: #333;}
#user-input {
    margin-left: -2%;
    width: 93%;
     height: 20%;
    padding: 10px;
    margin-top: 2%;
    border: 1px solid #ccc;
    border-radius: 5px;  resize: none; }
img { 
    height: auto;
    border-radius: 3%;
    display: block;
 
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);}
ul {list-style-type: none;padding: 0;}
li { margin-bottom: 10px;}
button {
    background-color: #ffffff7a; 
    color: #333; 
    padding: 12px 20px;
    border: 0px solid #ced4da; 
    border-radius: 5px;
    cursor: pointer;
    font-size:small;
    transition: background-color 0.2s ease, transform 0.1s ease-in-out;
    display: inline-block;
 width: fit-content;
;   height: fit-content;}


.tons { width: 100%;}
.tons2 { width: 100%; color: #000 !important;}


button:hover {background-color:#dee2e6a1;  transform: scale(1.02);}
button:active {transform: scale(0.95);}
.guardado {margin: 1%;}
.pro3 {background-color: #000000; color:rgb(255, 0, 0); border:none; width: auto;} 

.pro {background-color: #000000; color:white; border:none;
z-index: 1000;
height: fit-content;
width: fit-content;

} 



body { 
    font-family: Arial, sans-serif; display: flex; position: fixed; width: 100%; height: 100%;
    font-size: 16px; 
    overflow: hidden; 
top: 0%;
left: 0%;right: 0%;
left: 0%; 

background-color: transparent;


    color: #333; 
    margin: 0;
    padding: 0;
    text-align: center;}

 

.modal-content {
    padding: 25px; 
    width: 100%;
    max-width: 550px;
    color: rgb(0, 0, 0);
 min-height: 250px;
    display: none;
    position: fixed;
visibility: visible;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);       
    background-color: #ffffffef;  
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    flex-direction: column;
    gap: 15px;
    align-items: center;    border: 0px solid #ffffff;
     z-index: 1000001 !important;
} 

.modal-close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: #000000;
    line-height: 1;
}
.modal-close-button:hover {
    color: #000;
}

.modal-content h3 {
    margin: 0;
    text-align: center;
}

.modal-content p {
    text-align: center;
    width: 100%;
    margin: 0;
    font-size: 0.9em;
    color: #000000 !important ;
}

#json-import-area {
    width: 95%;
    height: 200px;
    font-family: monospace;
    font-size: 0.9em;
    padding: 10px;
  
    border-radius: 5px;
    resize: vertical;
    box-sizing: border-box;     border: 1px solid #ffffff;

}

.modal-button {
    background-color: #d8d8d8;
    color: rgb(0, 0, 0);
    border: none;
    padding: 12px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: medium;
}
.modal-button:hover {
    opacity: 0.9;
}

.dark-theme .modal-content {
    background-color: #2c2c2c;
    color: #000000;
    border: 1px solid #ffffff;
}
.dark-theme .modal-close-button {
    color: #aaa;
}
.dark-theme .modal-close-button:hover {
    color: #fff;
}
.dark-theme .modal-content p {
    color: #bbb;
}
.dark-theme #json-import-area {
    background-color: #333;
    color: #000000;
    border: 1px solid #ffffff;
}
.dark-theme .modal-button {
    background-color: #00529B;
}

#lugares {color: black;
    display: none; 
    z-index: 88888888;
}
#lugares p {color: rgb(255, 255, 255);
    text-align: center;
    width: 100%;
    margin: 0;
}
#lugares a {
    display: inline-block;
    text-align: center;
}
#lugares input[type="text"] {
    width: 80%;
    text-align: center;
}

#escena-texto { flex: 1; padding: 10px; width: 98%; height: 7%; }
#escena-texto {width: 96%;     resize: none;height: 55%;   font-size: xx-large;}
#sumarpersonaje { position: fixed;
  display: flex;
 left: 50%;
transform: translateX(-50%);
bottom:1%;
width: fit-content;
height: auto;
margin: 0%; z-index:   1000 ;}

#sumarpersonaje-ia {
  display: flex;
 
transform: translateY(-2dvh);
top:15dvh;
width: 10dvw;
height: auto;
margin: 0%; z-index:   1000 ;}

.escena {    
border: 0px solid #8a8a8a; margin: 5px 0; margin-bottom: 1%;
margin-right: 0%;  margin-left: 0%;   box-shadow: 0 2px 5px rgba(0,0,0,0.1);  
border-radius: 0%;    background-color: transparent; 
padding-left: 1%; 
cursor: default;
padding: 0px;
margin: 15px 5px;
overflow-y: hidden !important;    
height: auto;
overflow: hidden !important; /* Importante para que el borde redondeado funcione bien */
}

#drop-zone { position: absolute;
border: 2px dashed #ccc; padding: 20px; 
display: flex; bottom: 3%;
top: 58%;
text-align: center; margin-top: 10px;
left: 2%;
right: 50%;}
#imagen-preview {
  transform: translateX(25%);
max-width: 65%;
    height:95%; margin-top: 10px; display: none; }
.botoness {  margin-top: 1%;  height: auto;  margin: 1%; }
.boton {box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
    border-radius: 6%; border: 1px solid #eee; 
     cursor: pointer; background-color: rgb(255, 255, 255);
    justify-content: center;
    align-items: center;
    text-align: center;}
#botonesss {position: absolute;
display: flex;
left: 52%;
right: 5%;
height: auto;
top: 55%;}

#capitulos, #escenass {position: absolute;
 bottom: 0%;
width: 100%; left:0%;
 background-color: #ff606000;
  height: 93%;
 overflow-y:scroll; padding-left: 0%; padding-right: 0%;}
#file-input {
position: absolute;
left: 2%;
top: 5%;
z-index: 100;
font-size: large;}
#menu {position: absolute;
top: 15%;
margin: 0%;
left:50%;
transform: translateX(-50%);
flex-direction: row;
line-height: 1.5;}
.lista {   position: absolute;
    display: flex;
    top: 65%;
    left:55%;
    width: 90%;
    height: 30%;
    margin: 2%;}
.imput {width: 99%;
    height: 99%; padding-left: 2%;
    border: 0px solid #b3b3b3;
    border-radius: 5px; color: rgb(0, 0, 0);
    outline: none; background-color: rgba(0, 0, 0, 0);
    font-size: x-large; margin: 0%;
  margin-bottom: 1%;}
  
/* ========= INICIO: NUEVOS ESTILOS ========= */
.input-no-editable {
    background-color: #55555500 !important;
    color: #a0a0a0 !important;
    cursor: not-allowed;
    border: 0px solid transparent !important;
}

.generar-tomas-btn {
    width: 100%;
    margin-top: 5px;
    margin-bottom: 10px;
    background-color: #28a745; /* Verde para la acción de generar */
}

.dark-theme .generar-tomas-btn {
    background-color: #218838;
}
/* ========= FIN: NUEVOS ESTILOS ========= */

.ide {
    top: 1%; 
    position: relative;
    padding: 1%; margin-left: 2%;
    width: auto;
    margin: 0;
    margin-right: 4%;}
.ideframe { padding: 1%;font-size: large;
    top: 1%; left: 110%;
    position: absolute;
    width: auto; 
    margin: 0%;
    margin-right: 1%;width: 8dvw; }

.ideframeh { padding: 1%; position: absolute;font-size: large;
    width: auto;z-index: 10000 !important;
     margin: 2%; right:10%; bottom: 0%;background-color: transparent;
    }
.ideframeh2 { padding: 1%; position: absolute;font-size: large;
    width: auto;z-index: 10000 !important;
    margin: 2%; right: 5%; bottom: 0%;background-color: transparent;
    }
.ideframeh3 { padding: 1%; position: absolute;font-size: large;
    width: auto;z-index: 10000 !important;
    margin: 2%; right: 15%; bottom: 0%; background-color: transparent;
    }
.custom-label { padding: 1%; position: absolute;font-size: large;
    width: auto;z-index: 10000 !important;
    margin: 2%; right: 8%; bottom: 30%; background-color: transparent;
}
.frameh textarea {
    width: 55%; position: absolute;
 
   top: 5%; bottom: 1%;    left: 23%;
  
    border-radius: 5px; 
    border: 0px solid #ccc;
    resize: none;     
     font-family: Arial, sans-serif;
    font-size: 1em;
    line-height: 1.5;}
    .frameh input[type="file"] {
   opacity: 0;
}

.custom-label:hover {
    color: #000; 
}
.frameh img {max-width: 15%; position: absolute;
    max-height: 90%;
    left:6%;
    top: 5%;
  padding: 0%;
    border-radius: 5px; margin-top: 0% !important;
    display: flex; 
    
}
.frameh { 
    height:350px;
 
 width: 100%;
    position: relative;
    display: flex;
 left: 0%; 
 padding-left: 10%;
 background-color: transparent;  
        
    text-align: center;      flex-shrink: 0;}

    .framehtxt {padding-left: 5%;   gap: 5%;}

.contenedor-frames {
    display: flex;           
        gap: 5%;
    overflow-x: scroll !important ;      
    overflow-y: hidden !important;      
    position: relative;      
    top: 3%;
    bottom: 9%;
    left: 0%;
    width:100%;
    height: max-content;
    flex-wrap: nowrap !important;        
    background-color: transparent; 
    padding: 0; white-space: nowrap !important;         
 

    
 
    flex-direction: column; /* Apila los frames verticalmente */
   /* Espacio entre frames */
    
    /* Anulación de estilos antiguos que causaban problemas */
    overflow: visible; 
 

}




#enviar {
    top: -2%;
    position: relative;}
 .detalle {
position: relative;
top: 0%;
height: 10%;
left: 15%;
width: 60%;
background-color: transparent;
justify-content: center;
align-items: center;
text-align: center;}
 #apiInput {margin: 2%;height: 10%;}
 #file-load {display: none;}
 #game {display: none;}
#creasion {position: absolute;
top: 1%;left: 2%;}
#chateo {position: absolute;
    top: 10%;left: 2%;}
#geminimente {
    flex-direction: column;
    overflow: auto; padding: 3%; width: 70%; top: 10%; bottom: 0%; right: 0%; position: absolute; display: flex; white-space: pre-wrap;}

 #gemini1 { 
    position: absolute;
    top: 25%; 
    left: 0%; 
    width: 24%; 
    height: 30%; 
    resize: none;
    margin-left: 1%;
    margin-bottom: 1%; 
}

#gemini-raw-output {
    position: absolute;
    top: 50%; 
    left: 0%;
    width: 20%; 
    bottom: 0%; 
    background-color: #f8f9fa; 
    border: 1px solid #dee2e6; 
    border-radius: 4px;
    padding: 10px;
    overflow-y: auto; 
    font-family: monospace; 
    white-space: pre-wrap; 
    font-size: 0.9em;
    color: #212529; 
}


#guion-layout {
    display: flex;
    gap: 1%; 
    height: 99%; 

}

#indice-capitulos-guion {
    width: 20%; 
    overflow-y: auto;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;

}

#contenido-capitulo-activo {
    
    width:100%; 
    height: 100%;
    display: flex; 
    position: relative;
    flex-direction: column;
    
}

.titulo-capitulo-indice-container {
    height: 100%;
    top: 0%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  
    border-bottom: 1px solid #eee;
    background-color: #fff;
    margin-bottom: 0px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    position: absolute;
}
.titulo-capitulo-indice-container:hover {
    background-color: #e9efff;
}
.titulo-capitulo-indice-container.activo-container {
    background-color: #cce0ff; 
}

.titulo-capitulo-indice-texto {
    flex-grow: 1;
    cursor: pointer;
    text-align: center; /* Añadido para centrar el texto */
}
.titulo-capitulo-indice-texto.activo-texto {
    font-weight: bold;
}

.eliminar-capitulo-btn-indice {
    background-color: transparent;
    color: #000000;
    border: none;
    border-radius: 50%;
    padding: 4px 8px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    margin-left: 8px;
    line-height: 1;
}
.eliminar-capitulo-btn-indice:hover {
    background-color: #ffdddd;
    color: #000000;
}

.capitulo-guion {
    background-color: #ffffff;
    border: 1px solid #d1d1d1;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.capitulo-guion input[type="text"] {
    width: calc(100% - 16px); 
    margin-bottom: 10px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
    align-items: center;
    justify-content: center;
}

#contenido-capitulo-activo input[type="text"] {
    width: 80%; 
    left: 10%; position: relative;
    height: 7%;
    margin-bottom: 0px; /* Ajustado */
   
    border: 0px solid #ccc;
    border-radius: 3px;
    font-size: 1.4em;
    justify-items: center; 
    font-weight: bold;
}

.capitulo-guion textarea {
    width: calc(100% - 16px); 
    height: 200px; 
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    resize: vertical;
    font-family: Arial, sans-serif;
    font-size: 1em;
    line-height: 1.5;
}

#contenido-capitulo-activo textarea {
    width: calc(100% - 16px); 
    flex-grow: 1; 
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    resize: vertical;
    font-family: Arial, sans-serif;
    font-size: 1em;
    line-height: 1.5;
}

.capitulo-guion button { 
    background-color: #d9534f;
    color: white;
    padding: 8px 15px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
}
.capitulo-guion button:hover, #contenido-capitulo-activo button:hover {
    background-color: #c9302c;
} 
#contenido-capitulo-activo .mensaje-placeholder {
    text-align: center;
    color: #777;
    margin-top: 50px;
    font-style: italic;
}
.capitulo-guion button:hover {
    background-color: #c9302c;
}

#sumar-capitulo-guion {
    position: fixed;
    display: flex;
    left: 50%;
    transform: translateX(-50%);
    bottom: 1%;
    width: 10dvw; 
    height: auto;
    margin: 0%;
    z-index: 1000; 
    justify-content: center; 
    align-items: center;    
}

#geminimente {
    white-space: normal; 
    text-align: left;    
    border: 1px solid #ccc; 
    background-color: #f9f9f9; 
    padding: 15px; 
    height: calc(100% - 18% - 20px); 
    overflow-y: auto; 
}

#geminimente h3 { 
    text-align: center;
    margin-top: 0; 
    margin-bottom: 20px;
    color: #333;
    font-size: 1.5em; 
}

.gemini-escena {
    border: 1px solid #ddd;
    background-color: #fff;
    padding: 15px;
    margin-bottom: 20px; 
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.gemini-escena h4 { 
    margin-top: 0;
    margin-bottom: 15px; 
    color: #444; 
    border-bottom: 1px solid #eee;
    padding-bottom: 10px; 
    font-size: 1.2em;
}

.gemini-frame {
    padding: 10px;
    margin-bottom: 10px;
    border-left: 4px solid #007bff; 
    background-color: #fdfdfd; 
    border-radius: 3px;
}

.gemini-frame p {
    margin-top: 0; 
    margin-bottom: 8px; 
    line-height: 1.6;
    color: #333;
}
.gemini-frame p:last-child {
    margin-bottom: 0; 
}

.gemini-frame p strong { 
    color: #0056b3; 
    display: block; 
    margin-bottom: 5px;
}

.dark-theme #geminimente {
    border-color: #444;
    background-color: #22272e; 
    color: #c9d1d9;
}

.dark-theme #geminimente h3 {
    color: #adbac7; 
}

.dark-theme .gemini-escena {
    border-color: #484f58; 
    background-color: #2d333b; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.dark-theme .gemini-escena h4 {
    color: #909dab; 
    border-bottom-color: #484f58;
}

.dark-theme .gemini-frame {
    border-left-color: #58a6ff; 
    background-color: #323842; 
}
.dark-theme .gemini-frame p {
    color: #b1bac4; 
}
.dark-theme .gemini-frame p strong {
    color: #58a6ff; 
}

#ia #gemini1 { 
    margin-bottom: 10px; 
}
#ia #creasion, #ia #chateo {
    margin-bottom: 10px; 
}

.escena-toolbar {
    position: absolute;
    height: 8%;
    width: 87%;
 
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap; 
    flex-shrink: 0;
    left: 8%;
}
.escena-toolbar select {
width: 15%;


}
.escena-toolbar button,
.escena-toolbar select,
.escena-toolbar input {
    padding: 8px 12px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 1em;
}

.escena-toolbar input {
    flex-grow: 1; 
}

#tomas-timeline {
    position: absolute;
    top: 9%;
    height: 91%;
    left: 0%;
    width: 100%;
    border: 0px solid #ccc;
    border-radius: 5px;
    flex-grow: 1; 
    display: flex;
    align-items: stretch; 
    overflow-x: auto; 
    overflow-y: hidden;
    margin-top:0%;
    padding: 0px;
    gap: 5px; 
    background-color: transparent;
}

.mensaje-placeholder {
    text-align: center;
    color: #777;
    margin: auto;
    font-style: italic;
}

.dark-theme .escena-toolbar button,
.dark-theme .escena-toolbar select,
.dark-theme .escena-toolbar input {
    background-color: #333;
    color: #e0e0e0;
    border: 1px solid #555;
}
.dark-theme #tomas-timeline {
    border-color: #444;
    background-color: #22272e;
}

.toma-card {
    
    min-width: 550px;
    height: 100%; 
    display: flex;
    flex-direction: column;
 font-size: large;
    margin-left: 0.7%;
    padding: 8px;
    background-color: #fff;
    border: 0px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.1);
    box-sizing: border-box; 
    transition: opacity 0.2s ease, transform 0.2s ease; 
    cursor: grab;
}
.toma-card:active {
    cursor: grabbing;
}


.dark-theme .toma-card {
    background-color: #2c2c2c;
    border-color: #444;
}

.toma-controles {
    flex-shrink: 0; 
    display: flex;
    justify-content: flex-end; 
    gap: 5px;
}

.toma-imagen-area {
    height: auto; 
    flex-shrink: 0; 

    aspect-ratio: 16 / 9;
    position: relative;
    background-color: #f0f0f0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.dark-theme .toma-imagen-area {
    background-color: #3a3a3a;
}


.toma-imagen-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.toma-textos-area {
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    gap: 5px;
    height: 40%; 
    font-size: large;
}
.toma-textos-area > textarea,
.toma-textos-area > .toma-prompt-container {
    flex-grow: 1; 
    min-height: 0; 
}
 
.toma-textos-area textarea {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    resize: none;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
}
.dark-theme .toma-textos-area textarea {
    background-color: #333;
    color: #e0e0e0;
    border: 1px solid #555;
}


.toma-prompt-container {
    position: relative; 
    display: flex;    flex-grow: 1; 
    height: 60%; 
}

.toma-prompt-container > textarea {
    padding-right: 35px; 
}


.toma-copy-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 4px 8px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}
.toma-video-btn {
    position: absolute;
    top:25px;
    right: 5px;
    padding: 4px 8px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    margin-top: 5%;
}.toma-video-btn2 {
    position: absolute;
    top:55px;
    right: 5px;
    padding: 4px 8px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    margin-top: 5%;
}
.toma-card.toma-dragging {
    opacity: 0.4;
    transform: scale(0.98);
}

.toma-drop-indicator {
    width: 5px;
    min-height: 100%;
    background-color: #007bff; 
    border-radius: 2.5px;
    flex-shrink: 0;
    margin: 0 2px; 
}

#modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.103);
      z-index: 888888; 
  backdrop-filter: blur(5px); /* Adjust the blur value as needed */
    -webkit-backdrop-filter: blur(5px); /* For Safari support */
}


.modal-close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: white;
}

 

#json-import-area {
    width: 100%;
    min-height: 200px;
    margin-top: 15px;
    margin-bottom: 15px;
    border-radius: 8px;
    border: 1px solid white;
    padding: 10px;
    font-family: monospace;
    font-size: 0.9em;
    background-color: var(--background-color-light);
    color: white;
    resize: vertical;
    box-sizing: border-box; 
}

#import-data-button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem; 
    padding: 5px;
    line-height: 1;
    color: var(--text-color);
}

.contenido-guion-editor {
    width:85%; height: auto;
    flex-grow: 1;
   left: 0%; top: 0%;
  bottom: 0%;
    border-radius: 3px;
    overflow-y: auto;
    font-family: Arial, sans-serif;
    font-size: 1em;
    line-height: 1.5;
margin: 5%;
    background: transparent;
 position: absolute;
    text-align: left; 
   padding: 10%;
   padding-top:0%;

}    

 

.guion-ia-general, .guion-ia-escena {
    padding: 15px; 
    margin: 15px 0;
    border-radius: 5px;
      box-shadow: 0 15px 45px rgba(0, 0, 0, 0.1);
}

.guion-ia-general {
    background-color: #ffffff;
    border: 1px solid #ffffff;
}

.guion-ia-escena {
    background-color: #ffffff;
    border: 1px solid #e8e8e8;
}

.dark-theme .guion-ia-general {
    background-color: #2d333b;
    border-color: #00529B;
}

.dark-theme .guion-ia-escena {
    background-color: #22272e;
    border-color: #484f58;
}

.contenido-guion-editor h1, .contenido-guion-editor h2, .contenido-guion-editor h3, .contenido-guion-editor h4 {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.contenido-guion-editor ul {
    list-style-type: disc;
    padding-left: 40px;
}
.contenido-guion-editor li {
    margin-bottom: 5px;
}




#ia-datos-area {
    width: 95%;
    height: 250px;
    font-family: monospace;
    font-size: 0.9em;
    padding: 10px;
    border-radius: 5px;
    resize: vertical;
    box-sizing: border-box;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    color: #333;
}

.dark-theme #ia-datos-area {
    background-color: #333;
    color: #e0e0e0;
    border: 1px solid #555;
}
/* ... (al final del archivo, junto a otros estilos de botones) ... */

/* Botón para generar los frames desde la sección Guion */
.generar-frames-btn {
    width: 100%;
    margin-top: 5px;
    margin-bottom: 10px;
    background-color: #ffc107; /* Amarillo para llamar la atención sobre una acción pendiente */
    color: #212529; /* Texto oscuro para contraste */
}

.dark-theme .generar-frames-btn {
    background-color: #d39e00;
}


/* Estilo existente del botón de generar tomas (lo ajustamos ligeramente para consistencia) */
.generar-tomas-btn {
    width: 100%;
    margin-top: 5px;
    margin-bottom: 10px;
    background-color: #28a745; /* Verde para la acción de generar */
}

.dark-theme .generar-tomas-btn {
    background-color: #218838;
}


/* ... (al final del archivo) ... */

.visual-universe-summary {
    background-color: #f0f8ff;
    border: 1px solid #cce0ff;
    border-left: 5px solid #007bff;
    padding: 10px 15px;
    margin: 10px 0;
    border-radius: 5px;
    font-size: 0.9em;
    text-align: left;
    white-space: normal;
}

.visual-universe-summary h3, .visual-universe-summary h4 {
    margin-top: 0;
    margin-bottom: 8px;
    color: #333;
}

.visual-universe-summary hr {
    border: none;
    border-top: 1px solid #cce0ff;
    margin: 15px 0;
}

.dark-theme .visual-universe-summary {
    background-color: #2d333b;
    border-color: #00529B;
    border-left-color: #58a6ff;
    color: #c9d1d9;
}

.dark-theme .visual-universe-summary h3, .dark-theme .visual-universe-summary h4 {
    color: #adbac7;
}

.dark-theme .visual-universe-summary hr {
    border-top-color: #484f58;
}


.herramientas {
position: fixed;
left: 1%;
top: 50%;
transform: translateY(-50%);


}


/* ===================================== */
/* ESTILOS PARA EL BOTÓN DE ACCIÓN CONTEXTUAL */
/* ===================================== */

#contextual-action-btn {
    position: absolute;
    bottom: 25px;
    right: 25px;
    width: 55px;
    height: 55px;
       background-color: #444; /* Un color primario, puedes cambiarlo */
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 28px;
    font-weight: bold;
    line-height: 55px; /* Para centrar verticalmente el '+' */
    text-align: center;
    cursor: pointer;
    z-index: 9998; /* Justo debajo de los modales */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
    display: flex; /* Usamos flex para centrar perfectamente */
    justify-content: center;
    align-items: center;
}
 
#contextual-action-btn:hover {
    transform: scale(1.1);
      background-color: #555;
}

.dark-theme #contextual-action-btn {
    background-color: #58a6ff; /* Un azul más brillante para el tema oscuro */
    color: #1e1e1e;
}

.dark-theme #contextual-action-btn:hover {
    background-color: #7bc4ff;
}


/* ===================================== */
/* ESTILOS PARA EL MODAL DE HERRAMIENTAS IA */
/* ===================================== */

#modal-ia-herramientas {
    display: none; /* Hidden by default */
    flex-direction: column;
    gap: 20px;
    width: 90%;
    max-width: 650px; /* Limits width on large screens */
    max-height: 90vh; /* Prevents modal from being too tall */
    overflow-y: auto; /* Allows scrolling on small screens */
    text-align: left;
}

#modal-ia-herramientas h3 {
    text-align: center;
    margin-top: 0;
    color: var(--text-color, #333);
}

.ia-modal-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    background-color: rgba(0,0,0,0.05);
    border-radius: 8px;
}

.dark-theme .ia-modal-section {
    background-color: rgba(255,255,255,0.05);
}

.ia-modal-section h4 {
    margin: 0 0 5px 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-bottom: 8px;
    color: var(--text-color, #333);
}

.dark-theme .ia-modal-section h4 {
    border-bottom-color: rgba(255,255,255,0.1);
}

#modal-ia-herramientas label {
    font-weight: bold;
    font-size: 0.9em;
    color: var(--text-color-light, #555);
}

.dark-theme #modal-ia-herramientas label {
    color: var(--text-color-dark-light, #bbb);
}

#modal-ia-herramientas textarea,
#modal-ia-herramientas input[type="number"] {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #333;
    box-sizing: border-box;
    font-size: 1em;
}

#modal-ia-herramientas textarea {
    min-height: 120px;
    resize: vertical;
}

.dark-theme #modal-ia-herramientas textarea,
.dark-theme #modal-ia-herramientas input[type="number"] {
    background-color: #333;
    color: #e0e0e0;
    border-color: #555;
}

.ia-modal-controls {
    display: flex;
    gap: 20px;
    flex-wrap: wrap; /* Allows stacking on small screens */
}

.ia-modal-control-group {
    flex: 1;
    min-width: 150px; /* Prevents controls from becoming too narrow */
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ia-modal-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.ia-modal-actions {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.ia-modal-actions .modal-button.principal-action {
    background-color: #28a745;
    font-size: 1.1em;
    padding: 12px 25px;
    width: 100%;
}
.dark-theme .ia-modal-actions .modal-button.principal-action {
    background-color: #218838;
}


.escena1 {position: fixed; bottom: 1%; left:46%; transform: translateX(-50%); }
.escena2 {position: fixed; bottom: 1%; left: 50%; transform: translateX(-50%); z-index: 1000; }

.escena1:hover,
.escena2:hover {
    transform: translateX(-50%) scale(1.02); /* Combina el centrado con el escalado */
    /* El resto de las propiedades de hover (como background-color) se heredarán de button:hover o reglas específicas del tema */
}


/* --- ESTILOS ANTERIORES ELIMINADOS --- */
/* Se eliminaron las reglas para #selector-guion-btn y #lista-guiones-popup */

/* --- NUEVOS ESTILOS PARA LA SELECCIÓN DE GUION LOCAL --- */

/* El botón ahora está en la barra de herramientas */
#guion-toolbar {
     position: fixed;
    top: 3%;
    left: 1%;
    width: 60px;
    height: 60px;

    color: rgba(255, 255, 255, 0);
    border-radius: 50%;
   background-color: transparent !important;
    z-index: 9999;

}

#guion-toolbar #selector-guion-btn-local {
    margin-right: auto; /* Empuja los otros botones a la derecha */
}
 



/* ================================================= */
/* INICIO: ESTILOS CORREGIDOS PARA ESCENAS EXPANDIBLES */
/* ================================================= */

/* Contenedor principal del capítulo (escena) */

.dark-theme .escena {
    border-color: #444;
    background-color: #2c2c2c;
}

/* Cabecera que contiene el título y los controles */
.escena-header {
    display: flex;
    align-items: center;
    gap: 10px; /* Espacio entre elementos de la cabecera */
    padding: 8px 10px;
    background-color: #f0f0f0;
    border-bottom: 1px solid #ddd;
}
.dark-theme .escena-header {
    background-color: #3a3a3a;
    border-bottom-color: #555;
}

/* El input del título ocupa el espacio sobrante */
.escena-header .imput {
    flex-grow: 1; /* Hace que el input ocupe el espacio disponible */
}

/* Botón para expandir/contraer (la flecha) */
.toggle-frames-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5em; /* Tamaño de la flecha */
    padding: 0 10px;
    line-height: 1; /* Alineación vertical */
    transition: transform 0.3s ease;
    flex-shrink: 0; /* Evita que el botón se encoja */
    color: #555;
}
.dark-theme .toggle-frames-btn {
    color: #bbb;
}

/* Contenedor para los botones de la derecha (X, +Frame) */
.escena-action-buttons {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}
.escena-action-buttons button {
    padding: 4px 10px; /* Hacemos los botones un poco más pequeños */
    font-size: 0.9em;
}

/* Contenedor de los frames (el que se oculta) */

.dark-theme .contenedor-frames {
    background-color: #22272e;
}

/* Oculta el contenedor de frames cuando la escena tiene la clase .contraido */
.escena.contraido > .contenedor-frames {
    display: none;
}

/* Gira el icono de la flecha cuando la escena tiene la clase .contraido */
.escena.contraido .toggle-frames-btn {
    transform: rotate(-90deg);
}

/* =============================================== */
/* FIN: ESTILOS CORREGIDOS PARA ESCENAS EXPANDIBLES */
/* =============================================== */
.input-etiqueta-personalizada {
    padding: 8px;
    border: 1px solid #007bff;
    border-radius: 4px;
    background-color: #333;
    color: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}


/* Estilos para el contenedor del asistente y el informe */

#asistente-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 400px;
    height: 600px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    z-index: 1000;
}

/*
 * Contenedor principal del informe.
 * Usamos Flexbox para distribuir el espacio entre los elementos hijos (como un título y el contenido).
 * 'overflow: hidden' se mantiene para que los bordes redondeados funcionen correctamente,
 * pero el scroll se gestionará en el elemento hijo '#informe-content'.
 */


/*
 * Contenedor del contenido del informe.
 * Aquí es donde aplicamos la magia de Flexbox para el scroll.
 */

#informe-container { overflow: scroll !important; height: 3000px;}
 

/* Otros estilos que puedas tener para el chat, etc. */
#chat-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#chat-input {
    display: flex;
    border-top: 1px solid #ccc;
    padding: 10px;
}

#chat-input input {
    flex-grow: 1;
    border: 0px solid #ccc;
    border-radius: 5px;
    padding: 8px;
}

#chat-input button {
    margin-left: 10px;
    padding: 8px 12px;
    border: none;
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

#chat-input button:hover {
    background-color: #0056b3;
}


#character-cloud-canvas {
width: 80dvw !important;
height: 75dvh;
margin-right: 0dvw;
margin-left: 0dvw;
top: 0%;
position: relative;
display: flex;

}


/* ===================================== */
/* ESTILOS PARA LA VISTA GENERAL (INFORME) */
/* ===================================== */
 

/* Estilos para las tarjetas del informe */
.platzhalter-card {
    border: 1px solid #ddd;
    padding: 1.5em;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}

.dark-theme .platzhalter-card {
    background-color: #2c2c2c;
    border-color: #444;
}

/* Regla para que una tarjeta ocupe todo el ancho del grid si es necesario */
.full-width-card {
    grid-column: 1 / -1;
}

/* Contenedor para los gráficos para asegurar que no se desborden */
.chart-container {
    position: relative;
    height: 300px;
    width: 100%;
    margin-top: 1em;
}
.area-texto { resize: none; width: 30dvw; }
 
.control-panel2d { display: flex; flex-direction: row; gap: 10px; max-width: 600px; margin: 0 auto 30px auto; }
   .control-panel2d {
position: fixed;
width: 70%;
top: 10%;
left: 10%;

        }


.control-panel3d { display: flex; flex-direction: row; gap: 10px; max-width: 600px; margin: 0 auto 30px auto; }
   .control-panel3d {
position: fixed;
width: 70%;
top: 10%;
left: 10%;

        }

#pre-production-container { max-width: 600px; margin: 0 auto; background-color: #222; padding: 20px; border-radius: 8px; }
#asset-list .asset-item { display: flex; justify-content: space-between; align-items: center; padding: 15px; border-bottom: 1px solid #444; }
#asset-list .asset-item:last-child { border-bottom: none; }
#asset-list .asset-status { font-weight: bold; }
#asset-list .status-found { color: #81C784; } /* Verde */
#asset-list .status-missing { color: #E57373; } /* Rojo */
#asset-list .generate-btn { background-color: #FFC107; color: black; padding: 8px 12px; font-size: 14px; }

/* En datos/styles.css */

/* ELIMINA o COMENTA estas reglas que añadimos antes, ya que no son el estilo deseado */
/*
.crear-libro-btn {
    background-color: #28a745 !important;
    color: white !important;
    font-weight: bold;
    text-align: center !important;
    position: absolute;
    top: 10%;
}
.dark-theme .crear-libro-btn { ... }
.popup-separador { ... }
.dark-theme .popup-separador { ... }
*/


/* AÑADE estos estilos para asegurar que el popup y su contenido se vean como en la sección de Guion */

/* Estilo para cada elemento en la lista del popup */
 

 
 
.guion-popup-item-local {
    display: flex;
    width: 100%;
    padding: 10px 12px;
    background-color: transparent;
    border: none;
    color: #333;
    text-align: left;
    cursor: pointer;
    border-radius: 5px;
    font-size: 1em;
}

.guion-popup-item-local:hover {
    background-color: #f0f0f0;
}

.dark-theme .guion-popup-item-local {
    color: #e0e0e0;
}

.dark-theme .guion-popup-item-local:hover {
    background-color: #444;
}


/* --- ESTILOS PARA LA EDICIÓN DE NOMBRES DE LIBROS (AÑADIR AL FINAL) --- */

/* Contenedor de cada libro en la lista */
.libro-item-container {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Título del libro (ocupa el espacio disponible) */
.libro-popup-titulo {
    flex-grow: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding-right: 10px; /* Espacio antes del botón de editar */
}

/* Botón de editar (pequeño y discreto) */
.libro-popup-editar-btn {
    background: transparent !important;
    border: none !important;
    color: #888 !important;
    padding: 2px 6px !important;
    margin: 0 !important;
    font-size: 1em !important;
    cursor: pointer !important;
    flex-shrink: 0; /* Evita que el botón se encoja */
    border-radius: 4px;
}

.dark-theme .libro-popup-editar-btn {
    color: #aaa !important;
}

.libro-popup-editar-btn:hover {
    background-color: rgba(0,0,0,0.1) !important;
    color: #000 !important;
    transform: none !important; /* Anulamos el efecto de escala de otros botones */
}

.dark-theme .libro-popup-editar-btn:hover {
    background-color: rgba(255,255,255,0.15) !important;
    color: #fff !important;
}

/* Estilo del campo de texto cuando se está editando */
.libro-nombre-input-edicion {
    flex-grow: 1;
    padding: 6px;
    border: 1px solid #007bff;
    border-radius: 4px;
    background-color: #fff;
    color: #000;
    font-size: 1em;
    outline: none;
    box-shadow: 0 0 5px rgba(0,123,255,0.5);
}

.dark-theme .libro-nombre-input-edicion {
    background-color: #3a3a3a;
    color: #e0e0e0;
    border-color: #58a6ff;
}

#libro-activo-titulo {

    position: fixed;
    top: 2%;
    height: 5%;
    background-color: transparent;
    color: #000;
    left: 10%;
    width: 80%;
    text-align: center;
    font-weight: bold;
    font-size: 1.5em;
    border: none;

}

/* En styles.css, al final del archivo */

/* Contenedor para la lista de libros dentro del modal */
.lista-libros-popup-estilo {
    width: 100%;
    max-height: 40vh; /* Altura máxima para evitar que sea muy grande */
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 8px;
    margin-top: 15px;
    background-color: rgba(0,0,0,0.02);
}

.dark-theme .lista-libros-popup-estilo {
    border-color: #444;
    background-color: rgba(255,255,255,0.05);
}

/* Estilo para cada libro en la lista del modal */
.libro-item-seleccion {
    display: block;
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 5px;
    background-color: #fff;
    border: 1px solid #ccc;
    color: #333;
    text-align: left;
    cursor: pointer;
    border-radius: 5px;
    font-size: 1em;
    font-weight: bold;
    transition: background-color 0.2s, border-color 0.2s;
}

.libro-item-seleccion:hover {
    background-color: #e9efff;
    border-color: #007bff;
}

.dark-theme .libro-item-seleccion {
    background-color: #3a3a3a;
    border-color: #555;
    color: #e0e0e0;
}

.dark-theme .libro-item-seleccion:hover {
    background-color: #4a525c;
    border-color: #58a6ff;
}

/* En styles.css, al final del archivo */

/* Estilos para las secciones dentro del modal */
.modal-seccion {
    width: 100%;
    margin-bottom: 20px;
    text-align: left;
}
.modal-seccion label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #555;
}
.dark-theme .modal-seccion label {
    color: #bbb;
}

/* Estilo para el dropdown (select) del modal */
.modal-select {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: #fff;
    font-size: 1em;
}
.dark-theme .modal-select {
    background-color: #333;
    color: #e0e0e0;
    border-color: #555;
}

/* Estilo para resaltar el libro seleccionado */
.libro-item-seleccion.selected {
    background-color: #cce0ff !important;
    border-color: #007bff !important;
    color: #000 !important;
    box-shadow: 0 0 8px rgba(0,123,255,0.5);
}
.dark-theme .libro-item-seleccion.selected {
    background-color: #00529B !important;
    border-color: #58a6ff !important;
    color: #fff !important;
}

/* Estilo para el botón de acción principal del modal */
.modal-button.principal-action {
    width: 100%;
    padding: 12px 20px;
    font-size: 1.1em;
    background-color: #28a745;
    color: white;
}
.dark-theme .modal-button.principal-action {
    background-color: #218838;
}


/* estilos.css */




/* --- Cabecera --- */
.cabecera {
    text-align: center;
    border-bottom: 1px solid #374151; /* border-gray-700 */
    padding-bottom: 1rem;
}

.titulo-principal {
    font-size: 1.875rem; /* text-3xl */
    line-height: 2.25rem;
    font-weight: 700; /* font-bold */
    color: #60a5fa; /* text-blue-400 */
}

.subtitulo {
    color: #9ca3af; /* text-gray-400 */
    margin-top: 0.5rem;
}

/* --- Contenido Principal y Columnas --- */
.contenido-principal {
    display: flex;
  
    gap: 2rem; 
     align-items: end;
     margin-bottom: 4%;

}
 
.columnas {
    display: flex;
    position: fixed;
  height: 47%;
     bottom: 0;
    width: 100%;  
    left: 0;
    flex-direction: column;
     
    gap: 1.5rem; /* space-y-6 */
}

/* --- Secciones y Formularios --- */
.seccion {
    background-color: transparent; /* bg-gray-700 */
    padding-left:1%;  padding-right:1%;
    border-radius: 0.5rem;  
    position: relative;
 margin: 0;
     height: 27dvh;

    width: 100%;
     
}
.seccion2 {
    background-color: transparent; /* bg-gray-700 */
    padding-left:1%;  padding-right:1%;
    border-radius: 0.5rem;  
    position: relative;
 margin: 0;
     height: 23dvh;

    width: 100%;
     
}
.titulo-seccion {
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    margin-bottom: 0.75rem;
}

.area-texto {
    width: 90%;
    height: 10%; 
    background-color: transparent; /* bg-gray-800 */
    border: 1px solid #4b5563; /* border-gray-600 */
    border-radius: 0.375rem; /* rounded-md */
    padding: 0.75rem;
}

.area-texto:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #3b82f6; /* focus:ring-2 focus:ring-blue-500 */
}

/* --- Botones --- */
.boton {
    
   
    color: white;
    font-weight: 700;
 
    border-radius: 0.5rem; /* rounded-lg */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
}

.boton-analizar {
    background-color: #2563eb; /* bg-blue-600 */
}

.boton-analizar:hover {
    background-color: #1d4ed8; /* hover:bg-blue-700 */
}

.boton-renderizar {
    background-color: #16a34a; /* bg-green-600 */
}

.boton-renderizar:hover {
    background-color: #15803d; /* hover:bg-green-700 */
}

.boton:disabled {
    background-color: #6b7280; /* disabled:bg-gray-500 */
    cursor: not-allowed;
}

.boton-icono {
    width: 1.25rem; /* w-5 */
    height: 1.25rem; /* h-5 */
    margin-right: 0.5rem;
}

/* --- Elementos y Canvas --- */
.lista-elementos {
position: relative;
    overflow-y: auto;
    background-color: transparent;
    color: #000;
 padding-right: 2%;
    display: flex;
    flex-direction: column;
 right: 0; bottom: 0%;
  height: 45%;
  width: 95%;
  justify-items: center;
 align-items: center;
    justify-content: center;
   
}

.contenedor-canvas {
    background-color: #111827; /* bg-gray-900 */
    border: 2px dashed #4b5563; /* border-2 border-dashed border-gray-600 */
    border-radius: 0.5rem; /* rounded-lg */
    aspect-ratio: 16 / 9 !important;
    display: flex;
    position: fixed;
    top: 2%;
    left: 50%;
    transform: translateX(-50%);

     
   
    height: 39%;
}

.placeholder-canvas {
    text-align: center;
    color: #6b7280; /* text-gray-500 */
}

.placeholder-canvas-icono {
    margin-left: auto;
    margin-right: auto;
    height: 3rem; /* h-12 */
    width: 3rem; /* w-12 */
}

.placeholder-canvas-texto {
    margin-top: 0.5rem;
    font-size: 0.875rem; /* text-sm */
}

/* --- Alertas y Estados --- */
.oculto {
    display: none;
}

.mensaje-error {
    background-color: #991b1b; /* bg-red-800 */
    border: 1px solid #7f1d1d; /* border-red-600 */
    color: #fecaca; /* text-red-200 */
    padding: 1rem;
    border-radius: 0.5rem;
}

.mensaje-error-titulo {
    font-weight: 700;
}

.spinner-carga {
    animation: spin 1s linear infinite;
    margin-left: -0.25rem;
    margin-right: 0.75rem;
    height: 1.25rem;
    width: 1.25rem;
    color: white;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


 
/* --- Estructura Principal --- */
.contenedor-principal {
    width: 100%;
  
  
    background-color: #1f293700; /* bg-gray-800 */
    border-radius: 1rem; /* rounded-2xl */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
    padding: 1.5rem; /* p-6 */
}
 .izquierda {

z-index: 1000;
 
 

 }
#canvas-container {

position: fixed; width: auto;  max-width: 100%; border-radius: 0.5rem; overflow: hidden; aspect-ratio: 16 / 9; top: 0%; height: 50%; background-color: #111827;

left: 50%;
transform: translateX(-50%);
 

}
@media (orientation: portrait) {
  #canvas-container {
    /* Hacemos que el ancho ocupe toda la pantalla y sea la medida principal */
    width: 100%;
    
    /* Dejamos que la altura se calcule automáticamente para mantener el aspect-ratio */
    height: auto;
    
    
  }
}
  @keyframes pulse {
            0%, 100% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7);
            }
            70% {
                transform: scale(1.05);
                box-shadow: 0 0 0 10px rgba(22, 163, 74, 0);
            }
        }



#render-container {
    position: relative; display: flex;
            margin-top: 20px;
            padding: 20px;
            background-color: #ffffff00;
            border-radius: 8px;
            text-align: center;
        }
        
     
        #status-message {
            position: fixed;
            font-style: italic;
            color: #aaa;
            min-height: 1.2em;
        }        

       


/* --- Estilos para la Galería de Generaciones --- */
/* Pega este código al final de tu archivo CSS principal. */

/* --- Estilos para la Galería de Generaciones --- */
/* Pega este código al final de tu archivo CSS principal, 
   reemplazando los estilos anteriores si existen. */

#generaciones-container {
    position: fixed;
    width: 100%;
    height: 65%;
    top: 35%; background-color: #1d4fd800;
    bottom: 0;
left: 0%; right: 50%;     
    padding-top: 1.5rem; overflow-y: scroll;
    border-top: 1px solid #4a5568; /* Ajusta el color al de tu tema */
}

#generaciones-container h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #e2e8f0; /* Ajusta el color al de tu tema */
    margin-bottom: 1.5rem;
    text-align: center;
}

#generaciones-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
    padding-bottom: 8%;
}

.generacion-item {
    position: relative;
    background-color: #2d3748; /* Fondo para el contenedor */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
}

.generacion-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

.generacion-item img {
    width: 100%; /* Ancho fijo para las imágenes */
    height:auto; /* Altura fija para las imágenes */
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    background-color: #4a5568;
}

.generacion-info {
     height: 80px;
    padding: 0.75rem;
    background-color: #1a202c; /* Fondo más oscuro para la info */
    position: relative;
}

.generacion-prompt {
    font-size: 0.8rem;
    color: #cbd5e0;
    margin: 0;
    padding: 5px;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: background-color 0.2s, border-color 0.2s;
    min-height: 2.5em; /* Para que no se colapse si está vacío */
}

.generacion-prompt:focus {
    background-color: #2d3748;
    border-color: #4299e1; /* Borde azul al editar */
    outline: none;
    color: #fff;
}

.generacion-delete-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    border: none;
    background-color: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    border-radius: 50%;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.generacion-delete-btn:hover {
    background-color: #e53e3e; /* Rojo al pasar el ratón */
    color: #fff;
}

/* Estilo para el nuevo botón de guardar */
#btn-save-generation {
    background-color: #2f855a; /* Verde */
    color: white;
    margin-left: 10px;
}

#btn-save-generation:hover {
    background-color: #276749;
}

#btn-save-generation:disabled {
    background-color: #4a5568;
    cursor: not-allowed;
}

 


.generacion-delete-btn:hover {
    background-color: #e53e3e; /* Rojo al pasar el ratón */
    color: #fff;
}

 



/* --- AÑADIDO: Estilo para el botón de mejorar --- */
.generacion-improve-btn {
    position: absolute;
    top: 5px;
    left: 1%; /* Posicionado a la izquierda del de eliminar */
    width: 30px;
    height: 30px;
    border: none;
    background-color: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    border-radius: 50%;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.generacion-improve-btn:hover {
    background-color: #3182ce; /* Azul al pasar el ratón */
    color: #fff;
}

/* Estilos para el importador de JSON */
.json-importer-container {
    margin-top: 20px;
    padding-top: 20px;
   align-items: end;
  
}

 

#json-input-area {
    width: 100%;
    height: 50px;
    background-color: #2d3748;
    color: #cbd5e0;
    border: 1px solid #4a5568;
    border-radius: 6px;
    padding: 10px;
    font-family: monospace;
    resize: none;
    box-sizing: border-box;
    margin-bottom: 10px;
}

#btn-process-json {
    width: 100%;
    padding: 10px;
    background-color: #3182ce;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}

#btn-process-json:hover {
    background-color: #2b6cb0;
}


/* --- ESTILOS PARA EL MODAL DE IMÁGENES (PANTALLA COMPLETA) --- */

.modal-overlay-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9998; /* Un poco por debajo del contextual para que este último pueda abrirse encima si es necesario */
}

.modal-content-fullscreen {
    background-color: #1e1e1e; /* Fondo oscuro para el modal */
    color: #e0e0e0;
    width: 95%;
    height: 95%;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    position: relative;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto; /* Permite scroll si el contenido es muy grande */
}

.dark-theme .modal-content-fullscreen {
     background-color: #2c2c2c;
}

.modal-close-btn-fullscreen {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 2.5rem;
    color: #aaa;
    cursor: pointer;
    line-height: 1;
    z-index: 10;
}

.modal-close-btn-fullscreen:hover {
    color: white;
}

/* Ajuste al botón flotante existente para hacer espacio al nuevo */


/* Estilo para el nuevo botón de imágenes, posicionado encima del contextual */
#open-imagenes-modal-btn {
    position: fixed;
    bottom: 95px; /* 25px (bottom contextual) + 55px (height contextual) + 15px (gap) */
    right: 25px;
    width: 55px;
    height: 55px;
    background-color: #3498db; /* Un color azul distintivo */
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 28px;
    cursor: pointer;
    z-index: 9998;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

#open-imagenes-modal-btn:hover {
    transform: scale(1.1);
    background-color: #2980b9;
}


/* --- ESTILOS PARA ADAPTAR EL MODAL DE IMÁGENES --- */

/* Hace que el modal de imágenes sea más grande */
#modal-content-imagenes {
    max-width: 80vw; /* Ocupa el 80% del ancho de la ventana */
    width: 1200px; /* Un ancho máximo para pantallas grandes */
    height: 90vh; /* Ocupa el 90% de la altura */
    display: flex;
    flex-direction: column;
}

/* Contenedor interno para organizar el contenido del generador */
#modal-content-imagenes .container-generator {
    flex-grow: 1; /* Ocupa el espacio restante */
    width: 100%;
    overflow-y: auto; /* Permite scroll si el contenido se desborda */
    padding: 10px;
}

/* Ajustes para el botón de abrir modal de imágenes */
#open-imagenes-modal-btn {
    position: fixed;
    /* Ajustamos la posición para que no se solape con el botón de IA */
    bottom: 95px; 
    right: 25px;
    width: 55px;
    height: 55px;
    background-color: #3498db; /* Azul para distinguirlo */
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    z-index: 9998;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

#open-imagenes-modal-btn:hover {
    transform: scale(1.1);
    background-color: #2980b9;
}

.dark-theme #open-imagenes-modal-btn {
    background-color: #4a90e2;
}

/* Pequeños ajustes para el layout interno del generador */
#modal-content-imagenes .control-panel {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#modal-content-imagenes .area-texto {
    height: 120px;
    width: 100%;
}

/* --- ESTILOS PARA EL VIDEO DE FONDO --- */

#video-fondo {
    position: fixed; /* Lo fija en la ventana para que no se mueva con el scroll. */
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100; /* Lo posiciona detrás de todo el contenido. */
    background-size: cover; /* Asegura que cubra todo el espacio sin deformarse. */
    filter: brightness(0.85); /* (Opcional) Oscurece un poco el video para que el texto encima sea más legible. */
}

#selector-libro-popup { display: none; position: fixed;  left: 0; top: 0%; background-color: transparent;
backdrop-filter: blur(20px);
background-image: linear-gradient(120deg, rgba(192, 192, 192, 0.3),  rgba(255, 255, 255, 0.2)); border: 0px solid #555; 
border-radius: 5px; padding: 0px; z-index: 10002; }

 

        #lista-guiones-popup-local { display: none; position: fixed;  left: 0; top: 0%;  background-color: transparent;
backdrop-filter: blur(20px); overflow: scroll; overflow-x: hidden;  margin-top: 5dvh; height: 90dvh; width: auto; 
background-image: linear-gradient(120deg, rgba(192, 192, 192, 0.3),  rgba(255, 255, 255, 0.2)); 
border: 0px solid #555; border-radius: 5px; padding: 0px; z-index: 10002; }


.nom {display: none;}

 

    .animation-container {
            display: flex;
            flex-direction: column;
            width: 1280px;
          
            height: 720px;
           
        }
   canvas {position: relative ; display: block;
            background-color: #ffffff00;
            border-radius: 8px;
             width: auto;
            height: 200px; left: 50% !important; top: 15%;
            bottom: 50%;
             

            transform:  translateX(-50%); 
            border: 1px solid #444444a9;
        }

  .canvas-container {
height: 720px !important ;
width: 1280px!important ;
           

  }
    #animation-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1; height: 720px !important ;
width: 1280px!important ;
        }
  
  .upper-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1; height: 720px !important ;
width: 1280px!important ;
        }
        
        .canvas-container {
            position: relative;
            width: 100%;
            height: 100%;
        }
  
  .canvas-wrapper {height: 720px;
            flex-grow: 1;
            aspect-ratio: 16 / 9;
            background-color: #000;
            border-radius: 8px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 0 20px rgba(0,0,0,0.5);
        }
        #animation-canvas {
            width: 100%;
            height: 100%;
            display: block;
        }




       /* --- ESTILOS PARA AJUSTAR SVGs EN DATOS --- */

/* 1. Para el SVG en la vista de tarjeta (.personaje-visual) */
.personaje-visual > svg {
    /* Posicionamiento y centrado absoluto */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* Tamaño máximo del 90% para dejar un margen */
    max-width: 90%;
    max-height: 90%;

    /* Asegura que las proporciones se mantengan */
    width: auto;
    height: auto;
}

/* 2. Para la imagen de previsualización en el editor */
/* Esto funciona tanto para PNGs como para SVGs cargados como Data URL */
.edit-preview-image {
    width: 100%;
    height: 100%;
    /* 'contain' asegura que la imagen se escale para caber completamente,
       manteniendo la proporción, que es exactamente lo que quieres. */
    object-fit: contain;
}
 
#rpgmaker {display: none;}


*:focus-visible {
  /* Quita el borde por defecto */
  outline: none;
  
  /* Y añade una "sombra-halo" como indicador de foco */
 
}

/* ======================================================= */
/* ESTILOS PARA EL VISOR DE IMÁGENES DE FRAMES (LIGHTBOX)  */
/* ======================================================= */

/* El contenedor del visor que cubre toda la pantalla */
#image-preview-overlay {
  /* Posición fija para cubrir toda la ventana, sin importar el scroll */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* Fondo oscuro semi-transparente */
  background-color: rgba(0, 0, 0, 0.85);

  /* Usamos Flexbox para centrar la imagen perfectamente (vertical y horizontal) */
  display: flex;
  justify-content: center;
  align-items: center;

  /* Asegura que esté por encima de casi todo lo demás */
  z-index: 9999;

  /* Inicialmente está oculto. La clase .visible lo mostrará. */
  visibility: hidden;
  opacity: 0;

  /* Transición suave para el efecto de aparición y desaparición */
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Regla que se activa cuando el JavaScript añade la clase .visible */
#image-preview-overlay.visible {
  visibility: visible;
  opacity: 1;
}

/* La imagen ampliada dentro del visor */
#enlarged-img {
  /* La imagen será grande, pero nunca más ancha o alta que el 90% de la pantalla */
  max-width: 90%;
  max-height: 90%;

  /* CLAVE: Mantiene la proporción de la imagen sin deformarla */
  object-fit: contain;

  /* Una sombra sutil para destacar la imagen */
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
  border-radius: 4px; /* Bordes ligeramente redondeados */
}

/* El botón de cerrar (X) */
#image-preview-overlay .close-btn {
  position: absolute;
  top: 15px;
  right: 25px;
  color: white;
  font-size: 45px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.2s ease;
}

#image-preview-overlay .close-btn:hover {
    color: #bbb;
}