/* Animaciones de entrada */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleUp {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(-100px);
    }
    50% {
        opacity: 1;
        transform: scale(1.1) translateY(25px);
    }
    100% {
        transform: scale(1) translateY(0);
    }
}

/* Estilos con animaciones */
.opendrive-player-container {
    width: 100%;
    margin: 0 auto;
    font-family: Arial, sans-serif;
    display: contents;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    animation: fadeInUp 0.6s ease-out;
}

.opendrive-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 2px solid #ddd;
    position: relative;
    animation: fadeInUp 0.6s ease-out;
}

.opendrive-folder-title {
    font-size: 1.2em;
    margin: 0;
    color: #333;
    flex: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-align: left; /* Alineado a la izquierda */
    animation: fadeInUp 0.6s ease-out;
}

.opendrive-controls-right {
    display: flex;
    align-items: center;
    position: relative;
    animation: fadeInUp 0.6s ease-out;
}

.opendrive-button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    margin-left: 10px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    animation: scaleUp 0.6s ease-out;
}

.opendrive-button:hover {
    background-color: #45a049;
    transform: scale(1.05);
}

.opendrive-options,
.opendrive-volume {
    position: relative;
    display: inline-block;
}

.opendrive-options-menu,
.opendrive-volume-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #fff;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    padding: 10px;
    border-radius: 4px;
    z-index: 1000;
    animation: fadeInUp 0.6s ease-out;
}

.opendrive-volume-slider {
    width: 150px;
    margin-right: 10px;
}

.opendrive-column-headers {
    display: flex;
    justify-content: space-between;
    align-items: center;
	height: 30px;
    font-weight: bold;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    animation: fadeInUp 0.6s ease-out;
}

.opendrive-file-header {
    flex: 1;
    text-align: left;
}

.opendrive-genre-header,
.opendrive-bpm-header,
.opendrive-key-header {
    width: 80px;
    box-sizing: border-box;
    flex: 0 0 80px;
    margin-left: 10px;
    text-align: center;
}

.opendrive-download-header {
    width: 30px;
    box-sizing: border-box;
    flex: 0 0 30px;
    margin-left: 10px;
}

.opendrive-files-container ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

.opendrive-files-container li {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
    transition: background-color 0.3s ease;
    animation: fadeInUp 0.6s ease-out;
}

.opendrive-files-container li:hover {
    background-color: #f1f1f1;
}

.opendrive-file-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-align: left; /* Alinea el contenido de los archivos a la izquierda */
}

.opendrive-audio-file {
    text-decoration: none;
    color: #333;
    font-size: 0.95em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: calc(100% - 250px); /* Reservar espacio para las columnas y botón */
    text-align: left;
}

.opendrive-genre,
.opendrive-bpm,
.opendrive-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 2px 8px;
    margin-left: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.7em;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    font-variant-numeric: tabular-nums;
    width: 80px;
    box-sizing: border-box;
    flex: 0 0 80px;
}

.opendrive-genre { color: #9a9a9b; }
.opendrive-bpm   { color: #ff9b5c; }
.opendrive-key   { color: #3d88fb; }

/* Fecha compacta: sin burbuja, texto centrado en la columna y un pelín de
   separación del icono de descarga para que no quede pegada. */
.opendrive-date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7em;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: rgba(223, 217, 241, 0.55);
    width: 60px;
    margin-right: 10px;
    box-sizing: border-box;
    flex: 0 0 60px;
}

/* Estructura tipo chip: label "BPM"/"Key" muted + valor coloreado, idéntico
   al de .opendrive-track-chip__k / __v del player. El color del valor lo
   hereda del padre (.opendrive-bpm / .opendrive-key) para que las reglas
   data-camelot existentes sigan funcionando sin duplicar selectores. */
.opendrive-bpm__k,
.opendrive-key__k {
    color: rgba(223, 217, 241, 0.55);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.opendrive-bpm__v, .opendrive-key__v {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Burbuja de "no analizado" para archivos sin entrada en TrackIntel.
   Mantiene el ancho fijo del 80px, pero sin borde ni bg para que se note
   que es un placeholder y no un dato real. */
.opendrive-bpm.opendrive-no-data,
.opendrive-key.opendrive-no-data {
    background: transparent;
    border-color: transparent;
    color: rgba(223, 217, 241, 0.40);
    font-style: italic;
    font-weight: 500;
    font-size: 0.6em;
    text-transform: lowercase;
}

.opendrive-audio-player {
    display: none;
    height: 0;
    /* position: relative para que la honeycomb (position:absolute con
       top/left:50%) se centre respecto al player completo, no a .waveform. */
    position: relative;
    overflow: hidden;
    transition: height 0.3s ease;
    margin-top: 10px;
    width: 100%;
    animation: fadeInUp 0.6s ease-out;
}
/* Sólo reservamos 142px (waveform 80 + strip + chips de intel) cuando el
   archivo tiene datos en TrackIntel. Sin data-intel no hay strip ni chips,
   así que el player se queda en los 80px de la waveform y no dejamos hueco
   muerto. display:none ignora la min-height en cualquier caso. */
.opendrive-audio-player[data-intel] {
    min-height: 142px;
}

.opendrive-audio-player .waveform {
    position: relative;
    width: 100%;
    height: 80px;
}

.opendrive-track-markers {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 2;
}

.opendrive-track-marker {
    position: absolute;
    top: 0;
    bottom: 0;
}

.opendrive-track-marker--downbeat {
    width: 1px;
    background: rgba(255, 255, 255, 0.40);
    z-index: 3;
}

/* Drops sobre la wave: cue points dashed naranja estilo Rekordbox. */
.opendrive-track-marker--drop {
    width: 0;
    border-left: 1px dashed #ff9b5c;
    z-index: 4;
}

/* Strip semi-incrustada en la parte inferior de la wave. Cada segmento
   es una "burbuja" sólida del color de su sección con texto centrado. */
.opendrive-track-strip {
    position: relative;
    width: 100%;
    height: 16px;
    margin-top: 4px;
    pointer-events: none;
}

.opendrive-track-strip__seg {
    position: absolute;
    top: 1px;
    bottom: 1px;
    padding: 0 6px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px) saturate(0.85);
    -webkit-backdrop-filter: blur(4px) saturate(0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    pointer-events: auto;
    transition: filter 0.15s ease, transform 0.15s ease;
}

.opendrive-track-strip__seg:hover {
    filter: brightness(1.18) saturate(1.1);
    transform: scaleY(1.08);
}

.opendrive-track-info {
    width: 100%;
    padding: 6px 4px 4px;
    margin-bottom: 10px;
    color: #dfd9f1;
    font-size: 11px;
    line-height: 1.4;
}

.opendrive-track-info__compact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.opendrive-track-info__title {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 10px;
    background: linear-gradient(135deg,
        rgba(60, 18, 212, 0.45) 0%,
        rgba(199, 146, 234, 0.30) 50%,
        rgba(61, 136, 251, 0.40) 100%);
    border: 1px solid rgba(199, 146, 234, 0.35);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(199, 146, 234, 0.15);
}

.opendrive-track-info__title i {
    color: #c792ea;
    font-size: 11px;
    text-shadow: 0 0 6px rgba(199, 146, 234, 0.6);
}

.opendrive-track-info__extra {
    margin-top: 6px;
    padding-top: 6px;
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-top: 1px dashed rgba(255, 255, 255, 0.10);
    border-bottom: 1px dashed rgba(255, 255, 255, 0.10);
}

.opendrive-track-info__row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.opendrive-track-info__match {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5px;
    line-height: 1.4;
    opacity: 0.75;
}

.opendrive-track-info__match-label {
    color: rgba(255, 255, 255, 0.40);
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
    flex-shrink: 0;
}

.opendrive-track-info__match-n {
    color: rgba(255, 255, 255, 0.30);
    font-weight: 400;
}

.opendrive-track-info__match-year {
    color: #f0c674;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.opendrive-track-info__match-list {
    flex: 1;
    min-width: 0;
    color: rgba(223, 217, 241, 0.75);
    font-size: 9px;
    font-style: italic;
}

.opendrive-track-info__match-t {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    font-style: normal;
}

.opendrive-track-info__match-sep {
    color: rgba(255, 255, 255, 0.25);
}

.opendrive-track-info__match-a {
    color: rgba(199, 146, 234, 0.75);
}

.opendrive-track-info__match-dot {
    color: rgba(255, 255, 255, 0.15);
    font-weight: 500;
    padding: 0 2px;
}

.opendrive-track-info__match-count {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78em;
    font-weight: 600;
    margin-left: 2px;
}

.opendrive-track-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap;
    line-height: 1.3;
}

.opendrive-track-chip__k {
    color: rgba(223, 217, 241, 0.55);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.opendrive-track-chip__v {
    color: #fff;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.opendrive-track-chip--bpm      .opendrive-track-chip__v { color: rgb(255, 155, 92); }
.opendrive-track-chip--genre    .opendrive-track-chip__v { color: #4caf50; }
.opendrive-track-chip--sub      .opendrive-track-chip__v { color: #6dd17a; }
.opendrive-track-chip--years    .opendrive-track-chip__v { color: #f0c674; }
.opendrive-track-chip--energy   .opendrive-track-chip__v { color: #ffd166; }
.opendrive-track-chip--mood     .opendrive-track-chip__v { color: #c792ea; }
/* Key sin data-camelot: color por defecto (reemplazado por la regla data-camelot
   más abajo cuando la tonalidad es válida 1A-12B). */
.opendrive-track-chip--key      .opendrive-track-chip__v { color: #ff9b5c; }

/* ── Camelot Wheel: mapeo de tonalidad a color ───────────────────────────────
   - Player chip (.opendrive-track-chip--key): el valor toma el color de la tonalidad.
   - Listado (.opendrive-key): el valor toma el color de la tonalidad y la pastilla
     gana un "piquito" lateral derecho del mismo color (box-shadow inset que
     respeta el border-radius para integrarse con la forma del pill).
   Los pares (XA, XB) comparten color porque son tonalidades relativas; lo
   exponemos en --camelot para reutilizarlo en color de texto y piquito. */
.opendrive-key[data-camelot="1A"],  .opendrive-key[data-camelot="1B"],
.opendrive-track-chip--key[data-camelot="1A"],
.opendrive-track-chip--key[data-camelot="1B"]    { --camelot: #2DD178; }
.opendrive-key[data-camelot="2A"],  .opendrive-key[data-camelot="2B"],
.opendrive-track-chip--key[data-camelot="2A"],
.opendrive-track-chip--key[data-camelot="2B"]    { --camelot: #17C7AC; }
.opendrive-key[data-camelot="3A"],  .opendrive-key[data-camelot="3B"],
.opendrive-track-chip--key[data-camelot="3A"],
.opendrive-track-chip--key[data-camelot="3B"]    { --camelot: #00B5DA; }
.opendrive-key[data-camelot="4A"],  .opendrive-key[data-camelot="4B"],
.opendrive-track-chip--key[data-camelot="4A"],
.opendrive-track-chip--key[data-camelot="4B"]    { --camelot: #2B92E4; }
.opendrive-key[data-camelot="5A"],  .opendrive-key[data-camelot="5B"],
.opendrive-track-chip--key[data-camelot="5A"],
.opendrive-track-chip--key[data-camelot="5B"]    { --camelot: #6E70D7; }
.opendrive-key[data-camelot="6A"],  .opendrive-key[data-camelot="6B"],
.opendrive-track-chip--key[data-camelot="6A"],
.opendrive-track-chip--key[data-camelot="6B"]    { --camelot: #9559C3; }
.opendrive-key[data-camelot="7A"],  .opendrive-key[data-camelot="7B"],
.opendrive-track-chip--key[data-camelot="7A"],
.opendrive-track-chip--key[data-camelot="7B"]    { --camelot: #BB52B0; }
.opendrive-key[data-camelot="8A"],  .opendrive-key[data-camelot="8B"],
.opendrive-track-chip--key[data-camelot="8A"],
.opendrive-track-chip--key[data-camelot="8B"]    { --camelot: #DD5392; }
.opendrive-key[data-camelot="9A"],  .opendrive-key[data-camelot="9B"],
.opendrive-track-chip--key[data-camelot="9A"],
.opendrive-track-chip--key[data-camelot="9B"]    { --camelot: #F0656F; }
.opendrive-key[data-camelot="10A"], .opendrive-key[data-camelot="10B"],
.opendrive-track-chip--key[data-camelot="10A"],
.opendrive-track-chip--key[data-camelot="10B"]   { --camelot: #ED7C30; }
.opendrive-key[data-camelot="11A"], .opendrive-key[data-camelot="11B"],
.opendrive-track-chip--key[data-camelot="11A"],
.opendrive-track-chip--key[data-camelot="11B"]   { --camelot: #DDA500; }
.opendrive-key[data-camelot="12A"], .opendrive-key[data-camelot="12B"],
.opendrive-track-chip--key[data-camelot="12A"],
.opendrive-track-chip--key[data-camelot="12B"]   { --camelot: #80C40A; }

/* Listado: valor coloreado + piquito en forma de "D" en el lateral derecho.
   Usamos un ::after absoluto con border-radius solo en las esquinas
   derechas: lateral izquierdo plano (vertical) y lateral derecho curvo
   siguiendo la forma de la pastilla. */
.opendrive-key[data-camelot] {
    position: relative;
    color: var(--camelot);
}

.opendrive-key[data-camelot]::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 10px;
    background-color: var(--camelot);
    border-radius: 0 10px 10px 0;
    pointer-events: none;
}

/* Player chip: solo el valor se colorea */
.opendrive-track-chip--key[data-camelot] .opendrive-track-chip__v {
    color: var(--camelot);
}

.opendrive-track-info__toggle {
    margin-left: auto;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #dfd9f1;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: transform 0.2s ease, background 0.2s ease;
}

.opendrive-track-info__toggle:hover {
    background: rgba(255, 255, 255, 0.08);
}

.opendrive-track-info__toggle.is-open {
    transform: rotate(180deg);
}

.opendrive-download-button {
    background-color: #2196F3;
    color: white;
    padding: 5px 10px;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9em;
    transition: background-color 0.3s ease, transform 0.3s ease;
    cursor: pointer;
    align-self: flex-start; /* Alineado a la izquierda */
    margin-left: 10px;
    width: 30px;
    text-align: center;
    animation: scaleUp 0.6s ease-out;
}

.opendrive-download-button:hover {
    background-color: #1976D2;
    transform: scale(1.05);
}

.opendrive-loading-text {
    text-align: center;
    color: #777;
    font-style: italic;
    animation: fadeInUp 0.6s ease-out;
}

/* Estilos para carpetas */
.opendrive-folder-info {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left; /* Asegura que todo el contenido esté alineado a la izquierda */
    animation: fadeInUp 0.6s ease-out;
}

.opendrive-folder-info a {
    text-decoration: none;
    color: #4CAF50;
    font-weight: bold;
    font-size: 1em;
}

.opendrive-folder-info a:hover {
    color: #45a049;
}

/* Estilos para el botón de retroceso */
#opendrive-back-button {
    background-color: #FF9800;
    margin-right: 10px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    animation: scaleUp 0.6s ease-out;
}

#opendrive-back-button:hover {
    background-color: #F57C00;
    transform: scale(1.05);
}

/* Estilos para los breadcrumbs */
.opendrive-breadcrumbs {
    font-size: 0.9em;
    color: #555;
    text-align: center;
    flex-grow: 0 !important;
    margin: 0;
    animation: fadeInUp 0.6s ease-out;
}

.opendrive-breadcrumbs a {
    text-decoration: none;
    color: #2196F3;
}

.opendrive-breadcrumbs a:hover {
    text-decoration: underline;
}

/* Estilos para el botón "Mostrar más contenido" */
.opendrive-show-more {
    text-align: center;
    margin-top: 20px;
}

.show-more-button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    animation: bounceIn 0.6s ease-out;
}

.show-more-button:hover {
    background-color: #45a049;
    transform: scale(1.05);
}

.the-content {
    max-width: 1215px;
    animation: fadeInUp 0.6s ease-out;
}

.main_tab__content {
    padding: 10px 0;
    animation: fadeInUp 0.6s ease-out;
}

.opendrive-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 100%;
    animation: fadeInUp 0.6s ease-out;
}

.opendrive-folder-date,
.opendrive-folder-name {
    width: auto;
}

.opendrive-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.opendrive-breadcrumbs {
    text-align: center;
    flex-grow: 0;
    margin-left: 20px;
    margin-right: 20px;
    transition: opacity 0.6s ease-out; /* Transición suave para la aparición */
}

.opendrive-controls-right {
    display: flex;
    align-items: center;
    position: relative;
    margin-left: auto; /* Empuja este div hacia la derecha */
    animation: fadeInUp 0.6s ease-out;
}

.opendrive-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.opendrive-breadcrumbs {
    text-align: center;
    flex-grow: 0;
    margin-left: 20px;
    margin-right: 20px;
    transition: opacity 0.6s ease-out; /* Transición suave para la aparición */
}

.opendrive-controls-right {
    display: flex;
    align-items: center;
    position: relative;
    margin-left: auto; /* Empuja este div hacia la derecha */
    animation: fadeInUp 0.6s ease-out;
}


.opendrive-file-info {
    display: flex;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    align-items: center;
}
.opendrive-file-info {
    display: flex;
    align-items: center;
}

.opendrive-file-info .opendrive-audio-file {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    text-align: left;
    min-width: 0; /* permite el ellipsis dentro del flex item */
}

/* Cover arras a la izquierda, sin padding ni margen propios. La separación
   con el título la da el `gap: 10px` del flex padre. `align-self: stretch`
   hace que la portada ocupe el 100% del alto del bloque del título (las dos
   líneas), y `aspect-ratio: 1` la mantiene cuadrada. */
.opendrive-file-info .opendrive-file-thumb {
    margin: 0;
    align-self: stretch;
    width: auto;
    height: auto;
    aspect-ratio: 1 / 1;
}

/* Título en dos líneas: principal (title con paréntesis intactos, peso fuerte)
   y subtítulo (artist + chips de keywords). El formato (mp3/m4a…) vive en
   data-format del wrapper y no se renderiza visualmente. */
.opendrive-file-title {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
    font-size: 0.95em;
}
.opendrive-file-title__main {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}
.opendrive-file-title__sub {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    margin-top: 2px;
    font-size: 0.78em;
    font-weight: 400;
    opacity: 0.5;
}
.opendrive-file-title__artist {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.opendrive-file-title__sep {
    flex-shrink: 0;
    width: 1px;
    height: 0.9em;
    background: currentColor;
    opacity: 0.35;
}

/* Chip discreto y compacto reutilizable para el subtítulo: keywords detectados
   en el nombre (remix, intro, outro, hype, live, mashup, edit, extended…).
   `.opendrive-file-format` se conserva por compatibilidad con código viejo
   aunque ya no lo emitimos en el HTML. Estilo BPM/key pero un pelín más
   apretado. */
.opendrive-file-format,
.opendrive-file-keyword {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    font-size: 0.8em;
    font-weight: 600;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    opacity: 0.9;
}

.opendrive-file-info .opendrive-genre {
    min-width: 70px;
    max-width: 110px;
}

.opendrive-file-info .opendrive-bpm {
    min-width: 50px;
}

.opendrive-file-info .opendrive-key {
    min-width: 44px;
}

.opendrive-file-info .opendrive-date {
    min-width: 50px;
    margin-left: 0;
}

.opendrive-file-info .opendrive-download-button {
    width: 30px;
    text-align: center;
    margin-left: 20px;
}

.opendrive-files-container ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

.opendrive-controls-right {
    margin-right: 20px;
}

.opendrive-files-container li {
    transition: background-color 0.3s ease;
}

.opendrive-files-container li:hover {
    background-color: #f1f1f1;
}
.opendrive-column-headers {
    padding: 10px;
}
.opendrive-files-container{
    /* sin padding-left para que la cover quede arras a la izquierda;
       conservamos el padding-right para no pegar los chips/botones al borde. */
    padding: 0 10px 3px 0;
}

.opendrive-show-more {
    text-align: center;
    padding: 20px 0 40px 0;
}

.opendrive-player-container {
    width: auto;
    margin: 0 auto;
    font-family: Arial, sans-serif;
    display: block;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    animation: fadeInUp 0.6s ease-out;
}
.opendrive-files-container li {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #ddd;
    transition: background-color 0.3s ease;
    animation: fadeInUp 0.6s ease-out;
}

.opendrive-file-info .opendrive-audio-file, .opendrive-folder-info {
    font-weight: 700;
}
    
@media (min-width: 1024px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1512px;
    }
}

.opendrive-files-container a {
    color: #ffffff;
}


/* ── Folder row layout ───────────────────────────────────────────────────
   Renderizado por toolsdj_drop_render_folder_*() en
   inc/toolsdj-drop/frontend/render-opendrive-files.php. */

.opendrive-folder-date,
.opendrive-folder-country,
.opendrive-folder-name {
    padding: 0 10px;
}

.opendrive-folder-country,
.opendrive-folder-name {
    border-left: 1px solid #ccc;
}

.opendrive-folder-country--no-date {
    border-left: none;
}

.opendrive-folder-date-sep {
    padding: 4px;
}

/* El nombre ocupa el espacio restante del flex padre y truncamos con
   ellipsis. `min-width: 0` permite que el flex item se encoja por debajo
   del ancho de su contenido — sin esto el ellipsis no dispararía. */
.opendrive-folder-name {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
}

.opendrive-folder-name-text {
    display: block;
    padding: 0 0 0 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.opendrive-folder-date-label {
    display: inline-block;
    vertical-align: middle;
    width: 140px;
    margin: 0 8px 0 0;
    padding: 5px 20px;
    border-radius: 3px;
    background-color: #0b0b29;
    line-height: 1;
    font-size: small;
    text-align: center;
    transition: background-color 0.3s ease;
    color: #fff !important;
}

.opendrive-folder-weekday-wrap {
    text-align: center;
    vertical-align: middle;
}

.opendrive-folder-weekday {
    display: inline-block;
    width: 100px;
    margin: 0 8px 0 0;
    padding: 4px 8px;
    border-radius: 3px;
    line-height: 1;
    transition: background-color 0.3s ease;
    color: #fff !important;
}

.opendrive-folder-weekday--odd {
    background-color: #6b40f540;
}

.opendrive-folder-weekday--even {
    background-color: #c575fb40;
}

.opendrive-folder-flag {
    display: block;
    width: 20px !important;
    text-align: center;
}

.opendrive-folder-badge-wrap {
    position: absolute;
    right: 20px;
}

/* ── File thumbnail (cover R2 + fallback fa-music) ───────────────────────
   Renderizado por toolsdj_drop_render_file_thumb() en
   inc/toolsdj-drop/frontend/render-opendrive-files.php.
   La portada se carga lazy desde R2; si 404, onerror la elimina del DOM
   y queda visible el <i> base. El <i> sigue dentro del wrapper para que
   player.js pueda hacer swap fa-music ↔ fa-pause/fa-play. */

.opendrive-file-thumb {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    vertical-align: middle;
    flex-shrink: 0;
}

.opendrive-file-thumb__icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e6564e;
    font-size: 18px;
    cursor: pointer;
    z-index: 1;
}

.opendrive-file-thumb__cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 3px;
    cursor: pointer;
    z-index: 2;
}

/* Reproducción activa: el icono cambia a fa-pause/fa-play; lo subimos por
   encima de la portada con fondo oscuro semitransparente para que se vea. */
.opendrive-file-thumb__icon.fa-pause,
.opendrive-file-thumb__icon.fa-play {
    z-index: 3;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border-radius: 3px;
    font-size: 14px;
}

/* Fondo Principal (#1D1D3E) */


.opendrive-options-menu,
.opendrive-volume-menu {
    background-color: #1D1D3E;
}

/* Fondo Más Oscuro (#0b0b29) */
.opendrive-controls {
    border-bottom: 2px solid #0b0b29;
}

.opendrive-files-container li {
    border-bottom: 1px solid #0b0b29;
}

.opendrive-files-container li:hover {
    background-color: #0b0b29;
}

.opendrive-column-headers {
    border-bottom: 1px solid #0b0b29;
}

/* Color de Texto (#DFD9F1) */
.opendrive-folder-title,
.opendrive-column-headers,
.opendrive-file-header,
.opendrive-audio-file,
.opendrive-breadcrumbs,
.show-more-button {
    color: #DFD9F1;
}

/* Color de Botones (#3c12d4) */
.opendrive-button,
.opendrive-download-button,
.show-more-button {
    background-color: #3c12d4;
    color: #DFD9F1;
}

/* Hover para Color de Botones (#280d92) */
.opendrive-button:hover,
.opendrive-download-button:hover,
.show-more-button:hover {
    background-color: #280d92;
}

/* Color Alternativo (#3d88fb) */
.opendrive-folder-info a,
.opendrive-breadcrumbs a {
    color: #3d88fb;
}

/* Hover para Color Alternativo (#ff9b5c) */
.opendrive-folder-info a:hover {
    color: #ff9b5c;
}

/* Color Alternativo (#e6564e) — sólo el back-button, no la key */
#opendrive-back-button {
    background-color: #e6564e;
    color: #DFD9F1;
}

/* Hover para Color Alternativo (#b4453c) */
#opendrive-back-button:hover {
    background-color: #b4453c;
}
.opendrive-audio-file .fas {
    transition: all 0.2s ease;
}

.opendrive-audio-file .fas.fa-pause, .opendrive-audio-file .fas.fa-play {
    color: #4CAF50 !important;
}

/* Estilos para LOW-QL (archivo corrupto o de mala calidad) */
.opendrive-lowql {
    position: relative;
    display: inline-block;
    cursor: help;
    font-size: 1.2em;
    overflow: visible !important;
    width: auto !important;
    max-width: none !important;
}

.opendrive-lowql::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background-color: rgb(230, 86, 78);
    color: #ffffff;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 0.85rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 10000;
    pointer-events: none;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(230, 86, 78, 0.4);
    min-width: 260px;
    text-align: center;
}

.opendrive-lowql::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(2px);
    border: 8px solid transparent;
    border-top-color: rgb(230, 86, 78);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 9999;
}

.opendrive-lowql:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-15px);
}

.opendrive-lowql:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-3px);
}

/* Asegurar que los contenedores padres permitan el tooltip */
.opendrive-file-info:has(.opendrive-lowql) {
    overflow: visible !important;
}

.opendrive-files-container li:has(.opendrive-lowql) {
    overflow: visible !important;
}
/* ============================================================================
   AI Advanced Search — formulario compacto integrado en el accordion.
   Cada fila ocupa una línea; los chips se ajustan en multilinea sólo si hay
   muchos seleccionados.
   ============================================================================ */
.toolsdj-ai-search {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    color: #dfd9f1;
    font-size: 12px;
}

/* Reset agresivo de los inputs heredados del tema (heights y paddings altos
   del CSS general del sitio). Sin esto, los inputs salen 40px+ por defecto. */
.toolsdj-ai-search input,
.toolsdj-ai-search input[type="text"],
.toolsdj-ai-search input[type="number"] {
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.4 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 12px !important;
    font-family: inherit !important;
}

.toolsdj-ai-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 6px 8px;
    min-height: 38px;
    flex-wrap: wrap;
}

/* Specifity boost (3 clases) para ganar al reset global de inputs y al
   .accordion .content input[type="text"] del tema, que aplican padding alto
   y min-height heredados. */
.toolsdj-ai-search .toolsdj-ai-field .toolsdj-ai-field__input,
.toolsdj-ai-search input[type="text"].toolsdj-ai-field__input {
    height: auto !important;
    padding: 0 !important;
    min-height: 24px !important;
    line-height: 24px !important;
    font-size: 12px !important;
}

/* Override del .acc-btn span del tema (main.css:5053). En main.css ya
   están comentados display:block y margin-bottom; aquí sólo aportamos
   los cambios que el usuario validó: color blanco, font-weight 600,
   padding 7px. El gradient, radius y pulse vienen del .new-badge
   global del header.php / footer.php. */
.accordion_box .block .acc-btn span.new-badge {
    font-size: 14px;
    color: #ffffff;
    font-weight: 600;
    padding: 7px;
}

.toolsdj-ai-field__icon {
    color: rgba(223,217,241,0.45);
    font-size: 11px;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}

.toolsdj-ai-field__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.toolsdj-ai-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(168,155,242,0.18);
    border: 1px solid rgba(168,155,242,0.35);
    border-radius: 10px;
    padding: 1px 6px 1px 8px;
    font-size: 11px;
    line-height: 1.4;
    color: #dfd9f1;
}

.toolsdj-ai-chip__x {
    background: transparent;
    border: 0;
    color: rgba(223,217,241,0.6);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 0 2px;
}

.toolsdj-ai-chip__x:hover { color: #ff8a8a; }

.toolsdj-ai-field__input {
    flex: 1;
    min-width: 80px;
    background: transparent;
    border: 0;
    outline: 0;
    color: #fff;
    font-size: 12px;
    padding: 2px 0;
}

.toolsdj-ai-field__input::placeholder { color: rgba(223,217,241,0.35); }

.toolsdj-ai-field__suggest {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 50;
    margin: 0;
    padding: 2px 0;
    list-style: none !important;
    background: #1a1a3a;
    border: 1px solid rgba(168,155,242,0.4);
    border-radius: 6px;
    max-height: 140px;
    overflow-y: auto;
    box-shadow: 0 6px 18px rgba(0,0,0,0.45);
    /* El área vacía del dropdown deja pasar clicks a los inputs de abajo;
       sólo los <li> capturan eventos. Evita el bug de "no puedo clicar el
       siguiente input porque está tapado por el dropdown del anterior". */
    pointer-events: none;
}

/* Reset agresivo: el tema aplica list-style:disc + padding-left a los
   <li> dentro de .accordion .content; lo neutralizamos por completo. */
.toolsdj-ai-field__suggest li {
    list-style: none !important;
    list-style-type: none !important;
    list-style-position: outside !important;
    margin: 0 !important;
    padding: 3px 10px !important;
    cursor: pointer;
    font-size: 11px;
    line-height: 1.3;
    color: #dfd9f1;
    pointer-events: auto;
    background-image: none !important;
}
.toolsdj-ai-field__suggest li::before,
.toolsdj-ai-field__suggest li::marker { content: none !important; display: none !important; }

.toolsdj-ai-field__suggest li:hover { background: rgba(168,155,242,0.18); }

/* Chevron para el field-tipo-select (mood). */
.toolsdj-ai-field__chevron {
    color: rgba(223,217,241,0.45);
    font-size: 10px;
    margin-left: auto;
    pointer-events: none;
}

.toolsdj-ai-field--select { cursor: pointer; }
.toolsdj-ai-field--select .toolsdj-ai-field__input { cursor: pointer; }

/* ── Tonalidad (rueda Camelot) + BPM lado a lado ──────────────────────────── */
.toolsdj-ai-tonebpm {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    background: transparent;
    border: 0;
}

/* Tamaño visible para que las etiquetas Camelot se lean sin lupa.
   El glow exterior tipo lp-camelot vive en el filter de .toolsdj-ai-camelot. */
.toolsdj-ai-tonebpm__wheel {
    flex: 1;
    max-width: 240px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    line-height: 0;
}

.toolsdj-ai-tonebpm__wheel svg { width: 100%; height: 100%; display: block; }

/* Wordmark "ProDj" centrado en el hueco oscuro de la rueda — replica
   el lockup del Promo Card (Plus Jakarta Sans, weight 800/900, white,
   letter-spacing apretado). El "Dj" va weight 900 para el contraste. */
.toolsdj-ai-camelot-mark {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 800;
    font-size: 14px;
    fill: #fff;
    letter-spacing: -0.035em;
    user-select: none;
}
.toolsdj-ai-camelot-mark--dj { font-weight: 900; }

.toolsdj-ai-tonebpm__bpm,
.toolsdj-ai-tonebpm__year {
    flex-shrink: 0;
    width: 76px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
}

.toolsdj-ai-tonebpm__bpm-label,
.toolsdj-ai-tonebpm__year-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(223,217,241,0.55);
    font-weight: 600;
    text-align: center;
    margin-bottom: 2px;
}

.toolsdj-ai-tonebpm__bpm-label i { margin-right: 4px; color: rgb(255, 155, 92); }
.toolsdj-ai-tonebpm__year-label i { margin-right: 4px; color: rgb(61, 136, 251); }

.toolsdj-ai-tonebpm__bpm input[type="number"],
.toolsdj-ai-tonebpm__year input[type="number"] {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 6px !important;
    padding: 4px 4px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: center !important;
    -moz-appearance: textfield;
    appearance: textfield;
    min-width: 0;
}

.toolsdj-ai-tonebpm__bpm input[type="number"]::-webkit-outer-spin-button,
.toolsdj-ai-tonebpm__bpm input[type="number"]::-webkit-inner-spin-button,
.toolsdj-ai-tonebpm__year input[type="number"]::-webkit-outer-spin-button,
.toolsdj-ai-tonebpm__year input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.toolsdj-ai-tonebpm__bpm-sep,
.toolsdj-ai-tonebpm__year-sep {
    color: rgba(223,217,241,0.4);
    font-size: 11px;
    text-align: center;
    line-height: 1;
}

/* ── Rueda Camelot interactiva (SVG) ──────────────────────────────────────── */
/* Look "lp-camelot": colores vivos a opacidad plena, sombra exterior morada
   tipo native preview. Sin animación, con wedges clickables. */
.toolsdj-ai-camelot {
    overflow: visible;
    filter: drop-shadow(0 0 18px rgba(94,47,244,0.35)) drop-shadow(0 12px 22px rgba(0,0,0,0.4));
}

.toolsdj-ai-camelot-wedge {
    cursor: pointer;
    opacity: 1;
    stroke: rgba(0,0,0,0);
    stroke-width: 0;
    transition: filter 0.15s ease, opacity 0.15s ease, stroke-width 0.12s ease;
}

.toolsdj-ai-camelot-wedge:hover { filter: brightness(1.15); }

/* Estado seleccionado MUY visible: borde blanco grueso + glow blanco
   intenso + saturación al máximo. Inalcanzable confundir con un wedge
   normal. */
.toolsdj-ai-camelot-wedge.is-active {
    stroke: #fff;
    stroke-width: 3.5;
    paint-order: stroke;
    filter: brightness(1.35) saturate(1.3) drop-shadow(0 0 10px rgba(255,255,255,0.95)) drop-shadow(0 0 18px rgba(255,255,255,0.55));
}

/* Anillo interior (A minor): un poco más oscuro pero NO apagado, para
   distinguirlo del exterior (B major) sin perder vivacidad. */
.toolsdj-ai-camelot-wedge--minor { filter: brightness(0.78); }
.toolsdj-ai-camelot-wedge--minor:hover { filter: brightness(0.95); }
.toolsdj-ai-camelot-wedge--minor.is-active {
    stroke: #fff;
    stroke-width: 3;
    paint-order: stroke;
    filter: brightness(1.15) saturate(1.3) drop-shadow(0 0 10px rgba(255,255,255,0.95)) drop-shadow(0 0 18px rgba(255,255,255,0.55));
}

.toolsdj-ai-camelot-label {
    fill: #fff;
    font-size: 15px;
    font-weight: 800;
    text-anchor: middle;
    pointer-events: none;
    user-select: none;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

/* A (interior) un pelín más pequeño que B pero cerca — antes 11 vs 14, ahora 13 vs 15. */
.toolsdj-ai-camelot-label--minor { font-size: 13px; }

/* ── Mood: <select> nativo + chips ─────────────────────────────────────────── */
.toolsdj-ai-mood-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 6px 8px;
    min-height: 38px;
    flex-wrap: wrap;
}

.toolsdj-ai-mood-wrap__icon {
    color: rgba(223,217,241,0.45);
    font-size: 11px;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}

.toolsdj-ai-mood-wrap__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Reset + estilo del <select> nativo dentro del wrap. */
.toolsdj-ai-search .toolsdj-ai-mood-select {
    flex: 1;
    min-width: 80px;
    height: 24px !important;
    line-height: 24px !important;
    padding: 0 22px 0 4px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: #fff !important;
    font-size: 12px !important;
    font-family: inherit !important;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'><path d='M0 0l4 5 4-5z' fill='%23dfd9f1' opacity='.5'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 6px center !important;
    background-size: 8px 5px !important;
}

.toolsdj-ai-mood-select option { background: #1a1a3a; color: #dfd9f1; }

/* ── Set time ─────────────────────────────────────────────────────────────── */
.toolsdj-ai-settime {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 6px 8px;
    min-height: 38px;
}

.toolsdj-ai-settime__icon {
    color: rgba(223,217,241,0.45);
    font-size: 11px;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}

.toolsdj-ai-settime__btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(223,217,241,0.75);
    border-radius: 12px;
    padding: 4px 10px;
    font-size: 11px;
    line-height: 1.4;
    cursor: pointer;
    flex: 1;
    min-width: 50px;
}

.toolsdj-ai-settime__btn:hover { background: rgba(255,255,255,0.10); color: #fff; }

.toolsdj-ai-settime__btn.is-active {
    background: linear-gradient(90deg, rgba(168,155,242,0.30), rgba(168,155,242,0.15));
    border-color: rgba(168,155,242,0.55);
    color: #fff;
}

/* ── Acciones ─────────────────────────────────────────────────────────────── */
.toolsdj-ai-actions {
    display: flex;
    gap: 6px;
    margin-top: 2px;
}

.toolsdj-ai-clear {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(223,217,241,0.7);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 11px;
    cursor: pointer;
}

.toolsdj-ai-clear:hover { color: #fff; border-color: rgba(255,255,255,0.3); }

.toolsdj-ai-submit {
    flex: 1;
    background: linear-gradient(90deg, #6e3fb4, #9559c3);
    border: 0;
    color: #fff;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.toolsdj-ai-submit:hover { filter: brightness(1.15); }

.toolsdj-ai-submit i { margin-right: 5px; }

/* ── Responsive: oculta columnas de la fila y mueve BPM/Key al strip ────────
   Por defecto los chips --bpm/--key del player están ocultos (la info ya
   está en la fila). Cuando un breakpoint oculta la celda de la fila, el
   mismo breakpoint reactiva el chip correspondiente. Usamos un único
   breakpoint por pareja para evitar el "gap" de fracciones de píxel donde
   ambos quedaban visibles a la vez (1200.5px, etc). */

.opendrive-track-chip--bpm,
.opendrive-track-chip--key { display: none; }

@media (max-width: 1400px) {
    .opendrive-genre:not(.opendrive-filter-chip),
    .opendrive-genre-header { display: none; }
}

@media (max-width: 1300px) {
    .opendrive-key:not(.opendrive-filter-chip),
    .opendrive-key-header { display: none; }
    .opendrive-track-chip--key { display: inline-flex; }
    /* Sacrificamos la cabecera "AI Metadata" del player para que los chips
       (incluido el --key que reaparece) ocupen toda la fila. */
    .opendrive-track-info__title { display: none; }
}

@media (max-width: 1200px) {
    .opendrive-bpm:not(.opendrive-filter-chip),
    .opendrive-bpm-header { display: none; }
    .opendrive-track-chip--bpm { display: inline-flex; }
}

/* Barra de filtros encima de las cabeceras de columna. Dos filas: la primera
   con géneros (chips estilo .opendrive-genre), la segunda con keywords (chips
   estilo .opendrive-file-keyword). Para folders es una sola fila con banderas.
   Cada fila tiene un label a la izquierda para que no quede tan vacío. Los
   chips reutilizan las clases de los originales para verse idénticos; aquí
   solo añadimos cursor, layout y un estado --active. La especificidad
   .opendrive-filter-bar .opendrive-genre evita el width fijo de 80px de las
   celdas de la lista para que los chips se ajusten a su contenido. */
.opendrive-filter-bar {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    animation: fadeInUp 0.6s ease-out;
}

.opendrive-filter-bar__row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 24px;
    animation: fadeInUp 0.6s ease-out;
}

.opendrive-filter-bar__label {
    flex: 0 0 auto;
    min-width: 90px;
    padding-right: 8px;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    opacity: 0.65;
    animation: fadeInUp 0.6s ease-out;
}

.opendrive-filter-bar__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    animation: fadeInUp 0.6s ease-out;
}

.opendrive-filter-chip {
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    animation: scaleUp 0.6s ease-out;
}

.opendrive-filter-bar .opendrive-genre.opendrive-filter-chip {
    width: auto;
    flex: 0 0 auto;
    margin-left: 0;
    padding: 2px 10px;
}

.opendrive-filter-bar .opendrive-folder-country.opendrive-filter-chip {
    padding: 2px 6px;
    border-left: none;
}

.opendrive-filter-chip--active {
    opacity: 1;
    background: rgba(13, 110, 253, 0.30);
    border-color: rgba(13, 110, 253, 0.70);
    color: #fff;
}

/* Una sola línea visible por fila: chips marcados con --collapsed quedan
   ocultos cuando la fila no está expandida. Al añadir .is-expanded en la
   fila vuelven a mostrarse en flujo y la barra crece a varias líneas. */
.opendrive-filter-bar__row .opendrive-filter-chip--collapsed {
    display: none;
}
.opendrive-filter-bar__row.is-expanded .opendrive-filter-chip--collapsed {
    display: inline-flex;
}

/* Botón "+N" para expandir / "−" para colapsar. Hereda el lenguaje visual
   de los chips de tags (pill compacta) pero con acento azul sutil para que
   se distinga de los chips de filtro. */
.opendrive-filter-bar__more {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    min-width: 28px;
    border-radius: 10px;
    background: rgba(13, 110, 253, 0.18);
    border: 1px solid rgba(13, 110, 253, 0.45);
    color: #fff;
    font-size: 0.72em;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.2px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.opendrive-filter-bar__more:hover {
    background: rgba(13, 110, 253, 0.40);
    border-color: rgba(13, 110, 253, 0.80);
}
.opendrive-filter-bar__more.is-collapse {
    font-size: 1em;
    line-height: 1;
    padding: 2px 10px;
}

/* Cabecera de columnas: plana sobre el fondo del tema (#0B0B29), tipografía
   pequeña en mayúsculas con letter-spacing (mismo lenguaje que .sec-title
   y los labels de la barra de filtros). Sin paneles, sin gradientes; un único
   divisor inferior fino en #d3cde5 que entona con la barra separadora
   ya presente en el render. */
.opendrive-column-headers {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(211, 205, 229, 0.18);
    border-radius: 0;
    padding: 6px 0;
    height: auto;
    min-height: 30px;
    box-shadow: none;
}

.opendrive-column-headers > span {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1;
}

.opendrive-column-headers .opendrive-file-header { color: rgba(255, 255, 255, 0.55); }

/* Ocultar la barra de controls cuando la vista activa es opendrive-dynamic-content.
   El refresh queda expuesto como un <li> en el ul.blog__meta de cada carpeta. */
.opendrive-dynamic-content .opendrive-controls { display: none !important; }

/* Botón refresh inline en el meta de cada folder (ul.blog__meta). */
.opendrive-dynamic-content .blog__meta .opendrive-folder-refresh {
    cursor: pointer;
    user-select: none;
    transition: color .2s ease;
}
.opendrive-dynamic-content .blog__meta .opendrive-folder-refresh i {
    transition: transform .35s ease;
    display: inline-block;
}
.opendrive-dynamic-content .blog__meta .opendrive-folder-refresh:hover {
    color: #C570FB;
}
.opendrive-dynamic-content .blog__meta .opendrive-folder-refresh:hover i {
    transform: rotate(180deg);
}
.opendrive-dynamic-content .blog__meta .opendrive-folder-refresh.is-loading i {
    animation: opendrive-spin 0.8s linear infinite;
}
@keyframes opendrive-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}