/* ASTIC Calculadora Gasóleo
 * Scoped styles — no collision with theme or other plugins.
 * Colors match plugin-astic brand tokens. */

.astic-calc {
    --cal-brand:        #1a80b6;
    --cal-brand-dark:   #005f97;
    --cal-brand-darker: #0b3a5c;
    --cal-brand-light:  #6badde;
    --cal-text:         #4c5b6a;
    --cal-text-light:   #5f6f82;
    --cal-heading:      #1d2a3a;
    --cal-border:       #e6ebf0;
    --cal-muted:        #f5f7fa;
    --cal-surface:      #ffffff;
    --cal-success:      #2e7d32;
    --cal-danger:       #c62828;
    --cal-radius:       12px;
    --cal-radius-sm:    6px;
    --cal-shadow:       0 4px 14px rgba(0,0,0,.08);
    --cal-shadow-lg:    0 16px 40px rgba(11,58,92,.18);

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--cal-text);
    line-height: 1.5;
    max-width: 900px;
    margin: 2rem auto;
}

.astic-calc *, .astic-calc *::before, .astic-calc *::after { box-sizing: border-box; }

.astic-calc__card {
    background: var(--cal-surface);
    border: 1px solid var(--cal-border);
    border-radius: var(--cal-radius);
    box-shadow: var(--cal-shadow);
    overflow: hidden;
}

.astic-calc__header {
    background: linear-gradient(135deg, var(--cal-brand-darker) 0%, var(--cal-brand-dark) 55%, var(--cal-brand) 100%);
    color: #fff;
    padding: 32px 34px 26px;
}

/* Force light color on the title against any theme heading overrides. */
.astic-calc__title,
.astic-calc .astic-calc__title {
    margin: 0 0 10px 0 !important;
    font-size: 1.9rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #ffffff !important;
    letter-spacing: .2px;
    text-shadow: 0 1px 2px rgba(0,0,0,.18);
}

.astic-calc__subtitle {
    margin: 0;
    font-size: .95rem;
    color: rgba(255,255,255,.92) !important;
    line-height: 1.55;
}

.astic-calc__form { padding: 22px 30px 8px; }

.astic-calc__group {
    border: 0;
    margin: 0 0 14px 0;
    padding: 0;
}
.astic-calc__group legend {
    padding: 0 0 10px 0;
    font-size: .8rem;
    font-weight: 700;
    color: var(--cal-brand-dark);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.astic-calc__hint {
    margin: -4px 0 10px 0;
    font-size: .75rem;
    color: var(--cal-text-light);
    line-height: 1.4;
}

.astic-calc__row { display: grid; gap: 16px; }
.astic-calc__row--2col { grid-template-columns: 1fr 1fr; }

.astic-calc__field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.astic-calc__field:last-child { margin-bottom: 0; }

.astic-calc__field label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--cal-heading);
    letter-spacing: .2px;
}
.astic-calc__field label small {
    font-weight: 400;
    color: var(--cal-text-light);
    text-transform: none;
    letter-spacing: 0;
}

.astic-calc__field input[type="date"],
.astic-calc__field input[type="number"],
.astic-calc__field input[type="text"],
.astic-calc__field select {
    appearance: none;
    -webkit-appearance: none;
    padding: 10px 12px;
    font: inherit;
    color: var(--cal-text);
    background: var(--cal-surface);
    border: 1px solid var(--cal-border);
    border-radius: var(--cal-radius-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
    min-height: 42px;
}
.astic-calc__field select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23005f97' d='M8 11L3 6h10z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 32px;
}
.astic-calc__field input:focus,
.astic-calc__field select:focus {
    outline: none;
    border-color: var(--cal-brand);
    box-shadow: 0 0 0 3px rgba(26,128,182,.15);
}

.astic-calc__radios {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 6px;
}
.astic-calc__radio {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--cal-border);
    border-radius: var(--cal-radius-sm);
    cursor: pointer;
    font-size: .9rem;
    color: var(--cal-text);
    background: var(--cal-muted);
    transition: border-color .15s ease, background .15s ease;
}
.astic-calc__radio small { display: block; color: var(--cal-text-light); font-size: .78rem; }
.astic-calc__radio input { accent-color: var(--cal-brand-dark); }
.astic-calc__radio:has(input:checked) {
    border-color: var(--cal-brand-dark);
    background: #eaf3fa;
}

.astic-calc__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 6px 0 18px;
}

.astic-calc__btn {
    appearance: none;
    border: 0;
    padding: 11px 22px;
    background: var(--cal-brand-dark);
    color: #fff;
    font: inherit;
    font-weight: 600;
    letter-spacing: .3px;
    border-radius: var(--cal-radius-sm);
    cursor: pointer;
    transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
    min-height: 42px;
}
.astic-calc__btn:hover  { background: var(--cal-brand-darker); box-shadow: 0 6px 14px rgba(0,95,151,.25); }
.astic-calc__btn:active { transform: translateY(1px); }
.astic-calc__btn[disabled] { opacity: .6; cursor: wait; }

.astic-calc__result { padding: 0 30px; }
.astic-calc__result:empty { padding: 0; }

.astic-calc__result-card {
    margin: 10px 0 22px;
    border: 1px solid var(--cal-border);
    border-radius: var(--cal-radius);
    background: var(--cal-muted);
    padding: 22px 24px;
}

.astic-calc__notice {
    margin: 0 0 16px 0;
    padding: 12px 14px;
    border: 1px solid #f3d998;
    background: #fff8e1;
    border-radius: 6px;
    color: #6b4b00;
    font-size: .9rem;
    line-height: 1.45;
}
.astic-calc__notice strong { color: #6b4b00; }

.astic-calc__fechas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 18px;
}
.astic-calc__fecha-col {
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--cal-border);
    border-radius: var(--cal-radius-sm);
    text-align: center;
}
.astic-calc__fecha-label {
    font-size: .72rem;
    font-weight: 700;
    color: var(--cal-text-light);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 4px;
}
.astic-calc__fecha-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--cal-heading);
    line-height: 1.2;
    margin-bottom: 6px;
}
.astic-calc__fecha-precio {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--cal-brand-dark);
    line-height: 1.1;
}
.astic-calc__fecha-sub {
    margin-top: 4px;
    font-size: .78rem;
    color: var(--cal-text-light);
}

.astic-calc__headline {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: end;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--cal-border);
}
.astic-calc__headline-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--cal-text-light);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 4px;
}
.astic-calc__headline-value {
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--cal-brand-dark);
    line-height: 1.1;
}
.astic-calc__headline-value--up   { color: var(--cal-danger); }
.astic-calc__headline-value--down { color: var(--cal-success); }
.astic-calc__headline-sub {
    margin-top: 6px;
    font-size: .88rem;
    color: var(--cal-text);
}
.astic-calc__headline-sub strong { color: var(--cal-heading); }

.astic-calc__headline-var {
    text-align: right;
    padding: 10px 16px;
    border-radius: var(--cal-radius-sm);
    background: #fff;
    border: 1px solid var(--cal-border);
    min-width: 160px;
}
.astic-calc__headline-var--up   { border-color: #f5c6c2; background: #fdecea; }
.astic-calc__headline-var--down { border-color: #c8e6c9; background: #ecf7ed; }
.astic-calc__headline-pct {
    display: block;
    margin-top: 2px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--cal-brand-dark);
}
.astic-calc__headline-var--up .astic-calc__headline-pct   { color: var(--cal-danger); }
.astic-calc__headline-var--down .astic-calc__headline-pct { color: var(--cal-success); }

.astic-calc__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px 22px;
    margin: 0 0 14px 0;
}
.astic-calc__grid dt {
    font-size: .74rem;
    font-weight: 700;
    color: var(--cal-text-light);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 2px;
}
.astic-calc__grid dd {
    margin: 0 0 10px 0;
    font-size: .92rem;
    color: var(--cal-heading);
    font-weight: 500;
}
.astic-calc__grid small { color: var(--cal-text-light); font-weight: 400; }

.astic-calc__formula {
    margin-top: 6px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--cal-border);
    border-radius: var(--cal-radius-sm);
    font-size: .82rem;
    color: var(--cal-text-light);
}
.astic-calc__formula strong { color: var(--cal-brand-dark); }

.astic-calc__error {
    margin: 10px 0 20px;
    padding: 12px 16px;
    background: #fdecea;
    border: 1px solid #f5c6c2;
    border-left: 4px solid var(--cal-danger);
    border-radius: var(--cal-radius-sm);
    color: #7b1e1e;
    font-size: .92rem;
}

.astic-calc__footer {
    padding: 16px 30px 24px;
    border-top: 1px solid var(--cal-border);
    background: #fbfcfe;
}

.astic-calc__disclaimer {
    margin: 0 0 10px 0;
    font-size: .78rem;
    color: var(--cal-text-light);
    line-height: 1.55;
}
.astic-calc__disclaimer strong { color: var(--cal-heading); }

.astic-calc__sources {
    margin: 0;
    font-size: .78rem;
    color: var(--cal-text-light);
}
.astic-calc__sources a { color: var(--cal-brand-dark); text-decoration: none; }
.astic-calc__sources a:hover { text-decoration: underline; }
.astic-calc__sep { margin: 0 6px; opacity: .5; }
.astic-calc__meta { color: var(--cal-text); }

@media (max-width: 680px) {
    .astic-calc__row--2col { grid-template-columns: 1fr; }
    .astic-calc__radios { grid-template-columns: 1fr; }
    .astic-calc__fechas { grid-template-columns: 1fr; }
    .astic-calc__headline { grid-template-columns: 1fr; }
    .astic-calc__headline-var { text-align: left; min-width: 0; }
    .astic-calc__form { padding: 18px 20px 6px; }
    .astic-calc__header { padding: 22px 20px 20px; }
    .astic-calc__result, .astic-calc__footer { padding-left: 20px; padding-right: 20px; }
    .astic-calc__title,
    .astic-calc .astic-calc__title { font-size: 1.45rem !important; }
    .astic-calc__headline-value { font-size: 1.7rem; }
}