/* Mi Sonido - estilos propios sobre Bootstrap 5 */

:root {
    --ms-accent: #00e5c7;
    --ms-accent-2: #8b5cf6;
    --ms-bg-dark: #0b0d14;
    --ms-card-dark: rgba(15, 17, 26, 0.86);
    --ms-font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --ms-font-display: 'Space Grotesk', 'Inter', sans-serif;
    --ms-font-brand: 'Satisfy', cursive;
}

html {
    min-height: 100%;
    background-color: var(--ms-bg-dark);
}

body {
    min-height: 100vh;
    font-family: var(--ms-font-body);
    /* La foto con un velo degradado para legibilidad + glow sutil del acento */
    background:
        radial-gradient(1200px 500px at 85% -10%, rgba(139, 92, 246, 0.14), transparent 60%),
        radial-gradient(1000px 600px at -10% 110%, rgba(0, 229, 199, 0.10), transparent 60%),
        linear-gradient(rgba(11, 13, 20, 0.78), rgba(11, 13, 20, 0.92)),
        url("images/background.jpg") center / cover no-repeat fixed,
        var(--ms-bg-dark);
    color: #e9ecef;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ms-font-display);
    font-weight: 600;
}

/* Marca */
.navbar-brand {
    font-family: var(--ms-font-brand);
    font-size: 1.7rem;
    letter-spacing: 1px;
    background: linear-gradient(90deg, var(--ms-accent), var(--ms-accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Tarjetas translucidas sobre el fondo */
.card-misonido {
    background-color: var(--ms-card-dark);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.15s ease, border-color 0.15s ease;
}

a > .card-misonido:hover,
.card.card-misonido:hover {
    border-color: rgba(0, 229, 199, 0.35);
}

.card-cover {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
}

/* Acento propio para barras de progreso y detalles */
.bg-accent {
    background: linear-gradient(90deg, var(--ms-accent), var(--ms-accent-2)) !important;
}

.btn-accent {
    background: linear-gradient(90deg, var(--ms-accent), var(--ms-accent-2));
    border: none;
    color: #0b0d14;
    font-weight: 600;
}

.btn-accent:hover,
.btn-accent:focus {
    color: #0b0d14;
    filter: brightness(1.15);
}

/* Consola mezclador */
.mix-track .btn-mute.active {
    background-color: #ffc107;
    color: #0b0d14;
    border-color: #ffc107;
}

.mix-track .btn-solo.active {
    background-color: var(--ms-accent);
    color: #0b0d14;
    border-color: var(--ms-accent);
}

.mix-track input[type="range"].vol {
    accent-color: var(--ms-accent);
    width: 110px;
}

/* Estrella de favorito */
.btn-favorite {
    color: #adb5bd;
    font-size: 1.15rem;
    text-decoration: none;
}

.btn-favorite:hover {
    color: #FDB230;
}

.btn-favorite .bi-star-fill {
    color: #FDB230;
}

/* Zona drag-and-drop para archivos */
.dropzone {
    border: 2px dashed var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 1.25rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}

.dropzone:hover,
.dropzone.dragover {
    border-color: var(--ms-accent);
    background-color: rgba(0, 229, 199, 0.08);
}

.dropzone .bi-cloud-arrow-up {
    display: block;
    font-size: 1.75rem;
    margin-bottom: 0.25rem;
}

.dropzone .file-name {
    display: block;
    color: var(--ms-accent);
    font-size: 0.85rem;
    margin-top: 0.25rem;
    word-break: break-all;
}

/* Tema claro */
[data-bs-theme="light"] body {
    background:
        radial-gradient(1200px 500px at 85% -10%, rgba(139, 92, 246, 0.10), transparent 60%),
        radial-gradient(1000px 600px at -10% 110%, rgba(0, 229, 199, 0.08), transparent 60%),
        linear-gradient(rgba(240, 242, 247, 0.85), rgba(235, 238, 245, 0.95)),
        url("images/background.jpg") center / cover no-repeat fixed,
        #eef0f5;
}

[data-bs-theme="light"] .card-misonido {
    background-color: rgba(255, 255, 255, 0.88);
    border-color: rgba(0, 0, 0, 0.08);
}

/* Tabla de audios */
.table-audios {
    vertical-align: middle;
}

.waveform {
    min-width: 200px;
    margin-bottom: 6px;
}

#centrado {
    text-align: center;
}

/* Errores de formularios */
ul.errorlist {
    padding-left: 0;
    margin-bottom: 0;
}

ul.errorlist > li {
    list-style: none;
}