/* ============================================================
 * BH Mermas · módulo CSS
 * Origen: portaje de .claude/prototipos/propuesta_bh_mermas.css
 *         + estilos inline de propuesta_bh_mermas_detalle.html
 *         + microajustes Fase 1 (CTRL-15/16, CTRL-22 dispositions, MOD-02 ack)
 * Tokens (var(--s1)/--t1/--ember/--ok/--warn/--err/--r-md/--font/--mono/...)
 * vienen de bh-shell-graphite.css — NO se redefinen aquí.
 * ============================================================ */

/* ─── SUB-NAV interno (sin sticky propio, vive dentro del main del shell) ─── */
.mermas-subnav { display:flex; align-items:stretch; gap:2px; margin-bottom:18px; border-bottom:1px solid var(--b-sub); overflow-x:auto; scrollbar-width:none }
.mermas-subnav::-webkit-scrollbar { display:none }
.mermas-subnav .sn-item { display:inline-flex; align-items:center; gap:6px; padding:8px 12px; background:transparent; border:none; border-bottom:2px solid transparent; color:var(--t3); font-size:12.5px; font-weight:500; cursor:pointer; white-space:nowrap; transition:color 100ms,border-color 100ms; font-family:var(--font) }
.mermas-subnav .sn-item .material-symbols-outlined { font-size:16px }
.mermas-subnav .sn-item:hover { color:var(--t2) }
.mermas-subnav .sn-item.active { color:var(--ember); border-bottom-color:var(--ember) }

/* ─── SECCIÓN HEAD ─── */
.sec-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap }
.sec-title { margin:0 0 2px; font-family:var(--mono); font-size:17px; font-weight:600; color:var(--t1); letter-spacing:-.01em }
.sec-sub { margin:0; font-size:11.5px; color:var(--t3) }

/* ─── TOOLBAR (filtros + búsqueda) ─── */
.toolbar { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; align-items:center }
.filter-pills { display:flex; flex-wrap:wrap; gap:6px; flex:1 }
.fpill { display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:99px; background:var(--s2); border:1px solid var(--b-sub); color:var(--t2); font-size:12px; font-weight:500; cursor:pointer; transition:all 100ms; white-space:nowrap; font-family:var(--font) }
.fpill-count { font-family:var(--mono); font-size:10.5px; font-weight:700; background:var(--s3); padding:0 5px; border-radius:99px; line-height:16px }
.fpill:hover { background:var(--s3); color:var(--t1) }
.fpill.active { background:var(--ember-bg); border-color:rgba(217,119,86,.4); color:var(--ember) }
.fpill.active .fpill-count { background:rgba(217,119,86,.2) }
.fpill--pend.active { background:var(--warn-bg); border-color:rgba(217,162,86,.3); color:var(--warn) }
.fpill--pend.active .fpill-count { background:rgba(217,162,86,.15) }
.fpill--ok.active { background:var(--ok-bg); border-color:rgba(110,200,122,.3); color:var(--ok) }
.fpill--ok.active .fpill-count { background:rgba(110,200,122,.15) }
.fpill--rej.active { background:var(--err-bg); border-color:rgba(232,93,93,.3); color:var(--err) }
.fpill--rej.active .fpill-count { background:rgba(232,93,93,.15) }

.search-wrap { position:relative; min-width:360px; max-width:560px }
.search-icon { position:absolute; left:9px; top:50%; transform:translateY(-50%); font-size:17px; color:var(--t3); pointer-events:none }
.search-input { width:100%; background:var(--s2); border:1px solid var(--b-sub); color:var(--t1); border-radius:var(--r-md); padding:7px 10px 7px 32px; font-family:var(--font); font-size:12.5px; outline:none; transition:border-color 100ms, box-shadow 100ms }
.search-input:focus { outline:none; border-color:var(--ember); box-shadow:0 0 0 2px rgba(217,119,86,.18) }
.search-input::placeholder { color:var(--t3) }

/* ─── TABLA MERMAS ─── */
.table-wrap { overflow-x:auto; border:1px solid var(--b-sub); border-radius:var(--r-lg); margin-bottom:12px }
.merma-table { width:100%; border-collapse:collapse }
.merma-table th { padding:9px 12px; background:var(--s1); border-bottom:1px solid var(--b-sub); font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--t3); text-align:left; white-space:nowrap }
.merma-table td { padding:10px 12px; border-bottom:1px solid var(--b-sub); font-size:13px; color:var(--t1); vertical-align:middle }
.merma-table tr:last-child td { border-bottom:none }
.merma-table tbody tr { cursor:pointer; transition:background 80ms }
.merma-table tbody tr:hover td { background:var(--s2) }
.th-num { text-align:center }
.td-num { font-family:var(--mono); font-weight:600; text-align:right; font-size:13px }
.td-none { color:var(--t4) }
.td-product { font-size:13px; color:var(--t1); font-weight:500; line-height:1.2 }
.td-product-price { font-size:11px; color:var(--t3); font-family:var(--mono); margin-top:2px; letter-spacing:.01em }
.td-value { color:var(--err); font-weight:600 }
.td-devolucion { font-size:10.5px; color:var(--ok); font-family:var(--mono); font-weight:500; margin-top:3px; letter-spacing:.01em }

.status-pill { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:99px; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap }
.status-pill--pending             { background:var(--warn-bg); color:var(--warn); border:1px solid rgba(217,162,86,.25) }
.status-pill--pending_disposition { background:var(--sky-bg);  color:var(--sky);  border:1px solid rgba(122,184,232,.25) }
.status-pill--disposed            { background:var(--ok-bg);   color:var(--ok);   border:1px solid rgba(110,200,122,.25) }
.status-pill--approved            { background:var(--ok-bg);   color:var(--ok);   border:1px solid rgba(110,200,122,.25) }
.status-pill--rejected            { background:var(--err-bg);  color:var(--err);  border:1px solid rgba(232,93,93,.25) }

/* Badge "Nuevo · resuelto" (3d post-disposed, CTRL-06 / RN-20) */
.badge-new-resolved { display:inline-flex; align-items:center; gap:4px; padding:2px 7px; border-radius:var(--r-sm); background:var(--ember-bg); color:var(--ember); border:1px solid rgba(217,119,86,.35); font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-left:6px }
.badge-new-resolved .material-symbols-outlined { font-size:12px }

.evidence-pill { display:inline-flex; align-items:center; gap:4px; padding:2px 7px; border-radius:var(--r-sm); background:var(--sky-bg); border:1px solid rgba(122,184,232,.2); color:var(--sky); font-size:10.5px }
.evidence-pill .material-symbols-outlined { font-size:13px }

/* ─── PAGINACIÓN ─── */
.pagination { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; flex-wrap:wrap }
.pag-info { font-size:11.5px; color:var(--t3) }
.pag-info strong { color:var(--t2) }
.pag-controls { display:flex; align-items:center; gap:3px }
.pag-btn { min-width:28px; height:28px; padding:0 6px; border-radius:var(--r-md); background:var(--s2); border:1px solid var(--b-sub); color:var(--t2); font-size:12px; font-family:var(--mono); font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 100ms,color 100ms }
.pag-btn:hover:not(:disabled) { background:var(--s3); color:var(--t1) }
.pag-btn:disabled { opacity:.35; cursor:not-allowed }
.pag-btn.active { background:var(--ember-bg); border-color:rgba(217,119,86,.4); color:var(--ember) }
.pag-btn .material-symbols-outlined { font-size:16px }

/* ─── INFO NOTE ─── */
.info-note { display:flex; align-items:flex-start; gap:6px; font-size:11.5px; color:var(--t3); margin:12px 0 0; padding:10px 12px; background:var(--sky-bg); border:1px solid rgba(122,184,232,.15); border-radius:var(--r-md) }
.info-note .material-symbols-outlined { font-size:15px; flex-shrink:0; margin-top:1px; color:var(--sky) }
.info-note strong { color:var(--t2) }

/* Variante warn · ajuste retroactivo pendiente (RN-MERMA-32) */
.info-note--warn { background:var(--warn-bg); border-color:rgba(217,162,86,.25); color:var(--t2) }
.info-note--warn .material-symbols-outlined { color:var(--warn) }
.info-note--warn strong { color:var(--t1) }

/* ─── FORM CARD (reportar merma) ─── */
.form-card { background:var(--s2); border:1px solid var(--b-sub); border-radius:var(--r-lg); padding:0; overflow:hidden; max-width:680px }
.form-step { display:flex; gap:0; border-bottom:1px solid var(--b-sub) }
.form-step:last-of-type { border-bottom:none }
.step-num { width:44px; flex-shrink:0; display:flex; align-items:flex-start; justify-content:center; padding-top:16px; font-family:var(--mono); font-size:11px; font-weight:700; color:var(--ember); border-right:1px solid var(--b-sub) }
.step-body { flex:1; padding:14px 16px; display:flex; flex-direction:column; gap:8px }
.step-title { margin:0; font-size:13px; font-weight:600; color:var(--t1) }
.step-sub { margin:0; font-size:11.5px; color:var(--t3) }
.req { color:var(--ember) }

.form-select,
.form-input { width:100%; background:var(--s1); border:1px solid var(--b-sub); color:var(--t1); border-radius:var(--r-md); padding:8px 10px; font-family:var(--font); font-size:13px; outline:none; transition:border-color 100ms, box-shadow 100ms; max-width:460px }
.form-select:focus,
.form-input:focus { outline:none; border-color:var(--ember); box-shadow:0 0 0 2px rgba(217,119,86,.18) }
.form-input--date { font-family:var(--mono); max-width:260px }
.form-input::placeholder { color:var(--t4) }

.other-wrap { margin-top:10px; max-width:460px; animation:other-in 180ms ease-out }
@keyframes other-in { from { opacity:0; transform:translateY(-4px) } to { opacity:1; transform:translateY(0) } }
.form-label-sub { display:block; font-size:11.5px; font-weight:500; color:var(--t2); margin-bottom:5px }
.field-error { margin:5px 0 0; font-size:11px; color:var(--err); line-height:1.4 }

.reason-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; max-width:460px }
.reason-btn { display:flex; flex-direction:column; align-items:center; gap:5px; padding:10px 8px; border-radius:var(--r-md); background:var(--s1); border:1px solid var(--b-sub); color:var(--t2); font-size:11.5px; font-weight:500; cursor:pointer; transition:all 100ms; text-align:center; font-family:var(--font) }
.reason-btn .material-symbols-outlined { font-size:22px }
.reason-btn:hover { background:var(--s3); color:var(--t1) }
.reason-btn.selected { background:var(--ember-bg); border-color:rgba(217,119,86,.4); color:var(--ember) }

.qty-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap }
.qty-ctrl { display:inline-flex; align-items:center; background:var(--s1); border:1px solid var(--b-sub); border-radius:var(--r-md); overflow:hidden }
.qty-btn { width:38px; height:38px; background:transparent; border:none; color:var(--t2); font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 100ms; flex-shrink:0 }
.qty-btn:hover:not(:disabled) { background:var(--s2); color:var(--t1) }
.qty-btn:disabled { opacity:.35; cursor:not-allowed }
.qty-val { font-family:var(--mono); font-size:15px; font-weight:700; min-width:40px; text-align:center; color:var(--t1) }
.field-hint { margin:0; font-size:11.5px; color:var(--t3) }
.field-hint--warn { color:var(--err) }

/* ─── UPLOAD ─── */
.upload-zone { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:24px; border:2px dashed var(--b-str); border-radius:var(--r-lg); cursor:pointer; text-align:center; transition:border-color 120ms,background 120ms; background:var(--s1) }
.upload-zone:hover { border-color:var(--ember); background:var(--ember-bg) }
.upload-zone__icon { font-size:32px; color:var(--t3) }
.upload-zone:hover .upload-zone__icon { color:var(--ember) }
.upload-zone__text { font-size:13px; color:var(--t2) }
.upload-zone__hint { font-size:11px; color:var(--t3) }

.file-list { list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:6px }
.file-item { display:flex; align-items:center; gap:8px; padding:7px 10px; background:var(--s1); border:1px solid var(--b-sub); border-radius:var(--r-md) }
.file-item__icon { font-size:18px; flex-shrink:0 }
.file-item__icon--img { color:var(--ok) }
.file-item__icon--vid { color:var(--sky) }
.file-item__name { flex:1; font-size:12px; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.file-item__size { font-family:var(--mono); font-size:10.5px; color:var(--t3); flex-shrink:0 }
.file-item__remove { width:24px; height:24px; border-radius:var(--r-sm); background:transparent; border:none; color:var(--t3); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 100ms,color 100ms; flex-shrink:0 }
.file-item__remove:hover { background:var(--err-bg); color:var(--err) }
.file-item__remove .material-symbols-outlined { font-size:15px }
.file-error { margin:6px 0 0; font-size:11.5px; color:var(--err) }

/* ─── Microajuste Fase 1: CTRL-15/16 · "No tengo evidencia" (RN-11.B) ─── */
.no-evidence-row { margin-top:12px; padding:10px 12px; background:var(--s1); border:1px solid var(--b-sub); border-radius:var(--r-md); display:flex; flex-direction:column; gap:8px; max-width:460px }
.no-evidence-row__check { display:flex; align-items:flex-start; gap:8px; cursor:pointer; font-size:12px; color:var(--t1); line-height:1.4 }
.no-evidence-row__check input[type="checkbox"] { width:16px; height:16px; accent-color:var(--ember); cursor:pointer; flex-shrink:0; margin-top:1px }
.no-evidence-row__check small { display:block; color:var(--t3); font-size:11px; margin-top:2px }
.no-evidence-row__textarea { animation:other-in 180ms ease-out }

/* ─── TEXTAREA ─── */
.form-textarea { width:100%; background:var(--s1); border:1px solid var(--b-sub); color:var(--t1); border-radius:var(--r-md); padding:8px 10px; font-family:var(--font); font-size:13px; outline:none; resize:vertical; transition:border-color 100ms, box-shadow 100ms }
.form-textarea:focus { outline:none; border-color:var(--ember); box-shadow:0 0 0 2px rgba(217,119,86,.18) }
.form-textarea::placeholder { color:var(--t3) }

.form-info { display:flex; align-items:center; gap:8px; padding:12px 14px; background:var(--sky-bg); border-top:1px solid var(--b-sub); border-bottom:1px solid var(--b-sub); color:var(--sky); font-size:12px; line-height:1.5 }
.form-info .material-symbols-outlined { font-size:16px; flex-shrink:0 }
.form-info strong { color:var(--t1) }
.form-info--single { flex-wrap:nowrap }
.form-info--single span:not(.material-symbols-outlined) { white-space:normal; flex:1; line-height:1.5 }
@media (max-width:560px) {
  .form-info--single { align-items:flex-start }
  .form-info--single .material-symbols-outlined { margin-top:2px }
}
.form-info.form-info--err { background:var(--err-bg) !important; border-top-color:rgba(232,93,93,.35); border-bottom-color:rgba(232,93,93,.35); color:var(--err); align-items:flex-start }
.form-info.form-info--err .material-symbols-outlined { color:var(--err); margin-top:2px }
.form-info.form-info--err strong { color:var(--err); display:block; margin-bottom:6px }
.form-errors-list { margin:0; padding:0 0 0 18px; list-style:disc }
.form-errors-list li { font-size:12px; line-height:1.6; color:var(--err) }
.form-textarea.is-invalid, .form-input.is-invalid { border-color:var(--err) !important; box-shadow:0 0 0 1px rgba(232,93,93,.2) }
.char-counter { display:block; margin:4px 0 0; font-size:11px; color:var(--t3); font-family:var(--mono) }
.char-counter--err { color:var(--err); font-weight:600 }

.form-actions { display:flex; justify-content:flex-end; gap:10px; padding:12px 16px }
.btn-primary { display:inline-flex; align-items:center; gap:6px; padding:8px 18px; border-radius:var(--r-md); background:var(--ember); border:none; color:#1A1A1A; font-size:13px; font-weight:600; cursor:pointer; transition:background 100ms; font-family:var(--font) }
.btn-primary .material-symbols-outlined { font-size:17px }
.btn-primary:hover:not(:disabled) { background:#e8906d }
.btn-primary:disabled { opacity:.5; cursor:not-allowed }
.btn-primary.btn-sm { padding:6px 12px; font-size:12px }
.btn-primary.btn-sm .material-symbols-outlined { font-size:16px }
.btn-ghost { padding:8px 16px; border-radius:var(--r-md); background:transparent; border:1px solid var(--b-str); color:var(--t2); font-size:13px; cursor:pointer; transition:background 100ms,color 100ms; font-family:var(--font) }
.btn-ghost:hover { background:var(--s3); color:var(--t1) }

/* ─── MODAL genérico (MOD-01 confirmación) ─── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(2px); z-index:200 }
.modal { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:min(440px,calc(100vw - 32px)); max-height:calc(100vh - 32px); z-index:210; background:var(--s1); border:1px solid var(--b-str); border-radius:var(--r-lg); box-shadow:0 24px 60px rgba(0,0,0,.8); display:flex; flex-direction:column; overflow:hidden }
.modal__head { padding:16px 18px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--b-sub) }
.modal__icon { width:34px; height:34px; border-radius:50%; background:var(--warn-bg); color:var(--warn); display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.modal__icon .material-symbols-outlined { font-size:20px }
.modal__title { margin:0; font-size:14.5px; font-weight:600; color:var(--t1); letter-spacing:-.005em; line-height:1.3 }
.modal__body { padding:14px 18px; font-size:12.5px; color:var(--t2); line-height:1.55; overflow-y:auto }
.modal__body strong { color:var(--t1) }
.modal__summary { margin:12px 0 0; padding:10px 12px; background:var(--s2); border:1px solid var(--b-sub); border-radius:var(--r-md); list-style:none; font-size:11.5px }
.modal__summary li { padding:3px 0; display:flex; justify-content:space-between; gap:10px }
.modal__summary li strong { color:var(--t1); font-family:var(--mono) }
.modal__foot { padding:12px 18px; border-top:1px solid var(--b-sub); display:flex; justify-content:flex-end; gap:8px }
.modal__foot .btn-primary,
.modal__foot .btn-ghost { height:34px; padding:0 14px; border-radius:var(--r-md); font-size:12.5px; font-weight:500; display:inline-flex; align-items:center; gap:5px; cursor:pointer; font-family:var(--font) }
.modal__foot .btn-ghost { background:transparent; border:1px solid var(--b-str); color:var(--t2) }
.modal__foot .btn-ghost:hover { background:var(--s2); color:var(--t1) }
.modal__foot .btn-primary { background:var(--ember); border:1px solid var(--ember); color:#1A1A1A; font-weight:600 }
.modal__foot .btn-primary:hover { background:#E89568 }
.modal__foot .material-symbols-outlined { font-size:15px }

/* ─── Microajuste Fase 1: MOD-02 · Ack RN-20 "Entiendo" ─── */
/* Sin X superior, sin cerrar por click fuera, sin tecla Escape. Único CTA primary. */
.modal--ack { width:min(480px,calc(100vw - 32px)) }
.modal--ack .modal__icon { background:var(--sky-bg); color:var(--sky) }
.modal--ack .modal__body { padding:18px 22px; font-size:13px }
.modal--ack .modal__body p { margin:0 0 10px }
.modal--ack .modal__body p:last-child { margin-bottom:0 }
.modal--ack .modal__body .ack-summary { margin:14px 0 0; padding:12px 14px; background:var(--s2); border:1px solid var(--b-sub); border-radius:var(--r-md); font-family:var(--mono); font-size:11.5px; color:var(--t1); line-height:1.6 }
.modal--ack .modal__body .ack-summary strong { color:var(--ember) }
.modal--ack .modal__foot { justify-content:center; padding:14px 18px 18px }
.modal--ack .modal__foot .btn-primary { min-width:160px; justify-content:center; height:38px; font-size:13px }

/* ============================================================
 * DETALLE (SCR-03) · portaje de bloque <style> del HTML detalle
 * + microajuste Fase 1: CTRL-22 sección dispositions
 * ============================================================ */
.detail-wrap { max-width:880px; margin:0 auto }

.detail-top { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap }
.detail-back { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 10px; border-radius:var(--r-md); background:var(--s2); border:1px solid var(--b-sub); color:var(--t2); font-family:var(--font); font-size:12px; font-weight:500; cursor:pointer; text-decoration:none; transition:background 100ms,color 100ms,border-color 100ms }
.detail-back:hover { background:var(--s3); color:var(--t1); border-color:var(--b-str) }
.detail-back .material-symbols-outlined { font-size:15px }

.detail-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px; flex-wrap:wrap }
.detail-title { margin:0; font-family:var(--mono); font-size:17px; font-weight:600; color:var(--t1); letter-spacing:-.01em; line-height:1.25 }
.detail-title small { display:block; font-size:11.5px; color:var(--t3); font-weight:400; font-family:var(--font); margin-top:3px; letter-spacing:.01em }

/* Info cards del detalle */
.info-card { background:var(--s1); border:1px solid var(--b-sub); border-radius:var(--r-lg); margin-bottom:12px; overflow:hidden }
.info-card__hdr { padding:10px 14px; border-bottom:1px solid var(--b-sub); display:flex; align-items:center; gap:8px; background:var(--s1) }
.info-card__hdr h3 { margin:0; font-size:12.5px; font-weight:600; color:var(--t1) }
.info-card__hdr .material-symbols-outlined { font-size:16px; color:var(--t3) }
.info-card__body { padding:12px 14px }

/* Grid datos */
.datos-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:0 }
.datos-grid > div { padding:8px 0; border-bottom:1px solid var(--b-sub); display:flex; flex-direction:column; gap:2px }
.datos-grid > div:nth-child(odd) { padding-right:16px }
.datos-grid > div:nth-child(even) { padding-left:16px }
.datos-grid > div:nth-last-child(-n+2) { border-bottom:none }
.datos-lbl { font-size:10px; font-weight:600; color:var(--t3); text-transform:uppercase; letter-spacing:.06em }
.datos-val { font-size:13px; color:var(--t1); line-height:1.35 }
.datos-val.mono { font-family:var(--mono); font-size:12.5px }
.datos-val.muted { color:var(--t3) }
.datos-val--loss { color:var(--err); font-weight:600; font-family:var(--mono) }
.datos-val--gain { color:var(--ok); font-weight:600; font-family:var(--mono) }

/* Bloque devolución (solo si disposed) */
.devolucion-row { margin-top:12px; padding:10px 12px; background:var(--s2); border:1px solid var(--b-sub); border-radius:var(--r-md); display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap }
.devolucion-row__lbl { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--t3); text-transform:uppercase; letter-spacing:.06em }
.devolucion-row__lbl .material-symbols-outlined { font-size:15px; color:var(--t3) }
.devolucion-row__val { font-family:var(--mono); font-size:15px; font-weight:600; color:var(--t1); letter-spacing:-.005em }
.devolucion-row__delta { width:100%; font-size:11px; color:var(--t3); font-family:var(--mono); margin-top:2px }

/* Evidencia · thumbs */
.ev-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px }
.ev-item { background:var(--s2); border:1px solid var(--b-sub); border-radius:var(--r-md); padding:8px; display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; transition:border-color 120ms }
.ev-item:hover { border-color:var(--b-str) }
.ev-item__thumb { width:100%; height:78px; background:var(--s3); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; color:var(--t3) }
.ev-item__thumb .material-symbols-outlined { font-size:32px }
.ev-item__name { font-size:11px; color:var(--t1); font-family:var(--mono); text-align:center; word-break:break-all; line-height:1.3; width:100% }
.ev-item__size { font-size:10px; color:var(--t3); font-family:var(--mono) }
.ev-empty { padding:14px; text-align:center; color:var(--t3); font-size:12px }

/* Timeline */
.timeline { position:relative; padding-left:20px }
.timeline::before { content:''; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:var(--b-sub) }
.timeline-item { position:relative; padding:4px 0 14px }
.timeline-item:last-child { padding-bottom:0 }
.timeline-item__dot { position:absolute; left:-17px; top:7px; width:12px; height:12px; border-radius:50%; background:var(--s2); border:2px solid var(--b-str) }
.timeline-item--pending  .timeline-item__dot { border-color:var(--warn) }
.timeline-item--approved .timeline-item__dot { border-color:var(--ok) }
.timeline-item--disposed .timeline-item__dot { border-color:var(--ok) }
.timeline-item--rejected .timeline-item__dot { border-color:var(--err) }
.timeline-item--ack      .timeline-item__dot { border-color:var(--sky) }
.timeline-item__label { font-size:12.5px; font-weight:600; color:var(--t1) }
.timeline-item__meta { font-size:10.5px; color:var(--t3); margin-top:2px; font-family:var(--mono) }
.timeline-item__note { font-size:12px; color:var(--t2); margin-top:5px; line-height:1.45; background:var(--s2); padding:7px 10px; border-radius:var(--r-sm); border-left:2px solid var(--b-str) }

/* Notas */
.note-block { background:var(--s2); border:1px solid var(--b-sub); border-radius:var(--r-md); padding:9px 12px; font-size:12px; color:var(--t2); line-height:1.5 }
.note-block + .note-block { margin-top:7px }
.note-block__head { font-size:10px; font-weight:600; color:var(--t3); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px }

/* Estado pill grande · solo tamaño, mismos colores que en la lista */
.status-pill--lg { font-size:11.5px; padding:4px 10px }

/* ─── Microajuste Fase 1: CTRL-22 · Movimientos de stock aplicados (dispositions) ─── */
.dispositions-table { width:100%; border-collapse:collapse }
.dispositions-table th { padding:7px 10px; background:var(--s2); border-bottom:1px solid var(--b-sub); font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--t3); text-align:left }
.dispositions-table td { padding:9px 10px; border-bottom:1px solid var(--b-sub); font-size:12.5px; color:var(--t1); vertical-align:middle }
.dispositions-table tr:last-child td { border-bottom:none }
.dispositions-table .td-disp-type { font-family:var(--mono); font-size:11.5px; color:var(--t1) }
.dispositions-table .td-disp-qty { font-family:var(--mono); font-weight:600; text-align:right }
.dispositions-table .td-disp-state { font-size:11px; text-transform:uppercase; letter-spacing:.05em; font-weight:600 }
.dispositions-table .td-disp-state--projected { color:var(--warn) }
.dispositions-table .td-disp-state--applied { color:var(--ok) }
.dispositions-table .td-disp-state--reversed { color:var(--err) }
.dispositions-table .td-disp-date { font-family:var(--mono); font-size:11px; color:var(--t3); white-space:nowrap }
.dispositions-empty { padding:14px; text-align:center; color:var(--t3); font-size:12px }

/* ============================================================
 * OVERRIDES del shell (bh-shell-graphite.css)
 * El shell define `.bh-shell .btn-primary { width:100%; height:48px; font-size:15px }`
 * pensando en CTAs full-width tipo "Aceptar pedido". Eso NO aplica a los botones
 * inline del módulo Mermas (sec-head, form-actions, modal__foot, modal--ack).
 * Estos selectores tienen mayor especificidad y restauran los tamaños del prototipo.
 * ============================================================ */
.bh-shell .sec-head .btn-primary,
.bh-shell .form-actions .btn-primary,
.bh-shell .form-actions .btn-ghost,
.bh-shell .modal__foot .btn-primary,
.bh-shell .modal__foot .btn-ghost { width:auto; height:auto }

.bh-shell .sec-head .btn-primary,
.bh-shell .form-actions .btn-primary { font-size:13px; padding:8px 18px; border-radius:var(--r-md); border:none }
.bh-shell .sec-head .btn-primary.btn-sm,
.bh-shell .form-actions .btn-primary.btn-sm { font-size:12px; padding:6px 12px }

.bh-shell .modal__foot .btn-primary,
.bh-shell .modal__foot .btn-ghost { height:34px; padding:0 14px; font-size:12.5px; font-weight:500 }
.bh-shell .modal__foot .btn-primary { border:1px solid var(--ember); font-weight:600 }

.bh-shell .modal--ack .modal__foot .btn-primary { min-width:160px; height:38px; font-size:13px }

/* ═══ RESPONSIVE ═══ */
@media (max-width:767px) {
  .sec-head { flex-direction:column; gap:8px; align-items:stretch }
  .toolbar { flex-direction:column; align-items:stretch }
  .search-wrap { max-width:100% }
  .reason-grid { grid-template-columns:repeat(2,1fr) }
  /* En móvil ocultar "Fecha" y "Evidencia" para priorizar Producto/Cant./Valor/Estado */
  .merma-table th:nth-child(5),
  .merma-table td:nth-child(5) { display:none }
  .merma-table th:nth-child(6),
  .merma-table td:nth-child(6) { display:none }
}
@media (max-width:560px) {
  .datos-grid { grid-template-columns:1fr }
  .datos-grid > div:nth-child(odd),
  .datos-grid > div:nth-child(even) { padding:8px 0 }
  .datos-grid > div:nth-last-child(-n+2) { border-bottom:1px solid var(--b-sub) }
  .datos-grid > div:last-child { border-bottom:none }
  .detail-title-row { flex-direction:column; align-items:flex-start }
}