
:root {
    --primary: #029264 !important;
    --lqc-primary: #029264;
    --lqc-primary-2: #00875a;
    --lqc-accent: #fb4141;
    --lqc-accent-2: #401c1c;
    --lqc-bg: #f4f7f4;
    --lqc-soft: #e8f5e9;
    --lqc-border: #d6e2d8;
    --lqc-text: #111827;
    --lqc-muted: #5f7667;
    --lqc-closed: #9ca3af;

    --lqc-btn-primary-bg: #006847;
    --lqc-btn-primary-text: #ffffff;
    --lqc-btn-primary-border: #024b34;

    --lqc-btn-secondary-bg: #ffffff;
    --lqc-btn-secondary-text: #006847;
    --lqc-btn-secondary-border: #d6e2d8;

    --lqc-btn-action-bg: #ff3d3d;
    --lqc-btn-action-text: #111827;
    --lqc-btn-action-border: #2b1212;

    --lqc-winner-banner-bg: #006847;
    --lqc-winner-banner-text: #ffffff;
    --lqc-winner-banner-accent: #00875a;
    --lqc-winner-pill-bg: #c94f4f;
    --lqc-winner-pill-text: #ffffff;
}


/* ===== LQC GLOBAL BUTTON COLOR SYSTEM ===== */
button,
.btn,
.btn-main,
.btn-primary,
.btn-outline,
.btn-play,
.btn-save,
.btn-ranking,
.admin-q-actions a,
.admin-action-btn,
.wa-copy-btn,
.hero-btn,
.btn-profile,
.lqc-back-fixed,
.back {
    border-style: solid !important;
    border-width: 1px !important;
}

.btn-primary,
.btn-play,
.btn-save,
.btn-main,
.wa-copy-btn,
button[type="submit"]:not(.btn-small-delete):not(.btn-small-edit) {
    background: var(--lqc-btn-primary-bg) !important;
    color: var(--lqc-btn-primary-text) !important;
    border-color: var(--lqc-btn-primary-border) !important;
}

.btn-outline,
.btn-ranking,
.admin-q-actions a,
.admin-action-btn,
.hero-btn,
.btn-profile,
.lqc-back-fixed,
.back,
.btn-small-edit {
    background: var(--lqc-btn-secondary-bg) !important;
    color: var(--lqc-btn-secondary-text) !important;
    border-color: var(--lqc-btn-secondary-border) !important;
}

.btn-delete,
.btn-danger,
.logout,
.btn-logout,
.lqc-userbar-logout,
.btn-small-delete,
button[name="eliminar_paleta"],
button[name="eliminar_tema_base"] {
    background: var(--lqc-btn-action-bg) !important;
    color: var(--lqc-btn-action-text) !important;
    border-color: var(--lqc-btn-action-border) !important;
}
/* ===== END LQC GLOBAL BUTTON COLOR SYSTEM ===== */


body {
    background: var(--lqc-bg) !important;
    color: var(--lqc-text) !important;
}

.logo,
.nav-link,
.section-title.active-title,
.rank,
.pts,
.winner-card .winner-points,
.totales-box .value,
h1,
h2,
h3 {
    color: var(--lqc-primary) !important;
}

.hero {
    background: linear-gradient(135deg, var(--lqc-primary), var(--lqc-primary-2)) !important;
}

.btn-play,
.btn-primary,
.btn-add,
.btn-pub,
.btn-edit,
button[type="submit"] {
    background: var(--lqc-primary) !important;
    color: #ffffff !important;
    border-color: var(--lqc-primary) !important;
}

.btn-ranking,
.btn-rules,
.rules-link,
a[href*="ranking_quiniela.php"],
a[href*="reglas_quiniela.php"] {
    background: var(--lqc-accent) !important;
    color: #111827 !important;
    border-color: var(--lqc-accent-2) !important;
}

.btn-logout,
.btn-delete,
a[href*="logout.php"] {
    color: var(--lqc-accent-2) !important;
}

.q-card:not(.closed),
.winner-card {
    border-left-color: var(--lqc-primary) !important;
}

.q-card.closed {
    border-left-color: var(--lqc-closed) !important;
}

.card,
.q-card,
.q-row,
.table-wrap,
.rules-card,
.winner-card,
.totales-box,
.admin-card,
.theme-card {
    border-color: var(--lqc-border) !important;
}

th {
    background: var(--lqc-soft) !important;
    color: var(--lqc-text) !important;
}

.badge-open {
    background: var(--lqc-soft) !important;
    color: var(--lqc-primary) !important;
}

.badge-closed {
    background: #F3F4F6 !important;
    color: #6B7280 !important;
}

.prediction.exact {
    background: var(--lqc-soft) !important;
    color: var(--lqc-primary) !important;
    border-color: var(--lqc-border) !important;
}

.prediction.win {
    background: #FDECEC !important;
    color: #111827 !important;
    border-color: #F3B6B6 !important;
}

.q-id {
    background: var(--lqc-soft) !important;
    color: var(--lqc-text) !important;
    border-color: var(--lqc-border) !important;
}

input,
select,
textarea {
    border-color: var(--lqc-border) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--lqc-primary) !important;
    outline-color: var(--lqc-primary) !important;
}


/* ===== LQC BRANDING ===== */
.logo.brand-link,
a.logo.brand-link,
.logo {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
}

.brand-mark {
    width: 42px;
    height: 42px;
    object-fit: contain;
    display: inline-block;
    flex: 0 0 auto;
}

.brand-name {
    font-weight: 900;
    line-height: 1.05;
    color: var(--lqc-primary) !important;
}

.login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    text-align: center;
}

.login-brand-logo {
    width: 110px;
    max-width: 42vw;
    height: auto;
    display: block;
}

.login-brand h2 {
    margin: 0 !important;
    color: var(--lqc-primary) !important;
}

.login-brand-tag {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--lqc-accent) !important;
}

@media (max-width: 700px) {
    .brand-mark {
        width: 36px;
        height: 36px;
    }

    .brand-name {
        font-size: 15px;
    }

    .login-brand-logo {
        width: 92px;
    }
}
/* ===== END LQC BRANDING ===== */


/* ===== LQC GLOBAL BUTTON SIZE ===== */
:root {
    --lqc-btn-padding-y: 11px;
    --lqc-btn-padding-x: 16px;
    --lqc-btn-font-size: 14px;
    --lqc-btn-radius: 12px;
    --lqc-btn-min-height: 42px;
}

button,
.btn,
.btn-link,
.btn-main,
.btn-primary,
.btn-save,
.btn-add,
.btn-pub,
.btn-edit,
.btn-play,
.btn-ranking,
.btn-rules,
.btn-rules-clean,
.template-btn {
    padding: var(--lqc-btn-padding-y) var(--lqc-btn-padding-x) !important;
    font-size: var(--lqc-btn-font-size) !important;
    border-radius: var(--lqc-btn-radius) !important;
    min-height: var(--lqc-btn-min-height) !important;
    line-height: 1.15 !important;
}

/* En escritorio, los botones dentro de tarjetas no deben verse enormes */
@media (min-width: 700px) {
    .card button,
    .card .btn,
    .card .btn-link,
    .card .btn-main,
    .card .btn-primary,
    .card .btn-save {
        width: auto !important;
        max-width: 280px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    .card form > button {
        margin-top: 14px;
    }
}

/* En móvil sí conviene que botones principales ocupen el ancho */
@media (max-width: 699px) {
    .card button,
    .card .btn,
    .card .btn-main,
    .card .btn-primary,
    .card .btn-save {
        width: 100% !important;
    }
}
/* ===== END LQC GLOBAL BUTTON SIZE ===== */


/* ===== LQC GLOBAL BUTTON WIDTH FINAL ===== */

@media (min-width: 700px) {
    button,
    .btn,
    .btn-link,
    .btn-main,
    .btn-primary,
    .btn-save,
    .btn-add,
    .btn-pub,
    .btn-edit,
    .btn-play,
    .btn-ranking,
    .btn-rules,
    .btn-rules-clean,
    .template-btn {
        width: auto !important;
        max-width: 240px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
    }

    form > button {
        width: auto !important;
        max-width: 240px !important;
    }

    .group-actions .btn-link,
    .theme-actions button,
    .theme-actions a {
        width: auto !important;
        max-width: 240px !important;
    }
}

@media (max-width: 699px) {
    button,
    .btn,
    .btn-main,
    .btn-primary,
    .btn-save {
        width: 100% !important;
        max-width: 100% !important;
    }
}
/* ===== END LQC GLOBAL BUTTON WIDTH FINAL ===== */



/* ===== LQC GLOBAL BACK BUTTON ===== */
.lqc-back-fixed {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 34px !important;
    margin: 12px 0 8px 12px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.94) !important;
    color: var(--lqc-primary, #006847) !important;
    border: 1px solid var(--lqc-border, #D6E2D8) !important;
    box-shadow: 0 4px 12px rgba(17,24,39,.08) !important;
    text-decoration: none !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
}

.lqc-back-fixed:hover {
    transform: translateY(-1px);
}

@media (max-width: 560px) {
    .lqc-back-fixed {
        margin: 10px 0 6px 10px !important;
        padding: 7px 10px !important;
        font-size: 11px !important;
    }
}
/* ===== END LQC GLOBAL BACK BUTTON ===== */


/* ===== LQC FORCE GLOBAL BUTTON COLORS FINAL ===== */
a.btn,
.btn,
button,
input[type="submit"],
.btn-main,
.btn-primary,
.btn-outline,
.btn-play,
.btn-save,
.btn-ranking,
.admin-q-actions a,
.admin-action-btn,
.wa-copy-btn,
.hero-btn,
.btn-profile {
    min-height: var(--lqc-btn-min-height, 34px) !important;
    padding: var(--lqc-btn-padding-y, 8px) var(--lqc-btn-padding-x, 13px) !important;
    border-radius: var(--lqc-btn-radius, 10px) !important;
    font-size: var(--lqc-btn-font-size, 12px) !important;
    font-weight: 950 !important;
    text-decoration: none !important;
    border-width: 1px !important;
    border-style: solid !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    line-height: 1.1 !important;
}

/* Primario */
.btn-primary,
.btn-play,
.btn-save,
.btn-main,
.wa-copy-btn,
button[type="submit"]:not(.btn-small-delete):not(.btn-small-edit),
input[type="submit"] {
    background: var(--lqc-btn-primary-bg) !important;
    color: var(--lqc-btn-primary-text) !important;
    border-color: var(--lqc-btn-primary-border) !important;
}

/* Secundario */
.btn-outline,
.btn-ranking,
.admin-q-actions a,
.admin-action-btn,
.hero-btn,
.btn-profile,
.btn-small-edit {
    background: var(--lqc-btn-secondary-bg) !important;
    color: var(--lqc-btn-secondary-text) !important;
    border-color: var(--lqc-btn-secondary-border) !important;
}

/* Volver: siempre ovalado */
.back,
.lqc-back-fixed,
a.back,
a.lqc-back-fixed {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 34px !important;
    padding: 8px 13px !important;
    border-radius: 999px !important;
    background: var(--lqc-btn-secondary-bg) !important;
    color: var(--lqc-btn-secondary-text) !important;
    border: 1px solid var(--lqc-btn-secondary-border) !important;
    text-decoration: none !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
}

/* Acción / peligro */
.btn-delete,
.btn-danger,
.logout,
.btn-logout,
.lqc-userbar-logout,
.btn-small-delete,
button[name="eliminar_paleta"],
button[name="eliminar_tema_base"] {
    background: var(--lqc-btn-action-bg) !important;
    color: var(--lqc-btn-action-text) !important;
    border-color: var(--lqc-btn-action-border) !important;
}
/* ===== END LQC FORCE GLOBAL BUTTON COLORS FINAL ===== */


/* ===== LQC WINNER BANNER FROM THEME ===== */
.final-winner-section .winner-showcase {
    background:
        radial-gradient(circle at top left, rgba(255,255,255,.22), transparent 28%),
        linear-gradient(135deg, var(--lqc-winner-banner-bg), var(--lqc-winner-banner-accent)) !important;
    color: var(--lqc-winner-banner-text) !important;
}

.final-winner-section .winner-showcase h2,
.final-winner-section .winner-kicker,
.final-winner-section .winner-pill {
    color: var(--lqc-winner-banner-text) !important;
}

.final-winner-section .winner-kicker,
.final-winner-section .winner-pill {
    background: var(--lqc-winner-pill-bg) !important;
    color: var(--lqc-winner-pill-text) !important;
    border-color: var(--lqc-winner-banner-accent) !important;
}
/* ===== END LQC WINNER BANNER FROM THEME ===== */


/* ===== LQC STANDARD BUTTON CLASSES ===== */
.lqc-btn,
a.lqc-btn,
button.lqc-btn {
    min-height: var(--lqc-btn-min-height, 34px) !important;
    padding: var(--lqc-btn-padding-y, 8px) var(--lqc-btn-padding-x, 13px) !important;
    border-radius: var(--lqc-btn-radius, 10px) !important;
    font-size: var(--lqc-btn-font-size, 12px) !important;
    font-weight: 950 !important;
    text-decoration: none !important;
    border-width: 1px !important;
    border-style: solid !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    line-height: 1.1 !important;
    cursor: pointer !important;
}

.lqc-btn-primary {
    background: var(--lqc-btn-primary-bg) !important;
    color: var(--lqc-btn-primary-text) !important;
    border-color: var(--lqc-btn-primary-border) !important;
}

.lqc-btn-secondary {
    background: var(--lqc-btn-secondary-bg) !important;
    color: var(--lqc-btn-secondary-text) !important;
    border-color: var(--lqc-btn-secondary-border) !important;
}

.lqc-btn-action {
    background: var(--lqc-btn-action-bg) !important;
    color: var(--lqc-btn-action-text) !important;
    border-color: var(--lqc-btn-action-border) !important;
}

.lqc-btn-disabled,
.lqc-btn:disabled,
button.lqc-btn:disabled {
    opacity: .55 !important;
    cursor: not-allowed !important;
}
/* ===== END LQC STANDARD BUTTON CLASSES ===== */

/* ===== LQC FINAL BUTTON TYPE OVERRIDES ===== */

/* Primario */
a.lqc-btn.lqc-btn-primary,
button.lqc-btn.lqc-btn-primary,
input.lqc-btn.lqc-btn-primary,
.btn-play.lqc-btn-primary,
.btn-save.lqc-btn-primary,
.btn-primary.lqc-btn-primary {
    background: var(--lqc-btn-primary-bg) !important;
    color: var(--lqc-btn-primary-text) !important;
    border-color: var(--lqc-btn-primary-border) !important;
}

/* Secundario */
a.lqc-btn.lqc-btn-secondary,
button.lqc-btn.lqc-btn-secondary,
input.lqc-btn.lqc-btn-secondary,
.btn-ranking.lqc-btn-secondary,
.toggle-history.lqc-btn-secondary,
.back.lqc-btn-secondary,
.lqc-back-fixed.lqc-btn-secondary,
.btn-rules-clean,
.btn-rules,
.rules-link {
    background: var(--lqc-btn-secondary-bg) !important;
    color: var(--lqc-btn-secondary-text) !important;
    border-color: var(--lqc-btn-secondary-border) !important;
}

/* Acción / peligro */
a.lqc-btn.lqc-btn-action,
button.lqc-btn.lqc-btn-action,
input.lqc-btn.lqc-btn-action,
.logout.lqc-btn-action,
.btn-logout.lqc-btn-action,
.btn-close.lqc-btn-action,
.btn-delete.lqc-btn-action,
.btn-danger.lqc-btn-action,
.btn-small-delete.lqc-btn-action {
    background: var(--lqc-btn-action-bg) !important;
    color: var(--lqc-btn-action-text) !important;
    border-color: var(--lqc-btn-action-border) !important;
}

/* Botones tipo enlace que no tenían forma estándar */
.btn-rules-clean,
.btn-rules,
.rules-link {
    min-height: var(--lqc-btn-min-height, 34px) !important;
    padding: var(--lqc-btn-padding-y, 8px) var(--lqc-btn-padding-x, 13px) !important;
    border-radius: var(--lqc-btn-radius, 10px) !important;
    font-size: var(--lqc-btn-font-size, 12px) !important;
    font-weight: 950 !important;
    border-width: 1px !important;
    border-style: solid !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}

/* ===== END LQC FINAL BUTTON TYPE OVERRIDES ===== */

/* ===== LQC FORCE REGLAS Y CERRAR EXACTOS ===== */

/* Ver reglas de esta quiniela */
a[href*="reglas_quiniela.php"],
a[href*="reglas_quiniela.php"].lqc-btn,
.btn-rules,
.btn-rules-clean,
.rules-link {
    background: var(--lqc-btn-secondary-bg) !important;
    color: var(--lqc-btn-secondary-text) !important;
    border-color: var(--lqc-btn-secondary-border) !important;
}

/* Cerrar quiniela / cerrar resultados */
button[name*="cerrar"],
button[name*="cerrar"].lqc-btn,
.btn-close,
.btn-close.lqc-btn {
    background: var(--lqc-btn-action-bg) !important;
    color: var(--lqc-btn-action-text) !important;
    border-color: var(--lqc-btn-action-border) !important;
}

/* ===== END LQC FORCE REGLAS Y CERRAR EXACTOS ===== */
