/* --- Variables Globales Mejoradas --- */
:root {
    /* Colores */
    --color-primary: #3B82F6; /* Azul más suave */
    --color-primary-hover: #2563EB;
    --color-background: #F9FAFB; /* Gris muy claro */
    --color-section-background: #FFFFFF;
    --color-text-primary: #1F2937; /* Gris oscuro (casi negro) */
    --color-text-secondary: #6B7280; /* Gris medio */
    --color-border-light: #E5E7EB;
    --color-border: #D1D5DB;
    --color-sidebar-background: #F3F4F6; /* Color específico para sidebar */
    --color-disabled-text: #9CA3AF;
    --color-disabled-bg: #E5E7EB;
    --color-indicator: var(--color-primary); /* Color del indicador */

    /* Tipografía */
    --font-family-base: 'Lato', sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.6;

    /* Espaciado */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --sidebar-width: 340px; /* Ancho de la barra lateral */


    /* Bordes y Sombras */
    --border-radius: 6px; /* Bordes ligeramente redondeados */
    --box-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --box-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.05);
}

/* --- Reset Básico y Estilos Globales --- */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: var(--font-size-base); /* Base para REMs */
}

body {
    font-family: var(--font-family-base);
    line-height: var(--line-height-base);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    margin: 0;
    background-color: var(--color-background);
    color: var(--color-text-primary);
    min-height: 100vh;
}

h1, h2, h3, p {
    margin: 0; /* Resetear márgenes */
}

h2 { /* Estilo general para títulos de sección */
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
    text-align: center;
    padding-bottom: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border-light);
    width: 100%;
}

h3 { /* Estilo para títulos dentro de la sidebar */
    font-size: 1rem; /* Más pequeño que H2 */
    font-weight: 700;
    color: var(--color-text-secondary); /* Más tenue */
    margin-bottom: var(--spacing-md);
    text-align: left;
    width: 100%;
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--color-border-light);
}


label {
    font-size: 0.875rem; /* 14px */
    color: var(--color-text-secondary);
    margin-right: var(--spacing-xs);
    display: block; /* Para que ocupen su línea en la sidebar */
    margin-bottom: var(--spacing-xs);
}

/* --- Estilos de Sección --- */
.app-section {
    width: 100%;
    /*max-width: 1200px; /* Aumentamos max-width para acomodar sidebar */
    background-color: var(--color-section-background);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--box-shadow-md);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: max-height 0.5s ease-out, padding 0.5s ease-out, margin 0.5s ease-out, opacity 0.5s ease-out;
}

/* -------------------------- */
/* --- Sección de Carga --- */
/* -------------------------- */
#upload-section {
    padding: var(--spacing-xl);
    border: 1px solid var(--color-border-light);
    box-shadow: none;
    margin-top: var(--spacing-lg);
    max-width: 1000px; /* Mantenemos más estrecho para el upload */
}

/* Estado Expandido */
#upload-section.expanded {
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 1;
}
#upload-section.expanded .upload-content-collapsed { display: none; }
#upload-section.expanded .upload-content-expanded {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}
#upload-section.expanded h2 {
    border-bottom: none;
    margin-bottom: 0;
}
#upload-section.expanded p {
    color: var(--color-text-secondary);
    max-width: 400px;
}

/* Estado Colapsado */
#upload-section.collapsed {
    max-height: 65px;
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: default;
    opacity: 1;
    border: 1px solid transparent;
    box-shadow: var(--box-shadow-sm);
    max-width: 950px; /* Mantenemos más estrecho para el upload */
}
#upload-section.collapsed .upload-content-expanded { display: none; }
#upload-section.collapsed .upload-content-collapsed {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--spacing-md);
}
#upload-section.collapsed h2 { display: none; }
#upload-section.collapsed span {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}
#upload-section.collapsed strong {
    color: var(--color-text-primary);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 350px;
    display: inline-block;
    vertical-align: middle;
}

/* Controles de Carga */
.upload-button, .change-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    background-color: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 700;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: var(--box-shadow-sm);
}
.upload-button:hover, .change-button:hover {
    background-color: var(--color-primary-hover);
    box-shadow: var(--box-shadow-md);
}
.change-button {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: 0.85rem;
    font-weight: 400;
}

.upload-controls {
    margin-top: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

#status {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}


/* --------------------------------------------- */
/* --- Sección del Visor con Barra Lateral --- */
/* --------------------------------------------- */
#viewer-section {
     padding: 0; /* Padding se manejará dentro */
     border: none;
     box-shadow: none;
     margin-bottom: 0;
     background-color: transparent; /* El fondo lo darán las partes internas */
}
/* Estado Colapsado */
#viewer-section.collapsed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    opacity: 0;
    overflow: hidden;
}
/* Estado Expandido */
#viewer-section.expanded {
    max-height: none; /* Permitir que crezca */
    padding: 0; /* Sin padding exterior */
    opacity: 1;
    /* Borde y sombra ahora en la sección */
    margin-bottom: var(--spacing-lg);
    display: flex; /* Necesario para que viewer-main-area funcione bien */
    background-color: var(--color-section-background); /* Fondo blanco general */
    border: 1px solid var(--color-border-light); /* Borde general */
    box-shadow: var(--box-shadow-md); /* Sombra general */
}

/* Contenedor Principal Flex (Sidebar + Content) */
.viewer-main-area {
    display: flex;
    width: 100%;
    min-height: 70vh; /* Altura mínima para darle cuerpo */
}

/* Estilos de la Barra Lateral */
#controls-sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0; /* Evita que se encoja */
    background-color: var(--color-sidebar-background);
    padding: var(--spacing-lg);
    border-right: 1px solid var(--color-border); /* Línea divisoria */
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl); /* Espacio entre grupos de control */
    overflow-y: auto; /* Scroll si el contenido es muy alto */
}
#controls-sidebar h2 { /* Título principal de la sidebar */
    text-align: center;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    font-size: 1.1rem; /* Ligeramente más pequeño */
}

/* Estilos para Grupos de Control dentro de la Sidebar */
.control-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md); /* Espacio interno del grupo */
}
.control-group h3 {
    margin-bottom: var(--spacing-md); /* Espacio debajo del título del grupo */
}

/* ========================================= */
/* === MODIFICACIONES LAYOUT HORIZONTAL ==== */
/* ========================================= */

/* --- Grupo de Navegación de Página (Modificado) --- */
.navigation .nav-page-controls {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; /* Evitar que se rompa la línea */
    justify-content: space-between; /* Botones a los extremos, grupo central ocupa espacio */
    align-items: center;
    gap: var(--spacing-sm); /* Espacio entre botones y grupo central */
    width: 100%;
}

.navigation .nav-page-controls button {
    padding: var(--spacing-sm) var(--spacing-xs); /* Botones un poco más pequeños */
    flex-shrink: 0; /* Evitar que los botones se encojan */
}

/* Grupo central (label, input/total, botón Ir) */
.nav-page-controls .page-input-group {
    display: flex;
    flex-direction: row; /* Horizontal */
    align-items: center;
    justify-content: center; /* Centrar contenido dentro del grupo */
    gap: var(--spacing-xs); /* Espacio pequeño entre elementos internos */
    flex-grow: 1; /* Permitir que ocupe espacio central */
    flex-shrink: 1; /* Permitir encogerse si es necesario */
    min-width: 0; /* Para permitir encogimiento */
}

.nav-page-controls .page-input-group label {
    margin-bottom: 0; /* Quitar margen inferior */
    white-space: nowrap; /* Evitar que "Página:" se rompa */
    flex-shrink: 0; /* No encoger label */
}

/* Contenedor para input y total */
.nav-page-controls .page-input-group > div {
    display: flex;
    align-items: center;
    flex-shrink: 0; /* Evitar que este div se encoja */
}

.nav-page-controls .page-input-group input#page-num-input {
    /* width se define inline */
    width: 60px;
    padding: var(--spacing-xs);
    margin: 0;
    text-align: center;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    flex-shrink: 0; /* No encoger input */
}

.nav-page-controls .page-input-group span {
    white-space: nowrap; /* Evitar que "/ N" se rompa */
    margin-left: 2px; /* Pequeño espacio antes del total */
    flex-shrink: 0;
}

/* Botón "Ir" (ahora dentro del grupo) */
.nav-page-controls .page-input-group #goto-page {
    margin-left: var(--spacing-sm); /* Espacio antes de "Ir" */
    padding: var(--spacing-sm) var(--spacing-sm); /* Padding ajustado */
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* --- Grupo de Lectura TTS (Modificado) --- */
.tts-controls {
    gap: var(--spacing-md); /* Espacio entre nav-sección, play, settings */
}

/* Navegación de sección (mantener horizontal) */
.tts-controls .section-nav-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: var(--spacing-sm);
}
.tts-controls .section-nav-controls button {
     padding: var(--spacing-sm) var(--spacing-xs);
     font-size: 0.85rem;
     flex-shrink: 0;
}
.tts-controls .section-nav-controls span#section-info {
    text-align: center;
    flex-grow: 1; /* Ocupa espacio central */
    white-space: nowrap;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin: 0 var(--spacing-xs); /* Pequeños márgenes laterales */
}

/* Botón Play/Pause (destacado) */
#play-pause {
    width: 100%; /* Ocupar todo el ancho */
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 1rem;
    font-weight: 700;
    margin-top: var(--spacing-xs); /* Pequeño espacio arriba */
    margin-bottom: var(--spacing-md); /* Espacio antes de los settings */
    background-color: var(--color-primary);
    color: white;
    border: none;
}
#play-pause:hover:not(:disabled) {
    background-color: var(--color-primary-hover);
}

/* Contenedor de ajustes TTS (Voz y Velocidad) - AHORA HORIZONTAL */
.tts-controls .tts-settings {
    display: flex;
    flex-direction: column; /* VERTICAL */
    flex-wrap: nowrap; /* No wrap necesario en columna */
    gap: var(--spacing-md); /* Espacio entre items */
    width: 100%;
}

/* Estilo para cada item de ajuste (Voz, Velocidad) */
.tts-settings .setting-item {
    width: 100%; /* Asegura que ocupe todo el ancho de la columna */
    display: flex;
    flex-direction: column; /* Label encima del control */
    gap: var(--spacing-xs); /* Espacio entre label y control */
}

.tts-settings .setting-item label {
    margin-bottom: 0; /* Quitar margen extra */
    font-weight: 400; /* Normal weight for labels */
}

/* Control de Selección de Voz */
.setting-item #voice-select {
    width: 100%; /* Ocupar ancho del .setting-item */
    padding: var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background-color: var(--color-section-background);
    color: var(--color-text-primary);
    font-size: 0.9rem;
    cursor: pointer;
}

/* Control de Velocidad (Rate) */
.setting-item .rate-control {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%; /* Ocupar ancho del .setting-item */
    gap: var(--spacing-sm);
}

.setting-item #rate-slider {
    flex-grow: 1; /* Slider ocupa espacio */
    min-width: 50px; /* Ancho mínimo para el slider */
    cursor: pointer;
    accent-color: var(--color-primary);
    margin: 0;
}

.setting-item #rate-value {
    min-width: 2.5em;
    text-align: right;
    font-family: monospace;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    flex-shrink: 0; /* No encoger el valor */
}

/* ========================================= */
/* === FIN MODIFICACIONES LAYOUT ========= */
/* ========================================= */


/* Ajustes a botones generales dentro de controles (MENOS Play/Pause) */
.navigation button:not(#goto-page), /* Excluir goto-page que está dentro de input-group */
.tts-controls button:not(#play-pause) {
    /* Estilos por defecto para botones secundarios en sidebar */
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-section-background);
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    width: auto; /* Ancho automático por defecto */
}
/* Ajuste específico para botones de nav más pequeños si se desea */
.navigation button#prev-page,
.navigation button#next-page,
.tts-controls .section-nav-controls button {
    padding: var(--spacing-sm) var(--spacing-xs);
    font-size: 0.85rem;
}
/* Estilo hover para botones secundarios */
.navigation button:not(#goto-page):hover:not(:disabled),
.tts-controls button:not(#play-pause):hover:not(:disabled),
.page-input-group #goto-page:hover:not(:disabled) /* Incluir hover para GoTo */
{
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary-hover);
}


/* Estilo para botones deshabilitados (general) */
button:disabled,
select:disabled,
input:disabled { /* Aplicar a todos los inputs deshabilitados */
    background-color: var(--color-disabled-bg) !important; /* !important para sobreescribir específicos si es necesario */
    color: var(--color-disabled-text) !important;
    border-color: var(--color-border-light) !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
    box-shadow: none !important;
}
/* Asegurar que play/pause deshabilitado también se vea bien */
#play-pause:disabled {
    background-color: var(--color-disabled-bg) !important;
    color: var(--color-disabled-text) !important;
    border: 1px solid var(--color-border-light) !important; /* Añadir borde para consistencia */
}


/* Área de Contenido del Visor */
.viewer-content-area {
    flex-grow: 1; /* Ocupa el espacio restante */
    padding: var(--spacing-lg); /* Padding interno reducido */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el visor si es más estrecho que el área */
    overflow-y: auto; /* Permitir scroll independiente si el contenido es alto */
    min-width: 0; /* Fix para flexbox */
}
.viewer-content-area h2 { /* Título sobre el visor */
     width: 100%;
     text-align: center;
     margin-bottom: var(--spacing-lg); /* Espacio antes del visor */
}


/* --------------------------------------------- */
/* --- Visor PDF, Capas e Indicador Lateral --- */
/* --------------------------------------------- */
#pdf-viewer {
    position: relative; /* Necesario para elementos hijos absolutos */
    border: 1px solid var(--color-border);
    box-shadow: var(--box-shadow-sm);
    width: 100%; /* Ocupa el ancho del content-area */
    max-width: 850px; /* Ancho máximo razonable para el PDF */
    background-color: #fff; /* Fondo blanco explícito */
    overflow: hidden; /* Oculta lo que sobresalga, ¡IMPORTANTE! */
    border-radius: var(--border-radius);
    margin: 0 auto; /* Centrar si max-width es menor que el contenedor */
}

#pdf-canvas {
    display: block; /* Evita espacio extra debajo */
    width: 100%;
    height: auto;
    background-color: #EBEBEB; /* Fondo mientras carga */
}

/* Capa de Texto */
.textLayer {
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    overflow: hidden; /* Oculta spans que se salgan */
    opacity: 1; line-height: 1.0;
    pointer-events: none; /* Capa no interactiva */
    z-index: 5; /* Encima del canvas */
}
.textLayer > span {
    color: transparent; /* Texto invisible, sólo para estructura */
    position: absolute; white-space: pre; /* Mantiene espacios */
    cursor: text; transform-origin: 0% 0%;
    pointer-events: auto; /* Spans sí interactivos (para futuro) */
    /* border: 1px dashed rgba(255, 0, 0, 0.3); */ /* DEBUG: Descomentar para ver los spans */
}

/* Indicador Lateral */
.highlight-indicator {
    position: absolute;
    left: 3px; /* Pequeño espacio desde el borde izquierdo del visor */
    top: 0; /* Posición vertical inicial, será establecida por JS */
    width: 5px; /* Ancho de la barra indicadora */
    background-color: var(--color-indicator); /* Usar variable de color */
    z-index: 8; /* Encima del canvas y textLayer */
    height: 0; /* Inicialmente oculta, la altura será establecida por JS */
    border-radius: 3px; /* Bordes redondeados */
    transition: top 0.2s ease-out, height 0.2s ease-out, opacity 0.2s ease-out; /* Transición suave */
    pointer-events: none; /* No debe interferir con el ratón */
    opacity: 0; /* Empezar totalmente transparente/oculto */
}
/* Estilo cuando está activo (JS modificará top y height) */
.highlight-indicator.active {
    opacity: 0.85; /* Hacerlo visible pero ligeramente transparente */
}

/* Ocultar inputs de archivo reales */
input[type="file"][hidden] { display: none; }

/* --- Media Query para pantallas pequeñas --- */
@media (max-width: 850px) { /* Ajustar breakpoint si es necesario */
    .viewer-main-area {
        flex-direction: column; /* Apilar sidebar encima del contenido */
    }

    #controls-sidebar {
        width: 100%; /* Sidebar ocupa todo el ancho */
        border-right: none; /* Quitar borde lateral */
        border-bottom: 1px solid var(--color-border); /* Borde inferior */
        max-height: 50vh; /* Limitar altura y permitir scroll */
        overflow-y: auto;
    }

    .viewer-content-area {
        padding: var(--spacing-md); /* Menos padding en pantallas pequeñas */
    }

     #pdf-viewer {
        max-width: 100%; /* Permitir que ocupe todo el ancho disponible */
    }

    #upload-section.collapsed strong {
         max-width: 150px; /* Reducir ancho del nombre de archivo */
    }

    /* Ajustes en layout horizontal para pantallas más pequeñas si es necesario */
    .navigation .nav-page-controls {
        /* Podría necesitar flex-wrap: wrap; aquí si se vuelve muy estrecho */
        gap: var(--spacing-xs); /* Menos gap */
    }

}