html{height:100%}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#ffffff;--bg2:#f7f8fa;--bg3:#eef0f3;
  --border:#e2e5ea;--border2:#cdd0d7;
  --text:#111418;--text2:#5a6270;--text3:#8c95a0;
  --accent:#1a6ef5;--accent-bg:#e8f0fe;--accent-text:#1348a8;
  --danger:#c0392b;--danger-bg:#fdf0ef;
  --r-sm:6px;--r-md:8px;--r-lg:12px;
  --sh-sm:0 1px 3px rgba(0,0,0,.07);
  --sh-md:0 4px 16px rgba(0,0,0,.10);
  font-size:14px;
}
@media(prefers-color-scheme:dark){
  :root{
    --bg:#14171c;--bg2:#1e2128;--bg3:#272c35;
    --border:#2e333d;--border2:#3d4454;
    --text:#eaedf2;--text2:#8c95a6;--text3:#5c6474;
    --accent:#4d8ef7;--accent-bg:#1a2a4a;--accent-text:#7db3ff;
    --danger:#e05a4e;--danger-bg:#2e1a19;
  }
}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);height:100vh;overflow:hidden}
input,select{font-family:inherit;font-size:13px;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:7px 10px;outline:none;transition:border-color .15s,box-shadow .15s;width:100%}
input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:inherit;font-size:13px;font-weight:500;padding:7px 14px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--bg);color:var(--text2);cursor:pointer;transition:all .14s;white-space:nowrap;line-height:1}
.btn:hover{background:var(--bg2);color:var(--text);border-color:var(--border2)}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{opacity:.88;background:var(--accent)}
.btn-icon{background:transparent;border:none;cursor:pointer;padding:5px;color:var(--text2);border-radius:var(--r-sm);transition:color .14s,background .14s;font-size:14px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.btn-icon:hover{color:var(--text);background:var(--bg3)}
.btn-danger{background:transparent;border:none;cursor:pointer;color:var(--danger);font-size:13px;padding:7px 10px;border-radius:var(--r-sm);margin-right:auto;font-family:inherit;transition:background .14s;display:inline-flex;align-items:center;gap:5px}
.btn-danger:hover{background:var(--danger-bg)}
.gear-btn{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-sm);padding:6px 9px;cursor:pointer;color:var(--text2);font-size:13px;transition:all .14s;line-height:1;flex-shrink:0}
.gear-btn:hover{color:var(--text);border-color:var(--border2)}
.app{width:100%;margin:0 auto;padding:1.5rem 1.25rem;display:flex;flex-direction:column;height:100vh;box-sizing:border-box;overflow:hidden}
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:10px}
.page-header h1{font-size:20px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:10px}
.page-header p{font-size:13px;color:var(--text2);margin-top:3px}
@media(max-width:600px){.page-header-title{width:100%}}
.nav-tabs{display:flex;gap:3px;border-bottom:1.5px solid var(--border);margin-bottom:1.25rem;flex-wrap:wrap}
.nav-tab{font-size:13px;padding:9px 16px;border:1px solid transparent;background:transparent;cursor:pointer;color:var(--text2);border-bottom:none;margin-bottom:-1.5px;transition:all .14s;display:flex;align-items:center;gap:7px;white-space:nowrap;border-radius:var(--r-sm) var(--r-sm) 0 0;font-family:inherit}
.nav-tab:hover{color:var(--text);background:var(--bg2)}
.nav-tab.active{color:var(--text);font-weight:600;background:var(--bg2);border-color:var(--border);border-bottom-color:var(--bg2);box-shadow:0 -2px 0 var(--accent) inset}
.tab-count{font-size:11px;background:var(--bg3);border-radius:10px;padding:1px 7px;color:var(--text2);transition:all .14s}
.nav-tab.active .tab-count{background:var(--accent);color:#fff}
.toolbar-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:.75rem;flex-wrap:nowrap}
.toolbar-left{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;min-width:0}






.filter-btn{font-size:12px;padding:6px 10px;display:flex;align-items:center;gap:5px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg);color:var(--text2);cursor:pointer;transition:all .14s;white-space:nowrap;position:relative;flex-shrink:0;font-family:inherit}
.filter-btn:hover{border-color:var(--border2);color:var(--text)}
.filter-btn.active{background:var(--accent-bg);color:var(--accent-text);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.filter-badge{font-size:10px;font-weight:700;background:var(--accent);color:#fff;border-radius:10px;padding:1px 6px;margin-left:2px}
.fdrop{position:absolute;top:calc(100% + 5px);left:0;z-index:500;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--sh-md);min-width:220px;max-height:300px;display:flex;flex-direction:column}
.fdrop-search{padding:7px 10px;border-bottom:1px solid var(--border);flex-shrink:0}
.fdrop-search input{width:100%;font-size:12px;padding:5px 8px}
.fdrop-list{overflow-y:auto;flex:1;padding:4px 0}
.fdrop-opt{display:flex;align-items:center;gap:7px;padding:7px 12px;cursor:pointer;font-size:12px;color:var(--text);transition:background .1s}
.fdrop-opt:hover{background:var(--bg2)}
.fdrop-opt input[type=checkbox]{cursor:pointer;width:13px;height:13px;flex-shrink:0;accent-color:var(--accent)}
.fdrop-opt .dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.fdrop-foot{padding:6px 10px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:6px;flex-shrink:0}
.count-row{font-size:12px;color:var(--text2);padding:6px 0 4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:28px}
.active-filters{display:flex;gap:5px;flex-wrap:wrap}
.ftag{font-size:11px;padding:2px 8px;border-radius:20px;background:var(--accent-bg);color:var(--accent-text);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);display:flex;align-items:center;gap:4px}
.ftag button:not(.maq-tab-btn):not(.mq-tab-btn):not(.btn):not(.btn-icon):not(.ajustes-nav-item):not(.mq-btn):not(.nav-tab):not(.ajustes-collapse-btn):not(.mobile-btn):not(.mobile-sub-page-btn):not(.ajustes-sidebar-mobile-btn){background:none;border:none;cursor:pointer;font-size:10px;color:var(--accent-text);padding:0;line-height:1}
.ftag button:hover{color:var(--danger)}
.clear-all{font-size:11px;color:var(--text3);cursor:pointer;text-decoration:underline}
.clear-all:hover{color:var(--text2)}
.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:0;box-shadow:var(--sh-sm);flex:1;min-height:0;scrollbar-width:thin;scrollbar-color:var(--text3) var(--bg2)}
table{width:100%;border-collapse:collapse;font-size:13px;table-layout:auto}
thead th{text-align:left;font-weight:600;font-size:11px;color:var(--text2);background:var(--bg2);border-bottom:1px solid var(--border);user-select:none;letter-spacing:.04em;white-space:nowrap;position:sticky;top:0;z-index:10}
.th-inner{display:flex;align-items:center;gap:4px;padding:10px 12px;cursor:pointer;transition:color .14s}
.th-inner:hover{color:var(--text)}
th.sort-active .th-inner{color:var(--text)}
.sort-icon{font-size:10px;opacity:.4}
th.sort-active .sort-icon{opacity:1;color:var(--accent)}
tbody tr{border-bottom:1px solid var(--border);transition:background .1s}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:var(--bg2)}
tbody td{padding:9px 12px;vertical-align:middle;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
td.muted{color:var(--text2);font-size:12px}
td.price{font-variant-numeric:tabular-nums;font-size:12px;font-weight:500}
td.nombre-td{white-space:normal;line-height:1.4;font-weight:500;max-width:none;overflow:visible}
.badge{font-size:10px;padding:2px 8px;border-radius:10px;background:var(--bg3);color:var(--text2);border:1px solid var(--border);white-space:nowrap;font-weight:500}
.badge-sub{font-size:10px;padding:2px 8px;border-radius:10px;background:var(--bg2);color:var(--text3);border:1px solid var(--border)}
.mach-chips{display:flex;gap:3px;flex-wrap:wrap;max-width:140px}
.ms{font-size:9px;padding:1px 5px;border-radius:8px;font-weight:600;white-space:nowrap}
.btn-link{background:transparent;border:1px solid var(--border);cursor:pointer;padding:4px 9px;color:var(--text2);font-size:11px;border-radius:var(--r-sm);transition:all .14s;display:inline-flex;align-items:center;gap:4px;text-decoration:none;white-space:nowrap;font-family:inherit}
.btn-link:hover{border-color:var(--border2);color:var(--text)}
.btn-link.has{color:var(--accent-text);border-color:color-mix(in srgb,var(--accent) 35%,transparent);background:var(--accent-bg)}
.btn-link.has:hover{opacity:.85}
.empty{text-align:center;padding:3rem;color:var(--text3);font-size:14px}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:flex-start;justify-content:center;z-index:350;padding:1rem;overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:100%}
.modal{background:var(--bg);border-radius:var(--r-lg);border:1px solid var(--border);width:100%;max-width:860px;margin:auto;box-shadow:var(--sh-md);position:relative}
.mhdr{padding:1rem 1.25rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.mhdr h2{font-size:15px;font-weight:600}
.mbody{padding:1.25rem;display:flex;flex-direction:column;gap:1.25rem;background:var(--bg);overflow-y:auto;-webkit-overflow-scrolling:touch}
.mftr{padding:.875rem 1.25rem;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;align-items:center}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fg{display:flex;flex-direction:column;gap:4px}
.fg.full{grid-column:1/-1}
.fg label{font-size:11px;color:var(--text2);font-weight:600;text-transform:uppercase;letter-spacing:.04em;display:flex;align-items:center;gap:5px}
.section-title{font-size:11px;font-weight:700;color:var(--text3);padding-bottom:6px;border-bottom:1px solid var(--border);grid-column:1/-1;margin-top:6px;text-transform:uppercase;letter-spacing:.06em}
.price-dir{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text2);padding:8px 10px;background:var(--bg2);border-radius:var(--r-md);border:1px solid var(--border);flex-wrap:wrap}
.dir-btn{font-size:11px;padding:4px 10px;border-radius:var(--r-sm);cursor:pointer;border:1px solid var(--border);background:var(--bg);color:var(--text2);transition:all .12s;white-space:nowrap;font-family:inherit}
.dir-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.fg input.price-active{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.fg input.price-dim{background:var(--bg2);color:var(--text3);opacity:.55;cursor:not-allowed}
.fg input.blocked{background:var(--bg2)!important;color:var(--text3)!important;opacity:.4;cursor:not-allowed;pointer-events:none}
.calc-hint{font-size:11px;color:var(--text3);margin-top:3px;display:flex;align-items:center;gap:4px}
.info-btn{background:transparent;border:none;cursor:default;color:var(--text3);font-size:11px;padding:0;position:relative;line-height:1;display:inline-flex;align-items:center}
.info-tooltip{position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);padding:6px 10px;font-size:11px;color:var(--text2);white-space:nowrap;box-shadow:var(--sh-md);z-index:999;pointer-events:none;opacity:0;transition:opacity .15s;text-transform:none;font-weight:400;letter-spacing:0}
.info-btn:hover .info-tooltip{opacity:1}
.mach-grid{display:flex;flex-wrap:wrap;gap:6px;width:100%}
.mcheck{display:flex;align-items:center;justify-content:flex-start;gap:8px;font-size:13px;cursor:pointer;padding:5px 9px;border-radius:var(--r-sm);border:1px solid var(--border);transition:background .12s}
.mcheck:hover{background:var(--bg2)}
.mcheck input{accent-color:var(--accent)}
.ov-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:400;padding:1rem;}
.ov{background:var(--bg);border-radius:var(--r-lg);border:1px solid var(--border);width:100%;max-width:440px;max-height:85vh;overflow-y:auto;box-shadow:var(--sh-md)}
.tag-card-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.tag-card{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg2);font-size:13px;cursor:grab}
.tag-card .drag-h{color:var(--text3);font-size:12px}
.tag-card .lbl{flex:1;color:var(--text)}
.tag-card .del{background:none;border:none;cursor:pointer;color:var(--text3);font-size:13px;padding:2px 4px;border-radius:4px}
.tag-card .del:hover{color:var(--danger);background:var(--danger-bg)}
.add-row{display:flex;gap:6px;margin-top:10px;align-items:center}
.add-row input{min-width:0;flex:1}
.tax-list{display:flex;flex-direction:column;gap:8px;margin-top:8px;margin-bottom:12px}
.tax-row{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg2);cursor:pointer;transition:border-color .14s,background .14s;width:100%}
.tax-row.tax-active{border-color:var(--accent);background:var(--accent-bg)}
.tax-row .t-name{flex:1;min-width:0;height:34px;font-size:13px;padding:5px 8px}
.tax-row .t-pct{width:72px;height:34px;font-size:13px;padding:5px 8px;text-align:right;flex-shrink:0;flex-grow:0}
.tax-row .t-sym{width:16px;font-size:12px;color:var(--text2);flex-shrink:0;flex-grow:0;text-align:left;background:transparent;border:none;padding:0}
.tax-row .t-del{width:32px;height:34px;font-size:13px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--r-sm);cursor:pointer;color:var(--text2);flex-shrink:0;flex-grow:0;padding:0}
.tax-row .t-del:hover{color:var(--danger);background:var(--danger-bg)}
.tax-add{display:flex;align-items:center;gap:8px}
.tax-add .t-name{width:248px;height:34px;font-size:13px;padding:5px 8px;flex-shrink:0;flex-grow:0}
.tax-add .t-pct{width:72px;height:34px;font-size:13px;padding:5px 8px;text-align:right;flex-shrink:0;flex-grow:0}
.tax-add .t-sym{width:16px;font-size:12px;color:var(--text2);flex-shrink:0;flex-grow:0;background:transparent;border:none;padding:0}
.tax-add .t-add{width:32px;height:34px;font-size:20px;font-weight:300;line-height:1;display:flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;border:none;border-radius:var(--r-sm);cursor:pointer;flex-shrink:0;flex-grow:0}
.tax-add .t-add:hover{opacity:.85}
.machine-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.machine-item{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg2);transition:opacity .15s}
.machine-item input{flex:1}
.color-palette{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.color-swatch{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .1s}
.color-swatch:hover{transform:scale(1.2)}
.color-swatch.selected{border-color:var(--text);transform:scale(1.15)}

.toast{position:fixed;bottom:1.5rem;right:1.5rem;padding:10px 16px;border-radius:var(--r-md);font-size:13px;font-weight:500;color:#fff;z-index:9999;opacity:0;transform:translateY(8px);transition:all .25s;pointer-events:none}
.toast.show{opacity:1;transform:translateY(0)}
.toast.ok{background:#188038}
.toast.err{background:var(--danger)}
.spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.loading-row td{padding:2rem;text-align:center;color:var(--text3)}

/* ── Historial de compras ── */
.hist-panel{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:stretch;justify-content:flex-end;z-index:250;}
.hist-drawer{background:var(--bg);border-left:1px solid var(--border);width:420px;height:100%;display:flex;flex-direction:column;box-shadow:var(--sh-md);flex-shrink:0}
.hist-hdr{padding:.875rem 1.25rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:8px}
.hist-hdr-left{display:flex;flex-direction:column;gap:2px;min-width:0}
.hist-hdr h2{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hist-hdr p{font-size:11px;color:var(--text2)}
.hist-body{flex:1;overflow-y:auto;padding:1rem 1.25rem;display:flex;flex-direction:column;gap:.875rem}
.hist-stats{display:flex;gap:8px}
.hist-stat{display:flex;flex-direction:column;gap:2px;flex:1;padding:.625rem .75rem;background:var(--bg2);border-radius:var(--r-md);border:1px solid var(--border)}
.hist-stat-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.hist-stat-value{font-size:13px;font-weight:700;color:var(--text)}
.hist-entries{display:flex;flex-direction:column;gap:4px}
.hist-entry{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg);transition:background .1s}
.hist-entry:hover{background:var(--bg2)}
.hist-entry-fecha{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;flex-shrink:0}
.hist-entry-sep{color:var(--text3);font-size:11px;flex-shrink:0}
.hist-entry-proveedor{font-size:12px;color:var(--text2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist-entry-precio{font-size:13px;font-weight:700;color:var(--accent);white-space:nowrap;flex-shrink:0}
.hist-entry-notas{font-size:11px;color:var(--text3);font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100px}
.hist-entry-actions{display:flex;align-items:center;gap:2px;flex-shrink:0;opacity:0;transition:opacity .15s}
.hist-entry:hover .hist-entry-actions{opacity:1}
.hist-empty{text-align:center;padding:2rem;color:var(--text3);font-size:13px}
.btn-hist{background:transparent;border:none;cursor:pointer;padding:4px 5px;color:var(--text2);border-radius:var(--r-sm);transition:color .14s,background .14s;font-size:13px;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.btn-hist:hover{color:var(--accent);background:var(--accent-bg)}
/* Panel formulario nueva compra */


.hist-form-hdr h3{font-size:14px;font-weight:600}

.hist-form-body .fg{display:flex;flex-direction:column;gap:3px}
.hist-form-body label{font-size:11px;color:var(--text2);font-weight:600;text-transform:uppercase;letter-spacing:.04em}


/* Ocultar scrollbars manteniendo la funcionalidad */
*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{display:none}


/* Modo reordenación */
.sort-mode-banner{background:var(--accent-bg);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:var(--r-md);padding:8px 14px;font-size:12px;color:var(--accent-text);display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.sort-mode-banner strong{font-weight:600}
tbody tr.dragging{opacity:.4}
tbody tr.drag-over{outline:2px solid var(--accent);outline-offset:-2px}
tbody tr.sortable{cursor:grab}
tbody tr.sortable:active{cursor:grabbing}
.drag-handle-cell{color:var(--text3);font-size:13px;cursor:grab;padding:8px 6px!important}
#btn-sort-mode.active{background:var(--accent);color:#fff;border-color:var(--accent)}


.modelo-btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:var(--r-sm);border:none;outline:none;background:transparent;color:var(--text2);cursor:pointer;position:relative;transition:background .14s,color .14s}
.modelo-btn:hover{background:var(--accent-bg);color:var(--accent)}
.modelo-btn:hover .modelo-tooltip{opacity:1}
.modelo-btn::after{content:attr(title);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);font-size:11px;padding:4px 8px;border-radius:5px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;z-index:100;font-family:monospace}
.modelo-btn:hover::after{opacity:1}


.modelo-btn{display:inline-flex;align-items:center;justify-content:center;color:var(--text2);font-size:13px;cursor:pointer;padding:3px 5px;border-radius:4px;position:relative;border:none;background:transparent}
.modelo-btn:hover{color:var(--accent);background:var(--accent-bg)}
.modelo-tooltip{position:fixed;background:var(--bg);color:var(--text);font-size:12px;padding:6px 12px;border-radius:var(--r-md);border:1px solid var(--border);box-shadow:var(--sh-md);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;font-family:monospace;z-index:9999;letter-spacing:.03em}
.modelo-btn:hover .modelo-tooltip{opacity:1}


/* ── Navegación principal ── */
.main-nav{display:flex;align-items:center;gap:2px;padding:0 1%;background:var(--bg);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50;flex-shrink:0}
.main-nav-logo{font-size:14px;font-weight:700;color:var(--text);padding:0 16px 0 4px;border-right:1px solid var(--border);margin-right:6px;white-space:nowrap;display:flex;align-items:center;gap:7px;height:48px}
.main-nav-logo i{color:var(--accent)}
.nav-link{display:flex;align-items:center;gap:7px;padding:0 14px;height:48px;font-size:13px;font-weight:500;color:var(--text2);cursor:pointer;border-bottom:2px solid transparent;transition:all .14s;white-space:nowrap;background:none;border-top:none;border-left:none;border-right:none;font-family:inherit}
.nav-link:hover{color:var(--text);background:var(--bg2)}
.nav-link.active{color:var(--accent);border-bottom-color:var(--accent)}
.nav-link i{font-size:13px}
/* Páginas */
.page{display:none;flex:1;min-height:0;flex-direction:column}
.page.active{display:flex}
/* Ajustar app para nuevo layout */
.app-shell{display:flex;flex-direction:column;height:100vh;overflow:hidden}


/* ── Página Máquinas ── */
.maq-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);transition:border-radius .14s}
.maq-card-header{display:flex;align-items:center;gap:12px;padding:1rem 1.25rem;border-bottom:1px solid var(--border);cursor:pointer;transition:background .14s;user-select:none}
.maq-card-header:hover{background:var(--bg2)}
.maq-card-btns{display:flex;align-items:center;gap:4px;flex-shrink:0}
.maq-color-dot{width:16px;height:16px;border-radius:50%;flex-shrink:0}
.maq-card-info{flex:1;min-width:0;display:flex;align-items:center;gap:12px}
.maq-card-title{flex:1;min-width:0}
.maq-card-title h3{font-size:15px;font-weight:600;color:var(--text)}
.maq-card-title p{font-size:12px;color:var(--text2);margin-top:2px}
.maq-card-badges{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.maq-badge{font-size:11px;font-weight:600;color:var(--text2);background:var(--bg);border:1px solid var(--border);padding:2px 8px;border-radius:20px;white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.maq-card-body{padding:1.25rem;display:flex;flex-direction:column;gap:1.25rem}
.maq-section{display:flex;flex-direction:column;gap:10px;padding-top:14px;margin-top:6px;border-top:1px solid var(--border)}.maq-section:first-child{border-top:none;padding-top:0;margin-top:0}
.maq-section-title{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px;display:flex;align-items:center;gap:6px}
.maq-datos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.maq-dato{display:flex;flex-direction:column;gap:3px;padding:10px 12px;background:var(--bg2);border-radius:var(--r-md);border:1px solid var(--border)}
.maq-dato-label{font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.04em}
.maq-dato-value{font-size:14px;font-weight:600;color:var(--text)}
.maq-dato-unit{font-size:11px;color:var(--text2);font-weight:400}
/* Tintas */
.tintas-grid{display:flex;gap:8px;flex-wrap:wrap}
.tinta-card{display:flex;flex-direction:column;gap:4px;padding:10px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-md);min-width:110px}
.tinta-color-row{display:flex;align-items:center;gap:6px}
.tinta-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;border:1px solid var(--border)}
.tinta-nombre{font-size:12px;font-weight:600;color:var(--text)}
.tinta-precio{font-size:13px;font-weight:700;color:var(--accent)}
.tinta-ml{font-size:11px;color:var(--text2)}
/* Modos */
.modos-list{display:flex;flex-wrap:wrap;gap:6px}
.modo-row{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;background:var(--bg2);border:1px solid var(--border);border-radius:20px}
.modo-nombre{font-size:13px;font-weight:500;color:var(--text);flex:1}
.modo-consumo{font-size:13px;font-weight:700;color:var(--accent);white-space:nowrap}
.modo-unit{font-size:11px;color:var(--text2)}
/* Empty state */
.maq-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;color:var(--text3);gap:12px;padding:3rem}


/* ── Sidebar ajustes ── */
.ajustes-layout{display:flex;flex:1;min-height:0;overflow:hidden}
.ajustes-sidebar{width:220px;flex-shrink:0;border-right:1px solid var(--border);display:flex;flex-direction:column;background:var(--bg2);transition:width .2s}
.ajustes-sidebar.collapsed{width:52px}
.ajustes-sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border);flex-shrink:0;min-height:48px}
.ajustes-sidebar-title{font-size:12px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;overflow:hidden;transition:opacity .15s}
.ajustes-sidebar.collapsed .ajustes-sidebar-title{opacity:0;width:0}
.ajustes-collapse-btn{background:none;border:none;cursor:pointer;color:var(--text2);padding:4px;border-radius:var(--r-sm);flex-shrink:0;transition:color .14s,background .14s}
.ajustes-collapse-btn:hover{color:var(--text);background:var(--bg3)}
.ajustes-nav{display:flex;flex-direction:column;gap:2px;padding:8px;flex:1;overflow-y:auto}
.ajustes-nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-md);cursor:pointer;color:var(--text2);font-size:13px;font-weight:500;transition:all .14s;white-space:nowrap;overflow:hidden;background:none;border:none;font-family:inherit;text-align:left;width:100%}
.ajustes-nav-item:hover{background:var(--bg3);color:var(--text)}
.ajustes-nav-item.active{background:var(--accent-bg);color:var(--accent-text)}
.ajustes-nav-item i{font-size:14px;flex-shrink:0;width:16px;text-align:center}
.ajustes-nav-item span{transition:opacity .15s;white-space:nowrap}
.ajustes-sidebar.collapsed .ajustes-nav-item span{display:none}
.ajustes-sidebar.collapsed .ajustes-nav-item{justify-content:center;padding:9px;gap:0}
.ajustes-content{flex:1;overflow-y:auto;padding:2rem;padding-bottom:5rem}
/* Secciones ajustes */
.ajustes-section{display:none;flex-direction:column;gap:24px}
.ajustes-section.active{display:flex}
.ajustes-card{background:var(--bg);border-radius:var(--r-lg)}
.ajustes-card-header{padding:0 0 14px 0;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border);margin-bottom:20px}
.ajustes-card-header i{color:var(--accent);font-size:16px}
.ajustes-card-header span{font-size:16px;font-weight:600;color:var(--text)}
.ajustes-card-body{padding:0}


/* Tooltip sidebar colapsado */
.ajustes-sidebar.collapsed .ajustes-nav-item{position:relative}
#sidebar-tooltip{position:fixed;background:var(--text);color:var(--bg);font-size:12px;font-weight:500;padding:5px 10px;border-radius:var(--r-sm);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;z-index:9999}


/* ── Responsive ── */
.iva-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.empresa-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.apariencia-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}

/* Tablet/móvil */
@media(max-width:768px){
  /* Navegación */
  .main-nav{overflow-x:visible;flex-wrap:nowrap;padding:0 12px;gap:0}
  .nav-link{display:none!important}
  .main-nav-logo{flex:1;min-width:0}
  /* App */
  .app{padding:1rem .75rem}
  /* Tablas */
  .toolbar-row{flex-wrap:wrap}
  .toolbar-left{flex-wrap:wrap}
  /* Modales */
  .modal,.hist-drawer{max-width:100%!important;width:100%!important;border-radius:0!important;height:100vh!important;margin:0!important}
  .modal-bg{padding:0!important;align-items:flex-start!important}
  .fgrid{grid-template-columns:1fr!important}
  .fg.full{grid-column:1/-1}
  /* Ajustes sidebar en móvil — oculto, se despliega como overlay */
  .ajustes-layout{position:relative}
  .ajustes-sidebar{display:none!important}
  .ajustes-sidebar.mobile-open{display:flex!important;position:fixed;top:0;right:0;height:100%;z-index:300;box-shadow:var(--sh-md);width:220px;flex-direction:column}
  .ajustes-mobile-overlay{display:none;position:fixed;inset:0;z-index:299;background:rgba(0,0,0,.4)}
  .ajustes-mobile-overlay.open{display:block}
  /* Botón para abrir sidebar en móvil */
  .ajustes-sidebar-mobile-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg2);color:var(--text2);cursor:pointer;font-size:12px;font-weight:500;font-family:inherit;transition:all .14s;margin:0 0 1rem 0}
  .ajustes-sidebar-mobile-btn:hover{border-color:var(--accent);color:var(--accent)}
  .ajustes-sidebar-mobile-btn i{font-size:13px}
  /* IVA grid */
  .iva-grid{grid-template-columns:1fr!important}
  .iva-grid > div:last-child{border-left:none!important;padding-left:0!important;border-top:1px solid var(--border);padding-top:20px!important}
  .empresa-grid{grid-template-columns:1fr!important}
  .empresa-grid > div:last-child{border-left:none!important;padding-left:0!important;border-top:1px solid var(--border);padding-top:20px!important}
  /* Máquinas */
  .maq-datos-grid{grid-template-columns:1fr 1fr!important}
  .tintas-grid{flex-wrap:wrap}
  /* Hist panel */
  
}

@media(max-width:480px){
  .main-nav-logo{display:flex}
  table{font-size:11px}
  tbody td{padding:6px 8px}
  .maq-datos-grid{grid-template-columns:1fr!important}
}


/* Selector IVA */
#f_tax_select{cursor:pointer}


@media(max-width:768px){
  /* Modal a pantalla completa en móvil */
  .modal-bg{padding:0;align-items:flex-start}
  .modal-bg{background:var(--bg)!important;padding:0!important}
  .modal{max-width:100%!important;width:100%!important;border-radius:0!important;margin:0!important;min-height:100vh;border:none!important;background:var(--bg)!important}
  .mhdr{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--border)}
  .mftr{position:sticky;bottom:0;z-index:10;background:var(--bg);border-top:1px solid var(--border)}
  .mbody{padding:.875rem;gap:.875rem}
  /* Grid de dos columnas a una en móvil */
  .fgrid{grid-template-columns:1fr!important}
  .fg.full{grid-column:1/-1}
  /* Price-dir en columna */
  .price-dir{flex-wrap:wrap}
  /* Panel historial a pantalla completa */
  .hist-panel{padding:0}
  .hist-drawer{width:100%!important;border-radius:0!important;border:none!important}
  
  /* Tabla — ocultar columnas menos importantes */
  .table-wrap{overflow:auto;border:1px solid var(--border);border-radius:0;box-shadow:var(--sh-sm);flex:1;min-height:0;scrollbar-width:thin;scrollbar-color:var(--text3) var(--bg2)}
}

@media(max-width:480px){
  .mbody{padding:.75rem}
  .nav-link{padding:0 10px;font-size:12px}
  .nav-link i{font-size:12px}
}


.iva-tooltip-wrap{position:relative;cursor:default}
#iva-cell-tooltip{position:fixed;background:var(--bg);color:var(--text);font-size:12px;padding:6px 12px;border-radius:var(--r-md);border:1px solid var(--border);box-shadow:var(--sh-md);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;z-index:9999}


/* Paleta de colores de énfasis */
.accent-palette{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.accent-swatch{width:32px;height:32px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:transform .1s,border-color .15s;flex-shrink:0}
.accent-swatch:hover{transform:scale(1.15)}
.accent-swatch.selected{border-color:var(--text)!important;transform:scale(1.1)}
.accent-custom-row{display:flex;align-items:center;gap:10px;margin-top:8px}
.accent-custom-preview{width:32px;height:32px;border-radius:50%;border:3px solid transparent;flex-shrink:0;transition:border-color .15s}
.accent-custom-preview.selected{border-color:var(--text)}


/* Botones modo de color */
.color-mode-btn{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 14px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg);color:var(--text2);cursor:pointer;font-size:11px;font-weight:500;flex:1;transition:all .14s;font-family:inherit}
.color-mode-btn i{font-size:16px}
.color-mode-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
.color-mode-btn.active{border-color:var(--accent);color:var(--accent);background:var(--accent-bg);font-weight:600}


/* Modo oscuro forzado — idéntico al media query */
[data-theme="dark"]{
  --bg:#14171c;--bg2:#1e2128;--bg3:#272c35;
  --border:#2e333d;--border2:#3d4454;
  --text:#eaedf2;--text2:#8c95a6;--text3:#5c6474;
  --accent:#4d8ef7;--accent-bg:#1a2a4a;--accent-text:#7db3ff;
  --danger:#e05a4e;--danger-bg:#2e1a19;
  --sh-sm:0 1px 3px rgba(0,0,0,.4);--sh-md:0 4px 16px rgba(0,0,0,.35)
}
/* Modo claro forzado — idéntico a :root */
[data-theme="light"]{
  --bg:#ffffff;--bg2:#f7f8fa;--bg3:#eef0f3;
  --border:#e2e5ea;--border2:#cdd0d7;
  --text:#111418;--text2:#5a6270;--text3:#8c95a0;
  --accent:#1a6ef5;--accent-bg:#e8f0fe;--accent-text:#1348a8;
  --danger:#c0392b;--danger-bg:#fdf0ef;
  --sh-sm:0 1px 3px rgba(0,0,0,.07);--sh-md:0 4px 16px rgba(0,0,0,.10)
}


/* Botones modo cabecera */
.header-mode-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.header-mode-btn{display:flex;align-items:center;justify-content:center;gap:4px;padding:6px 4px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg);color:var(--text2);cursor:pointer;font-size:10px;font-weight:600;transition:all .14s;font-family:inherit;overflow:hidden;min-height:32px;position:relative;word-break:break-word;text-align:center}
.header-mode-btn i{font-size:12px;flex-shrink:0}
.header-mode-btn span{font-size:10px;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.header-mode-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
.header-mode-btn.active{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}


@media(max-width:600px){
  .apariencia-grid{grid-template-columns:1fr!important}
  .apariencia-grid > div:last-child{border-left:none!important;padding-left:0!important;border-top:1px solid var(--border);padding-top:16px}
  .col-campos{justify-content:flex-start!important;width:auto!important}
}


/* ── Menú móvil ── */
.mobile-btn{display:none;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:none;cursor:pointer;color:var(--text);border-radius:var(--r-sm);flex-shrink:0;transition:background .14s}
.mobile-btn:hover{background:var(--bg2)}
.mobile-btn i{font-size:18px}
.mobile-dropdown{display:none;position:fixed;top:48px;left:6px;right:6px;width:auto;background:var(--bg);border:1px solid var(--border);border-radius:0 0 var(--r-lg) var(--r-lg);box-shadow:var(--sh-md);z-index:200;flex-direction:column;overflow:hidden}
.mobile-dropdown.open{display:flex}
.mobile-sub-dropdown{display:none;position:fixed;top:48px;left:0;bottom:0;width:220px;background:var(--bg);border-right:1px solid var(--border);border-top:1px solid var(--border);border-radius:0 var(--r-lg) var(--r-lg) 0;box-shadow:var(--sh-md);z-index:200;flex-direction:column;overflow-y:auto}
.mobile-sub-dropdown.open{display:flex}
.mobile-nav-item{display:flex;align-items:center;gap:10px;padding:13px 16px;font-size:14px;font-weight:500;color:var(--text2);border-bottom:0.5px solid var(--border);cursor:pointer;background:none;border-left:none;border-right:none;border-top:none;font-family:inherit;width:100%;text-align:left;transition:background .14s,color .14s}
.mobile-nav-item:last-child{border-bottom:none}
.mobile-nav-item:hover{background:var(--bg2);color:var(--text)}
.mobile-nav-item.active{color:var(--accent);background:var(--accent-bg)}
.mobile-nav-item i{font-size:15px;width:18px;text-align:center}
.mobile-nav-divider{height:1px;background:var(--border)}
.mobile-nav-overlay{display:none;position:fixed;inset:0;z-index:199;background:transparent}
.mobile-nav-overlay.open{display:block}
@media(max-width:768px){
  .mobile-btn{display:flex}
  .main-nav .nav-link{display:none}
  .main-nav{position:relative;justify-content:space-between}
}


/* Botón submenu flotante en el page-header */
.page-submenu-btn{display:none;align-items:center;gap:5px;padding:5px 10px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg2);color:var(--text2);cursor:pointer;font-size:12px;font-weight:500;font-family:inherit;transition:all .14s}
.page-submenu-btn:hover{border-color:var(--accent);color:var(--accent)}
.page-submenu-btn i{font-size:11px;transition:transform .2s}
.page-submenu-btn.open i{transform:rotate(180deg)}
@media(max-width:768px){
  .page-submenu-btn{display:flex}
  #mobile-sub-btn{display:none!important}
}




/* Botones móvil en nav */
.mobile-nav-btns{display:none;align-items:center;gap:4px;margin-left:auto}
.mobile-sub-page-btn{display:flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 10px;border:none;background:none;cursor:pointer;color:var(--text);border-radius:var(--r-sm);font-size:12px;font-weight:600;font-family:inherit;transition:all .14s;white-space:nowrap;flex-shrink:0}
.mobile-sub-page-btn.hidden{display:none!important}
.mobile-sub-page-btn:hover{background:var(--bg2)}
.mobile-sub-page-btn i{font-size:13px}
@media(max-width:768px){
  .mobile-nav-btns{display:flex}
  .main-nav .nav-link{display:none!important}
  .main-nav-logo{min-width:0}
}



/* Tarifas eléctricas */
.elec-tarifa-row{display:flex;gap:6px;align-items:center}
.elec-tarifa-row > div{display:flex;align-items:center;gap:6px}
@media(max-width:768px){
  .elec-tarifa-row{flex-direction:column!important;align-items:stretch!important}
  .elec-tarifa-row > div{width:100%}
}


/* Submenu Maquinas */
#mq-wrap{display:flex;flex:1;min-height:0;overflow:hidden;width:100%}
#mq-nav{width:52px;flex-shrink:0;border-right:1px solid var(--border);background:var(--bg2);display:flex;flex-direction:column;padding:0;gap:0;transition:width .2s}
#mq-nav.open{width:220px}
#mq-nav .mq-btn{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-md);cursor:pointer;color:var(--text2);font-size:13px;font-weight:500;background:none;border:none;font-family:inherit;text-align:left;width:100%;white-space:nowrap}
#mq-nav .mq-btn:hover{background:var(--bg3,var(--bg));color:var(--text)}
#mq-nav .mq-btn.on{background:var(--accent-bg);color:var(--accent)}
#mq-nav .mq-btn i{font-size:14px;width:18px;text-align:center;flex-shrink:0}
#mq-nav .mq-btn span{display:none}
#mq-nav.open .mq-btn span{display:inline}
#mq-nav:not(.open) .mq-btn{justify-content:center;padding:9px;gap:0}
#mq-nav:not(.open) .ajustes-sidebar-title{display:none}
#mq-nav:not(.open) .ajustes-sidebar-header{justify-content:center;padding:8px 4px}
#mq-pages{flex:1;overflow-y:auto;padding:0;width:100%;min-width:0}
#mq-pages .app{height:auto;min-height:100%}
.mq-page{display:none;width:100%}
.mq-page.on{display:flex;flex-direction:column;width:100%}
.mq-mobile-overlay{display:none;position:fixed;inset:0;z-index:299;background:rgba(0,0,0,.4)}
.mq-mobile-overlay.open{display:block}
/* Tabs modal maquina */
.mq-tab-btn{padding:10px 14px;font-size:13px;font-weight:500;color:var(--text2);background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;font-family:inherit;transition:all .14s;white-space:nowrap}
.mq-tab-btn:hover{color:var(--text)}
.mq-tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}
.mq-tab-panel{display:none}
.mq-tab-panel.active{display:block}
@media(max-width:768px){#mq-nav{display:none!important}#mq-nav.mobile-open{display:flex!important;position:fixed;top:0;right:0;height:100%;z-index:300;width:220px;box-shadow:var(--sh-md);flex-direction:column}#mq-pages{padding:0}#mq-pages .app{padding:.75rem}}
}

/* ── Pestañas modal máquina ── */
.maq-tab-btn{-webkit-appearance:none!important;appearance:none!important;outline:none!important;padding:8px 14px!important;border:none!important;border-bottom:2px solid transparent!important;background:var(--bg)!important;cursor:pointer;font-size:12px;font-weight:500;color:var(--text2)!important;font-family:inherit;margin-bottom:-1px;transition:color .14s,border-color .14s;display:flex!important;align-items:center;gap:6px;white-space:nowrap;box-sizing:border-box}
.maq-tab-btn:hover{color:var(--text)}
.maq-tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}
.maq-tab{display:none}
.maq-tab.active{display:block}

.tbl th,.tbl td{white-space:nowrap;}

/* Scrollbar horizontal visible en escritorio */







/* Barra de scroll superior pegada a la cabecera */















/* Tabla con scroll horizontal nativo */
.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:0;box-shadow:var(--sh-sm);flex:1;min-height:0;scrollbar-width:thin;scrollbar-color:var(--text3) var(--bg2)}
.table-wrap::-webkit-scrollbar{height:8px;width:8px}
.table-wrap::-webkit-scrollbar-track{background:var(--bg2)}
.table-wrap::-webkit-scrollbar-thumb{background:var(--text3);border-radius:4px}
.tbl th,.tbl td{white-space:nowrap}



@media (max-width: 600px) {
  .modal-bg{padding:0.25rem}
  .modal{border-radius:var(--r-md)}
  .mbody{padding:0.75rem}
  .mhdr{padding:0.75rem 1rem}
  .mftr{padding:0.75rem 1rem}
  .mach-grid{display:grid;grid-template-columns:1fr;gap:6px;width:100%}
  .mcheck{width:100%;box-sizing:border-box;justify-content:flex-start}
  .mcheck input[type="checkbox"]{flex-shrink:0;width:16px;height:16px}
  .mcheck .ms{flex-shrink:0}
  .fgrid{grid-template-columns:1fr !important}
  .fg.full{grid-column:1 !important}
}












@media (max-width: 600px) {
  .hist-panel{position:relative}
  
}

@media (max-width: 600px) {
  .hist-panel{position:relative!important}
  
}



/* Input date con color del tema */
input[type="date"]{color:var(--text)}
input[type="date"]::-webkit-calendar-picker-indicator{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238c95a6' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-size:16px;
  cursor:pointer;
  opacity:1;
}



/* Input con sufijo de unidad - alineación correcta */
.input-unidad-wrap{display:flex;align-items:stretch}
.input-unidad-wrap input{border-radius:var(--r-sm) 0 0 var(--r-sm)!important;border-right:none!important;flex:1;min-width:0}
.input-unidad-wrap .unidad-suffix{padding:5px 10px;background:var(--bg2);border:1px solid var(--border);border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:13px;color:var(--text2);flex-shrink:0;white-space:nowrap;display:flex;align-items:center}



@media(max-width:768px){
  .maq-card-info{flex-direction:column;align-items:flex-start;gap:6px;min-width:0;overflow:visible}
  .maq-card-badges{flex-wrap:wrap;gap:4px}
}

/* Reset pestañas modal máquina - máxima especificidad */
#modal-maquina .maq-tab-btn,
#modal-maquina button.maq-tab-btn {
  -webkit-appearance: none !important;
  appearance: none !important;
  outline: none !important;
  background: var(--bg) !important;
  background-color: var(--bg) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  padding: 10px 14px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text2) !important;
  font-family: inherit !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  margin-bottom: -1px !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
#modal-maquina .maq-tab-btn.active {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}
#modal-maquina .maq-tab-btn:hover {
  color: var(--text) !important;
}

/* ── Pestañas modal máquina (nueva implementación con div) ── */
.maq-tabs-bar{display:flex;border-bottom:1px solid var(--border);padding:0 1.25rem;gap:0;overflow-x:auto;background:var(--bg)}
.mtab{padding:10px 14px;font-size:12px;font-weight:500;color:var(--text2);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;display:flex;align-items:center;gap:6px;white-space:nowrap;transition:color .14s,border-color .14s;user-select:none;outline:none}
.mtab:hover{color:var(--text)}
.mtab.active{color:var(--accent);border-bottom-color:var(--accent)}

/* Tipos de máquina - badges base */
.badges-right{display:flex;align-items:center;gap:16px;flex-shrink:0;margin-left:auto}


@media(max-width:768px){
  .maq-card-btns{flex-direction:column;gap:8px}
}

/* ── Paleta de color para tipos de máquina ── */
.maq-color-palette{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 0}
.maq-color-swatch{width:24px;height:24px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .1s,border-color .1s;flex-shrink:0}
.maq-color-swatch:hover{transform:scale(1.15)}
.maq-color-swatch.selected{border-color:var(--text);transform:scale(1.15)}