/*
Theme Name: Heme Laooz Polla
Theme URI: https://laooz.com
Author: Laooz Studios
Author URI: https://laooz.com
Description: Tema personalizado para la Polla Mundial 2026
Version: 1.1.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: heme-laooz-polla
Domain Path: /languages

Este tema utiliza Tailwind CSS via CDN para el diseño.
Los colores corporativos se definen aquí en CSS puro para no depender del CDN.
*/

/* =============================================
   PALETA CORPORATIVA
   ============================================= */
:root {
    --brand-primary: #003764;
    --brand-primary-dark: #002545;
    --brand-primary-light: #004a8a;
    --brand-secondary: #2d8c9e;
    --brand-secondary-dark: #236f7e;
    --brand-accent: #07bed6;
    --brand-accent-dark: #059bb0;
    --brand-gold: #feb71b;
    --brand-gold-dark: #e5a418;
    --brand-gold-light: #FCD06F;
}

body {
    font-family: 'Inter', sans-serif;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* =============================================
   UTILIDADES DE COLOR (CSS puro, sin Tailwind)
   ============================================= */
.bg-brand-primary { background-color: var(--brand-primary) !important; }
.bg-brand-primary-dark { background-color: var(--brand-primary-dark) !important; }
.bg-brand-secondary { background-color: var(--brand-secondary) !important; }
.bg-brand-secondary-dark { background-color: var(--brand-secondary-dark) !important; }
.bg-brand-accent { background-color: var(--brand-accent) !important; }
.bg-brand-gold { background-color: var(--brand-gold) !important; }
.bg-brand-gold-dark { background-color: var(--brand-gold-dark) !important; }

.text-brand-primary { color: var(--brand-primary) !important; }
.text-brand-secondary { color: var(--brand-secondary) !important; }
.text-brand-accent { color: var(--brand-accent) !important; }
.text-brand-gold { color: var(--brand-gold) !important; }
.text-brand-gold-light { color: var(--brand-gold-light) !important; }

.border-brand-primary { border-color: var(--brand-primary) !important; }
.border-brand-secondary { border-color: var(--brand-secondary) !important; }
.border-brand-gold { border-color: var(--brand-gold) !important; }
.border-brand-accent { border-color: var(--brand-accent) !important; }

/* Opacidades */
.bg-brand-primary\/5 { background-color: rgba(0, 55, 100, 0.05) !important; }
.bg-brand-primary\/80 { background-color: rgba(0, 55, 100, 0.8) !important; }
.bg-brand-secondary\/10 { background-color: rgba(45, 140, 158, 0.1) !important; }
.bg-brand-secondary\/30 { background-color: rgba(45, 140, 158, 0.3) !important; }
.bg-brand-accent\/10 { background-color: rgba(7, 190, 214, 0.1) !important; }
.bg-brand-gold-light\/20 { background-color: rgba(252, 208, 111, 0.2) !important; }

.border-brand-secondary\/20 { border-color: rgba(45, 140, 158, 0.2) !important; }
.border-brand-secondary\/25 { border-color: rgba(45, 140, 158, 0.25) !important; }
.border-brand-secondary\/30 { border-color: rgba(45, 140, 158, 0.3) !important; }
.border-brand-secondary\/40 { border-color: rgba(45, 140, 158, 0.4) !important; }
.border-brand-accent\/30 { border-color: rgba(7, 190, 214, 0.3) !important; }

.hover\:text-brand-gold-light:hover { color: var(--brand-gold-light) !important; }
.hover\:text-brand-gold:hover { color: var(--brand-gold) !important; }
.hover\:text-brand-secondary:hover { color: var(--brand-secondary) !important; }
.hover\:text-brand-accent:hover { color: var(--brand-accent) !important; }
.hover\:bg-brand-gold-dark:hover { background-color: var(--brand-gold-dark) !important; }
.hover\:bg-brand-primary\/5:hover { background-color: rgba(0, 55, 100, 0.05) !important; }
.hover\:bg-brand-secondary\/30:hover { background-color: rgba(45, 140, 158, 0.3) !important; }
.hover\:bg-brand-accent\/10:hover { background-color: rgba(7, 190, 214, 0.1) !important; }

.focus\:border-brand-gold:focus { border-color: var(--brand-gold) !important; }
.focus\:ring-brand-gold:focus { box-shadow: 0 0 0 2px rgba(254, 183, 27, 0.35) !important; }
.focus\:border-brand-accent:focus { border-color: var(--brand-accent) !important; }
.focus\:ring-brand-accent:focus { box-shadow: 0 0 0 2px rgba(7, 190, 214, 0.35) !important; }

/* Gradientes corporativos */
.bg-gradient-brand {
    background: linear-gradient(to right, var(--brand-primary), var(--brand-secondary)) !important;
    color: #fff !important;
}

.bg-gradient-brand:hover,
.hover\:bg-gradient-brand-dark:hover {
    background: linear-gradient(to right, var(--brand-primary-dark), var(--brand-secondary-dark)) !important;
}

.bg-gradient-brand-header {
    background: linear-gradient(to right, var(--brand-primary), var(--brand-secondary), var(--brand-accent)) !important;
    color: #fff !important;
}

.bg-gradient-brand-register {
    background: linear-gradient(to right, var(--brand-secondary), var(--brand-accent)) !important;
    color: #fff !important;
}

.bg-gradient-brand-register:hover {
    background: linear-gradient(to right, var(--brand-secondary-dark), var(--brand-accent-dark)) !important;
}

.bg-gradient-gold {
    background: linear-gradient(to bottom right, var(--brand-gold), var(--brand-gold-dark)) !important;
}

.bg-gradient-steps-line {
    background: linear-gradient(to bottom, var(--brand-secondary), var(--brand-accent), var(--brand-gold)) !important;
}

.bg-gradient-image-overlay {
    background: linear-gradient(to top, rgba(0, 55, 100, 0.8), transparent) !important;
}

.bg-gradient-login-cta {
    background: linear-gradient(to bottom, rgba(252, 208, 111, 0.2), #fff) !important;
}

.bg-gradient-to-r.from-brand-accent\/10.to-brand-secondary\/10,
.modal-captcha-box {
    background: linear-gradient(to right, rgba(7, 190, 214, 0.1), rgba(45, 140, 158, 0.1)) !important;
}

/* =============================================
   HEADER Y FOOTER
   ============================================= */
.site-header {
    background-color: #fff !important;
    border-top: 4px solid var(--brand-primary) !important;
    border-bottom: 1px solid rgba(45, 140, 158, 0.2) !important;
    box-shadow: 0 2px 12px rgba(0, 55, 100, 0.08);
}

.header-nav-link {
    color: var(--brand-primary) !important;
}

.header-nav-link:hover {
    color: var(--brand-secondary) !important;
}

.header-nav-link-sub {
    color: #4b5563 !important;
}

.header-nav-link-sub:hover {
    color: var(--brand-primary) !important;
}

.site-header .header-nav-link i.fa-user-circle {
    color: var(--brand-secondary);
}

.site-footer {
    background-color: var(--brand-primary) !important;
    border-top: 2px solid var(--brand-secondary) !important;
}

.user-dropdown {
    background-color: var(--brand-primary-dark) !important;
    border: 1px solid rgba(45, 140, 158, 0.4) !important;
}

/* Barra de participantes */
.participants-bar {
    background-color: #f8fafb !important;
    border-bottom: 1px solid rgba(45, 140, 158, 0.15) !important;
}

.participant-avatar img {
    border-color: var(--brand-gold) !important;
    box-shadow: 0 0 0 1px var(--brand-gold-light);
}

.participant-avatar img:hover {
    border-color: var(--brand-accent) !important;
    box-shadow: 0 4px 12px rgba(7, 190, 214, 0.35);
}

/* =============================================
   MÓDULOS DEL SIDEBAR Y CONTENIDO
   ============================================= */
.sidebar-module {
    background-color: #fff !important;
    border: 1px solid rgba(45, 140, 158, 0.25) !important;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 55, 100, 0.08);
}

.sidebar-module-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(45, 140, 158, 0.2) !important;
    background-color: rgba(0, 55, 100, 0.05) !important;
}

.sidebar-module-header h2,
.sidebar-module-header h3 {
    color: var(--brand-primary) !important;
}

.sidebar-module-header i {
    color: var(--brand-gold) !important;
}

.sidebar-module-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(45, 140, 158, 0.2) !important;
    background-color: rgba(0, 55, 100, 0.05) !important;
}

.module-comunidad-header {
    padding: 1rem;
    background: linear-gradient(to right, var(--brand-primary), var(--brand-secondary), var(--brand-accent)) !important;
    color: #fff !important;
}

.module-comunidad-header h3 {
    color: #fff !important;
}

.module-como-funciona {
    background-color: var(--brand-primary) !important;
    color: #fff !important;
    padding: 1rem;
}

.module-como-funciona h3,
.module-como-funciona h4 {
    color: #fff !important;
}

.module-step-badge {
    background-color: var(--brand-secondary) !important;
    color: #fff !important;
}

.module-step-badge-gold {
    background: linear-gradient(to bottom right, var(--brand-gold), var(--brand-gold-dark)) !important;
    color: #fff !important;
}

.module-step-label {
    color: var(--brand-accent) !important;
}

.module-step-label-gold {
    color: var(--brand-gold-light) !important;
}

/* Botones */
.btn-brand-primary {
    display: block;
    width: 100%;
    background: linear-gradient(to right, var(--brand-primary), var(--brand-secondary)) !important;
    color: #fff !important;
    text-align: center;
    padding: 0.75rem 1rem;
    font-weight: 600;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 55, 100, 0.2);
}

.btn-brand-primary:hover {
    background: linear-gradient(to right, var(--brand-primary-dark), var(--brand-secondary-dark)) !important;
    box-shadow: 0 4px 12px rgba(0, 55, 100, 0.3);
}

.btn-brand-gold {
    background: linear-gradient(135deg, var(--brand-gold) 0%, var(--brand-gold-dark) 100%) !important;
    color: var(--brand-primary) !important;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-brand-gold:hover {
    background: linear-gradient(135deg, var(--brand-gold-light) 0%, var(--brand-gold) 100%) !important;
    box-shadow: 0 4px 14px rgba(254, 183, 27, 0.4);
}

/* Modal auth */
.modal-tab-active-login {
    background: linear-gradient(to bottom, rgba(252, 208, 111, 0.15), #fff) !important;
    border-bottom: 3px solid var(--brand-gold) !important;
    color: var(--brand-primary) !important;
}

.modal-tab-active-registro {
    background: linear-gradient(to bottom, rgba(45, 140, 158, 0.12), #fff) !important;
    border-bottom: 3px solid var(--brand-secondary) !important;
    color: var(--brand-primary) !important;
}

.modal-icon-login {
    background: linear-gradient(to bottom right, var(--brand-gold), var(--brand-gold-dark)) !important;
}

.modal-icon-registro {
    background: linear-gradient(to bottom right, var(--brand-secondary), var(--brand-accent)) !important;
}

.modal-captcha-box {
    background: linear-gradient(to right, rgba(7, 190, 214, 0.1), rgba(45, 140, 158, 0.1)) !important;
    border: 2px solid rgba(7, 190, 214, 0.3) !important;
}

.alert-success-brand {
    background-color: rgba(7, 190, 214, 0.1) !important;
    border: 1px solid rgba(7, 190, 214, 0.3) !important;
    color: var(--brand-primary) !important;
}

/* Enlaces */
.entry-content a {
    color: var(--brand-secondary);
}

.entry-content a:hover {
    color: var(--brand-accent);
}

.footer-credit-link {
    color: var(--brand-gold) !important;
}

.footer-credit-link:hover {
    color: var(--brand-gold-light) !important;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
}

/* =============================================
   PLUGIN POLLA - OVERRIDES
   ============================================= */
.polla-btn-guardar {
    background: var(--brand-gold) !important;
    color: var(--brand-primary) !important;
    font-weight: 600;
}

.polla-btn-guardar:hover:not(:disabled) {
    background: var(--brand-gold-dark) !important;
}

.polla-editar-pronostico:hover {
    background: rgba(7, 190, 214, 0.15) !important;
    color: var(--brand-primary) !important;
}

.polla-pronostico-usuario {
    color: var(--brand-secondary) !important;
}

.polla-ranking {
    background: #fff;
    border: 1px solid rgba(45, 140, 158, 0.25);
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 55, 100, 0.08);
}

.polla-ranking-table thead {
    background: var(--brand-primary) !important;
    color: #fff;
}

.polla-ranking-table thead th {
    color: #fff !important;
}

.polla-ranking-row:hover {
    background: rgba(7, 190, 214, 0.08) !important;
}

.polla-link-usuario {
    color: var(--brand-secondary) !important;
    font-weight: 600;
}

.polla-link-usuario:hover {
    color: var(--brand-accent) !important;
}

.polla-puntos {
    color: var(--brand-gold) !important;
}

.polla-stat-item {
    background: rgba(0, 55, 100, 0.04) !important;
    border: 1px solid rgba(45, 140, 158, 0.15);
}

.polla-pendiente-pronostico {
    background: rgba(252, 208, 111, 0.25) !important;
    color: var(--brand-primary) !important;
}

.polla-pronostico-existente,
.polla-puntos-obtenidos {
    background: rgba(45, 140, 158, 0.12) !important;
    color: var(--brand-primary) !important;
}

.polla-acierto-exacto {
    border-left-color: var(--brand-gold) !important;
}

.polla-acierto-parcial {
    border-left-color: var(--brand-accent) !important;
}

.polla-perfil-header {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%) !important;
    color: #fff !important;
}

.polla-perfil-nombre {
    color: #fff !important;
}

.polla-stat-value {
    color: var(--brand-gold) !important;
}

.polla-partido-item,
.polla-partido-pronosticado-item {
    border-color: rgba(45, 140, 158, 0.2) !important;
    border-radius: 8px;
}

.polla-form-pronostico {
    background: rgba(0, 55, 100, 0.03) !important;
    border: 1px solid rgba(45, 140, 158, 0.15);
}

.polla-inputs-goles input[type="number"]:focus {
    border-color: var(--brand-gold) !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(254, 183, 27, 0.25);
}

.polla-partidos-pendientes,
.polla-partidos-pronosticados {
    background: #fff;
    border: 1px solid rgba(45, 140, 158, 0.25);
    border-radius: 0.5rem;
    overflow: hidden;
}

/* Módulo de partidos del plugin (shortcode) */
main [class*="col-span-3"] > .bg-white,
.polla-partidos-pendientes > .bg-white,
.polla-partidos-pronosticados > .bg-white,
.bg-white:has(#tab-pendientes) {
    border: 1px solid rgba(45, 140, 158, 0.25) !important;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 55, 100, 0.08);
}

/* Ranking del plugin en sidebar */
aside .bg-white.border-yellow-500,
.bg-white.border-l-4.border-yellow-500 {
    background: #fff !important;
    border: 1px solid rgba(45, 140, 158, 0.25) !important;
    border-left: 4px solid var(--brand-gold) !important;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 55, 100, 0.08);
}

aside .bg-white.border-yellow-500 > .border-b,
.bg-white.border-l-4.border-yellow-500 > .border-b {
    background-color: rgba(0, 55, 100, 0.05) !important;
    border-bottom-color: rgba(45, 140, 158, 0.2) !important;
}

aside .bg-white.border-yellow-500 h3,
.bg-white.border-l-4.border-yellow-500 h3 {
    color: var(--brand-primary) !important;
}

aside .bg-white.border-yellow-500 .fa-trophy,
.bg-white.border-l-4.border-yellow-500 .fa-trophy {
    color: var(--brand-gold) !important;
}

.bg-gradient-to-r.from-yellow-50 {
    background: linear-gradient(to right, rgba(252, 208, 111, 0.15), #fff) !important;
}

aside [class*="col-span-2"] .polla-ranking,
aside .polla-ranking {
    background: #fff !important;
    border: 1px solid rgba(45, 140, 158, 0.25) !important;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 55, 100, 0.08);
}

.tab-button.border-yellow-500,
#tab-pendientes.border-yellow-500 {
    border-bottom-color: var(--brand-gold) !important;
    color: var(--brand-primary) !important;
    background-color: rgba(0, 55, 100, 0.05) !important;
}

.bg-yellow-50 {
    background-color: rgba(252, 208, 111, 0.12) !important;
}

.border-yellow-400 {
    border-color: var(--brand-gold) !important;
}

.text-yellow-700 {
    color: var(--brand-primary) !important;
}

.bg-yellow-100 {
    background-color: rgba(252, 208, 111, 0.2) !important;
}

.save-prediction-btn.bg-yellow-500 {
    background-color: var(--brand-gold) !important;
    color: var(--brand-primary) !important;
}

.save-prediction-btn.bg-yellow-500:hover {
    background-color: var(--brand-gold-dark) !important;
}

.polla-mensaje-info {
    background: rgba(7, 190, 214, 0.1) !important;
    border-color: var(--brand-accent) !important;
    color: var(--brand-primary) !important;
}

.polla-puntos-valor {
    color: var(--brand-gold) !important;
}