/*
 * Calculadoras de Matched Betting — diseño premium
 * Selectores específicos para evitar conflictos con Bootstrap/Picostrap
 */

/* ── Wrapper card ── */
.calc-wrapper
{
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 2px 24px rgba(0, 25, 58, 0.10), 0 1px 4px rgba(0,0,0,.06);
    overflow: visible;
    max-width: 820px;
    margin: 2rem auto;
    font-family: inherit;
}

.calc-wrapper.calc-has-private,
.calc-wrapper.calc-no-private
{
    max-width: 1260px;
}

/* ── Barra de tabs ── */
.calc-wrapper .calc-tabs
{
    display: flex !important;
    flex-wrap: wrap;
    background: #00193a;
    padding: .5rem .5rem 0;
    gap: .2rem;
    margin: 0 !important;
    border: none !important;
    list-style: none;
}

.calc-wrapper .calc-tab-btn
{
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    margin-bottom: -1px;
    padding: .7rem 1.1rem;
    font-weight: 700;
    font-size: .82rem;
    color: rgba(255, 255, 255, .5) !important;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    transition: color .15s, background .15s, border-color .15s;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1;
    box-shadow: none !important;
}

.calc-wrapper .calc-tab-btn:hover
{
    color: #ffffff !important;
    background: rgba(255, 255, 255, .09) !important;
}

.calc-wrapper .calc-tab-btn.active
{
    color: #ddb562 !important;
    border-bottom-color: #ddb562 !important;
    background: rgba(221, 181, 98, .13) !important;
}

/* ── Panel ── */
.calc-wrapper .calc-panel
{
    display: none;
    padding: 2rem 2.2rem 1.8rem;
}

@media (max-width: 600px)
{
    .calc-wrapper .calc-panel { padding: 1.4rem 1.1rem 1.4rem; }
}

/* ── Badge tipo ── */
.calc-wrapper .calc-badge
{
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: #f0f4f8;
    color: #00193a;
    font-size: .72rem;
    font-weight: 800;
    padding: .28rem .8rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 1rem;
}

/* ── Descripción ── */
.calc-wrapper .calc-desc
{
    color: #6b7280;
    font-size: .9rem;
    line-height: 1.65;
    margin: 0 0 1.6rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid #f0f2f5;
    max-width: 100%;
}

/* ── Guía rápida ── */
.calc-wrapper .calc-guide
{
    background: linear-gradient(135deg, #0b2246, #00193a);
    border-radius: 12px;
    color: #fff;
    padding: .95rem 1rem;
    margin: 0 0 1rem;
    box-shadow: 0 12px 30px rgba(0, 25, 58, .22);
}

.calc-wrapper .calc-guide__header
{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .8rem;
    margin-bottom: .65rem;
}

.calc-wrapper .calc-guide__header strong
{
    font-size: .9rem;
    font-weight: 900;
}

.calc-wrapper .calc-guide__header span
{
    color: rgba(255,255,255,.75);
    font-size: .76rem;
}

.calc-wrapper .calc-guide__steps
{
    display: grid;
    grid-template-columns: repeat(3, minmax(170px, 1fr));
    gap: .55rem;
}

.calc-wrapper .calc-guide-step
{
    display: flex;
    gap: .5rem;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 10px;
    padding: .55rem .6rem;
}

.calc-wrapper .calc-guide-step__num
{
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ddb562;
    color: #00193a;
    font-size: .78rem;
    font-weight: 900;
    flex-shrink: 0;
}

.calc-wrapper .calc-guide-step strong
{
    display: block;
    font-size: .78rem;
    font-weight: 800;
    margin-bottom: .1rem;
}

.calc-wrapper .calc-guide-step small
{
    display: block;
    font-size: .72rem;
    color: rgba(255,255,255,.82);
    line-height: 1.35;
}

/* ── Grid del formulario ── */
.calc-wrapper .calc-form
{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.5rem;
    margin-bottom: 0;
    max-width: 100%;
}

@media (max-width: 560px)
{
    .calc-wrapper .calc-form { grid-template-columns: 1fr; }
}

@media (max-width: 900px)
{
    .calc-wrapper .calc-guide__header
    {
        flex-direction: column;
        align-items: flex-start;
    }

    .calc-wrapper .calc-guide__steps
    {
        grid-template-columns: 1fr;
    }
}

/* ── Campo ── */
.calc-wrapper .calc-field
{
    display: flex;
    flex-direction: column;
    gap: .28rem;
}

.calc-wrapper .calc-field label
{
    font-weight: 700;
    font-size: .73rem;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0;
}

.calc-wrapper .calc-field input[type="number"]
{
    border: 2px solid #e5e9ef !important;
    border-radius: 10px !important;
    padding: .65rem .95rem !important;
    font-size: .98rem !important;
    font-weight: 600 !important;
    color: #00193a !important;
    background: #f8fafc !important;
    transition: border-color .15s, box-shadow .15s !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    outline: none !important;
    appearance: textfield;
    -moz-appearance: textfield;
    line-height: 1.4;
}

.calc-wrapper .calc-field input[type="number"]::-webkit-outer-spin-button,
.calc-wrapper .calc-field input[type="number"]::-webkit-inner-spin-button
{
    -webkit-appearance: none;
}

.calc-wrapper .calc-field input[type="number"]:focus
{
    border-color: #ddb562 !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(221, 181, 98, .18) !important;
}

/* Campo calculado (readonly) — destaca visualmente */
.calc-wrapper .calc-field input[type="number"][readonly]
{
    background: #00193a !important;
    color: #ddb562 !important;
    font-weight: 900 !important;
    font-size: 1.05rem !important;
    border-color: #00193a !important;
    cursor: default;
    letter-spacing: .02em;
}

.calc-wrapper .calc-field input[type="number"][readonly]:focus
{
    box-shadow: 0 0 0 3px rgba(0, 25, 58, .18) !important;
}

.calc-wrapper .calc-hint
{
    font-size: .72rem;
    color: #9ca3af;
    line-height: 1.3;
    margin: 0;
}

/* ── Botón calcular ── */
.calc-wrapper .calc-btn
{
    grid-column: 1 / -1;
    background: linear-gradient(135deg, #ddb562 0%, #c9983a 100%) !important;
    color: #00193a !important;
    border: none !important;
    border-radius: 12px !important;
    padding: .95rem 2rem !important;
    font-weight: 900 !important;
    font-size: .95rem !important;
    cursor: pointer !important;
    transition: transform .12s, box-shadow .12s !important;
    margin-top: 1rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow: 0 4px 14px rgba(221, 181, 98, .3) !important;
    width: 100%;
}

.calc-wrapper .calc-btn:hover
{
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(221, 181, 98, .45) !important;
}

.calc-wrapper .calc-btn:active
{
    transform: translateY(0) !important;
}

/* ── Bloque de resultados ── */
.calc-wrapper .calc-results
{
    display: none;
    margin-top: 1.8rem;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid #00193a;
}

.calc-wrapper .calc-results-header
{
    background: #00193a;
    padding: .7rem 1.4rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.calc-wrapper .calc-results-header h4
{
    margin: 0 !important;
    font-weight: 900 !important;
    color: #ddb562 !important;
    font-size: .82rem !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    padding: 0 !important;
    border: none !important;
}

.calc-wrapper .calc-results-body
{
    background: #fafbfc;
    padding: .2rem 0;
}

.calc-wrapper .calc-result-row
{
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: .75rem 1.4rem !important;
    border-bottom: 1px solid #f0f2f5 !important;
    gap: 1rem;
    margin: 0 !important;
}

.calc-wrapper .calc-result-row:last-child
{
    border-bottom: none !important;
}

.calc-wrapper .calc-result-label
{
    color: #6b7280;
    font-weight: 600;
    font-size: .85rem;
    flex: 1;
}

.calc-wrapper .calc-result-value
{
    font-weight: 900 !important;
    font-size: 1.1rem !important;
    min-width: 80px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: #374151;
}

.calc-wrapper .calc-result-value.positive { color: #16a34a !important; }
.calc-wrapper .calc-result-value.negative { color: #dc2626 !important; }

/* ── Disclaimer ── */
.calc-wrapper .calc-disclaimer
{
    font-size: .74rem;
    color: #b0b8c4;
    margin-top: 1.4rem;
    line-height: 1.6;
    padding-top: .8rem;
    border-top: 1px solid #f0f2f5;
}

.calc-wrapper .calc-split
{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1rem;
    padding: 1rem;
    background: linear-gradient(180deg, rgba(0, 25, 58, .04), rgba(0, 25, 58, 0));
}

@media (min-width: 1200px)
{
    .calc-wrapper .calc-split
    {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    }
}

.calc-wrapper .calc-box
{
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 1.2rem;
    min-width: 0;
}

.calc-wrapper .calc-box__header
{
    margin-bottom: 1rem;
}

.calc-wrapper .calc-box__kicker
{
    display: inline-flex;
    background: #f3f4f6;
    color: #00193a;
    border-radius: 999px;
    padding: .24rem .72rem;
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.calc-wrapper .calc-box__header h3
{
    margin: .7rem 0 .42rem;
    color: #00193a;
    font-size: 1.2rem;
    font-weight: 900;
}

.calc-wrapper .calc-box__header p
{
    margin: 0;
    color: #6b7280;
    line-height: 1.55;
    font-size: .9rem;
}

.calc-wrapper .calc-box--private .calc-tabs
{
    margin-top: .3rem !important;
    border-radius: 12px;
}

.calc-wrapper .calc-tab-btn.is-locked
{
    opacity: .55;
    cursor: not-allowed;
}

.calc-wrapper .calc-tab-btn--private::after
{
    content: 'PRO';
    margin-left: .44rem;
    font-size: .58rem;
    background: rgba(221, 181, 98, .2);
    color: #ddb562;
    padding: .12rem .35rem;
    border-radius: 999px;
    font-weight: 900;
    letter-spacing: .07em;
}

.calc-wrapper .calc-panel--private.is-locked .calc-form,
.calc-wrapper .calc-panel--private.is-locked .calc-guide,
.calc-wrapper .calc-panel--private.is-locked .calc-results
{
    opacity: .5;
    pointer-events: none;
}

.calc-wrapper .calc-panel-lock
{
    margin-top: .9rem;
    border: 1px dashed rgba(0, 25, 58, .24);
    border-radius: 12px;
    background: #f8fafc;
    padding: .9rem;
}

.calc-wrapper .calc-panel-lock strong
{
    display: block;
    color: #00193a;
    margin-bottom: .38rem;
    font-size: .94rem;
}

.calc-wrapper .calc-panel-lock p
{
    margin: 0;
    color: #64748b;
    line-height: 1.58;
    font-size: .86rem;
}

.calc-wrapper .calc-panel-lock .calc-subscribe-btn
{
    margin-top: .65rem;
}

.calc-wrapper .calc-private-locked
{
    margin-top: 1rem;
    border: 1px dashed rgba(0, 25, 58, .22);
    background: #f8fafc;
    border-radius: 14px;
    padding: 1rem;
}

.calc-wrapper .calc-private-locked strong
{
    display: block;
    color: #00193a;
    margin-bottom: .44rem;
    font-size: .98rem;
}

.calc-wrapper .calc-private-locked p
{
    margin: 0;
    color: #64748b;
    font-size: .9rem;
    line-height: 1.6;
}

.calc-wrapper .calc-private-locked__actions
{
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: .85rem;
}

.calc-wrapper .calc-subscribe-btn
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 10px;
    padding: .72rem 1rem;
    background: linear-gradient(135deg, #ddb562 0%, #c9983a 100%);
    color: #00193a;
    font-weight: 900;
    font-size: .83rem;
    letter-spacing: .03em;
}

.calc-wrapper .calc-soft-link
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 10px;
    padding: .72rem 1rem;
    border: 1px solid rgba(0, 25, 58, .14);
    color: #00193a;
    font-weight: 700;
    font-size: .82rem;
}

.calc-wrapper .calc-public-cta
{
    margin-top: .95rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.calc-wrapper .calc-public-cta__text
{
    margin: 0;
    color: #64748b;
    line-height: 1.6;
    font-size: .88rem;
}

.calc-wrapper .calc-public-cta .calc-subscribe-btn
{
    width: 100%;
}