/* 3ps — «Hoja de ruta»: paper càlid, tinta blava i un sol accent, el groc del Camino. */
:root {
  --paper:#F4EFE6; --paper-2:#EDE6D8; --card:#FFFFFF; --line:#DED5C3; --line-strong:#C9BEA6;
  --ink:#16243A; --ink-2:#3D4A60; --ink-3:#5E6A7E;
  --yellow:#F5B800; --yellow-ink:#1A1400; --yellow-soft:#FFF1BF; --yellow-hover:#E5AC00;
  --teal:#0E6E6E; --teal-soft:#D8EEEC;
  --terra:#C4471D; --terra-soft:#F8DDD3;
  --green:#2F7D4A; --green-soft:#D9EEDC;
  --amber:#B86E00; --amber-soft:#FFE9C2;
  --radius:12px; --radius-sm:8px;
  --shadow:0 1px 2px rgba(22,36,58,.06), 0 6px 18px rgba(22,36,58,.06);
  --tap:48px;
  --font-display:"Barlow Condensed","Arial Narrow","Roboto Condensed",sans-serif;
  --font-body:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7688' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --lupa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236B7688' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:#121A28; --paper-2:#0C121D; --card:#1A2434; --line:#2B3952; --line-strong:#3B4B68;
    --ink:#F1ECE1; --ink-2:#C9C2B4; --ink-3:#9AA3B4;
    --yellow-soft:#3A3000;
    --teal:#5FC4C0; --teal-soft:#0F3A3A;
    --terra:#F08A66; --terra-soft:#4A1E12;
    --green:#6CCB8A; --green-soft:#163A22;
    --amber:#F0B04A; --amber-soft:#3F2A00;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.25);
    --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239AA3B4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    --lupa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239AA3B4' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.45 var(--font-body); padding-bottom:80px; -webkit-tap-highlight-color:transparent; }
img { max-width:100%; }
::selection { background:var(--yellow-soft); color:var(--ink); }
* { scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
hr { border:0; border-top:1px solid var(--line); }
p { margin:0 0 6px; }
small { font-size:15px; }
strong { font-weight:700; }
h1,h2,h3,h4,h5 { font-family:var(--font-display); font-weight:600; letter-spacing:.01em; color:var(--ink); margin:0 0 10px; line-height:1.15; }
h2 { font-size:28px; }
h3 { font-size:24px; }
h4 { font-size:20px; }
h5 { font-size:18px; }
a { color:var(--teal); text-decoration:none; }
.container { max-width:1100px; margin:0 auto; padding:16px; }

/* ---------- capçalera ---------- */
header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 0 14px; }
header .brand { min-width:0; }
header h1 { font-size:32px; font-weight:700; margin:0; display:flex; align-items:center; gap:10px; line-height:1; }
header h1::before { content:""; width:10px; height:10px; background:var(--yellow); flex:none; transform:rotate(45deg); }
header p { margin:4px 0 0; font-size:13px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.12em; display:none; }
#userWelcome { font-size:14px; color:var(--ink-2); text-align:right; margin:0; white-space:nowrap; }
#userWelcome #usernameDisplay { font-weight:700; color:var(--ink); }
#userWelcome .hi { display:none; }
#logoutLink { color:var(--ink-3); text-decoration:underline; text-underline-offset:3px; margin-left:8px; display:inline-block; padding:12px 0; }
@media (min-width:768px) {
  .container { padding:24px; }
  header p { display:block; }
  #userWelcome .hi { display:inline; }
}
@media (min-width:480px) { header p { display:block; } }
@media (hover:hover) { #logoutLink:hover { color:var(--ink); } a:hover { text-decoration:underline; text-underline-offset:3px; } }

/* ---------- login ---------- */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px 20px; max-width:420px; margin:48px auto 0; }
.card h2 { margin-bottom:16px; }
.card input { height:52px; }
#loginBtn { width:100%; margin-top:6px; }
.message { margin-top:12px; padding:10px 12px; border-radius:var(--radius-sm); background:var(--terra-soft); color:var(--terra); font-weight:700; }
.message:empty { display:none; }
.message.success { background:var(--green-soft); color:var(--green); }
.message.warning { background:var(--amber-soft); color:var(--amber); }

/* ---------- pestanyes principals ---------- */
.tab { font-size:0; position:fixed; bottom:0; left:0; right:0; z-index:900; background:var(--card); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); }
.tab .tablinks { display:inline-block; vertical-align:top; width:25%; height:56px; padding:0 2px; margin:0; border:0; border-radius:0; background:transparent; color:var(--ink-3); font:600 15px/1 var(--font-display); text-transform:uppercase; letter-spacing:.04em; cursor:pointer; position:relative; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-shadow:none; }
.tab .tablinks:active { transform:none; background:var(--paper-2); }
.tab:not(:has(.tab-active)) .tablinks.active, .tab .tablinks.tab-active { color:var(--ink); }
.tab:not(:has(.tab-active)) .tablinks.active::after, .tab .tablinks.tab-active::after { content:""; position:absolute; top:0; left:12%; right:12%; height:3px; background:var(--yellow); border-radius:0 0 3px 3px; }
.tabcontent { display:none; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; }
.tabcontent.tab-active, .tabcontent.active { display:block; animation:fadeUp .18s ease; }
.tabcontent.tab-hidden { display:none; }
@keyframes fadeUp { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
@media (min-width:768px) {
  body { padding-bottom:24px; }
  .tab { position:static; font-size:0; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:6px; margin-bottom:16px; }
  .tab .tablinks { width:25%; height:48px; border-radius:var(--radius-sm); font-size:17px; }
  .tab:not(:has(.tab-active)) .tablinks.active, .tab .tablinks.tab-active { background:var(--card); box-shadow:var(--shadow); }
  .tab:not(:has(.tab-active)) .tablinks.active::after, .tab .tablinks.tab-active::after { top:auto; bottom:0; left:16px; right:16px; border-radius:3px 3px 0 0; }
  .tabcontent { padding:24px; }
}
@media (hover:hover) { .tab .tablinks:hover { color:var(--ink); } }

/* ---------- sub-pestanyes ---------- */
.sub-tabs { display:flex; gap:4px; background:var(--paper-2); border-radius:10px; padding:4px; margin-bottom:16px; }
.sub-tablink { flex:1; height:44px; padding:0 8px; border:0; border-radius:8px; background:transparent; color:var(--ink-3); font:600 17px var(--font-display); letter-spacing:.02em; text-transform:uppercase; cursor:pointer; }
.sub-tabs:not(:has(.sub-tab-active)) .sub-tablink.active, .sub-tablink.sub-tab-active { background:var(--card); color:var(--ink); box-shadow:var(--shadow); }
.sub-tabcontent { display:none; }
.sub-tabcontent.active, .sub-tabcontent.sub-tab-active { display:block; animation:fadeUp .18s ease; }
.sub-tabcontent.sub-tab-hidden { display:none; }
#routeMapTab.sub-tab-active { display:block !important; }
#routeMap { max-height:60vh; width:100%; border-radius:var(--radius); border:1px solid var(--line); }
@media (min-width:768px) { #routeMap { max-height:520px; } }

/* ---------- botons ---------- */
button { font-family:var(--font-body); }
button, .btn-primary, .btn-secondary, .btn-warning, .modal-btn { min-height:var(--tap); padding:0 18px; border-radius:var(--radius-sm); font-size:17px; font-weight:700; line-height:1.1; cursor:pointer; border:1.5px solid transparent; transition:transform .08s, box-shadow .15s; background:transparent; color:var(--ink); }
button:active { transform:scale(.98); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline:none; box-shadow:0 0 0 3px var(--yellow-soft); }
button:disabled { opacity:.5; cursor:not-allowed; }
.btn-primary, #loginBtn, #createRoute, #newClientBtn, #toggleMachineFormBtn, #showVisitFormBtn, #showExpenseFormBtn, #newProspectBtn, .modal-btn-save, .save-visit-btn, form button[type=submit], #createNewRouteBtn { background:var(--yellow); color:var(--yellow-ink); border-color:var(--yellow); }
.btn-secondary, .modal-btn-cancel, .btn-modify-client, .btn-edit-client, .photo-toggle-btn, #downloadExcel, #closeModal, #retrySync { background:transparent; color:var(--ink); border:1.5px solid var(--line-strong); }
.btn-warning, #closeRouteBtn { background:var(--terra); color:#fff; border-color:var(--terra); }
.btn-primary:focus-visible, #loginBtn:focus-visible, .btn-secondary:focus-visible, .btn-warning:focus-visible { box-shadow:0 0 0 3px var(--yellow-soft); }
@media (hover:hover) {
  .btn-primary:hover, #loginBtn:hover, #createRoute:hover, #newClientBtn:hover, #toggleMachineFormBtn:hover, #showVisitFormBtn:hover, #showExpenseFormBtn:hover, #newProspectBtn:hover, .modal-btn-save:hover, .save-visit-btn:hover, form button[type=submit]:hover, #createNewRouteBtn:hover { background:var(--yellow-hover); border-color:var(--yellow-hover); }
  .btn-secondary:hover, .modal-btn-cancel:hover, .btn-modify-client:hover, .btn-edit-client:hover, .photo-toggle-btn:hover, #downloadExcel:hover { background:var(--paper-2); }
  .btn-warning:hover, #closeRouteBtn:hover { filter:brightness(.92); }
}
#toggleMachineFormBtn, #newClientBtn, #newProspectBtn, #showVisitFormBtn, #showExpenseFormBtn, #createRoute, #downloadExcel, #closeRouteBtn, #createNewRouteBtn { width:100%; margin:0 0 12px; }
.btn-modify-client, .btn-edit-client, .photo-toggle-btn { min-height:44px; padding:0 14px; font-size:16px; width:auto; }
.btn-edit-client[style] { background:transparent !important; color:var(--ink) !important; border:1.5px solid var(--line-strong) !important; padding:0 14px !important; font-size:16px !important; border-radius:var(--radius-sm) !important; }
@media (min-width:768px) {
  #toggleMachineFormBtn, #newClientBtn, #newProspectBtn, #showVisitFormBtn, #showExpenseFormBtn, #createRoute, #downloadExcel, #closeRouteBtn, #createNewRouteBtn { width:auto; margin-bottom:0; }
}
.form-buttons { display:flex; flex-direction:column-reverse; gap:10px; margin-top:16px; }
.form-buttons button { width:100%; }
@media (min-width:768px) { .form-buttons { flex-direction:row; justify-content:flex-end; } .form-buttons button { width:auto; } }

/* ---------- formularis ---------- */
.form-group, .modal-form-group { margin-bottom:14px; }
label { display:block; font-size:14px; font-weight:700; color:var(--ink-2); margin-bottom:6px; }
input, select, textarea { width:100%; min-height:var(--tap); padding:10px 12px; font:16px/1.3 var(--font-body); color:var(--ink); background:var(--card); border:1.5px solid var(--line-strong); border-radius:var(--radius-sm); transition:box-shadow .15s, border-color .15s; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--ink); box-shadow:0 0 0 3px var(--yellow-soft); }
input[readonly] { background:var(--paper-2); color:var(--ink-2); }
input::placeholder, textarea::placeholder { color:var(--ink-3); }
textarea { min-height:96px; resize:vertical; }
textarea[style] { padding:10px 12px !important; border:1.5px solid var(--line-strong) !important; border-radius:var(--radius-sm) !important; font-size:16px !important; }
select { appearance:none; -webkit-appearance:none; background-image:var(--chev); background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; }
input[type=checkbox], input[type=radio] { width:22px; height:22px; min-height:0; padding:0; accent-color:var(--yellow); vertical-align:middle; margin:0 8px 0 0; flex:none; }
label:has(> input[type=checkbox]) { display:flex; align-items:center; font-size:16px; color:var(--ink); min-height:var(--tap); }
input[type=file] { padding:10px 12px; height:auto; }
input[type=date], input[type=time] { min-height:var(--tap); }
.field-info, small.field-info { display:block; margin-top:5px; font-size:13px; color:var(--ink-3); line-height:1.35; }
.form-section { margin-bottom:12px; }
.form-section h4 { font-size:20px; padding-bottom:6px; margin:16px 0 12px; border-bottom:1px solid var(--line); }
.form-popup, #clientFormContainer > div, #machineFormContainer > div, #prospectFormContainer > div, #createRouteForm { background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin:12px 0; }
#clientFormContainer, #machineFormContainer, #prospectFormContainer, #visitFormContainer, #expenseFormContainer { margin:12px 0; }
#clientFormContainer > div, #machineFormContainer > div, #prospectFormContainer > div { margin:0; }
#visitFormContainer, #expenseFormContainer { background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:16px; }
#visitFormContainer[style*="none"], #expenseFormContainer[style*="none"] { padding:0; border:0; margin:0; }
@media (min-width:768px) {
  .client-form form, .machine-form form, #visitFormElement, #prospectForm, .form-section, .visit-form, .payment-section { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; align-items:start; }
  .form-section h4, .visit-form h4, .payment-section h5, .client-form form .form-buttons, .machine-form form .form-buttons, #visitFormElement .form-buttons, #prospectForm .form-buttons, .form-group:has(textarea), .payment-summary, .visit-form .form-buttons, .visit-form .earnings-calculation, .visit-form .maintenance-checklist, .visit-form .payment-section { grid-column:1 / -1; }
  .visit-form .payment-section { display:grid; }
}

/* ---------- cerca ---------- */
.search-container { margin:0 0 14px; }
#clientSearch, #machineSearch, #prospectSearch, .search-container input { border-radius:999px; padding-left:42px; background-image:var(--lupa); background-repeat:no-repeat; background-position:15px center; }

/* ---------- capçaleres de secció ---------- */
.visits-header, .expenses-header, .machines-header, .clients-header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.visits-header h3, .expenses-header h3 { font-size:26px; margin:0; }
.visits-headerbtn { display:flex; }
.visits-headerbtn button { width:100%; }
.visits-header .visits-headerbtn { width:100%; }
@media (min-width:768px) { .visits-header .visits-headerbtn, .visits-headerbtn button { width:auto; } }
h4.machines-header { font-size:20px; margin:12px 0 8px; }
.expenses-header .expenselabel, #totalExpenses { font-family:var(--font-display); font-size:28px; font-weight:700; color:var(--ink); margin:0; font-variant-numeric:tabular-nums; flex:1 1 100%; text-align:left; font-size:24px; }
.expenses-header #showExpenseFormBtn { width:100%; margin:0; }
@media (min-width:768px) { .expenses-header #showExpenseFormBtn { width:auto; } #totalExpenses { flex:1; text-align:right; font-size:28px; } }
.route-selector { display:flex; flex-direction:column; gap:10px; margin-bottom:6px; }
@media (min-width:768px) { .route-selector { flex-direction:row; } .route-selector select { flex:1; } }
.section-header { font-size:22px; margin:18px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--line); }
.section-header.completed-header { color:var(--green); }
.visits-section:first-child .section-header { margin-top:4px; }

/* ---------- targetes ---------- */
.clients-list > *, .clients-item, .machines-item, .visit-visible, .expense-item, .prospect-card { background:var(--card); border:1px solid var(--line); border-left:5px solid var(--line-strong); border-radius:var(--radius); padding:14px 16px; margin:0 0 10px; box-shadow:var(--shadow); color:var(--ink); }
.clients-item, .machines-item { cursor:pointer; }
.clients-list > .clients-item { border-left-color:var(--line-strong); }
.client-info p, .machines-item p { font-size:15px; color:var(--ink-2); margin:0 0 6px; }
.client-info p strong { color:var(--ink-3); font-size:13px; text-transform:uppercase; letter-spacing:.06em; margin-right:4px; }
.client-header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:8px; }
.client-header h3, .client-name { font-family:var(--font-display); font-size:22px; font-weight:600; color:var(--ink); margin:0; }
.client-address, .contact-name { font-size:15px; color:var(--ink-2); }
.machine-info { font-size:15px; color:var(--ink-2); margin-bottom:8px; }
.machine-info strong { font-family:var(--font-display); font-size:22px; font-weight:600; color:var(--ink); }
.machine-info small, .machines-item small { font-size:15px; }
.machine-annotation { font-size:15px; color:var(--ink-2); margin-bottom:8px; }
.machine-maintenance-status { font-size:15px; margin-bottom:8px; }
.machine-maintenance-status > strong { display:block; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); margin-bottom:6px; }
.maintenance-labels { display:flex; flex-wrap:wrap; gap:6px; }
.maintenance-label { display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px; font-size:13px; font-weight:700; background:var(--paper-2); color:var(--ink-2); }
.maintenance-active { background:var(--green-soft); color:var(--green); }
.maintenance-inactive { background:var(--terra-soft); color:var(--terra); }
.machine-actions { display:flex; gap:8px; margin-top:8px; }
.maintenance-details { font-size:15px; color:var(--ink-2); }
.maintenance-list { margin-top:12px; }

.client-machines { margin-top:12px; padding-top:10px; border-top:1px dashed var(--line-strong); }
.client-machines .machines-list { display:grid; gap:8px; }
.machine-item { background:var(--paper-2); border:1px solid var(--line); border-left:5px solid var(--line-strong); border-radius:var(--radius-sm); padding:10px 12px; }
.machine-item-content { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.machine-item strong { font-family:var(--font-display); font-size:20px; font-weight:600; }
.machine-info-left small, .machine-info-right small { font-size:15px; color:var(--ink-2); }
.machine-info-right { text-align:right; white-space:nowrap; }
.socks-stock { color:var(--ink-2); }
.machine-item:has(.machine-not-working) { border-left-color:var(--terra); background:var(--terra-soft); }
.machine-not-working { margin-top:6px; font-size:15px; font-weight:700; color:var(--terra); }
.machines-item:has(.maintenance-inactive) { border-left-color:var(--line-strong); }

/* xips tocables: telèfon i ubicació */
.phone-link, .clickable-phone, .prospect-tel a, .maps-link, .clickable-location { display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 14px; background:var(--teal-soft); color:var(--teal); border-radius:999px; font-weight:700; font-size:16px; text-decoration:none; margin:2px 0; }
@media (hover:hover) { .phone-link:hover, .clickable-phone:hover, .prospect-tel a:hover, .maps-link:hover, .clickable-location:hover { text-decoration:none; filter:brightness(.95); } }
.visit-client-info small { display:inline-flex; align-items:center; }
.visit-client-info small.client-address { display:flex; }

/* visites */
.visits-container { display:block; }
.visit-item { margin:0; }
.visit-visible { cursor:pointer; }
.visit-completed .visit-visible { border-left-color:var(--green); }
.visit-item.error .visit-visible { border-left-color:var(--terra); }
@media (hover:hover) { .visit-visible:hover { background:var(--paper-2); } }
.visit-header { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin-bottom:8px; }
.visit-machine { font-family:var(--font-display); font-size:22px; font-weight:600; color:var(--ink); margin-right:auto; }
.visit-status { font-size:16px; }
.visit-date { font-size:15px; color:var(--ink-3); }
.visit-earnings, .expense-amount, .earnings-row span { font-family:var(--font-display); font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap; }
.visit-earnings.zero-earnings { color:var(--ink-3); }
.visit-client-info { display:flex; flex-direction:column; align-items:flex-start; gap:2px; font-size:15px; color:var(--ink-2); margin-bottom:8px; }
.visit-client-info br, .visit-details br { display:none; }
.visit-client-info .client-name { font-size:20px; font-family:var(--font-display); font-weight:600; color:var(--ink); }
.visit-details { display:flex; flex-direction:column; gap:3px; font-size:15px; color:var(--ink-2); }
.visit-details small, .visit-client-info small { font-size:15px; }
.visit-form { background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin:-4px 0 14px; }
.payment-section { background:transparent; margin:12px 0; }
.payment-section h5 { margin:0 0 8px; }
.payment-summary, .earnings-calculation { background:var(--paper-2); border-radius:var(--radius-sm); padding:12px; margin:8px 0; }
.visit-form .payment-summary, .visit-form .earnings-calculation { background:var(--card); border:1px solid var(--line); }
.payment-summary small { display:flex; justify-content:space-between; font-size:16px; color:var(--ink-2); padding:2px 0; }
.payment-summary small span { font-family:var(--font-display); font-size:20px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.payment-summary br, .calculation-info br { display:none; }
.earnings-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:4px 0; }
.earnings-row label { margin:0; font-size:15px; color:var(--ink-2); }
.calculation-info { margin-top:8px; padding-top:8px; border-top:1px dashed var(--line-strong); }
.calculation-info small { display:block; font-size:13px; color:var(--ink-3); }
.maintenance-checklist { margin:14px 0; display:grid; gap:12px; }
.maintenance-checkbox-item { padding:0; }
.maintenance-type-name { font-weight:700; font-size:15px; color:var(--ink); margin-bottom:6px; }
.maintenance-options { display:flex; flex-wrap:wrap; gap:8px; }
.maintenance-option { display:inline-flex; align-items:center; justify-content:center; flex:1 1 90px; min-height:44px; padding:0 14px; margin:0; background:var(--card); border:1.5px solid var(--line-strong); border-radius:999px; font-size:15px; font-weight:700; color:var(--ink-2); cursor:pointer; }
.maintenance-option input { position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
.maintenance-option:has(:checked), .maintenance-option.selected { background:var(--yellow-soft); border-color:var(--yellow); color:var(--ink); }
.maintenance-option[data-value=ok]:has(:checked) { background:var(--green-soft); border-color:var(--green); color:var(--green); }
.maintenance-option[data-value=not_ok]:has(:checked) { background:var(--terra-soft); border-color:var(--terra); color:var(--terra); }
.maintenance-option:has(:focus-visible) { box-shadow:0 0 0 3px var(--yellow-soft); }

/* despeses */
.expenses-container { margin-top:12px; }
.expense-item.investment { border-left-color:var(--teal); }
.expense-item.personal { border-left-color:var(--amber); }
.expense-item.operating { border-left-color:var(--line-strong); }
.expense-item { cursor:pointer; }
.expense-header { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:6px; }
.expense-date { font-size:15px; color:var(--ink-3); font-weight:700; }
.expense-details { display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.expense-description { font-size:16px; color:var(--ink); margin:0; }
.expense-supplier, .expense-invoice { font-size:15px; color:var(--ink-2); }
.expense-invoice-photo { display:block; width:100%; max-height:60vh; object-fit:contain; border-radius:var(--radius-sm); background:var(--paper-2); margin-top:8px; }
.expense-total-green { color:var(--ink); font-family:var(--font-display); font-size:22px; font-weight:700; }

/* ---------- prospección ---------- */
.prospect-stat-cards { display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; padding:2px 2px 10px; margin:0 -2px 6px; }
.prospect-stat { flex:none; min-width:120px; scroll-snap-align:start; background:var(--paper-2); border:1px solid var(--line); border-top:4px solid var(--line-strong); border-radius:var(--radius-sm); padding:10px 12px; }
.prospect-stat-n { font-family:var(--font-display); font-size:30px; font-weight:700; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.prospect-stat-l { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); margin-top:4px; font-weight:700; }
.prospect-stat.pill-total { border-top-color:var(--ink); }
.prospect-stat.pill-proc { border-top-color:var(--amber); }
.prospect-stat.pill-cont { border-top-color:var(--teal); }
.prospect-stat.pill-conf { border-top-color:var(--green); }
.prospect-stat.pill-desc { border-top-color:var(--terra); }
@media (min-width:768px) { .prospect-stat-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); overflow:visible; } }
.prospect-next { background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px; margin:6px 0 14px; }
.prospect-next h4 { margin:0 0 6px; font-size:18px; }
.prospect-next ul { margin:0; padding-left:18px; font-size:15px; color:var(--ink-2); }
.prospect-next li { margin-bottom:4px; }
.prospect-empty { color:var(--ink-3); font-size:15px; margin:0; }
.prospect-filters { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0 10px; }
.prospect-filters select { margin:0; }
.prospect-filters select#prospectFilterInteres { grid-column:1 / -1; }
@media (min-width:768px) { .prospect-filters { grid-template-columns:repeat(3,1fr); } .prospect-filters select#prospectFilterInteres { grid-column:auto; } }
.prospect-card { border-left-color:var(--line-strong); }
.prospect-card:has(.prospect-pill-estado.pill-proc) { border-left-color:var(--amber); }
.prospect-card:has(.prospect-pill-estado.pill-cont) { border-left-color:var(--teal); }
.prospect-card:has(.prospect-pill-estado.pill-conf) { border-left-color:var(--green); }
.prospect-card:has(.prospect-pill-estado.pill-desc) { border-left-color:var(--terra); }
.prospect-name { font-family:var(--font-display); font-size:22px; font-weight:600; color:var(--ink); }
.prospect-loc, .prospect-meta { font-size:15px; color:var(--ink-2); margin-bottom:4px; }
.prospect-tel { margin:4px 0; }
.prospect-pills { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin-top:8px; }
.pill { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:13px; font-weight:700; background:var(--paper-2); color:var(--ink-2); }
.pill::before { content:""; width:8px; height:8px; border-radius:50%; background:currentColor; }
.pill.pill-proc { background:var(--amber-soft); color:var(--amber); }
.pill.pill-cont { background:var(--teal-soft); color:var(--teal); }
.pill.pill-conf { background:var(--green-soft); color:var(--green); }
.pill.pill-desc { background:var(--terra-soft); color:var(--terra); }
.pill.pill-int-alto { background:var(--green-soft); color:var(--green); }
.pill.pill-int-medio { background:var(--amber-soft); color:var(--amber); }
.pill.pill-int-bajo { background:var(--paper-2); color:var(--ink-2); }
.prospect-next-date { font-size:15px; color:var(--amber); font-weight:700; }
.prospect-client-tag { display:inline-flex; padding:3px 10px; border-radius:999px; font-size:13px; font-weight:700; background:var(--teal-soft); color:var(--teal); }
.prospect-client-slot:empty { display:none; }
.prospect-edit { margin-top:10px; border-top:1px solid var(--line); padding-top:4px; }
.prospect-edit summary { list-style:none; display:flex; align-items:center; justify-content:space-between; min-height:44px; font-weight:700; color:var(--ink); cursor:pointer; }
.prospect-edit summary::-webkit-details-marker { display:none; }
.prospect-edit summary::after { content:""; width:14px; height:14px; background:var(--chev) center/contain no-repeat; transition:transform .15s; }
.prospect-edit[open] summary::after { transform:rotate(180deg); }
.prospect-edit .form-group { margin-bottom:12px; }
.prospect-actions { display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.prospect-actions button { width:100%; }
@media (min-width:768px) { .prospect-actions { flex-direction:row; } .prospect-actions button { width:auto; } }
.prospect-msg { font-size:15px; color:var(--green); min-height:1.2em; margin-top:8px; font-weight:700; }
.prospect-msg-error { color:var(--terra); }

/* ---------- modals ---------- */
.modal-overlay, .modal { position:fixed; inset:0; background:rgba(10,16,28,.55); display:flex; align-items:center; justify-content:center; padding:16px; z-index:10000; }
.modal-content, .client-popup, .visit-popup { background:var(--card); color:var(--ink); border-radius:var(--radius); padding:16px 18px; width:100%; max-width:480px; max-height:90vh; overflow-y:auto; box-shadow:0 12px 40px rgba(0,0,0,.3); animation:fadeUp .18s ease; }
.modal-content h3 { margin-bottom:12px; }
.modal-info-box { background:var(--paper-2); border-radius:var(--radius-sm); padding:12px; font-size:15px; margin-bottom:14px; color:var(--ink-2); }
.modal-buttons { display:flex; flex-direction:column-reverse; gap:10px; margin-top:16px; }
.modal-btn { width:100%; }
@media (min-width:768px) { .modal-buttons { flex-direction:row; justify-content:flex-end; } .modal-btn { width:auto; } }
.leaflet-popup-content-wrapper { background:var(--card); color:var(--ink); border-radius:var(--radius); }
.leaflet-popup-tip { background:var(--card); }
.leaflet-popup-content { font:15px/1.4 var(--font-body); margin:12px 14px; }
.leaflet-popup-content h3, .leaflet-popup-content h4 { font-size:20px; margin-bottom:6px; }
.leaflet-container a { color:var(--teal); }

/* ---------- estats ---------- */
.loading, .loading-message { display:flex; align-items:center; gap:10px; color:var(--ink-3); font-size:15px; padding:8px 0; }
.loading::before, .loading-message::before { content:""; width:18px; height:18px; border-radius:50%; border:3px solid var(--yellow-soft); border-top-color:var(--yellow); animation:spin .8s linear infinite; flex:none; }
@keyframes spin { to { transform:rotate(360deg); } }
.error-message, .error { color:var(--terra); font-weight:700; }
.error-message { background:var(--terra-soft); padding:10px 12px; border-radius:var(--radius-sm); }
#connectionStatus { font-size:15px; font-weight:700; background:var(--terra); color:#fff; }
#connectionStatus.status-syncing { background:var(--green); }

/* ---------- alertes flotants (ui.js) ---------- */
.app-alert { position:fixed; top:12px; left:12px; right:12px; z-index:10000; background:var(--card); color:var(--ink); border:1px solid var(--line); border-left:5px solid var(--terra); border-radius:var(--radius); padding:14px 16px; font-size:16px; font-weight:700; box-shadow:0 8px 28px rgba(0,0,0,.22); }
@media (min-width:768px) { .app-alert { left:auto; right:16px; top:16px; max-width:380px; } }

@keyframes slideIn { from { transform:translateX(100%); opacity:0; } to { transform:none; opacity:1; } }
@keyframes slideOut { from { transform:none; opacity:1; } to { transform:translateX(100%); opacity:0; } }
@media (prefers-reduced-motion: reduce) { .tabcontent, .sub-tabcontent, .modal-content, .loading::before, .loading-message::before, .app-alert, button { animation:none; transition:none; } }
@media (prefers-color-scheme: dark) { .btn-warning, #closeRouteBtn { color:#1F0A03; } }

/* ===== Modo demo ===== */
body.demo-on { padding-top: clamp(76px, 4vw + 60px, 92px); }
.demo-bar { position:fixed; top:0; left:0; right:0; z-index:1000; height:60px; background:#1a1206; border-bottom:2px solid var(--amber); box-shadow:0 6px 18px rgba(0,0,0,.25); overflow:hidden; }
.demo-bar[hidden] { display:none; }
.demo-bar-stripes { position:absolute; inset:0; background:repeating-linear-gradient(45deg, var(--amber) 0 18px, transparent 18px 36px); opacity:.14; animation:demo-slide 1.5s linear infinite; }
@keyframes demo-slide { to { background-position:36px 0; } }
.demo-bar-inner { display:flex; align-items:center; gap:16px; padding:0 16px; height:100%; position:relative; }
.demo-bar-tag { font:800 16px var(--font-display); letter-spacing:.2em; color:var(--amber); text-transform:uppercase; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.demo-dot { width:11px; height:11px; border-radius:50%; background:var(--amber); animation:demo-pulse 1.3s ease-in-out infinite; }
@keyframes demo-pulse { 0% { box-shadow:0 0 0 0 rgba(255,176,32,.7); } 70% { box-shadow:0 0 0 13px rgba(255,176,32,0); } 100% { box-shadow:0 0 0 0 rgba(255,176,32,0); } }
.demo-bar-sub { font-size:12.5px; color:#c9a978; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.demo-bar-exit { margin-left:auto; background:var(--amber); color:#1a1206; border:0; border-radius:9px; font:700 13px var(--font-body); padding:10px 20px; min-height:40px; cursor:pointer; white-space:nowrap; transition:filter .15s, transform .15s; }
.demo-bar-exit:hover { filter:brightness(1.08); transform:translateY(-1px); }
.demo-bar-exit:disabled { opacity:.6; cursor:default; }
@media (max-width:620px) { .demo-bar-sub { display:none; } .demo-bar-inner { gap:10px; } .demo-bar-exit { padding:10px 14px; } }
@media (prefers-reduced-motion: reduce) { .demo-bar-stripes, .demo-dot { animation:none; } .demo-bar-exit { transition:none; } }

/* OCR de facturas */
.ocr-box { background: var(--paper-2); border: 2px dashed var(--line-strong); border-radius: var(--radius); padding: 12px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px; }
.ocr-box #ocrTakePhotoBtn { width: 100%; min-height: var(--tap); font-size: 17px; }
.ocr-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
#ocrPreview { width: 100%; max-height: 180px; object-fit: contain; background: var(--card); border-radius: var(--radius-sm); }
.ocr-filename { font-size: 14px; color: var(--ink-2); }
.ocr-status { font-size: 14px; color: var(--ink-2); min-height: 0; }
.ocr-spinner { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; border: 2px solid var(--teal-soft); border-top-color: var(--teal); border-radius: 50%; animation: ocr-spin .8s linear infinite; }
@keyframes ocr-spin { to { transform: rotate(360deg); } }
.ocr-filled { background: var(--yellow-soft) !important; }

/* ===== Prospección · escritorio (≥1024px): tabla densa + panel de detalle ===== */
.prospect-table-wrap, .prospect-count, .prospect-panel { display:none; }
.prospect-toolbar { display:block; }
@media (min-width:1024px) {
  .prospect-desktop { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:16px; align-items:start; }
  .prospect-main { min-width:0; }
  .prospects-list { display:none; }
  .prospect-toolbar { display:flex; gap:10px; align-items:center; margin:12px 0 10px; }
  .prospect-toolbar .prospect-filters { display:flex; gap:10px; margin:0; }
  .prospect-toolbar .prospect-filters select { width:auto; min-width:150px; }
  .prospect-toolbar .search-container { flex:1; margin:0; }
  .prospect-toolbar .search-container input { margin:0; }
  .prospect-count { display:block; font-size:14px; color:var(--ink-2); font-weight:700; margin:0 0 6px; }
  .prospect-table-wrap { display:block; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:auto; }
  .prospect-table { width:100%; border-collapse:collapse; font-size:15px; font-variant-numeric:tabular-nums; color:var(--ink); outline:none; }
  .prospect-table:focus-visible { box-shadow:inset 0 0 0 2px var(--teal); }
  .prospect-table th { position:sticky; top:0; z-index:1; background:var(--paper-2); text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); font-weight:700; padding:10px 10px; cursor:pointer; user-select:none; white-space:nowrap; border-bottom:1px solid var(--line-strong); }
  .prospect-table th:hover { color:var(--ink); }
  .prospect-table .pt-arrow { margin-left:4px; color:var(--ink); }
  .prospect-table td { height:44px; padding:4px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
  .prospect-table tbody tr { cursor:pointer; }
  .prospect-table tbody tr:nth-child(even) { background:color-mix(in srgb, var(--paper-2) 50%, transparent); }
  .prospect-table tbody tr:hover { background:color-mix(in srgb, var(--yellow-soft) 45%, transparent); }
  .prospect-table tbody tr.is-cursor { outline:2px solid var(--teal); outline-offset:-2px; }
  .prospect-table tbody tr.is-sel { background:var(--yellow-soft); box-shadow:inset 4px 0 0 var(--yellow); }
  .prospect-table .pt-main { min-width:180px; }
  .prospect-table .pt-name { display:block; font-weight:700; line-height:1.2; }
  .prospect-table .pt-loc { display:block; font-size:13px; color:var(--ink-3); line-height:1.2; }
  .prospect-table .pt-tel { color:var(--ink-2); text-decoration:none; white-space:nowrap; }
  .prospect-table .pt-tel:hover { color:var(--teal); text-decoration:underline; }
  .prospect-table .pt-num { text-align:right; }
  .prospect-table .pt-none { color:var(--ink-3); }
  .prospect-table .pt-acc { display:block; line-height:1.2; max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .prospect-table .pt-date { display:block; font-size:13px; color:var(--ink-3); }
  .prospect-table .pt-next.is-due .pt-acc, .prospect-table .pt-next.is-due .pt-date { color:var(--amber); font-weight:700; }
  .prospect-table .prospect-empty-cell { text-align:center; color:var(--ink-3); height:80px; }
  .prospect-panel { display:block; position:sticky; top:16px; max-height:calc(100vh - 32px); overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); }
  .prospect-panel #prospectFormContainer { margin:0; }
  .prospect-panel #prospectForm { display:block; }
  .prospect-panel-empty { color:var(--ink-3); font-size:15px; margin:24px 0; text-align:center; }
  .prospect-detail .prospect-name { font-size:22px; margin-bottom:4px; }
  .prospect-detail .prospect-pills { margin:8px 0 12px; }
  .prospect-follow { border-top:1px solid var(--line); padding-top:12px; }
  .prospect-follow .form-group { margin-bottom:12px; }
  .prospect-follow .prospect-actions { flex-direction:row; flex-wrap:wrap; }
  .prospect-follow .prospect-actions button { width:auto; }
}
@media (min-width:1024px) {
  .container:has(#prospectsTab.tab-active), .container:has(#prospectsTab.active) { max-width:1560px; }
  .prospect-table .pill { white-space:nowrap; }
  .prospect-table th, .prospect-table td { padding-left:8px; padding-right:8px; }
}