:root {
    color-scheme: light;
    --ink: #12223a;
    --muted: #62738a;
    --line: #e3eaf2;
    --bg: #f5f8fc;
    --green: #148453;
    --blue: #2460c7;
    --white: #fff;
    --round: 18px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink)
}

header {
    background: #fff;
    border-bottom: 1px solid var(--line)
}

.top {
    max-width: 1100px;
    margin: auto;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    gap: 12px
}

.brand {
    font-weight: 800;
    letter-spacing: -.035em;
    font-size: 21px
}

.brand b {
    color: var(--green)
}

.year {
    color: var(--muted);
    font-size: 13px
}

main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 30px 24px 55px
}

.hero {
    text-align: center;
    margin-bottom: 28px
}

.hero h1 {
    font-size: clamp(26px, 4vw, 39px);
    letter-spacing: -.045em;
    margin: 0 0 8px
}

.hero p {
    color: var(--muted);
    margin: 0;
    font-size: 15px
}

.layout {
    display: grid;
    grid-template-columns: 1.03fr .97fr;
    gap: 20px;
    align-items: start
}

.panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--round);
    box-shadow: 0 5px 22px #12305208;
    overflow: hidden
}

.panel-h {
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
    font-size: 12px;
    letter-spacing: .08em;
    font-weight: 800;
    color: #34455e
}

.inside {
    padding: 24px
}

.field {
    margin-bottom: 24px
}

.field:last-child {
    margin-bottom: 0
}

.field-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 13px
}

.field-title {
    font-weight: 750;
    font-size: 13px;
    letter-spacing: .025em
}

.value-input {
    width: 180px;
    border: 1px solid #dbe3ed;
    border-radius: 12px;
    font-size: 23px;
    padding: 10px 12px;
    font-weight: 780;
    color: var(--ink);
    background: #fbfcfe;
    text-align: right
}

.hint {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
    margin-top: 8px
}

.range {
    width: 100%;
    accent-color: #16874d;
    cursor: pointer
}

.ends {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 11px;
    margin-top: 3px
}

.two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.group-label {
    display: block;
    font-size: 12px;
    font-weight: 750;
    margin-bottom: 10px
}

.segment {
    display: flex;
    gap: 5px;
    background: #f1f4f8;
    padding: 5px;
    border-radius: 13px
}

.segment button {
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ink);
    padding: 11px 8px;
    font-size: 13px;
    font-weight: 700;
    flex: 1;
    cursor: pointer
}

.segment button[aria-pressed="true"] {
    background: #fff;
    color: var(--green);
    box-shadow: 0 1px 5px #12223a16
}

.customize {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fafbfd;
    padding: 14px 15px
}

.customize summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 750
}

.irpf-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 14px 0 5px;
    gap: 10px
}

.irpf-line label {
    font-size: 12px;
    color: var(--muted)
}

.irpf-input {
    width: 92px;
    border: 1px solid #dbe3ed;
    border-radius: 9px;
    padding: 8px;
    text-align: right;
    font-weight: 800;
    font-size: 16px
}

.auto {
    border: 0;
    background: none;
    color: var(--blue);
    font-weight: 650;
    text-decoration: underline;
    cursor: pointer;
    padding: 7px 0;
    font-size: 12px
}

.result {
    padding: 23px;
    background: linear-gradient(135deg, #eefaf3, #f9fefa);
    border-bottom: 1px solid #dcefe3
}

.eyebrow {
    font-weight: 780;
    font-size: 12px;
    letter-spacing: .06em;
    color: #466e5b
}

.amount {
    font-weight: 850;
    letter-spacing: -.055em;
    color: #137b46;
    font-size: clamp(42px, 5.7vw, 64px);
    margin-top: 6px;
    line-height: 1.16
}

.subtitle {
    color: #577264;
    font-size: 13px;
    margin-top: 5px
}

.kpis {
    padding: 19px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px
}

.kpi {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 15px;
    background: #fff;
    min-width: 0
}

.kpi .name {
    font-size: 11px;
    line-height: 1.3;
    color: #63728a;
    font-weight: 780;
    text-transform: uppercase;
    letter-spacing: .04em
}

.kpi .num {
    font-size: clamp(18px, 2vw, 23px);
    font-weight: 820;
    letter-spacing: -.03em;
    margin-top: 7px
}

.kpi .desc {
    font-size: 11px;
    color: var(--muted);
    margin-top: 5px
}

.details {
    padding: 2px 19px 20px
}

.details h2 {
    font-size: 13px;
    letter-spacing: .04em;
    margin: 14px 0
}

.line {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    font-size: 13px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line)
}

.line span:last-child {
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    text-align: right
}

.line.tot {
    font-weight: 800;
    border: 0
}

.foot {
    border-top: 1px solid var(--line);
    margin-top: 23px;
    padding-top: 18px;
    color: #586b83;
    font-size: 12px;
    line-height: 1.65
}

.foot p {
    margin: 6px 0
}

.foot a {
    color: var(--blue)
}

.notice {
    background: #f0f5fc;
    border: 1px solid #dbe7f7;
    border-radius: 13px;
    padding: 14px 17px;
    font-size: 12px;
    color: #455b78;
    line-height: 1.6;
    margin-top: 18px
}

.error {
    color: #9d371e;
    font-weight: 700;
    font-size: 12px;
    margin-top: 8px;
    min-height: 18px
}

.summary-card {
    max-width: 1100px;
    margin: 18px auto 0;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--line);
    padding: 17px 20px;
    color: #425671;
    font-size: 13px;
    line-height: 1.65
}

.summary-card strong {
    color: var(--ink)
}

@media(max-width:800px) {
    .layout {
        grid-template-columns: 1fr
    }

    .result {
        padding: 20px
    }

    .inside {
        padding: 20px
    }

    main {
        padding: 24px 15px 40px
    }

    .top {
        padding: 11px 16px
    }

    .hero {
        margin-bottom: 22px
    }
}

@media(max-width:420px) {
    .two {
        grid-template-columns: 1fr
    }

    .value-input {
        width: 154px;
        font-size: 21px
    }

    .kpis {
        gap: 8px;
        padding: 11px
    }

    .kpi {
        padding: 11px
    }

    .kpi .num {
        font-size: 18px
    }
}

.mobile-net {
    display: none
}

.line span:first-child {
    flex: 1
}

.line small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 400
}

.cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 22px;
    padding: 22px 24px;
    background: #eaf3ff;
    border: 1px solid #bdd5f7;
    border-radius: 16px
}

.cta strong {
    font-size: 18px
}
.cta:hover{
    
    color: blue;
    cursor: default;
} 
.cta p {
    font-size: 13px;
    line-height: 1.5;
    margin: 7px 0 0;
    color: #45617c
}

.cta-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end
}

.cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 13px 16px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
    transition: filter .15s
}

.cta a:hover {
    filter: brightness(.93)
}

.cta-cn {
    background: #1664cf;
    color: white;
    letter-spacing: 1px;
}

.cta-nh {
    background: #14754a;
    color: white;
    letter-spacing: 1px;
}

@media(max-width:800px) {
    .cta {
        flex-direction: column;
        align-items: stretch
    }

    .cta-links {
        justify-content: stretch
    }

    .cta-links a {
        flex: 1
    }
}

@media(max-width:800px) {
    .mobile-net {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 11px 14px;
        margin: 0 0 14px;
        border: 1px solid #bcdccd;
        border-radius: 12px;
        background: #eaf9f0;
        color: #187346
    }

    .mobile-net span {
        font-weight: 800;
        font-size: 11px;
        line-height: 1.25;
        max-width: 120px
    }

    .mobile-net strong {
        font-size: clamp(22px, 5vw, 30px);
        font-variant-numeric: tabular-nums;
        white-space: nowrap
    }

    .field:first-child {
        margin-bottom: 23px
    }
}

@media(max-width:420px) {
    .cta-links {
        flex-direction: column
    }

    .field-top {
        align-items: flex-start;
        flex-direction: column
    }

    .value-input {
        width: 100%;
        text-align: left
    }
}

/* V3: targetes de valors i jerarquia cromàtica dels resultats */
:root {
    --positive: #087b43;
    --negative: #c3353a;
    --accent: #2563c7
}

body {
    background: linear-gradient(180deg, #f0f6ff 0, #f5f8fc 270px)
}

.hero h1 {
    color: #122a50
}

.panel {
    box-shadow: 0 9px 28px #18437a0d
}

.panel-h {
    color: #244b88
}

.salary-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 17px;
    border: 1px solid #ccdbee;
    border-radius: 13px;
    background: #f0f6ff;
    margin-bottom: 13px
}

.salary-box .field-title {
    font-size: 12px;
    line-height: 1.35;
    color: #28528d;
    flex: 1
}

.salary-value {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap
}

.salary-box .value-input {
    width: 155px;
    max-width: 100%;
    padding: 3px 0;
    border: 0;
    background: transparent;
    color: #153a76;
    font-size: clamp(22px, 3vw, 28px);
    outline-offset: 4px;
    font-variant-numeric: tabular-nums
}

.salary-euro {
    font-weight: 850;
    color: #153a76;
    font-size: 23px
}

.result {
    background: linear-gradient(130deg, #e7f8ee, #f6fff9)
}

.kpi .num {
    color: #1d467a
}

.kpi .num.positive,
.positive {
    color: var(--positive) !important
}

.kpi .num.negative,
.negative {
    color: var(--negative) !important
}

.line .positive {
    color: var(--positive)
}

.line .negative {
    color: var(--negative)
}

.mobile-net {
    background: #e8faef;
    border-color: #b4ddc5;
    color: #117a46
}

.notice {
    border-left: 4px solid #3671cb
}

@media(max-width:800px) {
    .salary-box {
        padding: 12px 13px
    }

    .salary-box .value-input {
        width: 125px;
        text-align: right
    }

    .mobile-net {
        margin: 0 0 12px
    }

    .salary-box {
        margin-bottom: 10px
    }
}

@media(max-width:420px) {
    .salary-box {
        gap: 6px;
        flex-wrap: nowrap
    }

    .salary-box .field-title {
        font-size: 11px;
        max-width: 140px
    }

    .salary-box .value-input {
        font-size: 24px;
        width: 118px;
        text-align: right
    }

    .salary-euro {
        font-size: 21px
    }

    .mobile-net strong {
        font-size: clamp(21px, 6vw, 28px)
    }

    .mobile-net span {
        font-size: 10px
    }
}

@media(max-width:420px) {
    .field-top {
        display: block
    }

    .salary-box .value-input {
        background: transparent;
        border: 0
    }

    .salary-box {
        display: flex
    }
}