/* Estilos globales, parte 7 de 12: Sistema editorial del Inventario.
   Antes vivían en style.css. Las páginas cargan las 12 partes seguidas y
   en orden (la lista está al inicio de style.css): no cambies ese orden. */

/* ════════════════════════════════════════════════════════════════
   SISTEMA EDITORIAL INVENTARIO (insumos, categorias,
   activos fijos, alertas, mermas, proveedores, proyeccion).
   Productos usa su propio sistema scoped .prod-* inyectado por
   productos.js (vease 7e9c596). Aqui viven solo las clases
   compartidas por el resto del modulo Inventario.
   ════════════════════════════════════════════════════════════════ */
/* ── Hero del inventario ─────────────────────────────────── */
  .inv-hero {
    background: var(--xt-crema-2);
    border-radius: var(--ficha-radius-lg);
    padding: 1.4rem 1.7rem 1.5rem;
    margin-bottom: 1.1rem;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--xt-line);
  }
  .inv-hero::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 6px;
    background: var(--xt-greca-terracota, var(--xt-terracota));
    background-size: 28px 6px;
    background-repeat: repeat-x;
    opacity: 0.72;
  }
  .inv-hero::after {
    content: ''; position: absolute;
    right: -28px; bottom: -28px;
    width: 180px; height: 180px;
    background-image: url('img/isotipo-terracota.svg');
    background-repeat: no-repeat;
    background-size: contain; background-position: bottom right;
    opacity: 0.06; pointer-events: none;
  }
  .inv-hero-row {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1.5rem; flex-wrap: wrap;
    position: relative; z-index: 1;
  }
  .inv-hero-left {
    flex: 1 1 280px; min-width: 240px;
  }
  .inv-hero-eyebrow {
    font-family: var(--font-mono); font-size: 0.75rem;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--xt-terracota-texto); margin-bottom: 0.45rem;
  }
  .inv-hero-titulo {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(1.85rem, 3.6vw, 2.55rem);
    color: var(--xt-carbon); line-height: 1.05; margin: 0 0 0.35rem;
    letter-spacing: -0.01em;
  }
  .inv-hero-lead {
    font-size: 0.92rem; color: var(--xt-muted); max-width: 50ch;
    line-height: 1.45;
  }
  .inv-hero-stats {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem; min-width: 320px; flex: 0 1 460px;
  }
  @media (max-width: 640px) {
    .inv-hero-stats { grid-template-columns: repeat(2, 1fr); width: 100%; }
  }
  .inv-stat {
    background: #fff;
    border: 1px solid var(--xt-line);
    border-radius: 12px;
    padding: 0.7rem 0.8rem 0.75rem;
    position: relative;
  }
  .inv-stat-lab {
    font-family: var(--font-mono); font-size: 0.75rem;
    text-transform: uppercase; letter-spacing: 0.18em;
    color: var(--xt-muted); margin-bottom: 0.2rem;
  }
  .inv-stat-val {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.55rem; color: var(--xt-carbon); line-height: 1.05;
    font-variant-numeric: tabular-nums;
  }
  .inv-stat-sub {
    font-family: var(--font-mono); font-size: 0.75rem;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--xt-muted); margin-top: 0.15rem;
  }
  .inv-stat.is-critico {
    background: rgba(216,67,21,0.06);
    border-color: rgba(216,67,21,0.28);
  }
  .inv-stat.is-critico .inv-stat-val { color: var(--xt-terracota-texto); }
  .inv-stat.is-jade {
    background: rgba(0,137,123,0.05);
    border-color: rgba(0,137,123,0.25);
  }
  .inv-stat.is-jade .inv-stat-val { color: var(--xt-jade-dark); }
  .inv-stat.is-warn {
    background: rgba(216,67,21,0.05);
    border-color: rgba(216,67,21,0.28);
  }
  .inv-stat.is-warn .inv-stat-val { color: var(--xt-terracota-texto); }

  /* ── Toolbar del inventario ──────────────────────────────── */
  .inv-toolbar {
    display: flex; align-items: center; gap: 0.8rem;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--xt-line);
    border-radius: var(--ficha-radius-lg);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    box-shadow: var(--ficha-sombra);
  }
  .inv-toolbar-search {
    flex: 1 1 220px; min-width: 200px;
    position: relative;
  }
  .inv-toolbar-search input {
    width: 100%;
    border: 1px solid var(--xt-line);
    background: var(--xt-crema-2);
    padding: 0.55rem 0.85rem 0.55rem 2.2rem;
    border-radius: 10px;
    font-size: 0.88rem; color: var(--xt-carbon);
    transition: border-color .15s ease, background .15s ease;
  }
  .inv-toolbar-search input:focus {
    outline: none;
    border-color: var(--xt-terracota);
    background: #fff;
  }
  .inv-toolbar-search::before {
    content: ''; position: absolute;
    left: 0.75rem; top: 50%; transform: translateY(-50%);
    width: 14px; height: 14px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
    background-repeat: no-repeat; background-size: contain;
    pointer-events: none;
  }
  .inv-toolbar-meta {
    font-family: var(--font-mono); font-size: 0.75rem;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--xt-muted); white-space: nowrap;
  }
  .inv-toolbar-actions {
    display: flex; gap: 0.4rem; flex-wrap: wrap; margin-left: auto;
  }
  /* catalogo-18: EL botón del catálogo (Inventario, Productos, Activo fijo,
     Mermas, Mínimos). .inv-action y .prod-ghost-btn son el mismo: 44 px,
     esquina de 4 px y borde --xt-line-strong, como .btn-xt-ghost; .primary /
     .is-primary es el relleno terracota de .btn-xt-primario. */
  .inv-action,
  .prod-ghost-btn {
    font-family: var(--font-mono); font-size: 0.75rem;
    letter-spacing: 0.12em; text-transform: uppercase;
    padding: 0.5rem 0.9rem; border-radius: var(--ficha-radius, 4px); min-height: 44px;
    border: 1.5px solid var(--xt-line-strong); background: transparent;
    color: var(--xt-carbon); cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    white-space: nowrap;
  }
  .inv-action:hover,
  .prod-ghost-btn:hover { border-color: var(--xt-terracota); color: var(--xt-terracota-texto); background: rgba(216,67,21,0.04); }
  .inv-action:disabled,
  .prod-ghost-btn:disabled { opacity: 0.45; cursor: not-allowed; }
  .inv-action.primary,
  .prod-ghost-btn.is-primary {
    background: var(--xt-terracota-dark, #BF360C); color: var(--xt-crema);
    border-color: var(--xt-terracota);
  }
  .inv-action.primary:hover,
  .prod-ghost-btn.is-primary:hover {
    background: #A52E0A; color: var(--xt-crema);
    border-color: var(--xt-terracota-dark);
  }
  .prod-ghost-btn.is-dark { background: var(--xt-carbon); color: var(--xt-crema); border-color: var(--xt-carbon); }
  .prod-ghost-btn.is-dark:hover { background: #1a242b; color: var(--xt-crema); border-color: #1a242b; }

  /* ── Shelf grid de insumos / productos ───────────────────── */
  .shelf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    gap: 0.95rem;
  }
  .shelf-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--xt-line);
    border-radius: var(--ficha-radius-lg);
    padding: 1.05rem 1.1rem 0.85rem 1.25rem;
    display: flex; flex-direction: column;
    box-shadow: var(--ficha-sombra);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    overflow: hidden;
  }
  .shelf-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ficha-sombra-hover);
    border-color: rgba(216,67,21,0.32);
  }
  /* c73: sin riel de color a la izquierda; el estado lo dice su sello. */
  .shelf-card::after {
    content: '';
    position: absolute;
    right: -18px; bottom: -22px;
    width: 110px; height: 110px;
    background-image: url('img/isotipo-terracota.svg');
    background-repeat: no-repeat;
    background-size: contain; background-position: bottom right;
    opacity: 0.05;
    pointer-events: none;
  }
  .shelf-card > * { position: relative; z-index: 1; }

  .shelf-num {
    font-family: var(--font-mono); font-size: 0.75rem;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--xt-muted); margin-bottom: 0.55rem;
  }
  .shelf-num strong {
    color: var(--xt-terracota-texto); font-weight: 500;
    margin-right: 0.35rem;
  }
  .shelf-head {
    display: flex; align-items: flex-start; gap: 0.7rem;
    margin-bottom: 0.85rem;
  }
  .shelf-thumb {
    width: 44px; height: 44px; border-radius: 10px;
    flex-shrink: 0;
    object-fit: cover;
    background: var(--xt-crema-2);
    border: 1px solid var(--xt-line);
  }
  .shelf-thumb-fb {
    width: 44px; height: 44px; border-radius: 10px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--xt-carbon); color: var(--xt-crema);
    font-family: var(--font-display); font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid var(--xt-line-strong);
  }
  .shelf-thumb-fb.is-unit {
    background: var(--xt-crema-2); color: var(--xt-carbon);
    font-family: var(--font-mono); font-size: 0.75rem;
    letter-spacing: 0.08em; text-transform: uppercase;
  }
  .shelf-titulo {
    font-family: var(--font-display); font-weight: 600;
    font-size: 1.02rem; color: var(--xt-carbon); line-height: 1.15;
    margin: 0; word-break: break-word;
  }
  .shelf-meta {
    font-family: var(--font-mono); font-size: 0.75rem;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--xt-muted); margin-top: 0.2rem;
  }

  .shelf-estado-pill {
    position: absolute; top: 0.95rem; right: 0.95rem;
    font-family: var(--font-mono); font-size: 0.75rem;
    text-transform: uppercase; letter-spacing: 0.08em;
    padding: 0.2rem 0.5rem; border-radius: var(--ficha-radius, 4px);
    border: 1px solid transparent;
  }
  /* c73: sello rectangular de 0.75rem (antes pastilla de 999px y 0.56rem).
     "Bajo" va con contorno terracota y "crítico" relleno: sin el ámbar de antes. */
  .shelf-estado-pill.ok { background: rgba(0,137,123,0.14); color: var(--xt-jade-dark); }
  .shelf-estado-pill.bajo { background: transparent; border-color: var(--xt-terracota); color: var(--xt-terracota-texto); }
  .shelf-estado-pill.critico { background: rgba(216,67,21,0.14); color: var(--xt-terracota-texto); }
  .shelf-estado-pill.sin { background: rgba(42,54,61,0.12); color: var(--xt-carbon); }

  .shelf-cifra-row {
    display: grid; grid-template-columns: 1.2fr 1fr 1fr;
    gap: 0.5rem;
    padding: 0.55rem 0;
    border-top: 1px dashed var(--xt-line);
    border-bottom: 1px dashed var(--xt-line);
    margin-bottom: 0.75rem;
  }
  .shelf-cifra-block { text-align: left; }
  .shelf-cifra-lab {
    font-family: var(--font-mono); font-size: 0.75rem;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--xt-muted);
  }
  .shelf-cifra-val {
    font-family: var(--font-display); font-weight: 600;
    font-size: 1.1rem; color: var(--xt-carbon); line-height: 1.1;
    font-variant-numeric: tabular-nums; margin-top: 0.1rem;
  }
  .shelf-cifra-val.is-critico { color: var(--xt-terracota-texto); }
  .shelf-cifra-val.is-bajo { color: var(--xt-terracota-texto); }
  .shelf-cifra-val.is-jade { color: var(--xt-jade-dark); }
  .shelf-cifra-val.is-muted { color: var(--xt-muted); font-weight: 500; }

  .shelf-cad {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-family: var(--font-mono); font-size: 0.75rem;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--xt-muted);
    margin-bottom: 0.65rem;
  }
  .shelf-cad strong {
    font-weight: 500; color: var(--xt-carbon);
  }
  .shelf-cad.is-warn strong { color: var(--xt-terracota-texto); }
  .shelf-cad.is-critico strong { color: var(--xt-terracota-texto); }

  .shelf-actions {
    margin-top: auto;
    display: flex; gap: 0.4rem; flex-wrap: wrap;
    padding-top: 0.55rem;
  }
  .shelf-btn {
    font-family: var(--font-mono); font-size: 0.75rem;
    letter-spacing: 0.06em; text-transform: uppercase;
    padding: 0.4rem 0.7rem; border-radius: 4px; min-height: 44px;
    border: 1.5px solid var(--xt-line-strong); background: transparent;
    color: var(--xt-carbon); cursor: pointer;
    transition: all .15s ease;
    /* Bajan de renglón antes que cortarse ("Corregir existencia" a 375 px). */
    flex: 1 1 auto; min-width: 7.5rem;
    text-align: center;
  }
  .shelf-btn:hover { border-color: var(--xt-carbon); background: var(--xt-crema-2); }
  .shelf-btn.primary { border-color: var(--xt-terracota); color: var(--xt-terracota-texto); }
  .shelf-btn.primary:hover { background: rgba(216,67,21,0.08); }
  .shelf-btn.jade { border-color: var(--xt-jade); color: var(--xt-jade-dark); }
  .shelf-btn.jade:hover { background: rgba(0,137,123,0.08); }
  .shelf-btn.danger { border-color: rgba(229,57,53,0.4); color: #c62828; flex: 0 0 auto; padding: 0.4rem 0.6rem; }
  .shelf-btn.danger:hover { background: rgba(229,57,53,0.08); }

  /* ── Sello de la fila ("Vende directo") ──────────────────── */
  /* c73: sello rectangular de 4 px y 0.75rem con los tokens de la marca
     (antes pastilla de 999px y 0.56rem con fondos rgba). */
  .shelf-badge-comp {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-family: var(--font-mono); font-size: 0.75rem;
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 0.1rem 0.45rem; border-radius: var(--ficha-radius, 4px);
    border: 1px solid var(--xt-line);
    background: transparent; color: var(--xt-carbon);
    margin-left: 0.45rem; vertical-align: middle;
  }
  .shelf-badge-comp.combo { color: var(--xt-jade-dark); border-color: var(--xt-jade); }
  .shelf-badge-comp.receta { color: var(--xt-terracota-texto); border-color: var(--xt-terracota); }

  /* ── Alertas notas editoriales ───────────────────────────── */
  .alertas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.95rem;
  }
  .alerta-nota {
    position: relative;
    background: var(--xt-crema-2);
    border: 1px solid var(--xt-line);
    border-radius: var(--ficha-radius-lg);
    padding: 1.5rem 1.2rem 1.1rem;
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: var(--ficha-sombra);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .alerta-nota:hover {
    transform: translateY(-2px);
    box-shadow: var(--ficha-sombra-hover);
  }
  .alerta-nota::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 8px;
    background: var(--xt-greca-terracota, var(--xt-terracota));
    background-size: 22px 8px; background-repeat: repeat-x;
    opacity: 0.78;
  }
  .alerta-nota.estable::before { background: var(--xt-greca-crema, var(--xt-jade)); opacity: 0.65; }
  .alerta-nota.bajo::before { background-image: linear-gradient(90deg, var(--xt-terracota-soft) 50%, transparent 50%); background-size: 14px 8px; opacity: 0.78; }
  .alerta-nota::after {
    content: '';
    position: absolute;
    right: -16px; bottom: -22px;
    width: 100px; height: 100px;
    background-image: url('img/isotipo-terracota.svg');
    background-repeat: no-repeat;
    background-size: contain; background-position: bottom right;
    opacity: 0.06;
    pointer-events: none;
  }
  .alerta-nota > * { position: relative; z-index: 1; }
  .alerta-nota-num {
    font-family: var(--font-mono); font-size: 0.75rem;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--xt-terracota-texto); margin-bottom: 0.45rem;
  }
  .alerta-nota.estable .alerta-nota-num { color: var(--xt-jade-dark); }
  .alerta-nota.bajo .alerta-nota-num { color: var(--xt-terracota-texto); }
  .alerta-nota-titulo {
    font-family: var(--font-display); font-weight: 600;
    font-size: 1.08rem; color: var(--xt-carbon); line-height: 1.2;
    margin: 0 0 0.6rem; word-break: break-word;
  }
  .alerta-nota-body {
    font-size: 0.82rem; color: var(--xt-muted);
    line-height: 1.45; margin-bottom: 0.85rem;
  }
  .alerta-nota-cifras {
    display: flex; gap: 1rem; padding: 0.55rem 0;
    border-top: 1px dashed var(--xt-line);
    border-bottom: 1px dashed var(--xt-line);
    margin-bottom: 0.7rem;
  }
  .alerta-nota-cifra { flex: 1; }
  .alerta-nota-cifra-lab {
    font-family: var(--font-mono); font-size: 0.75rem;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--xt-muted);
  }
  .alerta-nota-cifra-val {
    font-family: var(--font-display); font-weight: 600;
    font-size: 1.05rem; color: var(--xt-carbon);
    font-variant-numeric: tabular-nums; margin-top: 0.12rem;
  }
  .alerta-nota-cifra-val.is-critico { color: var(--xt-terracota-texto); }
  .alerta-nota-bar {
    height: 6px; border-radius: var(--ficha-radius, 4px);
    background: rgba(42,54,61,0.1);
    overflow: hidden; margin-bottom: 0.7rem;
  }
  .alerta-nota-bar > span {
    display: block; height: 100%; border-radius: var(--ficha-radius, 4px);
    background: var(--xt-terracota);
    transition: width .4s ease;
  }
  .alerta-nota.estable .alerta-nota-bar > span { background: var(--xt-jade); }
  .alerta-nota.bajo .alerta-nota-bar > span { background: var(--xt-terracota-soft); }
  .alerta-nota-foot {
    display: flex; gap: 0.4rem; flex-wrap: wrap;
    margin-top: auto;
  }

  /* ── Empty state editorial ───────────────────────────────── */
  .inv-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem 3.5rem;
    background: #fff;
    border: 1px dashed var(--xt-line-strong);
    border-radius: var(--ficha-radius-lg);
    position: relative;
    overflow: hidden;
  }
  .inv-empty::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 6px;
    background: var(--xt-greca-terracota, var(--xt-terracota));
    background-size: 28px 6px; background-repeat: repeat-x;
    opacity: 0.5;
  }
  .inv-empty-num {
    font-family: var(--font-mono); font-size: 0.75rem;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--xt-terracota-texto); margin-bottom: 0.55rem;
  }
  .inv-empty-titulo {
    font-family: var(--font-display); font-weight: 600;
    font-size: 1.3rem; color: var(--xt-carbon); margin: 0 0 0.4rem;
  }
  .inv-empty-lead {
    font-size: 0.88rem; color: var(--xt-muted);
    max-width: 42ch; margin: 0 auto;
  }

  /* ── Form shell (vista-edicion) ──────────────────────────── */
  .inv-form-shell {
    max-width: 720px;
    margin: 0 auto;
  }
  .inv-form-topbar {
    background: var(--xt-crema-2);
    border: 1px solid var(--xt-line);
    border-radius: var(--ficha-radius-lg);
    padding: 1.2rem 1.4rem 1.25rem;
    position: relative;
    overflow: hidden;
    margin-bottom: 0.9rem;
  }
  .inv-form-topbar::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 6px;
    background: var(--xt-greca-terracota, var(--xt-terracota));
    background-size: 28px 6px; background-repeat: repeat-x;
    opacity: 0.72;
  }
  .inv-form-topbar::after {
    content: ''; position: absolute;
    right: -22px; bottom: -22px;
    width: 130px; height: 130px;
    background-image: url('img/isotipo-terracota.svg');
    background-repeat: no-repeat;
    background-size: contain; background-position: bottom right;
    opacity: 0.07; pointer-events: none;
  }
  .inv-form-topbar-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    position: relative; z-index: 1;
  }
  .inv-form-num {
    font-family: var(--font-mono); font-size: 0.75rem;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--xt-terracota-texto); margin-bottom: 0.4rem;
  }
  .inv-form-titulo {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.6rem; color: var(--xt-carbon); margin: 0;
    letter-spacing: -0.01em;
  }
  .inv-form-card {
    background: #fff;
    border: 1px solid var(--xt-line);
    border-radius: var(--ficha-radius-lg);
    padding: 1.5rem 1.65rem 1.7rem;
    box-shadow: var(--ficha-sombra);
  }
  .inv-form-section {
    margin-bottom: 1.5rem;
  }
  .inv-form-section + .inv-form-section {
    padding-top: 1.35rem;
    border-top: 1px dashed var(--xt-line);
  }
  .inv-form-section-titulo {
    font-family: var(--font-display); font-weight: 600;
    font-size: 1.05rem; color: var(--xt-carbon); margin: 0 0 0.15rem;
  }
  .inv-form-section-sub {
    font-family: var(--font-mono); font-size: 0.75rem;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--xt-muted); margin-bottom: 0.95rem;
  }
  /* catalogo-18: LA etiqueta y EL campo del catálogo. La etiqueta es la
     .label-mono del sistema (igual que .prod-label); el campo es el
     .input-xt a 44 px. .prod-input es el mismo campo en Productos. */
  .inv-form-label {
    display: block; font-family: var(--font-mono); font-size: 0.75rem;
    letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
    color: var(--xt-muted); margin-bottom: 0.35rem;
  }
  .inv-form-label .opt {
    font-family: var(--font-body, 'DM Sans', sans-serif); font-weight: 400;
    color: var(--xt-muted); font-size: 0.75rem;
    letter-spacing: 0; text-transform: none; margin-left: 0.25rem;
  }
  .inv-form-input,
  .inv-form-select { width: 100%; }
  .inv-form-input,
  .inv-form-select,
  .prod-input {
    border: 1.5px solid var(--xt-line-strong);
    background: var(--xt-crema);
    padding: 10px 12px; min-height: 44px;
    border-radius: var(--ficha-radius, 4px);
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 15px; line-height: 1.4; color: var(--xt-carbon);
    transition: border-color .15s ease;
  }
  .inv-form-input:focus,
  .inv-form-select:focus,
  .prod-input:focus {
    outline: 2px solid var(--xt-terracota); outline-offset: 1px;
    border-color: var(--xt-terracota);
  }
  .inv-form-input::placeholder,
  .prod-input::placeholder { color: var(--xt-muted); opacity: 1; }
  .inv-form-helper {
    font-family: var(--font-mono); font-size: 0.75rem;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--xt-muted); margin-top: 0.35rem;
  }
  .inv-form-toggle {
    display: flex; align-items: flex-start; gap: 0.7rem;
    padding: 0.85rem 1rem;
    background: var(--xt-crema-2);
    border: 1px dashed var(--xt-line-strong);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
  }
  .inv-form-toggle:hover {
    border-color: var(--xt-terracota);
    background: rgba(216,67,21,0.04);
  }
  .inv-form-toggle input[type="checkbox"] {
    margin-top: 0.15rem;
    accent-color: var(--xt-terracota);
    width: 16px; height: 16px;
  }
  .inv-form-toggle-text {
    font-size: 0.88rem; font-weight: 600;
    color: var(--xt-carbon); display: block;
  }
  .inv-form-toggle-sub {
    font-size: 0.78rem; color: var(--xt-muted);
    margin-top: 0.2rem; line-height: 1.4;
  }
  .inv-form-submit {
    width: 100%;
    background: var(--xt-terracota-dark, #BF360C);
    color: var(--xt-crema);
    border: 1px solid var(--xt-terracota);
    border-radius: 10px;
    padding: 0.85rem 1.2rem;
    font-family: var(--font-display); font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background .15s ease;
    margin-top: 0.5rem;
  }
  .inv-form-submit:hover { background: #A52E0A; border-color: var(--xt-terracota-dark); }
  .inv-form-submit:disabled { opacity: 0.6; cursor: not-allowed; }

  /* ── Filtros strip horizontal ────────────────────────────── */
  .inv-filtros {
    display: flex; gap: 0.4rem; flex-wrap: wrap;
    margin-bottom: 0.85rem;
  }
  .inv-filtro-chip {
    font-family: var(--font-mono); font-size: 0.75rem;
    letter-spacing: 0.14em; text-transform: uppercase;
    padding: 0.4rem 0.85rem; border-radius: var(--ficha-radius, 4px);
    border: 1px solid var(--xt-line); background: #fff;
    color: var(--xt-carbon); cursor: pointer;
    transition: all .15s ease;
  }
  .inv-filtro-chip:hover { border-color: var(--xt-carbon); }
  .inv-filtro-chip.is-active {
    background: var(--xt-carbon); color: var(--xt-crema);
    border-color: var(--xt-carbon);
  }

  /* ── Mini bar (proyeccion / valor) ───────────────────────── */
  .inv-mini-bar {
    height: 4px; border-radius: var(--ficha-radius, 4px);
    background: rgba(42,54,61,0.1);
    overflow: hidden; margin-top: 0.45rem;
  }
  .inv-mini-bar > span {
    display: block; height: 100%; border-radius: var(--ficha-radius, 4px);
    background: var(--xt-jade);
    transition: width .4s ease;
  }
  .inv-mini-bar.bajo > span { background: var(--xt-terracota-soft); }
  .inv-mini-bar.critico > span { background: var(--xt-terracota); }

  /* ── Catalogo strip (Activos fijos / Categorias) ─────────── */
  .cat-fila {
    display: flex; align-items: center; gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: #fff;
    border: 1px solid var(--xt-line);
    border-radius: 12px;
    margin-bottom: 0.5rem;
    position: relative;
    transition: border-color .15s ease, transform .15s ease;
  }
  .cat-fila:hover { border-color: var(--xt-terracota); transform: translateX(2px); }
  .cat-fila-num {
    font-family: var(--font-mono); font-size: 0.75rem;
    letter-spacing: 0.2em;
    color: var(--xt-muted); min-width: 1.8rem;
    font-weight: 500;
  }
  .cat-fila-nombre {
    flex: 1;
    font-family: var(--font-display); font-weight: 500;
    font-size: 1rem; color: var(--xt-carbon);
  }
  .cat-fila-meta {
    font-family: var(--font-mono); font-size: 0.75rem;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--xt-muted);
  }
  .cat-fila-actions { display: flex; gap: 0.35rem; }

  /* ── Tablas editoriales (Mermas / Proveedores) ───────────── */
  .inv-tabla-wrap {
    background: #fff;
    border: 1px solid var(--xt-line);
    border-radius: var(--ficha-radius-lg);
    /* En 375 px las 7 columnas de Mermas no caben: la tabla se desliza de
       lado dentro de su marco en vez de cortarse (catalogo-15). */
    overflow-x: auto;
    box-shadow: var(--ficha-sombra);
  }
  .inv-tabla {
    width: 100%; border-collapse: collapse;
  }
  .inv-tabla thead th {
    font-family: var(--font-mono); font-size: 0.75rem;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--xt-muted);
    padding: 0.85rem 1rem; text-align: left;
    background: var(--xt-crema-2);
    border-bottom: 1px solid var(--xt-line);
    font-weight: 500;
  }
  .inv-tabla tbody td {
    padding: 0.85rem 1rem;
    font-size: 0.88rem;
    color: var(--xt-carbon);
    border-bottom: 1px solid var(--xt-line);
  }
  .inv-tabla tbody tr:last-child td { border-bottom: none; }
  .inv-tabla tbody tr:hover { background: rgba(245,236,221,0.4); }
  .inv-tabla .num { font-variant-numeric: tabular-nums; font-family: var(--font-display); font-weight: 500; }
  .inv-tabla .mono {
    font-family: var(--font-mono); font-size: 0.75rem;
    letter-spacing: 0.08em;
  }
  /* Existencias (catalogo-1): insumos y productos en una tabla; el sello
     del semáforo va en su celda (en la ficha de antes iba en la esquina) y
     las acciones de cada fila bajan de renglón si no caben. */
  .inv-existencias tbody td { vertical-align: top; }
  .inv-existencias .shelf-estado-pill { position: static; display: inline-block; white-space: nowrap; }
  .inv-existencias .shelf-actions { margin-top: 0; padding-top: 0; }
  .inv-existencias .shelf-cad { margin: 0.35rem 0 0; }
  /* Celular: celdas más angostas (catalogo-15). Los renglones de Recibir
     mercancía son una tabla .xt-tabla-fichas: en el celular se leen como
     fichas (css/componentes.css), sin rejilla propia (catalogo-4). */
  @media (max-width: 640px) {
    .inv-tabla thead th,
    .inv-tabla tbody td { padding: 0.6rem 0.5rem; }
  }