@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Barlow:wght@300;400;500;600&family=Barlow+Condensed:wght@400;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

  :root {
    --bg: #080909;
    --surface: #0f1012;
    --surface2: #171a1d;
    --surface3: #1e2228;
    --border: #252a30;
    --border2: #2e343c;
    --chrome: #c8cdd6;
    --chrome2: #a0a8b4;
    --chrome3: #6b7280;
    --chrome-shine: #e8ecf0;
    --accent: #d4d8de;
    --accent-glow: rgba(212,216,222,0.12);
    --green: #2eb872;
    --red: #e05252;
    --blue: #4a9eff;
    --yellow: #e8a020;
    --orange: #e8a020;
    --text: #dde1e7;
    /* --text-muted subido de #5a6272 (2.85:1, falla WCAG AA) a #818a9b (~4.9:1
       sobre las cards). Auditoría 2026-06-28. */
    --text-muted: #818a9b;
    --text-dim: #3a424f;
    --radius: 6px;
    --radius-lg: 10px;
    --mobile-nav: 64px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --mobile-nav-visible: calc(var(--mobile-nav) + var(--safe-bottom));
    --mobile-nav-bleed: 48px;
  }

  * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color: transparent; }

  body {
    font-family: 'Barlow', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
  }

  body::before {
    content: '';
    position: fixed; inset: 0;
    background:
      radial-gradient(ellipse at 15% 0%, rgba(200,205,214,0.04) 0%, transparent 50%),
      radial-gradient(ellipse at 85% 100%, rgba(200,205,214,0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
  }

  /* ========== LOGIN ========== */
  .login-screen { display: none; position: fixed; inset: 0; background: var(--bg); z-index: 99999; align-items: center; justify-content: center; flex-direction: column; padding: 24px; }
  .login-screen.show { display: flex; }
  .login-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(200,205,214,0.07) 0%, transparent 60%), radial-gradient(ellipse at 50% 100%, rgba(200,205,214,0.03) 0%, transparent 50%); pointer-events: none; }
  .login-bg::after { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(-55deg, transparent, transparent 40px, rgba(200,205,214,0.015) 40px, rgba(200,205,214,0.015) 41px); pointer-events: none; }
  .login-box { background: linear-gradient(145deg, #111316, #0d0f11); border: 1px solid var(--border2); border-top: 1px solid rgba(200,205,214,0.15); border-radius: var(--radius-lg); padding: 44px 40px 40px; width: 100%; max-width: 400px; position: relative; z-index: 1; box-shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(200,205,214,0.05); animation: loginIn 0.5s cubic-bezier(0.34,1.4,0.64,1); }
  @keyframes loginIn { from { opacity:0; transform: translateY(28px) scale(0.96); } to { opacity:1; transform: translateY(0) scale(1); } }
  .login-logo { text-align: center; margin-bottom: 36px; }
  .sc-logo-svg { width: 120px; height: auto; margin: 0 auto 10px; display: block; filter: drop-shadow(0 2px 12px rgba(200,205,214,0.2)); }
  .login-logo-sub { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; color: var(--text-muted); letter-spacing: 4px; text-transform: uppercase; margin-top: 6px; }
  .login-label { font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; display: block; }
  .login-input { width: 100%; background: var(--surface2); border: 1px solid var(--border2); border-radius: var(--radius); color: var(--chrome-shine); padding: 13px 16px; font-family: 'Barlow', sans-serif; font-size: 16px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; letter-spacing: 4px; margin-bottom: 20px; }
  .login-input:focus { border-color: var(--chrome2); box-shadow: 0 0 0 3px rgba(160,168,180,0.1); }
  .login-input.error { border-color: var(--red); animation: shake 0.3s ease; }
  @keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
  .login-btn { width: 100%; background: linear-gradient(135deg, #c8cdd6 0%, #9aa0ac 50%, #c8cdd6 100%); background-size: 200% 100%; color: #0a0b0c; border: none; border-radius: var(--radius); padding: 14px; font-family: 'Rajdhani', sans-serif; font-size: 18px; font-weight: 700; letter-spacing: 3px; cursor: pointer; transition: all 0.3s; text-transform: uppercase; }
  .login-btn:hover { background-position: 100% 0; box-shadow: 0 4px 20px rgba(200,205,214,0.25); transform: translateY(-1px); }
  .login-btn:active { transform: translateY(0); }
  .login-error { color: var(--red); font-size: 12px; text-align: center; margin-top: 12px; min-height: 18px; }
  .login-error.muted { color: var(--text-muted); }
  .login-lockout { background: rgba(224,82,82,0.1); border: 1px solid rgba(224,82,82,0.25); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; text-align: center; }
  #op-login-lockout { display: none; }
  #op-login-lockout.is-visible { display: block; }
  .login-lockout-title { color: var(--red); font-size: 13px; font-weight: 600; margin-bottom: 4px; }
  .login-lockout-timer { color: var(--text-muted); font-size: 12px; font-family: 'JetBrains Mono', monospace; }
  .login-attempts { font-size: 11px; color: var(--text-dim); text-align: center; margin-top: 6px; min-height: 16px; }
  .login-footer { text-align: center; margin-top: 24px; font-size: 10px; color: var(--text-dim); letter-spacing: 1.5px; text-transform: uppercase; }
  #login-screen .login-footer { margin-top: 16px; }
  .session-bar { position: fixed; top: 0; left: 240px; right: 0; height: 3px; z-index: 999; background: transparent; pointer-events: none; }
  .session-bar-fill { width: 100%; height: 100%; appearance: none; -webkit-appearance: none; border: 0; background: transparent; }
  .session-bar-fill::-webkit-progress-bar { background: transparent; }
  .session-bar-fill::-webkit-progress-value { background: linear-gradient(90deg, var(--green), var(--yellow), var(--red)); border-radius: 0 0 2px 0; transition: width 1s linear; }
  .session-bar-fill::-moz-progress-bar { background: linear-gradient(90deg, var(--green), var(--yellow), var(--red)); border-radius: 0 0 2px 0; transition: width 1s linear; }
  @media (max-width: 768px) { .session-bar { left: 0; } }

  /* Secure overlay: blocks ALL interaction until operator authenticated */
  .app-wrapper { display: none; }
  .app-wrapper.show { display: block; }
  /* Provider piece selection in pago modal */
  .prov-piece-list { margin: 8px 0; }
  .prov-piece-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 13px; }
  .prov-piece-item:last-child { border-bottom: none; }
  .prov-piece-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; }
  .prov-piece-item .piece-name { flex: 1; color: var(--text); }
  .prov-piece-item .piece-cost { color: var(--yellow); font-weight: 600; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
  .prov-section-head { padding: 10px 12px; background: var(--surface2); border-radius: var(--radius); margin-bottom: 4px; display: flex; justify-content: space-between; align-items: center; }
  .prov-section-head strong { color: var(--chrome-shine); }
  .pago-totals { background: var(--surface2); border-radius: var(--radius); padding: 12px; margin-top: 12px; }
  .pago-totals div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
  .pago-totals .total-final { font-weight: 700; color: var(--chrome-shine); font-size: 15px; border-top: 1px solid var(--border); padding-top: 8px; margin-top: 4px; }
  .operator-box { background: linear-gradient(145deg, #111316, #0d0f11); border: 1px solid var(--border2); border-top: 1px solid rgba(200,205,214,0.15); border-radius: var(--radius-lg); padding: 36px 32px 32px; width: 100%; max-width: 420px; position: relative; z-index: 1; box-shadow: 0 32px 80px rgba(0,0,0,0.7); animation: loginIn 0.5s cubic-bezier(0.34,1.4,0.64,1); }
  .operator-title { font-family: 'Rajdhani', sans-serif; font-size: 20px; font-weight: 700; color: var(--chrome-shine); text-align: center; letter-spacing: 2px; margin-bottom: 6px; text-transform: uppercase; }
  .operator-sub { font-size: 13px; color: var(--text-muted); text-align: center; margin-bottom: 24px; }
  .operator-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
  .operator-btn { background: var(--surface2); border: 1px solid var(--border2); border-radius: var(--radius); padding: 14px 18px; color: var(--chrome); font-family: 'Barlow', sans-serif; font-size: 15px; font-weight: 500; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 12px; }
  .operator-btn:hover { background: var(--surface3); border-color: var(--chrome3); color: var(--chrome-shine); transform: translateX(4px); }
  .operator-btn .op-icon { font-size: 20px; }
  .operator-btn .op-name { flex: 1; }
  .operator-add { background: none; border: 1px dashed var(--border2); border-radius: var(--radius); padding: 12px 18px; color: var(--text-muted); font-family: 'Barlow', sans-serif; font-size: 13px; cursor: pointer; transition: all 0.2s; text-align: center; width: 100%; }
  .operator-add:hover { border-color: var(--chrome3); color: var(--chrome); }
  .operator-input-row { display: flex; gap: 8px; margin-bottom: 12px; }
  .operator-input-row input { flex: 1; background: var(--surface2); border: 1px solid var(--border2); border-radius: var(--radius); color: var(--chrome-shine); padding: 10px 14px; font-family: 'Barlow', sans-serif; font-size: 14px; outline: none; }
  .operator-input-row input:focus { border-color: var(--chrome2); }
  .operator-input-row button { background: var(--green); color: #fff; border: none; border-radius: var(--radius); padding: 10px 16px; font-weight: 600; cursor: pointer; font-size: 13px; }
  .operator-current { position: fixed; bottom: 12px; right: 16px; z-index: 100; background: rgba(15,16,18,0.85); border: 1px solid var(--border); border-radius: 14px; padding: 4px 10px 4px 8px; font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 5px; cursor: default; backdrop-filter: blur(6px); opacity: 0.7; transition: opacity 0.2s; }
  #operator-badge { display: none; }
  #operator-badge.is-visible { display: flex; }
  .operator-current:hover { opacity: 1; }
  .operator-current .op-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
  @media (max-width: 768px) { .operator-current { bottom: calc(var(--mobile-nav-visible) + 8px); right: 10px; } }

  /* ========== ACTIVITY LOG ========== */
  .activity-item { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); transition: background 0.15s; }
  .activity-item:hover { background: rgba(200,205,214,0.03); }
  .activity-icon { font-size: 18px; flex-shrink: 0; margin-top: 2px; }
  .activity-body { flex: 1; min-width: 0; }
  .activity-text { font-size: 13px; color: var(--text); line-height: 1.5; }
  .activity-text strong { color: var(--chrome-shine); font-weight: 600; }
  .activity-meta { font-size: 11px; color: var(--text-muted); margin-top: 3px; display: flex; gap: 12px; }
  .activity-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
  .activity-filter-btn { background: var(--surface2); border: 1px solid var(--border); border-radius: 16px; padding: 5px 14px; font-size: 12px; color: var(--text-muted); cursor: pointer; transition: all 0.15s; font-family: 'Barlow', sans-serif; }
  .activity-filter-btn:hover, .activity-filter-btn.active { background: rgba(200,205,214,0.1); border-color: var(--chrome3); color: var(--chrome); }

  /* ========== REPARACIONES — PANEL DE FILTROS ========== */
  .repair-filters-bar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px 18px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .repair-filters-bar .search-bar {
    margin: 0;
    width: 100%;
  }
  /* Header con toggle "Filtros" + counter + clear. Siempre visible.
     El panel de filtros se colapsa detrás del toggle para no saturar la UI. */
  .repair-filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .repair-filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 7px 14px;
    color: var(--chrome);
    font-size: 13px;
    font-weight: 600;
    font-family: 'Barlow', sans-serif;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.08s;
    user-select: none;
  }
  .repair-filters-toggle:hover {
    background: rgba(200,205,214,0.08);
    border-color: var(--chrome3);
    color: var(--chrome-shine);
  }
  .repair-filters-toggle:active { transform: translateY(1px); }
  .repair-filters-toggle:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(212,216,222,0.15);
  }
  .repair-filters-toggle[aria-expanded="true"] {
    background: rgba(200,205,214,0.1);
    border-color: var(--chrome3);
    color: var(--chrome-shine);
  }
  .repair-filters-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: currentColor;
  }
  .repair-filters-toggle-label {
    letter-spacing: 0.5px;
  }
  .repair-filters-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--accent);
    color: #0d0f11;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    font-family: 'JetBrains Mono', monospace;
  }
  .repair-filters-chevron {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: currentColor;
    transition: transform 0.2s ease;
    opacity: 0.7;
  }
  .repair-filters-toggle[aria-expanded="true"] .repair-filters-chevron {
    transform: rotate(180deg);
  }
  .repair-filters-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  /* Panel colapsible. Por defecto oculto vía atributo [hidden].
     Cuando se abre, se anima con max-height + opacity para que sea smooth
     sin romper layout. 800px es un techo generoso para el contenido real. */
  .repair-filters-panel[hidden] {
    display: none;
  }
  .repair-filters-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px;
    margin-top: 2px;
    border-top: 1px solid var(--border);
    animation: repairFiltersOpen 0.22s ease;
  }
  @keyframes repairFiltersOpen {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .filter-row-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    min-width: 56px;
    flex-shrink: 0;
  }
  .filter-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
  }
  .filter-chip {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 6px 14px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    font-family: 'Barlow', sans-serif;
    line-height: 1.2;
    white-space: nowrap;
  }
  .filter-chip:hover {
    background: rgba(200,205,214,0.08);
    border-color: var(--chrome3);
    color: var(--chrome);
  }
  .filter-chip.active {
    background: var(--chrome);
    color: #0d0f11;
    border-color: var(--chrome);
    font-weight: 600;
  }
  .filter-month-picker {
    position: relative;
    display: inline-block;
  }
  .filter-month-popover {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 120;
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: var(--radius-lg);
    padding: 14px;
    min-width: 260px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  }
  .filter-month-year-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    gap: 8px;
  }
  .filter-year-arrow {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 12px;
    cursor: pointer;
    color: var(--text);
    font-size: 14px;
    font-family: 'Barlow', sans-serif;
    transition: all 0.15s;
  }
  .filter-year-arrow:hover {
    background: rgba(200,205,214,0.1);
    border-color: var(--chrome3);
  }
  .filter-year-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 1.5px;
  }
  .filter-month-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
  }
  .filter-month-cell {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 4px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Barlow', sans-serif;
    transition: all 0.15s;
  }
  .filter-month-cell:hover {
    background: rgba(200,205,214,0.1);
    color: var(--chrome);
    border-color: var(--chrome3);
  }
  .filter-month-cell.is-current-real {
    border-color: var(--green);
    color: var(--green);
  }
  .filter-month-cell.is-selected {
    background: var(--chrome);
    color: #0d0f11;
    border-color: var(--chrome);
    font-weight: 700;
  }
  .filter-month-popover-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
  }
  .filter-popover-close {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 12px;
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    font-family: 'Barlow', sans-serif;
  }
  .filter-popover-close:hover {
    color: var(--chrome);
    border-color: var(--chrome3);
  }
  .filter-day-picker { display: inline-flex; align-items: center; }
  .filter-day-input {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 5px 10px;
    color: var(--text);
    font-size: 12px;
    font-family: 'Barlow', sans-serif;
    cursor: pointer;
    width: auto;
    min-width: 130px;
  }
  .filter-day-input:focus {
    border-color: var(--chrome3);
    outline: none;
  }
  .filter-day-input.has-value {
    background: var(--chrome);
    color: #0d0f11;
    border-color: var(--chrome);
    font-weight: 600;
  }
  .filter-bar-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    gap: 10px;
  }
  .filter-clear-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 5px 12px;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    font-family: 'Barlow', sans-serif;
    transition: all 0.15s;
  }
  .filter-clear-btn:hover {
    color: var(--red);
    border-color: var(--red);
    background: rgba(224,82,82,0.05);
  }
  @media (max-width: 768px) {
    .repair-filters-bar { padding: 12px; gap: 10px; }
    .filter-row { gap: 6px; align-items: flex-start; }
    .filter-row-label { min-width: 100%; margin-bottom: 0; }
    .filter-chips { width: 100%; }
    .filter-chip { padding: 6px 12px; font-size: 12px; }
    .filter-month-picker { width: 100%; }
    .filter-month-popover {
      position: fixed;
      top: auto;
      bottom: calc(var(--mobile-nav-visible) + 12px);
      left: 12px;
      right: 12px;
      width: auto;
      min-width: 0;
      max-width: none;
      z-index: 250;
    }
    .filter-day-input { width: 100%; min-width: 0; }
    .filter-bar-footer { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
    .filter-bar-footer .u-count-label { text-align: center; }
    .filter-clear-btn { width: 100%; padding: 8px 12px; }
  }

  /* ========== PROVEEDORES — CUENTA CORRIENTE ========== */
  .prov-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
  .prov-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; cursor: pointer; transition: all 0.2s; position: relative; }
  .prov-card:hover { border-color: var(--chrome3); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
  .prov-card-name { font-family: 'Rajdhani', sans-serif; font-size: 17px; font-weight: 700; color: var(--chrome-shine); letter-spacing: 0.5px; margin-bottom: 4px; }
  .prov-card-info { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
  /* Balance: stack vertical de filas. Cada saldo (pendiente y a favor) tiene
     su propia fila con label a la izquierda y monto a la derecha. */
  .prov-card-balance { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
  .prov-card-balance-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .prov-card-balance-row--favor { padding-top: 6px; border-top: 1px dashed rgba(4, 120, 87, 0.18); }
  .prov-card-balance-row--favor .prov-card-label { color: #047857; }
  .prov-card-amount--favor { color: #047857; font-weight: 700; }
  .prov-card-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
  .prov-card-amount { font-family: 'JetBrains Mono', monospace; font-size: 20px; font-weight: 600; }
  .prov-card-amount.deuda { color: var(--red); }
  .prov-card-amount.saldo-ok { color: var(--green); }
  .prov-card-actions { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; min-height: 28px; }
  .prov-card-btn { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 14px; padding: 4px; transition: color 0.15s; border-radius: 4px; }
  .prov-card-btn:hover { color: var(--chrome); background: rgba(200,205,214,0.08); }
  /* Placeholder: el botón ocupa lugar pero no es clickeable ni visible. Mantiene cards parejas. */
  .prov-card-btn--placeholder { visibility: hidden; pointer-events: none; }
  /* ===== Historial de movimientos: layout COLUMNAR con CSS Grid =====
     5 columnas: [icon 28px] [body 1fr] [monto 100px] [saldo 160px] [delete 32px]
     Mismo grid se aplica a filas sueltas, headers de grupo y child rows
     para garantizar alineación columnar perfecta. */
  .prov-movimiento { display: grid; grid-template-columns: 28px 1fr 78px 96px 150px 32px; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); align-items: flex-start; }
  .prov-movimiento:last-child { border-bottom: none; }
  .prov-mov-icon { font-size: 18px; margin-top: 2px; }
  .prov-mov-body { min-width: 0; }
  .prov-mov-desc { font-size: 13px; color: var(--text); }
  .prov-mov-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; display: flex; gap: 10px; flex-wrap: wrap; }
  /* Badge de movimientos especiales (saldo a favor generado/aplicado): bloque
     propio en su línea, no inline con el desc. Evita rotura del badge cuando
     el desc text es largo y wrappea. */
  .prov-mov-badge { display: inline-block; align-self: flex-start; margin-top: 4px; font-size: 11px; font-weight: 600; padding: 2px 10px; border-radius: 9999px; white-space: nowrap; max-width: 100%; }
  .prov-mov-badge.is-credit-generated { background: #d1fae5; color: #047857; }
  .prov-mov-badge.is-credit-applied { background: #dbeafe; color: #1e40af; }
  /* Badges para deudas saldadas con saldo a favor — refuerzo visual del vínculo
     entre la deuda y su(s) aplicación(es). Verde = totalmente saldada, azul = parcial. */
  .prov-mov-badge.is-debt-settled { background: rgba(46,184,114,0.15); color: var(--green); border: 1px solid rgba(46,184,114,0.35); }
  .prov-mov-badge.is-debt-partial { background: rgba(74,158,255,0.12); color: var(--blue); border: 1px solid rgba(74,158,255,0.3); }
  /* Pago de corrección del bug de saldo a favor (2026-06-02) — distintivo para
     que se ubique fácil en el historial. */
  .prov-mov-badge.is-correccion { background: rgba(251,191,36,0.15); color: #fcd34d; border: 1px solid rgba(251,191,36,0.4); }
  /* Columna N° Boleta del historial — el número de boleta del proveedor. */
  .prov-mov-boleta { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--chrome); margin-top: 2px; align-self: start; word-break: break-word; }
  .prov-mov-boleta--empty { color: var(--text-dim); }
  .prov-mov-boleta--multi { color: var(--text-muted); font-style: italic; font-family: 'Barlow', sans-serif; }
  .prov-mov-monto { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 600; margin-top: 2px; text-align: right; align-self: start; }
  .prov-mov-monto.deuda { color: var(--red); }
  .prov-mov-monto.pago { color: var(--green); }
  /* Columna saldo: claramente separada del monto con border-left, padding y tinte sutil de fondo. */
  .prov-mov-saldo { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-muted); margin-top: 0; padding: 4px 6px 4px 14px; border-left: 1px solid var(--border); background: rgba(255, 255, 255, 0.025); border-radius: 4px; min-height: 40px; }
  .prov-mov-saldo--empty { background: transparent; border-left-color: transparent; }
  .prov-mov-saldo-stack { display: flex; flex-direction: column; gap: 3px; }
  .prov-mov-saldo-line { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; line-height: 1.3; }
  .prov-mov-saldo-label { color: var(--text-muted); font-size: 10px; font-family: 'Rajdhani', sans-serif; letter-spacing: 0.3px; text-transform: uppercase; flex-shrink: 0; }
  .prov-mov-saldo-val { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; text-align: right; }
  .prov-mov-saldo-val.is-debt { color: var(--red); }
  .prov-mov-saldo-val.is-favor { color: var(--green); }
  .prov-mov-saldo-val.is-zero { color: var(--text-dim); }
  /* Headers de columnas — refuerzan visualmente la estructura tabular del historial. */
  .prov-mov-headers { display: grid; grid-template-columns: 28px 1fr 78px 96px 150px 32px; gap: 14px; padding: 8px 0 6px; border-bottom: 1px solid var(--border2); margin-bottom: 4px; }
  .prov-mov-header-cell { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.2px; font-weight: 600; font-family: 'Rajdhani', sans-serif; }
  .prov-mov-header-monto { text-align: right; }
  .prov-mov-header-saldo { text-align: left; padding-left: 14px; }
  .prov-mov-header-boleta { text-align: left; }
  .prov-mov-delete { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 13px; padding: 2px 4px; transition: color 0.15s; align-self: start; margin-top: 2px; }
  .prov-mov-delete:hover { color: var(--red); }
  /* Spacer del lugar del delete en headers de grupo (donde no hay botón). */
  .prov-mov-delete-spacer { width: 100%; }
  /* ===== Grupos de movimientos por reparación (expandibles con <details>) ===== */
  .prov-mov-group { border-bottom: 1px solid var(--border); }
  .prov-mov-group:last-child { border-bottom: none; }
  .prov-mov-group > summary { display: grid; grid-template-columns: 28px 1fr 78px 96px 150px 32px; gap: 14px; padding: 12px 0 12px 18px; align-items: flex-start; cursor: pointer; list-style: none; position: relative; transition: background 0.15s; }
  .prov-mov-group > summary::-webkit-details-marker { display: none; }
  .prov-mov-group > summary::before { content: '▶'; font-size: 9px; color: var(--text-muted); position: absolute; left: 4px; top: 16px; transition: transform 0.15s; }
  .prov-mov-group[open] > summary::before { transform: rotate(90deg); }
  .prov-mov-group > summary:hover { background: rgba(200, 205, 214, 0.04); }
  .prov-mov-group > summary .prov-mov-desc { font-weight: 600; }
  .prov-mov-children { padding: 4px 0 8px 32px; background: rgba(0, 0, 0, 0.18); border-radius: 6px; margin: 0 0 8px 18px; }
  .prov-mov-children .prov-mov-child { padding: 8px 0; border-bottom: 1px dashed rgba(200, 205, 214, 0.08); }
  .prov-mov-children .prov-mov-child:last-child { border-bottom: none; }
  .prov-mov-children .prov-mov-child .prov-mov-desc { font-size: 12px; }
  /* ===== Resumen "Totales por boleta" — colapsable, cerrado por defecto ===== */
  .prov-boletas-resumen { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 14px; }
  .prov-boletas-summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; font-size: 12px; font-weight: 600; color: var(--chrome); letter-spacing: 0.3px; user-select: none; }
  .prov-boletas-summary::-webkit-details-marker { display: none; }
  .prov-boletas-summary:hover { color: var(--chrome-shine); }
  .prov-boletas-chevron { font-size: 11px; color: var(--text-muted); transition: transform 0.2s ease; }
  .prov-boletas-resumen[open] .prov-boletas-chevron { transform: rotate(180deg); }
  /* --- Barra de filtros de fecha (toggle + panel colapsable) --- */
  .prov-boletas-filtros { padding: 0 14px 4px; }
  .prov-boletas-filtros-toggle { display: inline-flex; align-items: center; gap: 7px; background: var(--surface3); border: 1px solid var(--border); border-radius: 8px; padding: 6px 11px; color: var(--chrome); font-size: 12px; font-weight: 600; font-family: 'Barlow', sans-serif; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
  .prov-boletas-filtros-toggle:hover { background: rgba(200,205,214,0.08); border-color: var(--chrome3); color: var(--chrome-shine); }
  .prov-boletas-filtros-toggle[aria-expanded="true"] { background: rgba(200,205,214,0.1); border-color: var(--chrome3); }
  .prov-boletas-filtros-icon { width: 15px; height: 15px; flex-shrink: 0; }
  .prov-boletas-filtros-badge { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; }
  .prov-boletas-filtros-chevron { font-size: 9px; color: var(--text-muted); transition: transform 0.2s ease; }
  .prov-boletas-filtros-toggle[aria-expanded="true"] .prov-boletas-filtros-chevron { transform: rotate(180deg); }
  .prov-boletas-filtros-panel[hidden] { display: none; }
  .prov-boletas-filtros-panel { display: flex; flex-direction: column; gap: 8px; padding: 10px 0 4px; }
  .prov-boletas-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .prov-boletas-rango { display: flex; gap: 10px; flex-wrap: wrap; }
  .prov-boletas-rango-field { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 130px; }
  .prov-boletas-rango-field span { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600; }
  .prov-boletas-rango-field input { background: var(--surface3); border: 1px solid var(--border); border-radius: 6px; color: var(--text); padding: 6px 9px; font-size: 12px; font-family: 'Barlow', sans-serif; }
  .prov-boletas-rango-field input:focus { border-color: var(--chrome3); outline: none; }
  .prov-boletas-filtros-clear { align-self: flex-start; background: none; border: 1px solid var(--border); border-radius: 6px; padding: 4px 11px; color: var(--text-muted); font-size: 11px; cursor: pointer; font-family: 'Barlow', sans-serif; }
  .prov-boletas-filtros-clear:hover { color: var(--red); border-color: var(--red); }
  /* Fila de orden + buscador + reparación (mismo layout que el rango de fechas). */
  .prov-boletas-extras { display: flex; gap: 10px; flex-wrap: wrap; }
  .prov-boletas-extras .prov-boletas-rango-field select,
  .prov-boletas-extras .prov-boletas-rango-field input { background: var(--surface3); border: 1px solid var(--border); border-radius: 6px; color: var(--text); padding: 6px 9px; font-size: 12px; font-family: 'Barlow', sans-serif; width: 100%; }
  .prov-boletas-extras .prov-boletas-rango-field select:focus,
  .prov-boletas-extras .prov-boletas-rango-field input:focus { border-color: var(--chrome3); outline: none; }
  /* Barra de TOTAL del filtro: siempre visible, no depende del orden. */
  .prov-boletas-total-bar { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 6px 14px 0; padding: 8px 12px; background: var(--surface3); border: 1px solid var(--border); border-radius: 8px; flex-wrap: wrap; }
  .prov-boletas-total-monto { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: var(--accent); }
  .prov-boletas-total-meta { font-size: 10px; color: var(--text-muted); font-family: 'Rajdhani', sans-serif; text-transform: uppercase; letter-spacing: 0.5px; }
  /* --- Lista de boletas: header + filas expandibles --- */
  .prov-boletas-list { padding: 4px 14px 12px; display: flex; flex-direction: column; gap: 2px; }
  .prov-boletas-head { display: grid; grid-template-columns: 1fr 92px 100px; gap: 10px; padding: 6px 0 6px 16px; border-bottom: 1px solid var(--border2); }
  .prov-boletas-head span { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; font-family: 'Rajdhani', sans-serif; }
  .prov-boletas-head-num { text-align: right; }
  .prov-boletas-empty { padding: 16px 14px; text-align: center; color: var(--text-muted); font-size: 12px; }
  .prov-boletas-row { border-bottom: 1px dashed rgba(200,205,214,0.08); }
  .prov-boletas-row:last-child { border-bottom: none; }
  .prov-boletas-row-summary { display: grid; grid-template-columns: 1fr 92px 100px; gap: 10px; align-items: baseline; padding: 9px 0 9px 16px; cursor: pointer; list-style: none; position: relative; }
  .prov-boletas-row-summary::-webkit-details-marker { display: none; }
  .prov-boletas-row-summary::before { content: '▶'; font-size: 8px; color: var(--text-muted); position: absolute; left: 2px; top: 12px; transition: transform 0.15s; }
  .prov-boletas-row[open] > .prov-boletas-row-summary::before { transform: rotate(90deg); }
  .prov-boletas-row-summary:hover { background: rgba(200,205,214,0.04); }
  .prov-boletas-label { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .prov-boletas-label-text { font-size: 13px; color: var(--text); font-weight: 600; }
  .prov-boletas-count { font-size: 10px; color: var(--text-muted); font-family: 'Rajdhani', sans-serif; text-transform: uppercase; letter-spacing: 0.5px; }
  .prov-boletas-amount { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; color: var(--chrome-shine); text-align: right; }
  .prov-boletas-acum { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: var(--accent); text-align: right; }
  /* 3ª columna en modo "% del total" (orden no cronológico): menos protagonismo. */
  .prov-boletas-acum--pct { color: var(--text-muted); font-weight: 600; }
  .prov-boletas-row--sin .prov-boletas-label-text { color: var(--text-muted); font-style: italic; font-weight: 500; }
  /* Detalle expandible: los movimientos cargados dentro de la boleta. */
  .prov-boletas-detalle { padding: 2px 0 8px 16px; margin-left: 6px; }
  .prov-boletas-detalle-item { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 6px 0; border-bottom: 1px dashed rgba(200,205,214,0.06); }
  .prov-boletas-detalle-item:last-child { border-bottom: none; }
  .prov-boletas-detalle-desc { font-size: 12px; color: var(--text); }
  .prov-boletas-detalle-monto { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; color: var(--red); text-align: right; }
  .prov-boletas-detalle-meta { font-size: 10px; color: var(--text-muted); grid-column: 1 / -1; }
  @media (max-width: 768px) {
    .prov-boletas-head { grid-template-columns: 1fr 78px 86px; gap: 6px; }
    .prov-boletas-row-summary { grid-template-columns: 1fr 78px 86px; gap: 6px; }
    .prov-boletas-amount, .prov-boletas-acum { font-size: 12px; }
    .prov-boletas-rango-field { min-width: 0; }
  }
  .prov-saldo-bar { display: flex; gap: 16px; align-items: center; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 16px; flex-wrap: wrap; }
  .prov-saldo-item { text-align: center; }
  .prov-saldo-item .label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
  .prov-saldo-item .value { font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 600; }
  .prov-saldo-item .value.red { color: var(--red); }
  .prov-saldo-item .value.green { color: var(--green); }
  .prov-saldo-item .value.yellow { color: var(--yellow); }
  .prov-saldo-item .value.muted { color: var(--text-muted); }
  .prov-saldo-caption { font-size: 11.5px; color: var(--text-muted); margin: -8px 0 16px; line-height: 1.4; }
  /* Alerta de inconsistencia contable (saldo a favor consumido sin respaldo).
     Bug 2026-06-02: el sistema dejó de esconder cuentas rotas con max(0,...). */
  .prov-credit-anomaly { margin: -4px 0 16px; padding: 10px 14px; border-radius: var(--radius); background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.4); color: #fca5a5; font-size: 13px; line-height: 1.45; font-weight: 600; }
  /* Banner informativo de deuda restaurada tras corregir una anomalía. */
  .prov-credit-restored { margin: -4px 0 16px; padding: 10px 14px; border-radius: var(--radius); background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.4); color: #fcd34d; font-size: 13px; line-height: 1.45; font-weight: 600; }
  @media (max-width: 768px) {
    .prov-cards { grid-template-columns: 1fr; }
    .prov-saldo-bar { flex-direction: column; align-items: stretch; }
    .prov-saldo-item { text-align: left; display: flex; justify-content: space-between; }
    /* Mobile: collapse to 4 columns (icon | body | monto | delete). El saldo y
       la boleta pasan a "filas virtuales" propias via grid-column span. */
    .prov-movimiento, .prov-mov-group > summary, .prov-mov-headers { grid-template-columns: 24px 1fr 80px 28px; gap: 6px 10px; }
    .prov-mov-boleta { grid-column: 2 / -1; margin-top: 4px; font-size: 11px; }
    .prov-mov-boleta::before { content: '📄 Boleta: '; color: var(--text-muted); font-family: 'Barlow', sans-serif; font-size: 10px; }
    .prov-mov-boleta--empty::before { content: '📄 Boleta: '; }
    .prov-mov-boleta--multi::before { content: '📄 Boletas: '; }
    .prov-mov-saldo { grid-column: 2 / -1; margin-top: 6px; padding-left: 10px; font-size: 10px; min-height: auto; }
    .prov-mov-saldo-val { font-size: 11px; }
    .prov-mov-header-saldo, .prov-mov-header-boleta { display: none; }
    .prov-mov-children { margin-left: 8px; padding-left: 16px; }
  }

  /* Phones chicos (≤480px): el grid de 4 columnas del movimiento aprieta el
     body y el monto se superponía con la columna de saldo (bug reportado
     2026-06-02, imagen). Acá apilamos todo en una sola columna bajo el ícono:
     descripción → monto (der) → boleta → saldo → eliminar. Sin superposición. */
  @media (max-width: 480px) {
    .prov-movimiento, .prov-mov-group > summary {
      grid-template-columns: 22px 1fr;
      column-gap: 8px; row-gap: 4px;
      align-items: start;
    }
    .prov-mov-headers { display: none; }
    .prov-mov-icon { grid-column: 1; grid-row: 1; }
    .prov-mov-body { grid-column: 2; grid-row: 1; min-width: 0; }
    .prov-mov-monto { grid-column: 2; grid-row: 2; text-align: right; }
    .prov-mov-boleta { grid-column: 2; grid-row: 3; margin-top: 2px; padding-left: 0; }
    .prov-mov-saldo { grid-column: 2; grid-row: 4; padding-left: 0; margin-top: 4px; }
    .prov-mov-delete { grid-column: 2; grid-row: 5; justify-self: end; margin-top: 2px; }
    .prov-mov-children { margin-left: 4px; padding-left: 10px; }
  }

  /* ========== PIEZAS TABLE (REPARACIONES) ========== */
  .piezas-section { margin-top: 4px; }
  .piezas-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .piezas-table th { background: var(--surface2); color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; padding: 8px 8px; text-align: left; border-bottom: 1px solid var(--border2); }
  .piezas-table td { padding: 6px 4px; border-bottom: 1px solid var(--border); vertical-align: middle; }
  .piezas-table input, .piezas-table select { background: var(--surface2); border: 1px solid var(--border); border-radius: 4px; color: var(--text); padding: 7px 8px; font-size: 13px; font-family: 'Barlow', sans-serif; width: 100%; outline: none; }
  .piezas-table input:focus, .piezas-table select:focus { border-color: var(--chrome3); }
  .piezas-table input[type="number"] { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
  .piezas-remove { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 15px; padding: 4px; transition: color 0.15s; }
  .piezas-remove:hover { color: var(--red); }
  .piezas-add-btn { background: none; border: 1px dashed var(--border2); border-radius: var(--radius); padding: 8px 16px; color: var(--text-muted); font-size: 13px; cursor: pointer; transition: all 0.15s; font-family: 'Barlow', sans-serif; width: 100%; margin-top: 8px; }
  .piezas-add-btn:hover { border-color: var(--chrome3); color: var(--chrome); }
  .piezas-totales-bar { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; margin-top: 12px; }
  .piezas-totales-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; }
  .piezas-totales-row .label { font-size: 12px; color: var(--text-muted); }
  .piezas-totales-row .value { font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--chrome); }
  .piezas-totales-row.total { border-top: 1px solid var(--border2); margin-top: 6px; padding-top: 10px; }
  .piezas-totales-row.total .label { font-size: 13px; font-weight: 700; color: var(--chrome-shine); text-transform: uppercase; letter-spacing: 1px; }
  .piezas-totales-row.total .value { font-size: 20px; font-weight: 700; color: var(--chrome-shine); }
  .piezas-view-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
  .piezas-view-table th { background: var(--surface2); color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border2); }
  .piezas-view-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
  .piezas-view-table .mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; }

  /* Mobile: table → vertical cards, todas las columnas visibles incluyendo PROVEEDOR.
     Cada <tr> se vuelve una tarjeta. Pieza arriba (full), Costo+Venta en una fila de 2,
     Proveedor full debajo, botón eliminar absoluto en esquina superior derecha. */
  @media (max-width: 768px) {
    .piezas-table { display: block; border-collapse: separate; border-spacing: 0 8px; }
    .piezas-table thead { display: none; }
    .piezas-table tbody { display: block; }
    .piezas-table tr {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px 8px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 12px 12px 10px;
      position: relative;
    }
    .piezas-table td { display: block; padding: 0; border: none; }
    .piezas-table td:nth-child(1) { grid-column: 1 / -1; padding-right: 32px; }
    .piezas-table td:nth-child(2)::before { content: 'Costo'; display: block; font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 3px; font-weight: 600; }
    .piezas-table td:nth-child(3)::before { content: 'Venta'; display: block; font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 3px; font-weight: 600; }
    .piezas-table td:nth-child(4) { grid-column: 1 / -1; }
    .piezas-table td:nth-child(4)::before { content: 'Proveedor'; display: block; font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 3px; font-weight: 600; }
    .piezas-table td:nth-child(5) { grid-column: 1 / -1; }
    .piezas-table td:nth-child(5)::before { content: 'N° Boleta'; display: block; font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 3px; font-weight: 600; }
    .piezas-table td:nth-child(6) { position: absolute; top: 6px; right: 6px; padding: 0; }
    .piezas-table input, .piezas-table select { font-size: 14px; padding: 8px 10px; }
    .piezas-remove { font-size: 18px; padding: 6px 8px; min-width: 28px; min-height: 28px; }

    /* ============================================================
       UX mobile fix (2026-05-25): tablas dentro de modales no deben
       forzar al modal a expandirse. La regla global `table { min-width:
       600px }` (más abajo en este mismo media query) aplica a TODAS las
       tablas en mobile; acá la deshacemos para tablas dentro de modal-body
       para que el contenido del modal no desborde el viewport. Era la
       causa raíz del modal-ver-reparacion saliéndose por los costados
       en iPhone — la .piezas-view-table heredaba min-width:600px y
       arrastraba al modal entero. */
    .modal-body table { min-width: 0; }

    /* .piezas-view-table: tabla read-only de piezas en el modal de
       detalle de reparación. Mismo patrón mobile→cards que .piezas-table
       del modo edición. Columnas: 1=Pieza 2=Costo 3=Venta 4=Proveedor
       5=N° Boleta. La fila "SUBTOTAL REPUESTOS" (clase u-row-divider-strong,
       línea 826 reparaciones/index.js) usa layout más simple full-width. */
    .piezas-view-table { display: block; border-collapse: separate; border-spacing: 0 8px; margin-top: 0; }
    .piezas-view-table thead { display: none; }
    .piezas-view-table tbody { display: block; }
    .piezas-view-table tr {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 8px; row-gap: 6px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 12px;
    }
    .piezas-view-table td { display: block; padding: 0; border: none; }
    .piezas-view-table td:nth-child(1) { grid-column: 1 / -1; font-weight: 600; }
    .piezas-view-table td:nth-child(2)::before,
    .piezas-view-table td:nth-child(3)::before,
    .piezas-view-table td:nth-child(4)::before,
    .piezas-view-table td:nth-child(5)::before {
      display: block; font-size: 10px; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 2px; font-weight: 600;
    }
    .piezas-view-table td:nth-child(2)::before { content: 'Costo'; }
    .piezas-view-table td:nth-child(3)::before { content: 'Venta'; }
    .piezas-view-table td:nth-child(4) { grid-column: 1 / -1; }
    .piezas-view-table td:nth-child(4)::before { content: 'Proveedor'; }
    .piezas-view-table td:nth-child(5) { grid-column: 1 / -1; }
    .piezas-view-table td:nth-child(5)::before { content: 'N° Boleta'; }
    .piezas-view-table tr.u-row-divider-strong {
      grid-template-columns: 1fr auto;
      background: var(--surface);
      border-color: var(--chrome3);
    }
    .piezas-view-table tr.u-row-divider-strong td:nth-child(1) {
      grid-column: 1 / 2; font-weight: 700; text-transform: uppercase;
      font-size: 11px; letter-spacing: 0.6px;
    }
    .piezas-view-table tr.u-row-divider-strong td:nth-child(2),
    .piezas-view-table tr.u-row-divider-strong td:nth-child(3) {
      grid-column: 2 / 3; text-align: right; font-weight: 700;
    }
    .piezas-view-table tr.u-row-divider-strong td:nth-child(2)::before,
    .piezas-view-table tr.u-row-divider-strong td:nth-child(3)::before { content: ''; display: none; }
    .piezas-view-table tr.u-row-divider-strong td:nth-child(4),
    .piezas-view-table tr.u-row-divider-strong td:nth-child(5) { display: none; }

    /* Listing #tabla-reparaciones: tabla → cards en mobile. El scope
       #page-reparaciones evita afectar otras tablas (clientes, vehiculos,
       turnos, proveedores) que mantienen horizontal scroll por ahora; esta
       conversión es solo para reparaciones porque tiene 95+ filas y era la
       vista marcada como más rota en mobile. Extender al resto es trabajo
       futuro siguiendo este mismo patrón.
       Columnas (orden de append en reparaciones/index.js:2902):
       1=ID 2=Fecha 3=Vehículo 4=Cliente(hide-mobile) 5=Motivo 6=Estado
       7=Total 8=Pago 9=Saldo(hide-mobile) 10=Acciones */
    #page-reparaciones .table-wrapper { overflow-x: visible; }
    #page-reparaciones .table-wrapper table { display: block; min-width: 0; }
    #page-reparaciones .table-wrapper thead { display: none; }
    #page-reparaciones .table-wrapper tbody { display: block; }
    #page-reparaciones tbody tr {
      display: grid;
      grid-template-columns: 1fr auto;
      column-gap: 10px; row-gap: 6px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 12px;
      margin-bottom: 10px;
    }
    #page-reparaciones tbody td {
      display: block; padding: 0; border: none; white-space: normal;
    }
    /* Empty state: createEmptyTableRow usa colspan; que ocupe full ancho */
    #page-reparaciones tbody td[colspan] {
      grid-column: 1 / -1; text-align: center; padding: 16px;
    }
    #page-reparaciones tbody td:nth-child(3) {
      grid-column: 1 / 2; grid-row: 1; font-size: 14px;
    }
    #page-reparaciones tbody td:nth-child(1) {
      grid-column: 2 / 3; grid-row: 1;
      text-align: right; font-size: 11px; color: var(--text-muted);
    }
    #page-reparaciones tbody td:nth-child(2) {
      grid-column: 2 / 3; grid-row: 2;
      text-align: right; font-size: 11px; color: var(--text-muted);
    }
    #page-reparaciones tbody td:nth-child(5) {
      grid-column: 1 / -1; grid-row: 3;
    }
    #page-reparaciones tbody td:nth-child(5)::before {
      content: 'Motivo'; display: block; font-size: 10px; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 2px; font-weight: 600;
    }
    #page-reparaciones tbody td:nth-child(6) {
      grid-column: 1 / 2; grid-row: 4;
    }
    #page-reparaciones tbody td:nth-child(7) {
      grid-column: 2 / 3; grid-row: 4;
      text-align: right; font-weight: 700;
    }
    #page-reparaciones tbody td:nth-child(8) {
      grid-column: 1 / -1; grid-row: 5;
    }
    #page-reparaciones tbody td:nth-child(10) {
      grid-column: 1 / -1; grid-row: 6; margin-top: 4px;
    }
    #page-reparaciones tbody td:nth-child(10) .td-actions {
      justify-content: flex-end;
    }

    /* ====================================================================
       Tabla → cards en mobile (mismo patrón que #page-reparaciones), para
       los demás listados. Scope por el id del <tbody> (único) + :has() para
       el <table>/<thead>/.table-wrapper, así no afecta otras tablas que
       compartan página (ej. estadísticas tiene varias secciones).
       Etiqueta común de los campos numéricos/secundarios via ::before.
       ==================================================================== */
    /* operadores SÍ está envuelto en .table-wrapper (overflow-x:auto en mobile):
       lo anulamos para que las cards no queden dentro de un scroll horizontal. */
    #page-operadores .table-wrapper { overflow-x: visible; }
    table:has(> #tabla-clientes), table:has(> #tabla-vehiculos),
    table:has(> #tabla-stats-reps), table:has(> #tabla-costos),
    table:has(> #tabla-operadores), table:has(> #tabla-productividad) { display: block; min-width: 0; }
    table:has(> #tabla-clientes) thead, table:has(> #tabla-vehiculos) thead,
    table:has(> #tabla-stats-reps) thead, table:has(> #tabla-costos) thead,
    table:has(> #tabla-operadores) thead, table:has(> #tabla-productividad) thead { display: none; }
    #tabla-clientes, #tabla-vehiculos, #tabla-stats-reps, #tabla-costos, #tabla-operadores, #tabla-productividad { display: block; }
    #tabla-clientes tr, #tabla-vehiculos tr, #tabla-stats-reps tr, #tabla-costos tr, #tabla-operadores tr, #tabla-productividad tr {
      display: grid;
      /* minmax(0,1fr) en vez de 1fr: permite que la columna izquierda se
         encoja por debajo de su min-content, evitando que el card se ensanche
         más allá del viewport (acciones/montos cortados a la derecha). */
      grid-template-columns: minmax(0, 1fr) auto;
      column-gap: 10px; row-gap: 6px;
      background: var(--surface2); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 12px; margin-bottom: 10px;
    }
    #tabla-clientes td, #tabla-vehiculos td, #tabla-stats-reps td, #tabla-costos td, #tabla-operadores td, #tabla-productividad td {
      display: block; padding: 0; border: none; white-space: normal; min-width: 0;
    }
    #tabla-clientes td[colspan], #tabla-vehiculos td[colspan],
    #tabla-stats-reps td[colspan], #tabla-costos td[colspan], #tabla-operadores td[colspan], #tabla-productividad td[colspan] {
      grid-column: 1 / -1; text-align: center; padding: 16px; color: var(--text-muted);
    }
    /* Etiqueta uppercase (encabezado de campo) reutilizada por los montos. */
    #tabla-stats-reps td.is-field::before, #tabla-vehiculos td.is-field::before {
      display: block; font-size: 10px; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 2px; font-weight: 600;
    }

    /* --- CLIENTES: 1 ID · 2 Nombre · 3 Tel · 4 Email · 5 Localidad · 6 Estado · 7 Acciones --- */
    #tabla-clientes td:nth-child(2) { grid-column: 1 / 2; grid-row: 1; font-size: 14px; font-weight: 600; }
    #tabla-clientes td:nth-child(6) { grid-column: 2 / 3; grid-row: 1; text-align: right; }
    #tabla-clientes td:nth-child(1) { grid-column: 1 / -1; grid-row: 2; font-size: 11px; color: var(--text-muted); }
    #tabla-clientes td:nth-child(3) { grid-column: 1 / -1; grid-row: 3; }
    #tabla-clientes td:nth-child(3)::before { content: '📞 '; }
    #tabla-clientes td:nth-child(4) { grid-column: 1 / -1; grid-row: 4; word-break: break-word; }
    #tabla-clientes td:nth-child(4)::before { content: '✉️ '; }
    #tabla-clientes td:nth-child(5) { grid-column: 1 / -1; grid-row: 5; }
    #tabla-clientes td:nth-child(5)::before { content: '📍 '; }
    #tabla-clientes td:nth-child(7) { grid-column: 1 / -1; grid-row: 6; margin-top: 4px; }
    #tabla-clientes td:nth-child(7) .td-actions { justify-content: flex-end; }

    /* --- VEHÍCULOS: 1 ID · 2 Patente · 3 Vehículo · 4 Año · 5 Cliente · 6 Últ.Act · 7 Próx.Serv · 8 Acciones --- */
    #tabla-vehiculos td:nth-child(2) { grid-column: 1 / 2; grid-row: 1; font-size: 15px; }
    #tabla-vehiculos td:nth-child(1) { grid-column: 2 / 3; grid-row: 1; text-align: right; font-size: 11px; color: var(--text-muted); }
    #tabla-vehiculos td:nth-child(3) { grid-column: 1 / 2; grid-row: 2; }
    #tabla-vehiculos td:nth-child(4) { grid-column: 2 / 3; grid-row: 2; text-align: right; color: var(--text-muted); }
    #tabla-vehiculos td:nth-child(5) { grid-column: 1 / -1; grid-row: 3; }
    #tabla-vehiculos td:nth-child(5)::before { content: '👤 '; }
    #tabla-vehiculos td:nth-child(6) { grid-column: 1 / 2; grid-row: 4; font-size: 12px; }
    #tabla-vehiculos td:nth-child(6)::before { content: 'Última actividad'; display: block; font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 2px; font-weight: 600; }
    #tabla-vehiculos td:nth-child(7) { grid-column: 2 / 3; grid-row: 4; text-align: right; font-size: 12px; }
    #tabla-vehiculos td:nth-child(7)::before { content: 'Próx. servicio'; display: block; font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 2px; font-weight: 600; }
    #tabla-vehiculos td:nth-child(8) { grid-column: 1 / -1; grid-row: 5; margin-top: 4px; }
    #tabla-vehiculos td:nth-child(8) .td-actions { justify-content: flex-end; }

    /* --- STATS-REPS (read-only): 1 ID · 2 Fecha · 3 Vehículo · 4 Cliente · 5 Estado · 6 Total · 7 Cobrado · 8 Saldo · 9 Ganancia --- */
    #tabla-stats-reps td:nth-child(3) { grid-column: 1 / 2; grid-row: 1; font-size: 14px; font-weight: 600; }
    #tabla-stats-reps td:nth-child(1) { grid-column: 2 / 3; grid-row: 1; text-align: right; font-size: 11px; color: var(--text-muted); }
    #tabla-stats-reps td:nth-child(2) { grid-column: 1 / 2; grid-row: 2; font-size: 11px; color: var(--text-muted); }
    #tabla-stats-reps td:nth-child(5) { grid-column: 2 / 3; grid-row: 2; text-align: right; }
    #tabla-stats-reps td:nth-child(4) { grid-column: 1 / -1; grid-row: 3; }
    #tabla-stats-reps td:nth-child(4)::before { content: '👤 '; }
    #tabla-stats-reps td:nth-child(6) { grid-column: 1 / 2; grid-row: 4; }
    #tabla-stats-reps td:nth-child(6)::before { content: 'Total'; display: block; font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 2px; font-weight: 600; }
    #tabla-stats-reps td:nth-child(7) { grid-column: 2 / 3; grid-row: 4; text-align: right; }
    #tabla-stats-reps td:nth-child(7)::before { content: 'Cobrado'; display: block; font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 2px; font-weight: 600; }
    #tabla-stats-reps td:nth-child(8) { grid-column: 1 / 2; grid-row: 5; }
    #tabla-stats-reps td:nth-child(8)::before { content: 'Saldo'; display: block; font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 2px; font-weight: 600; }
    #tabla-stats-reps td:nth-child(9) { grid-column: 2 / 3; grid-row: 5; text-align: right; font-weight: 700; }
    #tabla-stats-reps td:nth-child(9)::before { content: 'Ganancia'; display: block; font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 2px; font-weight: 600; }

    /* --- INSUMOS: 1 ID · 2 Fecha · 3 Descripción · 4 Categoría · 5 Tipo · 6 Monto · 7 Acciones --- */
    #tabla-costos td:nth-child(3) { grid-column: 1 / 2; grid-row: 1; font-size: 14px; font-weight: 600; }
    #tabla-costos td:nth-child(6) { grid-column: 2 / 3; grid-row: 1; text-align: right; font-weight: 700; }
    #tabla-costos td:nth-child(1) { grid-column: 1 / 2; grid-row: 2; font-size: 11px; color: var(--text-muted); }
    #tabla-costos td:nth-child(2) { grid-column: 2 / 3; grid-row: 2; text-align: right; font-size: 11px; color: var(--text-muted); }
    #tabla-costos td:nth-child(4) { grid-column: 1 / 2; grid-row: 3; }
    #tabla-costos td:nth-child(5) { grid-column: 2 / 3; grid-row: 3; text-align: right; }
    #tabla-costos td:nth-child(7) { grid-column: 1 / -1; grid-row: 4; margin-top: 4px; }
    #tabla-costos td:nth-child(7) .td-actions { justify-content: flex-end; }

    /* --- EMPLEADOS: 1 Empleado · 2 Puesto · 3 Sueldo · 4 Estado · 5 Últ.Acceso · 6 Credencial · 7 Acciones --- */
    #tabla-operadores td:nth-child(1) { grid-column: 1 / 2; grid-row: 1; font-size: 14px; font-weight: 600; }
    #tabla-operadores td:nth-child(4) { grid-column: 2 / 3; grid-row: 1; text-align: right; }
    #tabla-operadores td:nth-child(2) { grid-column: 1 / 2; grid-row: 2; }
    #tabla-operadores td:nth-child(3) { grid-column: 2 / 3; grid-row: 2; text-align: right; }
    #tabla-operadores td:nth-child(3)::before { content: 'Sueldo'; display: block; font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 2px; font-weight: 600; }
    #tabla-operadores td:nth-child(5) { grid-column: 1 / 2; grid-row: 3; font-size: 12px; }
    #tabla-operadores td:nth-child(5)::before { content: 'Último acceso'; display: block; font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 2px; font-weight: 600; }
    #tabla-operadores td:nth-child(6) { grid-column: 2 / 3; grid-row: 3; text-align: right; }
    #tabla-operadores td:nth-child(7) { grid-column: 1 / -1; grid-row: 4; margin-top: 4px; }
    #tabla-operadores td:nth-child(7) .td-actions { justify-content: flex-end; }

    /* --- PRODUCTIVIDAD: 1 Empleado · 2 Trabajos · 3 Mano de obra · 4 Promedio --- */
    #tabla-productividad td:nth-child(1) { grid-column: 1 / 2; grid-row: 1; font-size: 14px; font-weight: 600; }
    #tabla-productividad td:nth-child(3) { grid-column: 2 / 3; grid-row: 1; text-align: right; font-weight: 700; }
    #tabla-productividad td:nth-child(3)::before { content: 'Mano de obra'; display: block; font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 2px; font-weight: 600; }
    #tabla-productividad td:nth-child(2) { grid-column: 1 / 2; grid-row: 2; }
    #tabla-productividad td:nth-child(2)::before { content: 'Trabajos'; display: block; font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 2px; font-weight: 600; }
    #tabla-productividad td:nth-child(4) { grid-column: 2 / 3; grid-row: 2; text-align: right; }
    #tabla-productividad td:nth-child(4)::before { content: 'Promedio/trabajo'; display: block; font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 2px; font-weight: 600; }
  }

  .setup-screen { display: none; position: fixed; inset: 0; background: var(--bg); z-index: 9999; align-items: center; justify-content: center; flex-direction: column; padding: 24px; }
  .setup-screen.show { display: flex; }

  /* LOADING */
  .loading-overlay { display: none; position: fixed; inset: 0; background: rgba(13,14,17,0.85); z-index: 500; align-items: center; justify-content: center; flex-direction: column; gap: 16px; }
  .loading-overlay.show { display: flex; }
  .spinner { width: 40px; height: 40px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .loading-text { color: var(--text-muted); font-size: 14px; }

  /* CLOUD STATUS */
  .cloud-status { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 5px 10px; border-radius: 20px; border: 1px solid var(--border); }
  .cloud-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
  .cloud-dot.connected { background: var(--green); box-shadow: 0 0 6px var(--green); }
  .cloud-dot.syncing { background: var(--yellow); animation: pulse 1s infinite; }
  .cloud-dot.error { background: var(--red); }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

  /* SIDEBAR */
  .sidebar { position: fixed; left:0; top:0; bottom:0; width:240px; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; z-index: 100; }
  .logo { padding: 28px 24px 20px; border-bottom: 1px solid var(--border); }
  .logo-title { font-family: 'Rajdhani', sans-serif; font-size: 24px; font-weight:700; letter-spacing: 2px; color: var(--accent); line-height: 1; }
  .logo-sub { font-size: 10px; color: var(--text-muted); letter-spacing: 3px; text-transform: uppercase; margin-top: 4px; }
  .nav { padding: 16px 0; flex:1; overflow-y:auto; }
  .nav-section { font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); padding: 12px 24px 6px; }
  .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 24px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--text-muted); transition: all 0.15s; border-left: 3px solid transparent; }
  .nav-item:hover { color: var(--text); background: var(--surface2); }
  .nav-item.active { color: var(--accent); border-left-color: var(--accent); background: rgba(212,216,222,0.06); }
  .nav-icon { font-size: 18px; width: 20px; text-align:center; }
  .sidebar-bottom { padding: 16px 24px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-muted); }
  .logout-btn { padding: 12px 24px; border-top: 1px solid var(--border); cursor: pointer; color: var(--text-muted); font-size: 13px; display:flex; align-items:center; gap:8px; transition: all 0.15s; }
  .logout-btn:hover { color: var(--red); background: rgba(224,82,82,0.06); }

  /* MAIN */
  .main { margin-left: 240px; min-height: 100vh; }
  .topbar { padding: 20px 32px; border-bottom: 1px solid var(--border); background: var(--surface); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 50; }
  .page-title { font-family: 'Rajdhani', sans-serif; font-size: 28px; font-weight:700; letter-spacing: 2px; color: var(--text); text-transform:uppercase; }
  .topbar-actions { display: flex; gap: 10px; align-items: center; }
  .content { padding: 32px; }

  /* BUTTONS */
  .btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: none; border-radius: var(--radius); font-family: 'Barlow', sans-serif; font-size: 14px; font-weight: 500; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.08s, box-shadow 0.15s; }
  .btn:active:not(:disabled) { transform: translateY(1px); }
  .btn:disabled { opacity: 0.55; cursor: not-allowed; }
  .btn-primary { background: var(--accent); color: #000; }
  .btn-primary:hover:not(:disabled) { background: var(--chrome-shine); box-shadow: 0 2px 10px rgba(200,205,214,0.18); }
  .btn-primary-green { background: var(--green); color: #fff; box-shadow: none; }
  .btn-primary-green:hover:not(:disabled) { background: #32c27a; box-shadow: 0 2px 10px rgba(46,184,114,0.25); }
  .btn-secondary { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }
  .btn-secondary:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
  .btn-danger { background: rgba(239,68,68,0.15); color: var(--red); border: 1px solid rgba(239,68,68,0.3); }
  .btn-danger:hover:not(:disabled) { background: rgba(239,68,68,0.25); border-color: rgba(239,68,68,0.5); }
  .btn-sm { padding: 5px 12px; font-size: 12px; }
  .btn-cobrar { background: rgba(46,184,114,0.15); color: var(--green); border: 1px solid rgba(46,184,114,0.3); font-weight:600; }
  .btn-cobrar:hover:not(:disabled) { background: rgba(46,184,114,0.3); border-color: rgba(46,184,114,0.5); }
  .btn-revertir { background: rgba(232,160,32,0.12); color: var(--yellow); border: 1px solid rgba(232,160,32,0.25); font-size:11px; }
  .btn-revertir:hover:not(:disabled) { background: rgba(232,160,32,0.25); border-color: rgba(232,160,32,0.5); }

  /* SEARCH */
  .search-bar { position: relative; max-width: 400px; }
  .search-bar input { width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); padding: 9px 16px 9px 40px; font-family: 'Barlow', sans-serif; font-size: 14px; outline: none; transition: border-color 0.15s; }
  .search-bar input:focus { border-color: var(--accent); }
  .search-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 16px; }

  /* SEARCHABLE SELECT (combobox para selectores de Cliente/Vehículo en modales) */
  .searchable-select { position: relative; width: 100%; }
  .searchable-select > select.searchable-select-native {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .searchable-select-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 16px; pointer-events: none; z-index: 2; }
  .searchable-select-input {
    width: 100%;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    padding: 9px 38px 9px 40px;
    font-family: 'Barlow', sans-serif;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s;
    cursor: text;
  }
  .searchable-select-input:focus { border-color: var(--accent); }
  .searchable-select.is-open .searchable-select-input { border-color: var(--accent); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .searchable-select-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 4px;
    display: none;
    z-index: 2;
  }
  .searchable-select-clear.is-visible { display: inline-flex; align-items: center; justify-content: center; }
  .searchable-select-clear:hover { color: var(--text); background: rgba(255,255,255,0.06); }
  .searchable-select-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--accent);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    max-height: 260px;
    overflow-y: auto;
    z-index: 5;
    box-shadow: 0 8px 20px rgba(0,0,0,0.35);
  }
  .searchable-select.is-open .searchable-select-dropdown { display: block; }
  .searchable-select-option {
    padding: 9px 14px;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    font-family: 'Barlow', sans-serif;
  }
  .searchable-select-option:last-child { border-bottom: none; }
  .searchable-select-option.is-active { background: var(--surface2); color: var(--accent); }
  .searchable-select-option.is-selected { font-weight: 600; }
  .searchable-select-option.is-selected::before { content: '✓ '; color: var(--accent); }
  .searchable-select-empty { padding: 12px 14px; font-size: 13px; color: var(--text-muted); font-style: italic; }

  /* STATS */
  .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; }
  .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
  .stat-label { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); }
  .stat-value { font-family: 'Rajdhani', sans-serif; font-size: 42px; font-weight:700; letter-spacing: 1px; color: var(--text); line-height: 1.1; margin-top: 4px; }
  .stat-card.accent .stat-value { color: var(--accent); }
  .stat-card.green .stat-value { color: var(--green); }
  .stat-card.blue .stat-value { color: var(--blue); }
  .stat-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

  /* TABLE */
  .table-wrapper { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
  .table-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  table { width: 100%; border-collapse: collapse; }
  thead tr { background: var(--surface2); }
  th { text-align: left; padding: 12px 16px; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
  td { padding: 14px 16px; font-size: 13px; border-top: 1px solid var(--border); vertical-align: middle; }
  tr:hover td { background: rgba(255,255,255,0.02); }

  .badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; letter-spacing: 0.5px; }
  .badge-active { background: rgba(34,197,94,0.15); color: var(--green); }
  .badge-inactive { background: rgba(239,68,68,0.12); color: var(--red); }
  .badge-pending { background: rgba(245,158,11,0.15); color: var(--yellow); }
  .badge-progress { background: rgba(59,130,246,0.15); color: var(--blue); }
  .badge-done { background: rgba(34,197,94,0.15); color: var(--green); }
  .badge-pagado { background: rgba(46,184,114,0.13); color: var(--green); border: 1px solid rgba(46,184,114,0.25); }
  .badge-parcial { background: rgba(74,158,255,0.12); color: var(--blue); border: 1px solid rgba(74,158,255,0.25); }
  .badge-pago-pend { background: rgba(232,160,32,0.13); color: var(--yellow); border: 1px solid rgba(232,160,32,0.25); }

  .pago-box { background: var(--surface2); border: 1px solid var(--border2); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; }
  .pago-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 13px; border-bottom: 1px solid var(--border); }
  .pago-row:last-child { border-bottom: none; padding-bottom: 0; font-weight: 700; font-size: 15px; }
  .pago-row-label { color: var(--text-muted); font-family: 'Barlow Condensed',sans-serif; letter-spacing:.5px; text-transform:uppercase; font-size:11px; }
  .pago-row-val { font-family: 'JetBrains Mono',monospace; font-weight:600; }
  .pago-row-val.green { color: var(--green); }
  .pago-row-val.red { color: var(--red); }
  .pago-row-val.yellow { color: var(--yellow); }
  .pago-hist-item { display:flex; flex-direction:column; gap:10px; padding:12px 14px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:8px; transition: border-color 0.15s; }
  .pago-hist-item:hover { border-color: var(--border2); }
  .pago-hist-top { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
  .pago-hist-left { flex:1; min-width:0; }
  .pago-hist-monto { font-family:'JetBrains Mono',monospace; font-size:16px; font-weight:700; color:var(--green); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .pago-hist-meta { font-size:12px; color:var(--text-muted); margin-top:4px; line-height:1.45; }
  .pago-hist-right { text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
  .pago-hist-fecha { font-size:12px; color:var(--text-muted); font-family:'JetBrains Mono',monospace; }
  .pago-hist-obs { font-size:12px; color:var(--chrome3); margin-top:4px; line-height:1.4; }
  .pago-hist-actions { display:flex; justify-content:flex-end; gap:6px; padding-top:8px; border-top:1px dashed var(--border); }
  .pago-hist-delete { font-size:11px !important; padding:5px 10px !important; }
  /* legacy trash (kept for backward compat, hidden if no label) */
  .pago-delete-btn { background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:14px; padding:2px; transition:color 0.15s; }
  .pago-delete-btn:hover { color:var(--red); }

  /* SPLIT PAYMENT CARDS (pago dividido) */
  .pago-split-grid { display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin:14px 0; }
  .pago-split-card { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; display:flex; flex-direction:column; gap:12px; }
  .pago-split-taller { border-left: 3px solid var(--green); }
  .pago-split-prov { border-left: 3px solid var(--blue); }
  .pago-split-head { font-family:'Rajdhani',sans-serif; font-size:15px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--text); padding-bottom:6px; border-bottom:1px solid var(--border); }
  .pago-split-taller .pago-split-head { color: var(--green); }
  .pago-split-prov .pago-split-head { color: var(--blue); }
  .td-actions { display: flex; gap: 6px; align-items: center; flex-wrap:wrap; }

  /* MODAL */
  .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); z-index: 200; align-items: center; justify-content: center; }
  .modal-overlay.open { display: flex; }
  /* Header de form-group con label + botón inline a la derecha (ej. "+ Nuevo cliente"
     en el modal-turno). Permite acciones contextuales sin romper el layout vertical. */
  .form-group-header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 4px; }
  .form-group-header label { margin-bottom: 0; }
  .btn-link-add { background: none; border: none; color: var(--chrome-shine); cursor: pointer; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 6px; border-radius: 4px; transition: all 0.15s; font-family: 'Rajdhani', sans-serif; }
  .btn-link-add:hover { color: var(--chrome); background: rgba(200, 205, 214, 0.08); text-decoration: underline; }
  .btn-link-add:active { transform: translateY(1px); }
  .modal { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; width: 90%; max-width: 680px; max-height: 90vh; overflow-y: auto; animation: modalIn 0.2s ease; }
  @keyframes modalIn { from { opacity:0; transform: scale(0.96) translateY(10px); } to { opacity:1; transform: scale(1) translateY(0); } }
  .modal-head { padding: 24px 28px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
  .modal-title { font-family: 'Rajdhani', sans-serif; font-size: 24px; font-weight:700; letter-spacing: 1px; color: var(--text); }
  .modal-body { padding: 24px 28px; }
  .modal-footer { padding: 16px 28px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; flex-wrap:wrap; }

  /* CONFIRM MODAL (2-step) */
  .confirm-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.8); backdrop-filter:blur(6px); z-index:300; align-items:center; justify-content:center; }
  .confirm-overlay.open { display:flex; }
  .confirm-box { background:var(--surface); border:1px solid var(--border2); border-radius:var(--radius-lg); padding:32px; max-width:420px; width:90%; text-align:center; animation:modalIn 0.2s ease; }
  .confirm-icon { font-size:48px; margin-bottom:16px; }
  .confirm-title { font-family:'Rajdhani',sans-serif; font-size:22px; font-weight:700; color:var(--text); margin-bottom:8px; letter-spacing:1px; }
  .confirm-msg { font-size:14px; color:var(--text-muted); margin-bottom:24px; line-height:1.6; white-space: pre-line; }
  .confirm-actions { display:flex; gap:12px; justify-content:center; }

  /* FORM */
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: start; }
  .form-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .form-group.full { grid-column: 1 / -1; }
  /* Any direct child of a form-grid with class 'full' spans all columns (fixes
     wrappers like #p-taller-mode.full / #p-dividido-mode.full that are NOT form-group) */
  .form-grid > .full { grid-column: 1 / -1; }
  /* Nested sections inside a mode wrapper should behave as block and take full width */
  #p-taller-mode, #p-dividido-mode, #p-transferir-mode { display: block; width: 100%; }
  #p-taller-mode > .form-grid,
  #p-dividido-mode > .form-grid,
  #p-transferir-mode > .form-grid { margin: 0; }
  /* Notes / info boxes inside a mode wrapper fill the row */
  #p-taller-mode > .u-note-blue,
  #p-dividido-mode > .u-note-blue,
  #p-transferir-mode > .u-note-blue { display: block; width: 100%; box-sizing: border-box; }
  label { font-size: 12px; font-weight: 600; letter-spacing: 0.5px; color: var(--text-muted); text-transform: uppercase; }
  input, select, textarea { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); padding: 9px 13px; font-family: 'Barlow', sans-serif; font-size: 14px; outline: none; transition: border-color 0.15s; width: 100%; }
  input:focus, select:focus, textarea:focus { border-color: var(--accent); }

  /* Checklist de mecánicos en el modal de reparación */
  .mecanicos-details { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
  .mecanicos-summary-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; user-select: none; list-style: none; transition: background 0.12s; }
  .mecanicos-summary-row::-webkit-details-marker { display: none; }
  .mecanicos-summary-row:hover { background: var(--surface3, rgba(255,255,255,0.04)); }
  .mecanicos-summary-icon { font-size: 16px; flex: 0 0 auto; }
  .mecanicos-summary-text { flex: 1 1 auto; font-size: 14px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mecanicos-summary-text.mec-summary-empty { color: var(--text-muted); font-style: italic; font-weight: 400; }
  .mecanicos-summary-caret { font-size: 12px; color: var(--text-muted); flex: 0 0 auto; transition: transform 0.15s; }
  .mecanicos-details[open] .mecanicos-summary-caret { transform: rotate(180deg); }
  .mecanicos-details[open] .mecanicos-summary-row { border-bottom: 1px solid var(--border); }
  .mecanicos-checklist { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; max-height: 220px; overflow-y: auto; }
  .mecanicos-checklist-item { display: flex; align-items: center; gap: 10px; padding: 6px 4px; cursor: pointer; user-select: none; border-radius: 6px; transition: background 0.12s; }
  .mecanicos-checklist-item:hover { background: var(--surface3, rgba(255,255,255,0.04)); }
  .mecanicos-checklist-item input[type="checkbox"] { width: auto; margin: 0; cursor: pointer; flex: 0 0 auto; }
  .mecanicos-checklist-item .mec-nombre { font-size: 14px; font-weight: 500; }
  .mecanicos-checklist-item .mec-puesto { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
  .mecanicos-checklist-empty { color: var(--text-muted); font-size: 13px; font-style: italic; text-align: center; padding: 12px; }
  textarea { resize: vertical; min-height: 80px; }
  select option { background: var(--surface); }

  /* VIEW */
  .view-section { margin-bottom: 24px; }
  .view-section-title { font-family: 'Rajdhani', sans-serif; font-size: 18px; font-weight:700; letter-spacing: 1px; color: var(--accent); margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
  .view-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .view-item.view-item-full { grid-column: 1 / -1; }
  .view-item-label { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
  .view-item-value { font-size: 14px; color: var(--text); margin-top: 2px; }

  /* HISTORY */
  .history-card { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; }
  .history-card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
  .history-card-title { font-weight: 600; font-size: 15px; color: var(--text); }
  .history-card-date { font-size: 12px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }
  .history-card-footer { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

  /* EMPTY */
  .empty { text-align: center; padding: 60px 20px; color: var(--text-muted); }
  .empty-icon { font-size: 48px; margin-bottom: 12px; }
  .empty-text { font-size: 16px; margin-bottom: 6px; color: var(--text); }

  .mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
  .page { display: none; }
  .page.active { display: block; }
  .close-btn { background: none; border: none; color: var(--text-muted); font-size: 22px; cursor: pointer; padding: 4px; transition: color 0.15s; }
  .close-btn:hover { color: var(--text); }

  /* TOAST */
  .toast { position: fixed; bottom: 24px; right: 24px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 20px; font-size: 14px; color: var(--text); z-index: 999; opacity: 0; transform: translateY(8px); transition: all 0.25s; pointer-events: none; max-width: 320px; }
  .toast.show { opacity: 1; transform: translateY(0); }
  .toast.success { border-left: 3px solid var(--green); }
  .toast.error { border-left: 3px solid var(--red); }
  .toast.info { border-left: 3px solid var(--blue); }

  ::-webkit-scrollbar { width: 5px; height: 5px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }

  /* ========== CALENDARIO ========== */
  .cal-wrapper { display: grid; grid-template-columns: 1fr 300px; gap: 18px; align-items: start; }
  .cal-main { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
  .cal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
  .cal-title { font-family: 'Rajdhani', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: 2px; color: var(--chrome); text-transform: uppercase; }
  .cal-nav { display: flex; gap: 6px; align-items: center; }
  .cal-nav-btn { background: var(--surface2); border: 1px solid var(--border2); color: var(--text); border-radius: var(--radius); width: 32px; height: 32px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 15px; transition: all 0.15s; }
  .cal-nav-btn:hover { border-color: var(--chrome3); color: var(--chrome); }
  .cal-today-btn { background: var(--surface2); border: 1px solid var(--border2); color: var(--text-muted); border-radius: var(--radius); padding: 5px 12px; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.15s; font-family: 'Barlow Condensed', sans-serif; letter-spacing: 1px; text-transform: uppercase; }
  .cal-today-btn:hover { border-color: var(--chrome3); color: var(--chrome); }
  .cal-grid-header { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--surface2); border-bottom: 1px solid var(--border); }
  .cal-day-name { text-align: center; padding: 8px 4px; font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); font-family: 'Barlow Condensed', sans-serif; }
  .cal-day-name.weekend { color: var(--chrome3); }
  .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
  .cal-cell { min-height: 100px; padding: 7px 5px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.1s; }
  .cal-cell:nth-child(7n) { border-right: none; }
  .cal-cell:hover { background: rgba(200,205,214,0.03); }
  .cal-cell.other-month { opacity: 0.25; }
  .cal-cell.today { background: rgba(200,205,214,0.04); }
  .cal-cell.selected { background: rgba(200,205,214,0.08); outline: 1px solid rgba(200,205,214,0.2); outline-offset: -1px; }
  .cal-date { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; display: flex; align-items: center; justify-content: space-between; font-family: 'Barlow Condensed', sans-serif; }
  .cal-cell.today .cal-date { color: var(--chrome); }
  .cal-today-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--chrome); }
  .cal-event { font-size: 10px; font-weight: 600; padding: 2px 5px; border-radius: 3px; margin-bottom: 2px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.1s; border-left: 2px solid; font-family: 'Barlow Condensed', sans-serif; }
  .cal-event:hover { opacity: 0.8; }
  .cal-event.confirmado { background: rgba(46,184,114,0.12); color: var(--green); border-color: var(--green); }
  .cal-event.pendiente { background: rgba(232,160,32,0.12); color: var(--yellow); border-color: var(--yellow); }
  .cal-event.cancelado { background: rgba(224,82,82,0.08); color: var(--red); border-color: var(--red); opacity: 0.5; }
  .cal-event.en-proceso { background: rgba(74,158,255,0.1); color: var(--blue); border-color: var(--blue); }
  .cal-more { font-size: 10px; color: var(--text-muted); padding: 1px 4px; cursor: pointer; font-family: 'Barlow Condensed', sans-serif; }
  .cal-more:hover { color: var(--chrome); }
  .cal-sidebar { display: flex; flex-direction: column; gap: 14px; }
  .cal-sidebar-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
  .cal-sidebar-title { padding: 12px 14px; border-bottom: 1px solid var(--border); font-family: 'Rajdhani', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 1.5px; color: var(--chrome2); text-transform: uppercase; }
  .cal-sidebar-body { padding: 10px; }
  .turno-item { padding: 9px 10px; border-radius: var(--radius); background: var(--surface2); border: 1px solid var(--border); margin-bottom: 7px; cursor: pointer; transition: border-color 0.15s; }
  .turno-item:hover { border-color: var(--chrome3); }
  .turno-item-time { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--chrome2); font-weight: 600; }
  .turno-item-name { font-size: 13px; font-weight: 600; color: var(--text); margin-top: 2px; }
  .turno-item-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
  .mini-cal { padding: 10px; }
  .mini-cal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
  .mini-cal-title { font-size: 12px; font-weight: 600; color: var(--text); font-family: 'Barlow Condensed', sans-serif; letter-spacing: 1px; text-transform: uppercase; }
  .mini-nav { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 13px; padding: 2px 5px; border-radius: 3px; }
  .mini-nav:hover { color: var(--chrome); }
  .mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
  .mini-day-name { text-align: center; font-size: 8px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); padding: 3px 0; font-family: 'Barlow Condensed', sans-serif; }
  .mini-day { text-align: center; font-size: 11px; padding: 4px 2px; border-radius: 3px; cursor: pointer; color: var(--text-muted); transition: all 0.1s; font-family: 'Barlow Condensed', sans-serif; position:relative; }
  .mini-day:hover { background: var(--surface2); color: var(--text); }
  .mini-day.today { background: rgba(200,205,214,0.1); color: var(--chrome); font-weight: 700; }
  .mini-day.selected { background: var(--chrome2); color: #080909; font-weight: 700; }
  .mini-day.has-ev::after { content:''; position:absolute; bottom:1px; left:50%; transform:translateX(-50%); width:3px; height:3px; border-radius:50%; background:var(--chrome3); }
  .mini-day.other { opacity: 0.2; }

  /* ========== MOBILE NAV ========== */
  .mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; height: var(--mobile-nav-visible); background: linear-gradient(0deg, #070809, #0d0f12); border-top: 1px solid var(--border2); z-index: 200; align-items: center; padding: 0 4px var(--safe-bottom) 4px; box-shadow: 0 -4px 24px rgba(0,0,0,0.6); overflow: visible; }
  /* Chrome iOS animates its bottom toolbar and temporarily shifts fixed-bottom UI upward.
     This hidden bleed extends the tabbar below the viewport so the transition stays visually attached. */
  .mobile-nav::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: var(--mobile-nav-bleed); background: #070809; pointer-events: none; }
  .mobile-nav-items { display: flex; width: 100%; justify-content: space-around; align-items: center; gap: 2px; }
  .mobile-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 56px; padding: 7px 6px; cursor: pointer; flex: 1; color: var(--text-muted); transition: color 0.18s ease, background 0.18s ease; position: relative; border: 0; background: transparent; border-radius: 12px; font: inherit; appearance: none; -webkit-appearance: none; touch-action: manipulation; }
  .mobile-nav-item.active,
  .mobile-nav-item.is-open,
  .mobile-nav-item[aria-expanded="true"] { color: var(--chrome); }
  .mobile-nav-item.active::before,
  .mobile-nav-item.is-open::before,
  .mobile-nav-item[aria-expanded="true"]::before { content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 2px; background: linear-gradient(90deg, transparent, var(--chrome2), transparent); }
  .mobile-nav-item:active { background: rgba(200,205,214,0.06); }
  .mobile-nav-icon { font-size: 25px; line-height: 1; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.04); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
  .mobile-nav-item.active .mobile-nav-icon,
  .mobile-nav-item.is-open .mobile-nav-icon,
  .mobile-nav-item[aria-expanded="true"] .mobile-nav-icon { transform: translateY(-1px) scale(1.04); background: linear-gradient(180deg, rgba(200,205,214,0.18), rgba(200,205,214,0.08)); border-color: rgba(200,205,214,0.18); box-shadow: 0 8px 18px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.16); }
  .mobile-nav-label { font-size: 9px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; font-family: 'Barlow Condensed', sans-serif; }
  .mobile-more-layer { position: fixed; inset: 0; z-index: 195; visibility: hidden; pointer-events: none; }
  .mobile-more-layer.open { visibility: visible; pointer-events: auto; }
  .mobile-more-overlay { position: fixed; inset: 0 0 var(--mobile-nav-visible) 0; background: rgba(0,0,0,0.66); backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.2s ease; pointer-events: none; border: 0; margin: 0; padding: 0; }
  .mobile-more-layer.open .mobile-more-overlay { opacity: 1; pointer-events: auto; }
  .mobile-more-sheet { position: fixed; left: 0; right: 0; bottom: var(--mobile-nav-visible); max-height: min(560px, calc(100vh - var(--mobile-nav-visible) - 14px)); max-height: min(560px, calc(100dvh - var(--mobile-nav-visible) - 14px)); background: linear-gradient(180deg, #161a1e 0%, #0d0f12 100%); border-top: 1px solid var(--border2); border-radius: 20px 20px 0 0; padding: 0 0 12px; box-shadow: 0 -18px 56px rgba(0,0,0,0.55); transform: translateY(calc(100% + 18px)); opacity: 0; transition: transform 0.24s cubic-bezier(0.22,1,0.36,1), opacity 0.18s ease; pointer-events: none; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .mobile-more-layer.open .mobile-more-sheet { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .mobile-more-head { position: sticky; top: 0; background: linear-gradient(180deg, rgba(22,26,30,0.98) 0%, rgba(13,15,18,0.94) 100%); backdrop-filter: blur(12px); z-index: 1; border-bottom: 1px solid rgba(255,255,255,0.03); }
  .more-handle { width: 36px; height: 4px; background: var(--border2); border-radius: 999px; margin: 10px auto 8px; }
  .mobile-more-header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px 12px; }
  .mobile-more-title { font-family: 'Rajdhani', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: 1px; color: var(--chrome-shine); }
  .mobile-more-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
  .mobile-more-close { width: 40px; height: 40px; border: 1px solid var(--border2); border-radius: 12px; background: var(--surface2); color: var(--chrome); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 20px; flex-shrink: 0; }
  .mobile-more-close:active { background: rgba(200,205,214,0.08); }
  .mobile-more-content { padding-bottom: 4px; }
  .mobile-more-section { padding-top: 14px; }
  .mobile-more-section-label { position: relative; display: flex; align-items: center; justify-content: center; padding: 22px 16px 10px; font-size: 10px; color: var(--text-dim); letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700; text-align: center; }
  .mobile-more-section-label::before { content: ''; position: absolute; top: 0; left: 16px; right: 16px; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 12%, rgba(176,182,193,0.3) 50%, rgba(255,255,255,0.06) 88%, transparent 100%); pointer-events: none; }
  .mobile-more-section-label::after { content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 88px; height: 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.1); background: radial-gradient(circle at 22px 50%, rgba(255,255,255,0.18) 0 1.2px, transparent 2.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.32) 0 1.5px, transparent 2.6px), radial-gradient(circle at calc(100% - 22px) 50%, rgba(255,255,255,0.18) 0 1.2px, transparent 2.2px), linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.08), rgba(255,255,255,0.03)); box-shadow: 0 0 24px rgba(255,255,255,0.05); pointer-events: none; }
  .more-item { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 20px; cursor: pointer; color: var(--text-muted); font-size: 15px; font-family: 'Barlow', sans-serif; transition: background 0.12s ease, color 0.12s ease; border: 0; border-bottom: 1px solid var(--border); background: transparent; text-align: left; appearance: none; -webkit-appearance: none; touch-action: manipulation; }
  .more-item:last-child { border-bottom: none; }
  .more-item:active { background: rgba(200,205,214,0.05); color: var(--chrome); }
  .more-item-icon { font-size: 20px; width: 24px; text-align: center; }
  .more-item.danger { color: var(--red); }

  /* ========== SYSTEM UTILITIES ========== */
  .u-hidden { display: none !important; }
  .u-flex { display: flex; }
  .u-flex-1 { flex: 1; }
  .u-flex-center { display: flex; align-items: center; }
  .u-flex-center-gap-4 { display: flex; align-items: center; gap: 4px; }
  .u-flex-center-gap-6 { display: flex; align-items: center; gap: 6px; }
  .u-flex-center-gap-8 { display: flex; align-items: center; gap: 8px; }
  .u-flex-wrap-gap-6 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .u-flex-wrap-gap-8 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .u-flex-col-gap-8 { display: flex; flex-direction: column; gap: 8px; }
  .u-flex-col-gap-12 { display: flex; flex-direction: column; gap: 12px; }
  .u-flex-col-gap-14 { display: flex; flex-direction: column; gap: 14px; }
  .u-flex-between-center { display: flex; justify-content: space-between; align-items: center; }
  .u-flex-between-center-gap-10 { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .u-gap-6 { gap: 6px; }
  .u-gap-8 { gap: 8px; }
  .u-gap-10 { gap: 10px; }
  .u-gap-16 { gap: 16px; }
  .u-shrink-0 { flex-shrink: 0; }
  .u-size-16 { width: 16px; height: 16px; }
  .u-p-4 { padding: 4px; }
  .u-p-8-12 { padding: 8px 12px; }
  .u-p-8-14 { padding: 8px 14px; }
  .u-p-10-14 { padding: 10px 14px; }
  .u-p-12 { padding: 12px; }
  .u-p-12-14 { padding: 12px 14px; }
  .u-p-20 { padding: 20px; }
  .u-p-12-16 { padding: 12px 16px; }
  .u-p-16 { padding: 16px; }
  .u-p-30 { padding: 30px; }
  .u-mb-4 { margin-bottom: 4px; }
  .u-mt-4 { margin-top: 4px; }
  .u-mb-8 { margin-bottom: 8px; }
  .u-mb-10 { margin-bottom: 10px; }
  .u-mb-12 { margin-bottom: 12px; }
  .u-mb-16 { margin-bottom: 16px; }
  .u-mb-20 { margin-bottom: 20px; }
  .u-mt-6 { margin-top: 6px; }
  .u-mt-8 { margin-top: 8px; }
  .u-mt-10 { margin-top: 10px; }
  .u-mt-12 { margin-top: 12px; }
  .u-mt-14 { margin-top: 14px; }
  .u-mt-16 { margin-top: 16px; }
  .u-text-muted { color: var(--text-muted); }
  .u-hint-sm { font-weight: 400; font-size: 11px; }
  .u-text-default { color: var(--text); }
  .u-text-dim { color: var(--text-dim); }
  .u-text-accent { color: var(--accent); }
  .u-text-accent-strong { color: var(--accent); font-weight: 700; }
  .u-text-chrome { color: var(--chrome); }
  .u-text-chrome-shine { color: var(--chrome-shine); }
  .u-text-chrome2 { color: var(--chrome2); }
  .u-text-orange { color: var(--orange); }
  .u-text-green { color: var(--green); }
  .u-text-yellow { color: var(--yellow); }
  .u-text-red { color: var(--red); }
  .u-fs-10 { font-size: 10px; }
  /* Mini-historial de sueldos en el modal de empleado (versionado por mes). */
  .u-sueldo-historial { margin-top: 8px; padding: 8px 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); }
  .u-sueldo-historial-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); font-weight: 600; margin-bottom: 4px; }
  .u-sueldo-historial-row { font-size: 12px; color: var(--text); font-family: 'JetBrains Mono', monospace; padding: 1px 0; }
  /* Toggle "🔁 Se repite todos los meses" en el modal de insumo (2026-09-08) */
  .u-recurrente-wrap { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; background: var(--surface2); }
  .u-recurrente-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; margin: 0; }
  .u-recurrente-toggle input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--yellow); cursor: pointer; }
  /* Caja de baja / egreso en el modal de empleado */
  .op-baja-box { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; background: var(--surface2); display: flex; flex-direction: column; gap: 12px; }
  .op-baja-title { font-size: 12px; font-weight: 700; color: var(--text); }
  .u-fs-11 { font-size: 11px; }
  .u-fs-12 { font-size: 12px; }
  .u-fs-13 { font-size: 13px; }
  .u-fs-14 { font-size: 14px; }
  .u-fs-15 { font-size: 15px; }
  .u-fs-16 { font-size: 16px; }
  .u-fs-18 { font-size: 18px; }
  .u-fs-20 { font-size: 20px; }
  .u-fs-28 { font-size: 28px; }
  .u-fs-32 { font-size: 32px; }
  .u-fs-48 { font-size: 48px; }
  .u-fw-500 { font-weight: 500; }
  .u-fw-600 { font-weight: 600; }
  .u-fw-700 { font-weight: 700; }
  .u-mono { font-family: 'JetBrains Mono', monospace; }
  .u-letter-1 { letter-spacing: 1px; }
  .u-letter-2 { letter-spacing: 2px; }
  .u-letter-05 { letter-spacing: 0.5px; }
  .u-uppercase { text-transform: uppercase; }
  .u-lh-145 { line-height: 1.45; }
  .u-lh-16 { line-height: 1.6; }
  .u-lh-165 { line-height: 1.65; }
  .u-lh-17 { line-height: 1.7; }
  .u-text-center { text-align: center; }
  .u-row-divider { border-top: 1px solid var(--border); }
  .u-row-divider-strong { border-top: 2px solid var(--border2); }
  .u-card-surface { background: var(--surface); }
  .u-card-surface-2 { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); }
  .u-panel-accent { margin-top: 16px; padding: 12px 16px; background: rgba(200,205,214,0.06); border: 1px solid rgba(200,205,214,0.15); border-radius: 8px; color: var(--accent); }
  .u-panel-info { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); }
  .u-note-blue { background: rgba(45,140,255,0.05); border: 1px solid rgba(45,140,255,0.15); border-radius: 8px; padding: 12px; margin-bottom: 16px; font-size: 13px; color: var(--text-dim); }
  .u-note-blue-tight { background: rgba(45,140,255,0.05); border: 1px solid rgba(45,140,255,0.15); border-radius: 8px; padding: 12px 14px; font-size: 12px; color: var(--text-muted); line-height: 1.65; }
  .u-note-orange { background: rgba(255,138,31,0.06); border: 1px solid rgba(255,138,31,0.15); border-radius: 8px; padding: 10px 14px; font-size: 12px; }
  .u-inline-feedback { grid-column: 1 / -1; border-radius: 8px; padding: 11px 13px; font-size: 13px; line-height: 1.5; }
  .u-inline-feedback.error { background: rgba(224,82,82,0.08); border: 1px solid rgba(224,82,82,0.18); color: var(--red); }
  .u-inline-feedback.success { background: rgba(46,184,114,0.08); border: 1px solid rgba(46,184,114,0.18); color: var(--green); }
  .u-inline-feedback.info { background: rgba(45,140,255,0.06); border: 1px solid rgba(45,140,255,0.16); color: var(--text-dim); }
  .u-scroll-y-70 { max-height: 70vh; overflow-y: auto; }
  .u-scroll-y-45 { max-height: 45vh; overflow-y: auto; }
  .u-scroll-y-180 { max-height: 180px; overflow-y: auto; }
  .u-clickable { cursor: pointer; }
  .u-history-meta { font-size: 12px; color: var(--text-muted); }
  .u-history-detail { font-size: 13px; color: var(--text-muted); }
  .u-history-detail-tight { margin-bottom: 8px; font-size: 13px; color: var(--text-muted); }
  .u-history-detail-pre { font-size: 13px; line-height: 1.7; white-space: pre-wrap; }
  .u-inline-badges { display: flex; gap: 6px; align-items: center; }
  .u-code-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .u-code-access { font-size: 18px; font-weight: 700; letter-spacing: 2px; color: var(--chrome2); }
  .u-empty-copy { color: var(--text-muted); font-size: 13px; }
  .u-empty-copy-pad { color: var(--text-muted); font-size: 13px; padding: 8px 0; }
  .u-search-summary { margin-bottom: 16px; font-size: 12px; color: var(--text-muted); font-family: 'Barlow Condensed', sans-serif; letter-spacing: 1px; text-transform: uppercase; }
  .u-search-section-title { margin-bottom: 10px; font-family: 'Rajdhani', sans-serif; font-size: 18px; font-weight: 700; color: var(--accent); letter-spacing: 1px; }
  .u-plate-accent { color: var(--accent); }
  .u-row-title { font-size: 14px; font-weight: 600; }
  .u-nowrap { white-space: nowrap; }
  .u-grid-col-full { grid-column: 1 / -1; }
  .u-text-transform-upper { text-transform: uppercase; }
  .u-grid-gap-16 { gap: 16px; }
  .u-search-input-wrap { max-width: 600px; flex: 1; }
  .u-count-label { font-size: 13px; color: var(--text-muted); }
  .u-modal-info-box { margin-bottom: 16px; }
  .u-modal-info-box-sm { margin-bottom: 14px; }
  .u-table-wrapper-mb-16 { margin-bottom: 16px; }
  .u-table-wrapper-mb-14 { margin-bottom: 14px; }
  .u-table-wrapper-mt-14 { margin-top: 14px; }
  .u-table-header-actions { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
  .u-activity-actions { display: flex; gap: 6px; align-items: center; }
  .u-select-all-label { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; cursor: pointer; }
  .u-footer-note { margin-top: 12px; font-size: 12px; color: var(--text-dim); }
  .u-inline-money-row { display: flex; gap: 8px; align-items: center; }
  .u-currency-sign { font-size: 16px; color: var(--text-muted); font-weight: 600; }
  .u-money-input { font-family: 'JetBrains Mono', monospace; font-size: 15px; max-width: 200px; }
  .u-input-green-readonly { background: var(--surface2); color: var(--green); font-weight: 700; }
  .u-stat-card-top-green { border-top: 2px solid var(--green); }
  .u-stat-card-top-red { border-top: 2px solid var(--red); }
  .u-stat-card-top-yellow { border-top: 2px solid var(--yellow); }
  .u-pill { padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 600; }
  .u-pill-yellow { background: rgba(232,160,32,0.12); color: var(--yellow); }
  .u-pill-blue { background: rgba(45,140,255,0.12); color: var(--blue); }
  .u-provider-saldo-row { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; }
  .u-provider-saldo-label { font-size: 12px; color: var(--text-muted); }
  .u-provider-saldo-amount { font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 600; }
  .u-provider-inline-info { font-size: 13px; color: var(--text-muted); display: flex; gap: 16px; flex-wrap: wrap; }
  .u-provider-summary-panel { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; text-align: center; }
  .u-provider-summary-subtitle { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }
  .u-provider-summary-amount { font-family: 'JetBrains Mono', monospace; font-size: 32px; font-weight: 700; color: var(--red); }
  .u-provider-debt-title { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; font-weight: 600; letter-spacing: 0.5px; }
  .u-provider-debt-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
  .u-provider-debt-left { color: var(--text-dim); }
  .u-provider-debt-ref { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-muted); }
  .u-provider-debt-right { font-family: 'JetBrains Mono', monospace; color: var(--red); }
  .u-provider-summary-balance-green { color: var(--green); }
  .u-provider-summary-balance-red { color: var(--red); }
  .u-piezas-head-sm { width: 90px; }
  .u-piezas-head-md { width: 140px; }
  .u-piezas-head-boleta { width: 110px; }
  .u-piezas-head-xs { width: 30px; }
  /* Input N° Boleta de una pieza con proveedor pero sin boleta cargada:
     resalte sutil — la boleta es obligatoria al guardar cuando hay proveedor. */
  .pieza-input--falta-boleta { border-color: var(--yellow) !important; background: rgba(232,160,32,0.06); }
  .u-piezas-free-text { font-size: 13px; line-height: 1.6; }
  .u-piezas-cost { color: var(--text-muted); }
  .u-piezas-sale { color: var(--chrome-shine); font-weight: 600; }
  .u-piezas-total-label { font-weight: 600; color: var(--text-muted); }
  .u-piezas-total-sale { color: var(--chrome-shine); font-weight: 700; font-size: 14px; }
  .u-login-input-stack { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
  .u-sidebar-version { margin-top: 8px; }
  .u-panel-grid-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .u-search-result-shell { padding: 20px; }
  .u-calendar-empty-copy { color: var(--text-muted); font-size: 13px; padding: 4px; }
  .u-calendar-legend { display: flex; flex-direction: column; gap: 8px; }
  .u-calendar-legend-row { display: flex; align-items: center; gap: 8px; }
  .u-calendar-legend-row .cal-event { margin: 0; flex: 1; }
  .u-topbar-title-wrap { display: flex; align-items: center; }
  .u-operator-panel-copy { padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; }
  .u-operator-panel-copy strong { font-size: 13px; letter-spacing: .5px; }
  .u-operator-panel-copy-text { font-size: 12px; color: var(--text-muted); line-height: 1.65; }
  .u-history-actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
  .u-history-tags { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
  .u-repair-status-row { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border2); }
  .u-repair-saldo-panel-title { color: var(--orange); font-weight: 600; margin-bottom: 6px; }
  .u-repair-saldo-row { display: flex; justify-content: space-between; padding: 2px 0; color: var(--text-dim); }
  .u-table-subline { font-size: 11px; color: var(--text-muted); }
  .u-table-muted-cell { font-size: 12px; color: var(--text-muted); }
  .u-table-money-cell { color: var(--chrome2); font-weight: 600; }
  .u-table-balance-cell { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
  .u-table-plate-strong { color: var(--accent); font-size: 15px; }
  .u-login-error-warning { color: var(--yellow); }
  .u-login-btn-loading { opacity: 0.6; }
  .u-activity-checkbox { flex-shrink: 0; cursor: pointer; width: 16px; height: 16px; margin-top: 4px; }
  .modal.modal-w-440 { max-width: 440px; }
  .modal.modal-w-480 { max-width: 480px; }
  .modal.modal-w-520 { max-width: 520px; }
  .modal.modal-w-620 { max-width: 620px; }
  .modal.modal-w-720 { max-width: 760px; }
  .modal.modal-w-780 { max-width: 780px; }

  /* ========== MOBILE BACK BUTTON ========== */
  .mobile-back-btn { display: none; background: var(--surface2); border: 1px solid var(--border); color: var(--chrome); font-size: 16px; font-weight: 700; cursor: pointer; padding: 6px 12px; margin-right: 10px; line-height: 1; border-radius: 10px; transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.08s; min-width: 38px; min-height: 34px; align-items: center; justify-content: center; }
  .mobile-back-btn:hover { background: rgba(200,205,214,0.08); border-color: var(--chrome3); color: var(--chrome-shine); }
  .mobile-back-btn:active { transform: translateX(-2px); }

  /* ========== RESPONSIVE ========== */
  @media (max-width: 768px) {
    .sidebar { display: none; }
    body.mobile-more-open { overflow: hidden; }
    .main { margin-left: 0; padding-bottom: var(--mobile-nav-visible); }
    .mobile-nav { display: flex; }
    .topbar { padding: 12px 16px; }
    .page-title { font-size: 18px; }
    .content { padding: 14px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
    .stats-grid .stat-value { font-size: 26px !important; }
    .stat-value { font-size: 32px; }
    .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; }
    .table-wrapper::-webkit-scrollbar { height: 6px; }
    .table-wrapper::-webkit-scrollbar-track { background: var(--surface2); border-radius: 3px; }
    .table-wrapper::-webkit-scrollbar-thumb { background: var(--chrome3); border-radius: 3px; }
    table { min-width: 600px; }
    table th, table td { padding: 10px 10px; font-size: 12px; white-space: nowrap; }
    .td-actions { display: flex; gap: 4px; flex-wrap: nowrap; }
    .td-actions .btn { padding: 4px 8px; font-size: 11px; }
    .form-grid { grid-template-columns: 1fr; }
    .pago-split-grid { grid-template-columns: 1fr; gap: 10px; margin: 12px 0; }
    .pago-hist-top { flex-direction: column; align-items: flex-start; }
    .pago-hist-right { align-items: flex-start; width: 100%; }
    .pago-hist-actions { justify-content: flex-start; }
    .view-grid { grid-template-columns: 1fr; }
    .cal-wrapper { grid-template-columns: 1fr; }
    .cal-sidebar { display: none; }
    .cal-cell { min-height: 56px; padding: 4px 3px; }
    .cal-event { display: none; }
    .cal-cell.has-turnos .cal-date::after { content: ' ●'; color: var(--yellow); font-size: 8px; }
    .toast { bottom: calc(var(--mobile-nav-visible) + 10px); left: 14px; right: 14px; max-width: none; }
    .modal-overlay, .confirm-overlay { align-items: flex-end; padding: 0; }
    .modal { max-height: 88vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; width: 100%; max-width: 100%; }
    /* Padding modal reducido en mobile para ganar espacio horizontal — antes estaba
       solo en <480px lo que dejaba 24px de padding en 481-768px (tablets/phones grandes). */
    .modal-head { padding: 16px 18px 14px; }
    .modal-body { padding: 16px 18px; }
    .modal-footer { padding: 12px 18px; gap: 8px; }
    .modal-title { font-size: 20px; letter-spacing: 0.5px; }
    .confirm-box { border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-width: 100%; padding: 24px 20px; }
    .mobile-back-btn.show { display: inline-flex; }
    .hide-mobile { display: none !important; }
    #dash-grid { grid-template-columns: 1fr !important; }
    .prov-cards { grid-template-columns: 1fr !important; }
    .activity-filter { flex-wrap: wrap; gap: 4px; }
    .activity-filter-btn { font-size: 11px; padding: 4px 8px; }
    /* view-grid ya tiene 1fr en este breakpoint vía línea anterior — refuerzo eliminado */
    /* Footer del modal: si hay más de 2 botones, evitar apretarlos. flex-wrap ya está,
       pero forzamos botones a expandir su tap target. */
    .modal-footer .btn { flex: 1 1 auto; min-height: 40px; justify-content: center; }
    .modal-footer .btn:first-child:last-child { flex: 0 1 auto; }
  }
  @media (max-width: 480px) {
    table { min-width: 520px; }
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
    .stats-grid .stat-value { font-size: 22px !important; }
    .modal-head { padding: 14px 14px 12px; }
    .modal-body { padding: 14px; }
    .modal-footer { padding: 10px 14px; flex-direction: column-reverse; align-items: stretch; }
    .modal-footer .btn { width: 100%; flex: none; }
    .modal-title { font-size: 18px; }
    /* Inputs un poco más compactos */
    input, select, textarea { padding: 9px 11px; font-size: 14px; }
    /* Botones top-right en cards proveedor más pegados al borde */
    .prov-card { padding: 14px; }
  }
  /* iPhone SE / phones angostos */
  @media (max-width: 375px) {
    .topbar { padding: 10px 12px; }
    .page-title { font-size: 16px; letter-spacing: 1px; }
    .content { padding: 10px; }
    .modal-head { padding: 12px 12px 10px; }
    .modal-body { padding: 12px; }
    .modal-footer { padding: 10px 12px; }
    .modal-title { font-size: 17px; }
    .stats-grid { gap: 6px; }
    table { min-width: 0; }
    table th, table td { padding: 8px 6px; font-size: 11px; }
    .form-grid { gap: 12px; }
    /* Tabla piezas: dejar costo/venta apretados pero legibles */
    .piezas-table tr { padding: 10px 10px 8px; }
    .piezas-table input, .piezas-table select { font-size: 13px; padding: 7px 8px; }
  }
  @media (min-width: 769px) {
    .mobile-nav { display: none !important; }
    .mobile-more-layer { display: none !important; }
    .mobile-more-overlay { display: none !important; }
    .mobile-more-sheet { display: none !important; }
  }
  #op-login { letter-spacing: 0; margin-bottom: 0; }
  #op-pass { letter-spacing: 2px; margin-bottom: 0; }
  #op-login-btn { margin-bottom: 8px; }
  #v-patente { text-transform: uppercase; }
  #import-file { display: none; }

  /* ===== ESTADÍSTICAS ===== */
  .u-stat-card-top-blue { border-top: 2px solid var(--blue); }
  .u-text-blue { color: var(--blue); }

  .stats-period-bar {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 20px;
  }
  .stats-period-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
  }
  .stats-period-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 7px 16px;
    border-radius: 6px;
    cursor: pointer;
    font: 600 13px inherit;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
  }
  .stats-period-btn:hover {
    background: var(--surface3, rgba(255,255,255,0.05));
    border-color: var(--accent);
  }
  .stats-period-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }
  .stats-period-custom {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
  }
  .stats-period-custom label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
  }
  .stats-period-custom input {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 5px 8px;
    border-radius: 4px;
    font-family: inherit;
  }
  .stats-period-label {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
  }
  /* ===== Month picker (visible cuando 'Mes' está activo) ===== */
  .stats-period-month-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
    position: relative;
  }
  .stats-month-arrow {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 18px;
    line-height: 1;
    font-weight: 600;
    transition: all 0.15s;
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .stats-month-arrow:hover {
    background: var(--surface);
    border-color: var(--chrome3);
    color: var(--chrome-shine);
  }
  .stats-month-arrow:active { transform: translateY(1px); }
  .stats-month-current {
    background: linear-gradient(145deg, #1a1d22, #131518);
    border: 1px solid var(--border);
    color: var(--chrome-shine);
    cursor: pointer;
    padding: 6px 16px;
    border-radius: 6px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    min-width: 170px;
    height: 36px;
    transition: all 0.15s;
  }
  .stats-month-current:hover {
    border-color: var(--chrome3);
    background: linear-gradient(145deg, #1f2228, #16191d);
  }
  .stats-month-today {
    background: var(--green);
    color: #0d0f11;
    border: none;
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 9999px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    transition: opacity 0.15s;
  }
  .stats-month-today:hover { opacity: 0.85; }
  /* Popover con grilla de meses + selector de año */
  .stats-month-popover {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: linear-gradient(145deg, #15181d, #0f1114);
    border: 1px solid var(--border2);
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(200, 205, 214, 0.04);
    z-index: 100;
    min-width: 280px;
    animation: monthPopoverIn 0.18s cubic-bezier(0.34, 1.4, 0.64, 1);
  }
  @keyframes monthPopoverIn {
    from { opacity: 0; transform: scale(0.96) translateY(-6px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
  }
  .stats-month-year-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
  }
  .stats-year-arrow {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .stats-year-arrow:hover { background: var(--surface); color: var(--chrome-shine); }
  .stats-year-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--chrome-shine);
    letter-spacing: 0.5px;
  }
  .stats-month-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }
  .stats-month-cell {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
    padding: 10px 4px;
    border-radius: 6px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.15s;
  }
  .stats-month-cell:hover {
    background: var(--surface);
    border-color: var(--chrome3);
    color: var(--chrome-shine);
  }
  .stats-month-cell.is-current-real {
    border-color: var(--green);
    color: var(--green);
  }
  .stats-month-cell.is-selected {
    background: var(--chrome);
    color: #0d0f11;
    border-color: var(--chrome);
    font-weight: 700;
  }
  .stats-month-cell.is-selected.is-current-real {
    background: var(--green);
    border-color: var(--green);
  }
  /* Checkbox de filtro en la tabla de detalle por reparación */
  .stats-checkbox-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    padding: 6px 10px;
    border-radius: 6px;
    transition: background 0.15s;
    font-size: 12px;
    color: var(--text-muted);
  }
  .stats-checkbox-filter:hover { background: rgba(200, 205, 214, 0.05); color: var(--text); }
  .stats-checkbox-filter input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--chrome);
    margin: 0;
  }

  /* Filtros inline en table-header (categoría, sort) */
  .u-flex-wrap-gap-12 { flex-wrap: wrap; gap: 12px; }
  .u-select-inline { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); padding: 8px 12px; font-family: 'Barlow', sans-serif; font-size: 13px; outline: none; transition: border-color 0.15s; width: auto; min-width: 160px; }
  .u-select-inline:focus { border-color: var(--accent); }

  /* Tabs de la sección Insumos (costos) */
  .costos-tabs { display: flex; gap: 6px; margin: 16px 0 12px; flex-wrap: wrap; }
  .costos-tab { background: var(--surface2); border: 1px solid var(--border); color: var(--text-muted); padding: 8px 16px; border-radius: var(--radius); cursor: pointer; font-family: 'Barlow', sans-serif; font-size: 13px; font-weight: 600; transition: all 0.15s; }
  .costos-tab:hover { color: var(--text); border-color: var(--accent); }
  .costos-tab.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
  .badge-fijo { background: rgba(96, 165, 250, 0.18); color: #93c5fd; }
  .badge-variable { background: rgba(251, 191, 36, 0.18); color: #fcd34d; }
  /* Fase 4: filas virtuales de sueldos calculadas en runtime — violeta para
     distinguirlas a simple vista de los insumos manuales (fijo azul / variable amarillo). */
  .badge-auto { background: rgba(168, 85, 247, 0.18); color: #c4b5fd; }

  .stats-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin: 24px 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
  }
  .stats-section-title:first-of-type { margin-top: 0; }

  .stats-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 16px;
    margin-bottom: 12px;
  }
  .stats-chart-card {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
  }
  .stats-chart-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
  }
  .stats-chart-canvas-wrap {
    position: relative;
    height: 240px;
  }
  .stats-chart-canvas-wrap canvas {
    max-height: 240px;
  }

  @media (max-width: 720px) {
    .stats-period-presets { gap: 6px; }
    .stats-period-btn { padding: 6px 12px; font-size: 12px; }
    .stats-charts-grid { grid-template-columns: 1fr; }
    .stats-chart-canvas-wrap { height: 220px; }
  }

  /* ===== Presupuestos ===== */
  .pr-item-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
  .pr-item-row input { background: var(--surface2); border: 1px solid var(--border2); border-radius: var(--radius); color: var(--chrome-shine); padding: 9px 12px; font-family: 'Barlow', sans-serif; font-size: 14px; outline: none; }
  .pr-item-row input:focus { border-color: var(--chrome2); }
  .pr-item-row .pr-item-nombre { flex: 1; }
  .pr-item-row .pr-item-precio { width: 120px; }
  .pr-total-line { margin-top: 16px; text-align: right; font-size: 16px; color: var(--text); }
  .pr-total-line strong { color: var(--accent); }
  /* Checkbox rows lindos (cliente nuevo, descuento) */
  .pr-check { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 12px 2px; color: var(--text); font-size: 14px; user-select: none; }
  .pr-check input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--blue); flex-shrink: 0; margin: 0; }
  .pr-check > span { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; }
  .pr-check-hint { color: var(--text-muted); font-size: 12px; font-weight: 400; }
  .pr-descuento-box { border: 1px solid var(--border2); border-radius: var(--radius); padding: 8px 14px 12px; margin-top: 12px; background: var(--surface2); }
  .pr-descuento-hint { margin: 4px 0 0 28px; line-height: 1.45; }
  .pr-pct-input { width: 52px; margin: 0 2px; padding: 4px 6px; background: var(--bg); border: 1px solid var(--border2); border-radius: 6px; color: var(--text); font-size: 14px; text-align: center; }

  /* ===== Accesibilidad (auditoría 2026-06-28) ===== */
  /* Foco de teclado SIEMPRE visible. Antes el foco solo cambiaba el border-color
     (casi imperceptible para navegación por teclado). :focus-visible NO afecta
     el click con mouse, solo el foco por teclado. */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible,
  .btn:focus-visible,
  .close-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  /* Botón en estado "Procesando…" durante un round-trip al server (executeConfirm). */
  .btn[data-busy] { cursor: wait; opacity: 0.75; }

  /* Targets táctiles: en mobile los botones chicos (editar/eliminar en cards)
     llegan a ~40px de alto para ser cómodos al dedo. */
  @media (max-width: 768px) {
    .btn-sm { min-height: 40px; }
  }

  /* ===== Prefijo de boleta (modal de proveedor) — 2026-08-17 ===== */
  /* Pista debajo del input: preview del número que se va a generar, aviso de
     colisión y chips con los prefijos que el proveedor ya usaba a mano. */
  .prov-prefijo-hint { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
  .prov-prefijo-preview { font-size: 12px; color: var(--chrome3); font-family: 'JetBrains Mono', monospace; }
  .prov-prefijo-alerta { font-size: 12px; color: var(--red); }
  .prov-prefijo-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; }
  .prov-prefijo-chip { font-family: 'JetBrains Mono', monospace; }

  /* ===== N° de boleta autogenerado en las filas de pieza — 2026-08-17 ===== */
  /* El input convive con el botón "+" (abrir otra boleta del mismo día). */
  .pieza-boleta-wrap { display: flex; align-items: center; gap: 4px; }
  /* min-width real: el número canónico entero ("om260817-10") tiene que verse
     completo, sin cortarse — la tabla no puede aplastar esta columna. */
  .pieza-boleta-wrap .pieza-input { flex: 1; min-width: 128px; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
  .pieza-boleta-otra {
    flex: 0 0 auto; width: 26px; height: 26px; line-height: 1; cursor: pointer;
    background: var(--surface2); color: var(--chrome2);
    border: 1px solid var(--border2); border-radius: var(--radius);
    font-size: 15px; font-weight: 600; transition: border-color 0.15s, color 0.15s;
  }
  .pieza-boleta-otra:hover { border-color: var(--chrome3); color: var(--chrome-shine); }
  /* Aviso SUAVE: el número no sigue el formato tf260817-1. No bloquea nada
     (las boletas viejas y los casos especiales son válidos). */
  .pieza-input--boleta-rara { border-color: var(--border2); border-bottom: 2px dotted var(--yellow); }

/* ===== Media (2026-09-18): fotos de vehículos y fotos/videos de reparaciones ===== */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.media-cell {
  position: relative;
  border: 1px solid var(--border2);
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 4 / 3;
}
.media-cell img,
.media-cell video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-cell .media-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 8px;
  opacity: 0.9;
}
.u-hidden-input { display: none; }

/* Dropzone de media (2026-09-18): "arrastrá o hacé click", estilo tarjeta punteada */
.media-dropzone {
  border: 2px dashed var(--border2);
  border-radius: 12px;
  padding: 28px 16px;
  text-align: center;
  cursor: pointer;
  margin-top: 12px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.media-dropzone:hover, .media-dropzone-over {
  border-color: var(--chrome3, #888);
  background: rgba(255, 255, 255, 0.03);
}
.media-dropzone-icon { font-size: 26px; margin-bottom: 6px; }
.media-dropzone-title { font-weight: 700; font-size: 14px; }
.media-dropzone-detail { font-size: 12px; color: var(--text-muted, #999); margin-top: 4px; max-width: 480px; margin-left: auto; margin-right: auto; }

/* Login Google + PIN (Fase D, 2026-09-18) */
.login-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
  color: var(--text-muted, #888);
  font-size: 12px;
}
.login-divider::before, .login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border2, #333);
}
.login-btn-google { background: #fff; color: #1a1a1a; }
.login-btn-google:hover { background: #e8e8e8; }
.pin-operators {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.pin-operator-btn {
  background: var(--card2, #1d1d22);
  border: 1px solid var(--border2, #333);
  border-radius: 10px;
  color: inherit;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 8px;
  cursor: pointer;
}
.pin-operator-btn.sel { border-color: var(--chrome-shine, #e8ecf0); }
.pin-operator-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.login-pin-input { text-align: center; letter-spacing: 10px; font-size: 20px; margin-bottom: 10px; }
.login-link {
  background: none;
  border: none;
  color: var(--text-muted, #999);
  font-size: 13px;
  margin-top: 10px;
  cursor: pointer;
  width: 100%;
}
.u-mb-8 { margin-bottom: 8px; }

/* Botón Google con branding oficial (rediseño 2026-09-18) */
.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  background: #fff;
  color: #3c4043;
  border: 1px solid #dadce0;
  border-radius: 10px;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: box-shadow 0.15s ease, background 0.15s ease;
}
.google-btn:hover { background: #f8f9fa; box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3); }
.google-btn:disabled { opacity: 0.6; cursor: default; }
.google-btn-logo { width: 20px; height: 20px; flex: none; }
.login-link-classic { margin-top: 14px; font-size: 12px; opacity: 0.7; }

/* Fila clickeable (2026-09-18): toda la fila de Reparaciones abre el detalle */
.row-clickable { cursor: pointer; }
.row-clickable:hover td { background: rgba(255, 255, 255, 0.03); }