/* static/style.css - Final Version with Player and Wave Styles */

:root {
    --background-color: #000000;
    --text-color: #e0e0e0;
    --accent-color: #ff8c00; /* Dark Orange */
    --accent-color-hover: #ffa500; /* Lighter orange on hover */
    --surface-color: #1a1a1a; /* Background for panels and controls */
    --border-color: #333;
    --border-color-hover: #555;
    --error-color: #e74c3c; /* Red for error messages */
    --logo-yellow: #ffcc00; /* Added logo yellow for possible use */
    --logo-red: #cc2200; /* Added logo red for possible use */

    /* NUEVAS PROPIEDADES CSS PERSONALIZADAS PARA LOS COLORES DE LAS ONDAS */
    --speaker-color-active-0: #00FF00; /* Green */
    --speaker-color-active-1: #FF0000; /* Red */
    --speaker-color-active-2: #0000FF; /* Blue */
    --speaker-color-active-3: #FFFF00; /* Yellow */
    --speaker-color-active-4: #FF00FF; /* Fuchsia */
    --speaker-color-active-5: #00FFFF; /* Cyan */
    --speaker-color-active-6: #FFA500; /* Orange */
    --speaker-color-active-7: #800080; /* Purple */
    --speaker-color-other-active: #A9A9A9; /* Dark gray for any other active channel */
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    box-sizing: border-box;
}

.app-wrapper {
    max-width: 800px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.app-header {
    width: 100%;
    display: flex;
    justify-content: center;
}

.logo-img {
    height: 80px;
    margin-bottom: 1rem;
}

main.app-container {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

/* --- Drop Zone Styles --- */
.drop-zone {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 3px dashed var(--border-color);
    border-radius: 10px;
    padding: 3rem;
    box-sizing: border-box;
    width: 100%;
    min-height: 200px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.drop-zone-icon {
    width: 50px;
    height: 50px;
    fill: var(--accent-color);
    margin-bottom: 1rem;
    transition: transform 0.2s ease;
}

.drop-zone:hover .drop-zone-icon {
    transform: scale(1.1);
}

.drop-zone:hover {
    border-color: var(--border-color-hover);
    background-color: var(--surface-color);
}

.drop-zone.drag-over {
    border-color: var(--accent-color);
    background-color: var(--surface-color);
}

.drop-zone.disabled {
    cursor: not-allowed;
    opacity: 0.5;
    background-color: #0d0d0d;
    border-color: #222;
}

.drop-zone p {
    margin: 0;
    pointer-events: none;
    font-size: 1.1rem;
    color: #888;
}

.drop-zone .error-text {
    color: var(--error-color);
    font-weight: bold;
}

.hidden-input {
    display: none;
}

/* --- Information/Results Panel Style --- */
.file-info-view {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 2rem;
    min-height: 150px;
    display: flex;
    flex-direction: column; /* RESTORED: So children stack vertically */
    align-items: center; /* RESTORED: To center content horizontally */
    box-sizing: border-box;
    width: 100%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    position: relative; /* CRUCIAL: To position audio-layout-display absolutely within it */
}

/* Style for "Loading audio..." div */
.no-audio-available {
    font-size: 1.1rem;
    color: #888;
    padding: 1rem;
    text-align: center;
}

/* --- Buttons --- */
.process-button {
    /* No margin-top here */
}

button {
    background-color: var(--accent-color);
    color: #000000;
    border: none;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, transform 0.1s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

button:hover {
    background-color: var(--accent-color-hover);
    transform: translateY(-1px);
}

button:active {
    transform: translateY(0);
}

button:disabled {
    background-color: #555;
    color: #888;
    cursor: not-allowed;
    opacity: 0.7;
    box-shadow: none;
}

/* --- Metadata View Styles --- */
.metadata-grid {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    text-align: left;
    width: 100%;
}

@media (min-width: 600px) {
    .metadata-grid {
        flex-direction: row;
        align-items: flex-start; /* Keeps items aligned at the top, allowing individual stretching */
        gap: 1.5rem;
    }
}

/* New container for grouping metadata-art and audio-layout-display */
.metadata-left {
    flex-shrink: 0;
    display: flex;
    flex-direction: column; /* Stack album art and audio layout vertically */
    justify-content: flex-start; /* Align them to the start vertically */
    align-items: center; /* Center their content horizontally */
    width: 180px; /* Fixed width, adjust as needed */
    position: relative; /* KEY! For audio-layout-display to position correctly */
    flex-grow: 1; /* Allow metadata-left to grow to match metadata-info height if metadata-info is taller */

    /* KEY CHANGE: Make metadata-left stretch to the height of its flex container */
    @media (min-width: 600px) {
        align-self: stretch; /* Stretches metadata-left to fill the available height in the row */
    }
}

.metadata-art {
    width: 180px;
    height: 180px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    margin-bottom: 1rem; /* Space between album art and visualizer */
    position: relative; /* Can be useful for pseudo-absolute elements inside */
}

/* Ensure the actual image within .metadata-art respects its size */
.album-art { /* This is the img tag */
    width: 100%; /* Make image fill its parent div */
    height: 100%; /* Make image fill its parent div */
    object-fit: cover; /* Cover the area, cropping if necessary */
    border-radius: 8px; /* Match parent's border-radius if desired */
}


.no-art {
    width: 180px;
    height: 180px;
    background-color: #111;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #888;
    font-size: 0.9rem;
}

/* Styles for the main metadata/information container */
.metadata-info {
    flex-grow: 1;
    width: 100%;
    position: relative; /* Needed for absolute canvas to position relative to this */
    overflow: hidden; /* Ensures wave doesn't overflow rounded borders */
    border-radius: 10px;
    background-color: #282c34; /* Main background for this section */
    min-height: 200px; /* Ensures minimum height for canvas */
    display: flex; /* Maintains flex layout, although content is inside another div */
    flex-direction: column;
}

/* New class for the content layer that overlays */
.metadata-content-overlay {
    position: relative; /* To ensure its z-index works */
    z-index: 2; /* Higher than canvas to be on top */
    padding: 20px; /* Revert to normal padding */
    background-color: rgba(0, 0, 0, 0.1); /* Very transparent background to see the wave */
    height: 100%; /* Occupies full available height within metadata-info */
    display: flex; /* So internal content follows a flow */
    flex-direction: column;
    align-items: flex-start; /* Aligns elements to the left by default */
    flex-grow: 1; /* Allows it to grow and shrink within metadata-info */
}

/* Properties to prevent text overflow and maintain stable height */
/* Added for h4 title as well */
.metadata-info h4,
.metadata-info p,
.metadata-info .album-info,
.metadata-info .original-filename {
    white-space: nowrap;        /* Prevents text from wrapping */
    overflow: hidden;           /* Hides overflowing text */
    text-overflow: ellipsis;    /* Shows ellipses for hidden text */
    max-width: 100%;            /* Ensures no horizontal overflow */
}
.tech-info span { /* Applied individually to spans within tech-info */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.2rem 0.5rem; /* Add padding for more internal space */
    box-sizing: border-box; /* Ensures padding does not overflow width */
}


.metadata-info h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1.8rem;
    color: var(--accent-color);
    line-height: 1.2;
}

.metadata-info p {
    margin: 0 0 0.5rem 0;
    color: var(--text-color);
}

.metadata-info .album-info {
    font-size: 1rem;
    color: #aaa;
    margin-bottom: 1.5rem;
}

.metadata-info hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 2rem 0;
}

.metadata-info .original-filename {
    align-self: flex-start; /* Keep left alignment for text */
}

.tech-info {
    display: grid;
    /* Force 2 equal-width columns */
    grid-template-columns: 1fr 1fr;
    /* Maintain gap between rows and increase column gap */
    gap: 0.8rem 3rem; /* row-gap column-gap */
    font-size: 0.9rem;
    color: #bbb;
    margin-bottom: 2rem;
}

@media (max-width: 320px) { /* Single column on very small screens */
    .tech-info {
        grid-template-columns: 1fr;
    }
}


/* --- Custom Audio Player Styles --- */
.audio-player {
    display: none; /* Hide native <audio> element */
}

.custom-audio-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 1rem;
    padding: 5px; /* Thinner: Reduced padding */
    background-color: transparent; /* No background */
    box-shadow: none; /* No shadow */
    border: none; /* No border */
    border-radius: 0; /* No rounded borders */
    width: 100%;
    box-sizing: border-box;

    /* To align controls group to the right */
    margin-left: auto; /* Pushes the group to the right within .metadata-info */
    justify-content: flex-end; /* Ensures elements stick to the end */
}

.custom-audio-controls .play-pause-button {
    padding: 10px;
    min-width: unset;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    box-shadow: none;
    margin: 0;
    flex-shrink: 0;
}

.custom-audio-controls .play-pause-button .control-icon {
    width: 28px;
    height: 28px;
    transition: transform 0.1s ease-in-out;
}

.custom-audio-controls .play-pause-button:hover .control-icon {
    transform: scale(1.1);
}

/* --- PROGRESS BAR WITH LOGO STROKE STYLE --- */
.progress-slider, .volume-slider {
    flex-grow: 1; /* So the bar takes up remaining space */
    flex-shrink: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px; /* Thinner */
    outline: none;
    opacity: 1;
    transition: background-color .2s;
    border-radius: 3px;

    /* KEY CHANGES: LOGO STROKE SIMULATION */
    background: transparent; /* Transparent background to see the "stroke" */
    border: 2px solid var(--accent-color); /* STROKE SIMULATION (border) in orange */
    box-sizing: border-box; /* Ensures border does not increase size */
    margin: 0; /* Remove margins for flexbox */
}

.progress-slider:hover, .volume-slider:hover {
    background: transparent; /* Remains transparent, the border highlights */
    border-color: var(--accent-color-hover); /* The "stroke" lightens on hover */
}

/* Styles for the slider thumb */
.progress-slider::-webkit-slider-thumb,
.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text-color); /* Soft white color for thumb */
    cursor: grab;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    transition: background-color 0.2s, transform 0.1s;
}

.progress-slider::-webkit-slider-thumb:hover,
.volume-slider::-webkit-slider-thumb:hover {
    background: #ffffff;
    transform: scale(1.1);
    cursor: grabbing;
}

/* Firefox */
.progress-slider::-moz-range-thumb,
.volume-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text-color); /* Soft white color for thumb */
    cursor: grab;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    transition: background-color 0.2s, transform 0.1s;
    border: none;
}

.progress-slider::-moz-range-thumb:hover,
.volume-slider::-moz-moz-range-thumb {
    background: #ffffff;
    transform: scale(1.1);
    cursor: grabbing;
}

/* --- PROGRESS BAR FILL (TRACK FILLED) --- */
/* For Webkit browsers (Chrome, Safari, Edge) */
.progress-slider::-webkit-slider-runnable-track {
    background-color: transparent; /* Transparent base track for the "stroke" */
    border: none;
    border-radius: 3px;
}

.progress-slider::-webkit-fill-progress { /* Pseudo-class for fill in Webkit */
    background-color: var(--accent-color); /* Progress is orange */
    border-radius: 3px;
    height: 6px; /* Ensure height */
}

/* For Firefox */
.progress-slider::-moz-range-progress {
    background-color: var(--accent-color); /* Filled progress is orange */
    border-radius: 3px;
    height: 6px;
}

/* Current time and total duration */
.current-time, .total-duration {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.9rem;
    color: #bbb;
    flex-shrink: 0;
    min-width: 45px;
    text-align: right;
}

.total-duration {
    /* This is where the time and bar group aligns to the right, leaving the button to the left */
    margin-left: auto;
}

/* --- Audio Waveform Canvas Styles --- */
.audio-waveform-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* To be behind content, but in front of .metadata-info background */
    opacity: 0.3; /* Opacity for background effect */
    object-fit: cover;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.5); /* Own background for canvas */
    border: none;
    margin-top: 0;
}

/* Styles for general error messages */
.error-text {
    color: var(--error-color);
    font-weight: bold;
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--error-color);
    border-radius: 5px;
    background-color: rgba(231, 76, 60, 0.1);
}

.error-text h4 {
    margin: 0 0 0.5rem 0;
    color: var(--error-color);
}

/* --- Audio Layout (Speaker and Person Icons) Styles --- */
.audio-layout-display {
    position: absolute; /* Absolute positioning relative to metadata-left */
    bottom: 0px; /* Adhered to the bottom of metadata-left */
    left: 5px; /* Aligned to the left with a small padding */
    right: unset; /* IMPORTANT: Remove right property to allow left alignment */
    transform: none; /* REMOVED: No longer needed for centering */
    width: 70px; /* Adjusted width for smaller area */
    height: 70px; /* Adjusted height for smaller area */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
    z-index: 15; /* Ensures it's above other elements and the canvas */
}

/* New color classes for speaker icons */
.speaker-color-active-0 { color: var(--speaker-color-active-0); } /* Uses CSS variable */
.speaker-color-active-1 { color: var(--speaker-color-active-1); } /* Uses CSS variable */
.speaker-color-active-2 { color: var(--speaker-color-active-2); } /* Uses CSS variable */
.speaker-color-active-3 { color: var(--speaker-color-active-3); } /* Uses CSS variable */
.speaker-color-active-4 { color: var(--speaker-color-active-4); } /* Uses CSS variable */
.speaker-color-active-5 { color: var(--speaker-color-active-5); } /* Uses CSS variable */
.speaker-color-active-6 { color: var(--speaker-color-active-6); } /* Uses CSS variable */
.speaker-color-active-7 { color: var(--speaker-color-active-7); } /* Uses CSS variable */
.speaker-color-other { color: var(--speaker-color-other-active); } /* Uses CSS variable */
.speaker-color-inactive { color: transparent; } /* Transparent when inactive */


.user-icon-container {
    position: absolute;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 18px; /* Adjusted for smaller size */
    height: 18px; /* Adjusted for smaller size */
}

.user-center-icon {
    font-size: 0.8rem; /* Adjusted for smaller size */
    color: var(--text-color);
    opacity: 0.5;
}

.speaker-icon {
    position: absolute;
    font-size: 0.4rem; /* Adjusted for smaller size */
    transition: color 0.3s ease-in-out;
    z-index: 5;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    opacity: 0.5;
}

/* Specific positioning for each channel (adjust distances as best seen) */
/* Adjusted top/left/right/bottom values proportionally for smaller container */
.speaker-front-left {
    top: 4px; /* Adjusted from 5px (approx 0.7 scale) */
    left: 4px; /* Adjusted from 5px (approx 0.7 scale) */
    transform: rotate(45deg);
}

.speaker-front-right {
    top: 4px; /* Adjusted from 5px (approx 0.7 scale) */
    right: 4px; /* Adjusted from 5px (approx 0.7 scale) */
    transform: rotate(135deg);
}

.speaker-rear-left {
    bottom: 4px; /* Adjusted from 5px (approx 0.7 scale) */
    left: 4px; /* Adjusted from 5px (approx 0.7 scale) */
    transform: rotate(-45deg);
}

.speaker-rear-right {
    bottom: 4px; /* Adjusted from 5px (approx 0.7 scale) */
    right: 4px; /* Adjusted from 5px (approx 0.7 scale) */
    transform: rotate(-135deg);
}

.speaker-center {
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
}

.speaker-subwoofer {
    top: 25%;
    left: 75%;
    transform: translate(-50%, -50%) rotate(90deg);
    font-size: 0.5rem; /* Kept slightly larger as it's a subwoofer */
    opacity: 0.8;
}

.speaker-side-left {
    top: 50%;
    left: 0px;
    transform: translateY(-50%) rotate(0deg);
}

.speaker-side-right {
    top: 50%;
    right: 0px;
    transform: translateY(-50%) rotate(180deg);
}

/* Styles for album art container on small screens */
@media (max-width: 600px) {
    .metadata-art {
        flex-direction: column;
        align-items: center;
    }

    .audio-layout-display {
        /* On small screens, switch to relative positioning to stack */
        position: relative;
        bottom: unset;
        right: unset; /* Reset right */
        left: unset; /* Reset left */
        transform: none; /* Remove absolute centering transform */
        margin-top: 1.5rem; /* Additional space when stacked */
    }
    /* Adjustments for content overlay padding when icons move */
    .metadata-content-overlay {
        padding: 20px; /* Restore normal padding on small screens */
    }
    .metadata-left {
        width: 100%; /* Take full width on small screens */
    }
}


.spinner {
  border: 4px solid rgba(255, 140, 0, 0.15); /* borde tenue naranja claro */
  border-left-color: var(--accent-color);   /* borde izquierdo naranja fuerte (color activo) */
  border-radius: 50%;
  width: 48px;
  height: 48px;
  animation: spin 1s linear infinite;
  margin: 2rem auto; /* separacion y centrado */
  box-shadow: 0 0 8px var(--accent-color);
}

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

.spinner-small {
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: spin 1s linear infinite;
    flex-shrink: 0; /* Evita que el spinner se encoja */
}

.report-generation-container {
    display: flex;
    flex-direction: column; /* Apila los elementos verticalmente */
    align-items: flex-start; /* Alinea los elementos a la izquierda */
    gap: 0.8rem; /* Ajusta el espacio entre el indicador y el botón */
    margin-top: auto;
    padding-top: 1.5rem;
}

.progress-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #bbb;
    font-size: 0.9rem;
    margin-left: 0; /* Asegura que el indicador no tenga margen a la izquierda */
}

.progress-message {
    /* Estilos para el texto del progreso */
}