/**
 * Granalla Calculadora — Diseño adaptado a oro-banco.com
 * Estética: blanco/crema, tipografía serif, acentos dorado discretos
 * Archivo: assets/css/granalla-calculadora.css
 */

:root {
    --og-gold:        #C9A84C;
    --og-gold-light:  #E8D5A3;
    --og-gold-pale:   rgba(201, 168, 76, 0.10);
    --og-gold-border: rgba(201, 168, 76, 0.30);
    --og-cream:       #FAF8F4;
    --og-cream-2:     #F2EEE5;
    --og-white:       #FFFFFF;
    --og-text:        #1A1208;
    --og-text-2:      #5A4E3A;
    --og-text-3:      #9A8E78;
    --og-border:      rgba(90, 78, 58, 0.13);
    --og-border-2:    rgba(90, 78, 58, 0.26);
    --og-success:     #3D7A54;
    --og-error:       #A83030;
    --og-radius:      10px;
    --og-radius-sm:   6px;
    --og-shadow:      0 2px 20px rgba(90, 78, 58, 0.09), 0 1px 4px rgba(90, 78, 58, 0.05);
    --og-tr:          cubic-bezier(.4, 0, .2, 1);
}

/* ─── Wrapper ────────────────────────────────────────────────────────────────── */
.ob-granalla-wrap {
    background:     var(--og-white);
    border:         1px solid var(--og-border-2);
    border-radius:  var(--og-radius);
    box-shadow:     var(--og-shadow);
    color:          var(--og-text);
    font-family:    inherit;
    max-width:      620px;
    margin:         2rem auto;
    overflow:       hidden;
}

.ob-granalla-wrap::before {
    content:    '';
    display:    block;
    height:     1px;
    background: linear-gradient(90deg, transparent 5%, var(--og-gold) 35%, var(--og-gold-light) 65%, transparent 95%);
}

/* ─── Header ─────────────────────────────────────────────────────────────────── */
.ob-granalla__header {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             .75rem;
    padding:         1.4rem 1.75rem 1.2rem;
    background:      var(--og-cream);
    border-bottom:   1px solid var(--og-border);
}

.ob-granalla__title {
    display:     flex;
    align-items: center;
    gap:         .5rem;
}

.ob-granalla__metal-icon {
    color:      var(--og-gold);
    font-size:  1rem;
    line-height: 1;
}

.ob-granalla__name {
    margin:      0;
    font-size:   1.3rem;
    font-weight: 400;
    color:       var(--og-text);
    font-family: Georgia, 'Times New Roman', serif;
}

.ob-granalla__spot-wrap {
    display:        flex;
    flex-direction: column;
    align-items:    flex-end;
    gap:            .2rem;
}

.ob-granalla__live-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            .28rem;
    background:     var(--og-gold-pale);
    border:         1px solid var(--og-gold-border);
    border-radius:  100px;
    padding:        .12rem .5rem;
    font-size:      .6rem;
    font-weight:    600;
    letter-spacing: .1em;
    color:          #8B6914;
    text-transform: uppercase;
}

.ob-granalla__live-dot {
    width:         5px;
    height:        5px;
    border-radius: 50%;
    background:    var(--og-gold);
    animation:     ob-pulse 2s infinite;
}

@keyframes ob-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(201,168,76,.55); }
    70%  { box-shadow: 0 0 0 5px rgba(201,168,76,0); }
    100% { box-shadow: 0 0 0 0 rgba(201,168,76,0); }
}

.ob-granalla__spot-value {
    font-size:   1rem;
    font-weight: 600;
    color:       var(--og-text);
    font-variant-numeric: tabular-nums;
    transition:  color .25s, transform .2s var(--og-tr);
}

.ob-granalla__spot-value.ob-updating {
    color:     var(--og-gold);
    transform: scale(1.03);
}

.ob-granalla__spot-label {
    font-size:  .65rem;
    color:      var(--og-text-3);
    text-align: right;
}

/* ─── Input ──────────────────────────────────────────────────────────────────── */
.ob-granalla__input-section {
    padding: 1.4rem 1.75rem .9rem;
}

.ob-granalla__input-label {
    display:        block;
    font-size:      .65rem;
    letter-spacing: .10em;
    text-transform: uppercase;
    color:          var(--og-text-3);
    font-weight:    500;
    margin-bottom:  .65rem;
}

.ob-granalla__input-row {
    display:       flex;
    align-items:   center;
    gap:           .5rem;
    margin-bottom: 1rem;
}

.ob-granalla__input-num {
    flex:          1;
    background:    var(--og-cream);
    border:        1px solid var(--og-border-2);
    border-radius: var(--og-radius-sm);
    color:         var(--og-text);
    font-size:     2.1rem;
    font-weight:   300;
    font-family:   Georgia, 'Times New Roman', serif;
    line-height:   1;
    padding:       .45rem .9rem;
    text-align:    center;
    outline:       none;
    transition:    border-color .2s, box-shadow .2s, background .2s;
    -moz-appearance: textfield;
}

.ob-granalla__input-num::-webkit-inner-spin-button,
.ob-granalla__input-num::-webkit-outer-spin-button { -webkit-appearance: none; }

.ob-granalla__input-num:focus {
    border-color: var(--og-gold);
    background:   var(--og-white);
    box-shadow:   0 0 0 3px rgba(201,168,76,.12);
}

.ob-granalla__unit {
    font-size:   1.1rem;
    font-weight: 300;
    color:       var(--og-text-3);
    font-family: Georgia, serif;
}

/* Slider */
.ob-granalla__slider-wrap {
    display:        flex;
    flex-direction: column;
    gap:            .35rem;
}

.ob-granalla__slider {
    -webkit-appearance: none;
    appearance:    none;
    width:         100%;
    height:        3px;
    background:    var(--og-cream-2);
    border-radius: 100px;
    outline:       none;
    cursor:        pointer;
    border:        1px solid var(--og-border);
}

.ob-granalla__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:         19px;
    height:        19px;
    border-radius: 50%;
    background:    var(--og-white);
    border:        1.5px solid var(--og-gold);
    box-shadow:    0 1px 4px rgba(90,78,58,.18);
    cursor:        grab;
    transition:    transform .15s, box-shadow .15s;
}

.ob-granalla__slider::-webkit-slider-thumb:active {
    cursor:     grabbing;
    transform:  scale(1.18);
    box-shadow: 0 2px 8px rgba(201,168,76,.3);
}

.ob-granalla__slider::-moz-range-thumb {
    width:         19px;
    height:        19px;
    border:        1.5px solid var(--og-gold);
    border-radius: 50%;
    background:    var(--og-white);
    cursor:        grab;
    box-shadow:    0 1px 4px rgba(90,78,58,.15);
}

.ob-granalla__slider-ticks {
    display:         flex;
    justify-content: space-between;
    font-size:       .62rem;
    color:           var(--og-text-3);
    padding:         0 1px;
}

/* ─── Descuentos ─────────────────────────────────────────────────────────────── */
.ob-granalla__discounts {
    padding: 0 1.75rem 1.2rem;
}

.ob-granalla__discounts-title {
    font-size:      .65rem;
    letter-spacing: .10em;
    text-transform: uppercase;
    color:          var(--og-text-3);
    font-weight:    500;
    margin:         0 0 .55rem;
}

.ob-granalla__tiers {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap:                   .4rem;
}

.ob-granalla__tier {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    background:     var(--og-cream);
    border:         1px solid var(--og-border);
    border-radius:  var(--og-radius-sm);
    padding:        .5rem .4rem;
    text-align:     center;
    transition:     border-color .2s, background .2s, transform .15s, box-shadow .15s;
}

.ob-granalla__tier.is-active {
    border-color: var(--og-gold);
    background:   var(--og-gold-pale);
    transform:    translateY(-1px);
    box-shadow:   0 2px 8px rgba(201,168,76,.10);
}

.ob-granalla__tier-range {
    font-size:   .65rem;
    color:       var(--og-text-3);
    white-space: nowrap;
}

.ob-granalla__tier.is-active .ob-granalla__tier-range { color: #7A5A10; }

.ob-granalla__tier-discount {
    font-size:   .8rem;
    font-weight: 600;
    color:       var(--og-text-2);
    margin-top:  .12rem;
}

.ob-granalla__tier-discount.is-active-discount { color: var(--og-gold); }
.ob-granalla__tier.is-active .ob-granalla__tier-discount { color: #7A5A10; }

/* ─── Resumen ────────────────────────────────────────────────────────────────── */
.ob-granalla__summary {
    background:    var(--og-cream);
    border-top:    1px solid var(--og-border);
    border-bottom: 1px solid var(--og-border);
    padding:       1.1rem 1.75rem;
}

.ob-granalla__summary-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         .28rem 0;
}

.ob-granalla__summary-label { font-size: .82rem; color: var(--og-text-2); }

.ob-granalla__summary-value {
    font-size:   .85rem;
    font-weight: 500;
    color:       var(--og-text);
    font-variant-numeric: tabular-nums;
}

.ob-granalla__summary-row--iva {
    border-bottom:  1px solid var(--og-border);
    margin-bottom:  .35rem;
    padding-bottom: .5rem;
}

.ob-granalla__summary-row--total { padding-top: .35rem; }

.ob-granalla__total {
    font-size:   1.85rem;
    font-weight: 300;
    color:       var(--og-text);
    font-family: Georgia, 'Times New Roman', serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    transition:  color .25s, transform .2s var(--og-tr);
}

.ob-granalla__total.ob-updating {
    color:     var(--og-gold);
    transform: scale(1.01);
}

.ob-granalla__discount-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           .28rem;
    background:    rgba(61,122,84,.08);
    border:        1px solid rgba(61,122,84,.22);
    border-radius: 100px;
    padding:       .22rem .6rem;
    margin-top:    .65rem;
    font-size:     .72rem;
    font-weight:   500;
    color:         var(--og-success);
}

.ob-granalla__discount-badge::before { content: '↓'; }

/* ─── Precio/g ───────────────────────────────────────────────────────────────── */
.ob-granalla__per-gram {
    padding:       .65rem 1.75rem;
    font-size:     .75rem;
    color:         var(--og-text-3);
    text-align:    center;
    border-bottom: 1px solid var(--og-border);
}

.ob-granalla__per-gram strong {
    color:       var(--og-text-2);
    font-weight: 500;
}

/* ─── Botón ──────────────────────────────────────────────────────────────────── */
.ob-granalla__btn-cart {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             .5rem;
    width:           calc(100% - 3.5rem);
    margin:          .9rem 1.75rem;
    padding:         .85rem 1.5rem;
    background:      var(--og-gold);
    border:          none;
    border-radius:   var(--og-radius-sm);
    color:           #fff;
    cursor:          pointer;
    font-size:       .78rem;
    font-weight:     600;
    letter-spacing:  .09em;
    text-transform:  uppercase;
    transition:      background .18s, transform .15s, box-shadow .18s, opacity .18s;
    box-shadow:      0 2px 10px rgba(201,168,76,.25);
}

.ob-granalla__btn-cart:hover {
    background: #B89030;
    transform:  translateY(-1px);
    box-shadow: 0 4px 16px rgba(201,168,76,.35);
}

.ob-granalla__btn-cart:active {
    transform:  translateY(0);
    background: #A8801E;
    box-shadow: 0 1px 4px rgba(201,168,76,.2);
}

.ob-granalla__btn-cart:disabled,
.ob-granalla__btn-cart.is-loading {
    opacity:   .55;
    cursor:    not-allowed;
    transform: none;
}

.ob-granalla__btn-icon { display: flex; align-items: center; }

/* ─── Feedback ───────────────────────────────────────────────────────────────── */
.ob-granalla__feedback {
    max-height:    0;
    overflow:      hidden;
    margin:        0 1.75rem;
    border-radius: var(--og-radius-sm);
    font-size:     .8rem;
    font-weight:   500;
    text-align:    center;
    opacity:       0;
    transition:    max-height .3s var(--og-tr), padding .3s var(--og-tr), opacity .25s;
}

.ob-granalla__feedback.is-visible {
    max-height:    60px;
    padding:       .6rem 1rem;
    opacity:       1;
    margin-bottom: .4rem;
}

.ob-granalla__feedback.is-success {
    background: rgba(61,122,84,.08);
    border:     1px solid rgba(61,122,84,.22);
    color:      var(--og-success);
}

.ob-granalla__feedback.is-error {
    background: rgba(168,48,48,.07);
    border:     1px solid rgba(168,48,48,.2);
    color:      var(--og-error);
}

/* ─── Nota ───────────────────────────────────────────────────────────────────── */
.ob-granalla__note {
    font-size:   .68rem;
    color:       var(--og-text-3);
    text-align:  center;
    padding:     .55rem 1.75rem 1rem;
    margin:      0;
    line-height: 1.5;
    background:  var(--og-cream);
    border-top:  1px solid var(--og-border);
}

.ob-error {
    background:    rgba(168,48,48,.07);
    border:        1px solid rgba(168,48,48,.2);
    border-radius: var(--og-radius-sm);
    color:         var(--og-error);
    padding:       1rem;
    font-size:     .9rem;
}

/* ─── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .ob-granalla__header,
    .ob-granalla__input-section,
    .ob-granalla__discounts,
    .ob-granalla__per-gram,
    .ob-granalla__note { padding-left: 1.1rem; padding-right: 1.1rem; }

    .ob-granalla__summary { padding: .9rem 1.1rem; }

    .ob-granalla__btn-cart,
    .ob-granalla__feedback {
        width: calc(100% - 2.2rem);
        margin-left: 1.1rem;
        margin-right: 1.1rem;
    }

    .ob-granalla__input-num  { font-size: 1.75rem; }
    .ob-granalla__total      { font-size: 1.5rem; }
    .ob-granalla__tiers      { grid-template-columns: 1fr 1fr; }
}