/* ============================================================
   WP Extractor de Pistas de Audio — estilos del card público
   Usa variables CSS con fallback al tema (transparent / inherit).
   ============================================================ */
.eap-card {
    --eap-accent: #2563eb;
    --eap-accent-text: #ffffff;
    --eap-card-bg: transparent;
    --eap-card-text: inherit;
    --eap-radius: 14px;
    --eap-border: rgba(127, 127, 127, 0.28);
    --eap-muted: rgba(127, 127, 127, 0.9);
    --eap-soft: rgba(127, 127, 127, 0.10);

    box-sizing: border-box;
    max-width: 760px;
    margin: 1.5em auto;
    padding: clamp(18px, 4vw, 32px);
    background: var(--eap-card-bg);
    color: var(--eap-card-text);
    border: 1px solid var(--eap-border);
    border-radius: var(--eap-radius);
    font-family: inherit;
    line-height: 1.5;
}
.eap-card * { box-sizing: border-box; }

.eap-title {
    font-size: clamp(1.15rem, 2.5vw, 1.5rem);
    margin: 0 0 .5em;
    color: inherit;
}
.eap-subtitle { font-size: 1.05rem; margin: 0; color: inherit; }
.eap-intro { margin: 0 0 1.2em; color: var(--eap-muted); }

/* ---- Botones ---- */
.eap-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4em;
    font: inherit;
    font-weight: 600;
    padding: .7em 1.3em;
    border-radius: 10px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: opacity .15s ease, transform .05s ease;
    text-decoration: none;
    line-height: 1.1;
}
.eap-btn:active { transform: translateY(1px); }
.eap-btn:disabled { opacity: .5; cursor: not-allowed; }
.eap-btn-primary {
    background: var(--eap-accent);
    color: var(--eap-accent-text);
    border-color: var(--eap-accent);
    width: 100%;
    padding: .85em 1.3em;
    font-size: 1.02rem;
}
.eap-btn-primary:hover:not(:disabled) { opacity: .9; }
.eap-btn-outline {
    background: transparent;
    color: inherit;
    border-color: var(--eap-border);
}
.eap-btn-outline:hover { border-color: var(--eap-accent); color: var(--eap-accent); }
.eap-btn-ghost {
    background: transparent;
    color: var(--eap-muted);
    border-color: transparent;
    padding: .5em .8em;
}
.eap-btn-ghost:hover { color: var(--eap-accent); }
.eap-btn-sm { padding: .45em .8em; font-size: .85rem; border-radius: 8px; }

.eap-link { color: var(--eap-accent); text-decoration: underline; cursor: pointer; }

/* ---- Loading / spinner ---- */
.eap-loading, .eap-tool-progress, .eap-work {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8em;
    text-align: center;
    padding: 1.5em 0;
}
.eap-spinner {
    width: 34px; height: 34px;
    border: 3px solid var(--eap-soft);
    border-top-color: var(--eap-accent);
    border-radius: 50%;
    animation: eap-spin .8s linear infinite;
}
@keyframes eap-spin { to { transform: rotate(360deg); } }

/* ---- Consentimiento ---- */
.eap-consent { text-align: center; }
.eap-consent-icon { font-size: 2.6rem; margin-bottom: .3em; }
.eap-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: .6em;
    text-align: left;
    background: var(--eap-soft);
    padding: .9em 1em;
    border-radius: 10px;
    cursor: pointer;
    margin: 0 auto 1em;
    max-width: 560px;
}
.eap-checkbox-row input { margin-top: .2em; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--eap-accent); }
.eap-terms-line { margin: 0 0 1.2em; }

.eap-consent-error, .eap-error {
    color: #dc2626;
    background: rgba(220, 38, 38, .08);
    border: 1px solid rgba(220, 38, 38, .3);
    padding: .7em 1em;
    border-radius: 8px;
    margin-top: 1em;
    text-align: center;
}

/* ---- Barra de progreso ---- */
.eap-progressbar {
    width: 100%;
    max-width: 480px;
    height: 10px;
    background: var(--eap-soft);
    border-radius: 999px;
    overflow: hidden;
}
.eap-progressbar-fill {
    height: 100%;
    width: 0%;
    background: var(--eap-accent);
    border-radius: 999px;
    transition: width .2s ease;
}
.eap-progress-pct { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---- App / toolbar ---- */
.eap-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6em;
    flex-wrap: wrap;
    margin-bottom: 1.2em;
    padding-bottom: 1em;
    border-bottom: 1px solid var(--eap-border);
}
.eap-badge {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    font-size: .85rem;
    font-weight: 600;
    padding: .35em .8em;
    border-radius: 999px;
}
.eap-badge-ok { background: rgba(22, 163, 74, .12); color: #16a34a; }

/* ---- Dropzone ---- */
.eap-dropzone {
    border: 2px dashed var(--eap-border);
    border-radius: 12px;
    padding: 2em 1em;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
    margin-bottom: 1em;
}
.eap-dropzone:hover, .eap-dropzone:focus, .eap-dropzone.eap-dragover {
    border-color: var(--eap-accent);
    background: var(--eap-soft);
    outline: none;
}
.eap-dropzone-inner { display: flex; flex-direction: column; align-items: center; gap: .6em; }
.eap-dropzone-icon { font-size: 2.2rem; }

/* ---- Historial ---- */
.eap-history-wrap { margin-top: 1.8em; }
.eap-history-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: .6em; margin-bottom: .8em;
}
.eap-history-empty { color: var(--eap-muted); font-style: italic; margin: .5em 0; }

.eap-hist-item {
    border: 1px solid var(--eap-border);
    border-radius: 12px;
    padding: 1em;
    margin-bottom: 1em;
    background: var(--eap-soft);
}
.eap-hist-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: .8em; flex-wrap: wrap; margin-bottom: .8em;
}
.eap-hist-meta { display: flex; flex-direction: column; gap: .2em; min-width: 0; }
.eap-hist-meta strong { word-break: break-word; }
.eap-hist-date { font-size: .82rem; color: var(--eap-muted); }
.eap-hist-actions { display: flex; gap: .4em; flex-wrap: wrap; }

.eap-track-list { display: flex; flex-direction: column; gap: .6em; }
.eap-track-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "name dl" "audio audio";
    align-items: center;
    gap: .5em .8em;
    padding: .7em;
    background: var(--eap-card-bg, transparent);
    border: 1px solid var(--eap-border);
    border-radius: 10px;
}
.eap-track-name { grid-area: name; font-size: .9rem; font-weight: 600; word-break: break-word; }
.eap-track-row audio { grid-area: audio; width: 100%; height: 38px; }
.eap-track-dl { grid-area: dl; display: flex; align-items: center; gap: .4em; }

.eap-format-select {
    font: inherit;
    font-size: .82rem;
    padding: .35em .5em;
    border-radius: 8px;
    border: 1px solid var(--eap-border);
    background: var(--eap-card-bg, transparent);
    color: inherit;
    cursor: pointer;
    max-width: 120px;
}
.eap-hist-actions .eap-format-select { max-width: 130px; }

/* ---- Modal términos ---- */
.eap-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 1em; }
.eap-modal[hidden] { display: none; }
.eap-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.eap-modal-box {
    position: relative;
    background: #fff;
    color: #1a1a1a;
    max-width: 620px;
    width: 100%;
    max-height: 85vh;
    overflow: auto;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.eap-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1em; padding: 1em 1.3em;
    border-bottom: 1px solid #e5e5e5;
    position: sticky; top: 0; background: #fff;
}
.eap-modal-header h3 { margin: 0; font-size: 1.15rem; }
.eap-modal-x { background: none; border: none; font-size: 1.7rem; line-height: 1; cursor: pointer; color: #666; }
.eap-modal-body { padding: 1.3em; }
.eap-modal-body p { margin: 0 0 1em; }
.eap-modal-footer { padding: 1em 1.3em; border-top: 1px solid #e5e5e5; text-align: right; }
body.eap-modal-open { overflow: hidden; }

@media (prefers-color-scheme: dark) {
    .eap-modal-box { background: #1e1e1e; color: #eee; }
    .eap-modal-header { background: #1e1e1e; border-bottom-color: #333; }
    .eap-modal-footer { border-top-color: #333; }
}

/* ---- Responsive ---- */
@media (max-width: 560px) {
    .eap-track-row { grid-template-columns: 1fr; grid-template-areas: "name" "audio" "dl"; }
    .eap-track-dl { justify-self: start; }
}