/*
Theme Name: PlayUrbano
Theme URI: https://www2.playurbano.in
Author: @nicooponcee
Author URI: https://www.instagram.com/nicooponcee/
Description: Tema personalizado para PlayUrbano - Descarga de música urbana en MP3
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: playurbano
*/

/* Estilos base */
* {
    box-sizing: border-box;
}
   :root{--primary:#3B82F6;--primary-dark:#2563EB;--secondary:#10B981;--secondary-dark:#059669;--accent:#F59E0B;--dark:#1F2937;--light:#F9FAFB}
        body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;line-height:1.6;color:#333;background:linear-gradient(135deg,#f5f7fa 0%,#e4e7eb 100%);min-height:100vh;margin:0}
        .header-logo{font-weight:800;font-size:1.8rem;background:linear-gradient(90deg,var(--primary) 0%,var(--secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
        .song-title{font-size:clamp(1.8rem, 5vw, 2.2rem);font-weight:800;margin-bottom:0.5rem;background:linear-gradient(90deg,var(--dark) 0%,#4B5563 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.2}
        .btn-primary{background:linear-gradient(90deg,var(--primary) 0%,var(--primary-dark) 100%);color:white;padding:1rem 2rem;border-radius:12px;font-weight:700;transition:all 0.3s ease;box-shadow:0 4px 6px rgba(59,130,246,0.25);border:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;cursor:pointer}
        .btn-primary:hover,.btn-primary:focus{transform:translateY(-2px);box-shadow:0 6px 12px rgba(59,130,246,0.3)}
        .btn-secondary{background:linear-gradient(90deg,var(--secondary) 0%,var(--secondary-dark) 100%);color:white;padding:1rem 2rem;border-radius:12px;font-weight:700;transition:all 0.3s ease;box-shadow:0 4px 6px rgba(16,185,129,0.25);border:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;cursor:pointer}
        .btn-secondary:hover,.btn-secondary:focus{transform:translateY(-2px);box-shadow:0 6px 12px rgba(16,185,129,0.3)}
        .card{background:white;border-radius:16px;box-shadow:0 10px 25px rgba(0,0,0,0.05);transition:all 0.3s ease;overflow:hidden}
        .card:hover{transform:translateY(-5px);box-shadow:0 15px 35px rgba(0,0,0,0.1)}
        .progress-bar{height:6px;background:#E5E7EB;border-radius:3px;overflow:hidden}
        .progress-fill{height:100%;background:linear-gradient(90deg,var(--primary) 0%,var(--secondary) 100%);width:0%;transition:width 1s linear}
        .countdown-number{font-size:1.5rem;font-weight:800;color:var(--primary);display:inline-block;min-width:30px;text-align:center}
        .feature-badge{background:linear-gradient(90deg,var(--accent) 0%,#F97316 100%);color:white;font-size:0.75rem;font-weight:700;padding:0.25rem 0.75rem;border-radius:50px;display:inline-flex;align-items:center}
        .container{width:100%;max-width:1200px;margin:0 auto;padding:0 1rem}
        .hidden{display:none!important}
        .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
        /* Mejoras de accesibilidad */
        a:focus, button:focus {outline: 2px solid #3B82F6; outline-offset: 2px;}
        
        /* Utilidades básicas para layout */
        .flex{display:flex}
        .justify-between{justify-content:space-between}
        .items-center{align-items:center}
        .grid{display:grid}
        .w-full{width:100%}
        .mx-auto{margin-left:auto;margin-right:auto}
        .px-4{padding-left:1rem;padding-right:1rem}
        .py-3{padding-top:0.75rem;padding-bottom:0.75rem}
        .py-8{padding-top:2rem;padding-bottom:2rem}
        .mb-2{margin-bottom:0.5rem}
        .mb-4{margin-bottom:1rem}
        .mb-6{margin-bottom:1.5rem}
        .mb-8{margin-bottom:2rem}
        .mt-2{margin-top:0.5rem}
        .mt-4{margin-top:1rem}
        .mt-12{margin-top:3rem}
        .mr-2{margin-right:0.5rem}
        .mr-3{margin-right:0.75rem}
        .mr-4{margin-right:1rem}
        .gap-8{gap:2rem}
        .space-y-2 > * + * {margin-top:0.5rem}
        .text-center{text-align:center}
        .text-sm{font-size:0.875rem}
        .text-lg{font-size:1.125rem}
        .text-xl{font-size:1.25rem}
        .text-2xl{font-size:1.5rem}
        .text-gray-400{color:rgb(156 163 175)}
        .text-gray-600{color:rgb(75 85 99)}
        .text-gray-700{color:rgb(55 65 81)}
        .text-gray-800{color:rgb(31 41 55)}
        .text-white{color:rgb(255 255 255)}
        .bg-white{background-color:rgb(255 255 255)}
        .bg-gray-900{background-color:rgb(17 24 39)}
        .bg-gradient-to-br{background-image:linear-gradient(to bottom right, var(--tw-gradient-stops))}
        .from-gray-50{--tw-gradient-from:#F9FAFB;--tw-gradient-to:rgb(249 250 251 / 0);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}
        .to-white{--tw-gradient-to:#FFFFFF}
        .border-gray-100{border-color:rgb(243 244 246)}
        .border{border-width:1px}
        .rounded-xl{border-radius:0.75rem}
        .shadow-md{box-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)}
        .shadow-lg{box-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)}
        .sticky{position:sticky}
        .top-0{top:0}
        .z-50{z-index:50}
        
        @media (max-width:768px){
            .song-title{font-size:1.8rem}
            .btn-primary,.btn-secondary{padding:0.875rem 1.5rem;font-size:0.9rem}
            .flex-col{flex-direction:column}
            .hidden{display:none}
            .md\:flex{display:flex}
            .md\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}
            .md\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}
            .md\:block{display:block}
        }
        
        @media (max-width:640px){
            .grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}
            .md\:grid-cols-2{grid-template-columns:repeat(1, minmax(0, 1fr))}
        }

/* Header */
.header-logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: #6528F7;
    text-decoration: none;
}

/* Títulos */
.song-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a202c;
    line-height: 1.2;
}

/* Badge de características */
.feature-badge {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}

/* Progress bar */
.progress-bar {
    width: 100%;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
    width: 0%;
    transition: width 1s ease;
    border-radius: 3px;
}

/* Countdown */
.countdown-number {
    font-weight: 700;
    color: #1e40af;
    font-size: 1.2em;
}

/* Posts relacionados */
.posts-relacionados {
    background: #f8fafc;
    border-radius: 12px;
    padding: 24px;
    margin: 32px 0;
    border: 1px solid #e2e8f0;
}

.posts-relacionados h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 16px;
}

.posts-relacionados ul {
    list-style: none;
    padding: 0;
}

.post-relacionado-item {
    padding: 12px 0;
    border-bottom: 1px solid #e2e8f0;
}

.post-relacionado-item:last-child {
    border-bottom: none;
}

.post-relacionado-item a {
    color: #4a5568;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
}

.post-relacionado-item a:hover {
    color: #6528F7;
}

.post-relacionado-item a::before {
    content: "🎵";
    margin-right: 8px;
}

/* Categorías en tarjetas */
.category-card {
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease;
}

.category-card:hover {
    transform: translateY(-4px);
}

/* Responsive */
@media (max-width: 768px) {
    .song-title {
        font-size: 2rem;
    }
    
    .container {
        padding: 0 16px;
    }
    
    .posts-relacionados {
        padding: 16px;
        margin: 24px 0;
    }
}

/* Utilidades de texto */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Animaciones */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.pulse {
    animation: pulse 2s infinite;
}

/* Mejoras de accesibilidad */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus visible para mejor accesibilidad */
button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 2px solid #6528F7;
    outline-offset: 2px;
}