:root {
  --bg: #f4f2ee;
  --white: #ffffff;
  --odoo-red: #8B1A1A;
  --odoo-red2: #A52020;
  --odoo-red-light: #c0392b;
  --odoo-border: #d6c9b8;
  --odoo-header-bg: #8B1A1A;
  --odoo-row-alt: #fdf9f5;
  --odoo-table-border: #c8bfb2;
  --text-dark: #1a1a1a;
  --text-mid: #4a4a4a;
  --text-muted: #8a8070;
  --accent-gold: #c9950a;
  --status-term: #c0392b;
  --status-ent: #27ae60;
  --status-prod: #e6b800;
  --status-susp: #8e44ad;
  --status-conf: #a0785a;
  --status-pconf: #7f8c8d;
  --nav-bg: #1a0a0a;
  --sans: 'Segoe UI', Arial, sans-serif;
  --mono: 'Courier New', monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text-dark); font-family: var(--sans); font-size: 13px; min-height: 100vh; }

/* ===== TOP NAV ===== */
/* El rediseño "Bloques de color" de la barra superior vive en assets/css/barra.css
   (tokens --bar-*, .rs-header/.rs-top/.rs-strip/.rs-blk/.rs-band/.rs-chip).
   Las reglas viejas de topnav (topnav-row1 y topnav-row2), nav-btn y nav-ajustes se retiraron de acá.
   Las clases-alias .topnav-row2 y .nav-stat se mantienen SOLO como hook para
   modo_taller.js (que les inyecta display:none), sin estilo propio en este archivo. */

/* ===== PAGES ===== */
.page { display: none; padding: 0; min-height: calc(100vh - var(--bar-h, 142px)); }
.page.active { display: block; }
#app-wrapper { min-height: calc(100vh - var(--bar-h, 142px)); margin-top: 0; padding-top: 0; }

/* ===== DASHBOARD ===== */
.dash-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.page-title { font-size: 28px; font-weight: 700; color: var(--text-dark); }
.page-subtitle { font-size: 16px; color: var(--text-muted); margin-top: 2px; }

.kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 20px; }
.kpi-card { background: var(--white); border: 1px solid var(--odoo-border); border-radius: 8px; padding: 14px 16px; border-left: 4px solid var(--odoo-red); }
.kpi-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px; }
.kpi-val { font-size: 26px; font-weight: 700; line-height: 1; }
.kpi-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.kpi-card.kpi-total { border-left-color: var(--odoo-red); }
.kpi-card.kpi-pend  { border-left-color: var(--status-prod); }
.kpi-card.kpi-apro  { border-left-color: var(--status-ent); }
.kpi-card.kpi-rech  { border-left-color: var(--status-susp); }
.kpi-card.kpi-alert { border-left-color: var(--status-term); }

.dash-table-wrap {
  background: var(--white); border: 1px solid var(--odoo-border); border-radius: 8px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  --colw-expand: 48px; --colw-ot: 80px; --colw-odoo: 90px; --colw-cliente-min: 160px;
  --colw-entrega: 100px; --colw-dias: 90px; --colw-avance: 120px;
  --colw-estado: 110px; --colw-actions: 180px;
}
.dash-table-wrap .orders-table {
  min-width: calc(var(--colw-expand) + var(--colw-ot) + var(--colw-odoo) + var(--colw-cliente-min) + var(--colw-entrega) + var(--colw-dias) + var(--colw-avance) + var(--colw-estado) + var(--colw-actions) + 24px);
}
.dash-table-toolbar { padding: 12px 16px; border-bottom: 1px solid var(--odoo-border); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.search-inp { flex: 1; min-width: 180px; max-width: 280px; padding: 6px 10px 6px 28px; border: 1px solid var(--odoo-border); border-radius: 6px; font-size: 12px; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 8px center; outline: none; }
.search-inp:focus { border-color: var(--odoo-red2); }
.filter-sel { padding: 6px 10px; border: 1px solid var(--odoo-border); border-radius: 6px; font-size: 12px; background: var(--bg); outline: none; cursor: pointer; }
.btn-new { background: var(--odoo-red); color: #fff; border: none; border-radius: 6px; padding: 7px 16px; font-size: 12px; font-weight: 600; cursor: pointer; margin-left: auto; transition: background 0.15s; }
.btn-new:hover { background: var(--odoo-red2); }

/* ORDERS TABLE */
.orders-table { width: 100%; border-collapse: collapse; }
.orders-table thead tr { background: var(--odoo-header-bg); }
.orders-table thead th { padding: 9px 12px; text-align: left; font-size: 11px; font-weight: 600; color: #fff; letter-spacing: 0.05em; white-space: nowrap; }
.orders-table tbody tr { border-bottom: 1px solid var(--odoo-border); cursor: pointer; transition: background 0.1s; }
.orders-table tbody tr:hover { background: #fef5ee; }
.orders-table tbody td { padding: 0; vertical-align: top; }

/* ORDER ROW */
.order-row-header { display: flex; align-items: center; padding: 10px 12px; gap: 0; }
.col-expand  { width: var(--colw-expand);  flex: 0 0 var(--colw-expand);  min-width: 0; }
.col-ot      { width: var(--colw-ot);      flex: 0 0 var(--colw-ot);      min-width: 0; }
.col-odoo    { width: var(--colw-odoo);    flex: 0 0 var(--colw-odoo);    min-width: 0; }
.col-cliente { flex: 1 1 0; min-width: 0; overflow: hidden; }
.col-entrega { width: var(--colw-entrega); flex: 0 0 var(--colw-entrega); min-width: 0; }
.col-dias    { width: var(--colw-dias);    flex: 0 0 var(--colw-dias);    min-width: 0; }
.col-avance  { width: var(--colw-avance);  flex: 0 0 var(--colw-avance); min-width: 0; }
.col-estado  { width: var(--colw-estado);  flex: 0 0 var(--colw-estado); min-width: 0; }
.col-actions { width: var(--colw-actions); flex: 0 0 var(--colw-actions); min-width: 0; text-align: right; }

.expand-btn { background: none; border: none; cursor: pointer; font-size: 14px; color: var(--text-muted); padding: 2px; transition: transform 0.2s; line-height: 1; }
.expand-btn.open { transform: rotate(90deg); }

.ot-badge { display: inline-block; background: rgba(139,26,26,0.1); color: var(--odoo-red); border: 1px solid rgba(139,26,26,0.25); border-radius: 4px; padding: 2px 8px; font-size: 11px; font-weight: 700; font-family: var(--mono); letter-spacing: 0.04em; }
.venta-ref { font-size: 11px; color: var(--text-muted); font-family: var(--mono); }
.client-name { font-size: 12px; font-weight: 600; }
.client-vendor { font-size: 10px; color: var(--text-muted); }
.date-val { font-size: 12px; }
@media (min-width: 769px) {
  .client-name, .client-vendor { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

.dias-chip  { display: inline-block; padding: 4px 11px; border-radius: 12px; font-size: 12px; font-weight: 800; letter-spacing: 0.02em; }
.dias-ok    { background: rgba(39,174,96,0.18);  color: #1a7a47; border: 1.5px solid rgba(39,174,96,0.5); }
.dias-warn  { background: #fff176;               color: #7a6000; border: 1.5px solid #f0c800; }
.dias-alert { background: rgba(192,57,43,0.18);  color: #a01e10; border: 1.5px solid rgba(192,57,43,0.5); }
.dias-venc  { background: rgba(142,68,173,0.18); color: #6a1e9e; border: 1.5px solid rgba(142,68,173,0.5); }

.progress-bar-bg   { height: 8px; background: #e8e0d4; border-radius: 4px; overflow: hidden; }
.progress-bar-fill { height: 100%; border-radius: 4px; background: var(--status-ent); transition: width 0.3s; }
.progress-label    { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

.estado-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 12px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; }
.sb-pendiente { background: rgba(230,126,34,0.12); color: #c77a00;           border: 1px solid rgba(230,126,34,0.3); }
.sb-aprobada  { background: rgba(39,174,96,0.12);  color: #1e8449;           border: 1px solid rgba(39,174,96,0.3); }
.sb-rechazada { background: rgba(142,68,173,0.12); color: var(--status-susp);border: 1px solid rgba(142,68,173,0.3); }
.sb-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* ITEMS SUBROW */
.items-subrow { display: none; border-top: 1px solid var(--odoo-border); background: #fafaf7; padding: 0 12px 12px 40px; }
.items-subrow.open { display: block; }
.items-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.items-table thead tr { background: #e8e0d4; }
.items-table thead th { padding: 6px 10px; font-size: 10px; font-weight: 600; color: var(--text-mid); text-align: left; letter-spacing: 0.06em; }
.items-table tbody tr { border-bottom: 1px solid #ece5d8; }
.items-table tbody tr:last-child { border-bottom: none; }
.items-table tbody td { padding: 7px 10px; font-size: 12px; }
.item-name { font-weight: 500; }

/* ITEM STATUS */
.item-status-sel { padding: 3px 8px; border-radius: 12px; font-size: 10px; font-weight: 700; border: none; cursor: pointer; appearance: none; -webkit-appearance: none; text-align: center; outline: none; min-width: 110px; }
.ist-terminado    { background: var(--status-term); color: #fff; }
.ist-entregado    { background: var(--status-ent);  color: #fff; }
.ist-produccion   { background: var(--status-prod); color: #fff; }
.ist-suspendido   { background: var(--status-susp); color: #fff; }
.ist-confirmado   { background: var(--status-conf); color: #fff; }
.ist-porconfirmar { background: var(--status-pconf);color: #fff; }

/* PROC BADGE */
.proc-badge-small { display: inline-block; padding: 1px 7px; border-radius: 8px; font-size: 10px; font-weight: 700; margin: 1px; white-space: nowrap; }

/* ACTIONS */
.row-actions { display: flex; gap: 4px; justify-content: flex-end; }
.act-btn { padding: 4px 8px; border-radius: 5px; font-size: 10px; border: 1px solid var(--odoo-border); background: var(--white); color: var(--text-mid); cursor: pointer; transition: all 0.12s; white-space: nowrap; }
.act-btn:hover { border-color: var(--odoo-red); color: var(--odoo-red); }
.act-btn.approve { border-color: rgba(39,174,96,0.5); color: var(--status-ent); }
.act-btn.approve:hover { background: rgba(39,174,96,0.1); }
.act-btn.pdf { border-color: rgba(41,128,185,0.5); color: #2980b9; }
.act-btn.pdf:hover { background: rgba(41,128,185,0.08); }
.act-btn.reject { border-color: rgba(192,57,43,0.5); color: var(--status-term); }
.act-btn.reject:hover { background: rgba(192,57,43,0.1); }
.act-btn.del { border-color: rgba(192,57,43,0.3); color: var(--text-muted); }
.act-btn.del:hover { color: var(--status-term); border-color: var(--status-term); }

.empty-dash { text-align: center; padding: 50px 20px; color: var(--text-muted); }
.empty-dash .ei { font-size: 48px; opacity: 0.25; margin-bottom: 12px; }
.empty-dash .et { font-size: 15px; font-weight: 600; color: var(--text-dark); opacity: 0.4; }

/* ===== MODAL ===== */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: none; align-items: center; justify-content: center; z-index: 300; padding: 20px; }
.modal-overlay.open { display: flex; }
.modal-box { background: var(--white); border-radius: 10px; width: 100%; max-width: 720px; max-height: 88vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.25); }

#modalOverlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: none; align-items: center; justify-content: center; z-index: 300; padding: 20px; }
#modalOverlay.open { display: flex; }
#modalContent { background: var(--white); border-radius: 10px; width: 100%; max-width: 760px; max-height: 88vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.25); }

.modal-head { background: var(--odoo-header-bg); color: #fff; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 1; border-radius: 10px 10px 0 0; }
.modal-head-title { font-size: 15px; font-weight: 700; }
.modal-close { background: none; border: none; color: rgba(255,255,255,0.7); font-size: 20px; cursor: pointer; line-height: 1; }
.modal-close:hover { color: #fff; }
.modal-body { padding: 22px; }
.modal-foot { padding: 14px 22px; border-top: 1px solid var(--odoo-border); display: flex; gap: 10px; justify-content: flex-end; position: sticky; bottom: 0; background: var(--white); border-radius: 0 0 10px 10px; }

.ot-meta-box { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--odoo-border); border-radius: 6px; overflow: hidden; margin-bottom: 14px; font-size: 12px; }
.ot-meta-cell { padding: 9px 12px; border-right: 1px solid var(--odoo-border); border-bottom: 1px solid var(--odoo-border); }
.ot-meta-cell:nth-child(2n) { border-right: none; }
.ot-meta-cell:nth-last-child(-n+2) { border-bottom: none; }
.omc-label { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 3px; }
.omc-value { font-size: 13px; color: var(--text-dark); }
.omc-value.red { color: var(--odoo-red); font-weight: 700; }

.status-strip { border-radius: 6px; padding: 8px 14px; font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.ss-aprobada  { background: rgba(39,174,96,0.1);  border: 1px solid rgba(39,174,96,0.3);  color: var(--status-ent); }
.ss-pendiente { background: rgba(230,126,34,0.1); border: 1px solid rgba(230,126,34,0.3); color: #c77a00; }
.ss-rechazada { background: rgba(142,68,173,0.1); border: 1px solid rgba(142,68,173,0.3); color: var(--status-susp); }

.ot-items-tbl { width: 100%; border-collapse: collapse; }
.ot-items-tbl thead tr { background: var(--odoo-header-bg); }
.ot-items-tbl thead th { padding: 8px 10px; color: #fff; font-size: 11px; font-weight: 600; text-align: left; letter-spacing: 0.05em; }
.ot-items-tbl tbody tr { border-bottom: 1px solid var(--odoo-border); }
.ot-items-tbl tbody tr:nth-child(even) { background: var(--odoo-row-alt); }
.ot-items-tbl tbody td { padding: 9px 10px; font-size: 12px; }

/* ===== TOAST ===== */
.toast { position: fixed; bottom: 24px; right: 24px; z-index: 999; background: #27ae60; color: #fff; padding: 10px 18px; border-radius: 6px; font-size: 12px; font-weight: 600; opacity: 0; transform: translateY(8px); transition: all 0.3s; pointer-events: none; box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
.toast.err  { background: var(--status-term); }
.toast.show { opacity: 1; transform: translateY(0); }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--odoo-border); border-radius: 3px; }

/* ===== CRM KANBAN — barra horizontal siempre visible ===== */
#crm-kanban {
  scrollbar-width: thin;
  scrollbar-color: #9333ea #e9d5ff;
}
#crm-kanban::-webkit-scrollbar { height: 14px; }
#crm-kanban::-webkit-scrollbar-track { background: #e9d5ff; border-radius: 8px; }
#crm-kanban::-webkit-scrollbar-thumb { background: #9333ea; border-radius: 8px; border: 2px solid #e9d5ff; }
#crm-kanban::-webkit-scrollbar-thumb:hover { background: #7c3aed; }

/* ===== NAV DROPDOWN ===== */
/* Reemplazado por las bandas .rs-band de barra.css (rediseño "Bloques de color").
   Las reglas nav-separator, nav-dropdown-menu e item, y nav-caret se retiraron: ya no hay
   desplegables flotantes, las secciones se muestran en una banda in-flow. */

/* ===== LOGIN ===== */
.login-overlay { position: fixed; inset: 0; background: #1a0a0a; display: flex; align-items: center; justify-content: center; z-index: 9999; overflow: hidden; }
.login-card { position: relative; z-index: 2; background: rgba(255,255,255,0.97); border-radius: 16px; padding: 40px 36px; width: 100%; max-width: 380px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); text-align: center; }
.login-card    { background: #fff; border-radius: 16px; padding: 40px 36px; width: 100%; max-width: 380px; box-shadow: 0 20px 60px rgba(0,0,0,0.4); text-align: center; }
.login-logo    { height: 80px; width: auto; margin-bottom: 16px; }
.login-title   { font-size: 20px; font-weight: 700; color: var(--odoo-red); margin-bottom: 4px; }
.login-sub     { font-size: 12px; color: var(--text-muted); margin-bottom: 28px; }
.login-field   { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; text-align: left; }
.login-label   { font-size: 11px; font-weight: 600; color: var(--text-mid); text-transform: uppercase; letter-spacing: 0.07em; }
.login-input   { padding: 10px 12px; border: 1px solid var(--odoo-border); border-radius: 8px; font-size: 13px; outline: none; transition: border-color 0.2s; width: 100%; }
.login-input:focus { border-color: var(--odoo-red); }
.login-btn     { width: 100%; padding: 12px; background: var(--odoo-red); color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer; margin-top: 6px; transition: background 0.15s; }
.login-btn:hover { background: var(--odoo-red2); }
.login-error   { color: var(--odoo-red); font-size: 12px; margin-top: 8px; min-height: 18px; }

/* ===== NEW OT ===== */
.ot-form-wrap { max-width: 900px; margin: 0 auto; }
.form-card { background: var(--white); border: 1px solid var(--odoo-border); border-radius: 8px; overflow: hidden; margin-bottom: 16px; }
.form-card-header { background: var(--odoo-header-bg); color: #fff; padding: 12px 18px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.form-card-body { padding: 18px; }
.form-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.form-field  { display: flex; flex-direction: column; gap: 4px; }
.form-field label { font-size: 11px; font-weight: 600; color: var(--text-mid); text-transform: uppercase; letter-spacing: 0.07em; }
.form-input, .form-select, .form-textarea { padding: 8px 10px; border: 1px solid var(--odoo-border); border-radius: 6px; font-size: 13px; font-family: var(--sans); background: var(--bg); color: var(--text-dark); outline: none; transition: border-color 0.15s; width: 100%; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--odoo-red2); background: var(--white); }
.form-textarea { resize: vertical; min-height: 70px; }
.preview-ot-num { background: rgba(139,26,26,0.08); border: 1px solid rgba(139,26,26,0.2); border-radius: 6px; padding: 8px 12px; font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--odoo-red); text-align: center; letter-spacing: 0.05em; }

.drop-zone { border: 2px dashed var(--odoo-border); border-radius: 8px; padding: 28px 20px; text-align: center; cursor: pointer; transition: all 0.2s; background: var(--bg); }
.drop-zone:hover, .drop-zone.over { border-color: var(--odoo-red); background: rgba(139,26,26,0.04); }
.dz-icon  { font-size: 36px; margin-bottom: 8px; opacity: 0.5; }
.dz-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.dz-sub   { font-size: 11px; color: var(--text-muted); }
#fileInput { display: none; }

.file-loaded-bar { background: rgba(39,174,96,0.08); border: 1px solid rgba(39,174,96,0.3); border-radius: 6px; padding: 9px 14px; display: flex; align-items: center; gap: 10px; font-size: 12px; margin-top: 8px; }
.fl-name  { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dark); }
.fl-clear { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; line-height: 1; }
.fl-clear:hover { color: var(--status-term); }

.ext-card { background: var(--white); border: 1px solid var(--odoo-border); border-radius: 8px; overflow: hidden; }
.ext-card-header { background: #f0ebe3; padding: 8px 14px; border-bottom: 1px solid var(--odoo-border); font-size: 11px; font-weight: 600; color: var(--text-mid); letter-spacing: 0.06em; display: flex; align-items: center; gap: 6px; }
.ext-card-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }

.form-actions { display: flex; gap: 10px; }
.btn-submit { background: var(--odoo-red); color: #fff; border: none; border-radius: 6px; padding: 10px 24px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s; }
.btn-submit:hover { background: var(--odoo-red2); }
.btn-cancel { background: transparent; color: var(--text-mid); border: 1px solid var(--odoo-border); border-radius: 6px; padding: 10px 20px; font-size: 13px; cursor: pointer; transition: all 0.15s; }
.btn-cancel:hover { border-color: var(--odoo-red); color: var(--odoo-red); }

/* ===== SETTINGS ===== */
.settings-grid { display: grid; grid-template-columns: 220px 1fr; gap: 20px; }
.settings-menu { background: var(--white); border: 1px solid var(--odoo-border); border-radius: 8px; overflow: hidden; }
.settings-menu-item { display: block; padding: 11px 16px; font-size: 13px; color: var(--text-mid); border-bottom: 1px solid var(--odoo-border); cursor: pointer; transition: background 0.12s; background: transparent; border-left: 3px solid transparent; width: 100%; text-align: left; font-family: var(--sans); }
.settings-menu-item:last-child { border-bottom: none; }
.settings-menu-item:hover { background: #fef5ee; }
.settings-menu-item.active { background: #fef5ee; border-left-color: var(--odoo-red); color: var(--odoo-red); font-weight: 600; }
.settings-panel { background: var(--white); border: 1px solid var(--odoo-border); border-radius: 8px; padding: 24px; }
.settings-section-title { font-size: 15px; font-weight: 700; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid var(--odoo-border); }

.users-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.users-table th { background: #f5f0ea; padding: 9px 12px; text-align: left; font-size: 11px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.06em; border-bottom: 1px solid var(--odoo-border); }
.users-table td { padding: 10px 12px; border-bottom: 1px solid var(--odoo-border); vertical-align: middle; }
.users-table tr:last-child td { border-bottom: none; }
.users-table tr:hover td { background: #fef9f5; }
.role-badge { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 10px; font-weight: 700; }
.role-admin { background: rgba(139,26,26,0.12); color: var(--odoo-red); border: 1px solid rgba(139,26,26,0.2); }
.role-user  { background: rgba(39,174,96,0.1);  color: #1a7a47;        border: 1px solid rgba(39,174,96,0.3); }

.perms-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap: 8px; margin-top: 10px; }
.perm-checkbox { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--odoo-border); border-radius: 6px; cursor: pointer; font-size: 12px; transition: background 0.12s; }
.perm-checkbox:hover { background: #fef5ee; border-color: var(--odoo-red); }
.perm-checkbox input { accent-color: var(--odoo-red); width: 14px; height: 14px; }

/* ===== EMPTY PAGES ===== */
.empty-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; gap: 12px; color: var(--text-muted); }
.empty-page-icon  { font-size: 56px; opacity: 0.2; }
.empty-page-title { font-size: 18px; font-weight: 700; opacity: 0.3; }
.empty-page-sub   { font-size: 13px; opacity: 0.5; }

/* ===== USER PILL ===== */
/* La pill de usuario ahora es un .rs-ctl.user con .rs-avatar/.rs-uname en barra.css.
   Las reglas viejas .user-pill/.user-avatar/.user-name se retiraron (el wrapper
   #userPillWrap conserva class="user-pill" solo como contenedor de posicion). */

/* ===== PLANIFICACIÓN ===== */
.plan-tab-btn { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--odoo-border); border-left: 4px solid transparent; border-radius: 6px; background: var(--white); color: var(--text-mid); font-size: 12px; font-weight: 500; cursor: pointer; font-family: var(--sans); transition: all 0.15s; text-align: left; width: 100%; }
.plan-tab-btn:hover { background: #fef5ee; }
.plan-tab-btn.active { background: #fef5ee; color: var(--text-dark); font-weight: 700; }
.plan-tab-count { margin-left: auto; background: var(--odoo-red); color: #fff; border-radius: 10px; padding: 1px 7px; font-size: 10px; font-weight: 700; min-width: 20px; text-align: center; }
.plan-tab-btn.active .plan-tab-count { background: var(--odoo-header-bg); }

.op-card { background: var(--white); border: 1px solid var(--odoo-border); border-radius: 8px; margin-bottom: 14px; overflow: hidden; }
.op-card-header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--odoo-border); background: #faf7f3; flex-wrap: wrap; }
.op-num { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--odoo-red); background: rgba(139,26,26,0.08); border: 1px solid rgba(139,26,26,0.2); border-radius: 6px; padding: 3px 10px; white-space: nowrap; }
.op-cliente { font-size: 13px; font-weight: 600; }
.op-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.op-table thead tr { background: var(--odoo-header-bg); }
.op-table thead th { padding: 8px 10px; color: #fff; font-size: 10px; font-weight: 600; text-align: left; letter-spacing: 0.05em; white-space: nowrap; }
.op-table tbody tr { border-bottom: 1px solid var(--odoo-border); }
.op-table tbody tr:nth-child(even) { background: #fdf9f5; }
.op-table tbody td { padding: 9px 10px; vertical-align: middle; }
.op-edit-input { width: 100%; padding: 4px 8px; border: 1px solid var(--odoo-border); border-radius: 4px; font-size: 12px; font-family: var(--sans); background: var(--bg); outline: none; }
.op-edit-input:focus { border-color: var(--odoo-red); background: #fff; }

/* ===== FLUJO DE PRODUCCIÓN ===== */
.flow-page { padding: 16px 20px; }
.flow-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.flow-title    { font-size: 28px; font-weight: 700; }
.flow-subtitle { font-size: 16px; color: var(--text-muted); margin-top: 2px; }
.flow-badge      { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.flow-badge-next { background: rgba(39,174,96,0.12); color: #1a7a47; border: 1px solid rgba(39,174,96,0.3); }
.flow-item-card { background: var(--white); border: 1px solid var(--odoo-border); border-radius: 8px; margin-bottom: 10px; overflow: hidden; transition: box-shadow 0.15s; }
.flow-item-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.flow-item-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #faf7f3; border-bottom: 1px solid var(--odoo-border); flex-wrap: wrap; }
.flow-item-num    { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--odoo-red); background: rgba(139,26,26,0.08); border: 1px solid rgba(139,26,26,0.2); border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.flow-item-client { font-size: 13px; font-weight: 600; }
.flow-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.flow-table thead tr { background: var(--odoo-header-bg); }
.flow-table thead th { padding: 7px 10px; color: #fff; font-size: 10px; font-weight: 600; text-align: left; letter-spacing: 0.05em; white-space: normal; overflow: hidden; text-overflow: ellipsis; }
.flow-table tbody tr { border-bottom: 1px solid var(--odoo-border); }
.flow-table tbody tr:nth-child(even) { background: #fdf9f5; }
.flow-table tbody td { padding: 9px 10px; vertical-align: middle; font-size: 12px; }
.flow-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 0; }

/* ===== BOTÓN "MARCAR POR NÚMERO" (estilo del CTA de Cotización por proyectos) ===== */
.btn-marcar-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 16px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #7c3aed, #db2777);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.28);
}
.btn-marcar-numero:hover { filter: brightness(1.05); }
/* Contenedor que empuja el botón al extremo derecho de la cabecera del producto. */
.btn-marcar-wrap { margin-left: auto; }
@media (max-width: 768px) {
  .btn-marcar-numero { min-height: 44px; }
  /* En pantallas angostas el botón baja debajo del título y ocupa todo el ancho. */
  .btn-marcar-wrap { margin-left: 0; width: 100%; margin-top: 6px; }
  .btn-marcar-wrap .btn-marcar-numero { width: 100%; }
}

/* ===== CLIENTES — TABLA DIRECTORIO ===== */
.vc-table-wrap { background: var(--white); border: 1px solid var(--odoo-table-border); border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.07); overflow: hidden; }
.vc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.vc-table thead tr { background: var(--odoo-header-bg); }
.vc-table thead th { padding: 10px 12px; color: #fff; font-size: 11px; font-weight: 600; text-align: left; letter-spacing: 0.05em; white-space: nowrap; }
.vc-table tbody tr { border-bottom: 1px solid var(--odoo-table-border); }
.vc-table tbody tr:nth-child(even) { background: var(--odoo-row-alt); }
.vc-table tbody tr:hover { background: #fef5ee; }
.vc-table td { padding: 9px 12px; color: var(--text-dark); vertical-align: middle; }

/* ===== CLIENTES — PANEL DE FIDELIZACIÓN ===== */
.fid-metrics { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.fid-metric-card { background: var(--white); border: 1px solid var(--odoo-table-border); border-radius: 10px; padding: 12px 16px; flex: 1 1 150px; min-width: 140px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.fid-metric-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.fid-metric-valor { font-size: 24px; font-weight: 800; color: var(--text-dark); }

.fid-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

.fid-chart-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; background: var(--white); border: 1px solid var(--odoo-table-border); border-radius: 10px; padding: 16px 20px; margin-bottom: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.fid-legend { display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.fid-legend-item { display: flex; align-items: center; gap: 7px; }

.fid-agenda-panel { background: var(--white); border: 1px solid var(--odoo-table-border); border-radius: 10px; margin-bottom: 18px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.fid-panel-title { background: var(--odoo-header-bg); color: #fff; font-size: 12px; font-weight: 700; padding: 10px 16px; }
.fid-agenda-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--odoo-table-border); }
.fid-agenda-item:last-child { border-bottom: none; }

.fid-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.fid-buscar { border: 1px solid var(--odoo-border); border-radius: 7px; padding: 7px 12px; font-size: 13px; outline: none; width: 220px; font-family: var(--sans); }
.fid-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fid-chip { border: 1px solid var(--odoo-border); background: var(--white); color: var(--text-mid); border-radius: 20px; padding: 5px 14px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--sans); transition: all .15s; }
.fid-chip:hover { background: #fef5ee; border-color: var(--odoo-red); }
.fid-chip-active { background: var(--odoo-red); color: #fff; border-color: var(--odoo-red); }

.fid-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.fid-card { background: var(--white); border: 1px solid var(--odoo-table-border); border-radius: 10px; padding: 14px 16px; box-shadow: 0 1px 3px rgba(0,0,0,.06); display: flex; flex-direction: column; }
.fid-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.fid-card-nombre { font-size: 13px; font-weight: 700; color: var(--text-dark); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fid-sector-chip { background: #f3f4f6; color: var(--text-mid); font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.fid-badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 10px; margin-bottom: 10px; align-self: flex-start; }
.fid-row { margin-bottom: 8px; }
.fid-row-label { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; display: block; margin-bottom: 2px; }
.fid-btn-ficha { margin-top: 4px; background: #1565c0; color: #fff; border: none; border-radius: 6px; padding: 7px 14px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--sans); }
.fid-btn-ficha:hover { background: #0d47a1; }
.fid-btn-contacto { margin-top: 4px; background: #059669; color: #fff; border: none; border-radius: 6px; padding: 7px 14px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--sans); }
.fid-btn-contacto:hover { background: #047857; }

/* ===== CLIENTES — BITÁCORA DE CONTACTOS (POSTVENTA, FASE 4) ===== */
.vcseg-item { border: 1px solid var(--odoo-table-border); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; background: #fafaf9; }
.vcseg-item:last-child { margin-bottom: 0; }

.flow-approve-row { padding: 10px 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: #f9f9f9; border-top: 1px solid var(--odoo-border); }
.flow-approve-btn   { padding: 6px 16px; border: none; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.flow-btn-approve   { background: #27ae60; color: #fff; }
.flow-btn-approve:hover { background: #1a7a40; }
.flow-btn-route     { background: #2980b9; color: #fff; }
.flow-btn-route:hover { background: #1a5c8a; }
.flow-empty      { text-align: center; padding: 40px 20px; color: var(--text-muted); }
.flow-empty-icon { font-size: 40px; opacity: 0.2; margin-bottom: 10px; }
.flow-empty-text { font-size: 14px; font-weight: 600; opacity: 0.35; }
.flow-empty-sub  { font-size: 12px; margin-top: 6px; opacity: 0.5; }

/* ===== CALENDARIO ===== */
.cal-toolbar { display: flex; align-items: center; gap: 10px; padding: 14px 20px; background: var(--white); border: 1px solid var(--odoo-border); border-radius: 10px 10px 0 0; border-bottom: none; flex-wrap: wrap; }
.cal-title   { font-size: 16px; font-weight: 700; flex: 1; }
.cal-nav-btn { padding: 6px 14px; border: 1px solid var(--odoo-border); border-radius: 6px; background: var(--white); cursor: pointer; font-size: 13px; transition: all 0.15s; font-family: var(--sans); }
.cal-nav-btn:hover { background: var(--odoo-red); color: #fff; border-color: var(--odoo-red); }
.cal-view-btn { padding: 5px 12px; border: 1px solid var(--odoo-border); border-radius: 6px; background: var(--white); cursor: pointer; font-size: 12px; font-weight: 600; transition: all 0.15s; font-family: var(--sans); color: var(--text-mid); }
.cal-view-btn.active { background: var(--odoo-red); color: #fff; border-color: var(--odoo-red); }
.cal-view-btn:hover:not(.active) { background: #fef5ee; border-color: var(--odoo-red); }

.cal-month { border: 1px solid var(--odoo-border); border-radius: 0 0 10px 10px; overflow: hidden; background: var(--white); }
.cal-month-header { display: grid; grid-template-columns: repeat(7,1fr); }
.cal-month-header span { padding: 8px; text-align: center; font-size: 11px; font-weight: 700; color: var(--text-muted); background: #f9f6f2; border-bottom: 1px solid var(--odoo-border); text-transform: uppercase; letter-spacing: 0.06em; }
.cal-month-grid { display: grid; grid-template-columns: repeat(7,1fr); }
.cal-day { min-height: 80px; padding: 6px; border-right: 1px solid var(--odoo-border); border-bottom: 1px solid var(--odoo-border); cursor: pointer; transition: background 0.12s; position: relative; }
.cal-day:nth-child(7n) { border-right: none; }
.cal-day:hover { background: #fef9f5; }
.cal-day.today { background: #fff8f4; }
.cal-day.today .cal-day-num { background: var(--odoo-red); color: #fff; border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
.cal-day.other-month { background: #fafafa; }
.cal-day.other-month .cal-day-num { color: #ccc; }
.cal-day-num { font-size: 12px; font-weight: 600; color: var(--text-dark); margin-bottom: 4px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
.cal-day-fundida { font-size: 10px; font-weight: 600; border-radius: 4px; padding: 1px 5px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }

.cal-week { border: 1px solid var(--odoo-border); border-radius: 0 0 10px 10px; overflow: hidden; background: var(--white); }
.cal-week-header { display: grid; border-bottom: 1px solid var(--odoo-border); background: #f9f6f2; }
.cal-week-header-cell { padding: 8px; text-align: center; font-size: 11px; font-weight: 700; color: var(--text-muted); border-right: 1px solid var(--odoo-border); }
.cal-week-cell { min-height: 60px; padding: 6px; border-right: 1px solid var(--odoo-border); border-bottom: 1px solid var(--odoo-border); cursor: pointer; transition: background 0.12s; }
.cal-week-cell:hover { background: #fef9f5; }

/* ===== FUNDIDA MODAL ===== */
.fundida-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px; }
.fundida-overlay.open { display: flex; }
.fundida-modal { background: var(--white); border-radius: 14px; width: 100%; max-width: 1060px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.fundida-modal-header { display: flex; align-items: flex-start; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--odoo-border); background: #faf7f3; border-radius: 14px 14px 0 0; flex-wrap: wrap; }
.fundida-modal-body   { overflow-y: auto; padding: 18px 20px; flex: 1; }
.fundida-modal-footer { padding: 12px 20px; border-top: 1px solid var(--odoo-border); display: flex; gap: 10px; justify-content: flex-end; }
.fundida-card { border: 1px solid var(--odoo-border); border-radius: 8px; margin-bottom: 14px; overflow: hidden; }
.fundida-card-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #f5f0ea; border-bottom: 1px solid var(--odoo-border); flex-wrap: wrap; }
.fundida-num { font-size: 13px; font-weight: 700; color: var(--white); background: var(--odoo-red); border-radius: 6px; padding: 3px 12px; }

/* ===== MINI CAL ===== */
.mini-cal { background: #fff; border: 1px solid var(--odoo-border); border-radius: 10px; padding: 10px 12px; min-width: 210px; }
.mini-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.mini-cal-title  { font-size: 12px; font-weight: 700; color: var(--text-dark); }
.mini-cal-nav    { background: none; border: none; cursor: pointer; font-size: 14px; color: var(--text-muted); padding: 0 4px; line-height: 1; }
.mini-cal-nav:hover { color: #e65c00; }
.mini-cal-grid   { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }
.mini-cal-dow    { font-size: 9px; font-weight: 700; color: var(--text-muted); text-align: center; padding: 2px 0; text-transform: uppercase; }
.mini-cal-cell   { font-size: 11px; text-align: center; padding: 4px 2px; border-radius: 5px; cursor: pointer; color: var(--text-dark); line-height: 1.2; }
.mini-cal-cell:hover { background: #f0e8e0; }
.mini-cal-cell.other-m   { color: #ccc; cursor: default; pointer-events: none; }
.mini-cal-cell.today-m   { background: #fdebd0; font-weight: 700; color: #e65c00; }
.mini-cal-cell.selected-m{ background: #e65c00 !important; color: #fff !important; font-weight: 700; }
.mini-cal-cell.has-fundidas { position: relative; }
.mini-cal-cell.has-fundidas::after { content: ''; display: block; width: 4px; height: 4px; border-radius: 50%; background: #e65c00; margin: 1px auto 0; }
.mini-cal-cell.selected-m::after { background: #fff; }

/* ===== FOLDER ===== */
.folder-card { border: 2px dashed var(--odoo-border); border-radius: 10px; padding: 24px; text-align: center; cursor: pointer; transition: all 0.2s; }
.folder-card:hover { border-color: var(--odoo-red); background: #fef9f5; }
.folder-icon { font-size: 40px; margin-bottom: 8px; }

/* ===== RESPONSIVE ===== */
@media(max-width:900px) {
    .kpi-row       { grid-template-columns: repeat(2,1fr); }
    .form-grid     { grid-template-columns: 1fr; }
    .form-grid-3   { grid-template-columns: 1fr 1fr; }
    .ot-meta-box   { grid-template-columns: 1fr; }
    .settings-grid { grid-template-columns: 1fr; }
}

/* ===== SISTEMA RESPONSIVE: TABLA → CARDS ===== */
/* Wrapper que da scroll horizontal en desktop como fallback */
.resp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ===== CARD TABLE ===== */
/* Envolver la tabla en <div class="card-table"> para que las filas no se
   pierdan contra el fondo beige de la página: fondo blanco + borde + hover. */
.card-table { background: #fff; border: 1px solid var(--odoo-border); border-radius: 10px; overflow: hidden; }
.card-table table { width: 100%; border-collapse: collapse; }
.card-table tbody tr { border-bottom: 1px solid var(--odoo-border); }
.card-table tbody tr:last-child { border-bottom: none; }
.card-table tbody tr:hover { background: #faf9f7; }
.card-table td { padding: 10px 12px; }

/* Zebra striping — tabla de Gastos */
.gst-tabla tbody tr:nth-child(even) { background: var(--odoo-row-alt); }
.gst-tabla tbody tr:hover { background: #faf9f7; }

/* Zebra striping — Reglas de abastecimiento (productos sin regla) */
.inv-reglas-sinregla-tabla tbody tr:nth-child(even) { background: var(--odoo-row-alt); }
.inv-reglas-sinregla-tabla tbody tr:hover { background: #faf9f7; }

/* ============================================================
   EMPLEADOS — listado (Administrativo > Empleados)
   Clases propias .emp-* — NO comparte estilos con card-table
   ============================================================ */
#page-adm_empleados .emp-tabla-wrap {
  background: var(--white);
  border: 1px solid var(--odoo-border);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(26,26,26,0.06);
  overflow: hidden;
}
#page-adm_empleados .emp-tabla { width: 100%; border-collapse: collapse; }
#page-adm_empleados .emp-tabla thead tr { background: var(--odoo-red); }
#page-adm_empleados .emp-th {
  padding: 11px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
}
#page-adm_empleados .emp-tabla tbody tr.emp-row {
  background: var(--white);
  border-bottom: 1px solid var(--odoo-border);
  cursor: pointer;
  transition: background 0.12s;
}
#page-adm_empleados .emp-tabla tbody tr.emp-row:nth-child(even) { background: var(--odoo-row-alt); }
#page-adm_empleados .emp-tabla tbody tr.emp-row:hover { background: #fdf0e9; }
#page-adm_empleados .emp-tabla tbody tr.emp-row td { padding: 9px 12px; vertical-align: middle; font-size: 12px; }
#page-adm_empleados .emp-tabla tbody tr:last-child { border-bottom: none; }

#page-adm_empleados .emp-fila-seccion td {
  padding: 8px 12px;
  background: #f4efe6;
  border-top: 2px solid var(--odoo-border);
}

#page-adm_empleados .emp-nombre-cell { display: flex; align-items: center; gap: 10px; }
#page-adm_empleados .emp-nombre-txt { font-size: 13px; font-weight: 600; color: var(--text-dark); text-transform: uppercase; }

#page-adm_empleados .emp-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  flex-shrink: 0;
}
#page-adm_empleados .emp-avatar img { width: 100%; height: 100%; object-fit: cover; }

#page-adm_empleados .emp-chip-depto {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 10px;
  color: #fff;
}

#page-adm_empleados .emp-badge-estado {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 10px;
}
#page-adm_empleados .emp-badge-activo { background: #d1fae5; color: #065f46; }
#page-adm_empleados .emp-badge-inactivo { background: #f1ece4; color: #8a8070; }

@media (max-width: 768px) {
  #page-adm_empleados .emp-tabla-wrap { box-shadow: none; }
  #page-adm_empleados .emp-tabla tbody tr.emp-row:nth-child(even) { background: #fff; }
}

@media (max-width: 768px) {
  /* Tabla que se convierte en cards: agregar clase .resp-cards a la <table> */
  table.resp-cards { display: block; width: 100%; }
  table.resp-cards thead { display: none; }
  table.resp-cards tbody { display: block; }
  table.resp-cards tr {
    display: block;
    background: #fff;
    border: 1px solid var(--odoo-border);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  }
  table.resp-cards td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0 !important;
    border: none !important;
    text-align: right;
    font-size: 13px;
    gap: 12px;
  }
  /* Etiqueta del campo: usa data-label en cada <td> */
  table.resp-cards td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    text-align: left;
    flex-shrink: 0;
  }
  /* Celda sin label (ej: acciones) ocupa todo el ancho */
  table.resp-cards td.resp-full {
    justify-content: flex-end;
    border-top: 1px solid var(--odoo-border) !important;
    margin-top: 6px;
    padding-top: 10px !important;
  }
  table.resp-cards td.resp-full::before { content: none; }

  /* Grids de formulario colapsan a 1 columna en móvil */
  .resp-grid-2, .resp-grid-3 { grid-template-columns: 1fr !important; }

  /* Modales: ocupar casi toda la pantalla en móvil */
  .resp-modal-box { max-width: 100% !important; margin: 10px !important; }

  /* Footers flex que envuelven */
  .resp-footer-wrap { flex-wrap: wrap !important; gap: 10px !important; }
}

/* ===================================================
   MEJORAS DE CONTRASTE — agregar al final de main.css
   =================================================== */

/* Fondo ligeramente más oscuro para distinguir cuadros */
:root {
  --bg: #e8e4dc;          /* antes era #f4f2ee — más oscuro para contraste */
  --card-bg: #ffffff;     /* blanco puro para las cards */
  --card-shadow: 0 2px 8px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.06);
}

/* Todas las cards/cuadros blancos con sombra visible */
.flow-item-card,
.op-card,
.fundida-card,
.kpi-card,
.settings-panel,
.settings-menu,
.mini-cal,
.plan-tab-btn {
  background: var(--card-bg) !important;
  box-shadow: var(--card-shadow);
}

/* Cuadros de flujo — borde más visible */
.flow-item-card {
  border: 1.5px solid #c4b8a8 !important;
  border-radius: 10px !important;
}
.flow-item-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.14), 0 0 0 1px rgba(139,26,26,0.15) !important;
}

/* Header de cards de flujo — contraste leve */
.flow-item-header {
  background: #f5f0e8 !important;
  border-bottom: 1.5px solid #c4b8a8 !important;
}

/* ===== DASHBOARD RESPONSIVE ===== */
@media (max-width: 768px) {
  /* Panel de Fidelización: una sola columna, filtros y chart apilados */
  .fid-grid { grid-template-columns: 1fr; }
  .fid-metrics { flex-direction: column; }
  .fid-metric-card { flex: 1 1 auto; }
  .fid-chart-wrap { flex-direction: column; align-items: stretch; }
  .fid-buscar { width: 100%; }
}

@media (max-width: 768px) {
  /* Red de seguridad de pagina: si algo adentro de #page-dash igual fuerza
     mas ancho que el viewport, que se recorte aca en vez de escapar hasta
     el body y hacer scrollear la pagina entera de costado. overflow-y
     explicito en visible para no interferir con el overflow:visible que
     .dash-table-wrap necesita mas abajo para no recortar las filas-card. */
  #page-dash { overflow-x: hidden; overflow-y: visible; }

  /* Thead estatico de pages/dashboard.php (tabla propia, sin tbody, con
     anchos fijos en px + white-space:nowrap) — redundante en modo card,
     las filas ya muestran su etiqueta via ::before con data-label. NO usa
     resp-cards a proposito, para no mezclar con el sistema compartido de
     Facturacion/Inventarios/Porteria/Marketing. */
  .dash-ot-thead { display: none; }

  /* El overflow:hidden del wrap cortaba las filas-card */
  .dash-table-wrap { overflow: visible !important; }

  /* KPIs: repeat(5,1fr) sin tope de minimo se aprieta mucho o infla el
     ancho en tablet (481-768px); 2 columnas parejas + minmax(0,1fr) como
     tope de seguridad (el breakpoint de 480px de mas abajo lo baja a 1). */
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* OT row → card vertical */
  .order-row-header { flex-direction: column; align-items: stretch; padding: 12px 14px; }

  /* Botón expand oculto en móvil (el td sigue siendo clickeable) */
  .col-expand { display: none !important; }

  /* Columnas con valor simple: label izq / valor der */
  .col-ot, .col-odoo, .col-entrega, .col-dias, .col-estado {
    width: 100% !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid var(--odoo-border);
    font-size: 13px;
  }
  .col-ot::before, .col-odoo::before, .col-entrega::before,
  .col-dias::before, .col-estado::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    flex-shrink: 0;
  }

  /* Columnas con contenido compuesto: label encima */
  .col-cliente, .col-avance {
    width: 100% !important;
    display: block;
    padding: 6px 0;
    border-bottom: 1px solid var(--odoo-border);
  }
  .col-cliente::before, .col-avance::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    margin-bottom: 4px;
  }

  /* Acciones: sin separador inferior, alineadas a la derecha */
  .col-actions { width: 100% !important; display: flex; justify-content: flex-end; padding: 8px 0 0; }

  /* Subrow de ítems: scroll horizontal */
  .items-subrow { padding: 0 10px 10px 10px !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Donut panel: apilar canvas + leyenda verticalmente */
  #dash-donut-row { flex-direction: column !important; align-items: center !important; }
  #dash-donut-wrap { width: 140px !important; height: 140px !important; }
  #dash-donut-row > div:last-child { width: 100% !important; }
}

@media (max-width: 480px) {
  .kpi-row { grid-template-columns: 1fr !important; }
}

/* Wrappers de OP en flujo */
div[style*="border-radius:12px"] {
  box-shadow: 0 3px 12px rgba(0,0,0,0.10);
}

/* Cuadros de planificación */
.plan-tab-btn {
  border: 1.5px solid #c4b8a8 !important;
}

/* Fundida card */
.fundida-card {
  border: 1.5px solid #c4b8a8 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* KPI cards en dashboard */
.kpi-card {
  border: 1.5px solid #c4b8a8 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

/* Settings */
.settings-panel,
.settings-menu {
  border: 1.5px solid #c4b8a8 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07) !important;
}

/* Rows alternados con más contraste */
.flow-table tbody tr:nth-child(even),
.op-table tbody tr:nth-child(even),
.orders-table tbody tr:nth-child(even),
.items-table tbody tr:nth-child(even) {
  background: #f0ebe0 !important;
}
/* ===================================================
   CONTRASTE CUADROS DE OP / FLUJO vs FONDO
   =================================================== */

/* Fondo de página más oscuro y neutro */
body, .page {
  background: #d4cfc7 !important;
}

/* Interior de los wrappers de OP (el div con borde de color) */
/* El padding interior de cada OP wrapper */
div[style*="border-radius:12px"] > div:last-child {
  background: #f8f5f0 !important;
}

/* Las flow-item-card dentro de los wrappers — blanco puro */
.flow-item-card {
  background: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.13), 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* Header interior de cada OP wrapper (donde va OP-XXX, OTxxxx, cliente) */
div[style*="border-radius:12px"] > div:first-child {
  /* mantiene el color definido inline por JS, solo reforzamos sombra */
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.06);
}

/* El área de padding interior de los wrappers de OP */
div[style*="padding:10px"][style*="border-radius:12px"],
div[style*="padding:10px;background"] {
  background: #ede8e0 !important;
}

/* ── Tooltip custom global ── */
.rs-tooltip {
  position: fixed;
  background: #ffffff;
  color: #1a1a1a;
  border: 2px solid #c0392b;
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.28);
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--sans);
  max-width: 360px;
  z-index: 99999;
  pointer-events: none;
  display: none;
  white-space: normal;
  line-height: 1.4;
}

/* FACT TABLERO — jerarquía visual del sub-tab Tablero (Facturación) */
.fact-tab-bg {
  background: #f5f0ea;
  border-radius: 12px;
  padding: 18px;
}
.fact-tab-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.fact-tab-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.fact-tab-nombre {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
}
.fact-tab-sub {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}
.fact-tab-saldo {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-dark);
}
.fact-tab-moneda {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 4px;
}
.fact-tab-conv {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Nivel 1 — cards de cuentas de tesorería (elemento firma: gradiente sutil + hover) */
.fact-tab-cuenta-card {
  flex: 1;
  min-width: 220px;
  background:
    linear-gradient(120deg, rgba(255,255,255,0.5) 0%, rgba(253,247,242,0.5) 40%, rgba(255,255,255,0.5) 60%, rgba(251,245,239,0.5) 100%),
    linear-gradient(135deg, rgba(139,26,26,0.06), rgba(139,26,26,0) 65%),
    var(--card-bg, #fff);
  background-size: 300% 300%, auto, auto;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--odoo-border);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
}
.fact-tab-cuenta-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.fact-tab-cuenta-card::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.175) 50%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}
.fact-tab-cuenta-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.fact-tab-logo {
  width: 42px;
  height: 42px;
  border-radius: 9px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--odoo-border);
  flex-shrink: 0;
}
.fact-tab-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.fact-tab-avatar.tipo-banco                          { background: rgba(139,26,26,0.6); }
.fact-tab-avatar.tipo-caja_chica,
.fact-tab-avatar.tipo-efectivo                        { background: rgba(201,149,10,0.75); }
.fact-tab-avatar.tipo-cripto                          { background: rgba(74,74,74,0.8); }
.fact-tab-avatar.tipo-otra                            { background: rgba(138,128,112,0.8); }

/* Nivel 2 — cards de AR/AP (acento lateral, monto como dato dominante) */
.fact-tab-ar-ap-card {
  flex: 1;
  min-width: 240px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--odoo-border);
  border-radius: 10px;
  padding: 16px;
  cursor: pointer;
}
.fact-tab-ar-ap-card.cobros { border-left: 3px solid var(--status-ent); }
.fact-tab-ar-ap-card.pagos  { border-left: 3px solid var(--odoo-red-light); }

/* Nivel 3 — gráfico (título discreto) y totales por moneda */
.fact-tab-chart-card {
  background: linear-gradient(120deg, #ffffff 0%, #fdf7f2 40%, #ffffff 60%, #fbf5ef 100%);
  background-size: 300% 300%;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--odoo-border);
  border-radius: 10px;
  padding: 20px 16px 16px;
  box-shadow: var(--card-shadow);
}
.fact-tab-chart-card::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}
.fact-tab-chart-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.fact-tab-moneda-card {
  flex: 1;
  min-width: 180px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--odoo-border);
  border-radius: 10px;
  padding: 16px;
}

/* Movimiento permanente sutil (respeta prefers-reduced-motion) */
@keyframes ftblCardGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes ftblCardGradientSubtle {
  0%   { background-position: 0% 50%, 0 0, 0 0; }
  50%  { background-position: 100% 50%, 0 0, 0 0; }
  100% { background-position: 0% 50%, 0 0, 0 0; }
}
@keyframes ftblShine {
  0%   { left: -60%; }
  25%  { left: 130%; }
  100% { left: 130%; }
}
@keyframes ftblShineSubtle {
  0%   { left: -60%; }
  25%  { left: 130%; }
  100% { left: 130%; }
}
@keyframes ftblEntrada {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fact-tab-anim { opacity: 1; animation: none; }
@media (prefers-reduced-motion: no-preference) {
  .fact-tab-chart-card       { animation: ftblCardGradient 14s ease-in-out infinite; }
  .fact-tab-chart-card::before  { animation: ftblShine 9s ease-in-out infinite; }
  .fact-tab-cuenta-card      { animation: ftblCardGradientSubtle 17s ease-in-out infinite; }
  .fact-tab-cuenta-card::before { animation: ftblShineSubtle 11s ease-in-out infinite; }
  .fact-tab-anim { opacity: 0; animation: ftblEntrada 0.7s cubic-bezier(0.16,1,0.3,1) forwards; }
  /* Cards con movimiento permanente + entrada: se combinan en un solo shorthand
     (dos reglas de animation sobre el mismo elemento no se mezclan, se pisan). */
  .fact-tab-chart-card.fact-tab-anim {
    animation: ftblCardGradient 14s ease-in-out infinite,
               ftblEntrada 0.7s cubic-bezier(0.16,1,0.3,1) forwards;
  }
  .fact-tab-cuenta-card.fact-tab-anim {
    animation: ftblCardGradientSubtle 17s ease-in-out infinite,
               ftblEntrada 0.7s cubic-bezier(0.16,1,0.3,1) forwards;
  }
}

/* ============================================================
   DASHBOARD — accesos rápidos (home). Clases propias .dashq-*
   NO comparte estilos con card-table ni con las tabs de otros módulos.
   ============================================================ */
#page-dash .dashq-quickaccess { margin-bottom: 20px; }

#page-dash .dashq-header { margin-bottom: 16px; }
#page-dash .dashq-saludo { font-size: 24px; font-weight: 700; color: var(--text-dark); }
#page-dash .dashq-fecha  { font-size: 13px; color: var(--text-muted); margin-top: 2px; text-transform: capitalize; }

#page-dash .dashq-section { margin-bottom: 18px; }
#page-dash .dashq-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 10px;
}

#page-dash .dashq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

#page-dash .dashq-card {
  background: #fff;
  border: 1px solid var(--odoo-border);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(26,26,26,0.05);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-align: center;
}
#page-dash .dashq-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(26,26,26,0.12);
}

#page-dash .dashq-icon-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#page-dash .dashq-icon { width: 28px; height: 28px; }

#page-dash .dashq-label { font-size: 12.5px; font-weight: 600; color: var(--text-dark); line-height: 1.25; }

@media (max-width: 768px) {
  #page-dash .dashq-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  #page-dash .dashq-card { padding: 12px 8px; border-radius: 14px; }
  #page-dash .dashq-icon-circle { width: 48px; height: 48px; }
  #page-dash .dashq-icon { width: 24px; height: 24px; }
  #page-dash .dashq-saludo { font-size: 20px; }
}

/* DASHBOARD — jerarquía visual de la página de escritorio
   Nivel 1: KPIs hero · Nivel 2: procesos activos + donut/actividad · Nivel 3: tabla de OTs */
#page-dash {
  background: #f5f0ea;
  border-radius: 12px;
  padding: 18px;
}
#page-dash .kpi-row { gap: 16px; }

/* Nivel 1 — KPIs (elemento firma: gradiente + shine, reutiliza keyframes del Tablero) */
#page-dash .kpi-card {
  position: relative;
  overflow: hidden;
  border-left: none;
  border-top: 3px solid transparent;
  background:
    linear-gradient(120deg, rgba(255,255,255,0.5) 0%, rgba(253,247,242,0.5) 40%, rgba(255,255,255,0.5) 60%, rgba(251,245,239,0.5) 100%),
    var(--card-bg, #fff);
  background-size: 300% 300%, auto;
}
#page-dash .kpi-card.kpi-total { border-top-color: var(--odoo-red); }
#page-dash .kpi-card.kpi-pend  { border-top-color: var(--status-prod); }
#page-dash .kpi-card.kpi-apro  { border-top-color: var(--status-ent); }
#page-dash .kpi-card.kpi-rech  { border-top-color: var(--status-susp); }
#page-dash .kpi-card.kpi-alert { border-top-color: var(--status-term); }
#page-dash .kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}
#page-dash .kpi-val   { font-size: 28px; font-weight: 700; }
#page-dash .kpi-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }

/* Nivel 2 — ítems activos por proceso */
.dash2-proceso-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.dash2-proceso-card {
  flex: 1;
  min-width: 160px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--odoo-border);
  border-radius: 10px;
  padding: 12px 16px;
}
.dash2-proceso-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
  border-radius: 50%;
  flex-shrink: 0;
}
.dash2-proceso-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}
.dash2-proceso-num   { font-size: 20px; font-weight: 700; line-height: 1; }
.dash2-proceso-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }

/* Nivel 2/3 — donut de urgencia + actividad reciente, lado a lado (wrap en móvil) */
.dash2-split {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: stretch;
  margin-bottom: 16px;
}
.dash2-split > * { flex: 1; min-width: 320px; }

/* Nivel 3 — actividad reciente */
.dash2-activity-panel {
  background: var(--card-bg, #fff);
  border: 1px solid var(--odoo-border);
  border-radius: 10px;
  padding: 16px 20px;
}
.dash2-activity-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.dash2-activity-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--odoo-border);
  cursor: pointer;
  transition: background 0.15s;
}
.dash2-activity-row:last-child { border-bottom: none; }
.dash2-activity-row:hover { background: #faf9f7; }
.dash2-activity-dot  { width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
.dash2-activity-txt  { font-size: 12px; font-weight: 600; color: var(--text-dark); }
.dash2-activity-time { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

/* Entrada en cascada — reutiliza el keyframe ftblEntrada del Tablero, no se duplica */
.dash2-anim { opacity: 1; animation: none; }
@media (prefers-reduced-motion: no-preference) {
  #page-dash .kpi-card { animation: ftblCardGradient 14s ease-in-out infinite; }
  #page-dash .kpi-card::before { animation: ftblShine 9s ease-in-out infinite; }
  .dash2-anim { opacity: 0; animation: ftblEntrada 0.7s cubic-bezier(0.16,1,0.3,1) forwards; }
  /* Mismo caso que en FACT TABLERO: la KPI card tiene movimiento permanente + entrada,
     hay que combinarlos en un solo shorthand para no pisar uno con el otro. */
  #page-dash .kpi-card.dash2-anim {
    animation: ftblCardGradient 14s ease-in-out infinite,
               ftblEntrada 0.7s cubic-bezier(0.16,1,0.3,1) forwards;
  }
}

/* ============================================================
   PANEL "Registro de Órdenes" — panel de instrumentos claro,
   acento naranja metal como firma visual.
   Clase propia .dash-ot-panel — NO comparte estilos con card-table
   (usada por Facturación/Inventarios/Portería/Marketing).
   ============================================================ */
#page-dash .dash-ot-panel {
  --dash-ot-accent: #ff7a2f;
  background: #ffffff;
  border: 1px solid #e5e8ee;
  border-radius: 12px;
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 4px 16px rgba(15,23,42,0.06);
}
/* Línea superior fina — acento naranja metal, firma del bloque */
#page-dash .dash-ot-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,122,47,0) 0%, var(--dash-ot-accent) 50%, rgba(255,122,47,0) 100%);
  z-index: 1;
}

/* Header del bloque */
#page-dash .dash-ot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px 10px;
}
#page-dash .dash-ot-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #64748b;
}
#page-dash .dash-ot-count {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #c2540a;
  background: #fff1e6;
  border: 1px solid #ffd3a8;
  border-radius: 999px;
  padding: 3px 12px;
  white-space: nowrap;
}

/* Toolbar */
#page-dash .dash-ot-panel .dash-table-toolbar {
  border-bottom: 1px solid #eef1f5;
  padding: 10px 18px 14px;
}
#page-dash .dash-ot-panel .search-inp,
#page-dash .dash-ot-panel .filter-sel {
  background-color: #f8fafc;
  border: 1px solid #e5e8ee;
  color: #1e293b;
  border-radius: 8px;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
#page-dash .dash-ot-panel .search-inp::placeholder { color: #94a3b8; }
#page-dash .dash-ot-panel .search-inp:focus,
#page-dash .dash-ot-panel .filter-sel:focus {
  outline: none;
  border-color: var(--dash-ot-accent);
  box-shadow: 0 0 0 3px rgba(255,122,47,0.15);
}
#page-dash .dash-ot-archive-btn {
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #e5e8ee;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}
#page-dash .dash-ot-archive-btn:hover { border-color: var(--dash-ot-accent); color: var(--dash-ot-accent); }

/* Encabezado de columnas (tabla estática) */
#page-dash .dash-ot-panel .orders-table thead tr { background: #f8fafc; }
#page-dash .dash-ot-panel .orders-table thead th { color: #64748b; letter-spacing: 0.08em; }

/* Filas de OT — planas, separador sutil, hover eleva con acento naranja.
   Se acota con #dashBody para NO afectar la <table class="orders-table">
   estática del encabezado de columnas, que comparte la misma clase. */
#page-dash .dash-ot-panel #dashBody .orders-table {
  background: transparent;
  border-bottom: 1px solid #eef1f5;
  border-left: 2px solid transparent;
  transition: background 0.15s ease, border-left-color 0.15s ease;
}
#page-dash .dash-ot-panel #dashBody .orders-table:hover {
  background: #fff7f0;
  border-left-color: var(--dash-ot-accent);
}
#page-dash .dash-ot-panel .order-row-header { padding: 13px 14px; }

/* Códigos y fechas — alineación tipo terminal */
#page-dash .dash-ot-panel .ot-badge {
  background: #fff1e6;
  color: #c2540a;
  border: 1px solid #ffd3a8;
  font-variant-numeric: tabular-nums;
}
#page-dash .dash-ot-panel .venta-ref { color: #94a3b8; font-variant-numeric: tabular-nums; }
#page-dash .dash-ot-panel .client-name { color: #1e293b; }
#page-dash .dash-ot-panel .client-vendor { color: #94a3b8; }
#page-dash .dash-ot-panel .date-val { color: #1e293b; font-variant-numeric: tabular-nums; }

/* Días restantes — pills pastel, sin glow */
#page-dash .dash-ot-panel .dias-chip { border-radius: 999px; }
#page-dash .dash-ot-panel .dias-ok    { background: #ecfdf5; color: #15803d; border: 1px solid #86efac; }
#page-dash .dash-ot-panel .dias-warn  { background: #fefce8; color: #a16207; border: 1px solid #fde68a; }
#page-dash .dash-ot-panel .dias-alert { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
#page-dash .dash-ot-panel .dias-venc  { background: #f5f3ff; color: #7c3aed; border: 1px solid #ddd6fe; }

/* Estado de la OT — pills pastel, mapeados a los 3 estados reales */
#page-dash .dash-ot-panel .estado-badge { border-radius: 999px; }
#page-dash .dash-ot-panel .sb-pendiente { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
#page-dash .dash-ot-panel .sb-aprobada  { background: #fff1e6; color: #c2540a; border: 1px solid #ffd3a8; }
#page-dash .dash-ot-panel .sb-rechazada { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }

/* Barra de avance — pista clara + shine permanente (no depende del render) */
#page-dash .dash-ot-panel .progress-bar-bg {
  height: 6px;
  border-radius: 999px;
  background: #e5e8ee;
}
#page-dash .dash-ot-panel .progress-bar-fill {
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}
#page-dash .dash-ot-panel .progress-bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 100%);
  pointer-events: none;
}
#page-dash .dash-ot-panel .progress-bar-fill::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}
@keyframes dashProgressShine {
  0%   { left: -60%; }
  100% { left: 130%; }
}
@media (prefers-reduced-motion: no-preference) {
  #page-dash .dash-ot-panel .progress-bar-fill::before { animation: dashProgressShine 3s linear infinite; }
}
#page-dash .dash-ot-panel .progress-label { color: #94a3b8; }

/* Micro-detalle firma: mini barra segmentada = etapas (items) completadas */
#page-dash .dash-ot-panel .dash-ot-segbar { display: flex; gap: 2px; margin-top: 4px; }
#page-dash .dash-ot-panel .dash-ot-segbar .seg {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: #e5e8ee;
}
#page-dash .dash-ot-panel .dash-ot-segbar .seg.on {
  background: var(--dash-ot-accent);
}

/* Expandir fila */
#page-dash .dash-ot-panel .expand-btn { color: #94a3b8; }
#page-dash .dash-ot-panel .expand-btn:hover { color: var(--dash-ot-accent); }

/* Acciones */
#page-dash .dash-ot-panel .act-btn {
  background: #f8fafc;
  border: 1px solid #e5e8ee;
  color: #64748b;
}
#page-dash .dash-ot-panel .act-btn:hover { border-color: var(--dash-ot-accent); color: var(--dash-ot-accent); }
#page-dash .dash-ot-panel .act-btn.approve { border-color: rgba(34,197,94,0.4); color: #16a34a; }
#page-dash .dash-ot-panel .act-btn.approve:hover { background: rgba(34,197,94,0.08); }
#page-dash .dash-ot-panel .act-btn.pdf { border-color: rgba(37,99,235,0.4); color: #2563eb; }
#page-dash .dash-ot-panel .act-btn.pdf:hover { background: rgba(37,99,235,0.08); }
#page-dash .dash-ot-panel .act-btn.reject { border-color: rgba(185,28,28,0.4); color: #b91c1c; }
#page-dash .dash-ot-panel .act-btn.reject:hover { background: rgba(185,28,28,0.08); }
#page-dash .dash-ot-panel .row-actions .act-btn {
  padding: 4px 6px;
  min-width: 28px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
#page-dash .dash-ot-panel .act-lbl {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
}

/* Sub-fila de ítems — transición de apertura vía max-height/opacity, reutilizando la
   MISMA clase .open que toggleRow() ya alterna en dashboard.js (sin tocar esa función). */
#page-dash .dash-ot-panel .items-subrow {
  display: block;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  background: #f8fafc;
  border-top: 1px dashed #e5e8ee;
  transition: max-height 0.25s ease, opacity 0.25s ease;
}
#page-dash .dash-ot-panel .items-subrow.open {
  max-height: 2000px;
  opacity: 1;
}
#page-dash .dash-ot-panel .items-table thead tr { background: #f1f5f9; }
#page-dash .dash-ot-panel .items-table thead th { color: #64748b; }
#page-dash .dash-ot-panel .items-table tbody tr { border-bottom: 1px solid #eef1f5; }
#page-dash .dash-ot-panel .items-table td { color: #334155; }

#page-dash .dash-ot-panel .empty-dash { color: #94a3b8; }
#page-dash .dash-ot-panel .empty-dash .et { color: #334155; }

@media (max-width: 768px) {
  #page-dash .dash-ot-panel .col-ot, #page-dash .dash-ot-panel .col-odoo,
  #page-dash .dash-ot-panel .col-entrega, #page-dash .dash-ot-panel .col-dias,
  #page-dash .dash-ot-panel .col-estado, #page-dash .dash-ot-panel .col-cliente,
  #page-dash .dash-ot-panel .col-avance {
    border-bottom: 1px solid #eef1f5;
  }
  #page-dash .dash-ot-panel .col-ot::before, #page-dash .dash-ot-panel .col-odoo::before,
  #page-dash .dash-ot-panel .col-entrega::before, #page-dash .dash-ot-panel .col-dias::before,
  #page-dash .dash-ot-panel .col-estado::before, #page-dash .dash-ot-panel .col-cliente::before,
  #page-dash .dash-ot-panel .col-avance::before {
    color: #94a3b8;
  }
}

/* ============================================================
   INVENTARIOS — pestaña Resumen: panel de instrumentos claro,
   mismo lenguaje visual que el panel Registro de Órdenes del Dashboard.
   Clases propias .inv-res-* — NO comparte estilos con card-table
   (usada por Facturación/Portería/Marketing).
   ============================================================ */
#page-inventarios .inv-res-panel {
  background: #f8fafc;
  border: 1px solid #e5e8ee;
  border-radius: 12px;
  padding: 18px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(15,23,42,0.06);
}
/* Línea superior fina — acento naranja, firma del panel principal */
#page-inventarios .inv-res-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,122,47,0) 0%, #ff7a2f 50%, rgba(255,122,47,0) 100%);
  z-index: 1;
}
#page-inventarios .inv-res-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}
#page-inventarios .inv-res-empty {
  padding: 30px;
  text-align: center;
  color: #94a3b8;
  font-size: 12px;
}

/* Tarjeta por almacén — identidad visual desde var(--alm), color del almacén (a.color, dato de BD) */
#page-inventarios .inv-res-card {
  background: linear-gradient(160deg, color-mix(in srgb, var(--alm, #ff7a2f) 10%, #ffffff) 0%, #ffffff 55%);
  border: 1px solid color-mix(in srgb, var(--alm, #ff7a2f) 30%, #e5e8ee);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--alm, #ff7a2f) 18%, transparent);
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
#page-inventarios .inv-res-card:hover {
  box-shadow: 0 8px 22px color-mix(in srgb, var(--alm, #ff7a2f) 26%, transparent);
  border-color: color-mix(in srgb, var(--alm, #ff7a2f) 50%, #e5e8ee);
  transform: translateY(-2px);
}
#page-inventarios .inv-res-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--alm, #ff7a2f) 14%, transparent) 0%, transparent 100%);
}
#page-inventarios .inv-res-card-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--alm, #ff7a2f);
  flex-shrink: 0;
}
#page-inventarios .inv-res-card-title {
  font-size: 14px;
  font-weight: 800;
  color: #1e293b;
}
#page-inventarios .inv-res-card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

/* Bloques sobre superficie blanca para contrastar contra el fondo teñido de la tarjeta */
#page-inventarios .inv-res-bloque {
  background: #ffffff;
  border: 1px solid #eef1f5;
  border-radius: 8px;
  padding: 10px;
}
#page-inventarios .inv-res-bloque-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}
#page-inventarios .inv-res-bloque-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
}

/* Pills — pastel con texto oscuro del mismo tono, sin glow */
#page-inventarios .inv-res-pill {
  display: inline-block;
  border: none;
  border-radius: 14px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: filter 0.15s ease;
}
#page-inventarios .inv-res-pill:hover { filter: brightness(0.96); }
#page-inventarios .inv-res-pill-ok   { background: #f1f5f9; color: #475569; }
#page-inventarios .inv-res-pill-warn {
  background: color-mix(in srgb, var(--alm, #ff7a2f) 15%, #ffffff);
  color: color-mix(in srgb, var(--alm, #ff7a2f) 75%, #000000);
}
#page-inventarios .inv-res-demora {
  display: inline-block;
  background: #fee2e2;
  color: #b91c1c;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 5px;
}

#page-inventarios .inv-res-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 34px;
  background: color-mix(in srgb, var(--alm, #ff7a2f) 6%, transparent);
  border-radius: 6px;
  padding: 3px;
}
#page-inventarios .inv-res-bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--alm, #ff7a2f) 0%, color-mix(in srgb, var(--alm, #ff7a2f) 45%, #ffffff) 100%);
  transition: filter 0.15s ease;
}
#page-inventarios .inv-res-bar:hover { filter: brightness(1.1); }

/* ============================================================
   INVENTARIOS — barra de tabs: control segmentado premium.
   invTab() (assets/js/inventarios.js) sigue intacto: alterna el estado
   activo escribiendo inline style.borderBottom / style.color con
   var(--odoo-red) (activo) / var(--odoo-dark) (inactivo). Acá reinterpretamos
   esas dos variables SOLO dentro de .inv-tabs-bar (no toca su uso global)
   y usamos [style*="var(--odoo-red)"] — el mismo texto que invTab ya
   escribe — para detectar qué botón está activo sin tocar el JS.
   Clases propias .inv-tabs-* — no compartidas con otros módulos.
   ============================================================ */
#page-inventarios .inv-tabs-bar {
  --odoo-red: #1e293b;
  --odoo-dark: #64748b;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: calc(100% - 48px);
  margin: 14px 24px 20px;
  padding: 4px;
  background: #f1f5f9;
  border: 1px solid #e5e8ee;
  border-radius: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#page-inventarios .inv-tabs-bar .inv-tabs-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  white-space: nowrap;
  border: none;
  border-bottom: none !important;
  background: transparent;
  border-radius: 8px;
  padding: 8px 14px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
#page-inventarios .inv-tabs-bar .inv-tabs-btn:not([style*="var(--odoo-red)"]):hover {
  background: rgba(255,255,255,0.6);
  color: #1e293b;
}
#page-inventarios .inv-tabs-bar .inv-tabs-btn[style*="var(--odoo-red)"] {
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15,23,42,0.10);
}
#page-inventarios .inv-tabs-bar .inv-tabs-btn::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: #ff7a2f;
  opacity: 0;
  transition: width 0.2s ease, opacity 0.2s ease;
}
#page-inventarios .inv-tabs-bar .inv-tabs-btn[style*="var(--odoo-red)"]::after {
  width: 60%;
  opacity: 1;
}
#page-inventarios .inv-tabs-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* ============================================================
   FACTURACIÓN — barra de tabs: underline flotante con indicador
   deslizante (ver assets/js/fact_tabs_ui.js). Deliberadamente
   distinto del estilo "pill" de Inventarios, para comparar.
   facturacionModTab() (assets/js/facturacion_mod.js) sigue intacta:
   alterna el estado activo escribiendo inline style.borderBottom /
   style.color con var(--odoo-red) (activo) / var(--odoo-dark)
   (inactivo). Reinterpretamos esas dos variables SOLO dentro de
   .fact-tabs-bar (no toca su uso global) y usamos
   [style*="var(--odoo-red)"] — el mismo texto que la función ya
   escribe — para detectar la tab activa, tanto acá como en el JS
   del indicador, sin tocar la función existente.
   Clases propias .fact-tabs-* — no compartidas con otros módulos.
   ============================================================ */
#page-facturacion .fact-tabs-bar {
  --odoo-red: #1e293b;
  --odoo-dark: #64748b;
  position: relative;
  display: flex;
  gap: 4px;
  margin: 14px 24px 20px;
  border-bottom: 1px solid #e5e8ee;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#page-facturacion .fact-tabs-bar .fact-tabs-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  white-space: nowrap;
  margin: 0 10px;
  padding: 10px 4px;
  border: none;
  border-bottom: none !important;
  background: transparent;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s ease;
}
#page-facturacion .fact-tabs-bar .fact-tabs-btn:not([style*="var(--odoo-red)"]):hover {
  color: #1e293b;
}
#page-facturacion .fact-tabs-bar .fact-tabs-btn[style*="var(--odoo-red)"] {
  font-weight: 700;
}
#page-facturacion .fact-tabs-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
/* Indicador deslizante — posicionado por JS (transform/width en px), la
   transición vive acá para que el desplazamiento se vea suave. */
#page-facturacion .fact-tabs-indicator {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2.5px;
  width: 0;
  border-radius: 2px;
  background: #ff7a2f;
  opacity: 0;
  pointer-events: none;
  transition: transform 250ms cubic-bezier(0.4,0,0.2,1),
              width 250ms cubic-bezier(0.4,0,0.2,1),
              opacity 150ms ease;
}

/* ============================================================
   GASTOS — tabs: chips flotantes separados, paleta índigo/violeta,
   relleno-desde-abajo. Deliberadamente distinto de Inventarios (pill
   gris) y Facturación (underline naranja), para comparar 3 estilos.
   gastosSubTab() (assets/js/gastos.js) sigue intacta: alterna el estado
   activo escribiendo inline style.borderBottom / style.color con
   var(--odoo-red) (activo) / var(--odoo-dark) (inactivo). Reinterpretamos
   esas dos variables SOLO dentro de .gas-tabs-bar (no toca su uso global)
   y usamos [style*="var(--odoo-red)"] — el mismo texto que la función ya
   escribe — para detectar qué chip está activo, sin tocar el JS.
   Clases propias .gas-tabs-* — no compartidas con otros módulos.
   ============================================================ */
#page-gastos .gas-tabs-bar {
  --odoo-red: #ffffff;
  --odoo-dark: #475569;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 24px 20px;
}
#page-gastos .gas-tabs-bar .gas-tabs-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  border: 1.5px solid #dbe1ec;
  border-bottom: none !important;
  background: #ffffff;
  border-radius: 999px;
  padding: 9px 18px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, color 0.15s ease;
}
/* Relleno índigo/violeta — detrás del texto, escala desde abajo con rebote sutil */
#page-gastos .gas-tabs-bar .gas-tabs-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 300ms cubic-bezier(0.34,1.56,0.64,1);
  z-index: 0;
}
#page-gastos .gas-tabs-bar .gas-tabs-btn > * {
  position: relative;
  z-index: 1;
}
#page-gastos .gas-tabs-bar .gas-tabs-btn:not([style*="var(--odoo-red)"]):hover {
  border-color: #a5b4fc;
  transform: translateY(-1px);
}
#page-gastos .gas-tabs-bar .gas-tabs-btn[style*="var(--odoo-red)"] {
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(99,102,241,0.35);
}
#page-gastos .gas-tabs-bar .gas-tabs-btn[style*="var(--odoo-red)"]::before {
  transform: scaleY(1);
}
#page-gastos .gas-tabs-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* ===== CALC COLADAS (Laboratorio) — sistema de clases + layout cockpit 2 columnas ===== */
#page-laboratorio .cc-num {
  font-family: var(--mono);
}

/* Cards de sección */
#page-laboratorio .cc-card {
  background: #fff;
  border: 1px solid var(--odoo-border);
  border-radius: 6px;
  overflow: hidden;
}
#page-laboratorio .cc-card-anchor {
  border-left: 4px solid var(--odoo-red);
}

/* Cabecera de sección real: barra con fondo, borde inferior, altura consistente */
#page-laboratorio .cc-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 34px;
  padding: 8px 14px;
  background: #f7f5f1;
  border-bottom: 1px solid var(--odoo-border);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
#page-laboratorio .cc-sec-head-sub {
  font-weight: 400;
  font-size: 11px;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-muted);
}
#page-laboratorio .cc-sec-body {
  padding: 12px 14px;
}

/* Escala tipografica: labels normales, datos con mas peso */
#page-laboratorio .cc-label {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 3px;
}
#page-laboratorio .cc-label-strong {
  color: var(--text-dark);
}
#page-laboratorio .cc-dato {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
}
#page-laboratorio .cc-dato-accent {
  color: var(--odoo-red);
}

/* Estados vacio / error unificados */
#page-laboratorio .cc-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
}
#page-laboratorio .cc-empty-error {
  background: #fee2e2;
  border: 1px solid #dc2626;
  border-radius: 8px;
  color: #b91c1c;
  text-align: left;
}
#page-laboratorio .cc-empty-success {
  color: #166534;
  font-weight: 600;
}

/* Layout cockpit: 2 columnas — entrada a la izquierda, resultado fijo a la derecha */
#page-laboratorio .cc-grid {
  display: grid;
  /* 680px = min-width:640px de la tabla de control + padding de .cc-sec-body (28px)
     + borde de .cc-card-anchor (4px izq + 1px der) — el ancho real que necesitan sus 7 columnas */
  grid-template-columns: 1fr 680px;
  gap: 10px;
  align-items: start;
}
#page-laboratorio .cc-col-izq,
#page-laboratorio .cc-col-der {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
#page-laboratorio .cc-col-der {
  position: sticky;
  top: 94px;
}
@media (max-width: 1100px) {
  #page-laboratorio .cc-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  #page-laboratorio .cc-col-izq,
  #page-laboratorio .cc-col-der {
    display: contents;
  }
  #page-laboratorio .cc-col-der { position: static; }
  /* Orden logico en una sola columna: medicion antes que tabla de control */
  #page-laboratorio .cc-sec-datos       { order: 1; }
  #page-laboratorio .cc-sec-factores    { order: 2; }
  #page-laboratorio .cc-sec-iter        { order: 3; }
  #page-laboratorio .cc-sec-medicion    { order: 4; }
  #page-laboratorio .cc-sec-tabla       { order: 5; }
  #page-laboratorio .cc-sec-alertas     { order: 6; }
  #page-laboratorio .cc-sec-adiciones   { order: 7; }
  #page-laboratorio .cc-sec-sugerencias { order: 8; }
}

/* ===== VENTAS — Lista de Cotizaciones (.vcot-*) ===== */
#page-adm_ventas .vcot-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--odoo-border);
  border-radius: 6px;
}
#page-adm_ventas .vcot-label {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 3px;
}
#page-adm_ventas .vcot-sec-head {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--odoo-border);
}
#page-adm_ventas .vcot-btn-secundario {
  background: #f4f2ee;
  color: #333;
  border: 1px solid var(--odoo-border);
  border-radius: 7px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
#page-adm_ventas .vcot-btn-primario {
  margin-left: auto;
  background: var(--odoo-red);
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 9px 18px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
#page-adm_ventas .vcot-dato {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--text-dark);
}
#page-adm_ventas .vcot-th {
  background: var(--odoo-header-bg);
  color: #fff;
  padding: 9px 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
#page-adm_ventas .vcot-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 9px;
}
#page-adm_ventas .vcot-grupo-header {
  cursor: pointer;
  background: #f4f2ee;
  font-weight: 600;
}
#page-adm_ventas .vcot-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f4f2ee;
  color: var(--text-mid);
  border: 1px solid var(--odoo-border);
  border-radius: 14px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
}
#page-adm_ventas .vcot-chip-quitar {
  cursor: pointer;
  font-weight: 700;
  color: var(--text-muted);
}
#page-adm_ventas .vcot-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
}
#page-adm_ventas .vcot-empty-error {
  background: #fee2e2;
  border: 1px solid #dc2626;
  border-radius: 8px;
  color: #b91c1c;
  text-align: left;
}

/* --- Ficha empleado --- */
#page-adm_empleados .emp-ficha-header,
#page-adm_empleados .emp-seccion {
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
#page-adm_empleados .emp-seccion-titulo {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 12px;
  color: var(--text-muted);
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  margin-bottom: 16px;
}
#page-adm_empleados .emp-tabs {
  background: #fff;
  border-radius: 10px 10px 0 0;
  padding: 0 12px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
#page-adm_empleados .emp-seccion .form-input,
#page-adm_empleados .emp-seccion .form-select,
#page-adm_empleados .emp-seccion .form-textarea {
  background: #fff;
  border-color: #d8d3c8;
}

/* --- Semáforo de stock disponible (ficha ENT/CONS + modal Validar) --- */
.inv-stock-chip {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 8px;
  margin-left: 4px;
  white-space: nowrap;
}
.inv-stock-chip--ok {
  background: #e6f4ea;
  color: #1a7a40;
}
.inv-stock-chip--parcial {
  background: #fff3e0;
  color: #b05000;
}
.inv-stock-chip--sin {
  background: #fdecea;
  color: #c0392b;
}

/* --- Semáforo de fecha programada (lista de órdenes) -- mismos tonos que .inv-stock-chip --- */
.inv-fecha-chip {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 8px;
  margin-left: 4px;
  white-space: nowrap;
}
.inv-fecha-chip--verde {
  background: #e6f4ea;
  color: #1a7a40;
}
.inv-fecha-chip--amarillo {
  background: #fff3e0;
  color: #b05000;
}
.inv-fecha-chip--rojo {
  background: #fdecea;
  color: #c0392b;
}
.inv-fecha-chip--gris {
  background: transparent;
  color: var(--text-muted);
  font-weight: 400;
  padding: 0;
  margin-left: 0;
}

/* ===== Fundición — lotes por colada en Fusión (Fase 2) ===== */
.lote-fus-card {
  margin: 8px 0;
  background: #fff8f0;
  border: 1px solid #f0c080;
  border-radius: 8px;
  overflow: hidden;
}
.lote-fus-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-bottom: 1px solid #f0c080;
}
.lote-fus-badge {
  background: #e65c00;
  color: #fff;
  border-radius: 6px;
  padding: 2px 9px;
  font-size: 10px;
  font-weight: 700;
}
.lote-fus-base {
  font-family: var(--mono);
  font-size: 12px;
  color: #1a5c8a;
  font-weight: 800;
}
.lote-fus-desc {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
}
.lote-fus-alea {
  background: #1a5c8a;
  color: #fff;
  border-radius: 6px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 800;
}
.lote-fus-total {
  background: #e65c00;
  color: #fff;
  border-radius: 6px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 800;
  margin-left: auto;
}
.lote-fus-body {
  padding: 8px 14px 12px;
}
.lote-fus-linea {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-top: 1px dashed #e8d4b4;
}
.lote-fus-linea:first-child {
  border-top: none;
}
.lote-fus-sincolar {
  background: #fff3e0;
  border-radius: 6px;
  padding: 8px 10px;
  margin: 4px 0;
  border-top: none;
}
.lote-fus-tag-sc {
  background: #b05000;
  color: #fff;
  border-radius: 5px;
  padding: 2px 9px;
  font-size: 10px;
  font-weight: 700;
}
.lote-fus-tag-col {
  background: #1a5c8a18;
  color: #1a5c8a;
  border: 1px solid #1a5c8a44;
  border-radius: 5px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 700;
}
.lote-fus-col-meta {
  font-size: 11px;
  color: var(--text-muted);
}
.lote-fus-cant {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 800;
  color: #e65c00;
}
.lote-fus-qty {
  width: 70px;
  padding: 5px 8px;
  border: 2px solid #f0c080;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--mono);
  text-align: center;
}
.lote-fus-btn-colar {
  background: #e65c00;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  margin-left: auto;
}
.lote-fus-btn-pasar {
  background: #27ae60;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.lote-fus-vacio {
  font-size: 11px;
  color: var(--text-muted);
  padding: 6px 0;
}

/* Modal "Colé…" */
.lote-fus-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 3000;
  align-items: center;
  justify-content: center;
}
.lote-fus-modal {
  background: #fff;
  width: 420px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.lote-fus-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #e65c00;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  flex-shrink: 0;
}
.lote-fus-x {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}
.lote-fus-modal-body {
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1;
}
.lote-fus-lbl {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-mid);
  margin-bottom: 6px;
}
.lote-fus-qty-big {
  width: 120px;
  padding: 8px 10px;
  border: 2px solid #f0c080;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 800;
  font-family: var(--mono);
  text-align: center;
}
.lote-fus-saldo {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}
.lote-fus-coladas {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lote-fus-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 2px solid var(--odoo-border);
  border-radius: 8px;
  cursor: pointer;
}
.lote-fus-opt-sel {
  border-color: #e65c00;
  background: #fff3e0;
}
.lote-fus-opt-nueva {
  font-weight: 700;
  color: #1a5c8a;
  border-style: dashed;
}
.lote-fus-opt-num {
  font-weight: 800;
  color: #1a5c8a;
}
.lote-fus-opt-meta {
  font-size: 12px;
  color: var(--text-muted);
}
.lote-fus-cargando {
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 0;
}
.lote-fus-modal-foot {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 12px 18px;
  border-top: 1px solid var(--odoo-border);
  flex-shrink: 0;
}
.lote-fus-cancel {
  background: #e0e0e0;
  color: #555;
  border: none;
  border-radius: 7px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.lote-fus-confirm {
  background: #e65c00;
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 9px 22px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
@media (max-width: 768px) {
  .lote-fus-btn-colar,
  .lote-fus-btn-pasar {
    margin-left: 0;
    width: 100%;
  }
  .lote-fus-qty {
    width: 100%;
  }
}

/* ===== Fundición — lotes por colada en Acabado (Fase 3) ===== */
.lote-aca-card {
  margin: 8px 0;
  background: #fff8f0;
  border: 1px solid #f0c080;
  border-radius: 8px;
  overflow: hidden;
}
.lote-aca-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-bottom: 1px solid #f0c080;
}
.lote-aca-badge {
  background: #e65c00;
  color: #fff;
  border-radius: 6px;
  padding: 2px 9px;
  font-size: 10px;
  font-weight: 700;
}
.lote-aca-base {
  font-family: var(--mono);
  font-size: 12px;
  color: #1a5c8a;
  font-weight: 800;
}
.lote-aca-desc {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
}
.lote-aca-alea {
  background: #1a5c8a;
  color: #fff;
  border-radius: 6px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 800;
}
.lote-aca-total {
  background: #e65c00;
  color: #fff;
  border-radius: 6px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 800;
  margin-left: auto;
}
.lote-aca-fifo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 14px;
  background: #fff3e0;
  border-bottom: 1px solid #f0c080;
}
.lote-aca-fifo-lbl {
  font-size: 11px;
  font-weight: 700;
  color: #b05000;
}
.lote-aca-body {
  padding: 8px 14px 12px;
}
.lote-aca-linea {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-top: 1px dashed #e8d4b4;
}
.lote-aca-linea:first-child {
  border-top: none;
}
.lote-aca-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lote-aca-tag {
  font-size: 11px;
  font-weight: 700;
  color: #1a5c8a;
}
.lote-aca-nums {
  font-size: 11px;
  color: var(--text-muted);
}
.lote-aca-nums b {
  color: #e65c00;
  font-family: var(--mono);
}
.lote-aca-acc {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}
.lote-aca-btn {
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.lote-aca-vacio {
  font-size: 11px;
  color: var(--text-muted);
  padding: 6px 0;
}

/* Modal cantidad/destino */
.lote-aca-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 3000;
  align-items: center;
  justify-content: center;
}
.lote-aca-modal {
  background: #fff;
  width: 420px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.lote-aca-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #e65c00;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  flex-shrink: 0;
}
.lote-aca-x {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}
.lote-aca-modal-body {
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1;
}
.lote-aca-lbl {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-mid);
  margin-bottom: 6px;
}
.lote-aca-qty-big {
  width: 120px;
  padding: 8px 10px;
  border: 2px solid #f0c080;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 800;
  font-family: var(--mono);
  text-align: center;
}
.lote-aca-disp {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}
.lote-aca-destinos {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lote-aca-dest {
  padding: 12px 14px;
  border: 2px solid var(--odoo-border);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  color: #1a5c8a;
}
.lote-aca-dest-sel {
  border-color: #e65c00;
  background: #fff3e0;
}
.lote-aca-modal-foot {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 12px 18px;
  border-top: 1px solid var(--odoo-border);
  flex-shrink: 0;
}
.lote-aca-cancel {
  background: #e0e0e0;
  color: #555;
  border: none;
  border-radius: 7px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.lote-aca-confirm {
  background: #e65c00;
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 9px 22px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
@media (max-width: 768px) {
  .lote-aca-acc,
  .lote-aca-fifo {
    width: 100%;
  }
  .lote-aca-btn {
    flex: 1;
    min-width: 0;
  }
}

/* ===== Fundición — línea de reingreso FAM en Acabado (Fase 4) ===== */
.lote-aca-linea-reing {
  background: #f3e8ff;
  border-radius: 6px;
  padding: 8px 10px;
  margin: 4px 0;
  border-top: none;
}
.lote-aca-reing {
  background: #7b2d8b;
  color: #fff;
  border-radius: 5px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
}

/* ===== Fundición — lotes por colada en Térmico (Fase 4) ===== */
.lote-ter-card {
  margin: 8px 0;
  background: #f5f0ff;
  border: 1px solid #c9b3e8;
  border-radius: 8px;
  overflow: hidden;
}
.lote-ter-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-bottom: 1px solid #c9b3e8;
}
.lote-ter-badge {
  background: #7b2d8b;
  color: #fff;
  border-radius: 6px;
  padding: 2px 9px;
  font-size: 10px;
  font-weight: 700;
}
.lote-ter-base {
  font-family: var(--mono);
  font-size: 12px;
  color: #1a5c8a;
  font-weight: 800;
}
.lote-ter-desc {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
}
.lote-ter-alea {
  background: #1a5c8a;
  color: #fff;
  border-radius: 6px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 800;
}
.lote-ter-dest {
  background: #7b2d8b18;
  color: #7b2d8b;
  border: 1px solid #7b2d8b44;
  border-radius: 6px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
}
.lote-ter-total {
  background: #7b2d8b;
  color: #fff;
  border-radius: 6px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 800;
  margin-left: auto;
}
.lote-ter-fifo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 14px;
  background: #ede3fb;
  border-bottom: 1px solid #c9b3e8;
}
.lote-ter-fifo-lbl {
  font-size: 11px;
  font-weight: 700;
  color: #5e2370;
}
.lote-ter-body {
  padding: 8px 14px 12px;
}
.lote-ter-linea {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-top: 1px dashed #d8c6ee;
}
.lote-ter-linea:first-child {
  border-top: none;
}
.lote-ter-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lote-ter-tag {
  font-size: 11px;
  font-weight: 700;
  color: #1a5c8a;
}
.lote-ter-nums {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--mono);
}
.lote-ter-btn {
  background: #27ae60;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  margin-left: auto;
}
.lote-ter-vacio {
  font-size: 11px;
  color: var(--text-muted);
  padding: 6px 0;
}
.lote-ter-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 3000;
  align-items: center;
  justify-content: center;
}
.lote-ter-modal {
  background: #fff;
  width: 420px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.lote-ter-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #7b2d8b;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  flex-shrink: 0;
}
.lote-ter-x {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}
.lote-ter-modal-body {
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1;
}
.lote-ter-lbl {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-mid);
  margin-bottom: 6px;
}
.lote-ter-qty-big {
  width: 120px;
  padding: 8px 10px;
  border: 2px solid #c9b3e8;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 800;
  font-family: var(--mono);
  text-align: center;
}
.lote-ter-disp {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}
.lote-ter-modal-foot {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 12px 18px;
  border-top: 1px solid var(--odoo-border);
  flex-shrink: 0;
}
.lote-ter-cancel {
  background: #e0e0e0;
  color: #555;
  border: none;
  border-radius: 7px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.lote-ter-confirm {
  background: #7b2d8b;
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 9px 22px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
@media (max-width: 768px) {
  .lote-ter-btn,
  .lote-ter-fifo {
    width: 100%;
    margin-left: 0;
  }
}

/* ===== Fundición — lotes por colada en Calidad (Fase 5) ===== */
.lote-cal-card {
  margin: 8px 0;
  background: #f0faf3;
  border: 1px solid #a5d6b5;
  border-radius: 8px;
  overflow: hidden;
}
.lote-cal-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-bottom: 1px solid #a5d6b5;
}
.lote-cal-badge {
  background: #2980b9;
  color: #fff;
  border-radius: 6px;
  padding: 2px 9px;
  font-size: 10px;
  font-weight: 700;
}
.lote-cal-base {
  font-family: var(--mono);
  font-size: 12px;
  color: #1a5c8a;
  font-weight: 800;
}
.lote-cal-desc {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
}
.lote-cal-alea {
  background: #1a5c8a;
  color: #fff;
  border-radius: 6px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 800;
}
.lote-cal-total {
  background: #2980b9;
  color: #fff;
  border-radius: 6px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 800;
  margin-left: auto;
}
.lote-cal-fifo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 14px;
  background: #e3f3ea;
  border-bottom: 1px solid #a5d6b5;
}
.lote-cal-fifo-lbl {
  font-size: 11px;
  font-weight: 700;
  color: #1a7a40;
}
.lote-cal-body {
  padding: 8px 14px 12px;
}
.lote-cal-linea {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-top: 1px dashed #c7e8d3;
}
.lote-cal-linea:first-child {
  border-top: none;
}
.lote-cal-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lote-cal-tag {
  font-size: 11px;
  font-weight: 700;
  color: #1a5c8a;
}
.lote-cal-nums {
  font-size: 11px;
  color: var(--text-muted);
}
.lote-cal-nums b {
  color: #1a7a40;
  font-family: var(--mono);
}
.lote-cal-rech {
  font-size: 11px;
  color: #c0392b;
  margin-top: 2px;
}
.lote-cal-rech b {
  font-family: var(--mono);
}
.lote-cal-acc {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}
.lote-cal-btn-ok {
  background: #27ae60;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.lote-cal-btn-no {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffc107;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.lote-cal-vacio {
  font-size: 11px;
  color: var(--text-muted);
  padding: 6px 0;
}
.lote-cal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 3000;
  align-items: center;
  justify-content: center;
}
.lote-cal-modal {
  background: #fff;
  width: 440px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.lote-cal-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #2980b9;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  flex-shrink: 0;
}
.lote-cal-x {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}
.lote-cal-modal-body {
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1;
}
.lote-cal-lbl {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-mid);
  margin-bottom: 6px;
}
.lote-cal-qty-big {
  width: 120px;
  padding: 8px 10px;
  border: 2px solid #a5d6b5;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 800;
  font-family: var(--mono);
  text-align: center;
}
.lote-cal-disp {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}
.lote-cal-sel,
.lote-cal-txt {
  width: 100%;
  padding: 8px 10px;
  border: 2px solid var(--odoo-border);
  border-radius: 8px;
  font-size: 13px;
}
.lote-cal-dec {
  display: flex;
  gap: 16px;
  font-size: 13px;
  font-weight: 600;
}
.lote-cal-modal-foot {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 12px 18px;
  border-top: 1px solid var(--odoo-border);
  flex-shrink: 0;
}
.lote-cal-cancel {
  background: #e0e0e0;
  color: #555;
  border: none;
  border-radius: 7px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.lote-cal-confirm {
  background: #27ae60;
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 9px 22px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
@media (max-width: 768px) {
  .lote-cal-acc,
  .lote-cal-fifo {
    width: 100%;
  }
  .lote-cal-btn-ok,
  .lote-cal-btn-no {
    flex: 1;
    min-width: 0;
  }
}

/* ── Empaque por lotes (Fase 6) — card de lote en la página de Empaque ──────── */
.lote-emp-card {
  margin: 8px 0;
  background: #fff8ec;
  border: 1px solid #f0d9a8;
  border-radius: 8px;
  overflow: hidden;
}
.lote-emp-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-bottom: 1px solid #f0d9a8;
}
.lote-emp-badge {
  background: #b7791f;
  color: #fff;
  border-radius: 6px;
  padding: 2px 9px;
  font-size: 10px;
  font-weight: 700;
}
.lote-emp-base {
  font-family: var(--mono);
  font-size: 12px;
  color: #1a5c8a;
  font-weight: 800;
}
.lote-emp-desc {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
}
.lote-emp-alea {
  background: #1a5c8a;
  color: #fff;
  border-radius: 6px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 800;
}
.lote-emp-total {
  background: #b7791f;
  color: #fff;
  border-radius: 6px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 800;
  margin-left: auto;
}
.lote-emp-fifo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 14px;
  background: #fbeccb;
  border-bottom: 1px solid #f0d9a8;
}
.lote-emp-fifo-lbl {
  font-size: 11px;
  font-weight: 700;
  color: #8a5a0f;
}
.lote-emp-body {
  padding: 8px 14px 12px;
}
.lote-emp-linea {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-top: 1px dashed #efe0c0;
}
.lote-emp-linea:first-child {
  border-top: none;
}
.lote-emp-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lote-emp-tag {
  font-size: 11px;
  font-weight: 700;
  color: #1a5c8a;
}
.lote-emp-nums {
  font-size: 11px;
  color: var(--text-muted);
}
.lote-emp-nums b {
  color: #8a5a0f;
  font-family: var(--mono);
}
.lote-emp-rech {
  font-size: 11px;
  color: #c0392b;
  margin-top: 2px;
}
.lote-emp-rech b {
  font-family: var(--mono);
}
.lote-emp-acc {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}
.lote-emp-btn-ok {
  background: #27ae60;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.lote-emp-vacio {
  font-size: 11px;
  color: var(--text-muted);
  padding: 6px 0;
}
.lote-emp-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 3000;
  align-items: center;
  justify-content: center;
}
.lote-emp-modal {
  background: #fff;
  width: 420px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.lote-emp-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #b7791f;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  flex-shrink: 0;
}
.lote-emp-x {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}
.lote-emp-modal-body {
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1;
}
.lote-emp-lbl {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-mid);
  margin-bottom: 6px;
}
.lote-emp-qty-big {
  width: 120px;
  padding: 8px 10px;
  border: 2px solid #f0d9a8;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 800;
  font-family: var(--mono);
  text-align: center;
}
.lote-emp-disp {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}
.lote-emp-modal-foot {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 12px 18px;
  border-top: 1px solid var(--odoo-border);
  flex-shrink: 0;
}
.lote-emp-cancel {
  background: #e0e0e0;
  color: #555;
  border: none;
  border-radius: 7px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.lote-emp-confirm {
  background: #27ae60;
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 9px 22px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
@media (max-width: 768px) {
  .lote-emp-acc,
  .lote-emp-fifo {
    width: 100%;
  }
  .lote-emp-btn-ok {
    flex: 1;
    min-width: 0;
  }
}

/* ── Consulta de trazabilidad "¿de qué colada son?" (Fase 7) ─────────────────── */
.lote-traz-btn {
  background: #eef3f8;
  color: #1a5c8a;
  border: 1px solid #cfe0ee;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.lote-traz-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 3000;
  align-items: center;
  justify-content: center;
}
.lote-traz-modal {
  background: #fff;
  width: 540px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.lote-traz-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #1a5c8a;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  flex-shrink: 0;
}
.lote-traz-x {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}
.lote-traz-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--odoo-border);
  flex-shrink: 0;
}
.lote-traz-tab {
  flex: 1;
  background: #f5f7fa;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 10px 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
}
.lote-traz-tab.activa {
  background: #fff;
  color: #1a5c8a;
  border-bottom-color: #1a5c8a;
}
.lote-traz-body {
  padding: 14px 18px;
  overflow-y: auto;
  flex: 1;
}
.lote-traz-cargando,
.lote-traz-vacio {
  font-size: 12px;
  color: var(--text-muted);
  padding: 10px 0;
}
.lote-traz-tot {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 8px;
}
.lote-traz-sec {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #1a5c8a;
  margin: 12px 0 6px;
}
.lote-traz-grupo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 0;
  border-top: 1px dashed #eef1f5;
  font-size: 12px;
}
.lote-traz-etapa {
  font-weight: 700;
  color: var(--text-dark);
  min-width: 90px;
}
.lote-traz-sub {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 11px;
}
.lote-traz-col {
  color: var(--text-mid);
}
.lote-traz-cant {
  margin-left: auto;
  font-family: var(--mono);
  color: #1a7a40;
}
.lote-traz-badge {
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 700;
}
.lote-traz-badge.reing { background: #f3e8fb; color: #7b2d8b; border: 1px solid #d9b8ea; }
.lote-traz-badge.rech  { background: #fdecea; color: #c0392b; border: 1px solid #f5c6cb; }
.lote-traz-badge.est   { background: #fff3cd; color: #856404; border: 1px solid #ffe08a; }
.lote-traz-ev {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 5px 0;
  border-top: 1px dashed #eef1f5;
  font-size: 12px;
}
.lote-traz-ev-paso {
  font-weight: 700;
  color: var(--text-dark);
}
.lote-traz-ev-meta {
  color: var(--text-muted);
  font-size: 11px;
}
.lote-traz-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.lote-traz-chip {
  background: #eef3f8;
  color: #1a5c8a;
  border: 1px solid #cfe0ee;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
@media (max-width: 768px) {
  .lote-traz-cant { margin-left: 0; }
  .lote-traz-chip { flex: 1; min-width: 0; }
}