/*@import "wordpress/astra-child-remote/framework/framework.css";*/
@import "/framework.css";
html {
    scroll-behavior: smooth;
}
body {
    text-align: center;
    padding: 2rem;
    margin: 0;
    background-image: url('img/peaks_pine.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    /* Comenta background-attachment: fixed para probar */
    /* background-attachment: fixed; */
    overflow-y: overlay; /* Cambiado de scroll a auto */
    min-height: 100vh; /* Asegura que el body cubra al menos la altura del viewport */
}



.container {
    max-width: 37.5rem;
    width: 100%;
    /*background:var(--color-primario);*/
    padding: 1rem;
    border-radius: 0.625rem;
    box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.3);
    margin: 2rem auto; /* Cambiar margin a auto para centrado horizontal */
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    position: relative; /* Añadir position relative */
    z-index: 1; /* Asegurar que está por encima del fondo */
}
/*
#animated-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('img/peaks_pine.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    animation: kenburns-bottom-left 2s ease-out forwards;
    z-index: -1;
    pointer-events: none;
}
*/

/* Efecto Kenburns */
@keyframes kenburns-bottom-left {
    0% {
        transform: scale(1) translate(0, 0);
        transform-origin: 16% 84%;
    }
    100% {
        transform: scale(1.25) translate(-20px, 15px);
        transform-origin: left bottom;
    }
}


#google-login-link {
    background-color: #f0f0f0; /* Example background color */
    position: absolute;
    top: 10px; right: 2rem;
    padding: 10px 15px; /* Example padding */
    border-radius: 5px; /* Example border radius */
    text-decoration: none; /* Remove underline */
    color: #333; /* Example text color */
  }
  
  #google-login-link:hover {
    background-color: #e0e0e0; /* Example hover effect */
  }

  .sector-select {
    width: 100%;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    background-color: white;
    font-size: 16px;
    /*color: #333;*/
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sector-select:focus {
    outline: none;
    border-color: #007BFF;
    box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
}

.sector-select:hover {
    border-color: #007BFF;
}

.sector-select option {
    padding: 12px;
}

.sector-select:required:invalid {
    color: #757575;
}

.sector-select.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #f5f5f5;
    pointer-events: none;
}

.sector-select.disabled:hover {
    border-color: #ccc;
}

.contenedor-textarea {
    display: flex;
    align-items: center;
    justify-content: center; /* Centra horizontalmente */
    height: 20rem; /* Ajusta la altura del contenedor según sea necesario */
  }
  
  textarea#texto {
    width: 100%;
    max-width: 50rem;
    padding: 0.5rem;
    border-radius: 0.3125rem;
    background-color: #1d201d;
    color: #cfbfbf;
    resize: none;
    box-shadow: #000000;
    font-family:  'montserrat',sans-serif;
    font-size: 2.5rem;
    text-align: center;
    font-weight: bold;
  }
/* Estilos .file-container, .upload-button (viejo), .files-list eliminados */

.logo {
    position: absolute;
    top: 0.625rem;
    left: 0.625rem;
    width: 15%;
    height: auto;
    filter: drop-shadow(0.125rem 0.125rem 0.25rem rgba(0, 255, 13, 0)); /* Sombra negra más fuerte */
    transition: transform 0.3s ease;
}
.logo:hover {
    transform: scale(1.05);
}
/* Estilos .file-container, .upload-button (viejo), .files-list eliminados */

/* 🔹 Contenedor de resultados del análisis */
#resultsContainer {
    display: none;  /* Inicialmente oculto */
    width: 100%;
    max-width: 25rem;
    background-color: #1f2422;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-top: 1rem;
    transition: all 0.3s ease;
}

/* Clase para cuando los resultados están visibles */
#resultsContainer.visible {
    display: block;
    animation: fadeIn 0.5s ease-in;
}

/* Contenedor específico para los enlaces */
.downloads-section {
    margin-top: 1rem;
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Animación de entrada */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

#progressContainer, #resultsContainer {
    transition: opacity 0.5s ease;
}

#progressContainer {
    display: none; /* Se muestra con JS */
    width: 100%; /* Changed from max-width to match file-container */
    border: 0.0625rem solid #000000;
    padding: 0.3125rem;
    border-radius: 0.5rem;
    background-color: #1f2422;
    margin-top: 0.625rem; /* Added to match spacing */
}

/* 🔹 Contenedor de la barra interna */
.progress-wrapper {
    width: 100%;
    background-color: transparent;
}

/* 🔹 Barra de progreso (el color cambia con JS) */
#progressBar {
    width: 0%; /* Empieza en 0% */
    height: 1.25rem; /* ✅ Equivalente a 20px (20px / 16px/rem = 1.25rem) */
    text-align: center;
    line-height: 1.25rem; /* ✅ Equivalente a 20px (20px / 16px/rem = 1.25rem) - Centrar texto verticalmente */
    font-weight: bold;
    color: black;
    position: relative;
    overflow: hidden;
}
#progressBar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 100%
    );
    animation: shimmer 1.5s infinite;
    z-index: 1;
}

@keyframes shimmer {
    0% { transform: translateX(-150%); }
    100% { transform: translateX(150%); }
}

/* 🔹 Mensajes informativos update-progress */
#progressText {
    /*font-family: 'Google Sans', sans-serif;*/
    display: flex;
    text-align: left;
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: flex; /* 🟦 Añadido: Ocultar por defecto */
    color: #FFF;
    font-size: 2rem;
    /*visibility: hidden;*/
    font-weight: bold; /* ✅ Añadido para hacerlo bold */
    opacity: 0.8; /* ✅ Añadido para hacerlo ligeramente opaco */
    white-space: normal; /* Permitir el salto de línea */
    flex-wrap: wrap; /* Permitir que el texto se ajuste al contenedor */
    transition: opacity 1.5s ease-in-out; /* Transición más lenta para suavizar cambios */
    animation: fadeInOut 1.5s ease-in-out;
}

/* Añadir nueva animación para el fade in/out */
@keyframes fadeInOut {
    0% { 
        opacity: 0;
        transform: translateY(-10px);
    }
    20% { 
        opacity: 0.8;
        transform: translateY(0);
    }
    80% { 
        opacity: 0.8;
    }
    100% { 
        opacity: 0;
    }
}

/* 🔹 Estados dinámicos de la barra */
.progress-start { background-color: #FFB800; }  /* Amarillo */
.progress-middle { background-color: #007BFF; } /* Azul */
.progress-almost { background-color: #FFA500; } /* Naranja */
.progress-complete { background-color: #08AD49; } /* Verde */

#status-container {
    margin-top: 0.3125rem; /* ✅ 5px / 16px/rem = 0.3125rem */
    color: #FFF;
    text-align: center;
}
/*enlaces valoraz final*/
.archivo-link {
    display: inline-block !important;
    color: #ffff00 !important; /* Amarillo brillante */
    background-color: rgba(0, 0, 0, 0.7) !important; /* Fondo negro semi-transparente */
    padding: 8px 15px !important;
    margin: 5px 0 !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    font-weight: bold !important;
    border: 2px solid #0CEF00 !important; /* Borde cyan */
    transition: all 0.3s ease !important;
  }
  
  .archivo-link:hover {
    background-color: rgba(0, 0, 0, 0.9) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 0 10px rgba(30, 255, 0, 0.5) !important; /* Brillo cyan */
  }
  
  .archivo-descripcion {
    color: #ffffff !important; /* Texto blanco */
    background-color: rgba(0, 0, 0, 0.7) !important;
    padding: 3px 8px !important;
    border-radius: 3px !important;
    margin-left: 5px !important;
  }
  
  .archivos-container {
    background-color: rgba(0, 0, 0, 0.7) !important;
    border: 2px solid #000000 !important;
    border-radius: 8px !important;
    padding: 15px !important;
    margin-top: 20px !important;
  }
  
  .archivos-container h4 {
    color: #ffffff !important;
    text-align: center !important;
    border-bottom: 1px solid #0CEF00 !important;
    padding-bottom: 8px !important;
    margin-bottom: 15px !important;
  }
  
  .archivos-container ul {
    list-style-type: none !important;
    padding: 0 !important;
  }
  
  .archivos-container li {
    margin-bottom: 10px !important;
  }

/* Posición de agradecimientos en la esquina inferior derecha */
#agradContainer {
    position: fixed;
    bottom: 10px;
    right: 10px;
    font-size: 0.8rem;
    color: #ffffff;
    opacity: 0.7;
    z-index: 10;
}
#agradContainer a {
    color: #0CEF00;
    text-decoration: none;
}

.buttons-container {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    align-items: center;
    width: 100%;
}
.buttons-container button:last-child {
    margin-left: auto;
}
.action-button {
    background-color: #262626;
    padding: 0.7rem 1.5rem;
    border-radius: 2rem;
    border: 2px solid #ffffff;
    color: #ffffff;
    cursor: pointer;
    font-family: 'montserrat',sans-serif;
    font-weight: 500;
    font-size: 1.2rem;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.action-button:hover {
    background-color: #e0e0e0;
    color: #262626;
}

.container-header, .sharing-header {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 15px;
    width: 100%; /* Asegura que ocupe todo el ancho */
}

.container-header h3, .sharing-header h3 {
    margin: 0;
    order: 1;
    flex: 1; /* Permite que el título ocupe el espacio disponible */
    text-align: left; /* Alinea el texto a la izquierda */
}

.container-header .tooltip, .sharing-header .tooltip {
    position: relative;
    margin-top: 3px;
    order: 2;
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: 0;
    flex-shrink: 0; /* Evita que el tooltip se encoja */
}

.container-header .tooltip-icon, .sharing-header .tooltip-icon {
    width: 1.2rem;
    height: 1.2rem;
    filter: brightness(0) invert(1);
    transition: filter 0.3s ease;
}

.container-header .tooltip-text, .sharing-header .tooltip-text {
    visibility: hidden;
    width: 200px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    top: 100%;
    right: 0;
    opacity: 0;
    transition: opacity 0.3s;
}

.container-header .tooltip:hover .tooltip-text, 
.sharing-header .tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* --- Nuevos Estilos para Carga Única (Adaptados a Pinefox) --- */

/* --- Sección General de Carga --- */
.upload-section.card { /* Añadir .card para heredar estilos base si es necesario */
    background-color: #1f2422; /* Fondo oscuro similar a otros contenedores */
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 0.625rem; /* Consistente con .container */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
    width: 100%; /* Ocupar ancho */
}

/* --- Dropzone / Botón de Carga --- */
#drop-zone.upload-button { /* ID específico */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    border: 2px dashed rgba(255, 255, 255, 0.3); /* Borde discontinuo más visible */
    border-radius: 0.5rem;
    background-color: rgba(29, 32, 29, 0.5); /* Fondo oscuro translúcido */
    color: #ccc; /* Texto gris claro */
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    text-align: center;
    position: relative; /* Para el indicador de drop */
    font-family: 'Montserrat', sans-serif;
}

#drop-zone.upload-button i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: #08AD49; /* Icono verde Pinefox */
}

#drop-zone.upload-button:hover {
    background-color: rgba(29, 32, 29, 0.7);
    border-color: #08AD49; /* Borde verde Pinefox */
}

#drop-zone.upload-button.dragover {
    background-color: rgba(12, 239, 0, 0.1); /* Verde Pinefox translúcido */
    border-color: #0CEF00; /* Verde Pinefox brillante */
    color: #eee;
}

#drop-zone.upload-button .drop-indicator {
    display: none; /* Oculto por defecto */
    font-weight: bold;
    margin-top: 0.5rem;
    color: #0CEF00; /* Texto indicador verde */
}

#drop-zone.upload-button.dragover span:not(.drop-indicator) {
    display: none; /* Oculta texto normal al arrastrar */
}
#drop-zone.upload-button.dragover .drop-indicator {
    display: block; /* Muestra indicador al arrastrar */
}

/* --- Área de Staging (Pre-categorización) --- */
.staging-area { /* ID: #files-to-categorize */
    margin-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Separador sutil */
    padding-top: 1.5rem;
}

.file-to-categorize-item {
    background-color: #1d201d; /* Fondo oscuro */
    padding: 1rem;
    border-radius: 0.3rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.file-info {
    font-weight: bold;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    word-break: break-all; /* Para nombres largos */
    color: #e8e8e8; /* Texto principal */
}

.file-info i {
    color: #08AD49; /* Icono verde */
}

.category-selector-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: #ccc; /* Texto secundario */
}

.category-choices {
    display: flex;
    flex-wrap: wrap; /* Permite que los botones pasen a la siguiente línea */
    gap: 0.5rem; /* Espacio entre botones */
}

.category-choice {
    background-color: #262626; /* Similar a action-button */
    color: #ffffff;
    border: 1px solid #555;
    padding: 0.6rem 1rem;
    border-radius: 2rem; /* Redondeado */
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    font-size: 0.9rem;
    font-family: 'Montserrat', sans-serif;
    display: inline-flex; /* Cambiado para alinear tooltip */
    align-items: center;
    gap: 0.5rem;
    position: relative; /* Para tooltip */
}

.category-choice:hover {
    background-color: #3a3a3a;
    border-color: #08AD49; /* Borde verde al pasar */
}

.category-choice .title {
    font-weight: 500;
}

.category-choice .subtitle {
    font-size: 0.8rem;
    color: #bbb;
    margin-left: 0.3rem; /* Pequeño espacio */
    font-style: italic;
}

/* --- Tooltip dentro de Category Choice (Adaptado a Pinefox Original) --- */
.category-choice .tooltip {
    position: relative; /* Ya es inline-flex por .category-choice */
    /* display: inline-flex; No necesario aquí */
    align-items: center;
    margin-left: auto; /* Empujar a la derecha */
}

.category-choice .tooltip-icon {
    width: 1em; /* Tamaño relativo a la fuente del botón */
    height: 1em;
    cursor: help;
    filter: brightness(0) invert(1); /* Icono blanco */
    transition: filter 0.3s ease;
}

.category-choice .tooltip-text {
    visibility: hidden;
    width: 250px; /* Ancho tooltip */
    background-color: #333; /* Fondo oscuro tooltip */
    color: #fff;
    text-align: left; /* Texto alineado izquierda */
    border-radius: 6px;
    padding: 8px 12px;
    position: absolute;
    z-index: 10; /* Asegurar que esté por encima */
    bottom: 130%; /* Posición encima del icono */
    left: 50%;
    transform: translateX(-50%); /* Centrado horizontal */
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.85rem;
    font-family: 'Montserrat', sans-serif; /* Fuente consistente */
    line-height: 1.4;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

.category-choice .tooltip-text::after { /* Flecha del tooltip */
    content: "";
    position: absolute;
    top: 100%; /* Abajo del tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent; /* Color de fondo del tooltip */
}

.category-choice .tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}


/* --- Lista Final Categorizada --- */
.final-list.card { /* ID: #uploaded-files-categorized */
    background-color: #1f2422;
    padding: 1.5rem;
    margin-top: 2rem; /* Espacio arriba */
    margin-bottom: 1.5rem;
    border-radius: 0.625rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
    width: 100%;
}

.final-list h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem; /* Tamaño adecuado */
    color: #0CEF00; /* Verde Pinefox */
    margin-top: 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.5rem;
    text-align: left;
}

#category-groups-container { /* Contenedor de grupos */
    /* No necesita estilos propios por ahora */
}

.category-group {
    margin-bottom: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Separador */
}
.category-group:first-child {
    border-top: none; /* Sin borde para el primer grupo */
    padding-top: 0;
}


.category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
}

.category-header h4 {
    font-family: var(--font-secondary), sans-serif;
    font-size: 1.1rem; /* Ligeramente más pequeño que h2 */
    font-weight: 600;
    color: #e8e8e8; /* Texto claro */
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.category-header h4 .subtitle { /* Estilo para subtítulo dentro de h4 */
     font-size: 0.9rem;
     color: #bbb;
     font-weight: 400;
     font-style: italic;
}


.file-count {
    font-size: 0.9rem;
    color: #aaa;
    background-color: rgba(255, 255, 255, 0.05); /* Fondo sutil */
    padding: 0.1rem 0.5rem;
    border-radius: 1rem;
    font-family: 'Montserrat', sans-serif;
}

.file-list {
    padding-left: 1rem; /* Indentación leve */
}

.file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* Borde más sutil */
    font-size: 0.95rem;
    color: #ccc; /* Texto de archivo */
    word-break: break-all; /* Para nombres largos */
}
.file-item:last-child {
    border-bottom: none;
}

.file-item span {
    margin-right: 1rem; /* Espacio antes del botón */
    flex-grow: 1; /* Permitir que ocupe espacio */
}

.delete-button {
    background: none;
    border: none;
    color: #ff6666; /* Rojo claro para eliminar */
    cursor: pointer;
    font-size: 1.2rem; /* Ligeramente más grande */
    padding: 0.2rem 0.4rem;
    line-height: 1;
    border-radius: 50%;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.delete-button:hover {
    color: #fff; /* Blanco al pasar */
    background-color: #ff0000; /* Fondo rojo intenso */
}

.empty-message {
    color: #aaa;
    text-align: center;
    padding: 2rem 0;
    font-style: italic;
    font-family: 'Montserrat', sans-serif;
}