/* ==========================================================================
   Generador de Mapes · Sistema de disseny
   Identitat: Ajuntament de Barcelona.
   - Tipografia Source Sans (guia d'estil gràfic digital de l'Ajuntament).
   - Negre + vermell corporatiu; text general gris #696973, títols negres.
   - Tots els tokens viuen a :root: per ajustar la marca només cal tocar aquí.
   ========================================================================== */

:root {
    /* Marca */
    --bcn-red: #E91B1D;
    --bcn-red-dark: #C41416;
    --bcn-black: #000000;
    --bcn-blue: #0069E1;
    --bcn-green: #008000;
    --bcn-teal: #1C7DA3;

    /* Neutres */
    --ink: #1D1D22;            /* text principal en pantalles de treball */
    --ink-soft: #696973;       /* text secundari (gris corporatiu) */
    --ink-faint: #9A9AA3;
    --line: #E3E3E8;
    --line-strong: #CFCFD6;
    --surface: #FFFFFF;
    --surface-alt: #F6F6F8;
    --surface-sunken: #EFEFF2;

    /* Estats */
    --ok: #0B6B0B;       --ok-bg: #E8F5E8;
    --warn: #8A5A00;     --warn-bg: #FFF4D6;
    --danger: #B3090B;   --danger-bg: #FDECEC;
    --info: #0B4F9E;     --info-bg: #E8F1FD;

    --radius: 6px;
    --radius-lg: 10px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, .08);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, .16);
    --header-h: 60px;
    --focus: 0 0 0 3px rgba(0, 105, 225, .35);

    /* Bootstrap */
    --bs-font-sans-serif: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --bs-body-font-size: 1rem;
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--surface-alt);
    --bs-secondary-color: var(--ink-soft);
    --bs-border-color: var(--line);
    --bs-link-color: var(--bcn-blue);
    --bs-link-color-rgb: 0, 105, 225;
    --bs-link-hover-color: #004FAB;
    --bs-link-hover-color-rgb: 0, 79, 171;
    --bs-primary: var(--bcn-black);
    --bs-primary-rgb: 0, 0, 0;
    --bs-danger: var(--bcn-red);
    --bs-danger-rgb: 233, 27, 29;
    --bs-success: var(--bcn-green);
    --bs-success-rgb: 0, 128, 0;
    --bs-border-radius: var(--radius);
    --bs-border-radius-sm: 4px;
    --bs-border-radius-lg: var(--radius-lg);
}

html { scroll-padding-top: calc(var(--header-h) + 16px); }
[hidden] { display: none !important; }
.field-error { color: var(--danger); font-size: .875rem; margin-top: 8px; font-weight: 600; }

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--bs-font-sans-serif);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--bcn-black);
    font-weight: 600;
    letter-spacing: -.005em;
    margin-bottom: .5rem;
}
h1, .h1 { font-size: 1.625rem; }
h2, .h2 { font-size: 1.375rem; }   /* Títol principal · 22 semibold */
h3, .h3 { font-size: 1.25rem; }    /* Títols interiors · 20 semibold */
h4, .h4 { font-size: 1.125rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: .875rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.lead { font-size: 1.125rem; font-weight: 400; color: var(--ink-soft); }
.text-muted, .form-text { color: var(--ink-soft) !important; }
small, .small { font-size: .875rem; }

a { text-underline-offset: 2px; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 4px; }

.skip-link {
    position: absolute; left: 8px; top: -60px; z-index: 2000;
    background: var(--bcn-black); color: #fff; padding: 8px 14px; border-radius: var(--radius);
}
.skip-link:focus { top: 8px; color: #fff; }

/* ---------- Capçalera -------------------------------------------------- */

.app-header {
    position: sticky; top: 0; z-index: 1030;
    height: var(--header-h);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    display: flex; align-items: stretch;
}
.app-brand {
    display: flex; align-items: stretch; text-decoration: none; color: var(--bcn-black); flex-shrink: 0;
}
.app-brand__mark {
    background: var(--bcn-red);
    display: flex; align-items: center; padding: 0 18px;
}
.app-brand__mark img { height: 22px; width: auto; display: block; }
.app-brand__name {
    display: flex; align-items: center; padding: 0 20px 0 16px;
    font-weight: 600; font-size: 1.0625rem; white-space: nowrap;
}
.app-nav { display: flex; align-items: stretch; gap: 2px; flex: 1; min-width: 0; }
.app-nav__link {
    display: flex; align-items: center; gap: 8px;
    padding: 0 14px; color: var(--ink); text-decoration: none; font-weight: 500;
    border: 0; background: none; position: relative; white-space: nowrap;
}
.app-nav__link:hover { color: var(--bcn-black); background: var(--surface-alt); }
.app-nav__link.active { color: var(--bcn-black); font-weight: 600; }
.app-nav__link.active::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; background: var(--bcn-red);
}
.app-nav__link.dropdown-toggle::after { margin-left: 2px; }
.app-nav__link.active.dropdown-toggle::after { position: static; height: auto; background: none; }
.app-nav__link.active.dropdown-toggle { box-shadow: inset 0 -3px 0 var(--bcn-red); }
.app-header__end { display: flex; align-items: center; gap: 4px; padding-right: 16px; margin-left: auto; }
.app-header__toggle { display: none; }

.avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--bcn-black); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .8125rem; font-weight: 600; flex-shrink: 0;
}
.avatar--sm { width: 24px; height: 24px; font-size: .6875rem; }
.avatar--soft { background: var(--surface-sunken); color: var(--ink); }
.user-menu__btn {
    display: flex; align-items: center; gap: 10px; border: 0; background: none;
    padding: 6px 8px; border-radius: var(--radius); text-align: left; line-height: 1.15;
}
.user-menu__btn:hover { background: var(--surface-alt); }
.user-menu__name { font-weight: 600; font-size: .9375rem; color: var(--bcn-black); display: block; }
.user-menu__role { font-size: .75rem; color: var(--ink-soft); display: block; }

@media (max-width: 1199.98px) {
    .app-header__toggle { display: flex; align-items: center; padding: 0 14px; border: 0; background: none; font-size: 1.5rem; }
    .app-nav {
        display: none; position: absolute; top: var(--header-h); left: 0; right: 0;
        flex-direction: column; background: var(--surface); border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-md); padding: 8px 0;
    }
    .app-nav.is-open { display: flex; }
    .app-nav__link { padding: 12px 20px; }
    .app-nav__link.active::after { left: 0; right: auto; top: 8px; bottom: 8px; width: 3px; height: auto; }
}

/* ---------- Estructura de pàgina -------------------------------------- */

.app-main { flex: 1; padding: 28px 0 56px; }
.app-container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.app-container--narrow { max-width: 760px; }
.app-container--wide { max-width: 1600px; }
@media (max-width: 575.98px) { .app-container { padding: 0 15px; } .app-main { padding-top: 20px; } }

.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-header__title { margin: 0; }
.page-header__sub { color: var(--ink-soft); margin: 4px 0 0; }
.page-header__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.breadcrumb-back {
    display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft);
    text-decoration: none; font-size: .9375rem; margin-bottom: 8px;
}
.breadcrumb-back:hover { color: var(--bcn-black); }

.app-footer { border-top: 1px solid var(--line); background: var(--surface); padding: 20px 0; font-size: .875rem; color: var(--ink-soft); }
.app-footer img { height: 20px; opacity: .85; }

/* ---------- Components -------------------------------------------------- */

.card {
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm); background: var(--surface); margin-bottom: 20px;
}
.card-header {
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 16px 20px; font-weight: 600; color: var(--bcn-black);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}
.card-header h2, .card-header h3, .card-header h4, .card-header h5 { margin: 0; font-size: 1.125rem; }
/* Capçaleres de colors del pilot → neutres */
.card-header.bg-primary, .card-header.bg-secondary, .card-header.bg-info, .card-header.bg-success,
.card-header.bg-warning, .card-header.bg-dark {
    background: var(--surface) !important; color: var(--bcn-black) !important;
}
.card-header.text-white h1, .card-header.text-white h2, .card-header.text-white h3,
.card-header.text-white h4, .card-header.text-white h5 { color: var(--bcn-black) !important; }
.card-body { padding: 20px; }
.card-footer { background: var(--surface-alt); border-top: 1px solid var(--line); padding: 14px 20px; }

.section-title { display: flex; align-items: baseline; gap: 10px; margin: 0 0 4px; }
.section-hint { color: var(--ink-soft); margin: 0 0 16px; font-size: .9375rem; }

.btn {
    --bs-btn-font-weight: 600; --bs-btn-padding-x: 1rem; --bs-btn-padding-y: .5rem;
    --bs-btn-border-radius: var(--radius); --bs-btn-font-size: .9375rem;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
}
.btn-sm { --bs-btn-padding-x: .7rem; --bs-btn-padding-y: .3rem; --bs-btn-font-size: .875rem; }
.btn-lg { --bs-btn-padding-x: 1.4rem; --bs-btn-padding-y: .7rem; --bs-btn-font-size: 1rem; }
.btn:focus-visible { box-shadow: var(--focus); }
.btn-primary {
    --bs-btn-bg: var(--bcn-black); --bs-btn-border-color: var(--bcn-black); --bs-btn-color: #fff;
    --bs-btn-hover-bg: #2B2B31; --bs-btn-hover-border-color: #2B2B31;
    --bs-btn-active-bg: #3A3A42; --bs-btn-active-border-color: #3A3A42;
    --bs-btn-disabled-bg: #8B8B93; --bs-btn-disabled-border-color: #8B8B93;
}
.btn-secondary, .btn-outline-secondary, .btn-outline-primary, .btn-light {
    --bs-btn-bg: var(--surface); --bs-btn-color: var(--ink); --bs-btn-border-color: var(--line-strong);
    --bs-btn-hover-bg: var(--surface-alt); --bs-btn-hover-color: var(--bcn-black); --bs-btn-hover-border-color: #A9A9B2;
    --bs-btn-active-bg: var(--surface-sunken); --bs-btn-active-color: var(--bcn-black); --bs-btn-active-border-color: #A9A9B2;
    --bs-btn-disabled-bg: var(--surface); --bs-btn-disabled-color: var(--ink-faint); --bs-btn-disabled-border-color: var(--line);
}
.btn-danger {
    --bs-btn-bg: var(--bcn-red); --bs-btn-border-color: var(--bcn-red);
    --bs-btn-hover-bg: var(--bcn-red-dark); --bs-btn-hover-border-color: var(--bcn-red-dark);
    --bs-btn-active-bg: var(--bcn-red-dark); --bs-btn-active-border-color: var(--bcn-red-dark);
}
.btn-outline-danger {
    --bs-btn-color: var(--danger); --bs-btn-border-color: var(--line-strong); --bs-btn-bg: var(--surface);
    --bs-btn-hover-bg: var(--danger-bg); --bs-btn-hover-color: var(--danger); --bs-btn-hover-border-color: var(--danger);
    --bs-btn-active-bg: var(--danger-bg); --bs-btn-active-color: var(--danger); --bs-btn-active-border-color: var(--danger);
}
/* Colors «semàfor» del pilot en accions de fila → botons neutres coherents */
.btn-warning, .btn-info, .btn-success, .btn-outline-success, .btn-outline-info, .btn-outline-warning {
    --bs-btn-bg: var(--surface); --bs-btn-color: var(--ink); --bs-btn-border-color: var(--line-strong);
    --bs-btn-hover-bg: var(--surface-alt); --bs-btn-hover-color: var(--bcn-black); --bs-btn-hover-border-color: #A9A9B2;
    --bs-btn-active-bg: var(--surface-sunken); --bs-btn-active-color: var(--bcn-black); --bs-btn-active-border-color: #A9A9B2;
}
.btn-ghost {
    --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-color: var(--ink);
    --bs-btn-hover-bg: var(--surface-sunken); --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: var(--bcn-black);
    --bs-btn-active-bg: var(--surface-sunken); --bs-btn-active-border-color: transparent;
}
.btn-icon { --bs-btn-padding-x: .45rem; --bs-btn-padding-y: .35rem; }
.btn-link { --bs-btn-font-weight: 500; text-decoration: none; }
.btn-group .btn { margin-right: 0; }

.form-label { font-weight: 600; color: var(--bcn-black); margin-bottom: 6px; font-size: .9375rem; }
.form-label .optional { font-weight: 400; color: var(--ink-soft); }
.form-control, .form-select {
    border-color: var(--line-strong); border-radius: var(--radius); padding: .5rem .75rem; color: var(--ink);
}
.form-control, .form-select, .dropdown-menu, .modal-content, .list-group-item { background-color: var(--surface); }
.form-control:disabled, .form-select:disabled { background-color: var(--surface-sunken); }
.form-select { padding-right: 2.25rem; }
.form-select-sm, .form-control-sm { padding: .3rem .6rem; font-size: .875rem; }
.form-select-sm { padding-right: 2rem; }
.form-control:focus, .form-select:focus { border-color: var(--bcn-blue); box-shadow: var(--focus); }
.form-control::placeholder { color: var(--ink-faint); }
.form-check-input { border-color: #9A9AA3; }
.form-check-input:checked { background-color: var(--bcn-black); border-color: var(--bcn-black); }
.form-check-input:focus { box-shadow: var(--focus); border-color: var(--bcn-blue); }
.form-switch { padding-left: 3.1em; }
.form-switch .form-check-input { width: 2.4em; height: 1.3em; margin-left: -3.1em; margin-top: .15em; cursor: pointer; }
.form-check-label { cursor: pointer; }
.input-group-text { background: var(--surface-alt); border-color: var(--line-strong); color: var(--ink-soft); }
.form-actions {
    display: flex; gap: 10px; justify-content: flex-end; align-items: center; flex-wrap: wrap;
    padding-top: 20px; margin-top: 24px; border-top: 1px solid var(--line);
}
.form-actions--sticky {
    position: sticky; bottom: 12px; z-index: 20; background: rgba(255, 255, 255, .97); backdrop-filter: blur(6px);
    margin-top: 20px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}

.table { --bs-table-bg: transparent; --bs-table-striped-bg: transparent; --bs-table-hover-bg: var(--surface-alt); margin: 0; color: var(--ink); }
.table > thead th {
    font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft);
    border-bottom: 1px solid var(--line-strong); padding: 10px 16px; white-space: nowrap; background: var(--surface-alt);
}
.table > tbody td { padding: 12px 16px; vertical-align: middle; border-color: var(--line); }
.table > tbody tr:last-child td { border-bottom: 0; }
.table-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
.table-card .table-responsive { margin: 0; }
.row-link { cursor: pointer; }
.cell-title { font-weight: 600; color: var(--bcn-black); text-decoration: none; }
a.cell-title:hover { text-decoration: underline; }
.cell-sub { color: var(--ink-soft); font-size: .875rem; }
.cell-actions { white-space: nowrap; text-align: right; }

.badge { font-weight: 600; letter-spacing: .01em; padding: .35em .6em; border-radius: 4px; }
.status {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
    font-size: .8125rem; font-weight: 600; white-space: nowrap;
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status--success { color: var(--ok); background: var(--ok-bg); }
.status--warning { color: var(--warn); background: var(--warn-bg); }
.status--danger { color: var(--danger); background: var(--danger-bg); }
.status--neutral { color: var(--ink-soft); background: var(--surface-sunken); }
.status--info { color: var(--info); background: var(--info-bg); }
.tag {
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 4px;
    font-size: .8125rem; background: var(--surface-sunken); color: var(--ink); white-space: nowrap;
}

.alert { border: 0; border-left: 4px solid; border-radius: var(--radius); padding: 12px 16px; display: flex; gap: 10px; align-items: flex-start; }
.alert > .bi:first-child { font-size: 1.1rem; line-height: 1.4; }
.alert-success { background: var(--ok-bg); color: #0A3D0A; border-color: var(--bcn-green); }
.alert-warning { background: var(--warn-bg); color: #5C3C00; border-color: #E0A100; }
.alert-danger, .alert-error { background: var(--danger-bg); color: #7A0607; border-color: var(--bcn-red); }
.alert-info, .alert-secondary, .alert-primary, .alert-light { background: var(--info-bg); color: #093A73; border-color: var(--bcn-blue); }
.alert .btn-close { margin-left: auto; padding: 4px; }
.flash-stack { display: grid; gap: 8px; margin-bottom: 20px; }
.flash-stack .alert { margin: 0; }

.nav-tabs { border-bottom: 1px solid var(--line); gap: 4px; margin-bottom: 0; }
.nav-tabs .nav-link {
    border: 0; border-bottom: 3px solid transparent; color: var(--ink-soft); font-weight: 600;
    padding: 10px 14px; border-radius: 0; background: none;
}
.nav-tabs .nav-link:hover { color: var(--bcn-black); border-bottom-color: var(--line-strong); }
.nav-tabs .nav-link.active { color: var(--bcn-black); border-bottom-color: var(--bcn-red); background: none; }
.nav-tabs .nav-link .count { font-weight: 500; color: var(--ink-faint); margin-left: 4px; }
.tab-content { padding: 0; }

.segmented { display: inline-flex; background: var(--surface-sunken); border-radius: var(--radius); padding: 3px; gap: 2px; }
.segmented .btn, .segmented label.btn {
    --bs-btn-border-color: transparent; --bs-btn-bg: transparent; --bs-btn-color: var(--ink-soft);
    --bs-btn-hover-bg: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: var(--bcn-black);
    --bs-btn-padding-y: .35rem; border-radius: 4px !important;
}
.segmented .btn.active, .segmented .btn-check:checked + .btn {
    background: var(--surface); color: var(--bcn-black); box-shadow: var(--shadow-sm); border-color: transparent;
}

.dropdown-menu { border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 6px; min-width: 220px; }
.dropdown-item { border-radius: 4px; padding: 8px 12px; display: flex; align-items: center; gap: 10px; color: var(--ink); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--surface-alt); color: var(--bcn-black); }
.dropdown-item.active, .dropdown-item:active { background: var(--surface-sunken); color: var(--bcn-black); font-weight: 600; }
.dropdown-item.text-danger:hover { background: var(--danger-bg); color: var(--danger) !important; }
.dropdown-item .bi { color: var(--ink-soft); width: 16px; text-align: center; }
.dropdown-item.text-danger .bi { color: inherit; }
.dropdown-header { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); padding: 8px 12px 4px; }

.modal-content { border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.modal-header { border-bottom: 0; padding: 20px 24px 0; }
.modal-body { padding: 12px 24px 8px; color: var(--ink); }
.modal-footer { border-top: 0; padding: 12px 24px 20px; }
.modal-title { font-size: 1.25rem; }

.pagination { --bs-pagination-color: var(--ink); --bs-pagination-border-color: var(--line); --bs-pagination-hover-color: var(--bcn-black);
    --bs-pagination-hover-bg: var(--surface-alt); --bs-pagination-active-bg: var(--bcn-black); --bs-pagination-active-border-color: var(--bcn-black);
    --bs-pagination-focus-box-shadow: var(--focus); --bs-pagination-font-size: .9375rem; margin: 0; }

.empty-state { text-align: center; padding: 56px 24px; }
.empty-state__icon {
    width: 64px; height: 64px; border-radius: 50%; background: var(--surface-sunken); color: var(--ink-soft);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.75rem; margin-bottom: 16px;
}
.empty-state p { color: var(--ink-soft); max-width: 460px; margin: 0 auto 20px; }

/* ---------- Barra d'eines (llistats) ----------------------------------- */

.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar .search { position: relative; flex: 1 1 260px; max-width: 420px; }
.toolbar .search .bi { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); pointer-events: none; }
.toolbar .search .form-control { padding-left: 36px; }
.toolbar .form-select { width: auto; min-width: 150px; max-width: 260px; }

/* ---------- Passos de l'assistent -------------------------------------- */

.stepper { display: flex; list-style: none; padding: 0; margin: 0 0 28px; gap: 0; counter-reset: step; }
.stepper__item { flex: 1; display: flex; align-items: center; gap: 10px; color: var(--ink-faint); font-weight: 600; font-size: .9375rem; min-width: 0; }
.stepper__item::before {
    counter-increment: step; content: counter(step);
    width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface);
    display: inline-flex; align-items: center; justify-content: center; font-size: .8125rem; flex-shrink: 0;
}
.stepper__item::after { content: ""; flex: 1; height: 2px; background: var(--line-strong); margin-right: 10px; min-width: 12px; }
.stepper__item:last-child { flex: 0 0 auto; }
.stepper__item:last-child::after { display: none; }
.stepper__item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stepper__item.is-current { color: var(--bcn-black); }
.stepper__item.is-current::before { border-color: var(--bcn-black); background: var(--bcn-black); color: #fff; }
.stepper__item.is-done { color: var(--ink); }
.stepper__item.is-done::before { content: "✓"; border-color: var(--bcn-green); background: var(--bcn-green); color: #fff; }
.stepper__item.is-done::after { background: var(--bcn-green); }
@media (max-width: 767.98px) { .stepper__item:not(.is-current) span { display: none; } .stepper__item.is-current { flex: 2; } }

/* ---------- Targetes d'opció (ràdio / checkbox) ------------------------ */

.choice-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.choice { position: relative; display: block; margin: 0; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice__box {
    display: flex; gap: 12px; align-items: flex-start; height: 100%;
    border: 1.5px solid var(--line-strong); border-radius: var(--radius-lg); padding: 14px 16px; background: var(--surface);
    transition: border-color .12s, box-shadow .12s, background .12s;
}
.choice:hover .choice__box { border-color: #8B8B93; }
.choice input:focus-visible + .choice__box { box-shadow: var(--focus); }
.choice input:checked + .choice__box { border-color: var(--bcn-black); box-shadow: inset 0 0 0 1px var(--bcn-black); background: #FAFAFB; }
.choice__icon { font-size: 1.375rem; color: var(--ink-soft); line-height: 1.2; }
.choice input:checked + .choice__box .choice__icon { color: var(--bcn-black); }
.choice__title { font-weight: 600; color: var(--bcn-black); display: block; }
.choice__desc { color: var(--ink-soft); font-size: .875rem; display: block; margin-top: 2px; }
.choice__check { margin-left: auto; color: var(--bcn-black); visibility: hidden; font-size: 1.125rem; }
.choice input:checked + .choice__box .choice__check { visibility: visible; }

/* ---------- Zona de pujada de fitxers ---------------------------------- */

.dropzone {
    border: 2px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--surface);
    padding: 40px 24px; text-align: center; cursor: pointer; transition: border-color .12s, background .12s; display: block;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--bcn-black); background: var(--surface-alt); }
.dropzone__icon { font-size: 2.25rem; color: var(--ink-soft); }
.dropzone__title { font-weight: 600; color: var(--bcn-black); font-size: 1.0625rem; margin: 8px 0 2px; }
.dropzone__hint { color: var(--ink-soft); font-size: .9375rem; }
.dropzone input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dropzone.has-file { border-style: solid; border-color: var(--bcn-green); background: var(--ok-bg); }
.file-pill {
    display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line);
    border-radius: var(--radius); background: var(--surface-alt); max-width: 100%;
}
.file-pill .bi { color: var(--bcn-green); font-size: 1.25rem; }
.file-pill__name { font-weight: 600; color: var(--bcn-black); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Mapeig de camps -------------------------------------------- */

.preview-table { font-size: .875rem; }
.preview-table th, .preview-table td { white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.preview-table thead th { text-transform: none; letter-spacing: 0; font-size: .875rem; color: var(--bcn-black); position: relative; }
.preview-table thead th .col-role { display: block; font-size: .6875rem; font-weight: 600; color: var(--bcn-blue); text-transform: uppercase; letter-spacing: .04em; min-height: 1em; }
.preview-table thead th.is-mapped { background: var(--info-bg); }
.preview-table td.is-mapped { background: #F5F9FE; }

.map-field { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 6px 16px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); }
.map-field:first-child { border-top: 0; padding-top: 0; }
.map-field__label { font-weight: 600; color: var(--bcn-black); padding-top: 7px; }
.map-field__help { display: block; font-weight: 400; color: var(--ink-soft); font-size: .8125rem; }
.map-field__sample { font-size: .8125rem; color: var(--ink-soft); margin-top: 4px; min-height: 1.2em; }
.map-field__sample .tag { margin-right: 4px; }
.map-field .suggested { color: var(--bcn-blue); font-size: .8125rem; font-weight: 600; }
@media (max-width: 575.98px) { .map-field { grid-template-columns: 1fr; } .map-field__label { padding-top: 0; } }

.territory-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px; background: var(--surface); height: 100%; }
.territory-card.is-active { border-color: var(--bcn-black); box-shadow: inset 0 0 0 1px var(--bcn-black); }
.territory-card__head { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--bcn-black); margin-bottom: 12px; }
.territory-card__state { margin-left: auto; }

.age-row { display: grid; grid-template-columns: 90px 90px 1fr 36px; gap: 8px; align-items: center; margin-bottom: 8px; }
.age-row__head { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); font-weight: 600; margin-bottom: 4px; }

.side-nav { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 2px; }
.side-nav a {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius);
    color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: .9375rem; border-left: 3px solid transparent;
}
.side-nav a:hover { background: var(--surface-sunken); color: var(--bcn-black); }
.side-nav a.is-active { color: var(--bcn-black); border-left-color: var(--bcn-red); background: var(--surface); }
.side-nav a .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); margin-left: auto; }
.side-nav a .dot.is-ok { background: var(--bcn-green); }

/* ---------- Visor de mapa ---------------------------------------------- */

.viewer { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.viewer.is-collapsed { grid-template-columns: minmax(0, 1fr); }
.viewer.is-collapsed .viewer__panel { display: none; }
@media (max-width: 1099.98px) { .viewer { grid-template-columns: minmax(0, 1fr); } }
.viewer__stage { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.viewer__bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.viewer__map { position: relative; height: calc(100vh - var(--header-h) - 230px); min-height: 460px; background: var(--surface-sunken); }
.viewer__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.viewer__loader {
    position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; gap: 12px;
    align-items: center; justify-content: center; background: rgba(246, 246, 248, .86); color: var(--ink-soft); font-weight: 600;
}
.viewer__loader[hidden] { display: none; }
.spinner-bcn { width: 34px; height: 34px; border: 3px solid var(--line-strong); border-top-color: var(--bcn-red); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.viewer__panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); position: sticky; top: calc(var(--header-h) + 16px); max-height: calc(100vh - var(--header-h) - 32px); overflow: auto; }
.panel-section { padding: 16px 18px; border-top: 1px solid var(--line); }
.panel-section:first-child { border-top: 0; }
.panel-section__title { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); font-weight: 600; margin: 0 0 12px; display: flex; align-items: center; justify-content: space-between; }
.panel-section .form-check { margin-bottom: 8px; }
.panel-section .form-check:last-child { margin-bottom: 0; }
.panel-sub { margin: 4px 0 10px 3.1em; display: grid; gap: 8px; }
.save-state { font-size: .8125rem; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 5px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.save-state.is-ok { color: var(--ok); }
.save-state.is-error { color: var(--danger); }

.palette-list { display: grid; gap: 4px; max-height: 190px; overflow: auto; margin: 0 -6px; padding: 0 6px; }
.palette-opt { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--radius); cursor: pointer; border: 1.5px solid transparent; margin: 0; }
.palette-opt:hover { background: var(--surface-alt); }
.palette-opt input { position: absolute; opacity: 0; }
.palette-opt.is-active { border-color: var(--bcn-black); background: var(--surface-alt); }
.palette-opt__ramp { width: 72px; height: 14px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .12); flex-shrink: 0; }
.palette-opt__name { font-size: .9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bcn-black); color: #fff; border-radius: 999px; padding: 3px 6px 3px 12px; font-size: .8125rem; font-weight: 600; }
.chip button { border: 0; background: rgba(255, 255, 255, .2); color: #fff; width: 18px; height: 18px; border-radius: 50%; line-height: 1; padding: 0; font-size: .75rem; }
.chip button:hover { background: rgba(255, 255, 255, .4); }

.code-box { position: relative; }
.code-box textarea, .code-box pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8125rem;
    background: #17171B; color: #E9E9EE; border: 0; border-radius: var(--radius); padding: 14px 16px; width: 100%; resize: vertical; margin: 0;
    white-space: pre-wrap; word-break: break-all;
}
.code-box .btn { position: absolute; top: 8px; right: 8px; }

.legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.layer-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); }
.layer-item:first-child { border-top: 0; padding-top: 0; }

/* ---------- Inici de sessió -------------------------------------------- */

.auth-page { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, 460px) 1fr; background: var(--surface); }
.auth-side { display: flex; flex-direction: column; padding: 40px 48px; }
.auth-side__form { margin: auto 0; }
.auth-hero { background: var(--bcn-red); color: var(--bcn-black); display: flex; flex-direction: column; justify-content: space-between; padding: 48px 56px; position: relative; overflow: hidden; }
.auth-hero img { height: 44px; width: auto; align-self: flex-start; }
.auth-hero__title { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 700; line-height: 1.05; color: var(--bcn-black); max-width: 12ch; margin: 0; }
.auth-hero__sub { font-size: 1.125rem; max-width: 34ch; color: rgba(0, 0, 0, .78); margin: 16px 0 0; }
@media (max-width: 899.98px) { .auth-page { grid-template-columns: 1fr; } .auth-hero { display: none; } .auth-side { padding: 28px 22px; } }

/* ---------- Diversos ---------------------------------------------------- */

.toast-stack { position: fixed; right: 20px; bottom: 20px; z-index: 1080; display: grid; gap: 8px; }
.toast-bcn { background: var(--bcn-black); color: #fff; border-radius: var(--radius); padding: 10px 16px; box-shadow: var(--shadow-lg); font-weight: 600; font-size: .9375rem; display: flex; gap: 8px; align-items: center; animation: toast-in .18s ease-out; }
.toast-bcn.is-error { background: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.kv dt { color: var(--ink-soft); font-weight: 500; }
.kv dd { margin: 0; color: var(--ink); }

.danger-zone { border: 1px solid #F3B5B6; border-radius: var(--radius-lg); padding: 16px 20px; display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: #FFFBFB; }

.color-indicator, .color-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: 6px; vertical-align: -2px; border: 1px solid rgba(0, 0, 0, .15); }
.break { flex-basis: 100%; height: 0; }
.map-container { position: relative; }

@media print { .app-header, .app-footer, .viewer__panel, .page-header__actions { display: none !important; } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ---------- Visor: panell d'opcions del mapa ---------------------------- */

.viewer { grid-template-columns: minmax(0, 1fr) 360px; }
.viewer__map { display: flex; align-items: center; justify-content: center; height: calc(100vh - var(--header-h) - 190px); min-height: 480px; }
.viewer__map #mapa { width: 100%; height: 100%; }
.viewer__map.is-export {
    background-color: #e9e9ee;
    background-image: linear-gradient(45deg, #dcdce2 25%, transparent 25%), linear-gradient(-45deg, #dcdce2 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #dcdce2 75%), linear-gradient(-45deg, transparent 75%, #dcdce2 75%);
    background-size: 18px 18px; background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}
.viewer__map.is-export #mapa { box-shadow: 0 4px 24px rgba(0, 0, 0, .25); flex: none; }

.side-tabs { display: flex; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 2; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.side-tabs__btn { flex: 1; border: 0; background: none; padding: 12px 6px; font-weight: 600; font-size: .875rem; color: var(--ink-soft); border-bottom: 3px solid transparent; display: inline-flex; gap: 6px; align-items: center; justify-content: center; }
.side-tabs__btn:hover { color: var(--bcn-black); }
.side-tabs__btn.active { color: var(--bcn-black); border-bottom-color: var(--bcn-red); }

.panel-section__title { justify-content: flex-start; gap: 6px; }
.panel-section__title > .btn-link, .panel-section__title > .save-state { margin-left: auto; }
.panel-acc { border-top: 1px solid var(--line); }
.panel-acc > summary {
    list-style: none; cursor: pointer; padding: 13px 18px; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--ink-soft); font-weight: 600; display: flex; align-items: center; justify-content: space-between;
}
.panel-acc > summary::-webkit-details-marker { display: none; }
.panel-acc > summary::after { content: "\F282"; font-family: "bootstrap-icons"; font-size: .8rem; transition: transform .15s; }
.panel-acc[open] > summary::after { transform: rotate(180deg); }
.panel-acc > summary:hover { color: var(--bcn-black); background: var(--surface-alt); }
.panel-acc__body { padding: 2px 18px 16px; display: grid; gap: 10px; }
.panel-acc__body .form-check { margin: 0; }
.opt-row { display: grid; gap: 4px; }
.opt-row > label, .opt-range > label { font-size: .8125rem; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.opt-range { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; align-items: center; }
.opt-range output { font-size: .8125rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.opt-range .form-range { grid-column: 1 / -1; }
.form-range { accent-color: var(--bcn-black); height: 1.2rem; }
.form-range::-webkit-slider-thumb { background: var(--bcn-black); }
.form-range::-moz-range-thumb { background: var(--bcn-black); }
.opt-seg .segmented .btn { --bs-btn-font-size: .8125rem; --bs-btn-padding-x: .4rem; }
.segmented .btn.disabled { opacity: .4; pointer-events: none; }

.preset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.preset { border: 1.5px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 6px 4px 5px; font-size: .75rem; font-weight: 600; color: var(--ink); display: grid; gap: 5px; justify-items: center; }
.preset:hover { border-color: #8B8B93; }
.preset.is-active { border-color: var(--bcn-black); box-shadow: inset 0 0 0 1px var(--bcn-black); }
.preset__thumb, .base-opt__thumb { width: 100%; height: 34px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .1); background-size: cover; }
.preset__thumb--gris { background: linear-gradient(135deg, #e9e9ec 0 35%, #fdbb84 35% 60%, #d7301f 60% 80%, #e9e9ec 80%); }
.preset__thumb--minimal { background: linear-gradient(135deg, #fff 0 30%, #c6dbef 30% 55%, #6baed6 55% 78%, #fff 78%); }
.preset__thumb--fosc { background: linear-gradient(135deg, #1b1b1f 0 30%, #7fcdbb 30% 55%, #edf8b1 55% 78%, #1b1b1f 78%); }
.preset__thumb--orto { background: linear-gradient(135deg, #3c4a37 0 30%, #b9a98a 30% 50%, rgba(233, 27, 29, .7) 50% 72%, #25323d 72%); }
.preset__thumb--3d { background: linear-gradient(160deg, #e9e9ec 0 40%, #fc8d59 40% 55%, #b30000 55% 70%, #7f0000 70% 82%, #d9d9de 82%); }
.preset__thumb--print { background: repeating-linear-gradient(90deg, #fff 0 9px, #bdbdbd 9px 18px, #737373 18px 27px, #252525 27px 36px); }

.base-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.base-opt { margin: 0; cursor: pointer; text-align: center; }
.base-opt input { position: absolute; opacity: 0; }
.base-opt__thumb { display: block; height: 36px; border: 1.5px solid var(--line); }
.base-opt.is-active .base-opt__thumb { border-color: var(--bcn-black); box-shadow: 0 0 0 1px var(--bcn-black); }
.base-opt input:focus-visible + .base-opt__thumb { box-shadow: var(--focus); }
.base-opt__name { display: block; font-size: .6875rem; line-height: 1.15; margin-top: 3px; color: var(--ink-soft); }
.base-opt.is-active .base-opt__name { color: var(--bcn-black); font-weight: 600; }
.base-opt__thumb--cap { background: #fff linear-gradient(135deg, transparent 46%, #d0d0d6 46% 54%, transparent 54%); }
/* Miniatures reals dels fons: un sol sprite vertical (static/img/bases.jpg, 12 × 200×80). Si es regenera, canvia el ?v= */
.base-opt__thumb--gris, .base-opt__thumb--simplificat, .base-opt__thumb--clar, .base-opt__thumb--estandard, .base-opt__thumb--colors, .base-opt__thumb--relleu, .base-opt__thumb--topo, .base-opt__thumb--fosc, .base-opt__thumb--nit, .base-opt__thumb--orto, .base-opt__thumb--ortogris, .base-opt__thumb--hibrid { background-image: url(../img/bases.jpg?v=1); background-size: 100% 1200%; }
.base-opt__thumb--gris { background-position: 0 0.0000%; }
.base-opt__thumb--simplificat { background-position: 0 9.0909%; }
.base-opt__thumb--clar { background-position: 0 18.1818%; }
.base-opt__thumb--estandard { background-position: 0 27.2727%; }
.base-opt__thumb--colors { background-position: 0 36.3636%; }
.base-opt__thumb--relleu { background-position: 0 45.4545%; }
.base-opt__thumb--topo { background-position: 0 54.5455%; }
.base-opt__thumb--fosc { background-position: 0 63.6364%; }
.base-opt__thumb--nit { background-position: 0 72.7273%; }
.base-opt__thumb--orto { background-position: 0 81.8182%; }
.base-opt__thumb--ortogris { background-position: 0 90.9091%; }
.base-opt__thumb--hibrid { background-position: 0 100.0000%; }
.map-panel .palette-list { max-height: 168px; }
.map-panel .palette-opt input { position: absolute; opacity: 0; }

/* ---------- Ajuda contextual -------------------------------------------- */

.help-dot {
    width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft);
    font-size: .6875rem; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0;
    text-transform: none; letter-spacing: 0; flex: none; cursor: help;
}
.help-dot:hover, .help-dot:focus { background: var(--bcn-black); color: #fff; border-color: var(--bcn-black); }
.popover { --bs-popover-max-width: 300px; --bs-popover-border-color: var(--line); --bs-popover-body-padding-x: 14px; --bs-popover-body-padding-y: 11px;
    --bs-popover-font-size: .875rem; box-shadow: var(--shadow-md); font-family: var(--bs-font-sans-serif); }
.help-panel { background: var(--info-bg); border-radius: var(--radius-lg); padding: 14px 16px; color: #093A73; font-size: .9375rem; }
.help-panel > summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 8px; }
.help-panel > summary::-webkit-details-marker { display: none; }
.help-panel[open] > summary { margin-bottom: 8px; }
.help-panel ol, .help-panel ul { margin: 0; padding-left: 1.2rem; }
.help-panel li { margin-bottom: 3px; }
.help-panel a { color: inherit; font-weight: 600; }


/* ---------- Acabats (revisió de coherència) ----------------------------- */

.choice-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767.98px) { .choice-grid--3 { grid-template-columns: 1fr; } }
.choice-grid--3 .choice__box { padding: 12px 14px; }

.opt-out { font-size: .8125rem; color: var(--ink-soft); white-space: nowrap; min-width: 3.4em; text-align: right; font-variant-numeric: tabular-nums; }
.opt-row .form-range { flex: 1; min-width: 0; }
.opt-row .form-control-color { width: 36px; height: 30px; padding: 3px; flex: none; }
[data-side-pane] > .panel-section > .opt-row,
[data-side-pane] > .panel-section > .opt-range,
[data-side-pane] > .panel-section > .form-check { margin-bottom: 12px; }
[data-side-pane] > .panel-section > :last-child { margin-bottom: 0; }

.age-row { grid-template-columns: 90px 90px minmax(0, 280px) 36px; }

.stat-row > [class*="col"] > .card { height: 100%; margin-bottom: 0; }

.swatch-field { border: 0; padding: 14px 0; margin: 0; border-top: 1px solid var(--line); }
.swatch-field:first-of-type { border-top: 0; padding-top: 0; }
.swatch-field legend { font-size: .9375rem; font-weight: 600; color: var(--bcn-black); margin-bottom: 8px; float: none; }
.swatch-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.swatch { position: relative; margin: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.swatch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.swatch > span:first-of-type { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .18); display: block; transition: transform .1s; }
.swatch:hover > span:first-of-type { transform: scale(1.1); }
.swatch input:checked + span { box-shadow: 0 0 0 2px var(--bcn-black); }
.swatch input:focus-visible + span { box-shadow: var(--focus); }
.swatch--auto { padding-right: 10px; margin-right: 4px; border-right: 1px solid var(--line); }
.swatch--auto em { font-style: normal; font-size: .8125rem; color: var(--ink-soft); }
.swatch--auto input:checked ~ em { color: var(--bcn-black); font-weight: 600; }

/* ---------- Pantalles estretes ------------------------------------------ */

@media (max-width: 575.98px) {
    .app-brand__name, .user-menu__text { display: none; }
    .page-header__actions { width: 100%; }
}
/* El visor passa a una columna: primer el mapa, després el panell */
@media (max-width: 1099.98px) {
    .viewer { grid-template-columns: minmax(0, 1fr); }
    .viewer__panel { position: static; max-height: none; }
    .viewer__map { height: 62vh; min-height: 360px; }
}
/* Pestanyes en una sola línia, amb desplaçament horitzontal si no hi caben */
.nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs .nav-link { white-space: nowrap; }
.swatch-row { gap: 6px; }
.swatch > span:first-of-type { width: 24px; height: 24px; }