/* ===========================================================
   DedicaQR - Sprint 4 — extensiones de estilo
   Audio player, música de fondo, reporte, plan limits, share avanzado
   =========================================================== */

/* ====================================================================
   AUDIO PERSONAL en dedicatoria
   ==================================================================== */
.ded-audio-player {
    margin: 1.5rem auto;
    max-width: 100%;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(201,24,74,.08), rgba(212,162,76,.08));
    border-radius: 14px;
    border: 1px solid rgba(201,24,74,.15);
}
.ded-audio-player__label {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #C9184A;
    font-weight: 600;
    font-size: .9rem;
    margin-bottom: .5rem;
}
.ded-audio-player__icon { font-size: 1.2rem; }
.ded-audio-player__el {
    width: 100%;
    height: 40px;
    outline: none;
}
.ded-audio-player__el::-webkit-media-controls-panel {
    background: rgba(255,255,255,.85);
}

/* Adaptaciones por template */
.ded-card--elegant .ded-audio-player {
    background: linear-gradient(135deg, rgba(212,162,76,.12), rgba(212,162,76,.04));
    border-color: rgba(212,162,76,.3);
}
.ded-card--elegant .ded-audio-player__label { color: #B8893A; }

.ded-card--minimal .ded-audio-player {
    background: #F8F8F8;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
}
.ded-card--minimal .ded-audio-player__label { color: #1A1A1A; text-transform: uppercase; letter-spacing: 2px; font-size: .7rem; }

.ded-card--corporate .ded-audio-player {
    background: #F8FAFC;
    border-color: #E2E8F0;
    border-radius: 8px;
}
.ded-card--corporate .ded-audio-player__label { color: #264653; }

/* ====================================================================
   MÚSICA DE FONDO — control flotante en esquina
   ==================================================================== */
.ded-music-bg {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: .5rem;
    background: rgba(45, 27, 34, .9);
    backdrop-filter: blur(10px);
    color: #FFF;
    padding: .5rem .75rem .5rem .5rem;
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
    max-width: 90vw;
    font-size: .85rem;
}
.ded-music-bg__toggle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #FFF;
    background: #C9184A;
    color: #FFF;
    font-size: 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    transition: all .15s;
}
.ded-music-bg__toggle:hover { transform: scale(1.05); }
.ded-music-bg__pulse {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid #C9184A;
    opacity: 0;
    pointer-events: none;
}
.ded-music-bg--playing .ded-music-bg__pulse {
    animation: dedMusicPulse 2s ease-out infinite;
}
@keyframes dedMusicPulse {
    0%   { opacity: .6; transform: scale(1); }
    100% { opacity: 0;  transform: scale(1.4); }
}
.ded-music-bg__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}
.ded-music-bg__label em { opacity: .7; font-style: normal; }

@media (max-width: 480px) {
    .ded-music-bg { padding: .35rem; }
    .ded-music-bg__label { display: none; }
}

/* ====================================================================
   SHARE BUTTONS — extendidos
   ==================================================================== */
.ded-actions--grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .5rem;
    margin-top: 2rem;
}
.ded-btn--share {
    width: 100%;
    justify-content: center;
    border: none;
}
.ded-btn--copy     { background: #C9184A; color: #FFF; }
.ded-btn--whatsapp { background: #25D366; color: #FFF; }
.ded-btn--telegram { background: #229ED9; color: #FFF; }
.ded-btn--facebook { background: #1877F2; color: #FFF; }
.ded-btn--twitter  { background: #1DA1F2; color: #FFF; }
.ded-btn--email    { background: #6B4F58; color: #FFF; }
.ded-btn--native   { background: #4A2E37; color: #FFF; }
.ded-btn--ghost    { background: transparent; color: #6B4F58; border: 1px solid #FFB3C1; }

.ded-btn--share:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.15); }

/* Report link discreto */
.ded-report-link {
    margin-top: 1.5rem;
    text-align: center;
    font-size: .8rem;
}
.ded-report-link a {
    color: #888;
    text-decoration: none;
    opacity: .6;
    transition: opacity .15s;
}
.ded-report-link a:hover { opacity: 1; color: #C9184A; }

/* ====================================================================
   REPORTE — form de denuncia pública
   ==================================================================== */
.ded-card--report {
    max-width: 540px;
}
.ded-report-form {
    text-align: left;
    margin-top: 1.5rem;
}
.ded-report-fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 1.5rem;
}
.ded-report-fieldset legend {
    font-weight: 700;
    color: #4A2E37;
    margin-bottom: .75rem;
    padding: 0;
}
.ded-report-radio {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem .85rem;
    border: 1px solid #F0E0E5;
    border-radius: 10px;
    margin-bottom: .35rem;
    cursor: pointer;
    transition: all .15s;
    color: #4A2E37;
    font-size: .95rem;
}
.ded-report-radio:hover { border-color: #FFB3C1; background: #FFF8F5; }
.ded-report-radio:has(input:checked) { border-color: #C9184A; background: #FFE4EC; }

.ded-form-field {
    margin-bottom: 1rem;
}
.ded-form-field label {
    display: block;
    font-weight: 600;
    color: #4A2E37;
    margin-bottom: .3rem;
    font-size: .9rem;
}
.ded-form-field input,
.ded-form-field textarea {
    width: 100%;
    padding: .7rem .9rem;
    border: 1px solid #E0D0D5;
    border-radius: 10px;
    font-family: inherit;
    font-size: 1rem;
    background: #FFFEFC;
}
.ded-form-field input:focus,
.ded-form-field textarea:focus {
    outline: none;
    border-color: #C9184A;
    box-shadow: 0 0 0 3px rgba(201,24,74,.1);
}
.ded-form-field small {
    color: #888;
    font-size: .8rem;
    display: block;
    margin-top: .3rem;
}
.ded-form-actions {
    display: flex;
    gap: .75rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

/* ====================================================================
   USER PANEL — Audio item, plan-locked, music option, banner
   ==================================================================== */
.user-audio-list { display: flex; flex-direction: column; gap: 1rem; }
.user-audio-item {
    background: #FFF8F5;
    padding: 1rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.user-audio-item audio { flex: 1; min-width: 200px; }

.user-plan-locked {
    background: #FFF8F5;
    border: 2px dashed #FFB3C1;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    margin-top: 1rem;
}
.user-plan-locked p { color: #6B4F58; margin: 0 0 1rem; }

.user-plan-banner {
    background: linear-gradient(135deg, #C9184A, #E73C68);
    color: #FFF;
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    box-shadow: 0 6px 20px rgba(201,24,74,.25);
}
.user-plan-banner__icon { font-size: 2rem; }
.user-plan-banner__content { flex: 1; min-width: 200px; }
.user-plan-banner__content strong { display: block; font-size: 1.05rem; margin-bottom: .25rem; }
.user-plan-banner__content p { margin: 0; opacity: .9; font-size: .85rem; }
.user-plan-banner .btn { background: #FFF; color: #C9184A; border: 0; }
.user-plan-banner .btn:hover { background: #FFF8F5; }

.user-music-option {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    border: 1px solid #F0E0E5;
    border-radius: 12px;
    margin-bottom: .5rem;
    cursor: pointer;
    transition: all .15s;
}
.user-music-option:hover { border-color: #FFB3C1; background: #FFF8F5; }
.user-music-option:has(input:checked) { border-color: #C9184A; background: #FFE4EC; }
.user-music-option__info { display: flex; flex-direction: column; }
.user-music-option__info em { color: #6B4F58; font-style: normal; font-size: .85rem; }
.user-music-option__preview { width: 180px; max-width: 100%; height: 32px; }

.user-radio--locked { opacity: .5; cursor: not-allowed; }
.user-radio--locked:hover { border-color: #F0E0E5; }

.user-template-option--locked { opacity: .4; cursor: not-allowed; pointer-events: none; }

/* Admin alerts banner */
.admin-alert-banner {
    padding: 1rem 1.25rem;
    border-radius: 12px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: space-between;
    flex-wrap: wrap;
}
.admin-alert-banner--warn { background: #FEF3C7; color: #78350F; border-left: 4px solid #D97706; }
.admin-alert-banner--info { background: #E0F2FE; color: #075985; border-left: 4px solid #0284C7; }

/* Admin badges nuevos */
.admin-badge--reviewed  { background: #DBEAFE; color: #1E40AF; }
.admin-badge--dismissed { background: #F3F4F6; color: #6B7280; }
.admin-badge--actioned  { background: #D1FAE5; color: #065F46; }
.admin-badge--pending   { background: #FEF3C7; color: #92400E; }
.admin-badge--spam      { background: #FECACA; color: #991B1B; }
.admin-badge--hate      { background: #FCA5A5; color: #7F1D1D; }
.admin-badge--sexual    { background: #FBCFE8; color: #831843; }
.admin-badge--violence  { background: #FCA5A5; color: #7F1D1D; }
.admin-badge--copyright { background: #FED7AA; color: #7C2D12; }
.admin-badge--harassment{ background: #FBCFE8; color: #831843; }
.admin-badge--other     { background: #E5E7EB; color: #4B5563; }