/* Estilos generales */
/* Estilos generales */

@font-face {
  font-family: 'Jorsan17-Regular';
  src: url('./jorsan17-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
 

html, body {
     background-color: #f3edde;
     margin: 0;
     padding: 0;
     height: 100%;
     box-sizing: border-box;
}
 body {
     font-family: Arial, sans-serif;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
     height: 100vh;
     margin: 0;
     padding-top: 10px;
     box-sizing: border-box;
     background-image: radial-gradient(circle at 100% 100%, transparent 15px, #f3edde 15px), radial-gradient(circle at 0 100%, transparent 15px, #f3edde 15px), radial-gradient(circle at 100% 0, transparent 15px, #f3edde 15px), radial-gradient(circle at 0 0, transparent 15px, #f3edde 15px);
     background-size: 51% 51%;
     background-position: bottom right, bottom left, top right, top left;
     background-repeat: no-repeat;
}
h1 {
    text-align: center;
    margin-bottom: 20px;
    color: #d29950;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-style: italic;
    cursor: pointer;
}

#poem-container h2 {
    font-family: 'Jorsan17-Regular', Arial, sans-serif;
    font-weight: normal; /* Mantén el peso normal */
    font-style: normal;
    margin: 0;
    font-size: 1.5em;
    text-transform: uppercase;
    margin-bottom: 20px;
    text-align: center;
    color: black;
    text-shadow: 0.5px 0 0 black, 0 -0.5px 0 black, 
                 -0.5px 0 0 black, 0 0.5px 0 black;
}



/* Posicionar el botón de INFO a la derecha del H1 */
h1 {
   display: inline-block;
   position: relative;
}

#info-btn {
   position: relative;
   display: inline-block;
   margin-left: 10px; /* Ajuste fino para que quede junto al título */
   top: -5px; /* Ajuste de la posición vertical */
   background: none;
   border: none;
   cursor: pointer;
}

.icon.info {
    fill: none;  /* Sin fondo */
    stroke: #d29950; /* Color café */
    stroke-width: 2px;
    width: 35px;
    height: 35px;
    margin-left: 10px;
    cursor: pointer;
}






 h1 .line1 {
     font-weight: bold;
     font-size: 0.8em;
     line-height: 1.1;
}
 h1 .line2 {
     font-weight: normal;
     font-size: 0.8em;
     line-height: 1.1;
}

.title-container {
   display: flex;
   align-items: center;
   justify-content: center; /* Alinea al centro horizontalmente */
   gap: 10px; /* Espacio entre el título y el botón */
   position: relative;
}

 h1:hover {
     color: #4ba89b;
     transition: color 0.3s ease;
}
 .icon-button {
     background-color: transparent;
     border: none;
     cursor: pointer;
     margin-right: 15px;
     display: none;
}
 .icon-button.visible {
     display: inline-block;
}
 .icon {
     width: 65px;
     height: 65px;
     fill: #d29950;
}
 .icon.generate {
     background-color: white;
     border-radius: 50%;
     padding: 10px;
     fill: #4ba89b;
    /* Triángulo verde */
     stroke: #4ba89b;
     stroke-width: 3px;
     box-shadow: 0 0 5px 5px rgba(194, 136, 61, 0.6);
}
 .icon.generate.pressed {
     background-color: #d29950;
    /* Café */
     fill: white;
    /* Triángulo blanco */
     stroke: white;
}
 .highlight {
     background-color: #faeac2;
    /* Marca aún más suave */
     border-radius: 4px;
     display: inline-block;
     box-shadow: 0px 0px 0px 4px #fdf4e1;
    /* Halo más suave */
     padding: 0;
    /* Sin cambiar el tamaño del texto */
}
 #icon-container {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     margin-top: 20px;
     margin-bottom: 20px;
     overflow: visible;
    /* Asegura que las sombras no se corten */
}
 

#poem-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    border: none;
    border-radius: 10px;
    background-color: white;
    padding: 15px 20px 30px 40px; /* Aumenta el margen izquierdo para alejar el texto: top right bottom left*/
    max-width: 450px;
    box-shadow: 0 0 5px 5px rgba(194, 136, 61, 0.6);
    min-height: 250px;
    box-sizing: border-box;
    overflow-wrap: break-word;
    hyphens: auto;

    /* Fondo tipo hoja de cuaderno */
background-image: 
    linear-gradient(to right, #ff5c5c 1px, transparent 1px), /* Primera línea rosa */
    linear-gradient(to right, #ff5c5c 1px, transparent 1px), /* Segunda línea rosa */
    repeating-linear-gradient(to bottom, #c2e0f4 0, #c2e0f4 1px, transparent 1px, transparent 34px); /* Líneas azules */
background-position: 15px 0, 20px 0, 0 0; /* Ajuste de la distancia entre líneas rosas */
background-size: 1px auto, 1px auto, 100% auto;
background-repeat: no-repeat, no-repeat, repeat-y;

}

/* Asegurar margen superior en cada poema */
#poem-container::before {
    content: "";
    display: block;
    height: 20px;
}

/* Alineación del texto con las líneas azules */
#poem-container p {
    margin: 0; /* Asegúrate de eliminar cualquier margen */
    padding: 0; /* Sin padding extra */
    line-height: 30px; /* Mantén igual que las líneas azules */
    font-family: 'Jorsan17-Regular', Arial, sans-serif;
    font-size: 1.2em;
    white-space: pre-wrap;
}


#poem-counter-container {
  background-color: #d29950; /* Color marrón */
  border-radius: 10px;       /* Bordes redondeados */
  padding: 5px 10px;         /* Espaciado interno */
  display: none;             /* Inicialmente oculto */
  text-align: center;
  float: right;              /* Alineado a la derecha */
  margin-top: 10px;          /* Espacio debajo de la caja del poema */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Sombra */
}

#poem-counter {
  font-family: "Courier New", Courier, monospace; /* Fuente tipo Courier */
  font-size: 1.2em;        /* Tamaño del texto */
  color: white;            /* Texto blanco */
}

#poem-container p {
    font-family: 'Jorsan17-Regular', Arial, sans-serif;
    margin: 0.25em 0;
    font-size: 1.2em;
    line-height: 1.25;
    white-space: pre-wrap;
}

 #watermark {
     position: absolute;
     right: 10px;
     bottom: 10px;
     color: #d9c8a0 !important;
    /* Establece el color que deseas */
     font-size: 0.8em;
     pointer-events: none;
     user-select: none;
     opacity: 0.8;
}
 h2 {
     margin: 0;
     font-size: 1.5em;
     text-transform: uppercase;
     margin-bottom: 20px;
}
 .button-container-bottom {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin-top: 5px;
}
/* Estilos para pantallas pequeñas */
 @media (max-width: 600px) {
     h1 {
         font-size: 1.5em;
         font-weight: normal;
    }
     h1 .line1, h1 .line2 {
         font-size: 1.2em;
    }
     h2 {
         font-size: 1.3em;
    }
     p {
         font-size: 1.1em;
    }
     .icon {
         width: 55px;
         height: 55px;
    }
     #poem-container {
         hyphens: none;
         word-wrap: normal;
         overflow-wrap: normal;
         overflow: hidden;
        /* Evitar que elementos como el watermark se salgan del contenedor */
         padding-bottom: 30px;
        /* Padding original restaurado */
    }
     #watermark {
         position: relative;
        /* Mantenerlo dentro del flujo del documento */
         margin-top: 10px;
        /* Separar un poco más del texto */
         right: 0;
         bottom: 0;
         font-size: 0.7em;
         text-align: right;
         color: #d9c8a0;
         pointer-events: none;
         user-select: none;
         opacity: 0.8;
         transition: transform 0.3s ease;
        /* Asegurarse de que las animaciones sean suaves */
         transform: translateY(0);
        /* Control de la posición en la animación */
    }
     button#generate-btn {
         margin: 0 auto;
         background-color: transparent;
         border: none;
         padding: 0;
         box-shadow: none;
         margin-bottom: 10px;
         overflow: visible;
    }
     button#generate-btn svg {
         background-color: white;
         border-radius: 50%;
         box-shadow: 0 0 5px 5px rgba(194, 136, 61, 0.6);
         padding: 10px;
         overflow: visible;
    }
     #limit-message {
         color: orange;
         font-size: 1.2em;
         font-weight: bold;
         text-align: center;
         margin-top: 20px;
    }
     .icon.generate.pressed {
         background-color: #d29950 !important;
        /* Fondo café */
    }
     .icon.generate.pressed svg {
         fill: white !important;
        /* Triángulo blanco */
         stroke: white !important;
    }
}
/* Estilos para pantallas más grandes */
 @media (min-width: 768px) {
     #poem-container {
         max-width: 600px;
        /* Ajusta el ancho máximo del contenedor */
         margin: 0 auto;
        /* Esto asegura que el contenedor esté centrado horizontalmente */
         align-items: flex-start;
        /* Asegura que el contenido interno esté alineado a la izquierda */
         text-align: left;
        /* Alinea el texto a la izquierda */
    }
     button#generate-btn {
         display: block;
        /* Esto asegura que el botón se comporte como un bloque centrado */
         margin: 0 auto;
        /* Esto asegura que el botón esté centrado horizontalmente */
    }
}
/* Animación del botón de pausa respirante cuando hay voz activa */
 .paused-icon {
     animation: pulse 1s infinite;
}
 @keyframes pulse {
     0% {
         transform: scale(0.85);
         filter: saturate(85%);
    }
     100% {
         transform: scale(1);
         filter: saturate(100%);
    }
}
 
/* Estilo para el botón de información (INFO) */
.icon.info {
    fill: none;
    stroke: #4ba89b;
    stroke-width: 2px;
    width: 35px;
    height: 35px;
    margin-left: 10px;
    cursor: pointer;
}

/* Estilos para el popup */
.popup {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4); /* Fondo semitransparente */
}

.popup-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    border-radius: 15px;
    width: 80%;
    max-width: 500px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.popup-content p {
    font-size: 1em;
    line-height: 1.5;
    color: #333;
}

.popup-content .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.popup-content .close:hover,
.popup-content .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Reducir el tamaño de los íconos en el popup */
.popup-content .icon {
    width: 20px; /* Ajusta el tamaño según sea necesario */
    height: 20px; /* Ajusta el tamaño según sea necesario */
    margin-bottom: -3px; /* Ajusta la alineación vertical si es necesario */
}

/* Cambiar el color del tache de cerrar popup */
.popup-content .close {
   color: #d29950; /* Mismo color café de los botones */
   float: right;
   font-size: 28px;
   font-weight: bold;
   cursor: pointer;
}

.popup-content .close:hover,
.popup-content .close:focus {
   color: #b07342; /* Color café más oscuro en hover */
}

/* Alinear los iconos SVG con el texto en el popup */
.popup-content svg {
    vertical-align: middle;
}