:root{
    --brand-primary:#c70000;
    --brand-background:#f3f3f3;
    --brand-surface:#ffffff;
    --brand-text:#222222;
    --base-font-size:15px;
    --client-view-max-width:1600px;
}

body{
    margin:0;
    font-family:Arial,sans-serif;
    background:var(--brand-background);
    color:var(--brand-text);
    font-size:var(--base-font-size);
}

.app{
    height:100vh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

/* HEADER */

.header{
    background:var(--brand-primary);
    color:white;
    padding:20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex:0 0 auto;
    z-index:10;
}

.header-brand{
    display:flex;
    align-items:center;
    gap:12px;
}

.header-logo{
    max-height:42px;
    max-width:160px;
    object-fit:contain;
}

.header h1{
    margin:0;
}

.user-area{
    display:flex;
    align-items:center;
    gap:12px;
}

.user-area span{
    color:white;
    font-size:14px;
}

#logoutButton{
    background:white;
    color:var(--brand-primary);
    padding:8px 14px;
}

/* LAYOUT */

.main-layout{
    display:flex;
    flex:1 1 auto;
    min-height:0;
    overflow:hidden;
}

.sidebar{
    width:220px;
    flex:0 0 220px;
    background:var(--brand-surface);
    border-right:1px solid #ddd;
    padding:18px 12px;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    min-height:0;
    overflow-y:auto;
}

.sidebar-main-menu,
.sidebar-bottom-menu{
    display:flex;
    flex-direction:column;
}

.sidebar-bottom-menu{
    margin-top:auto;
}

.sidebar-menu-group{
    margin-top:18px;
}

.sidebar-menu-title{
    margin:0 0 8px;
    padding:0 12px;
    color:#777;
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.content{
    flex:1;
    min-width:0;
    min-height:0;
    padding:36px;
    overflow:auto;
}

/* MENU */

.menu-item{
    width:100%;
    display:block;
    text-align:left;
    margin-bottom:10px;
    padding:14px 16px;
    border-radius:12px;
    background:transparent;
    color:var(--brand-text);
    font-weight:bold;
}

.menu-subitem{
    padding-left:18px;
    font-size:14px;
}

.menu-item:hover{
    background:#f2f2f2;
    opacity:1;
}

.menu-item.active{
    background:var(--brand-primary);
    color:white;
}

/* GENERAL */

button{
    padding:12px 20px;
    border:none;
    border-radius:10px;
    background:var(--brand-primary);
    color:white;
    cursor:pointer;
    font-weight:bold;
}

button:hover{
    opacity:0.92;
}

input,
select{
    padding:13px 14px;
    border:1px solid #ccc;
    border-radius:10px;
    font-size:var(--base-font-size);
    box-sizing:border-box;
    background:white;
}

.hidden{
    display:none !important;
}

/* MODULE */

.module-header{
    margin-bottom:20px;
}

.module-header h2{
    margin:0;
    font-size:28px;
}

.module-header p{
    margin:6px 0 0;
    color:#666;
}

.operational-module-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
}

.operational-year-control{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border:1px solid #eeeeee;
    border-radius:14px;
    background:var(--brand-surface);
    box-shadow:0 8px 22px rgba(0,0,0,.05);
}

.operational-year-control label{
    color:#666;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
}

.operational-year-select{
    min-width:94px;
    border:1px solid #dddddd;
    border-radius:10px;
    padding:9px 10px;
    font-weight:900;
    background:white;
    color:var(--brand-text);
}

.cartera-view{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.cartera-kpi-grid{
    display:grid;
    grid-template-columns:repeat(6, minmax(0, 1fr));
    gap:10px;
}

.cartera-kpi-card{
    padding:13px;
    border:1px solid #eeeeee;
    border-radius:15px;
    background:var(--brand-surface);
    box-shadow:0 8px 22px rgba(0,0,0,.045);
}

.cartera-kpi-card span,
.cartera-meta-grid span{
    display:block;
    color:#666;
    font-size:11px;
    font-weight:900;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.cartera-kpi-card strong{
    display:block;
    margin-top:4px;
    font-size:18px;
    letter-spacing:-.03em;
}

.cartera-kpi-card small{
    display:block;
    margin-top:5px;
    color:#777;
}

.cartera-controls-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.cartera-type-tabs{
    display:flex;
    gap:8px;
    padding:5px;
    border:1px solid #eeeeee;
    border-radius:14px;
    background:#f7f7f7;
}

.cartera-type-tab{
    padding:9px 13px;
    border-radius:10px;
    background:transparent;
    color:#555;
    font-size:12px;
    font-weight:900;
}

.cartera-type-tab.active{
    background:var(--brand-primary);
    color:white;
}

.cartera-add-client-button{
    white-space:nowrap;
}

.cartera-filter-bar{
    display:grid;
    grid-template-columns:minmax(220px, 1fr) 150px 150px 170px;
    gap:10px;
}

.cartera-filter-bar input,
.cartera-filter-bar select{
    width:100%;
    min-width:0;
    padding:10px 12px;
    border:1px solid #dddddd;
    border-radius:12px;
    background:white;
    font-weight:700;
}

.cartera-table-card{
    border:1px solid #e7e7e7;
    border-radius:20px;
    background:var(--brand-surface);
    box-shadow:0 12px 34px rgba(0,0,0,.06);
    overflow:hidden;
}

.cartera-table-scroll{
    overflow-x:auto;
}

.cartera-operational-table{
    width:100%;
    min-width:0;
    border-collapse:collapse;
    table-layout:fixed;
}

.cartera-operational-table th,
.cartera-operational-table td{
    padding:10px 8px;
    border-bottom:1px solid #eeeeee;
    vertical-align:top;
    font-size:13px;
}

.cartera-operational-table th:nth-child(1),
.cartera-operational-table td:nth-child(1){
    width:42px;
}

.cartera-operational-table th:nth-child(2),
.cartera-operational-table td:nth-child(2){
    width:21%;
}

.cartera-operational-table th:nth-child(3),
.cartera-operational-table td:nth-child(3){
    width:62px;
}

.cartera-operational-table th:nth-child(4),
.cartera-operational-table td:nth-child(4){
    width:96px;
}

.cartera-operational-table th:nth-child(5),
.cartera-operational-table td:nth-child(5){
    width:29%;
}

.cartera-operational-table th:nth-child(6),
.cartera-operational-table td:nth-child(6){
    width:48px;
}

.cartera-operational-table th:nth-child(7),
.cartera-operational-table td:nth-child(7){
    width:54px;
}

.cartera-operational-table th:nth-child(8),
.cartera-operational-table td:nth-child(8){
    width:62px;
}

.cartera-operational-table th:nth-child(9),
.cartera-operational-table td:nth-child(9){
    width:72px;
}

.cartera-operational-table th:nth-child(10),
.cartera-operational-table td:nth-child(10){
    width:58px;
}

.cartera-operational-table th:nth-child(11),
.cartera-operational-table td:nth-child(11){
    width:44px;
}

.cartera-operational-table th:nth-child(12),
.cartera-operational-table td:nth-child(12){
    width:56px;
}

.cartera-operational-table th:nth-child(13),
.cartera-operational-table td:nth-child(13){
    width:92px;
}

.cartera-operational-table th{
    position:sticky;
    top:0;
    z-index:1;
    background:#f5f5f5;
    color:#555;
    font-size:11px;
    font-weight:900;
    letter-spacing:.04em;
    text-transform:uppercase;
    text-align:left;
}

.cartera-sortable-header{
    cursor:pointer;
    user-select:none;
}

.cartera-sortable-header:hover{
    background:#eeeeee;
}

.cartera-operational-table tr.cartera-row-status-na{
    background:rgba(244,244,244,.72);
}

.cartera-operational-table tr.cartera-row-status-na:hover{
    background:rgba(232,232,232,.82);
}

.cartera-operational-table tr.cartera-row-status-accepted{
    background:rgba(237,248,238,.55);
}

.cartera-operational-table tr.cartera-row-status-accepted:hover{
    background:rgba(219,241,224,.72);
}

.cartera-operational-table tr.cartera-row-status-deposit{
    background:rgba(255,244,223,.62);
}

.cartera-operational-table tr.cartera-row-status-deposit:hover{
    background:rgba(250,232,196,.78);
}

.cartera-index-cell{
    color:var(--brand-primary);
    font-weight:900;
    text-align:center;
}

.cartera-index-cell strong{
    display:block;
}

.cartera-quote-link{
    color:var(--brand-primary);
    font-weight:900;
    text-decoration:none;
}

.cartera-quote-link:hover{
    text-decoration:underline;
}

.cartera-client-cell strong,
.cartera-products-cell strong{
    display:block;
    font-weight:900;
}

.cartera-client-cell span,
.cartera-client-cell small,
.cartera-products-cell span{
    display:block;
    margin-top:3px;
    color:#666;
    line-height:1.3;
}

.cartera-client-cell .cartera-client-commercial{
    display:flex;
    align-items:center;
    gap:5px;
    margin-top:10px;
    color:#777;
}

.cartera-client-cell .cartera-client-commercial .profile-color-badge{
    display:inline-flex;
}

.cartera-products-cell{
    min-width:0;
}

.cartera-products-cell div{
    padding:6px 0;
    border-bottom:1px solid #f0f0f0;
}

.cartera-products-cell div:last-child{
    border-bottom:none;
}

.number-cell{
    text-align:right;
    white-space:nowrap;
}

.strong-total{
    color:var(--brand-primary);
    font-weight:900;
}

.cartera-status-select{
    width:100%;
    min-width:0;
    padding:7px 6px;
    border:1px solid #dddddd;
    border-radius:10px;
    background:white;
    font-size:10px;
    font-weight:900;
}

.cartera-status-select.cartera-status-na{
    background:#f1f1f1;
    color:#555;
}

.cartera-status-select.cartera-status-accepted{
    background:#edf8ee;
    color:#24783a;
    border-color:#c8e6ce;
}

.cartera-status-select.cartera-status-deposit{
    background:#fff4df;
    color:#9a6500;
    border-color:#f0d8a8;
}

.cartera-actions-cell{
    text-align:left;
}

.cartera-action-button{
    display:block;
    width:100%;
    margin:0 0 5px;
    padding:5px 7px;
    border:1px solid #dddddd;
    border-radius:9px;
    background:rgba(255,255,255,.76);
    color:#444;
    font-size:10px;
    font-weight:900;
    line-height:1.1;
}

.cartera-action-button:last-child{
    margin-bottom:0;
}

.cartera-action-button:hover{
    border-color:#cccccc;
    background:#ffffff;
    transform:none;
}

.cartera-action-button.danger{
    border-color:#f0c5cc;
    color:#c92033;
}

.cartera-action-button.danger:hover{
    background:#fff5f6;
}

.cartera-inline-select{
    width:100%;
    min-width:0;
    padding:6px 4px;
    border:1px solid #dddddd;
    border-radius:9px;
    background:white;
    font-size:11px;
    font-weight:800;
}

.cartera-gp-panel{
    border-style:dashed;
}

.cartera-modal-overlay{
    position:fixed;
    inset:0;
    z-index:2000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(0,0,0,.45);
}

.cartera-modal-card{
    width:min(760px, 100%);
    max-height:80vh;
    overflow:auto;
    padding:22px;
    border-radius:22px;
    background:white;
    box-shadow:0 24px 80px rgba(0,0,0,.24);
}

.cartera-modal-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    margin-bottom:18px;
}

.cartera-modal-header h3,
.cartera-modal-header p{
    margin-top:0;
}

.cartera-quote-list{
    display:grid;
    gap:10px;
}

.cartera-quote-option{
    width:100%;
    padding:14px;
    border:1px solid #eeeeee;
    border-radius:14px;
    background:#fafafa;
    color:var(--brand-text);
    text-align:left;
}

.cartera-quote-option strong,
.cartera-quote-option span,
.cartera-quote-option small{
    display:block;
}

.cartera-quote-option span{
    margin-top:4px;
    color:#666;
    font-size:13px;
}

.cartera-quote-option small{
    margin-top:7px;
    color:var(--brand-primary);
    font-size:12px;
    font-weight:900;
}

.cartera-notes-panel{
    display:grid;
    gap:14px;
}

.cartera-budget-note{
    padding:14px;
    border-left:4px solid var(--brand-primary);
    border-radius:12px;
    background:#fff7f7;
}

.cartera-budget-note span{
    display:block;
    margin-bottom:6px;
    color:#666;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
}

.cartera-budget-note p{
    margin:0;
}

.cartera-postit-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
}

.cartera-postit{
    padding:14px;
    border-radius:14px;
    background:#fff7cf;
    box-shadow:0 8px 20px rgba(0,0,0,.06);
}

.cartera-postit p{
    margin-bottom:0;
}

.cartera-note-textarea{
    width:100%;
    min-height:96px;
    padding:12px;
    border:1px solid #dddddd;
    border-radius:12px;
    resize:vertical;
    box-sizing:border-box;
    font-family:inherit;
}

.cartera-empty-cell{
    padding:28px !important;
    color:#666;
    text-align:center;
}

.muntatge-toolbar{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:18px;
}

.muntatge-toolbar h3,
.muntatge-toolbar p{
    margin-top:0;
}

.muntatge-table-wrap{
    width:100%;
    overflow:auto;
    border:1px solid #e7e7e7;
    border-radius:18px;
    background:white;
}

.muntatge-table{
    width:100%;
    min-width:1180px;
    border-collapse:collapse;
    table-layout:fixed;
}

.muntatge-table th,
.muntatge-table td{
    padding:10px 8px;
    border-bottom:1px solid #eeeeee;
    vertical-align:top;
    font-size:13px;
}

.muntatge-table th{
    position:sticky;
    top:0;
    z-index:1;
    background:#f5f5f5;
    color:#555;
    font-size:11px;
    font-weight:900;
    letter-spacing:.04em;
    text-transform:uppercase;
    text-align:left;
}

.muntatge-table th:nth-child(1),
.muntatge-table td:nth-child(1){ width:54px; }
.muntatge-table th:nth-child(2),
.muntatge-table td:nth-child(2){ width:190px; }
.muntatge-table th:nth-child(3),
.muntatge-table td:nth-child(3){ width:190px; }
.muntatge-table th:nth-child(4),
.muntatge-table td:nth-child(4){ width:170px; }
.muntatge-table th:nth-child(5),
.muntatge-table td:nth-child(5){ width:80px; }
.muntatge-table th:nth-child(6),
.muntatge-table td:nth-child(6){ width:70px; }
.muntatge-table th:nth-child(7),
.muntatge-table td:nth-child(7){ width:76px; }
.muntatge-table th:nth-child(8),
.muntatge-table td:nth-child(8){ width:112px; }
.muntatge-table th:nth-child(9),
.muntatge-table td:nth-child(9){ width:110px; }
.muntatge-table th:nth-child(10),
.muntatge-table td:nth-child(10){ width:100px; }
.muntatge-table th:nth-child(11),
.muntatge-table td:nth-child(11){ width:90px; }
.muntatge-table th:nth-child(12),
.muntatge-table td:nth-child(12){ width:88px; }

.muntatge-row.muntatge-status-pending{
    background:rgba(244,244,244,.72);
}

.muntatge-row.muntatge-status-in_progress{
    background:rgba(255,244,223,.62);
}

.muntatge-row.muntatge-status-assembled{
    background:rgba(237,248,238,.55);
}

.muntatge-order-cell{
    color:var(--brand-primary);
    font-weight:900;
    text-align:center;
}

.muntatge-table small{
    display:block;
    margin-top:3px;
    color:#666;
}

.muntatge-line-list span{
    display:block;
    padding:4px 0;
    border-bottom:1px solid #f0f0f0;
}

.muntatge-line-list span:last-child{
    border-bottom:none;
}

.muntatge-input,
.muntatge-select{
    width:100%;
    min-width:0;
    padding:7px 6px;
    border:1px solid #dddddd;
    border-radius:9px;
    background:white;
    font-size:11px;
    font-weight:800;
}

.muntatge-status-select{
    font-weight:900;
}

.muntatge-line-type-select{
    padding:5px 6px;
    font-size:10px;
    font-weight:800;
}

.muntatge-delivery-pill{
    display:inline-flex;
    padding:4px 8px;
    border-radius:999px;
    background:#f4f4f4;
    color:#555;
    font-size:11px;
    font-weight:900;
}

.muntatge-check-cell{
    text-align:center;
}

.muntatge-check-cell input{
    width:18px;
    height:18px;
}

.muntatge-map-modal-card{
    width:min(920px, 100%);
}

.muntatge-pallet-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(92px, 1fr));
    gap:10px;
    margin-top:18px;
}

.muntatge-pallet-cell{
    min-height:82px;
    padding:12px 10px;
    border:1px solid #e5e5e5;
    border-radius:14px;
    background:#f8f8f8;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:4px;
}

.muntatge-pallet-cell.occupied{
    border-color:rgba(199,0,0,.28);
    background:rgba(199,0,0,.08);
}

.muntatge-pallet-cell.full-capacity{
    border-color:rgba(199,0,0,.36);
    background:rgba(199,0,0,.14);
}

.muntatge-pallet-cell.over-capacity{
    border-color:rgba(130,0,0,.45);
    background:rgba(130,0,0,.2);
}

.muntatge-pallet-cell strong{
    color:var(--brand-primary);
    font-size:15px;
    font-weight:900;
}

.muntatge-pallet-cell span,
.muntatge-pallet-cell small{
    color:#555;
    font-size:11px;
    font-weight:800;
}

.module-view.hidden{
    display:none !important;
}

.client-subnav{
    display:flex;
    gap:10px;
    margin-bottom:22px;
}

.client-tab{
    background:white;
    color:var(--brand-text);
    border:1px solid #ddd;
}

.client-tab.active{
    background:var(--brand-primary);
    color:white;
    border-color:var(--brand-primary);
}

.client-view{
    max-width:var(--client-view-max-width);
}

/* BUSCADOR CLIENTES */

.client-search-box{
    background:var(--brand-surface);
    border:1px solid #e1e1e1;
    border-radius:18px;
    padding:22px;
    max-width:900px;
    display:grid;
    grid-template-columns:1fr auto auto;
    gap:12px;
    align-items:end;
    box-shadow:0 6px 18px rgba(0,0,0,0.04);
}

.client-search-box label{
    grid-column:1 / -1;
    font-size:13px;
    font-weight:800;
    text-transform:uppercase;
    color:#555;
}

.client-search-box select{
    width:100%;
    min-width:480px;
}

#advancedSearchToggle{
    white-space:nowrap;
    padding:13px 22px;
}

#result{
    margin-top:24px;
}

/* CERCA AVANÇADA */

.advanced-search-box{
    background:var(--brand-surface);
    border:1px solid #e1e1e1;
    border-radius:22px;
    padding:36px;
    max-width:1200px;
    margin-top:22px;
    box-shadow:0 6px 18px rgba(0,0,0,0.04);
}

.advanced-search-box h3{
    margin:0 0 28px 0;
    font-size:22px;
}

.advanced-search-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px 36px;
}

.advanced-search-grid input{
    width:100%;
    min-width:0;
    height:54px;
    margin:0;
}

#advancedSearchButton{
    margin-top:28px;
    min-width:160px;
    padding:14px 28px;
}

/* TARJETAS RESULTADOS */

.client-card{
    background:var(--brand-surface);
    border-radius:12px;
    padding:16px;
    margin-top:12px;
    border:1px solid #ddd;
    cursor:pointer;
    transition:0.2s;
}

.client-card:hover{
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(0,0,0,0.12);
}

.client-card strong{
    display:block;
    font-size:18px;
    margin-bottom:6px;
}

.client-card span{
    color:#666;
}

/* FICHA CLIENTE */

.client-detail-card{
    background:var(--brand-surface);
    border:1px solid #e2e2e2;
    border-radius:18px;
    margin-top:22px;
    max-width:1200px;
    width:100%;
    overflow:hidden;
    box-shadow:0 8px 24px rgba(0,0,0,0.06);
    display:grid;
    grid-template-columns:repeat(12, 1fr);
    gap:18px;
    padding:24px;
    box-sizing:border-box;
}

.client-detail-header{
    grid-column:1/-1;
    background:var(--brand-primary);
    color:white;
    margin:-24px -24px 6px -24px;
    padding:22px 24px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.client-detail-header h3{
    margin:0;
    font-size:24px;
}

.client-detail-header span{
    font-weight:bold;
    opacity:0.9;
}

.client-detail-card input[type="hidden"]{
    display:none;
}

.form-field{
    display:flex;
    flex-direction:column;
}

.form-field.full{
    grid-column:span 12;
}

.form-field.half{
    grid-column:span 6;
}

.form-field.third{
    grid-column:span 4;
}

.form-field.half-grow{
    grid-column:span 9;
}

.form-field.cp-field{
    grid-column:span 3;
}

.form-field label{
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    color:#555;
    margin-bottom:6px;
}

.form-field input,
.form-field select{
    width:100%;
    min-width:0;
    margin:0;
    padding:13px 14px;
    border:1px solid #d6d6d6;
    border-radius:10px;
    background:#fafafa;
    font-size:var(--base-font-size);
    box-sizing:border-box;
}

.form-field input:focus,
.form-field select:focus{
    outline:none;
    border-color:var(--brand-primary);
    background:white;
}

.form-actions{
    grid-column:1/-1;
    margin-top:8px;
}

#saveClientButton,
#createClientButton{
    width:100%;
    padding:16px;
    border-radius:12px;
    font-size:15px;
    font-weight:bold;
}

/* PLACEHOLDER */

.placeholder-card{
    background:var(--brand-surface);
    border:1px solid #e1e1e1;
    border-radius:18px;
    padding:28px;
    box-shadow:0 6px 18px rgba(0,0,0,0.04);
    overflow:hidden;
}

.placeholder-card h3{
    margin-top:0;
}

/* LOGIN */

.login-view{
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
}

.login-card{
    background:var(--brand-surface);
    width:400px;
    padding:40px;
    border-radius:20px;
    box-shadow:0 8px 30px rgba(0,0,0,0.08);
    display:flex;
    flex-direction:column;
    gap:14px;
}

.login-logo-wrap{
    display:flex;
    justify-content:center;
    margin-bottom:8px;
}

.login-logo{
    max-width:220px;
    max-height:110px;
    object-fit:contain;
}

.login-card h1{
    margin:0;
    color:var(--brand-primary);
}

.login-card p{
    color:#666;
    margin-bottom:10px;
}

.login-card input{
    width:100%;
    min-width:0;
}

.login-card button{
    width:100%;
}

/* RESPONSIVE */

@media(max-width:900px){

    .main-layout{
        flex-direction:column;
    }

    .sidebar{
        width:100%;
        flex:0 0 auto;
        flex-direction:row;
        display:flex;
        gap:8px;
        overflow-x:auto;
        overflow-y:hidden;
        border-right:none;
        border-bottom:1px solid #ddd;
    }

    .sidebar-main-menu,
    .sidebar-bottom-menu{
        flex-direction:row;
        gap:8px;
    }

    .sidebar-main-menu{
        align-items:center;
    }

    .sidebar-bottom-menu{
        margin-top:0;
    }

    .sidebar-menu-group{
        display:flex;
        align-items:center;
        gap:8px;
        margin-top:0;
    }

    .sidebar-menu-title{
        display:none;
    }

    .menu-item{
        white-space:nowrap;
        margin-bottom:0;
    }

    .menu-subitem{
        padding-left:16px;
    }

    .operational-module-header{
        flex-direction:column;
    }

    .operational-year-control{
        width:100%;
        justify-content:space-between;
        box-sizing:border-box;
    }

    .cartera-kpi-grid{
        grid-template-columns:1fr 1fr;
    }

    .cartera-controls-row{
        align-items:flex-start;
        flex-direction:column;
    }

    .cartera-type-tabs,
    .cartera-add-client-button{
        width:100%;
    }

    .cartera-type-tabs{
        overflow-x:auto;
    }

    .cartera-filter-bar{
        grid-template-columns:1fr;
    }

    .cartera-postit-grid{
        grid-template-columns:1fr;
    }

    .client-subnav{
        overflow-x:auto;
    }

    .client-search-box{
        grid-template-columns:1fr;
    }

    .client-search-box select{
        min-width:0;
    }

    .advanced-search-grid{
        grid-template-columns:1fr;
    }

    .client-detail-card{
        grid-template-columns:repeat(12, 1fr);
    }

    .form-field.full,
    .form-field.half,
    .form-field.third,
    .form-field.half-grow,
    .form-field.cp-field{
        grid-column:span 12;
    }

    .client-detail-header{
        flex-direction:column;
        align-items:flex-start;
        gap:6px;
    }

}

.icon-button{
    width:40px;
    height:40px;
    min-width:40px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    background:white;
    color:var(--brand-primary);
    border:1px solid #d8d8d8;
    border-radius:14px;
}

.icon-button:hover{
    background:#fafafa;
    border-color:var(--brand-primary);
    opacity:1;
}

.split-actions{
    display:grid;
    grid-template-columns:1fr 2fr;
    gap:14px;
}

.danger-button{
    background:white;
    color:var(--brand-primary);
    border:1px solid var(--brand-primary);
}

.danger-button:hover{
    background:#fff4f4;
    opacity:1;
}

.clients-table{
    width:100%;
    min-width:1400px;
    border-collapse:collapse;
    margin-top:20px;
    background:white;
    table-layout:auto;
}

.clients-table th,
.clients-table td{
    padding:18px 14px;
    border-bottom:1px solid #e5e5e5;
    text-align:left;
    font-size:14px;
    vertical-align:middle;
    box-sizing:border-box;
}

.clients-table th{
    background:#f7f7f7;
    font-weight:800;
    text-transform:uppercase;
    color:#555;
    font-size:12px;
}

.clients-table thead th{
    position:sticky;
    top:0;
    background:#f6f6f6;
    z-index:2;
    white-space:nowrap;
    cursor:pointer;
    transition:.15s;
}

.clients-table thead th:hover{
    background:#ececec;
}

.clients-table tr:hover{
    background:#fafafa;
}

.clients-table td{
    white-space:normal;
}

.small-button{
    padding:8px 12px;
    border-radius:8px;
    font-size:13px;
    white-space:nowrap;
}

.form-error-box{
    grid-column:1/-1;
    background:#fff4f4;
    border:1px solid #f0b5b5;
    color:#9b1c1c;
    border-radius:14px;
    padding:16px;
    margin-top:12px;
}

.form-error-box strong{
    display:block;
    margin-bottom:8px;
}

.form-error-box ul{
    margin:0;
    padding-left:20px;
}

.modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.35);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.modal-card{
    background:white;
    width:420px;
    max-width:calc(100vw - 40px);
    border-radius:18px;
    padding:28px;
    box-shadow:0 18px 50px rgba(0,0,0,0.22);
}

.modal-card h3{
    margin:0 0 14px;
    color:var(--brand-primary);
}

.modal-card p{
    margin:0 0 18px;
    color:#333;
}

.modal-card ul{
    margin:0 0 20px;
    padding-left:20px;
}

.modal-card li{
    margin-bottom:6px;
}

.modal-help-text{
    color:#666;
    font-size:13px;
    line-height:1.4;
}

.modal-inline-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:18px;
    margin-bottom:14px;
    flex-wrap:wrap;
}

.modal-inline-actions button{
    width:auto;
}

#modalCloseButton{
    width:100%;
}

.list-toolbar{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:24px;
    margin-bottom:20px;
}

.list-toolbar input{
    flex:1;
    min-width:0;
}

@media(max-width:900px){
    .list-toolbar{
        display:grid;
        grid-template-columns:1fr;
    }
}

.list-card-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
}

.list-card-header h3{
    margin-bottom:6px;
}

.list-card-header p{
    margin-top:0;
}

.columns-panel{
    background:#fafafa;
    border:1px solid #e2e2e2;
    border-radius:14px;
    padding:16px;
    margin-bottom:18px;
}

.columns-panel h4{
    margin:0 0 12px;
}

.columns-options{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:10px 16px;
}

.column-option{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
}

.column-option input{
    min-width:auto;
    margin:0;
}

#clientListContent,
#archivedClientsList{
    width:100%;
    overflow-x:auto;
    border-radius:18px;
}

#clientListContent::-webkit-scrollbar,
#archivedClientsList::-webkit-scrollbar{
    height:10px;
}

#clientListContent::-webkit-scrollbar-track,
#archivedClientsList::-webkit-scrollbar-track{
    background:#f2f2f2;
    border-radius:20px;
}

#clientListContent::-webkit-scrollbar-thumb,
#archivedClientsList::-webkit-scrollbar-thumb{
    background:#d4d4d4;
    border-radius:20px;
}

/* PAGINACIÓN */

.pagination-bar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:18px 0 6px;
    flex-wrap:wrap;
}

.pagination-left{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.pagination-left span{
    font-size:14px;
    color:#555;
}

.pagination-left select{
    width:auto;
    min-width:120px;
    background:white;
}

.pagination-right{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.pagination-page{
    font-size:14px;
    font-weight:700;
    color:#444;
    min-width:90px;
    text-align:center;
}

.pagination-button{
    padding:10px 16px;
    border-radius:10px;
    font-size:14px;
    min-width:110px;
}

.pagination-button:disabled{
    opacity:0.4;
    cursor:not-allowed;
}

@media(max-width:900px){

    .pagination-bar{
        flex-direction:column;
        align-items:stretch;
    }

    .pagination-left,
    .pagination-right{
        justify-content:center;
    }

}

/* COLUMNAS REDIMENSIONABLES */

.resizable-header{
    position:relative;
    user-select:none;
}

.header-label{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding-right:12px;
}

.column-resizer{
    position:absolute;
    top:0;
    right:-4px;
    width:8px;
    height:100%;
    cursor:col-resize;
    z-index:5;
}

.column-resizer:hover{
    background:rgba(199,0,0,0.18);
}

body.is-resizing-column{
    cursor:col-resize;
    user-select:none;
}

body.is-resizing-column *{
    cursor:col-resize !important;
}

.action-column{
    width:110px;
    min-width:110px;
    text-align:left;
}

/* CLIENTS — PULIDO FINAL */

.status-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 12px;
    border-radius:999px;
    font-size:13px;
    font-weight:800;
    text-transform:uppercase;
}

.status-badge.active{
    background:#edf8ef;
    color:#1f7a38;
    border:1px solid #bde5c6;
}

.status-badge.archived{
    background:#fff4f4;
    color:#a60000;
    border:1px solid #f0b5b5;
}

.client-detail-header-info{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.secondary-button{
    background:white;
    color:var(--brand-primary);
    border:1px solid var(--brand-primary);
}

.secondary-button:hover{
    background:#fff4f4;
    opacity:1;
}

.inline-action-button{
    width:auto;
    padding:10px 14px;
    border-radius:10px;
    font-size:13px;
    align-self:end;
}

.columns-panel-actions{
    margin-top:16px;
    padding-top:14px;
    border-top:1px solid #e2e2e2;
}

.reset-list-view-button{
    width:100%;
}

.billing-address-field{
    grid-column:span 8;
}

.copy-address-field{
    grid-column:span 1;
    justify-content:flex-end;
}

.copy-address-button{
    width:54px;
    height:54px;
    min-width:54px;
    padding:0;
    border-radius:12px;
    background:white;
    color:var(--brand-primary);
    border:1px solid #e3bcbc;
    font-size:22px;
    line-height:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}

.copy-address-button:hover{
    background:#fff4f4;
    border-color:var(--brand-primary);
    opacity:1;
}

@media(max-width:900px){

    .billing-address-field,
    .copy-address-field{
        grid-column:span 12;
    }

    .copy-address-field{
        justify-content:flex-start;
    }

}

/* CLIENT DETAIL TABS / ACTIVITY */

.client-inner-tabs{
    grid-column:1/-1;
    display:flex;
    gap:8px;
    padding:0;
    margin:0 0 4px 0;
    border-bottom:1px solid #e5e5e5;
}

.client-inner-tab{
    background:white;
    color:#333;
    border:1px solid #ddd;
    border-bottom:none;
    border-radius:12px 12px 0 0;
    padding:12px 18px;
    font-size:14px;
}

.client-inner-tab.active{
    background:var(--brand-primary);
    color:white;
    border-color:var(--brand-primary);
}

.client-inner-content{
    grid-column:1/-1;
}

.client-tab-panel{
    display:grid;
    grid-template-columns:repeat(12, 1fr);
    gap:18px;
}

.activity-timeline{
    grid-column:1/-1;
    display:flex;
    flex-direction:column;
    gap:14px;
}

.client-history-actions{
    grid-column:1/-1;
    display:flex;
    justify-content:flex-end;
}

.activity-item{
    background:#fafafa;
    border:1px solid #e5e5e5;
    border-radius:16px;
    padding:16px;
}

.activity-meta{
    display:flex;
    justify-content:space-between;
    gap:12px;
    color:#666;
    font-size:13px;
    margin-bottom:8px;
}

.activity-title{
    font-weight:800;
    color:#222;
    margin-bottom:10px;
}

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

.activity-change-grid div{
    background:white;
    border:1px solid #eee;
    border-radius:12px;
    padding:12px;
}

.activity-change-grid small{
    display:block;
    color:#777;
    font-size:12px;
    margin-bottom:6px;
    text-transform:uppercase;
    font-weight:800;
}

.activity-change-grid strong{
    display:block;
    color:#222;
    word-break:break-word;
}

.activity-note{
    white-space:pre-wrap;
    color:#333;
    line-height:1.45;
}

.activity-event-changes{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.activity-event-change-row{
    display:grid;
    grid-template-columns:10px 1fr;
    gap:10px;
    align-items:start;
    background:white;
    border:1px solid #eeeeee;
    border-radius:12px;
    padding:10px 12px;
}

.activity-event-change-dot{
    width:7px;
    height:7px;
    margin-top:7px;
    border-radius:50%;
    background:var(--brand-primary);
}

.activity-event-change-row strong{
    display:block;
    color:#222;
    font-size:14px;
    line-height:1.35;
}

.activity-event-change-row small{
    display:block;
    margin-top:4px;
    color:#666;
    font-size:12px;
    line-height:1.35;
}

.activity-entity-meta{
    display:inline-flex;
    align-items:center;
    margin-top:10px;
    padding:6px 10px;
    border-radius:999px;
    background:white;
    border:1px solid #eeeeee;
    color:#666;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
}

.note-form-card{
    grid-column:1/-1;
    background:#fafafa;
    border:1px solid #e5e5e5;
    border-radius:16px;
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.note-form-card label{
    font-size:13px;
    font-weight:800;
    text-transform:uppercase;
    color:#555;
}

.note-form-card textarea{
    width:100%;
    min-height:110px;
    resize:vertical;
    padding:13px 14px;
    border:1px solid #d6d6d6;
    border-radius:10px;
    background:white;
    font-size:15px;
    font-family:Arial,sans-serif;
    box-sizing:border-box;
}

.note-form-card textarea:focus{
    outline:none;
    border-color:var(--brand-primary);
}

#addClientNoteButton{
    align-self:flex-start;
}

.empty-activity-card{
    grid-column:1/-1;
    background:#fafafa;
    border:1px dashed #ddd;
    border-radius:16px;
    padding:22px;
    color:#666;
}

@media(max-width:900px){

    .client-inner-tabs{
        overflow-x:auto;
    }

    .client-tab-panel{
        grid-template-columns:1fr;
    }

    .activity-change-grid{
        grid-template-columns:1fr;
    }

}

/* CONFIGURACIÓ */

.config-view{
    max-width:1200px;
    display:flex;
    flex-direction:column;
    gap:22px;
}

.config-card-header{
    margin-bottom:20px;
}

.config-card-header h3{
    margin:0 0 6px;
}

.config-card-header p{
    margin:0;
    color:#666;
}

.config-grid{
    display:grid;
    grid-template-columns:repeat(12, 1fr);
    gap:18px;
}

.config-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.config-actions button{
    min-width:220px;
}

.pdf-config-layout{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px;
}

.pdf-config-group{
    border:1px solid rgba(0,0,0,.08);
    border-radius:16px;
    background:rgba(255,255,255,.72);
    padding:18px;
}

.pdf-config-group h4{
    margin:0 0 14px;
    font-size:16px;
}

.pdf-config-options{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px 14px;
}

.pdf-config-options label{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    font-weight:700;
    color:var(--brand-text);
}

.pdf-config-options input{
    width:16px;
    height:16px;
    accent-color:var(--brand-primary);
}

.pdf-preview-card{
    margin-top:18px;
    border:1px solid rgba(0,0,0,.08);
    border-radius:16px;
    background:#f5f5f5;
    overflow:hidden;
}

.pdf-preview-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 12px;
    border-bottom:1px solid rgba(0,0,0,.08);
    background:#ffffff;
}

.pdf-preview-header span{
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:#555;
}

.pdf-preview-frame{
    height:520px;
    overflow:hidden;
    padding:12px;
    background:linear-gradient(135deg, #f7f7f7, #ededed);
}

.pdf-preview-frame .document-view{
    width:210mm;
    max-width:none;
    margin:0;
    transform:scale(.44);
    transform-origin:top left;
}

.pdf-preview-frame .document-actions{
    display:none;
}

.pdf-preview-frame .document-page{
    margin:0;
    border-radius:16px;
    box-shadow:0 14px 34px rgba(0,0,0,.14);
}

input[type="color"]{
    height:52px;
    padding:6px;
}

@media(max-width:900px){

    .config-grid{
        grid-template-columns:1fr;
    }

    .config-grid .form-field.full,
    .config-grid .form-field.half,
    .config-grid .form-field.third{
        grid-column:auto;
    }

    .pdf-config-layout,
    .pdf-config-options{
        grid-template-columns:1fr;
    }

    .pdf-preview-frame{
        height:430px;
    }

    .pdf-preview-frame .document-view{
        transform:scale(.34);
    }

}

/* DENSIDAD VISUAL */

body.density-compact .content{
    padding:24px;
}

body.density-compact button{
    padding:10px 16px;
}

body.density-compact input,
body.density-compact select{
    padding:10px 12px;
}

body.density-compact .client-detail-card,
body.density-compact .placeholder-card{
    padding:20px;
}

body.density-large .content{
    padding:44px;
}

body.density-large button{
    padding:14px 24px;
}

body.density-large input,
body.density-large select{
    padding:15px 16px;
}

body.density-large .client-detail-card,
body.density-large .placeholder-card{
    padding:30px;
}

.logo-upload-row{
    display:grid;
    grid-template-columns:1fr auto;
    gap:12px;
    align-items:center;
}

.logo-upload-row input[type="file"]{
    width:100%;
    background:white;
}

.config-help-text{
    margin-top:6px;
    color:#777;
    font-size:13px;
}

@media(max-width:900px){

    .logo-upload-row{
        grid-template-columns:1fr;
    }

}

:root{
    --login-background:var(--brand-background);
    --login-card-background:var(--brand-surface);
}

.login-view{
    background:var(--login-background);
}

.login-card{
    background:var(--login-card-background);
}

/* ==========================================================
   HOME
========================================================== */

.home-view{
    display:flex;
    flex-direction:column;
    gap:28px;
    max-width:1600px;
}

.home-hero{
    position:relative;
    min-height:420px;
    border-radius:28px;
    overflow:hidden;
    background:
        linear-gradient(
            135deg,
            rgba(25,25,25,.72),
            rgba(35,35,35,.38)
        ),
        url("https://images.unsplash.com/photo-1512428813834-c702c7702b78?q=80&w=1800&auto=format&fit=crop")
        center center / cover;
    box-shadow:
        0 20px 50px rgba(0,0,0,.10);
}

.home-hero-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:1;
}

.home-hero-content{
    position:relative;
    z-index:2;
    min-height:420px;
    padding:56px;
    display:flex;
    align-items:flex-end;
}

.home-welcome-block{
    max-width:720px;
    color:white;
}

.home-date{
    display:inline-flex;
    margin-bottom:18px;
    font-size:14px;
    font-weight:700;
    letter-spacing:.03em;
    text-transform:uppercase;
    opacity:.92;
}

#homeWelcomeTitle{
    margin:0;
    font-size:56px;
    line-height:1.04;
    font-weight:900;
    letter-spacing:-0.03em;
}

#homeHeroSubtitle{
    margin:16px 0 24px;
    font-size:22px;
    line-height:1.45;
    opacity:.94;
    max-width:620px;
}

.home-campaign-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 18px;
    border-radius:999px;
    background:rgba(255,255,255,.14);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.22);
    color:white;
    font-weight:700;
    font-size:14px;
}

/* KPI */

.home-kpi-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:18px;
}

.kpi-card{
    background:white;
    border-radius:22px;
    padding:28px;
    border:1px solid #ececec;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
    transition:.18s ease;
}

.kpi-card:hover{
    transform:translateY(-2px);
}

.kpi-label{
    display:block;
    font-size:14px;
    font-weight:700;
    color:#666;
    margin-bottom:14px;
    text-transform:uppercase;
    letter-spacing:.03em;
}

.kpi-value{
    display:block;
    font-size:38px;
    line-height:1;
    font-weight:900;
    color:#222;
}

/* ACTIVITY */

.home-activity-card{
    padding:32px;
}

#homeRecentActivity{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.home-activity-item{
    display:flex;
    justify-content:space-between;
    gap:18px;
    padding:18px 0;
    border-bottom:1px solid #ececec;
}

.home-activity-item:last-child{
    border-bottom:none;
}

.home-activity-left{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.home-activity-title{
    font-weight:800;
    color:#222;
}

.home-activity-subtitle{
    font-size:14px;
    color:#666;
}

.home-activity-date{
    white-space:nowrap;
    color:#888;
    font-size:13px;
}

/* RESPONSIVE */

@media(max-width:1100px){

    .home-kpi-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:900px){

    .home-hero{
        min-height:340px;
    }

    .home-hero-content{
        min-height:340px;
        padding:34px;
    }

    #homeWelcomeTitle{
        font-size:40px;
    }

    #homeHeroSubtitle{
        font-size:18px;
    }

    .home-kpi-grid{
        grid-template-columns:1fr;
    }

    .home-activity-item{
        flex-direction:column;
        gap:10px;
    }

}
/* ==========================================================
   CONFIG TABS — UX SaaS
========================================================== */

.config-view{
    max-width:1200px;
    display:flex;
    flex-direction:column;
    gap:20px;
}

.config-tabs{
    display:inline-flex;
    align-items:center;
    gap:6px;
    width:max-content;
    max-width:100%;
    padding:6px;
    background:rgba(255,255,255,.82);
    border:1px solid #e5e5e5;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(0,0,0,.04);
    overflow-x:auto;
}

.config-tab{
    background:transparent;
    color:#555;
    border:1px solid transparent;
    border-radius:14px;
    padding:12px 18px;
    font-size:14px;
    font-weight:800;
    white-space:nowrap;
}

.config-tab:hover{
    background:#f7f7f7;
    color:#222;
    opacity:1;
}

.config-tab.active{
    background:var(--brand-primary);
    color:white;
    border-color:var(--brand-primary);
    box-shadow:0 8px 18px rgba(0,0,0,.10);
}

.config-panel{
    animation:configPanelIn .18s ease-out;
}

.config-panel.active{
    display:block;
}

@keyframes configPanelIn{
    from{
        opacity:0;
        transform:translateY(6px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

.config-card{
    border-radius:24px;
    border:1px solid #ececec;
    box-shadow:0 16px 42px rgba(0,0,0,.055);
}

.config-card-header{
    padding-bottom:18px;
    border-bottom:1px solid #eeeeee;
}

.config-card-header h3{
    font-size:23px;
    letter-spacing:-0.02em;
}

.config-actions{
    position:sticky;
    bottom:0;
    z-index:20;
    background:linear-gradient(180deg, rgba(243,243,243,0), var(--brand-background) 22%);
    padding:22px 0 0;
}

@media(max-width:900px){

    .config-tabs{
        width:100%;
    }

    .config-tab{
        flex:1;
        padding:11px 12px;
    }

}

/* ==========================================================
   HOME — REFINAMENT PREMIUM
========================================================== */

.home-view{
    gap:30px;
}

.home-hero{
    min-height:460px;
    border-radius:32px;
    box-shadow:
        0 28px 80px rgba(0,0,0,.12),
        inset 0 0 0 1px rgba(255,255,255,.10);
}

.home-hero-content{
    min-height:460px;
    padding:64px;
}

.home-welcome-block{
    max-width:780px;
}

.home-date{
    margin-bottom:20px;
    padding:9px 13px;
    border-radius:999px;
    background:rgba(255,255,255,.13);
    border:1px solid rgba(255,255,255,.16);
    backdrop-filter:blur(10px);
}

#homeWelcomeTitle{
    font-size:60px;
    max-width:860px;
    text-shadow:0 3px 20px rgba(0,0,0,.22);
}

#homeHeroSubtitle{
    max-width:650px;
    margin-top:18px;
    margin-bottom:28px;
    font-size:21px;
}

.home-campaign-badge{
    box-shadow:0 10px 30px rgba(0,0,0,.12);
}

.home-kpi-grid{
    gap:20px;
}

.kpi-card{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    padding:30px;
    box-shadow:0 14px 36px rgba(0,0,0,.055);
}

.kpi-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:var(--brand-primary);
    opacity:.85;
}

.kpi-label{
    color:#777;
    font-size:13px;
}

.kpi-value{
    font-size:40px;
    letter-spacing:-0.03em;
}

.home-activity-card{
    padding:34px;
    border-radius:26px;
    border:1px solid #ececec;
    box-shadow:0 16px 42px rgba(0,0,0,.052);
}

#homeRecentActivity{
    gap:12px;
    margin-top:20px;
}

.home-activity-item{
    position:relative;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:flex-start;
    gap:18px;
    padding:18px;
    background:#fafafa;
    border:1px solid #eeeeee;
    border-radius:20px;
    transition:.16s ease;
}

.home-activity-item:hover{
    background:white;
    border-color:#e2e2e2;
    transform:translateY(-1px);
    box-shadow:0 10px 26px rgba(0,0,0,.045);
}

.home-activity-main{
    display:flex;
    align-items:flex-start;
    gap:14px;
    min-width:0;
}

.home-activity-avatar{
    width:42px;
    height:42px;
    min-width:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:15px;
    background:var(--brand-primary);
    color:white;
    font-weight:900;
    box-shadow:0 8px 18px rgba(0,0,0,.10);
}

.home-activity-content{
    min-width:0;
}

.home-activity-headline{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
    margin-bottom:11px;
    color:#333;
}

.home-activity-headline strong{
    font-size:15px;
    color:#111;
}

.home-activity-headline span{
    font-size:14px;
    color:#555;
}

.home-activity-details{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.home-activity-detail-row{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    font-size:14px;
}

.home-activity-detail-row span,
.home-activity-change-grid span{
    color:#777;
    font-weight:800;
    text-transform:uppercase;
    font-size:11px;
    letter-spacing:.04em;
}

.home-activity-detail-row strong{
    color:#222;
    font-size:14px;
    word-break:break-word;
}

.home-activity-change-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:2px;
}

.home-activity-change-grid div{
    background:white;
    border:1px solid #eeeeee;
    border-radius:14px;
    padding:10px 12px;
}

.home-activity-change-grid strong{
    display:block;
    margin-top:4px;
    color:#222;
    font-size:14px;
    word-break:break-word;
}

.home-activity-note-preview{
    max-width:720px;
    padding:12px 14px;
    background:white;
    border:1px solid #eeeeee;
    border-radius:14px;
    color:#444;
    font-size:14px;
    line-height:1.45;
    white-space:pre-wrap;
}

.home-activity-date{
    padding-top:2px;
    white-space:nowrap;
    color:#777;
    font-size:13px;
    font-weight:700;
}

@media(max-width:900px){

    .home-hero,
    .home-hero-content{
        min-height:360px;
    }

    .home-hero-content{
        padding:34px;
    }

    #homeWelcomeTitle{
        font-size:40px;
    }

    .home-activity-item{
        grid-template-columns:1fr;
    }

    .home-activity-change-grid{
        grid-template-columns:1fr;
    }

}

/* ==========================================================
   USER HEADER / PROFILE ENTRY
========================================================== */

.current-user-button{
    display:flex;
    align-items:center;
    gap:10px;
    background:rgba(255,255,255,0.14);
    color:white;
    border:1px solid rgba(255,255,255,0.24);
    border-radius:999px;
    padding:7px 12px 7px 7px;
    box-shadow:none;
}

.current-user-button:hover{
    background:rgba(255,255,255,0.22);
    opacity:1;
}

.current-user-avatar{
    width:32px;
    height:32px;
    min-width:32px;
    border-radius:999px;
    background:white;
    color:var(--brand-primary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    font-weight:900;
    overflow:hidden;
}

.current-user-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.current-user-label{
    color:white;
    font-size:14px;
    font-weight:800;
}

.profile-color-badge{
    display:inline-flex;
    align-items:center;
    width:max-content;
    max-width:100%;
    padding:3px 9px;
    border:1px solid color-mix(in srgb, var(--profile-badge-color) 34%, white);
    border-radius:999px;
    background:color-mix(in srgb, var(--profile-badge-color) 14%, white);
    color:color-mix(in srgb, var(--profile-badge-color) 68%, #111);
    font-size:.86em;
    font-weight:900;
    line-height:1.25;
    vertical-align:middle;
    white-space:nowrap;
}

.commercial-color-badge{
    text-transform:none;
}


/* ==========================================================
   PROFILE MODULE
========================================================== */

.profile-view{
    max-width:1100px;
    display:flex;
    flex-direction:column;
    gap:22px;
}

.profile-card{
    border-radius:24px;
    border:1px solid #ececec;
    box-shadow:0 16px 42px rgba(0,0,0,.055);
}

.profile-card-header{
    display:flex;
    align-items:center;
    gap:22px;
    padding-bottom:24px;
    margin-bottom:24px;
    border-bottom:1px solid #eeeeee;
}

.profile-card-header h3{
    margin:0 0 6px;
    font-size:26px;
    letter-spacing:-0.02em;
}

.profile-card-header p{
    margin:0 0 10px;
    color:#666;
}

.profile-avatar-preview-wrap{
    position:relative;
    width:104px;
    height:104px;
    min-width:104px;
}

.profile-avatar-preview,
.profile-avatar-preview-image{
    width:104px;
    height:104px;
    border-radius:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--brand-primary);
    color:white;
    font-size:38px;
    font-weight:900;
    object-fit:cover;
    box-shadow:0 16px 34px rgba(0,0,0,.12);
}

.profile-role-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 12px;
    border-radius:999px;
    background:#f4f4f4;
    color:#444;
    border:1px solid #e0e0e0;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.profile-grid{
    display:grid;
    grid-template-columns:repeat(12, 1fr);
    gap:18px;
}

.profile-grid .form-field.full{
    grid-column:span 12;
}

.profile-grid .form-field.half{
    grid-column:span 6;
}

.profile-actions{
    margin-top:24px;
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.profile-actions button{
    min-width:220px;
}

#profileEmail:disabled,
#profileRole:disabled{
    background:#f4f4f4;
    color:#666;
    cursor:not-allowed;
}

@media(max-width:900px){

    .profile-card-header{
        flex-direction:column;
        align-items:flex-start;
    }

    .profile-grid{
        grid-template-columns:1fr;
    }

    .profile-grid .form-field.full,
    .profile-grid .form-field.half{
        grid-column:auto;
    }

    .profile-actions button{
        width:100%;
    }

    .current-user-label{
        display:none;
    }

}
/* ==========================================================
   PRODUCTES
========================================================== */

.products-module-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
}

.products-view{
    display:grid;
    grid-template-columns:minmax(520px, 0.95fr) minmax(520px, 1.05fr);
    gap:22px;
    align-items:start;
    max-width:1600px;
}

.products-list-card,
.product-detail-card{
    min-width:0;
}

.products-toolbar{
    display:grid;
    grid-template-columns:1fr 190px 140px auto;
    align-items:center;
}

.products-toolbar input,
.products-toolbar select{
    width:100%;
    min-width:0;
}

.products-table-wrap,
.product-tiers-table-wrap{
    width:100%;
    overflow-x:auto;
    border-radius:18px;
}

.products-table{
    min-width:760px;
    margin-top:0;
}

.products-table tr.product-list-row{
    cursor:pointer;
}

.products-table tr.product-list-row.selected{
    background:#fff7f7;
}

.product-list-name{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.product-list-name strong{
    color:#222;
    font-size:14px;
}

.product-list-name span,
.muted-text{
    color:#777;
    font-size:13px;
}

.product-empty-state h3{
    margin-top:0;
}

.product-detail-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:18px;
    padding-bottom:20px;
    margin-bottom:22px;
    border-bottom:1px solid #eeeeee;
}

.product-detail-header h3{
    margin:4px 0 6px;
    font-size:24px;
    letter-spacing:-0.02em;
}

.product-detail-header p{
    margin:0;
    color:#666;
}

.product-detail-kicker{
    color:var(--brand-primary);
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.05em;
}

.product-permission-note{
    background:#fff8e8;
    border:1px solid #f2dfaa;
    color:#675100;
    border-radius:14px;
    padding:14px 16px;
    margin-bottom:18px;
    font-weight:700;
}

.product-detail-layout{
    display:grid;
    grid-template-columns:240px 1fr;
    gap:22px;
    align-items:start;
}

.product-image-card{
    background:#fafafa;
    border:1px solid #eeeeee;
    border-radius:20px;
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.product-image-placeholder,
.product-image-preview{
    width:100%;
    aspect-ratio:1 / 1;
    border-radius:18px;
    overflow:hidden;
}

.product-image-placeholder{
    display:flex;
    align-items:center;
    justify-content:center;
    background:white;
    border:1px dashed #d6d6d6;
    color:#777;
    font-weight:800;
}

.product-image-preview{
    display:block;
    object-fit:cover;
    border:1px solid #eeeeee;
    background:white;
}

.product-form-grid{
    display:grid;
    grid-template-columns:repeat(12, 1fr);
    gap:18px;
}

.product-form-grid .form-field.full{
    grid-column:span 12;
}

.product-form-grid .form-field.half{
    grid-column:span 6;
}

.product-form-grid .form-field.third{
    grid-column:span 4;
}

.product-form-grid textarea,
.product-add-tier-grid textarea{
    width:100%;
    min-height:96px;
    resize:vertical;
    padding:13px 14px;
    border:1px solid #d6d6d6;
    border-radius:10px;
    background:#fafafa;
    font-size:var(--base-font-size);
    font-family:Arial,sans-serif;
    box-sizing:border-box;
}

.product-form-grid textarea:focus,
.product-add-tier-grid textarea:focus{
    outline:none;
    border-color:var(--brand-primary);
    background:white;
}

.product-form-grid input:disabled,
.product-form-grid select:disabled,
.product-form-grid textarea:disabled,
.product-tiers-table input:disabled,
.product-tiers-table select:disabled{
    background:#f4f4f4;
    color:#666;
    cursor:not-allowed;
}

.product-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:22px;
    padding-top:20px;
    border-top:1px solid #eeeeee;
}

.product-actions button{
    min-width:180px;
}

.product-tiers-card{
    margin-top:24px;
    padding-top:22px;
    border-top:1px solid #eeeeee;
}

.product-tiers-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    margin-bottom:18px;
}

.product-tiers-header h4{
    margin:0 0 6px;
    font-size:20px;
}

.product-tiers-header p{
    margin:0;
    color:#666;
}

.product-tiers-table{
    min-width:900px;
    margin-top:0;
}

.product-tiers-table input,
.product-tiers-table select{
    width:100%;
    min-width:100px;
    padding:10px 12px;
}

.product-tier-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.product-add-tier-card{
    margin-top:18px;
    background:#fafafa;
    border:1px solid #eeeeee;
    border-radius:18px;
    padding:18px;
}

.product-add-tier-card h5{
    margin:0 0 14px;
    font-size:16px;
}

.product-add-tier-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr)) auto;
    gap:14px;
    align-items:end;
}

.product-add-tier-grid .form-field{
    min-width:0;
}

.product-add-tier-grid input{
    width:100%;
}

.product-add-tier-grid button{
    height:51px;
    white-space:nowrap;
}

@media(max-width:1250px){

    .products-view{
        grid-template-columns:1fr;
    }

}

@media(max-width:900px){

    .products-module-header{
        flex-direction:column;
    }

    .products-module-header button{
        width:100%;
    }

    .products-toolbar{
        grid-template-columns:1fr;
    }

    .product-detail-layout{
        grid-template-columns:1fr;
    }

    .product-image-card{
        max-width:320px;
    }

    .product-form-grid{
        grid-template-columns:1fr;
    }

    .product-form-grid .form-field.full,
    .product-form-grid .form-field.half,
    .product-form-grid .form-field.third{
        grid-column:auto;
    }

    .product-actions button{
        width:100%;
    }

    .product-add-tier-grid{
        grid-template-columns:1fr;
    }

    .product-add-tier-grid button{
        width:100%;
    }

}

/* ==========================================================
   PRODUCTES — IMATGES
========================================================== */

.product-image-upload-area{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding-top:10px;
    border-top:1px solid #eeeeee;
}

.product-image-upload-area label{
    font-size:13px;
    font-weight:800;
    text-transform:uppercase;
    color:#555;
}

.product-image-upload-area input[type="file"]{
    width:100%;
    min-width:0;
    background:white;
    font-size:13px;
}

.product-image-upload-area.is-disabled{
    opacity:.62;
}

.product-image-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
}

.product-image-actions button{
    width:100%;
    padding:11px 14px;
    font-size:13px;
}

.product-image-actions button:disabled,
.product-image-upload-area input:disabled{
    opacity:.48;
    cursor:not-allowed;
}

#productImagePreviewBox{
    width:100%;
}

@media(max-width:900px){

    .product-image-actions{
        grid-template-columns:1fr;
    }

}

/* ==========================================================
   PRESSUPOSTOS MODULE
========================================================== */

.quotes-module-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:18px;
}

.quote-subnav{
    display:flex;
    gap:10px;
    margin-bottom:22px;
    overflow-x:auto;
}

.quote-tab{
    background:white;
    color:var(--brand-text);
    border:1px solid #ddd;
    white-space:nowrap;
}

.quote-tab.active{
    background:var(--brand-primary);
    color:white;
    border-color:var(--brand-primary);
}

.quotes-view{
    max-width:1600px;
    display:flex;
    flex-direction:column;
    gap:22px;
}

.invoices-view{
    max-width:1600px;
    display:flex;
    flex-direction:column;
    gap:18px;
}

.invoices-module-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:18px;
}

.invoices-module-header button{
    margin-left:auto;
}

.invoice-status-tabs{
    display:flex;
    gap:10px;
    overflow-x:auto;
}

.invoice-status-tab{
    background:white;
    color:var(--brand-text);
    border:1px solid #ddd;
    white-space:nowrap;
}

.invoice-status-tab.active{
    background:var(--brand-primary);
    color:white;
    border-color:var(--brand-primary);
}

.invoices-list-card{
    border-radius:24px;
    border:1px solid #ececec;
    box-shadow:0 16px 42px rgba(0,0,0,.052);
}

.invoices-table-wrap{
    width:100%;
    overflow-x:auto;
    border-radius:18px;
}

.invoices-table{
    min-width:1180px;
}

.invoice-row-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.invoice-list-row{
    cursor:pointer;
}

.invoice-status-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.03em;
    border:1px solid #e0e0e0;
    background:#f7f7f7;
    color:#444;
}

.invoice-status-per_revisar{
    background:#fff8e8;
    color:#8a5a00;
    border-color:#efd38c;
}

.invoice-status-sent{
    background:#eef5ff;
    color:#1d5b9f;
    border-color:#bed7f4;
}

.invoice-status-paid{
    background:#edf8ef;
    color:#1f7a38;
    border-color:#bde5c6;
}

.invoice-status-cancelled{
    background:#fff4f4;
    color:#a60000;
    border-color:#f0b5b5;
}

.invoice-detail-card{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.invoice-detail-topbar{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.invoice-detail-header{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:22px;
    border:1px solid #eeeeee;
    border-radius:18px;
    background:#fafafa;
}

.invoice-detail-header h3{
    margin:4px 0 8px;
    font-size:28px;
    letter-spacing:-.03em;
}

.invoice-detail-header p{
    margin:0;
    color:#666;
}

.invoice-detail-header-total{
    min-width:220px;
    text-align:right;
}

.invoice-detail-header-total span,
.invoice-detail-header-total small{
    display:inline-flex;
}

.invoice-detail-header-total > span{
    color:#666;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
}

.invoice-detail-header-total strong{
    display:block;
    margin:6px 0 10px;
    color:var(--brand-primary);
    font-size:30px;
}

.invoice-detail-section{
    border:1px solid #eeeeee;
    border-radius:18px;
    padding:18px;
    background:#ffffff;
}

.invoice-detail-section h4{
    margin:0 0 14px;
}

.invoice-detail-form-grid{
    display:grid;
    grid-template-columns:repeat(12, 1fr);
    gap:14px;
}

.invoice-detail-form-grid .third{
    grid-column:span 3;
}

.invoice-detail-status-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:14px;
}

.invoice-client-billing-block{
    background:#fafafa;
    border:1px solid #eeeeee;
    border-radius:12px;
    padding:18px;
    color:#111;
    line-height:1.25;
}

.invoice-client-billing-block strong{
    display:block;
    margin-bottom:4px;
    font-size:22px;
    line-height:1.12;
    letter-spacing:-.02em;
}

.invoice-client-billing-block span{
    display:block;
    font-size:17px;
    line-height:1.22;
}

.invoice-detail-totals span{
    display:block;
    color:#666;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    margin-bottom:5px;
}

.invoice-detail-totals strong{
    display:block;
    color:#222;
    word-break:break-word;
}

.invoice-detail-lines-table{
    min-width:900px;
}

.invoice-detail-lines-table input,
.invoice-detail-lines-table textarea,
.invoice-detail-lines-table select{
    width:100%;
    border:1px solid #d6d6d6;
    border-radius:8px;
    padding:9px 10px;
    font-family:Arial,sans-serif;
    font-size:14px;
    box-sizing:border-box;
}

.invoice-detail-lines-table textarea{
    min-height:58px;
    margin-top:6px;
    resize:vertical;
}

.invoice-line-number-input{
    min-width:92px;
}

.invoice-detail-totals{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:12px;
}

.invoice-detail-totals div{
    background:#fafafa;
    border:1px solid #eeeeee;
    border-radius:12px;
    padding:12px;
}

.invoice-detail-total-main{
    background:#fff4f4 !important;
    border-color:var(--brand-primary) !important;
}

.invoice-notes-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.invoice-notes-grid textarea{
    width:100%;
    min-height:110px;
    resize:vertical;
    padding:13px 14px;
    border:1px solid #d6d6d6;
    border-radius:10px;
    background:white;
    font-size:15px;
    font-family:Arial,sans-serif;
    box-sizing:border-box;
}

.invoice-payments-section{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.invoice-payment-summary{
    display:grid;
    grid-template-columns:repeat(2, minmax(160px, 1fr));
    gap:12px;
}

.invoice-payment-summary div{
    background:#fafafa;
    border:1px solid #eeeeee;
    border-radius:12px;
    padding:12px;
}

.invoice-payment-summary span{
    display:block;
    color:#666;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    margin-bottom:5px;
}

.invoice-payment-summary strong{
    display:block;
    color:#222;
    font-size:20px;
}

.invoice-payment-form{
    display:grid;
    grid-template-columns:repeat(4, 1fr) auto;
    gap:12px;
    align-items:end;
}

.invoice-payment-form button{
    white-space:nowrap;
}

.invoice-payments-table{
    min-width:760px;
}

/* IMPORTACIONS */

.imports-view{
    max-width:1300px;
    display:flex;
    flex-direction:column;
    gap:18px;
}

.imports-intro-card h3{
    margin:0 0 8px;
}

.imports-intro-card p{
    margin:0;
    color:#666;
    line-height:1.45;
}

.imports-card-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:16px;
}

.imports-card{
    background:white;
    border:1px solid #eeeeee;
    border-radius:20px;
    padding:20px;
    box-shadow:0 14px 34px rgba(0,0,0,.045);
    cursor:pointer;
    transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.imports-card:hover{
    transform:translateY(-2px);
    border-color:#dddddd;
    box-shadow:0 18px 42px rgba(0,0,0,.07);
}

.imports-card-featured{
    border-color:rgba(199,0,0,.22);
}

.imports-card-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
}

.imports-icon{
    width:42px;
    height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:#f6f6f6;
    font-size:22px;
}

.imports-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:7px 10px;
    border-radius:999px;
    background:#f3f3f3;
    color:#666;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.03em;
}

.imports-status-available{
    background:#fff4f4;
    color:var(--brand-primary);
}

.imports-card h3{
    margin:0 0 8px;
    font-size:19px;
}

.imports-card p{
    margin:0;
    color:#666;
    line-height:1.4;
}

.imports-flow-list{
    margin:16px 0 0;
    padding-left:20px;
    color:#555;
    font-size:14px;
    line-height:1.55;
}

/* DOCUMENTS */

.document-view{
    max-width:1100px;
    margin:0 auto;
}

.document-actions{
    width:210mm;
    max-width:100%;
    margin:0 auto 18px;
    box-sizing:border-box;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
}

.document-actions-left,
.document-actions-right{
    display:flex;
    gap:10px;
    align-items:center;
}

.document-actions-right{
    margin-left:auto;
}

.document-page{
    width:210mm;
    min-height:297mm;
    margin:0 auto;
    padding:22mm;
    box-sizing:border-box;
    background:#ffffff;
    color:#1f1f1f;
    border-radius:18px;
    box-shadow:0 24px 70px rgba(0,0,0,.12);
    font-size:13px;
}

.document-header{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:28px;
    align-items:start;
    margin-bottom:28px;
}

.document-brand{
    display:flex;
    align-items:flex-start;
    gap:20px;
}

.document-brand img{
    width:92px;
    height:auto;
    object-fit:contain;
}

.document-company-info{
    display:flex;
    flex-direction:column;
    gap:2px;
    line-height:1.25;
}

.document-company-title{
    font-size:15px;
    font-weight:900;
    letter-spacing:.02em;
}

.document-meta-card{
    border:1px solid #d9d9d9;
    border-radius:14px;
    overflow:hidden;
}

.document-meta-card div{
    display:grid;
    grid-template-columns:130px 1fr;
    border-bottom:1px solid #e4e4e4;
}

.document-meta-card div:last-child{
    border-bottom:none;
}

.document-meta-card span,
.document-meta-card strong{
    padding:7px 9px;
}

.document-meta-card span{
    background:#fafafa;
    color:#555;
    font-size:9px;
    font-weight:900;
    text-transform:uppercase;
}

.document-meta-card strong{
    text-align:right;
    font-size:10px;
    line-height:1.15;
    word-break:break-word;
}

.document-info-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-bottom:20px;
}

.document-info-grid-compact{
    grid-template-columns:1fr;
    gap:0;
    margin-bottom:12px;
}

.document-info-box,
.document-soft-box,
.document-payment-box,
.document-observations{
    border:1px solid #eeeeee;
    border-radius:14px;
    background:#fafafa;
    padding:14px;
}

.document-info-box span,
.document-soft-box span,
.document-observations span,
.document-transfer-reference span,
.document-payment-grid span{
    display:block;
    color:#666;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    margin-bottom:6px;
}

.document-info-box strong,
.document-soft-box strong{
    display:block;
    margin-bottom:6px;
    font-size:15px;
}

.document-info-box p,
.document-soft-box p,
.document-payment-box p,
.document-observations p{
    margin:4px 0 0;
    line-height:1.45;
}

.document-address-compact{
    display:grid;
    grid-template-columns:130px 1fr;
    align-items:center;
    gap:12px;
    padding:9px 12px;
}

.document-address-compact span{
    margin:0;
}

.document-address-compact p{
    margin:0;
    font-size:11px;
}

.document-address-compact + .document-address-compact{
    margin-top:8px;
}

.document-section{
    margin-bottom:18px;
}

.document-table{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
}

.document-table th,
.document-table td{
    border-bottom:1px solid #e2e2e2;
    padding:7px 8px;
    vertical-align:top;
}

.document-table th{
    background:#f7f7f7;
    color:#333;
    font-size:9px;
    font-weight:900;
    text-transform:uppercase;
}

.document-table td{
    font-size:11px;
    line-height:1.25;
}

.document-table th:first-child,
.document-table td:first-child{
    width:52%;
}

.document-table td:not(:first-child),
.document-table th:not(:first-child){
    text-align:right;
}

.document-table td span{
    display:block;
    margin-top:2px;
    color:#666;
    font-size:10px;
}

.document-empty-line{
    text-align:center !important;
    color:#777;
}

.document-summary-row{
    display:grid;
    grid-template-columns:1fr 270px;
    gap:18px;
    align-items:start;
    margin-bottom:18px;
}

.document-summary-row-totals-only{
    grid-template-columns:270px;
    justify-content:end;
}

.document-totals{
    border:1px solid #e2e2e2;
    border-radius:14px;
    overflow:hidden;
    background:white;
}

.document-totals-line{
    display:flex;
    justify-content:space-between;
    gap:18px;
    padding:10px 13px;
    border-bottom:1px solid #eeeeee;
}

.document-totals-line:last-child{
    border-bottom:none;
}

.document-totals-line span{
    color:#555;
    font-weight:900;
    font-size:11px;
    text-transform:uppercase;
}

.document-totals-main{
    background:#fff4f4;
    color:var(--brand-primary);
}

.document-totals-main strong{
    color:var(--brand-primary);
}

.document-payment-box{
    margin-bottom:16px;
}

.document-transfer-reference{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
    margin:14px 0;
    padding:11px 12px;
    border-radius:10px;
    background:white;
    border:1px solid #eeeeee;
}

.document-transfer-reference span{
    margin:0;
}

.document-transfer-reference strong{
    color:var(--brand-primary);
}

.document-payment-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:10px;
}

.document-payment-grid div{
    padding:8px;
    border-radius:10px;
    background:white;
    border:1px solid #eeeeee;
}

.document-payment-grid strong,
.document-payment-grid small{
    display:block;
}

.document-payment-box,
.document-payment-box p,
.document-payment-grid,
.document-payment-grid div,
.document-transfer-reference,
.document-small-note{
    font-size:10px;
}

.document-small-note{
    margin-top:10px !important;
    color:#555;
    font-style:italic;
}

.document-observations{
    margin-top:12px;
    min-height:70px;
    font-size:10px;
}

@media(max-width:1200px){

    .imports-card-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

}

@media(max-width:900px){

    .invoice-detail-header{
        flex-direction:column;
    }

    .invoice-detail-header-total{
        text-align:left;
    }

    .invoice-detail-form-grid .third,
    .invoice-client-billing-block strong{
        font-size:19px;
    }

    .invoice-client-billing-block span{
        font-size:16px;
    }

    .invoice-detail-totals{
        grid-template-columns:1fr;
    }

    .invoice-notes-grid{
        grid-template-columns:1fr;
    }

    .invoice-payment-summary,
    .invoice-payment-form{
        grid-template-columns:1fr;
    }

    .imports-card-grid{
        grid-template-columns:1fr;
    }

    .document-view{
        max-width:100%;
    }

    .document-actions{
        justify-content:stretch;
        flex-direction:column;
    }

    .document-actions-left,
    .document-actions-right{
        width:100%;
    }

    .document-actions-left button,
    .document-actions-right button{
        width:100%;
    }

    .document-page{
        width:100%;
        min-height:0;
        padding:24px;
        border-radius:16px;
    }

    .document-header,
    .document-info-grid,
    .document-summary-row,
    .document-payment-grid{
        grid-template-columns:1fr;
    }

    .document-meta-card div{
        grid-template-columns:1fr;
    }

    .document-meta-card strong{
        text-align:left;
    }

    .document-table{
        min-width:760px;
    }

    .document-section{
        overflow-x:auto;
    }

}

@media print{

    @page{
        size:A4;
        margin:0;
    }

    .header,
    .sidebar,
    .document-actions,
    .module-header,
    .quote-subnav,
    .invoice-status-tabs,
    .list-card-header{
        display:none !important;
    }

    html,
    body{
        width:210mm !important;
        min-height:297mm !important;
        margin:0 !important;
        background:white !important;
    }

    .app,
    .main-layout,
    .content{
        display:block !important;
        height:auto !important;
        min-height:0 !important;
        overflow:visible !important;
        padding:0 !important;
        background:white !important;
    }

    .quotes-view,
    .quote-view-panel,
    #quoteDetailView,
    #quoteDetailContent,
    #invoicesListContent,
    .quote-detail-card,
    .invoices-list-card,
    .placeholder-card{
        display:block !important;
        width:auto !important;
        max-width:none !important;
        margin:0 !important;
        padding:0 !important;
        border:0 !important;
        border-radius:0 !important;
        box-shadow:none !important;
        background:transparent !important;
    }

    .document-view{
        width:210mm !important;
        max-width:none !important;
        margin:0 !important;
        padding:0 !important;
        background:white !important;
    }

    .document-page{
        width:210mm !important;
        min-height:297mm !important;
        margin:0 !important;
        padding:22mm !important;
        border-radius:0 !important;
        box-shadow:none !important;
        print-color-adjust:exact;
        -webkit-print-color-adjust:exact;
    }

    .document-header{
        grid-template-columns:1.1fr .9fr !important;
    }

    .document-info-grid{
        grid-template-columns:1fr 1fr !important;
    }

    .document-summary-row{
        grid-template-columns:1fr 270px !important;
    }

    .document-summary-row-totals-only{
        grid-template-columns:270px !important;
        justify-content:end !important;
    }

    .document-payment-grid{
        grid-template-columns:repeat(4, 1fr) !important;
    }

    .document-meta-card div{
        grid-template-columns:130px 1fr !important;
    }

    .document-meta-card strong{
        text-align:right !important;
    }

    .document-section{
        overflow:visible !important;
    }

    .document-table{
        min-width:0 !important;
    }

}

.quotes-toolbar{
    display:grid;
    grid-template-columns:1fr 220px 180px;
}

.quotes-table-wrap{
    width:100%;
    overflow-x:auto;
    border-radius:18px;
}

.quotes-table{
    min-width:1200px;
}

.quotes-row-actions{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
}

.quote-status-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.03em;
    border:1px solid #e0e0e0;
    background:#f7f7f7;
    color:#444;
}

.quote-status-draft{
    background:#f5f5f5;
    color:#555;
    border-color:#dddddd;
}

.quote-status-sent{
    background:#eef5ff;
    color:#1d5b9f;
    border-color:#bed7f4;
}

.quote-status-accepted{
    background:#edf8ef;
    color:#1f7a38;
    border-color:#bde5c6;
}

.quote-status-rejected,
.quote-status-cancelled{
    background:#fff4f4;
    color:#a60000;
    border-color:#f0b5b5;
}

.quote-form-card,
.quote-detail-card,
.quotes-list-card{
    border-radius:24px;
    border:1px solid #ececec;
    box-shadow:0 16px 42px rgba(0,0,0,.052);
}

.quote-form-header,
.quote-detail-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:18px;
    padding-bottom:22px;
    margin-bottom:24px;
    border-bottom:1px solid #eeeeee;
}

.quote-form-header h3,
.quote-detail-header h3{
    margin:0 0 6px;
    font-size:24px;
    letter-spacing:-.02em;
}

.quote-form-header p,
.quote-detail-header p{
    margin:0;
    color:#666;
}

.quote-form-header-actions,
.quote-detail-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.quote-form-grid{
    display:grid;
    grid-template-columns:repeat(12, 1fr);
    gap:18px;
}

.quote-form-grid textarea,
.quote-line-grid textarea{
    width:100%;
    min-height:90px;
    resize:vertical;
    padding:13px 14px;
    border:1px solid #d6d6d6;
    border-radius:10px;
    background:#fafafa;
    font-size:var(--base-font-size);
    font-family:Arial,sans-serif;
    box-sizing:border-box;
}

.quote-form-grid textarea:focus,
.quote-line-grid textarea:focus{
    outline:none;
    border-color:var(--brand-primary);
    background:white;
}

.quote-client-snapshot{
    background:#fafafa;
    border:1px solid #eeeeee;
    border-radius:16px;
    padding:16px;
}

.quote-client-snapshot-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:12px;
}

.quote-client-snapshot-grid div,
.quote-detail-box{
    background:white;
    border:1px solid #eeeeee;
    border-radius:14px;
    padding:12px 14px;
}

.quote-client-snapshot-grid span,
.quote-detail-box span,
.quote-summary-grid span,
.quote-detail-totals span{
    display:block;
    margin-bottom:6px;
    color:#777;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.quote-client-snapshot-grid strong,
.quote-detail-box strong{
    display:block;
    color:#222;
    font-size:14px;
    word-break:break-word;
}

.muted-text{
    color:#777;
    font-size:13px;
}

.quote-lines-section{
    margin-top:28px;
    padding-top:24px;
    border-top:1px solid #eeeeee;
}

.quote-lines-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:18px;
    margin-bottom:18px;
}

.quote-lines-header h4,
.quote-detail-section h4{
    margin:0 0 6px;
    font-size:19px;
}

.quote-lines-header p{
    margin:0;
    color:#666;
}

.quote-lines-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.quote-lines-list{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.quote-line-card{
    background:#fafafa;
    border:1px solid #eeeeee;
    border-radius:20px;
    padding:20px;
}

.quote-line-discount{
    background:#fffafa;
    border-color:#f0d6d6;
}

.quote-line-custom{
    background:#fbfbff;
    border-color:#dfdff0;
}

.quote-line-card-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    margin-bottom:18px;
}

.quote-line-card-header h5{
    margin:0 0 5px;
    font-size:17px;
}

.quote-line-card-header p{
    margin:0;
    color:#666;
    font-size:13px;
}

.quote-line-grid{
    display:grid;
    grid-template-columns:repeat(12, 1fr);
    gap:16px;
}

.quote-line-grid .form-field.full,
.quote-form-grid .form-field.full{
    grid-column:span 12;
}

.quote-line-grid .form-field.half,
.quote-form-grid .form-field.half{
    grid-column:span 6;
}

.quote-line-grid .form-field.third,
.quote-form-grid .form-field.third{
    grid-column:span 4;
}

.quote-line-totals-mini{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:16px;
}

.quote-line-totals-mini span{
    display:inline-flex;
    gap:6px;
    align-items:center;
    background:white;
    border:1px solid #eeeeee;
    border-radius:999px;
    padding:9px 12px;
    color:#666;
    font-size:13px;
}

.quote-line-totals-mini strong{
    color:#222;
}

.quote-summary-card{
    margin-top:24px;
    background:#fafafa;
    border:1px solid #eeeeee;
    border-radius:20px;
    padding:20px;
}

.quote-summary-grid,
.quote-detail-totals{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:14px;
}

.quote-summary-grid div,
.quote-detail-totals div{
    background:white;
    border:1px solid #eeeeee;
    border-radius:16px;
    padding:16px;
}

.quote-summary-grid strong,
.quote-detail-totals strong{
    font-size:24px;
    letter-spacing:-.03em;
}

.quote-summary-total{
    border-color:var(--brand-primary) !important;
}

.quote-summary-total strong{
    color:var(--brand-primary);
}

.quote-summary-note{
    margin:14px 0 0;
    color:#666;
    font-size:14px;
}

.quote-detail-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:14px;
    margin-bottom:24px;
}

.quote-detail-section{
    margin-top:24px;
    padding-top:22px;
    border-top:1px solid #eeeeee;
}

.quote-detail-lines-table{
    min-width:1000px;
}

.quote-overridden-text{
    display:inline-flex;
    margin-top:4px;
    color:#a66400;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
}

.quote-preline{
    white-space:pre-wrap;
    color:#333;
    line-height:1.5;
}

@media(max-width:1100px){

    .quotes-toolbar{
        grid-template-columns:1fr;
    }

    .quote-client-snapshot-grid,
    .quote-summary-grid,
    .quote-detail-totals,
    .quote-detail-grid{
        grid-template-columns:repeat(2, 1fr);
    }

}

@media(max-width:900px){

    .quotes-module-header,
    .quote-form-header,
    .quote-detail-header,
    .quote-lines-header{
        flex-direction:column;
    }

    .quote-form-header-actions,
    .quote-detail-actions,
    .quote-lines-actions{
        width:100%;
        justify-content:stretch;
    }

    .quote-form-header-actions button,
    .quote-detail-actions button,
    .quote-lines-actions button{
        width:100%;
    }

    .quote-line-grid,
    .quote-form-grid{
        grid-template-columns:1fr;
    }

    .quote-line-grid .form-field.full,
    .quote-line-grid .form-field.half,
    .quote-line-grid .form-field.third,
    .quote-form-grid .form-field.full,
    .quote-form-grid .form-field.half,
    .quote-form-grid .form-field.third{
        grid-column:auto;
    }

    .quote-client-snapshot-grid,
    .quote-summary-grid,
    .quote-detail-totals,
    .quote-detail-grid{
        grid-template-columns:1fr;
    }

}


/* ==========================================================
   PRESSUPOSTOS 1.1 — Layout refinat, taula tipus Sheets i pagaments
========================================================== */

.quote-subnav{
    display:none;
}

.quote-editor-section{
    margin-top:26px;
    padding-top:24px;
    border-top:1px solid #eeeeee;
}

.quote-editor-section:first-of-type{
    margin-top:0;
    padding-top:0;
    border-top:none;
}

.quote-editor-section-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:18px;
    margin-bottom:18px;
}

.quote-editor-section-header h4,
.quote-payments-header h4,
.quote-summary-header h4{
    margin:0 0 6px;
    font-size:20px;
    letter-spacing:-.02em;
}

.quote-editor-section-header p,
.quote-payments-header p{
    margin:0;
    color:#666;
}

.quote-budget-section{
    border-top:1px solid #eeeeee;
}

.quote-budget-table-wrap{
    width:100%;
    overflow-x:auto;
    border:1px solid #eeeeee;
    border-radius:18px;
    background:white;
}

.quote-budget-table{
    width:100%;
    min-width:1180px;
    border-collapse:separate;
    border-spacing:0;
    table-layout:fixed;
}

.quote-budget-table th{
    background:#f7f7f7;
    padding:14px 12px;
    border-bottom:1px solid #eeeeee;
    border-right:1px solid #eeeeee;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.02em;
    color:#111;
    text-align:center;
}

.quote-budget-table th:first-child{
    width:46%;
}

.quote-budget-table th:nth-child(2){
    width:10%;
}

.quote-budget-table th:nth-child(3){
    width:8%;
}

.quote-budget-table th:nth-child(4){
    width:19%;
}

.quote-budget-table th:nth-child(5){
    width:12%;
}

.quote-budget-table th:nth-child(6){
    width:5%;
}

.quote-budget-table td{
    padding:12px;
    border-bottom:1px solid #eeeeee;
    border-right:1px solid #eeeeee;
    vertical-align:top;
    background:white;
}

.quote-budget-table tr:last-child td{
    border-bottom:none;
}

.quote-budget-row-discount td{
    background:#fffafa;
}

.quote-budget-product-cell{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.quote-budget-product-cell select,
.quote-budget-product-cell input,
.quote-budget-vat-cell select,
.quote-budget-qty-cell input,
.quote-budget-price-cell input,
.quote-budget-total-cell input{
    width:100%;
    min-width:0;
    background:#fafafa;
    border:1px solid #dedede;
    border-radius:12px;
}

.quote-budget-product-cell textarea{
    width:100%;
    min-height:78px;
    resize:vertical;
    padding:13px 14px;
    border:1px solid #dedede;
    border-radius:12px;
    background:#fafafa;
    font-size:var(--base-font-size);
    font-family:Arial,sans-serif;
    box-sizing:border-box;
}

.quote-budget-product-cell textarea:focus,
.quote-budget-product-cell select:focus,
.quote-budget-product-cell input:focus,
.quote-budget-vat-cell select:focus,
.quote-budget-qty-cell input:focus,
.quote-budget-price-cell input:focus{
    outline:none;
    border-color:var(--brand-primary);
    background:white;
}

.quote-price-cell-inner{
    display:grid;
    grid-template-columns:1fr 48px;
    gap:8px;
    align-items:center;
}

.quote-money-input-wrap{
    position:relative;
}

.quote-money-input-wrap input{
    padding-right:34px;
}

.quote-money-input-wrap span{
    position:absolute;
    right:13px;
    top:50%;
    transform:translateY(-50%);
    color:#666;
    font-weight:900;
}

.quote-price-lock-button,
.quote-trash-button{
    width:48px;
    height:48px;
    min-width:48px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:#efefef;
    color:#222;
    border:1px solid #eeeeee;
    font-size:17px;
}

.quote-price-lock-button:hover,
.quote-trash-button:hover{
    opacity:1;
    background:#fff4f4;
    border-color:var(--brand-primary);
}

.quote-price-lock-button:disabled{
    opacity:.45;
    cursor:not-allowed;
}

.quote-trash-button{
    margin:auto;
}

.quote-tier-info{
    margin-top:8px;
    color:#666;
    font-size:13px;
    line-height:1.25;
    font-weight:700;
}

.quote-tier-info strong{
    color:#555;
}

.quote-tier-info span{
    color:#a66400;
    text-transform:uppercase;
    font-size:11px;
    letter-spacing:.04em;
}

.quote-budget-total-cell input:disabled,
.quote-payments-grid input:disabled{
    background:#f8f8f8;
    color:#333;
    font-weight:900;
}

.quote-budget-help{
    margin:14px 0 0;
    color:#666;
    font-size:14px;
}

.quote-summary-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
}

.quote-summary-header span,
.quote-payments-header span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 12px;
    border-radius:999px;
    background:#eeeeee;
    color:#111;
    font-size:13px;
    font-weight:900;
}

.quote-payments-card{
    background:#fafafa;
    border:1px solid #eeeeee;
    border-radius:22px;
    padding:22px;
}

.quote-payments-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:18px;
    margin-bottom:20px;
}

.quote-payments-grid{
    display:grid;
    grid-template-columns:repeat(12, 1fr);
    gap:18px;
}

.quote-payments-grid .form-field.full{
    grid-column:span 12;
}

.quote-payments-grid .form-field.half{
    grid-column:span 6;
}

.quote-payments-grid .form-field.third{
    grid-column:span 4;
}

.quote-payments-help{
    margin:18px 0 0;
    color:#666;
    font-size:14px;
}

.quote-payment-detail-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:14px;
}

.quote-payment-detail-grid div{
    background:white;
    border:1px solid #eeeeee;
    border-radius:16px;
    padding:16px;
}

.quote-payment-detail-grid span{
    display:block;
    margin-bottom:7px;
    color:#777;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.quote-payment-detail-grid strong{
    display:block;
    color:#222;
    font-size:22px;
    letter-spacing:-.03em;
}

.quote-payment-detail-grid small{
    display:block;
    margin-top:4px;
    color:#666;
    font-size:13px;
    font-weight:800;
}

@media(max-width:1100px){

    .quote-payments-grid .form-field.half,
    .quote-payments-grid .form-field.third{
        grid-column:span 6;
    }

    .quote-payment-detail-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:900px){

    .quote-budget-table{
        min-width:980px;
    }

    .quote-payments-header,
    .quote-editor-section-header{
        flex-direction:column;
    }

    .quote-payments-grid{
        grid-template-columns:1fr;
    }

    .quote-payments-grid .form-field.full,
    .quote-payments-grid .form-field.half,
    .quote-payments-grid .form-field.third{
        grid-column:auto;
    }

    .quote-payment-detail-grid{
        grid-template-columns:1fr;
    }

}

/* ==========================================================
   PRESSUPOSTOS 1.2 — UX comercial, lliurament editable i pagaments en files
========================================================== */

.quote-client-snapshot-modern{
    background:#fbfbfb;
    padding:20px;
}

.quote-client-data-layout{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.quote-client-contact-card,
.quote-address-card{
    background:white;
    border:1px solid #eeeeee;
    border-radius:18px;
    padding:18px;
}

.quote-client-data-title{
    margin-bottom:14px;
    color:#111;
    font-size:15px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.03em;
}

.quote-client-contact-grid,
.quote-address-readonly-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:12px;
}

.quote-client-contact-grid > div,
.quote-address-readonly-grid > div{
    background:#fafafa;
    border:1px solid #eeeeee;
    border-radius:14px;
    padding:13px 14px;
}

.quote-client-contact-grid span,
.quote-address-readonly-grid span{
    display:block;
    margin-bottom:6px;
    color:#777;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.quote-client-contact-grid strong,
.quote-address-readonly-grid strong{
    display:block;
    color:#222;
    font-size:14px;
    word-break:break-word;
}

.quote-client-contact-grid a,
.quote-client-snapshot-grid a{
    color:var(--brand-primary);
    text-decoration:none;
}

.quote-client-contact-grid a:hover,
.quote-client-snapshot-grid a:hover{
    text-decoration:underline;
}

.quote-address-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.quote-address-card-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    margin-bottom:14px;
}

.quote-address-card-header .quote-client-data-title{
    margin-bottom:0;
}

.quote-address-edit-grid{
    display:grid;
    grid-template-columns:2fr 0.8fr;
    gap:14px;
}

.quote-address-edit-grid .form-field{
    margin:0;
}

.quote-delivery-address-field input,
.quote-delivery-postcode-field input{
    background:#fff;
}

.quote-vat-breakdown{
    display:flex;
    flex-direction:column;
    gap:4px;
    margin-top:8px;
    color:#666;
    font-size:12px;
    line-height:1.25;
}

.quote-vat-breakdown strong{
    color:#222;
}

.quote-line-total-breakdown{
    display:flex;
    flex-direction:column;
    gap:3px;
    min-height:78px;
    justify-content:center;
    padding:12px 14px;
    border:1px solid #dedede;
    border-radius:12px;
    background:#fafafa;
}

.quote-line-total-breakdown strong{
    color:#111;
    font-size:15px;
    font-weight:900;
    white-space:nowrap;
}

.quote-line-total-breakdown span{
    color:#777;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.quote-payments-top-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-bottom:20px;
}

.quote-payments-table-wrap{
    width:100%;
    overflow-x:auto;
    border:1px solid #eeeeee;
    border-radius:18px;
    background:white;
}

.quote-payments-table{
    width:100%;
    min-width:900px;
    border-collapse:separate;
    border-spacing:0;
    table-layout:fixed;
}

.quote-payments-table th{
    background:#f7f7f7;
    padding:14px 12px;
    border-bottom:1px solid #eeeeee;
    border-right:1px solid #eeeeee;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.02em;
    color:#111;
    text-align:left;
}

.quote-payments-table td{
    padding:12px;
    border-bottom:1px solid #eeeeee;
    border-right:1px solid #eeeeee;
    vertical-align:middle;
}

.quote-payments-table tr:last-child td{
    border-bottom:none;
}

.quote-payments-table input{
    width:100%;
    min-width:0;
    background:#fafafa;
    border:1px solid #dedede;
    border-radius:12px;
}

.quote-payments-table input:focus{
    outline:none;
    border-color:var(--brand-primary);
    background:white;
}

.quote-payments-table input:disabled,
#quotePaymentTotalReferenceInput:disabled{
    background:#f8f8f8;
    color:#333;
    font-weight:900;
}

@media(max-width:1100px){

    .quote-client-contact-grid,
    .quote-address-readonly-grid{
        grid-template-columns:repeat(2, 1fr);
    }

    .quote-address-grid,
    .quote-payments-top-grid{
        grid-template-columns:1fr;
    }

}

@media(max-width:900px){

    .quote-client-contact-grid,
    .quote-address-readonly-grid,
    .quote-address-edit-grid{
        grid-template-columns:1fr;
    }

    .quote-address-card-header{
        flex-direction:column;
        align-items:flex-start;
    }

    .quote-address-card-header button{
        width:100%;
    }

    .quote-budget-table{
        min-width:1280px;
    }

}

/* ==========================================================
   PRESSUPOSTOS 1.3 — compactació visual i imports s/IVA / amb IVA separats
========================================================== */

.quotes-view{
    gap:16px;
}

.quote-form-card{
    padding:24px;
}

.quote-form-header{
    padding-bottom:16px;
    margin-bottom:18px;
}

.quote-form-header h3{
    font-size:23px;
}

.quote-editor-section{
    margin-top:18px;
    padding-top:16px;
}

.quote-editor-section-header,
.quote-lines-header{
    margin-bottom:12px;
}

.quote-editor-section-header h4,
.quote-payments-header h4,
.quote-summary-header h4,
.quote-lines-header h4{
    font-size:18px;
    margin-bottom:3px;
}

.quote-editor-section-header p,
.quote-payments-header p,
.quote-lines-header p{
    font-size:13px;
}

.quote-form-grid{
    gap:14px;
}

.quote-form-grid textarea,
.quote-line-grid textarea,
.quote-observations-grid textarea{
    min-height:76px;
    padding:11px 12px;
}

.quote-client-snapshot-modern{
    padding:12px;
    border-radius:14px;
}

.quote-client-data-compact{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.quote-client-contact-strip{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:8px;
}

.quote-client-contact-strip > div,
.quote-address-compact-readonly,
.quote-address-compact-editable{
    background:white;
    border:1px solid #eeeeee;
    border-radius:14px;
    padding:10px 12px;
}

.quote-client-contact-strip span,
.quote-address-compact-title{
    display:block;
    margin-bottom:4px;
    color:#777;
    font-size:10px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.quote-client-contact-strip strong{
    display:block;
    color:#222;
    font-size:13px;
    word-break:break-word;
}

.quote-client-contact-strip a{
    color:var(--brand-primary);
    text-decoration:none;
}

.quote-client-contact-strip a:hover{
    text-decoration:underline;
}

.quote-address-compact-grid{
    display:grid;
    grid-template-columns:0.9fr 1.4fr;
    gap:8px;
}

.quote-address-compact-readonly p{
    margin:0 0 5px;
    color:#222;
    font-size:13px;
    font-weight:700;
    line-height:1.35;
}

.quote-address-compact-readonly small,
.quote-client-compact-help{
    color:#777;
    font-size:12px;
}

.quote-address-compact-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:8px;
}

.quote-address-compact-header .quote-address-compact-title{
    margin-bottom:0;
}

.quote-address-compact-header .small-button{
    padding:7px 10px;
    font-size:12px;
}

.quote-address-compact-inputs{
    display:grid;
    grid-template-columns:1fr 120px;
    gap:8px;
}

.quote-address-compact-inputs input{
    width:100%;
    min-width:0;
    padding:10px 12px;
    border:1px solid #dedede;
    border-radius:10px;
    background:#fafafa;
}

.quote-address-compact-inputs input:focus{
    outline:none;
    border-color:var(--brand-primary);
    background:white;
}

.quote-client-compact-help{
    margin:0;
}

.quote-budget-section{
    padding-top:16px;
}

.quote-budget-table{
    min-width:1240px;
    table-layout:fixed;
}

.quote-budget-table th{
    padding:11px 8px;
    font-size:11px;
}

.quote-budget-table th:first-child{ width:31%; }
.quote-budget-table th:nth-child(2){ width:7%; }
.quote-budget-table th:nth-child(3){ width:7%; }
.quote-budget-table th:nth-child(4){ width:14%; }
.quote-budget-table th:nth-child(5){ width:11%; }
.quote-budget-table th:nth-child(6){ width:12%; }
.quote-budget-table th:nth-child(7){ width:13%; }
.quote-budget-table th:nth-child(8){ width:5%; }

.quote-budget-table td{
    padding:9px 8px;
}

.quote-budget-product-cell{
    gap:6px;
}

.quote-budget-product-cell select,
.quote-budget-product-cell input,
.quote-budget-vat-cell select,
.quote-budget-qty-cell input,
.quote-budget-price-cell input{
    padding:9px 10px;
    border-radius:10px;
    font-size:13px;
}

.quote-budget-product-cell textarea{
    min-height:48px;
    padding:9px 10px;
    border-radius:10px;
    font-size:13px;
}

.quote-price-cell-inner-compact{
    grid-template-columns:1fr 36px;
    gap:6px;
}

.quote-price-lock-button,
.quote-trash-button{
    width:36px;
    height:36px;
    min-width:36px;
    border-radius:10px;
    font-size:14px;
}

.quote-money-input-wrap span{
    right:10px;
    font-size:12px;
}

.quote-tier-info-compact{
    display:flex;
    flex-direction:column;
    gap:3px;
    margin-top:5px;
    font-size:11px;
    line-height:1.15;
}

.quote-tier-info-compact .quote-manual-price-label{
    color:#a66400;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.quote-readonly-money-cell{
    min-height:38px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding:9px 10px;
    border:1px solid #dedede;
    border-radius:10px;
    background:#fafafa;
    box-sizing:border-box;
}

.quote-readonly-money-cell strong{
    color:#222;
    font-size:13px;
    font-weight:900;
    white-space:nowrap;
}

.quote-readonly-money-cell-total{
    background:#fffafa;
    border-color:#e8d8d8;
}

.quote-readonly-money-cell-total strong{
    color:var(--brand-primary);
}

.quote-budget-help{
    margin-top:9px;
    font-size:12px;
}

.quote-transport-summary-grid{
    display:grid;
    grid-template-columns:minmax(280px, 0.72fr) minmax(420px, 1.28fr);
    gap:14px;
    margin-top:18px;
    align-items:stretch;
}

.quote-editor-section-compact{
    margin-top:0;
    padding-top:0;
    border-top:none;
}

.quote-transport-compact-card,
.quote-summary-card-compact,
.quote-observation-card{
    background:#fafafa;
    border:1px solid #eeeeee;
    border-radius:18px;
    padding:16px;
}

.quote-form-grid-compact{
    grid-template-columns:1fr;
    gap:10px;
}

.quote-form-grid-compact .form-field.full{
    grid-column:auto;
}

.quote-summary-card-compact{
    margin-top:0;
}

.quote-summary-header{
    margin-bottom:10px;
}

.quote-summary-header span{
    padding:6px 10px;
    font-size:12px;
}

.quote-summary-grid{
    gap:10px;
}

.quote-summary-grid div{
    padding:11px 12px;
    border-radius:14px;
}

.quote-summary-grid span{
    margin-bottom:4px;
    font-size:10px;
}

.quote-summary-grid strong{
    font-size:20px;
}

.quote-summary-note{
    margin-top:9px;
    font-size:12px;
}

.quote-payments-card{
    padding:16px;
    border-radius:18px;
}

.quote-payments-header{
    margin-bottom:12px;
}

.quote-payments-top-grid{
    gap:12px;
    margin-bottom:12px;
}

.quote-payments-table th{
    padding:10px 10px;
    font-size:11px;
}

.quote-payments-table td{
    padding:9px 10px;
}

.quote-payments-table input{
    padding:9px 10px;
    border-radius:10px;
    font-size:13px;
}

.quote-payments-help{
    margin-top:10px;
    font-size:12px;
}

.quote-observations-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-top:18px;
}

.quote-observations-grid .form-field.full{
    grid-column:auto;
}

.quote-observation-card textarea{
    width:100%;
    min-height:86px;
    resize:vertical;
    padding:11px 12px;
    border:1px solid #d6d6d6;
    border-radius:10px;
    background:#fafafa;
    font-size:var(--base-font-size);
    font-family:Arial,sans-serif;
    box-sizing:border-box;
}

.quote-observation-card textarea:focus{
    outline:none;
    border-color:var(--brand-primary);
    background:white;
}

@media(max-width:1200px){
    .quote-client-contact-strip{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .quote-address-compact-grid,
    .quote-transport-summary-grid,
    .quote-observations-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:900px){
    .quote-form-card{
        padding:18px;
    }

    .quote-client-contact-strip,
    .quote-address-compact-inputs{
        grid-template-columns:1fr;
    }

    .quote-budget-table{
        min-width:1180px;
    }
}

/* ==========================================================
   PRESSUPOSTOS 1.3.1 — ajust fi d'espaiat entre cards
   Manté el format compacte, però recupera aire entre blocs.
========================================================== */

.quote-editor-section{
    margin-top:22px;
}

.quote-editor-section:first-of-type{
    margin-top:0;
}

.quote-budget-section{
    margin-top:24px;
}

.quote-transport-summary-grid{
    gap:18px;
    margin-top:22px;
    margin-bottom:26px;
}

#quotePaymentsSection{
    margin-top:0;
    margin-bottom:26px;
}

#quotePaymentsSection .quote-payments-card{
    margin-top:0;
}

.quote-observations-grid{
    margin-top:0;
}

.quote-transport-compact-card,
.quote-summary-card-compact,
.quote-payments-card,
.quote-observation-card{
    box-shadow:0 8px 22px rgba(0,0,0,.025);
}

@media(max-width:900px){

    .quote-transport-summary-grid,
    #quotePaymentsSection{
        margin-bottom:22px;
    }

}

/* ==========================================================
   PRESSUPOSTOS 1.3.2 — centrat visual de Transport
   Centra verticalment el contingut quan la card queda més alta pel Resum.
========================================================== */

.quote-transport-summary-grid{
    align-items:stretch;
}

.quote-transport-compact-card{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.quote-transport-compact-card .quote-editor-section-header{
    margin-bottom:12px;
}

.quote-transport-compact-card .quote-form-grid{
    width:100%;
}

@media(max-width:900px){

    .quote-transport-compact-card{
        justify-content:flex-start;
    }

}

/* ==========================================================
   PRESSUPOSTOS 1.3.3 — Transport + Resum una mica més grans
   Dona més presència als dos cards sense perdre el layout compacte.
========================================================== */

.quote-transport-compact-card,
.quote-summary-card-compact{
    padding:22px;
    min-height:210px;
}

.quote-transport-compact-card .quote-editor-section-header,
.quote-summary-card-compact .quote-summary-header{
    margin-bottom:16px;
}

.quote-transport-compact-card .quote-form-grid-compact{
    gap:12px;
}

.quote-summary-card-compact .quote-summary-grid{
    gap:12px;
}

.quote-summary-card-compact .quote-summary-grid div{
    padding:14px 16px;
    min-height:78px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.quote-summary-card-compact .quote-summary-note{
    margin-top:14px;
}

@media(max-width:900px){

    .quote-transport-compact-card,
    .quote-summary-card-compact{
        min-height:auto;
        padding:18px;
    }

}

/* ==========================================================
   PRESSUPOSTOS 1.3.4 — capçalera, dades client i Google Maps
   Redisseny més compacte i professional de la zona superior.
========================================================== */

.quote-client-snapshot-modern{
    background:transparent;
    border:none;
    padding:0;
}

.quote-client-panel{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.quote-client-panel-grid{
    display:grid;
    grid-template-columns:minmax(240px, .72fr) minmax(420px, 1.28fr);
    gap:14px;
    align-items:stretch;
}

.quote-client-panel-card,
.quote-detail-client-card{
    background:white;
    border:1px solid #eeeeee;
    border-radius:18px;
    padding:16px 18px;
    box-shadow:0 8px 22px rgba(0,0,0,.022);
}

.quote-panel-kicker{
    display:block;
    margin-bottom:7px;
    color:#777;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.quote-client-contact-panel h5{
    margin:0 0 10px;
    color:#222;
    font-size:18px;
    line-height:1.25;
}

.quote-client-facts,
.quote-detail-client-facts{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:12px;
}

.quote-client-facts div,
.quote-detail-client-facts span{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 10px;
    border:1px solid #eeeeee;
    border-radius:999px;
    background:#fafafa;
    color:#333;
    font-size:13px;
    font-weight:800;
}

.quote-client-facts span{
    color:#777;
    font-size:10px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.quote-contact-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.quote-action-pill,
.quote-map-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:max-content;
    max-width:100%;
    min-height:34px;
    padding:8px 11px;
    border-radius:999px;
    background:#fff4f4;
    color:var(--brand-primary);
    border:1px solid #f0c4c4;
    font-size:13px;
    font-weight:900;
    text-decoration:none;
    line-height:1.15;
    transition:.15s ease;
}

.quote-action-pill:hover,
.quote-map-link:hover{
    background:white;
    border-color:var(--brand-primary);
    text-decoration:none;
    transform:translateY(-1px);
}

.quote-action-pill.is-disabled,
.quote-map-link.is-disabled{
    color:#888;
    background:#f5f5f5;
    border-color:#e5e5e5;
    cursor:not-allowed;
    pointer-events:none;
    transform:none;
}

.quote-client-address-panel{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.quote-address-two-columns,
.quote-detail-client-addresses{
    display:grid;
    grid-template-columns:1fr 1.25fr;
    gap:12px;
}

.quote-address-block,
.quote-detail-address-item{
    background:#fafafa;
    border:1px solid #eeeeee;
    border-radius:16px;
    padding:13px 14px;
}

.quote-address-block-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
}

.quote-address-block-header strong{
    color:#222;
    font-size:14px;
}

.quote-address-block-header .quote-map-link{
    min-height:30px;
    padding:6px 9px;
    font-size:12px;
}

.quote-address-block p,
.quote-detail-address-item p{
    margin:0;
    color:#222;
    font-size:14px;
    font-weight:800;
    line-height:1.35;
    word-break:break-word;
}

.quote-address-header-actions{
    display:flex;
    align-items:center;
    gap:7px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.quote-address-header-actions .small-button{
    padding:7px 10px;
    font-size:12px;
}

.quote-delivery-edit-row{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 104px;
    gap:8px;
}

.quote-delivery-edit-row input{
    width:100%;
    min-width:0;
    padding:10px 11px;
    border:1px solid #dedede;
    border-radius:10px;
    background:white;
    font-size:14px;
}

.quote-delivery-edit-row input:focus{
    outline:none;
    border-color:var(--brand-primary);
    background:white;
}

.quote-client-panel-help{
    margin:0;
    color:#777;
    font-size:12px;
    line-height:1.35;
}

.quote-detail-topbar{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:14px;
}

.quote-detail-hero{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    gap:18px;
    align-items:center;
    background:white;
    border:1px solid #eeeeee;
    border-radius:24px;
    padding:22px 24px;
    box-shadow:0 12px 32px rgba(0,0,0,.04);
    margin-bottom:22px;
}

.quote-detail-number-row{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:10px;
}

.quote-detail-number{
    color:#666;
    font-size:13px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.quote-status-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:7px 10px;
    border-radius:999px;
    border:1px solid #e0e0e0;
    background:#f6f6f6;
    color:#444;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.03em;
}

.quote-detail-hero h3{
    margin:0;
    color:#222;
    font-size:28px;
    line-height:1.12;
    letter-spacing:-.03em;
}

.quote-detail-meta-line{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:13px;
    color:#666;
    font-size:14px;
    font-weight:800;
}

.quote-detail-meta-line span{
    display:inline-flex;
    align-items:center;
    padding:7px 10px;
    border-radius:999px;
    background:#fafafa;
    border:1px solid #eeeeee;
}

.quote-detail-hero-total{
    min-width:220px;
    padding:18px 20px;
    border-radius:20px;
    background:#fff4f4;
    border:1px solid var(--brand-primary);
    text-align:right;
}

.quote-detail-hero-total span{
    display:block;
    margin-bottom:5px;
    color:#777;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.quote-detail-hero-total strong{
    display:block;
    color:var(--brand-primary);
    font-size:32px;
    line-height:1;
    letter-spacing:-.04em;
}

.quote-detail-client-section{
    margin-top:0;
}

.quote-detail-client-card{
    display:grid;
    grid-template-columns:minmax(240px, .62fr) minmax(420px, 1.38fr);
    gap:14px;
}

.quote-detail-client-contact{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.quote-detail-client-contact > strong{
    color:#222;
    font-size:19px;
    line-height:1.2;
}

.quote-detail-address-item{
    background:#fafafa;
}

@media(max-width:1200px){

    .quote-client-panel-grid,
    .quote-detail-client-card{
        grid-template-columns:1fr;
    }

    .quote-address-two-columns,
    .quote-detail-client-addresses{
        grid-template-columns:1fr;
    }

}

@media(max-width:900px){

    .quote-detail-hero{
        grid-template-columns:1fr;
    }

    .quote-detail-hero-total{
        min-width:0;
        text-align:left;
    }

    .quote-delivery-edit-row{
        grid-template-columns:1fr;
    }

    .quote-detail-topbar{
        justify-content:stretch;
    }

    .quote-detail-topbar button{
        flex:1;
    }

}

/* ==========================================================
   PRESSUPOSTOS 1.3.6 — capçalera sobria, Maps intel·ligent i totals factura
   - Resum econòmic sota la taula, alineat a la dreta.
   - Transport més discret.
   - Capçalera de detall menys dashboard.
========================================================== */

.quote-invoice-totals{
    width:100%;
    display:flex;
    justify-content:flex-end;
    margin-top:16px;
}

.quote-invoice-totals-card{
    width:min(100%, 390px);
    background:white;
    border:1px solid #e8e8e8;
    border-radius:16px;
    padding:14px 16px;
    box-shadow:0 8px 22px rgba(0,0,0,.025);
}

.quote-invoice-totals-caption{
    margin-bottom:10px;
    padding-bottom:9px;
    border-bottom:1px solid #eeeeee;
    color:#777;
    font-size:12px;
    font-weight:900;
    text-align:right;
}

.quote-invoice-totals-line{
    display:grid;
    grid-template-columns:1fr auto;
    gap:18px;
    align-items:center;
    padding:7px 0;
    color:#333;
}

.quote-invoice-totals-line span{
    color:#555;
    font-size:13px;
    font-weight:800;
}

.quote-invoice-totals-line strong{
    color:#222;
    font-size:14px;
    font-weight:900;
    white-space:nowrap;
}

.quote-invoice-totals-grand-total{
    margin-top:7px;
    padding-top:12px;
    border-top:2px solid #e4e4e4;
}

.quote-invoice-totals-grand-total span{
    color:#222;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:.03em;
}

.quote-invoice-totals-grand-total strong{
    color:var(--brand-primary);
    font-size:22px;
    letter-spacing:-.03em;
}

.quote-transport-standalone-card{
    background:#fafafa;
    border:1px solid #eeeeee;
    border-radius:18px;
    padding:16px 18px;
    box-shadow:0 8px 22px rgba(0,0,0,.025);
    margin-top:20px;
    margin-bottom:24px;
}

.quote-transport-standalone-card .quote-editor-section-header{
    margin-bottom:12px;
}

.quote-transport-inline-grid{
    display:grid;
    grid-template-columns:minmax(260px, 1fr) minmax(180px, .45fr);
    gap:12px;
    align-items:end;
}

.quote-transport-inline-grid .form-field.half,
.quote-transport-inline-grid .form-field.full{
    grid-column:auto;
}

.quote-detail-sober-header{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    gap:18px;
    align-items:center;
    background:white;
    border:1px solid #eeeeee;
    border-radius:20px;
    padding:18px 20px;
    box-shadow:0 10px 28px rgba(0,0,0,.035);
    margin-bottom:20px;
}

.quote-detail-sober-topline{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:8px;
}

.quote-detail-sober-header h3{
    margin:0;
    color:#222;
    font-size:24px;
    line-height:1.12;
    letter-spacing:-.025em;
}

.quote-detail-sober-meta{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:10px;
    color:#666;
    font-size:13px;
    font-weight:800;
}

.quote-detail-sober-meta span{
    display:inline-flex;
    align-items:center;
    padding:6px 9px;
    border-radius:999px;
    background:#fafafa;
    border:1px solid #eeeeee;
}

.quote-detail-sober-total{
    min-width:190px;
    padding:14px 16px;
    border-radius:16px;
    background:#fff7f7;
    border:1px solid #efc7c7;
    text-align:right;
}

.quote-detail-sober-total span{
    display:block;
    margin-bottom:5px;
    color:#777;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.quote-detail-sober-total strong{
    display:block;
    color:var(--brand-primary);
    font-size:28px;
    line-height:1;
    letter-spacing:-.04em;
}

.quote-detail-invoice-totals{
    margin-top:14px;
    margin-bottom:22px;
}

.quote-detail-section + .quote-detail-invoice-totals{
    margin-top:14px;
}

@media(max-width:900px){

    .quote-invoice-totals{
        justify-content:stretch;
    }

    .quote-invoice-totals-card{
        width:100%;
    }

    .quote-transport-inline-grid{
        grid-template-columns:1fr;
    }

    .quote-detail-sober-header{
        grid-template-columns:1fr;
    }

    .quote-detail-sober-total{
        min-width:0;
        text-align:left;
    }

}

/* ==========================================================
   PRESSUPOSTOS 1.3.7 — Ajustes Jordi preview
   Transport sobre totals + dades client más finas + acciones direcciones
========================================================== */

.quote-client-panel{
    gap:8px;
}

.quote-client-panel-grid{
    gap:12px;
}

.quote-client-panel-card,
.quote-detail-client-card{
    padding:12px 14px;
    border-radius:16px;
}

.quote-panel-kicker{
    margin-bottom:5px;
    font-size:10px;
}

.quote-client-contact-panel h5{
    margin:0 0 7px;
    font-size:16px;
    line-height:1.18;
}

.quote-client-facts,
.quote-detail-client-facts{
    gap:6px;
    margin-bottom:8px;
}

.quote-client-facts div,
.quote-detail-client-facts span{
    padding:6px 9px;
    font-size:12px;
}

.quote-contact-actions{
    gap:6px;
}

.quote-action-pill,
.quote-map-link,
.quote-icon-action{
    min-height:30px;
    padding:6px 9px;
    font-size:12px;
}

.quote-icon-action{
    width:31px;
    min-width:31px;
    height:31px;
    padding:0;
    border-radius:999px;
    background:#fff4f4;
    color:var(--brand-primary);
    border:1px solid #f0c4c4;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    font-weight:900;
    text-decoration:none;
    line-height:1;
    cursor:pointer;
}

.quote-icon-action:hover{
    background:white;
    border-color:var(--brand-primary);
    opacity:1;
    transform:translateY(-1px);
}

.quote-icon-action.is-disabled,
.quote-icon-action:disabled{
    color:#999;
    background:#f5f5f5;
    border-color:#e5e5e5;
    cursor:not-allowed;
    pointer-events:none;
    transform:none;
}

.quote-copy-address-button{
    font-family:Arial,sans-serif;
}

.quote-client-address-panel{
    gap:8px;
}

.quote-address-two-columns,
.quote-detail-client-addresses{
    gap:10px;
}

.quote-address-block,
.quote-detail-address-item{
    padding:10px 11px;
    border-radius:14px;
}

.quote-address-block-header{
    margin-bottom:7px;
    gap:8px;
}

.quote-address-block-header strong{
    font-size:13px;
}

.quote-address-header-actions{
    gap:5px;
}

.quote-address-block-header .quote-map-link{
    min-height:31px;
    padding:0;
    font-size:14px;
}

.quote-address-block p,
.quote-detail-address-item p{
    font-size:13px;
    line-height:1.28;
}

.quote-delivery-edit-row{
    grid-template-columns:minmax(0, 1fr) 88px;
    gap:7px;
}

.quote-delivery-edit-row input{
    padding:8px 10px;
    border-radius:9px;
    font-size:13px;
}

.quote-restore-delivery-button{
    margin-top:7px;
    padding:0;
    border:none;
    background:transparent;
    color:var(--brand-primary);
    font-size:12px;
    font-weight:900;
    text-decoration:underline;
    cursor:pointer;
}

.quote-restore-delivery-button:hover{
    opacity:.82;
}

.quote-client-panel-help{
    font-size:11px;
}

.quote-budget-bottom-row{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:10px;
    margin-top:14px;
}

.quote-budget-bottom-row .quote-transport-standalone-card,
.quote-budget-bottom-row .quote-invoice-totals-card{
    width:min(100%, 390px);
}

.quote-budget-bottom-row .quote-invoice-totals{
    margin-top:0;
}

.quote-transport-compact-card{
    margin:0;
    padding:12px 14px;
    border-radius:16px;
    background:#fafafa;
}

.quote-transport-compact-card .quote-editor-section-header{
    margin-bottom:8px;
}

.quote-transport-compact-card .quote-editor-section-header h4{
    margin-bottom:2px;
}

.quote-transport-compact-card .quote-editor-section-header p{
    font-size:12px;
}

.quote-transport-inline-grid{
    grid-template-columns:minmax(0, 1fr) minmax(110px, .45fr);
    gap:8px;
}

.quote-transport-inline-grid input,
.quote-transport-inline-grid select{
    padding:9px 10px;
    border-radius:9px;
    font-size:13px;
}

@media(max-width:900px){

    .quote-budget-bottom-row{
        align-items:stretch;
    }

    .quote-budget-bottom-row .quote-transport-standalone-card,
    .quote-budget-bottom-row .quote-invoice-totals-card{
        width:100%;
    }

    .quote-delivery-edit-row{
        grid-template-columns:1fr;
    }

}

/* ==========================================================
   PRESSUPOSTOS 1.3.8 — Densidad final + transport full width
   - Contacte/NIF/email/telèfon en una sola franja.
   - Direcciones más ligeras.
   - Transport ancho completo bajo productos.
   - Ritmo de padding/gap más coherente.
========================================================== */

.quote-editor-section{
    margin-bottom:18px;
}

.quote-editor-section + .quote-editor-section{
    margin-top:18px;
}

.quote-editor-section-header,
.quote-lines-header{
    margin-bottom:14px;
}

.quote-client-panel{
    gap:9px;
}

.quote-client-panel-grid{
    grid-template-columns:1fr;
    gap:12px;
}

.quote-client-panel-card,
.quote-detail-client-card,
.quote-address-block,
.quote-detail-address-item,
.quote-transport-standalone-card,
.quote-invoice-totals-card,
.quote-observation-card{
    box-sizing:border-box;
}

.quote-client-panel-card,
.quote-detail-client-card{
    padding:11px 13px;
    border-radius:15px;
}

.quote-client-contact-panel,
.quote-detail-client-contact{
    min-height:0;
}

.quote-client-contact-panel h5,
.quote-detail-client-contact > strong,
.quote-client-facts,
.quote-detail-client-facts,
.quote-contact-actions{
    display:none;
}

.quote-client-contact-row{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    min-width:0;
}

.quote-client-contact-name{
    color:#222;
    font-size:14px;
    font-weight:900;
    line-height:1.2;
}

.quote-client-meta-pill,
.quote-mini-contact-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:28px;
    padding:5px 9px;
    border-radius:999px;
    border:1px solid #eeeeee;
    background:#fafafa;
    color:#333;
    font-size:12px;
    font-weight:850;
    line-height:1.1;
    text-decoration:none;
    max-width:100%;
}

.quote-mini-contact-link{
    color:var(--brand-primary);
    border-color:#f0c4c4;
    background:#fff8f8;
}

.quote-mini-contact-link:hover{
    background:white;
    border-color:var(--brand-primary);
    text-decoration:none;
    transform:translateY(-1px);
}

.quote-mini-contact-link.is-disabled{
    color:#999;
    background:#f6f6f6;
    border-color:#e8e8e8;
    cursor:not-allowed;
    pointer-events:none;
    transform:none;
}

.quote-detail-client-card{
    grid-template-columns:1fr;
    gap:12px;
}

.quote-detail-contact-row{
    margin-top:0;
}

.quote-address-two-columns,
.quote-detail-client-addresses{
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.quote-address-block,
.quote-detail-address-item{
    padding:10px 12px;
    border-radius:14px;
}

.quote-address-block-header{
    margin-bottom:6px;
}

.quote-address-block-header strong{
    color:#333;
    font-size:13px;
    font-weight:900;
}

.quote-address-block p,
.quote-detail-address-item p{
    margin:0;
    color:#333;
    font-size:13px;
    font-weight:400;
    line-height:1.35;
    word-break:break-word;
}

.quote-address-header-actions{
    gap:5px;
}

.quote-icon-action,
.quote-address-block-header .quote-map-link{
    width:29px;
    min-width:29px;
    height:29px;
    min-height:29px;
    padding:0;
    font-size:13px;
}

.quote-delivery-edit-row{
    grid-template-columns:minmax(0, 1fr) 86px;
    gap:7px;
}

.quote-delivery-edit-row input{
    min-height:36px;
    padding:8px 9px;
}

.quote-restore-delivery-button{
    margin-top:6px;
}

.quote-client-panel-help{
    margin-top:0;
    padding-left:2px;
}

.quote-budget-bottom-row{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:14px;
    margin-top:16px;
}

.quote-budget-bottom-row .quote-transport-standalone-card{
    width:100%;
    max-width:none;
}

.quote-budget-bottom-row .quote-invoice-totals{
    width:100%;
    justify-content:flex-end;
    margin-top:0;
}

.quote-budget-bottom-row .quote-invoice-totals-card{
    width:min(100%, 390px);
}

.quote-transport-full-row-card{
    width:100%;
    margin:0;
    padding:13px 14px;
    border-radius:15px;
    display:grid;
    grid-template-columns:minmax(160px, 220px) minmax(0, 1fr);
    gap:14px;
    align-items:end;
}

.quote-transport-row-label h4{
    margin:0 0 3px;
    color:#222;
    font-size:15px;
    line-height:1.2;
}

.quote-transport-row-label p{
    margin:0;
    color:#777;
    font-size:12px;
    line-height:1.25;
}

.quote-transport-row-fields{
    display:grid;
    grid-template-columns:minmax(220px, 320px) minmax(140px, 190px);
    gap:10px;
    align-items:end;
    justify-content:start;
}

.quote-transport-row-fields .form-field.half,
.quote-transport-row-fields .form-field.full{
    grid-column:auto;
}

.quote-transport-row-fields input,
.quote-transport-row-fields select{
    min-height:38px;
    padding:9px 10px;
}

.quote-invoice-totals-card{
    padding:13px 15px;
}

.quote-invoice-totals-caption{
    margin-bottom:8px;
    padding-bottom:8px;
}

.quote-invoice-totals-line{
    padding:6px 0;
}

.quote-payments-grid,
.quote-observations-grid{
    gap:16px;
}

@media(max-width:1100px){

    .quote-address-two-columns,
    .quote-detail-client-addresses{
        grid-template-columns:1fr;
    }

    .quote-transport-full-row-card{
        grid-template-columns:1fr;
    }

    .quote-transport-row-fields{
        grid-template-columns:1fr 160px;
    }

}

@media(max-width:900px){

    .quote-client-contact-row{
        align-items:flex-start;
    }

    .quote-mini-contact-link,
    .quote-client-meta-pill{
        max-width:100%;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .quote-delivery-edit-row,
    .quote-transport-row-fields{
        grid-template-columns:1fr;
    }

    .quote-budget-bottom-row .quote-invoice-totals-card{
        width:100%;
    }

}

/* ==========================================================
   PRESSUPOSTOS 1.3.9 — Dades client restaurades + transport más bajo
========================================================== */

.quote-client-unified-card{
    display:flex;
    flex-direction:column;
    gap:9px;
    padding:10px 12px;
}

.quote-client-inline-data{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    padding:0 0 9px 0;
    border-bottom:1px solid #eeeeee;
    min-height:0;
}

.quote-client-inline-data .quote-panel-kicker{
    margin:0 4px 0 0;
    white-space:nowrap;
}

.quote-client-inline-data .quote-client-contact-name{
    font-size:14px;
    line-height:1.15;
    margin-right:2px;
}

.quote-client-inline-data .quote-client-meta-pill,
.quote-client-inline-data .quote-mini-contact-link{
    min-height:25px;
    padding:4px 8px;
    font-size:12px;
}

.quote-address-kicker{
    margin:0;
}

.quote-client-unified-card .quote-address-two-columns,
.quote-detail-client-card.quote-client-unified-card .quote-detail-client-addresses{
    margin-top:0;
}

.quote-client-unified-card .quote-address-block,
.quote-detail-client-card.quote-client-unified-card .quote-detail-address-item{
    padding:8px 10px;
}

.quote-client-unified-card .quote-address-block-header{
    margin-bottom:5px;
}

.quote-client-unified-card .quote-address-block p,
.quote-detail-client-card.quote-client-unified-card .quote-detail-address-item p{
    font-size:13px;
    line-height:1.32;
    font-weight:400;
}

.quote-detail-client-card.quote-client-unified-card{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:10px 12px;
}

.quote-detail-inline-data{
    padding-bottom:9px;
}

.quote-client-panel-help{
    margin-top:5px;
    font-size:12px;
    line-height:1.25;
}

.quote-transport-full-row-card{
    padding:9px 12px;
    min-height:0;
    align-items:center;
    gap:12px;
}

.quote-transport-row-label h4{
    margin:0;
    font-size:14px;
    line-height:1.15;
}

.quote-transport-row-label p{
    display:none;
}

.quote-transport-row-fields{
    gap:9px;
    align-items:end;
}

.quote-transport-row-fields .form-field label{
    margin-bottom:4px;
    font-size:11px;
}

.quote-transport-row-fields input,
.quote-transport-row-fields select{
    min-height:34px;
    padding:7px 9px;
}

@media(max-width:900px){
    .quote-client-inline-data{
        align-items:flex-start;
    }

    .quote-transport-full-row-card{
        grid-template-columns:1fr;
    }
}


/* ==========================================================
   CLIENT DETAIL — PRESSUPOSTOS TAB
========================================================== */

.client-quotes-panel,
.client-billing-panel{
    grid-column:1/-1;
    display:flex;
    flex-direction:column;
    gap:16px;
}

.client-quotes-header-card{
    grid-column:1/-1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    background:#fafafa;
    border:1px solid #eeeeee;
    border-radius:18px;
    padding:18px;
}

.client-quotes-header-card h4{
    margin:0 0 4px;
    font-size:18px;
}

.client-quotes-header-card p{
    margin:0;
    color:#666;
    font-size:14px;
}

.client-new-quote-button{
    white-space:nowrap;
}

.client-quotes-list,
.client-billing-list{
    grid-column:1/-1;
    width:100%;
}

.client-quotes-table-wrap,
.client-invoices-table-wrap{
    width:100%;
    overflow-x:auto;
    border-radius:18px;
}

.client-quotes-table,
.client-invoices-table{
    min-width:1050px;
    margin-top:0;
}

.client-quotes-row-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.client-invoices-summary-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(150px, 1fr));
    gap:12px;
    margin-bottom:16px;
}

.client-invoices-summary-grid div{
    background:#fafafa;
    border:1px solid #eeeeee;
    border-radius:14px;
    padding:14px;
}

.client-invoices-summary-grid span{
    display:block;
    color:#666;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    margin-bottom:6px;
}

.client-invoices-summary-grid strong{
    display:block;
    color:#222;
    font-size:20px;
}

.client-invoice-list-row{
    cursor:pointer;
}

.client-invoices-warning{
    margin:0 0 16px;
}

.client-quotes-empty,
.client-invoices-empty{
    margin:0;
}

@media(max-width:900px){

    .client-quotes-header-card{
        flex-direction:column;
        align-items:stretch;
    }

    .client-new-quote-button{
        width:100%;
    }

    .client-invoices-summary-grid{
        grid-template-columns:1fr;
    }

}


/* ==========================================================
   ROUTER 1.4 — BOTONES COMPARTIR
========================================================== */

.app-share-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    width:auto;
    white-space:nowrap;
    padding:9px 13px;
    border-radius:999px;
    font-size:13px;
    font-weight:900;
    line-height:1;
}

.app-share-button:disabled{
    opacity:.72;
    cursor:not-allowed;
}

.app-share-button-light{
    background:white;
    color:var(--brand-primary);
    border:1px solid rgba(255,255,255,.75);
}

.app-share-button-light:hover{
    background:#fff4f4;
    opacity:1;
}

.product-detail-header-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
}

@media(max-width:900px){

    .product-detail-header-actions{
        justify-content:flex-start;
    }

}


/* ==========================================================
   BOOT AUTH — evitar flash de login al refrescar
========================================================== */

body.app-booting .login-view,
body.app-booting .app{
    display:none !important;
}

body.app-booting{
    background:var(--brand-background);
}


/* ==========================================================
   PRESSUPOSTOS 1.6 — Estados operativos
========================================================== */

.quote-status-actions-card{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    margin:18px 0;
    padding:18px;
    border:1px solid #eeeeee;
    border-radius:22px;
    background:#ffffff;
    box-shadow:0 10px 26px rgba(0,0,0,.04);
}

.quote-status-actions-copy{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:220px;
}

.quote-status-actions-copy strong{
    font-size:20px;
    color:#222;
}

.quote-status-actions-copy p{
    margin:2px 0 0;
    color:#666;
    font-size:14px;
}

.quote-status-actions-list{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.quote-status-action-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 14px;
    border-radius:999px;
    font-size:13px;
    white-space:nowrap;
    background:#f7f7f7;
    color:#333;
    border:1px solid #e0e0e0;
}

.quote-status-action-button:hover{
    background:#ffffff;
    border-color:var(--brand-primary);
    color:var(--brand-primary);
    opacity:1;
}

.quote-status-action-sent{
    background:#fff8e7;
    color:#8a5a00;
    border-color:#f1d89b;
}

.quote-status-action-accepted{
    background:#edf8ef;
    color:#1f7a38;
    border-color:#bde5c6;
}

.quote-status-action-rejected,
.quote-status-action-cancelled{
    background:#fff4f4;
    color:#a60000;
    border-color:#f0b5b5;
}

.quote-status-action-draft{
    background:#f4f4f4;
    color:#444;
    border-color:#dddddd;
}

.quote-status-action-button:disabled{
    opacity:.55;
    cursor:not-allowed;
}

@media(max-width:900px){

    .quote-status-actions-card{
        flex-direction:column;
        align-items:stretch;
    }

    .quote-status-actions-list{
        justify-content:flex-start;
    }

    .quote-status-action-button{
        width:100%;
    }

}

/* ==========================================================
   PRODUCTES — TAULA COMPACTA SENSE SCROLL
========================================================== */

.products-table{
    width:100%;
    min-width:0;
    table-layout:fixed;
}

.products-table th,
.products-table td{
    padding:14px 10px;
}

.products-table .product-col-name{
    width:auto;
}

.products-table .product-col-category{
    width:92px;
    max-width:92px;
}

.products-table .product-col-vat{
    width:56px;
    max-width:56px;
    text-align:left;
}

.products-table .product-col-status{
    width:92px;
    max-width:92px;
}

.products-table .product-col-action{
    width:82px;
    min-width:82px;
    max-width:82px;
}

.products-table .product-col-vat,
.products-table .product-col-status,
.products-table .product-col-action{
    white-space:nowrap;
}

.products-table .product-col-category{
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:normal;
    line-height:1.25;
}

.products-table .small-button{
    padding:8px 10px;
}


/* ==========================================================
   CLIENTE — PAGINACIÓN HISTORIAL / COMENTARIS
========================================================== */

.client-timeline-pagination{
    grid-column:1/-1;
    margin-top:2px;
    padding-top:14px;
    border-top:1px solid #eeeeee;
}

.client-timeline-pagination .pagination-left select{
    width:auto;
    min-width:120px;
}

.client-timeline-pagination .pagination-button{
    min-width:105px;
}

/* ==========================================================
   EXPORTACIONS — Modal contextual Pressupostos
========================================================== */

.quote-list-header-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
}

.quote-list-header-actions .secondary-button{
    white-space:nowrap;
}

.quote-export-open-button{
    margin-right:0;
}

.quote-export-modal-open{
    overflow:hidden;
}

.quote-export-modal-overlay{
    position:fixed;
    inset:0;
    z-index:10000;
    background:rgba(0,0,0,.42);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:28px;
    box-sizing:border-box;
}

.quote-export-modal-card{
    width:min(980px, calc(100vw - 40px));
    max-height:calc(100vh - 56px);
    background:white;
    border-radius:26px;
    box-shadow:0 24px 80px rgba(0,0,0,.24);
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.quote-export-modal-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    padding:26px 28px 20px;
    border-bottom:1px solid #eeeeee;
}

.quote-export-modal-header h3{
    margin:4px 0 6px;
    font-size:24px;
    letter-spacing:-0.02em;
}

.quote-export-modal-header p{
    margin:0;
    color:#666;
    line-height:1.45;
}

.quote-export-close-button{
    width:42px;
    height:42px;
    min-width:42px;
    padding:0;
    border-radius:14px;
    background:#f7f7f7;
    color:#333;
    border:1px solid #e5e5e5;
    font-size:25px;
    line-height:1;
}

.quote-export-close-button:hover{
    background:#eeeeee;
    opacity:1;
}

.quote-export-modal-body{
    padding:22px 28px;
    overflow:auto;
    display:flex;
    flex-direction:column;
    gap:18px;
}

.quote-export-section{
    background:#fafafa;
    border:1px solid #eeeeee;
    border-radius:20px;
    padding:18px;
}

.quote-export-section h4{
    margin:0 0 14px;
    font-size:16px;
}

.quote-export-section-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-bottom:14px;
}

.quote-export-section-header h4{
    margin:0;
}

.quote-export-radio-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:12px;
}

.quote-export-radio-grid label,
.quote-export-column-option{
    display:flex;
    align-items:center;
    gap:10px;
    background:white;
    border:1px solid #e5e5e5;
    border-radius:14px;
    padding:13px 14px;
    font-weight:700;
    color:#333;
}

.quote-export-radio-grid input,
.quote-export-column-option input{
    width:auto;
    min-width:auto;
    margin:0;
}

.quote-export-filter-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:14px;
}

.quote-export-filter-grid .form-field.full-width{
    grid-column:span 2;
}

.quote-export-filter-grid input,
.quote-export-filter-grid select{
    width:100%;
}

.quote-export-columns-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
}

.quote-export-mini-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.quote-export-mini-actions button{
    padding:8px 12px;
    font-size:13px;
}

.quote-export-help{
    margin:12px 0 0;
    color:#777;
    font-size:13px;
    line-height:1.4;
}

.quote-export-modal-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    padding:18px 28px;
    border-top:1px solid #eeeeee;
    background:white;
}

#quoteExportCountPreview{
    color:#555;
    font-weight:800;
}

.quote-export-footer-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
}

@media(max-width:900px){

    .quote-export-modal-overlay{
        padding:14px;
        align-items:flex-start;
    }

    .quote-export-modal-card{
        width:100%;
        max-height:calc(100vh - 28px);
    }

    .quote-export-modal-header,
    .quote-export-modal-footer{
        padding-left:18px;
        padding-right:18px;
    }

    .quote-export-modal-body{
        padding:18px;
    }

    .quote-export-radio-grid,
    .quote-export-filter-grid,
    .quote-export-columns-grid{
        grid-template-columns:1fr;
    }

    .quote-export-filter-grid .form-field.full-width{
        grid-column:auto;
    }

    .quote-export-modal-footer{
        flex-direction:column;
        align-items:stretch;
    }

    .quote-export-footer-actions{
        justify-content:stretch;
    }

    .quote-export-footer-actions button{
        flex:1;
    }

}


/* ==========================================================
   EXPORTACIONS 1.1 — Modal contextual Clients
========================================================== */

.client-export-open-button{
    white-space:nowrap;
}

.client-export-modal-open{
    overflow:hidden;
}

.client-export-modal-overlay{
    position:fixed;
    inset:0;
    z-index:10000;
    background:rgba(0,0,0,.42);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:28px;
    box-sizing:border-box;
}

.client-export-modal-card{
    width:min(980px, calc(100vw - 40px));
    max-height:calc(100vh - 56px);
    background:white;
    border-radius:26px;
    box-shadow:0 24px 80px rgba(0,0,0,.24);
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.client-export-modal-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    padding:24px 28px 20px;
    border-bottom:1px solid #eeeeee;
}

.client-export-modal-header h3{
    margin:0 0 6px;
    color:#222;
    font-size:24px;
    letter-spacing:-.02em;
}

.client-export-modal-header p{
    margin:0;
    color:#666;
    font-size:14px;
}

.client-export-modal-body{
    padding:24px 28px;
    overflow:auto;
    display:flex;
    flex-direction:column;
    gap:22px;
}

.client-export-section{
    background:#fafafa;
    border:1px solid #eeeeee;
    border-radius:20px;
    padding:18px;
}

.client-export-section h4{
    margin:0 0 14px;
    color:#222;
    font-size:17px;
    letter-spacing:-.01em;
}

.client-export-section-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:14px;
}

.client-export-section-header h4{
    margin:0;
}

.client-export-radio-grid,
.client-export-filter-grid,
.client-export-format-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:14px;
}

.client-export-radio-grid label{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:46px;
    padding:12px 14px;
    border:1px solid #e6e6e6;
    border-radius:16px;
    background:white;
    color:#333;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
}

.client-export-radio-grid input{
    min-width:auto;
    margin:0;
}

.client-export-filter-grid .form-field.full-width,
.client-export-format-grid .form-field.full-width{
    grid-column:1 / -1;
}

.client-export-columns-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
    gap:10px 14px;
}

.client-export-column-option{
    display:flex;
    align-items:center;
    gap:9px;
    padding:10px 12px;
    border:1px solid #eeeeee;
    border-radius:14px;
    background:white;
    color:#333;
    font-size:14px;
    font-weight:700;
}

.client-export-column-option input{
    min-width:auto;
    margin:0;
}

.client-export-mini-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:wrap;
}

.client-export-help{
    margin:12px 0 0;
    color:#666;
    font-size:13px;
    line-height:1.45;
}

.client-export-modal-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:18px 28px 24px;
    border-top:1px solid #eeeeee;
    background:#fbfbfb;
}

#clientExportSummary{
    color:#555;
    font-size:14px;
    font-weight:800;
}

.client-export-footer-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
}

@media(max-width:900px){

    .client-export-modal-overlay{
        padding:14px;
        align-items:flex-start;
    }

    .client-export-modal-card{
        width:100%;
        max-height:calc(100vh - 28px);
    }

    .client-export-modal-header,
    .client-export-modal-footer{
        padding-left:18px;
        padding-right:18px;
    }

    .client-export-modal-body{
        padding:18px;
    }

    .client-export-radio-grid,
    .client-export-filter-grid,
    .client-export-format-grid,
    .client-export-columns-grid{
        grid-template-columns:1fr;
    }

    .client-export-filter-grid .form-field.full-width,
    .client-export-format-grid .form-field.full-width{
        grid-column:auto;
    }

    .client-export-section-header,
    .client-export-modal-footer{
        flex-direction:column;
        align-items:stretch;
    }

    .client-export-footer-actions{
        justify-content:stretch;
    }

    .client-export-footer-actions button{
        flex:1;
    }

}

/* ==========================================================
   EXPORTACIONS 1.2 — Modal contextual Productes
========================================================== */

.products-header-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
}

.product-export-open-button{
    white-space:nowrap;
}

.product-export-modal-open{
    overflow:hidden;
}

.product-export-modal-overlay{
    position:fixed;
    inset:0;
    z-index:10000;
    background:rgba(0,0,0,.42);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:28px;
    box-sizing:border-box;
}

.product-export-modal-card{
    width:min(980px, calc(100vw - 40px));
    max-height:calc(100vh - 56px);
    background:white;
    border-radius:26px;
    box-shadow:0 24px 80px rgba(0,0,0,.24);
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.product-export-modal-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    padding:24px 28px 20px;
    border-bottom:1px solid #eeeeee;
}

.product-export-modal-header h3{
    margin:0 0 6px;
    color:#222;
    font-size:24px;
    letter-spacing:-.02em;
}

.product-export-modal-header p{
    margin:0;
    color:#666;
    font-size:14px;
}

.product-export-close-button{
    width:42px;
    height:42px;
    min-width:42px;
    padding:0;
    border-radius:14px;
    background:#f7f7f7;
    color:#333;
    border:1px solid #e5e5e5;
    font-size:25px;
    line-height:1;
}

.product-export-close-button:hover{
    background:#eeeeee;
    opacity:1;
}

.product-export-modal-body{
    padding:24px 28px;
    overflow:auto;
    display:flex;
    flex-direction:column;
    gap:22px;
}

.product-export-section{
    background:#fafafa;
    border:1px solid #eeeeee;
    border-radius:20px;
    padding:18px;
}

.product-export-section h4{
    margin:0 0 14px;
    color:#222;
    font-size:17px;
    letter-spacing:-.01em;
}

.product-export-section-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:14px;
}

.product-export-section-header h4{
    margin:0;
}

.product-export-radio-grid,
.product-export-filter-grid,
.product-export-format-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:14px;
}

.product-export-radio-grid label{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:46px;
    padding:12px 14px;
    border:1px solid #e6e6e6;
    border-radius:16px;
    background:white;
    color:#333;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
}

.product-export-radio-grid label.is-disabled{
    opacity:.48;
    cursor:not-allowed;
}

.product-export-radio-grid input{
    min-width:auto;
    margin:0;
}

.product-export-filter-grid .form-field.full-width,
.product-export-format-grid .form-field.full-width{
    grid-column:1 / -1;
}

.product-export-columns-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
    gap:10px 14px;
}

.product-export-column-option{
    display:flex;
    align-items:center;
    gap:9px;
    padding:10px 12px;
    border:1px solid #eeeeee;
    border-radius:14px;
    background:white;
    color:#333;
    font-size:14px;
    font-weight:700;
}

.product-export-column-option input{
    min-width:auto;
    margin:0;
}

.product-export-mini-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:wrap;
}

.product-export-mini-actions button{
    padding:8px 12px;
    font-size:13px;
}

.product-export-help{
    margin:12px 0 0;
    color:#666;
    font-size:13px;
    line-height:1.45;
}

.product-export-modal-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:18px 28px 24px;
    border-top:1px solid #eeeeee;
    background:#fbfbfb;
}

#productExportSummary{
    color:#555;
    font-size:14px;
    font-weight:800;
}

.product-export-footer-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
}

@media(max-width:900px){

    .products-header-actions{
        width:100%;
        justify-content:stretch;
    }

    .products-header-actions button{
        flex:1;
    }

    .product-export-modal-overlay{
        padding:14px;
        align-items:flex-start;
    }

    .product-export-modal-card{
        width:100%;
        max-height:calc(100vh - 28px);
    }

    .product-export-modal-header,
    .product-export-modal-footer{
        padding-left:18px;
        padding-right:18px;
    }

    .product-export-modal-body{
        padding:18px;
    }

    .product-export-radio-grid,
    .product-export-filter-grid,
    .product-export-format-grid,
    .product-export-columns-grid{
        grid-template-columns:1fr;
    }

    .product-export-filter-grid .form-field.full-width,
    .product-export-format-grid .form-field.full-width{
        grid-column:auto;
    }

    .product-export-section-header,
    .product-export-modal-footer{
        flex-direction:column;
        align-items:stretch;
    }

    .product-export-footer-actions{
        justify-content:stretch;
    }

    .product-export-footer-actions button{
        flex:1;
    }

}