/* ============ AC Service Center — Design System ============ */
:root {
  --primary: #0e7490;
  --primary-dark: #155e75;
  --primary-light: #e0f2fe;
  --accent: #06b6d4;
  --bg: #f1f5f9;
  --surface: #ffffff;
  --text: #0f172a;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --success: #16a34a;
  --success-bg: #dcfce7;
  --warning: #d97706;
  --warning-bg: #fef3c7;
  --danger: #dc2626;
  --danger-bg: #fee2e2;
  --info: #2563eb;
  --info-bg: #dbeafe;
  --vip: #b45309;
  --vip-bg: #fef3c7;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 4px 14px rgba(15, 23, 42, .06);
  --shadow-lg: 0 10px 40px rgba(15, 23, 42, .18);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  min-height: 100%;
}

/* ============ Layout ============ */
.app {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 240px;
  background: linear-gradient(180deg, #0c4a6e 0%, #155e75 100%);
  color: #e0f2fe;
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: fixed;
  top: 0; bottom: 0; left: 0;
  z-index: 50;
  transition: transform .25s ease;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 20px;
}

.brand-logo {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, #06b6d4, #0ea5e9);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.brand h1 { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.2; }
.brand span { font-size: 11px; color: #7dd3fc; font-weight: 500; }

.nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: none;
  background: transparent;
  color: #bae6fd;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  transition: background .15s, color .15s;
  width: 100%;
}
.nav-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.nav-btn.active { background: rgba(6,182,212,.25); color: #fff; font-weight: 600; }
.nav-btn .icon { font-size: 17px; width: 22px; text-align: center; }

.sidebar-footer { margin-top: auto; font-size: 11px; color: #7dd3fc; padding: 10px; }

.main {
  flex: 1;
  margin-left: 240px;
  padding: 24px clamp(16px, 3vw, 36px) 60px;
  max-width: 1400px;
  width: 100%;
}

/* Mobile topbar */
.topbar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 40;
  background: #0c4a6e;
  color: #fff;
  padding: 12px 16px;
  align-items: center;
  gap: 12px;
}
.topbar button {
  background: rgba(255,255,255,.15);
  border: none;
  color: #fff;
  font-size: 20px;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.topbar h2 { font-size: 16px; }

.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.5);
  z-index: 45;
}
.overlay.show { display: block; }

@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; padding: 16px 14px 60px; }
  .topbar { display: flex; }
}

/* ============ Views ============ */
.view { display: none; animation: fadeIn .25s ease; }
.view.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.view-header h2 { font-size: 22px; font-weight: 700; }
.view-header p { color: var(--text-muted); font-size: 13px; margin-top: 3px; }

/* Dashboard scope subtitle — indicates whether stats are global or personal. */
.dashboard-scope {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* ============ Admin-only UI ============ */
/* Elements tagged .admin-only-col are hidden for non-admin users. The
   <body> receives a .role-admin / .role-user class in auth.js showApp(),
   so this single rule controls visibility of admin-only columns and
   filters (e.g. the "Encargado" column + creator filter on Service Orders)
   without per-view JS checks. For admins the elements are always visible. */
body.role-user .admin-only-col { display: none !important; }
/* Keep the Encargado column from collapsing the table layout when visible. */
.admin-only-col { white-space: nowrap; }

/* ============ Cards ============ */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 18px;
}
.card h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card h3 .icon { font-size: 18px; }

/* Stats */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.stat {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  border-left: 4px solid var(--primary);
}
.stat.s-warning { border-color: var(--warning); }
.stat.s-success { border-color: var(--success); }
.stat.s-danger { border-color: var(--danger); }
.stat.s-anticipo { border-color: #4338ca; }
.stat .label { font-size: 12px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.stat .value { font-size: 26px; font-weight: 800; margin-top: 4px; }

/* ============ Forms ============ */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 12.5px; font-weight: 600; color: #334155; }
.field label .req { color: var(--danger); }
.field input, .field select, .field textarea {
  font-family: var(--font);
  font-size: 14px;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(6,182,212,.15);
}
.field input.invalid, .field select.invalid { border-color: var(--danger); background: #fff7f7; }
.field .err-msg { font-size: 11.5px; color: var(--danger); display: none; }
.field input.invalid ~ .err-msg, .field select.invalid ~ .err-msg { display: block; }
.field .field-hint { font-size: 11px; color: var(--text-muted); }
.form-group-title {
  grid-column: 1 / -1;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  margin-top: 6px;
  padding-bottom: 4px;
  border-bottom: 1.5px solid var(--border);
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--vip-bg);
  border: 1.5px solid #fcd34d;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: var(--vip);
  user-select: none;
}
.checkbox-field input { width: 18px; height: 18px; accent-color: var(--vip); cursor: pointer; }

.credit-banner {
  display: none;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 16px;
  background: linear-gradient(90deg, #fef3c7, #fef9c3);
  border: 1.5px solid #f59e0b;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: #92400e;
}
.credit-banner.show { display: flex; flex-wrap: wrap; }
.credit-banner input { width: 18px; height: 18px; accent-color: var(--vip); }

/* Credit term dropdown */
.credit-term-group {
  margin-top: 8px;
  padding: 10px 14px;
  background: linear-gradient(90deg, #fffbeb, #fef9c3);
  border: 1.5px solid #fbbf24;
  border-radius: var(--radius-sm);
}
.credit-term-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #92400e;
  margin-bottom: 6px;
}
.credit-term-select {
  font-family: var(--font);
  font-size: 14px;
  padding: 8px 12px;
  border: 1.5px solid #fcd34d;
  border-radius: var(--radius-sm);
  background: #fff;
  color: #92400e;
  width: 100%;
  max-width: 220px;
  cursor: pointer;
}
.credit-term-select:focus {
  outline: none;
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245,158,11,.15);
}

/* Credit info in totals panel */
.credit-info {
  margin-top: 10px;
  padding: 10px 14px;
  background: linear-gradient(90deg, #fef3c7, #fef9c3);
  border: 1.5px solid #f59e0b;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: #92400e;
}
.credit-info.overdue {
  background: linear-gradient(90deg, #fee2e2, #fecaca);
  border-color: #f87171;
  color: #dc2626;
}
.credit-info p { margin: 2px 0; font-weight: 500; }
.credit-info p b { font-weight: 700; }

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: filter .15s, background .15s, transform .05s;
  white-space: nowrap;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--primary-dark); }
.btn-secondary { background: #fff; color: var(--text); border-color: var(--border); }
.btn-secondary:hover:not(:disabled) { background: #f8fafc; border-color: #cbd5e1; }
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover:not(:disabled) { filter: brightness(1.08); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover:not(:disabled) { filter: brightness(1.08); }
.btn-warning { background: var(--warning); color: #fff; }
.btn-ghost-danger { background: #fff; color: var(--danger); border-color: #fca5a5; }
.btn-ghost-danger:hover:not(:disabled) { background: var(--danger-bg); }
/* NEW: Remisión action buttons (Imprimir Remisión / PDF Remisión / Imagen Remisión).
   Grouped visually with an outline-teal style to distinguish the alternative
   document flow from the regular export buttons. */
.btn-remision { background: #fff; color: #0e7490; border-color: #67e8f9; }
.btn-remision:hover:not(:disabled) { background: #ecfeff; border-color: #22d3ee; }
.btn-sm { padding: 6px 11px; font-size: 12.5px; }
.btn-icon { padding: 6px 9px; font-size: 14px; }

.actions-bar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
}

/* ============ Tables ============ */
.table-wrap { overflow-x: auto; }
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
table.data th {
  text-align: left;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  font-weight: 700;
  padding: 10px 12px;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
table.data td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: #f8fafc; }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }
table.data th.num { text-align: right; }

/* Items table inputs */
table.data input, table.data select {
  font-family: var(--font);
  font-size: 13.5px;
  padding: 7px 9px;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  width: 100%;
  min-width: 70px;
}
table.data input:focus, table.data select:focus {
  outline: none;
  border-color: var(--accent);
}
table.data input.qty { max-width: 80px; text-align: center; }
table.data input.price { max-width: 110px; text-align: right; }

/* ============ Badges ============ */
.badge {
  display: inline-block;  text-align: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .3px;
  white-space: nowrap;
}
.badge-pending { background: var(--warning-bg); color: var(--warning); }
.badge-authorized { background: var(--info-bg); color: var(--info); }
.badge-cancelled { background: var(--danger-bg); color: var(--danger); }
.badge-closed { background: var(--success-bg); color: var(--success); }
.badge-declined { background: #f3e8ff; color: #7c3aed; }   /* NEW: Declinada status badge (purple) */
.badge-paid { background: #16a34a; color: #e2e8f0;}
.badge-payment-pending { background: #ffac00; color: #ffffff; }
.payment-cell {
    text-align: center;
}
.badge-anticipo { background: #e0e7ff; color: #4338ca; }
.badge-vip { background: var(--vip-bg); color: var(--vip); }
.badge-cat { background: var(--primary-light); color: var(--primary-dark); }
.badge-credit { background: #fef3c7; color: #92400e; border: 1px solid #f59e0b; }
.badge-credit-overdue { background: #fee2e2; color: #dc2626; border: 1px solid #f87171;
  animation: pulse-overdue 1.5s ease-in-out infinite; }
@keyframes pulse-overdue { 0%, 100% { opacity: 1; } 50% { opacity: .7; } }
.badge-moral { background: #ede9fe; color: #6d28d9; border: 1px solid #a78bfa; }
.badge-fisica { background: #e0f2fe; color: #0369a1; border: 1px solid #7dd3fc; }

/* IVA (tax) badge — shown alongside the total amount in the orders list
   for rows where IVA (16%) is enabled. Uses the info/teal palette to stay
   consistent with the existing badge design system. */
.badge-iva { align-items: end; padding-top: 0; padding-right: 0px; color: #ff00bb; font-size: 10px}
.badge-advancedate { display: inline-block; text-align: center; font-weight: bold; align-items: end;
  padding-top: 0; color: #5e46cd; font-size: 10px}
.badge-paymentdate { display: inline-block; text-align: center; font-weight: bold; align-items: end;
  padding-top: 0; color: #16a34a; font-size: 10px}
/* Wrapper that stacks the total amount and IVA badge neatly inside a
   right-aligned numeric table cell. */

.total-cell { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; }


/* ============ Wizard ============ */
.wizard-steps {
  display: flex;
  gap: 0;
  margin-bottom: 22px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.wstep {
  flex: 1;
  padding: 14px 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 3px solid transparent;
  position: relative;
}
.wstep .num {
  display: inline-flex;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #e2e8f0;
  color: var(--text-muted);
  align-items: center; justify-content: center;
  font-size: 12px;
  margin-right: 7px;
}
.wstep.active { color: var(--primary); border-bottom-color: var(--primary); }
.wstep.active .num { background: var(--primary); color: #fff; }
.wstep.done { color: var(--success); }
.wstep.done .num { background: var(--success); color: #fff; }

.wizard-pane { display: none; }
.wizard-pane.active { display: block; }

/* ============ Mode Toggle (Vehicle / Location) ============ */
.mode-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.mode-toggle-label {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}
.mode-toggle-group {
  display: flex;
  gap: 6px;
  background: #f1f5f9;
  border-radius: 10px;
  padding: 4px;
}
.mode-btn {
  padding: 8px 18px;
  border: none;
  border-radius: 7px;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: all .18s ease;
}
.mode-btn:hover { color: #334155; }
.mode-btn.active {
  background: #fff;
  color: var(--primary);
  box-shadow: 0 1px 4px rgba(15,23,42,.12);
}
.wizard-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}

.select-existing {
  margin-bottom: 14px;
  padding: 12px 14px;
  background: var(--primary-light);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13.5px;
}
.select-existing select { flex: 1; min-width: 200px; padding: 9px 11px; border: 1.5px solid var(--border); border-radius: 7px; font-family: var(--font); font-size: 13.5px; }

/* ============================================================
   CustomerSearch — searchable typeahead for "Cliente Registrado?"
   ------------------------------------------------------------
   Reuses the .combo-input / .combo-panel / .combo-option styles
   already defined above; these rules add the search wrapper, the
   clear (✕) button, the two-line result rows, and hide the
   legacy <select> that now acts only as a value bridge.
   ============================================================ */
.cust-search { position: relative; flex: 1; min-width: 220px; }

/* The visible search input reuses .combo-input but needs room for
   the clear button on the right instead of a caret. */
.cust-search-input { padding-right: 34px; }

/* Clear (✕) button — sits on the right edge of the input. */
.cust-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-muted);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: none;            /* shown only when there is text / a selection */
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  transition: background .12s, color .12s;
}
.cust-search-clear:hover {
  background: #fee2e2;
  color: var(--danger);
}

/* Hidden bridge <select> — kept in the DOM so existing $().value
   reads and the change-handler logic keep working, but never shown. */
.cust-search-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Two-line result rows inside the customer dropdown. */
.cust-search .combo-option .combo-opt-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}
.cust-srch-name {
  font-weight: 600;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cust-srch-sub {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cust-srch-vip { color: #f59e0b; }

/* When the search input is focused, lift the panel above siblings. */
.cust-search .combo-panel { z-index: 1001; }

/* Mobile: larger touch targets, same as the combo block. */
@media (max-width: 640px) {
  .cust-search { min-width: 100%; }
  .cust-search .combo-option { padding: 11px 10px; }
  .cust-srch-name { font-size: 15px; }
  .cust-srch-sub { font-size: 13px; }
}

/* Review summary */
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.review-box { background: #f8fafc; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; }
.review-box h4 { font-size: 12px; text-transform: uppercase; color: var(--text-muted); letter-spacing: .5px; margin-bottom: 8px; }
.review-box p { font-size: 13.5px; margin: 3px 0; }
.review-box p b { font-weight: 600; }

/* ============ Ticket Editor ============ */
.ticket-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.ticket-title h2 { font-size: 21px; }
.ticket-title .meta { color: var(--text-muted); font-size: 13px; margin-top: 4px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.editor-grid {
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 18px;
  align-items: start;
}
@media (max-width: 1100px) { .editor-grid { grid-template-columns: 1fr; } }

.info-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .info-pair { grid-template-columns: 1fr; } }

.info-list { font-size: 13.5px; line-height: 1.9; }
.info-list b { font-weight: 600; color: #334155; }

/* Add item row */
.add-item-bar {
  display: grid;
  grid-template-columns: 150px 1fr 1fr 90px 110px auto;
  gap: 8px;
  align-items: end;
  margin-bottom: 14px;
  padding: 14px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: var(--radius-sm);
}
@media (max-width: 900px) {
  .add-item-bar { grid-template-columns: 1fr 1fr; }
  .add-item-bar .field:nth-child(2) { grid-column: span 2; }
}

/* Totals panel */
.totals-panel { position: sticky; top: 18px; }
.totals-list { font-size: 14px; }
.totals-list .row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border);
}
.totals-list .row span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.totals-list .grand {
  border-bottom: none;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 2px solid var(--text);
  font-size: 18px;
  font-weight: 800;
}
.totals-list .grand span:last-child { color: var(--primary); }
.totals-list .anticipo { color: #4338ca; }
.totals-list .remaining { color: #dc2626; font-weight: 700; }
.totals-list .subtotal { font-weight: 600; }
.totals-list .iva { color: #0e7490; }
.totals-list .closure-ts { color: #475569; font-size: 13px; }
.totals-list .ts { font-weight: 400; font-size: 12px; color: var(--text-muted); white-space: nowrap; }

.status-controls { display: flex; flex-direction: column; gap: 12px; }

/* IVA (16%) toggle switch — per-ticket setting shown in the "Estado de la
   Orden" card of the ticket editor. */
.iva-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 10px 14px;
  background: #f0fdfa;
  border: 1.5px solid #99f6e4;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: #0e7490;
  font-weight: 600;
}
.switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider {
  position: absolute; cursor: pointer; inset: 0;
  background-color: #cbd5e1;
  transition: .2s;
  border-radius: 999px;
}
.switch-slider::before {
  position: absolute;
  content: "";
  height: 16px; width: 16px;
  left: 3px; bottom: 3px;
  background-color: #fff;
  transition: .2s;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.switch input:checked + .switch-slider { background-color: #0e7490; }
.switch input:checked + .switch-slider::before { transform: translateX(18px); }
.pay-disabled-hint { font-size: 12px; color: var(--text-muted); }

.inspection-note {
  font-size: 12.5px;
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--info-bg);
  color: var(--info);
  margin-bottom: 12px;
}
.inspection-note.zero { background: var(--success-bg); color: var(--success); }

/* ============ Modal ============ */
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.55);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal-backdrop.show { display: flex; }
.modal {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 22px;
  animation: modalIn .2s ease;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.modal h3 { font-size: 17px; margin-bottom: 16px; }
.modal .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* ============ Toast ============ */
.toast-wrap {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast {
  background: #0f172a;
  color: #fff;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: toastIn .25s ease;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 360px;
}
.toast.success { background: #14532d; }
.toast.error { background: #7f1d1d; }
.toast.info { background: #1e3a8a; }
.toast.warning { background: #78350f; }
@keyframes toastIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }

/* Search inputs */
.search-input {
  font-family: var(--font);
  font-size: 14px;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  width: 100%;
  max-width: 340px;
}
.search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(6,182,212,.15); }

/* ============ Parts Filter Toolbar ============ */
/* Layout for the Parts page dual-filter bar: a real-time text search
   input + a searchable category combobox + a clear-filters button.
   The search-input inside no longer needs its own max-width since the
   .parts-filter-field wrapper controls sizing.                       */
.parts-filter-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  margin-bottom: 16px;
}
.parts-filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
/* Text search field grows to fill available width on wide screens. */
.parts-filter-field:has(#partSearch) { flex: 1 1 260px; max-width: 380px; }
/* Category combobox field has a comfortable fixed-ish width. */
.parts-filter-field:has(#partCategoryFilter) { flex: 0 1 260px; }
/* Clear button sits to the right and aligns with the inputs. */
.parts-filter-clear-wrap { flex: 0 0 auto; }

.parts-filter-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: .02em;
}
/* Let the search-input fill its field wrapper instead of capping at 340px. */
.parts-filter-field .search-input { max-width: none; width: 100%; }
/* The combobox input fills its field wrapper. */
.parts-filter-field .combo { width: 100%; }

.parts-filter-clear-btn {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* "Filters active" indicator badge shown when at least one filter is set */
.parts-filter-clear-btn.has-filters {
  border-color: var(--accent);
  color: var(--accent);
}
.parts-filter-clear-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Mobile: stack the filter fields vertically and let them span full width */
@media (max-width: 640px) {
  .parts-filter-toolbar { flex-direction: column; align-items: stretch; }
  .parts-filter-field:has(#partSearch),
  .parts-filter-field:has(#partCategoryFilter),
  .parts-filter-clear-wrap { flex: 1 1 auto; max-width: none; }
  .parts-filter-clear-wrap { align-self: stretch; }
  .parts-filter-clear-btn { justify-content: center; }
}

/* ============ Date Filter ============ */
.date-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  width: 100%;
  margin-top: 4px;
}

.date-filter-presets {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.date-preset-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
}
.date-preset-btn:hover {
  background: var(--primary-light);
  border-color: var(--accent);
}
.date-preset-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14,116,144,.18);
}

.date-filter-range {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.date-range-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.date-range-input {
  font-family: var(--font);
  font-size: 13.5px;
  padding: 7px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
  width: 140px;
}
.date-range-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(6,182,212,.15);
}
.date-range-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .6;
}
.date-range-input:disabled {
  background: #f1f5f9;
  opacity: .6;
  cursor: not-allowed;
}

.date-apply-btn {
  padding: 7px 10px;
}

.date-clear-btn {
  padding: 7px 10px;
}

.date-filter-label {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-top: 2px;
}

.date-range-text {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--primary-dark);
  background: var(--primary-light);
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .date-range-input { width: 120px; }
  .date-preset-btn { padding: 6px 9px; font-size: 11.5px; }
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}
.empty-state .big { font-size: 40px; margin-bottom: 10px; }

/* ============ Printable Ticket Document ============ */
.ticket-doc-wrap {
  position: fixed;
  left: -10000px;
  top: 0;
  z-index: -1;
}
.ticket-doc {
  width: 800px;
  background: #ffffff;
  color: #0f172a;
  font-family: var(--font);
  padding: 20px 12px;
}
/* NEW: Remisión document container — a SEPARATE off-screen element so the
   regular (cotización) document and the remisión document never collide.
   Mirrors .ticket-doc-wrap / .ticket-doc so it renders identically. */
.ticket-doc-remision-wrap {
  position: fixed;
  left: -10000px;
  top: 0;
  z-index: -1;
}
.ticket-doc-remision {
  width: 800px;
  background: #ffffff;
  color: #0f172a;
  font-family: var(--font);
  padding: 20px 24px;
}
/* .td-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 3px solid #0e7490;
  padding-bottom: 18px;
  margin-bottom: 22px;
} */
/* .td-logo { display: flex; align-items: center; gap: 14px; } */
.td-logo-mark {
  width: 58px; height: 58px;
  background: linear-gradient(135deg, #06b6d4, #0e7490);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  color: #fff;
}
/* .td-logo h1 { font-size: 21px; color: #0e7490; } */
.td-logo p { font-size: 11.5px; color: #64748b; margin-top: 2px; }
.td-ticketmeta { text-align: right; font-size: 13px; }
.td-ticketmeta .tno { display:block; padding-right:0px; text-align:right; font-size: 19px; font-weight: 800; color: #0e7490; }
.td-ticketmeta p { margin: 2px 0; color: #334155; }

.td-badges { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }

/* Header right side: ticket meta + optional QR code (top-right corner).
   The QR block is only rendered by buildTicketDoc() when exporting to
   PDF/PNG, so it never appears in the on-screen editor or browser print. */
.td-header-right { display: flex; align-items: flex-end; gap: 16px; padding: 0px 0px; margin-left: auto; margin-right:-10px;}

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

.td-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.td-logo img {
    width: 140px;
    height: 100px;
    object-fit: contain;
}

.td-logo h1 {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
}

.td-header-right {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    flex-shrink: 0;
}

.td-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100px;
}

.td-qr img {
    width: 90px;
    height: 90px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 4px;
    background: #fff;
    display: block;
}

.tno {
    margin-top: 8px;
    width: 100%;
    text-align: center;
}

.tno h3 {
    margin: 0;
    font-size: 13px;
    line-height: 1.2;
}

/* .td-qr { */
  /* display: block; */
  /* flex-direction: column; */
  /* align-items: right;
  flex-shrink: 0;
} */
/* .td-qr img {
  width: 90px;
  height: 90px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 4px 0px;
  background: #fff;
} */
.td-qr span {
  margin-top: 4px;
  font-size: 9px;
  color: #64748b;
  max-width: 90px;
  line-height: 1.2;
}

.td-cols { display: flex; margin-bottom: 22px; }
.td-cols > div {
  flex: 1;
}
.td-cols p {
    text-align: justify;
    text-align-last: left;
}
.td-box {
  flex: 1;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 12.5px;
  line-height: 1.85;
}
.td-box h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: #0e7490;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.td-box b { font-weight: 600; }

/* Checklist block in print/PDF/PNG exports */
.td-checklist {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 6px 6px;
  margin-bottom: 6px;
  font-size: 12.5px;
  width: 100%;
}
.td-checklist h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: #0e7490;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.td-checklist-table {
  width: 100%;
  border-collapse: collapse;
}
.td-checklist-table td {
  padding: 5px 10px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 12px;
}
.td-checklist-table td.ck-label { color: #475569; }
.td-checklist-table td.ck-val { text-align: right; }
.td-checklist-table tr:nth-child(even) td { background: #f8fafc; }

table.td-items { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 18px; }
table.td-items th {
  background: #0e7490;
  color: #fff;
  text-align: left;
  padding: 9px 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
table.td-items td { padding: 9px 12px; border-bottom: 1px solid #e2e8f0; }
table.td-items .num { text-align: right; font-variant-numeric: tabular-nums; }
table.td-items th.num { text-align: right; }
table.td-items tr:nth-child(even) td { background: #f8fafc; }

.td-totals { display: flex; justify-content: flex-end; margin-bottom: 26px; }
.td-totals table { font-size: 13px; border-collapse: collapse; min-width: 280px; }
.td-totals td { padding: 5px 12px; }
.td-totals td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.td-totals .subtotal td { border-top: 1px solid #cbd5e1; padding-top: 8px; font-weight: 700; }
.td-totals .iva td { color: #0e7490; }
.td-totals .grand td {
  border-top: 2px solid #0f172a;
  font-size: 16px;
  font-weight: 800;
  padding-top: 9px;
  color: #0e7490;
}

.td-amount-words{
    font-size: 11.5px;
    color: #334155;
    /* border: 1px solid #e2e8f0; */
    /* border-left: 3px solid #0e7490; */
    /* border-radius: 8px; */
    padding: 9px;
    background: #f8fafc;
    text-align: right;       /* <-- esto lo alinea a la derecha */
}

.td-amount-words strong{
    font-weight: 700;
    color: #0e7490;
}

.td-amount-words span{
    line-height: 1.5;
}

.td-warranty { font-size: 12px; color: #475569; border: 1px dashed #cbd5e1; border-radius: 8px; padding: 12px 14px; margin-bottom: 30px; min-height: 54px; }
.td-warranty h4 { font-size: 11px; text-transform: uppercase; color: #0e7490; margin-bottom: 5px; }

.td-notes { font-size: 12px; color: #475569; border: 1px dashed #cbd5e1; border-radius: 8px; padding: 12px 14px; margin-bottom: 30px; min-height: 54px; }
.td-notes h4 { font-size: 11px; text-transform: uppercase; color: #0e7490; margin-bottom: 5px; }

.td-sign {
    display: flex;
    justify-content: center;
    margin-top: 0;
}

.td-sign .line {
    position: relative;
    width: 260px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
}

.td-sign .line .rule {
    width: 100%;
    border-top: 1.5px solid #0f172a;
    margin: 100px auto 6px;
}

/* Signature image — the agent's handwritten signature embedded as a
   data URI. Positioned above the rule line so the signature "sits"
   on the line. Only the Agente Glacial side gets the image. */
.td-sign .sig-img {
  display: block;
  height: 150px;
  object-fit: contain;
  /* max-width: 400px; */
  /* object-fit:   cover; */
  margin: 0 0 0;
  position: absolute;
  /* bottom: 57px; */
  /* right: 50px; */
  /* padding-right: 60px; */
}
.td-sign .sig-name {
  font-size: 14px;
  font-weight: 600;
  color: #0e7490;
}

.td-footer { margin-top: 28px; text-align: center; font-size: 11px; color: #94a3b8; border-top: 1px solid #e2e8f0; padding-top: 12px; }

.td-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  text-transform: uppercase;
}

/* Print styles */
@media print {

  /* Ocultar la aplicación completa */
  #loginView,
  #appShell,
  .toast-wrap,
  .pdf-sandbox {
      display: none !important;
  }

  /* Ocultar ambos documentos por defecto */
  .ticket-doc-wrap,
  .ticket-doc-remision-wrap {
      display: none !important;
  }

  /* Mostrar únicamente la cotización */
  body:not(.printing-remision) .ticket-doc-wrap {
      display: block !important;
      position: static !important;
  }

  /* Mostrar únicamente la remisión */
  body.printing-remision .ticket-doc-remision-wrap {
      display: block !important;
      position: static !important;
  }

  .ticket-doc,
  .ticket-doc-remision {
      width: 100%;
      box-sizing: border-box;
      padding: 4mm 6mm;
  }

  @page {
      size: A4;
      margin: 4mm;
  }
}

/* ============================================================
   PDF EXPORT - per-page rendering helpers
   (used by App._paginateTicketCanvases / App.exportPDF)
   ============================================================ */
/* Off-screen staging area where each paginated page is rendered to its own
   canvas via html2canvas. Kept off-screen (not display:none) so layout is
   still computed and html2canvas can rasterise it. */
.pdf-sandbox { position: fixed; left: -10000px; top: 0; z-index: -1; }
/* One PDF page. Same box as .ticket-doc (800px wide, 24px side padding, 752px
   content width) so cloned sections render at the exact same heights we
   measured from the source document. Minimal vertical padding to maximise the
   usable content area inside the A4 printable region. */
.td-page { width: 800px; padding: 10px 12px 0; box-sizing: border-box; background: #fff; color: #0f172a; font-family: var(--font); }
/* Slim running header repeated on continuation pages (page 2+): brand + order
   number, so multi-page tickets stay identifiable without reprinting the full
   company header on every page. */
.td-running { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #0e7490; padding-bottom: 8px; margin-bottom: 14px; font-size: 12px; color: #0e7490; font-weight: 600; }
.td-running .brand { font-size: 13px; }
/* Page number shown at the bottom of every PDF page. */
.td-pageno { margin-top: 14px; padding-top: 8px; border-top: 1px solid #e2e8f0; text-align: center; font-size: 10.5px; color: #94a3b8; }


.editor-locked-banner {
  display: flex; align-items: center; gap: 12px;
  margin: 12px 0 0; padding: 12px 16px;
  background: linear-gradient(90deg, #fef3c7 0%, #fde68a 100%);
  border: 1.5px solid #f59e0b; border-radius: var(--radius-sm);
  color: #78350f; font-size: 13.5px; line-height: 1.45;
}
.editor-locked-banner .lock-icon { font-size: 22px; flex-shrink: 0; }
.editor-grid.is-locked .card { box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.editor-grid.is-locked select:disabled,
.editor-grid.is-locked input:disabled,
.editor-grid.is-locked textarea:disabled {
  background: #f1f5f9; color: #475569; cursor: not-allowed; opacity: .85;
}
#btnSave.locked-by-close { opacity: .5; cursor: not-allowed; text-decoration: line-through; }


/* ============ Searchable-Creatable Combo Component ============ */
/* Reusable combo box for Brand/Model/Year/Color vehicle fields.
   Structure:
   <div class="combo">
     <input class="combo-input" />          (visible input w/ inline buttons)
     <div class="combo-panel">              (dropdown, hidden by default)
       <div class="combo-option">...</div>   (clickable options)
     </div>
   </div>
   Each combo keeps a hidden <input type="hidden"> sibling that holds the
   committed value, so existing .value reads in app.js still work.        */
.combo { position: relative; width: 100%; }

.combo-input {
  font-family: var(--font);
  font-size: 14px;
  padding: 10px 34px 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.combo-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(6,182,212,.15);
}
.combo-input.invalid { border-color: var(--danger); background: #fff7f7; }
.combo-input:disabled,
.combo-input.combo-disabled {
  background: #f1f5f9;
  color: var(--text-muted);
  cursor: not-allowed;
}
.combo-caret:disabled { opacity: .4; cursor: not-allowed; }

/* Caret toggle button on the right of the input */
.combo-caret {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-muted);
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1;
}
.combo-caret:hover { color: var(--primary); background: var(--primary-light); }

/* Dropdown panel */
.combo-panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
}
.combo-panel.open { display: block; }

/* Individual option rows */
.combo-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
  transition: background .1s;
}
.combo-option:hover,
.combo-option.active {
  background: var(--primary-light);
}
.combo-option .combo-opt-label { flex: 1; }
.combo-option .combo-opt-check {
  font-size: 12px;
  color: var(--primary);
  opacity: 0;
}
.combo-option.selected .combo-opt-check { opacity: 1; }

/* "Create new" hint shown when typed text doesn't match any option */
.combo-option.combo-create {
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 10px;
  padding-bottom: 10px;
  color: var(--primary);
  font-weight: 600;
  background: #f0fdfa;
}
.combo-option.combo-create:hover { background: #ccfbef; }

/* Color swatch (only used by the Color combo) */
.combo-color-swatch {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 1.5px solid rgba(0,0,0,.15);
  flex-shrink: 0;
}

/* Empty state when no options match */
.combo-empty {
  padding: 12px 10px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

/* Hidden value holder — keeps .value reads working for existing app.js code */
.combo-value { display: none !important; }

/* Mobile: dropdown can grow taller and touch targets larger */
@media (max-width: 640px) {
  .combo-panel { max-height: 200px; }
  .combo-option { padding: 11px 10px; font-size: 15px; }
  .combo-caret { padding: 8px 10px; font-size: 14px; }
}

/* ============================================================
   LOGIN VIEW
   ============================================================ */
.login-view {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0e7490 0%, #155e75 50%, #164e63 100%);
  padding: 20px;
}
.login-card {
  background: #fff;
  border-radius: 16px;
  padding: 40px 36px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  text-align: center;
}
.login-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}
.login-logo img {
  border-radius: 8px;
}
.login-title {
  font-size: 28px;
  font-weight: 800;
  color: #0e7490;
  margin: 0 0 4px 0;
}
.login-subtitle {
  font-size: 14px;
  color: #64748b;
  margin: 0 0 28px 0;
}
.login-error {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
  text-align: center;
}
.login-form {
  text-align: left;
}
.login-field {
  margin-bottom: 16px;
}
.login-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 6px;
}
.login-field input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.login-field input:focus {
  border-color: #0e7490;
}
.login-remember {
  margin-bottom: 20px;
  font-size: 14px;
  color: #475569;
}
.login-remember label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.login-remember input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.login-btn {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
}
.login-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ============================================================
   SIDEBAR USER SECTION + LOGOUT
   ============================================================ */
.sidebar-user {
  margin-top: auto;
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 16px;
}
.sidebar-user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}
.sidebar-user-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.sidebar-user-role {
  font-size: 12px;
  color: #94a3b8;
  text-transform: capitalize;
}
.sidebar-logout {
  width: 100%;
  padding: 8px 12px;
  background: rgba(220,38,38,0.15);
  color: #fca5a5;
  border: 1px solid rgba(220,38,38,0.3);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.sidebar-logout:hover {
  background: rgba(220,38,38,0.3);
  color: #fff;
}

/* Print: hide login view and app shell chrome */
@media print {
  .login-view, .topbar, .sidebar, .overlay { display: none !important; }
}

/* Car Chip Color */
.color-chip {
  display: inline-block;
  width: 30px;
  height: 15px;
  border: 1px solid #64748b;
  border-radius: 3px;
  vertical-align: -2px;
  margin-right: 6px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
}

/* ============ Checklist Form (Technician Role) ============ */
.checklist-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  padding: 4px 2px;
}
.checklist-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  min-height: 42px;
}
.checklist-row:hover { border-color: #cbd5e1; background: #f1f5f9; }
.checklist-label {
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  line-height: 1.3;
  flex: 1;
}
.checklist-yn {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.ck-btn {
  padding: 5px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: all .15s ease;
  min-width: 44px;
}
.ck-btn:hover { border-color: #94a3b8; color: #475569; }
.ck-btn.ck-yes.active {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
.ck-btn.ck-no.active {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}
.ck-select {
  padding: 5px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13px;
  color: #334155;
  background: #fff;
  cursor: pointer;
  min-width: 130px;
}
.ck-select:focus { outline: none; border-color: #0ea5e9; box-shadow: 0 0 0 2px rgba(14,165,233,.15); }

/* Checklist in a wider modal context */
.checklist-modal .modal { max-width: 720px; }
.checklist-modal .checklist-form { grid-template-columns: 1fr; }

/* Wizard checklist pane — full width within the step */
.wpane .checklist-form { grid-template-columns: 1fr 1fr; }

/* ============ User Search Dropdown (Technician / Responsable) ============ */
.user-search {
  position: relative;
  display: inline-block;
  width: 100%;
}
.user-search-input {
  width: 100%;
  padding: 8px 32px 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 14px;
  color: #1e293b;
  background: #fff;
  box-sizing: border-box;
}
.user-search-input:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 2px rgba(14,165,233,.15);
}
.user-search-input:disabled { background: #f1f5f9; color: #94a3b8; cursor: not-allowed; }
.user-search-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15,23,42,.14);
  z-index: 50;
  max-height: 240px;
  overflow-y: auto;
}
.user-search-panel.open { display: block; }
.user-search-option {
  padding: 9px 14px;
  font-size: 13.5px;
  color: #334155;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  gap: 8px;
}
.user-search-option:last-child { border-bottom: none; }
.user-search-option:hover, .user-search-option.active {
  background: #f0f9ff;
  color: #0369a1;
}
.user-search-option .us-name { font-weight: 600; }
.user-search-option .us-email { font-size: 11.5px; color: #94a3b8; }
.user-search-empty {
  padding: 12px 14px;
  font-size: 13px;
  color: #94a3b8;
  text-align: center;
}
.user-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 18px;
  color: #94a3b8;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
  display: none;
}
.user-search-clear.show { display: block; }
.user-search-clear:hover { color: #475569; }

/* ============ Wizard Step Indicators (extended for 4-5 steps) ============ */
.wizard-steps .wstep { flex: 1; }

/* ============ Editor: Technician / Responsable fields ============ */
.ed-tech-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.ed-tech-row .ed-field { flex: 1; }
.ed-tech-row .ed-field label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 4px;
  display: block;
}

.ed-checklist-btn.has-data::after { content: ' ✓'; }

/* Skip-stage notice */
.skip-notice {
  font-size: 12px;
  color: #94a3b8;
  font-style: italic;
  margin: 4px 0 0;
}

#edChecklistBtn .badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 10px;
  background: #2d7ef7;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.checklist-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.checklist-count {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: #eef4ff;
  color: #2d7ef7;
  font-size: 12px;
  font-weight: 700;
}
.checklist-count.low {
  color: #e74c3c;
}

.checklist-count.medium {
  color: #f39c12;
}

.checklist-count.high {
  color: #27ae60;
}

.include-checklist-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 13px;
  color: #475569;
  cursor: pointer;
  user-select: none;
}
.include-checklist-toggle input {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #0e7490;
}

.td-checklist-grid {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  column-gap: 60px;
  row-gap: 4px;
  justify-content: start;
  width: 100%;
  font-size: 12px;
}
.ck-label {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ck-item {
  display: flex;
  align-items: center;
  gap: 4px;
  width: auto;
}
.ck-val {
  margin-left: 4px;
}

/* ============================================================
   Configuración (admin settings panel)
   ============================================================ */

/* Hide admin-only nav buttons for non-admin users */
body.role-user .admin-only { display: none !important; }

/* Settings form layout */
.settings-form {
  max-width: 680px;
  padding: 4px 0;
}

.settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border, #e2e8f0);
}

.settings-item:last-of-type {
  border-bottom: none;
}

.settings-item-info {
  flex: 1;
  min-width: 0;
}

.settings-item-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--text, #1e293b);
  margin-bottom: 4px;
}

.settings-item-desc {
  display: block;
  font-size: 13px;
  color: var(--text-muted, #64748b);
  line-height: 1.5;
}

.settings-item-control {
  flex-shrink: 0;
}

.settings-actions {
  padding-top: 20px;
  display: flex;
  gap: 12px;
}

/* Toggle switch (iOS-style) */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  cursor: pointer;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background-color: #cbd5e1;
  border-radius: 26px;
  transition: background-color 0.2s ease;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.toggle-switch input:checked + .toggle-slider {
  background-color: #0e7490;
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(22px);
}

/* Stock warning badge for insufficient-stock items in the editor table */
.stock-warning-row {
  background-color: rgba(190, 24, 93, 0.08) !important;
}

.stock-warning-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background-color: #be185d;
  border-radius: 10px;
  vertical-align: middle;
  white-space: nowrap;
}

.stock-warning-notice {
  margin: 12px 0;
  padding: 12px 16px;
  background-color: rgba(190, 24, 93, 0.08);
  border: 1px solid rgba(190, 24, 93, 0.25);
  border-radius: 8px;
  font-size: 13px;
  color: #be185d;
  line-height: 1.5;
}

.stock-warning-notice b {
  font-weight: 700;
}