:root {
  --bg: #0f1115;
  --bg-soft: #131822;
  --card: #1a1f2b;
  --card-2: #111520;
  --text: #f5f7fa;
  --muted: #93a0b4;
  --border: #2a3142;
  --ok: #10b981;
  --bad: #ef4444;
  --warn: #f59e0b;
  --primary: #00a3ff;
  --topbar-h: 3.5rem;
  --footer-h: 2.95rem;
  --sidebar-w: clamp(13rem, 17vw, 16.75rem);
  --content-pad-y: clamp(1rem, 2.2vw, 1.875rem);
  --content-pad-x: clamp(1rem, 2.6vw, 2.125rem);
}

* { box-sizing: border-box; }

* {
  scrollbar-width: thin;
  scrollbar-color: #476186 #101827;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: #101827;
  border-radius: 8px;
}

*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #5677a6 0%, #3f5a81 100%);
  border-radius: 8px;
  border: 2px solid #101827;
}

*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #6991c9 0%, #4a6a96 100%);
}

body {
  margin: 0;
  font-family: "Plus Jakarta Sans", "Space Grotesk", sans-serif;
  background:
    radial-gradient(900px 500px at 90% -20%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 70%),
    radial-gradient(700px 380px at -10% -15%, #f9731622, transparent 70%),
    linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 70%);
  color: var(--text);
}


a { color: inherit; text-decoration: none; }

.app-shell {
  min-height: calc(100dvh - var(--topbar-h) - var(--footer-h));
  display: block;
}

.sidebar {
  width: var(--sidebar-w);
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  bottom: 0;
  z-index: 1100;
  background: linear-gradient(180deg, #1a1f2b 0%, #151a24 100%);
  border-right: 1px solid var(--border);
  padding: clamp(1rem, 2vw, 1.5rem) clamp(.75rem, 1.5vw, 1.125rem);
  display: flex;
  flex-direction: column;
  gap: .625rem;
  height: auto;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.45rem;
  color: var(--primary);
  letter-spacing: .02em;
}

.brand svg { width: 22px; height: 22px; }

.group-title {
  margin-top: 12px;
  color: var(--muted);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text);
  border: 1px solid transparent;
}

.nav-link:hover,
.nav-link.active {
  background: #20293a;
  border-color: #2f3b52;
}

.submodules {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nav-link.nav-sub {
  margin-left: 10px;
  padding: 9px 12px;
  font-size: .92rem;
  color: color-mix(in srgb, var(--text) 92%, var(--muted));
  border-left: 2px solid #2a3550;
  border-radius: 8px;
}

.side-bottom {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.main {
  margin-left: var(--sidebar-w);
  width: calc(100% - var(--sidebar-w));
  min-height: calc(100dvh - var(--topbar-h) - var(--footer-h));
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  padding: var(--content-pad-y) var(--content-pad-x);
}

.app-shell.no-sidebar {
  display: block;
}

.main.main-full {
  margin-left: 0;
  width: 100%;
}

.title {
  margin: 0;
  color: var(--primary);
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
}

.subtitle {
  margin: 8px 0 0;
  color: var(--muted);
}

.card {
  margin-top: 18px;
  background: linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 10px 30px #00000033;
}

.filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: end;
}

.field { display: flex; flex-direction: column; gap: 5px; min-width: 160px; }
.field.wide { min-width: 280px; }

.search-wrapper {
  display: flex;
  gap: 8px;
  align-items: center;
}

.search-wrapper input {
  flex: 1;
  min-width: 0;
}

.search-btn {
  flex-shrink: 0;
  padding: 0 16px;
  font-weight: 600;
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--primary);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.search-btn:hover {
  background: color-mix(in srgb, var(--primary) 25%, transparent);
  border-color: var(--primary);
}

.search-btn:active {
  background: color-mix(in srgb, var(--primary) 35%, transparent);
}

label { color: var(--muted); font-size: .8rem; }

input, select, button {
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #0f131d;
  color: var(--text);
  padding: 0 12px;
}

button {
  font-family: "Plus Jakarta Sans", sans-serif;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 36px;
  background-image:
    linear-gradient(45deg, transparent 50%, #7ea2cc 50%),
    linear-gradient(135deg, #7ea2cc 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 17px,
    calc(100% - 10px) 17px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

select:hover {
  border-color: #3a4863;
}

select option {
  background: #111825;
  color: #e4edfb;
}

input:focus, select:focus { outline: none; border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); }

@keyframes dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(.995);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes dropdown-option-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

button {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 92%, #fff 8%), var(--primary));
  border-color: transparent;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  transition: transform .14s ease, filter .14s ease, opacity .14s ease;
}

button:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

button.secondary { background: #111621; border-color: var(--border); }
button.soft { background: color-mix(in srgb, var(--primary) 18%, #111621); color: color-mix(in srgb, var(--primary) 88%, #fff 12%); }

.table-wrap {
  margin-top: 14px;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 10px;
  border: 1px solid var(--border);
}

table { width: 100%; border-collapse: collapse; min-width: 0; table-layout: auto; }
th, td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: top; font-size: .84rem; white-space: normal; overflow-wrap: anywhere; }
th { color: var(--muted); font-size: .78rem; letter-spacing: .03em; text-align: left; }
tr:hover td { background: #1d2433; }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: .72rem;
  border: 1px solid transparent;
}
.badge.ok { background: #10b98122; border-color: #10b98155; color: #6ee7b7; }
.badge.err { background: #ef444422; border-color: #ef444455; color: #fca5a5; }
.badge.info { background: #3b82f622; border-color: #3b82f655; color: #93c5fd; }
.badge.warn { background: #f59e0b22; border-color: #f59e0b55; color: #fcd34d; }
.badge.admin { background: #8b5cf622; border-color: #8b5cf655; color: #c4b5fd; }
.badge.muted { background: #9ca3af22; border-color: #9ca3af55; color: #cbd5e1; }

.pagination {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.toast {
  margin-top: 10px;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: .9rem;
  border: 1px solid transparent;
}
.toast-info { background: #3b82f622; border-color: #3b82f655; }
.toast-error { background: #ef444422; border-color: #ef444455; }

.toast-stack {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  width: min(430px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast-floating {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px 12px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  box-shadow: 0 12px 24px #00000055;
  backdrop-filter: blur(7px);
  animation: toast-in .18s ease-out;
}

.toast-floating.leaving {
  animation: toast-out .2s ease-in forwards;
}

.toast.leaving {
  animation: toast-out .2s ease-in forwards;
}

.toast-floating-text {
  font-size: .88rem;
  line-height: 1.35;
}

.toast-floating-close {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  padding: 0;
  border: 1px solid transparent;
  font-size: .85rem;
  font-weight: 700;
  background: #ffffff18;
}

.toast-info {
  background: linear-gradient(165deg, #163152f2 0%, #11243ef2 100%);
  border-color: #2f5f91;
  color: #d8ebff;
}

.toast-error {
  background: linear-gradient(165deg, #4b1b22f2 0%, #391419f2 100%);
  border-color: #8b3442;
  color: #ffd6dc;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toast-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.footer {
  position: relative;
  z-index: 900;
  border-top: 1px solid var(--border);
  color: var(--muted);
  text-align: center;
  min-height: var(--footer-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  font-size: .82rem;
}

.footer-with-sidebar {
  padding-inline-start: calc(var(--sidebar-w) + 1rem);
}

.loading-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1400;
  background: #05081038;
  backdrop-filter: blur(1.5px);
}

.loading-overlay.show {
  display: flex;
}

.loading-overlay-card {
  min-width: 200px;
  min-height: 96px;
  padding: 16px 18px 14px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 18px;
  border: 1px solid #355079;
  background: radial-gradient(circle at 30% 25%, #1b3455 0%, #10192b 72%);
  box-shadow: 0 14px 34px #0000005c;
}

.loading-spinner {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 3px solid #4c6992;
  border-top-color: #f0f8ff;
  border-right-color: #7db8ff;
  animation: spin .62s linear infinite;
}

.loading-overlay-label {
  color: #dcecff;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  max-width: 240px;
}

.loading-bar {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  z-index: 1450;
  pointer-events: none;
  opacity: 0;
}

.loading-bar::before {
  content: "";
  display: block;
  height: 100%;
  width: 38%;
  background: linear-gradient(90deg, transparent 0%, #49a8ff 55%, #a8dcff 100%);
  box-shadow: 0 0 14px #49a8ff;
  transform: translateX(-120%);
}

.loading-bar.show {
  opacity: 1;
}

.loading-bar.show::before {
  animation: loading-slide 1.05s ease-in-out infinite;
}

button.htmx-request,
a.htmx-request,
form.htmx-request button {
  pointer-events: none;
  opacity: .85;
}

button.htmx-request::after,
form.htmx-request button::after {
  content: "";
  width: 13px;
  height: 13px;
  border-radius: 999px;
  border: 2px solid #ffffff66;
  border-top-color: #ffffff;
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
  animation: spin .7s linear infinite;
}

.card,
.config-card,
.module,
.module-card,
.kpi-card,
.table-wrap {
  animation: rise-in .5s cubic-bezier(.2, .7, .2, 1) both;
}

.table-wrap tbody tr {
  animation: fade-in .42s ease both;
}

.table-wrap tbody tr:nth-child(1) { animation-delay: .02s; }
.table-wrap tbody tr:nth-child(2) { animation-delay: .04s; }
.table-wrap tbody tr:nth-child(3) { animation-delay: .06s; }
.table-wrap tbody tr:nth-child(4) { animation-delay: .08s; }
.table-wrap tbody tr:nth-child(5) { animation-delay: .1s; }
.table-wrap tbody tr:nth-child(6) { animation-delay: .12s; }
.table-wrap tbody tr:nth-child(7) { animation-delay: .14s; }
.table-wrap tbody tr:nth-child(8) { animation-delay: .16s; }

.module-card-grid .module-card:nth-child(1) { animation-delay: .04s; }
.module-card-grid .module-card:nth-child(2) { animation-delay: .1s; }
.module-card-grid .module-card:nth-child(3) { animation-delay: .16s; }
.module-card-grid .module-card:nth-child(4) { animation-delay: .22s; }
.module-card-grid .module-card:nth-child(5) { animation-delay: .28s; }
.module-card-grid .module-card:nth-child(6) { animation-delay: .34s; }
.module-card-grid .module-card:nth-child(7) { animation-delay: .4s; }
.module-card-grid .module-card:nth-child(8) { animation-delay: .46s; }
/* De la 9a en adelante todas juntas: escalonar mas haria esperar demasiado. */
.module-card-grid .module-card:nth-child(n+9) { animation-delay: .5s; }

.submodules .nav-link {
  animation: nav-in .36s ease both;
}

.submodules .nav-link:nth-child(1) { animation-delay: .02s; }
.submodules .nav-link:nth-child(2) { animation-delay: .08s; }
.submodules .nav-link:nth-child(3) { animation-delay: .14s; }

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes loading-slide {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes nav-in {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.login-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.login-center {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 20px;
}

.login-card {
  width: min(470px, 100%);
  background: linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 20px 48px #00000055;
}

.tabs {
  margin: 16px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.tabs button {
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: #131927;
  color: var(--muted);
}

.tabs button:last-child { border-right: 0; }
.tabs button.active { background: color-mix(in srgb, var(--primary) 22%, #121825); color: var(--text); }

.modules-grid {
  margin-top: 18px;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.modules-shell {
  width: min(1160px, 100%);
  margin: 0 auto;
}

.dashboard-page {
  margin: -30px -34px -20px;
}

.dash-topbar {
  height: var(--topbar-h);
  position: sticky;
  top: 0;
  z-index: 1200;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #171c27 0%, #121722 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(.875rem, 2vw, 1.5rem);
}

.dash-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Space Grotesk", sans-serif;
  color: var(--primary);
  font-size: 1.34rem;
  font-weight: 700;
}

.dash-brand svg {
  width: 24px;
  height: 24px;
}

.dash-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dash-user-display {
  height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border-radius: 6px;
  border: 1px solid #28446a;
  background: #0f2a46;
  color: #88c6ff;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}

.dash-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid #28446a;
  background: #0f2a46;
  color: #88c6ff;
  font-size: .8rem;
  font-weight: 600;
}

.dashboard-content {
  padding: 22px 24px 12px;
}

.module-card-grid {
  margin-top: 24px;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.module-empty {
  margin-top: 24px;
  padding: 28px 24px;
  border: 1px dashed #2a3346;
  border-radius: 12px;
  background: #161b27;
  text-align: center;
}

.module-empty h3 {
  margin: 0 0 8px;
  font-size: 15px;
  color: var(--text);
}

.module-empty p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

.module-card {
  border: 1px solid #2a3346;
  border-radius: 12px;
  background: linear-gradient(170deg, #1a202d 0%, #161b27 100%);
  min-height: 210px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease, background .24s ease;
}

.module-card.active {
  border-color: #2f4968;
}

.module-card:not(.disabled):hover {
  transform: translateY(-6px);
  border-color: #3d5a80;
  box-shadow: 0 12px 32px #00000044;
  background: linear-gradient(170deg, #212a3a 0%, #1c2130 100%);
}

.module-card.disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.module-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.module-icon {
  color: #9eabbc;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.module-icon svg {
  width: 24px;
  height: 24px;
}

.module-icon svg path {
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.module-card.active .module-icon {
  color: var(--primary);
}

.module-card h3 {
  margin: 14px 0 8px;
  /* 1.75rem y no 2rem: con 2rem, "Abastecimiento" pedía 250px y la tarjeta ofrece
     234 útiles en su ancho mínimo, así que se salía del borde — y "Configuración"
     quedaba justo en el límite. `break-word` es la red para un nombre más largo
     que llegue después: prefiere partir la palabra antes que desbordar. */
  font-size: 1.75rem;
  overflow-wrap: break-word;
}

.module-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.module-card-footer {
  display: none;
}

.system-status {
  margin-top: 16px;
  border: 1px solid #2b3446;
  border-radius: 10px;
  background: linear-gradient(170deg, #191f2b 0%, #161b26 100%);
  padding: 14px 18px;
}

.system-status h3 {
  margin: 0;
  font-size: 1.85rem;
}

.config-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 18px;
}

.config-title {
  margin-bottom: 0;
}

.config-page .config-card {
  margin-top: 0;
}

.config-header {
  border: 1px solid #2b3446;
  border-radius: 14px;
  background: linear-gradient(165deg, #151d2c 0%, #121a2a 100%);
  padding: 18px;
}

.config-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.config-card {
  border: 1px solid #2b3446;
  border-radius: 12px;
  background: linear-gradient(170deg, #171f2f 0%, #131a28 100%);
  padding: 16px;
}

.config-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.config-card h3 {
  margin: 0;
  font-size: 1.1rem;
}

.config-card p {
  margin: 12px 0 0;
  color: var(--muted);
}

.config-card ul {
  margin: 12px 0 0;
  padding-left: 18px;
  color: #c3d0e6;
  font-size: .9rem;
  line-height: 1.45;
}

.config-form-card,
.config-list-card {
  min-height: 100%;
}

.config-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.config-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.config-form-actions {
  display: flex;
  gap: 10px;
}

.config-form-actions button {
  flex: 1;
}

.config-filters {
  margin-top: 0;
}

/* Acceso Usuarios: maestro y detalle conviven en el DOM y `data-view` decide
   cuál se muestra, igual que en Listas de Precios y el monitor de fórmulas. */
#acceso-content[data-view="master"] #acceso-detail { display: none; }
#acceso-content[data-view="detail"] #acceso-master { display: none; }

/* Modales chicos de nombre y contraseña. */
.acceso-modal .pdf-modal-dialog {
  position: fixed;
  z-index: 1102;
  inset: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(460px, calc(100vw - 40px));
  max-height: calc(100vh - 9rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(170deg, #161d2b 0%, #0e131e 100%);
  box-shadow: 0 20px 48px #00000055;
}

.acceso-modal .pdf-modal-backdrop {
  position: fixed;
  inset: 0;
  background: #05070ccc;
  z-index: 1101;
}

.acceso-modal {
  z-index: 1100;
}

#config-auth-create-modal .pdf-modal-dialog,
#config-auth-edit-modal .pdf-modal-dialog {
  position: fixed;
  z-index: 1002;
  inset: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(44rem, calc(100vw - 2.5rem));
  max-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  overflow: visible;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, #161b27 0%, #101521 100%);
}

#config-auth-create-modal .pdf-modal-backdrop,
#config-auth-edit-modal .pdf-modal-backdrop {
  position: fixed;
  inset: 0;
  background: #00000099;
  z-index: 1001;
}

#config-auth-create-modal,
#config-auth-edit-modal {
  z-index: 1000;
}

#config-auth-create-modal .config-modal-body,
#config-auth-edit-modal .config-modal-body {
  overflow: visible;
}

/* Dentro de los modales de auth el LOV abierto debe superar al overlay. */
#config-auth-create-modal .lov.is-open,
#config-auth-edit-modal .lov.is-open {
  z-index: 1300;
}

.config-modal-body {
  padding: 18px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.config-checkbox-panel {
  border: 1px solid #2a3550;
  border-radius: 12px;
  background: linear-gradient(170deg, #131b2a 0%, #111827 100%);
  padding: 14px;
}

.config-checkbox-head h4 {
  margin: 0;
  font-size: .95rem;
}

.config-checkbox-head .subtitle {
  margin-top: 6px;
  font-size: .8rem;
}

.config-checkbox-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.config-checkbox-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  border: 1px solid #2e3a55;
  border-radius: 10px;
  padding: 10px 12px;
  background: #141d2d;
  cursor: pointer;
}

.config-checkbox-item input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--primary);
}

.config-checkbox-item span {
  font-size: .9rem;
  color: #d7e5fb;
}

.config-checkbox-admin {
  border-color: #5a2d8a;
  background: #2a1542;
  margin-bottom: 4px;
}

.config-checkbox-admin input {
  accent-color: #8b5cf6;
}

.config-checkbox-admin span {
  color: #c4b5fd;
  font-weight: 600;
}

/* Acceso Usuarios: aclaraciones del check de administrador y del LOV */
.config-admin-hint {
  font-weight: 400;
  color: var(--muted);
  font-size: .82rem;
}

.config-admin-nota {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid #5a2d8a;
  border-radius: 10px;
  background: #2a1542;
  color: #c4b5fd;
  font-size: .85rem;
}

.lov-hint {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: .8rem;
}

/* Acceso Usuarios: razón social debajo del código en la grilla */
.cell-subtext {
  margin-top: 2px;
  font-size: .8rem;
  color: var(--muted);
}

/* Acceso Usuarios: agrupa las opciones del menú por módulo dentro del panel */
.config-checkbox-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.config-checkbox-group {
  margin-top: 14px;
  border-top: 1px solid #2a3550;
  padding-top: 12px;
}

.config-checkbox-group:first-of-type {
  border-top: 0;
}

/* Opción que el rol del usuario no habilita: se muestra pero no se puede marcar.
   Se bloquea con pointer-events y no con [disabled], para que el checkbox siga
   viajando en el POST y guardar no pise el valor ya cargado. */
.config-checkbox-item.is-disabled {
  opacity: .42;
  cursor: not-allowed;
  pointer-events: none;
}

.config-checkbox-group-title {
  margin: 0;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.config-checkbox-group .config-checkbox-grid {
  margin-top: 10px;
}

.config-user-display {
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
}

.config-user-display strong {
  color: var(--text);
  letter-spacing: .01em;
}

input[readonly] {
  opacity: 0.6;
  cursor: default;
  pointer-events: none;
}

.config-module-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.config-downloads-table td:nth-child(1) {
  width: 180px;
}

.config-downloads-table td:nth-child(2) {
  min-width: 320px;
}

.config-downloads-table td:nth-child(5),
.config-downloads-table td:nth-child(6) {
  white-space: nowrap;
}

.config-table-summary {
  margin-top: 14px;
  color: var(--muted);
  font-size: .9rem;
}

.auth-grid-toolbar {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.auth-grid-toolbar .config-table-summary {
  margin: 0;
}

.auth-grid-toolbar .config-table-summary {
  color: #9fb0c8;
  font-weight: 500;
}

.auth-grid-toolbar .config-table-summary strong {
  color: #d8e9ff;
}

.auth-new-user-btn {
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 42%, transparent);
  background: color-mix(in srgb, var(--primary) 15%, #0d1724);
  color: color-mix(in srgb, var(--primary) 78%, #fff 22%);
  font-size: .84rem;
  font-weight: 600;
}

.auth-new-user-btn:hover {
  background: color-mix(in srgb, var(--primary) 22%, #0d1724);
  border-color: color-mix(in srgb, var(--primary) 60%, transparent);
  color: #fff;
  transform: none;
  filter: brightness(1);
}

.auth-new-user-btn:active {
  background: color-mix(in srgb, var(--primary) 30%, #0d1724);
}

.field-actions {
  display: flex;
  align-items: flex-end;
}

@media (max-width: 680px) {
  .auth-grid-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .auth-new-user-btn {
    width: 100%;
  }
}

.action-delete {
  color: #ffb4bf;
  background: #51222d;
  border-color: #7b3141;
}

.action-delete svg path {
  stroke: currentColor;
}

.status-grid {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #313a4a;
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 14px;
  align-items: center;
}

.status-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: .9rem;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #22c55e;
}

.status-dot.db {
  background: #00b894;
}

.status-pill {
  justify-self: end;
  border: 1px solid #205742;
  background: #174433;
  color: #46e5a2;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: .8rem;
  font-weight: 600;
}

.dash-hero {
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
  border-radius: 16px;
  padding: 18px 20px;
  background:
    radial-gradient(240px 110px at 95% -20%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 65%),
    linear-gradient(165deg, #111b2d 0%, #0f1422 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.hero-cta {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border));
  background: color-mix(in srgb, var(--primary) 18%, #111622);
  color: #dff0ff;
  font-weight: 600;
}

.kpi-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}

.kpi-card {
  border-radius: 14px;
  border: 1px solid var(--border);
  background: linear-gradient(160deg, #172135 0%, #12192a 100%);
  padding: 14px;
}

.kpi-card.danger {
  border-color: #6a2a39;
  background: linear-gradient(160deg, #251623 0%, #1c111b 100%);
}

.kpi-label {
  margin: 0;
  font-size: .8rem;
  color: var(--muted);
}

.kpi-value {
  margin: 6px 0 0;
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  color: #eef6ff;
}

.dash-layout {
  margin-top: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 16px;
  align-items: start;
}

.module {
  min-height: 245px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    radial-gradient(180px 90px at 92% -8%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 60%),
    linear-gradient(165deg, #1a2030 0%, #121725 100%);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 14px 30px #00000033;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.module.enabled:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
  box-shadow: 0 18px 34px #00000048;
}

.module h3 {
  margin: 6px 0 0;
  font-size: 1.05rem;
}

.module-tags {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.module-tag {
  font-size: .74rem;
  color: #c9d7f2;
  background: #22304a;
  border: 1px solid #324664;
  border-radius: 999px;
  padding: 4px 9px;
}

.quick-panel {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(160deg, #141b2a 0%, #0f1522 100%);
  padding: 16px;
  position: sticky;
  top: 18px;
}

.quick-panel h3 {
  margin: 0 0 12px;
  font-size: 1rem;
}

.quick-panel a {
  display: block;
  padding: 10px 11px;
  border-radius: 10px;
  margin-bottom: 8px;
  border: 1px solid #2a3550;
  background: #152037;
  color: #d7e6ff;
}

.quick-panel a:hover {
  border-color: color-mix(in srgb, var(--primary) 50%, #2a3550);
  background: #1a2844;
}

.quick-divider {
  border-top: 1px solid var(--border);
  margin: 14px 0;
}

.quick-number {
  margin: 4px 0 10px;
  font-size: 1.2rem;
  font-family: "Space Grotesk", sans-serif;
  color: #ecf5ff;
}

.orders-panel {
  padding-top: 14px;
}

.orders-panel .orders-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #1a1f2b;
}

.formula-version-bar {
  margin-top: 0;
  margin-bottom: 16px;
  padding: 12px 16px;
  border: 1px solid #2a3f5e;
  border-radius: 14px;
  background: radial-gradient(140% 160% at 15% -40%, #203a63 0%, #132238 38%, #0e1828 100%);
  box-shadow: inset 0 1px 0 #ffffff10;
  display: flex;
  align-items: center;
  gap: 20px;
}

.formula-version-label {
  color: #f0f7ff;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .01em;
}

.formula-version-form {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.formula-radio-option {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #3a5578;
  background: #152238;
  color: #dcecff;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}

.formula-radio-option:hover {
  background: #1a2b45;
  border-color: #5475a0;
}

.formula-radio-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: inline-block;
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  border: 2px solid #9cb6d6;
  background: transparent;
  box-shadow: none;
}

.formula-radio-option input[type="radio"]::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  background: transparent;
}

.formula-radio-option input[type="radio"]:checked {
  border-color: #4ca7ff;
}

.formula-radio-option input[type="radio"]:checked::after {
  background: #4ca7ff;
}

.formula-radio-option input[type="radio"]:focus-visible {
  outline: 2px solid #89c3ff;
  outline-offset: 2px;
}

.formula-radio-option span {
  line-height: 1;
}

.formula-radio-option input[type="radio"]:checked + span {
  color: #ffffff;
}

.formula-page-title {
  margin: 0;
}

.formula-monitor-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.formula-layout-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.formula-layout-grid > article:first-child {
  grid-column: auto;
}

.formula-layout-grid > article:first-child .formula-table-wrap {
  max-height: 320px;
}

.formula-layout-grid .formula-table-wrap {
  max-height: 320px;
}

.formula-panel {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, #161d2b 0%, #111724 100%);
  padding: 16px;
  height: 420px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.formula-panel-title {
  margin: 0 0 10px;
  color: #dcecff;
  font-size: 1.02rem;
  font-weight: 700;
}

.formula-panel-title-orange {
  color: #ffb067;
}

/* Barra de filtros del Monitor: mismo look "suelto" que Lista de precios
   (sin recuadro/card), reutilizando las clases internas compartidas). */
#filtros-bar {
  margin-bottom: 20px;
  min-width: 0;
}

.formula-search-bar {
  margin-bottom: 12px;
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.formula-filter-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  min-width: 0;
}

.formula-filter-field {
  min-width: 0;
}

.formula-chips-bar {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  padding: 6px 0 8px 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  align-items: center;
  min-width: 0;
}

.formula-search-bar input {
  flex: 1;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #0f131d;
  color: var(--text);
  padding: 0 12px;
  font-size: .84rem;
}

.formula-search-bar input::placeholder {
  color: var(--muted);
}

.formula-search-bar input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
}

.formula-search-btn {
  flex-shrink: 0;
  height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--primary);
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--primary);
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.formula-search-btn:hover {
  background: color-mix(in srgb, var(--primary) 25%, transparent);
  border-color: var(--primary);
}

.formula-search-btn:active {
  background: color-mix(in srgb, var(--primary) 35%, transparent);
}

.formula-table-wrap {
  margin-top: 0;
  max-height: 270px;
  overflow-x: auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.formula-table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  font-family: "Plus Jakarta Sans", "Space Grotesk", "Segoe UI", sans-serif;
}

.formula-table th,
.formula-table td {
  padding: 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  font-size: .83rem;
  overflow-wrap: anywhere;
  white-space: normal;
}

.formula-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #1a1f2b;
  color: var(--muted);
  font-size: .78rem;
  letter-spacing: .03em;
  text-align: left;
  white-space: nowrap;
}

.formula-table td.formula-cell-capitalize {
  text-transform: lowercase;
}

.formula-table td.formula-cell-capitalize::first-letter {
  text-transform: uppercase;
}

.formula-col-mini {
  width: 60px;
  white-space: nowrap;
}

.formula-row-highlight td {
  background: #2d2732;
}

.formula-subheader-row td {
  background: #59461f;
  color: #ffdcae;
  font-weight: 600;
}

.formula-hint {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  margin: 0;
  color: var(--muted);
  font-size: .88rem;
  font-style: italic;
}

/* ─── Tabs del Monitor de Fórmulas ─── */
.monitor-tabs {
  display: flex;
  gap: .4rem;
  border-bottom: 1px solid var(--border);
}

.monitor-tab {
  padding: .55rem 1.2rem;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  background: transparent;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.monitor-tab:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.monitor-tab.active {
  color: var(--text);
  background: linear-gradient(180deg, #161d2b 0%, #111724 100%);
  border-color: var(--border);
  margin-bottom: -1px;
}

.monitor-tab-panel[hidden] {
  display: none;
}

/* Alternancia maestro / detalle dentro del tab Monitor */
#monitor-content[data-view="master"] #monitor-detail { display: none; }
#monitor-content[data-view="detail"] #monitor-master { display: none; }

/* Alternancia maestro / detalle / agregar dentro del tab Lista de precios */
#precios-content[data-view="master"] #precios-detail { display: none; }
#precios-content[data-view="master"] #precios-agregar { display: none; }
#precios-content[data-view="detail"] #precios-master { display: none; }
#precios-content[data-view="detail"] #precios-agregar { display: none; }
#precios-content[data-view="agregar"] #precios-master { display: none; }
#precios-content[data-view="agregar"] #precios-detail { display: none; }

/* Alternancia maestro / detalle dentro del tab Lista de inclusión */
#inclusion-content[data-view="master"] #inclusion-detail { display: none; }
#inclusion-content[data-view="detail"] #inclusion-master { display: none; }
#inclusion-content[data-view="master"] #inclusion-nueva { display: none; }
#inclusion-content[data-view="detail"] #inclusion-nueva { display: none; }
#inclusion-content[data-view="nueva"] #inclusion-master { display: none; }
#inclusion-content[data-view="nueva"] #inclusion-detail { display: none; }

/* Columnas de las tablas de precios */
.precios-col-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.precios-col-code { font-variant-numeric: tabular-nums; color: var(--muted); }
.precios-vig-fechas { display: block; font-size: .72rem; color: var(--muted); margin-top: 2px; }

/* ── Tabla de clientes de lista de inclusión ── */
/* Celdas centradas verticalmente, al mismo nivel que el botón "ojo". */
.inclusion-clientes-table td { vertical-align: middle; }
/* Columna "Artículos": header y contador centrados en la columna (alineados entre sí). */
.inclusion-clientes-table .precios-col-num { text-align: center; }

/* Botón "+ Nueva lista" (inclusión): texto algo más grande.
   Especificidad doble para ganarle a .agregar-btn-trigger (definida más abajo). */
.agregar-btn-trigger.nueva-lista-btn { font-size: 14px; }

/* ─── Detalle de lista de precios ─── */
.precios-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.precios-stat {
  flex: 1 1 150px;
  min-width: 130px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, #161d2b 0%, #111724 100%);
  padding: 14px 16px;
}

.precios-stat-label {
  display: block;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.precios-stat-value {
  display: block;
  margin-top: 4px;
  color: #dcecff;
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.precios-stat-sub {
  color: var(--muted);
  font-size: .74rem;
}

.precios-detail-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.precios-detail-search {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #0f131d;
  color: var(--text);
  font-size: .85rem;
  min-width: 240px;
}

.precios-detail-search:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
}

.precios-count-badge {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 600;
}

#precios-detalle-table tbody tr:hover td {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.precios-money-prefix {
  color: var(--muted);
  margin-right: 2px;
}

/* La tabla de precios del detalle ocupa más alto que el wrap genérico */
.precios-table-wrap {
  max-height: 68vh;
}

/* Anchos de columna predecibles para las tablas de precios.
   table-layout fixed + anchos en % => la tabla nunca excede el contenedor
   (sin scroll horizontal). */
.precios-listas-table,
#precios-detalle-table {
  table-layout: fixed;
  width: 100%;
}

/* Todo el contenido de las tablas de precios alineado a la izquierda */
.precios-listas-table th,
.precios-listas-table td,
#precios-detalle-table th,
#precios-detalle-table td {
  text-align: left;
}

/* Evitar barra de desplazamiento horizontal en los wraps de precios */
#precios-listas-resultado,
.precios-table-wrap {
  overflow-x: hidden;
}

/* ─── Maestro de listas de precios ─── */
.precios-listas-table td,
.precios-listas-table th {
  vertical-align: middle;
}

.precios-lista-row { transition: background .15s, box-shadow .15s; }

.precios-lista-row:hover td {
  background: color-mix(in srgb, var(--primary) 9%, transparent);
}

.precios-lista-row:hover .precios-col-chevron {
  color: var(--primary);
  transform: translateX(2px);
}

/* Chip del código de lista */
.precios-code-chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #0f131d;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-size: .82rem;
  font-weight: 600;
}

/* Nombre de la lista */
.precios-name-cell {
  color: #dcecff;
  font-weight: 600;
}

/* Pill de moneda con símbolo */
.precios-moneda-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--text);
  font-size: .78rem;
  white-space: nowrap;
}

.precios-moneda-sym {
  font-weight: 700;
  color: var(--primary);
}

/* Contador de artículos */
.precios-count-pill {
  display: inline-block;
  min-width: 34px;
  padding: 2px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.precios-count-zero {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Chevron indicador de "ver detalle" */
.precios-col-chevron {
  width: 28px;
  text-align: center;
  color: var(--muted);
  font-size: 1.2rem;
  font-weight: 700;
  transition: color .15s, transform .15s;
}

/* ─── Alta de producto: pantalla completa (vista "agregar") ─── */
/* El panel base .formula-panel tiene alto fijo con scroll; acá crece con su
   contenido, igual que la pantalla de nueva lista de inclusión. */
.precios-agregar-panel {
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.precios-form-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.precios-form-title {
  margin: 0;
  color: #dcecff;
  font-size: 1.05rem;
  font-weight: 700;
}

/* ── Sub-secciones (Producto / Precios y aporte) ── */
.precios-form-sec {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.precios-form-sec + .precios-form-sec { margin-top: 18px; }

.precios-form-eyebrow {
  color: var(--primary);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
}

.precios-form-grid-prod {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr;
  gap: 12px;
  align-items: end;
}

.precios-form-grid-money {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr;
  gap: 12px;
  align-items: start;
}

@media (max-width: 900px) {
  .precios-form-grid-prod,
  .precios-form-grid-money {
    grid-template-columns: 1fr;
  }
}

/* ── Campos numéricos con prefijo/sufijo de moneda ── */
.precios-money-field {
  display: flex;
  align-items: stretch;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #0f131d;
  overflow: hidden;
}

.precios-money-field:focus-within { border-color: var(--primary); }

.precios-money-affix {
  flex-shrink: 0;
  padding: 0 10px;
  display: flex;
  align-items: center;
  border-right: 1px solid var(--border);
  color: var(--muted);
  font-size: .82rem;
  font-weight: 600;
}

.precios-money-input {
  flex: 1;
  min-width: 0;
  /* Alto propio del contenedor: hay reglas globales que fuerzan height:40px en
     los inputs y desbordarían la caja de 34px, descentrando el número. */
  height: auto;
  align-self: stretch;
  border: none;
  background: transparent;
  color: var(--text);
  padding: 0 10px;
  font-family: inherit;
  font-size: .9rem;
  line-height: 1;
  outline: none;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.precios-money-input::-webkit-outer-spin-button,
.precios-money-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.precios-money-input { -moz-appearance: textfield; }

.precios-money-warn {
  color: var(--warn);
  font-size: .74rem;
}

/* ── Aporte publicitario: valor + selector de unidad ($ / %) ── */
.precios-aporte-row {
  display: flex;
  gap: 8px;
}

.precios-aporte-row .precios-money-field { flex: 1; min-width: 0; }

.precios-unit-toggle {
  display: inline-flex;
  flex-shrink: 0;
  gap: 3px;
  padding: 3px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #0f131d;
}

.precios-unit-btn {
  min-width: 34px;
  height: auto;
  align-self: stretch;
  padding: 0 10px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.precios-unit-btn.is-active {
  background: color-mix(in srgb, var(--primary) 22%, transparent);
  color: var(--primary);
}

/* ── Footer: acciones ── */
.precios-form-footer {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.precios-form-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.precios-form-actions .agregar-btn-save:disabled {
  background: #1d2739;
  color: #5f6b7e;
  cursor: not-allowed;
}

.precios-ap-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
}

/* Maestro a ancho completo en la vista master */
.formula-panel-maestro {
  height: auto;
}

.formula-table-wrap-maestro {
  max-height: 60vh;
}

/* Lista de inclusión: la tabla se expande para mostrar las 20 filas de la
   página completas, sin barra de scroll interna (la paginación va por fuera). */
.inclusion-clientes-wrap {
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
}

/* Maestro de listas de precios: mismo patrón "no-scroll". La tabla se expande
   para mostrar las 20 filas de la página completas y la paginación va por fuera. */
.precios-listas-wrap {
  max-height: none;
  overflow-x: hidden;
  overflow-y: visible;
}

/* Detalle de inclusión: mismo patrón "no-scroll". El panel base tiene height:420px
   fijo (scroll interno); acá lo dejamos crecer con el contenido y la tabla se expande
   con las 20 filas de la página, sin barra de scroll interna. */
.inclusion-detalle .formula-panel {
  height: auto;
}
.inclusion-detalle-wrap {
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
}

/* Paginación "split": texto a la izquierda, botones agrupados a la derecha
   (en vez del centrado global de .pagination). Reutilizable en cualquier
   listado paginado (lista de inclusión, maestro/consulta de artes, órdenes). */
.pagination-split {
  justify-content: space-between;
}

.pagination-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ─── Vista de detalle de un producto ─── */
.formula-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.formula-detail-back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.formula-detail-back:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.formula-detail-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, #161d2b 0%, #111724 100%);
  padding: 20px;
}

.formula-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.formula-detail-head-main {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

.formula-detail-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #0f131d;
  color: var(--primary);
}

.formula-detail-titles {
  min-width: 0;
}

.formula-detail-kicker {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.formula-detail-title {
  margin: 2px 0 6px;
  color: #dcecff;
  font-size: 1.35rem;
  font-weight: 700;
}

.formula-detail-meta {
  margin: 0;
  color: var(--muted);
  font-size: .85rem;
}

.formula-detail-meta strong {
  color: var(--text);
  font-weight: 600;
}

.formula-detail-badge {
  flex-shrink: 0;
}

/* Barra de acciones del detalle (placeholders) */
/* Cuerpo del detalle: mismo espaciado que .formula-detail (que ya no envuelve estos hijos) */
#detalle-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* El display:flex de arriba pisa el display:none del atributo hidden → forzarlo al ocultar
   el cuerpo cuando se abre la sub-vista (Nueva fórmula). */
#detalle-body[hidden] {
  display: none;
}

.formula-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.formula-action-btn {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #0f131d;
  color: var(--text);
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.formula-action-btn:not([disabled]):hover {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
}

.formula-action-primary {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--primary);
}

.formula-action-danger {
  border-color: #ef444455;
  color: #fca5a5;
}

.formula-action-btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

/* Cards del detalle: Componentes · Subcomponentes en la misma línea, a ancho completo (50/50).
   align-items:start → cada card mide según su propio contenido (no se estira a la otra). */
.formula-detail-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

/* En el detalle la card crece con los datos (la base .formula-panel tiene height fijo) */
.formula-detail-cards .formula-panel {
  height: auto;
}

@media (max-width: 860px) {
  .formula-detail-cards {
    grid-template-columns: 1fr;
  }
}

/* Componente con fórmula propia: marcado con highlight verde para fácil identificación */
.comp-item-explota {
  box-shadow: inset 3px 0 0 #10b981;
}

/* Tag que indica a qué fórmula explota la línea Sub-fórmula */
.comp-subformula-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  width: fit-content;
  font-size: .68rem;
  font-weight: 600;
  color: #6ee7b7;
  background: #10b98118;
  border: 1px solid #10b98155;
  border-radius: 999px;
  padding: 1px 8px;
}

.comp-item-unidad {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 500;
}

/* Listas de componentes/subcomponentes: se expanden al contenido, sin scroll interno.
   Si la lista es larga, scrollea la página. Las dos cards igualan alto por el grid. */
#componentes-container,
#explosion-container {
  height: auto;
  min-height: 200px;
  max-height: none;
  overflow: visible;
}

/* ── Sub-vista del detalle: form de Nueva fórmula ── */
.formula-subdetalle {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, #161d2b 0%, #111724 100%);
  padding: 18px;
}

.formula-subdetalle-header {
  margin-bottom: 22px;
}

.formula-subdetalle-title {
  margin: 0;
  color: #dcecff;
  font-size: 1.05rem;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.formula-subdetalle-sub {
  font-size: .78rem;
  font-weight: 500;
  color: var(--muted);
}

.formula-nueva-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.formula-form-grid {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 20px 24px;
  align-items: start;
}

.formula-form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.formula-form-field-full {
  grid-column: 1 / -1;
}

.formula-form-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #64748b;
}

.formula-form-input {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  color: #e2e8f0;
  font-size: .85rem;
  padding: 8px 10px;
  outline: none;
  width: 100%;
  font-family: inherit;
  transition: border-color .15s;
}

.formula-form-input:focus {
  border-color: #00A3FF;
}

textarea.formula-form-input {
  resize: vertical;
}

.formula-form-hint {
  margin: 0;
  font-size: .72rem;
  color: var(--muted);
}

.formula-radio-row {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 4px;
}

textarea.formula-form-input {
  min-height: 92px;
}

.formula-form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.formula-form-footer .formula-form-hint {
  flex: 1 1 240px;
  min-width: 0;
}

.formula-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto;
}

/* ── Nueva fórmula: sección de componentes ── */
.formula-comp-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--border);
  margin-top: 18px;
  padding-top: 16px;
}

/* Sub-form de agregar componente (LOV artículo + medida + cantidad + botón) */
.formula-comp-add {
  display: grid;
  grid-template-columns: 2fr 1.3fr 0.9fr auto;
  gap: 14px 16px;
  align-items: start;
}

.formula-comp-add-action .agregar-btn-save {
  margin-top: 24px;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .formula-comp-add {
    grid-template-columns: 1fr 1fr;
  }
  .formula-comp-add-action {
    grid-column: 1 / -1;
  }
  .formula-comp-add-action .agregar-btn-save {
    margin-top: 0;
    width: 100%;
  }
}

/* ═══════════ Nueva fórmula: panel de creación (diseño mockup) ═══════════ */
.nf-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, #161d2b 0%, #111724 100%);
  box-shadow: 0 10px 30px #00000033;
  padding: clamp(16px, 2vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 22px;
  animation: rise-in .5s cubic-bezier(.2, .7, .2, 1) both;
}

/* El <form> separa sus secciones/divisores/footer (si no, quedan pegados) */
/* Alta y copia comparten la maqueta: sin esto las secciones quedan pegadas entre sí y
   el divisor se apoya contra el campo de arriba. */
#form-nueva-formula,
#form-copiar-formula {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.nf-head { display: flex; flex-direction: column; gap: 12px; }

.nf-back {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--border); border-radius: 10px;
  background: transparent; color: var(--muted);
  font-size: .85rem; font-weight: 600; cursor: pointer;
  font-family: inherit;
  transition: border-color .15s, color .15s;
}
.nf-back:hover { border-color: var(--primary); color: #cbd5e1; }

.nf-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nf-title {
  margin: 0; color: #dcecff;
  font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
  font-size: 1.35rem; font-weight: 700;
}
.nf-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border));
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: #7dd3fc; font-size: .82rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.nf-section { display: flex; flex-direction: column; gap: 16px; }
.nf-section-head { display: flex; align-items: baseline; gap: 10px; }
.nf-section-title { margin: 0; color: #dcecff; font-size: 1.02rem; font-weight: 700; }
.nf-optional { color: var(--muted); font-size: .82rem; }
.nf-divider { height: 1px; background: var(--border); }

.nf-grid-datos-1 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; align-items: end; }
.nf-grid-datos-2 { display: grid; grid-template-columns: 1fr 2fr; gap: 14px; align-items: start; }
.nf-grid-add { display: grid; grid-template-columns: 2.4fr 1.1fr 0.9fr auto; gap: 12px; align-items: end; }

.nf-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.nf-field-btn { justify-content: flex-end; }
.nf-label { color: var(--muted); font-size: .8rem; }
.nf-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.nf-req { color: var(--bad); }
.nf-obs-count { font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.nf-input, .nf-select {
  height: 34px; box-sizing: border-box;
  padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--border); background: #0f131d;
  color: var(--text); font-family: inherit; font-size: .84rem;
  outline: none; width: 100%;
}

/* Sacar los spinners nativos de los inputs numéricos (Cantidad), sin dejar de ser number */
.nf-input[type="number"],
.nf-qty {
  -moz-appearance: textfield;
  appearance: textfield;
}
.nf-input::-webkit-inner-spin-button,
.nf-input::-webkit-outer-spin-button,
.nf-qty::-webkit-inner-spin-button,
.nf-qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Los <select> se transforman en .lov (34px); alineamos todo a esa altura. */
.nf-card .lov { width: 100%; }
.nf-select { cursor: pointer; }
.nf-input:focus, .nf-select:focus { border-color: var(--primary); }
.nf-select option { background: #0f172a; }
.nf-lov-slot { margin-top: 8px; }

.nf-btn-add {
  height: 34px; padding: 0 16px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border));
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: #7dd3fc; font-size: .86rem; font-weight: 600; cursor: pointer;
  white-space: nowrap; font-family: inherit;
  transition: background .15s;
}
.nf-btn-add:hover { background: color-mix(in srgb, var(--primary) 24%, transparent); }

.nf-count-badge {
  display: inline-block; min-width: 22px; text-align: center;
  padding: 1px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--primary); font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

.nf-table-wrap { border-radius: 12px; border: 1px solid var(--border); overflow: hidden; }
.nf-table-wrap .nf-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.nf-table th, .nf-table td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.nf-table th {
  text-align: left; padding: 10px 14px;
  color: var(--muted); font-size: .78rem; font-weight: 600; letter-spacing: .03em;
  border-bottom: 1px solid var(--border); background: #1a1f2b;
}
.nf-table th.nf-th-num { text-align: right; width: 120px; }
.nf-table th.nf-th-del { width: 48px; }
.nf-table td { padding: 9px 14px; border-bottom: 1px solid var(--border); font-size: .83rem; color: var(--text); }
.nf-table tbody tr:hover td { background: #1d2433; }
.nf-td-medida { color: var(--muted); }
.nf-td-num { text-align: right; }
.nf-td-del { text-align: center; }
.nf-code-chip {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  border: 1px solid var(--border); background: #111826;
  font-size: .78rem; color: #7dd3fc; font-variant-numeric: tabular-nums;
}
.nf-qty {
  width: 82px; box-sizing: border-box; height: 30px;
  padding: 0 10px; border-radius: 8px; border: 1px solid var(--border);
  background: #0f131d; color: var(--text); font-family: inherit;
  font-size: .83rem; text-align: right; outline: none;
}
.nf-qty:focus { border-color: var(--primary); }
.nf-del {
  height: 30px; padding: 0 14px; border-radius: 8px;
  border: 1px solid #7b3141; background: #51222d; color: #ffb4bf;
  font-family: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; line-height: 1;
}
.nf-del:hover { background: #6a2b38; }
.nf-empty {
  padding: 34px 14px !important; text-align: center;
  color: var(--muted); font-style: italic; font-size: .86rem;
}
.nf-footer { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }

@media (max-width: 820px) {
  .nf-grid-datos-1, .nf-grid-datos-2, .nf-grid-add { grid-template-columns: 1fr; }
  .nf-field-btn .nf-btn-add { width: 100%; }
}

.formula-comp-picker {
  position: relative;
}

.formula-comp-results {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
}

.formula-comp-results-list {
  list-style: none;
  margin: 0;
  padding: 4px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 10px;
  max-height: 260px;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

.formula-comp-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 7px 9px;
  color: #e2e8f0;
  font-size: .82rem;
  cursor: pointer;
}

.formula-comp-option:hover {
  background: #1d2433;
}

.formula-comp-option-code,
.formula-comp-row-code {
  font-weight: 600;
  color: #cbd5e1;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 1px 6px;
  font-size: .74rem;
  white-space: nowrap;
}

.formula-comp-option-desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.formula-comp-option-medida,
.formula-comp-row-medida {
  color: var(--muted);
  font-size: .74rem;
  white-space: nowrap;
}

.formula-comp-noresults {
  margin: 0;
  padding: 8px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 10px;
  color: var(--muted);
  font-size: .8rem;
}

/* Nota: la fila de componente (`<tr class="formula-comp-row">`) se estila vía
   `.nf-table`. La clase `.formula-comp-row` queda solo como hook del JS
   (conteo y detección de duplicados); no debe llevar CSS propio para no
   pisar el `display: table-row` de la tabla. */

@media (max-width: 760px) {
  .formula-form-grid {
    grid-template-columns: 1fr;
  }
}

/* Placeholder "en construcción" para tabs sin desarrollar */
.monitor-en-construccion {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 320px;
  padding: 40px 20px;
  border: 1px dashed var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, #161d2b 0%, #111724 100%);
  text-align: center;
  color: var(--muted);
}

.monitor-en-construccion h2 {
  margin: 0;
  color: #dcecff;
}

.monitor-construccion-icono {
  font-size: 2.4rem;
}

.formula-version-bar-middle {
  grid-column: 1 / -1;
  margin: 0;
}

.formula-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.formula-panel-header .formula-panel-title {
  margin-bottom: 0;
}

.formula-version-bar-inline {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Slider de versión (En línea ⇆ Casillero) del detalle de fórmula ──
   Pista con dos opciones y un knob que se desliza bajo la opción activa. */
.formula-version-slider {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 3px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #0f131d;
  user-select: none;
}

.formula-version-slider-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 7px;
  background: color-mix(in srgb, var(--primary) 22%, transparent);
  transition: transform .2s ease;
}

.formula-version-slider.is-casillero .formula-version-slider-thumb {
  transform: translateX(100%);
}

.formula-version-opt {
  position: relative;
  z-index: 1;
  /* Ancho fijo e IGUAL en ambos botones: el knob (thumb al 50%) sólo queda centrado
     si las dos mitades miden lo mismo. Con min-width/flex el texto más largo
     ("Casillero") ensanchaba su botón y descentraba el knob. */
  flex: 0 0 104px;
  width: 104px;
  /* Alto definido + line-height = alto: centra el texto de una sola línea vertical
     y horizontalmente SIN depender de `display:flex` en el <button> (que varios
     navegadores ignoran). El track mide 34px; contenido = 34 − 2(borde) − 6(padding) = 26px. */
  height: 26px;
  line-height: 26px;
  padding: 0 12px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: .82rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s;
}

.formula-version-opt.is-active {
  color: var(--primary);
}

.formula-version-opt:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 7px;
}

.comp-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.comp-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s;
}

.comp-item-clickable {
  cursor: pointer;
}

.comp-item-clickable:hover {
  background: #1d2433;
  border-color: var(--border);
}

.comp-item-selected {
  background: #1d3d66 !important;
  border-color: #2e5a9c !important;
}

/* La descripción absorbe todo el espacio libre: así la cantidad queda pegada a la X y no
   flota según lo largo del nombre (con space-between y tres hijos, el sobrante se partía). */
.comp-item-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.comp-item-desc {
  font-weight: 700;
  font-size: .83rem;
  color: var(--text);
  white-space: normal;
  line-height: 1.3;
}

.comp-item-meta {
  font-size: .74rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comp-item-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.comp-list-header {
  font-size: .78rem;
  color: #ffdcae;
  background: #59461f;
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 2px;
}

/* Columna de ancho fijo y texto centrado: todas las cantidades quedan alineadas entre sí. */
.comp-item-cant {
  min-width: 4.5rem;
  text-align: center;
  font-weight: 700;
  font-size: .88rem;
  color: var(--text);
  white-space: nowrap;
}

/* Quitar una línea de la fórmula. Discreto en reposo, rojo al pasar por encima. */
.comp-item-del {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  line-height: 0;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}

/* El ícono es SVG, no el glifo ×: así el aspa queda centrada en el recuadro sin depender
   de las métricas de la tipografía. */
.comp-item-del svg {
  display: block;
}

/* Botón de acción dentro de un toast (ej. "Deshacer" al borrar un componente). */
.toast-floating-action {
  flex: 0 0 auto;
  height: 26px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 55%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--primary);
  font-family: inherit;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background .15s;
}

.toast-floating-action:hover {
  background: color-mix(in srgb, var(--primary) 28%, transparent);
}

.comp-item-del:hover {
  background: color-mix(in srgb, #ef4444 18%, transparent);
  border-color: #ef444455;
  color: #fca5a5;
}

/* Alta de componente: fila fija debajo de la lista, mismo patrón que la sección
   "Agregar componente" del alta de fórmula. El sangrado de 10px alinea con .comp-item. */
/* El separador vive en el wrapper para que se vea igual con el form abierto o cerrado. */
.comp-alta-wrap {
  margin-top: 18px;
  /* Simétrico: el mismo aire arriba y abajo del bloque de alta. */
  padding: 16px 10px;
  border-top: 1px solid var(--border);
}

.comp-alta-abrir {
  width: 100%;
}

.comp-alta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Sin esto, display:flex le gana al atributo hidden y el form nunca se oculta. */
.comp-alta[hidden] {
  display: none;
}

.comp-alta-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.comp-alta-cancelar {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: .76rem;
  font-weight: 600;
  cursor: pointer;
}

.comp-alta-cancelar:hover {
  color: var(--text);
  text-decoration: underline;
}

.comp-alta-title {
  margin: 0 0 2px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.comp-alta-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.comp-alta-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.comp-alta-field-cant {
  flex: 0 0 84px;
}

.comp-alta-label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--muted);
}

/* Misma altura que .nf-input y .lov-trigger (34px), para que la fila quede pareja. */
/* Selector con dos clases a propósito: .agregar-btn-save se define más abajo en este
   archivo y, a igual especificidad, ganaba su padding de 10px 22px y su font-size de
   .9rem — con height 34px el texto quedaba descentrado y el botón desalineado del
   resto de la fila. Acá el botón tiene que medir lo mismo que .nf-input y .lov-trigger. */
.comp-alta .comp-alta-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 16px;
  font-size: .84rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 10px;
}


.formula-sku-cell {
  white-space: normal;
  line-height: 1.35;
  vertical-align: middle;
}

.formula-sku-desc {
  display: block;
  font-weight: 700;
  font-size: .82rem;
  color: var(--text);
}

.formula-sku-code {
  display: block;
  font-weight: 400;
  font-size: .77rem;
  color: var(--muted);
  margin-top: 1px;
}

.formula-sku-medida {
  display: block;
  font-size: .73rem;
  color: var(--muted);
  opacity: 0.65;
}

.formula-clickable-row {
  cursor: pointer;
  transition: background .15s ease;
}

.formula-clickable-row:hover td {
  background: #1d2433;
}

.formula-row-selected td {
  background: #1d3d66 !important;
}

.formula-debug-full td {
  background: #10b98112;
}

@media (max-width: 980px) {
  .formula-layout-grid {
    grid-template-columns: 1fr;
  }

  .formula-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .formula-version-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .formula-version-form {
    flex-wrap: wrap;
  }
}

/* ── Barra de filtros del maestro ── */
.formula-filter-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
}

.formula-filter-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.formula-filter-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #64748b;
}

.formula-filter-select {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 6px;
  color: #e2e8f0;
  font-size: 11px;
  padding: 5px 6px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.formula-filter-select:focus,
.formula-filter-select:hover {
  border-color: #00A3FF;
}

.formula-filter-select option {
  background: #1e293b;
  color: #e2e8f0;
}

/* ── Chips de estado (con/sin fórmula) ── */
.formula-chips-bar {
  display: flex;
  gap: 6px;
  padding: 6px 0 8px 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  align-items: center;
}

.formula-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid #334155;
  background: #1e293b;
  color: #94a3b8;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.formula-chip:hover {
  border-color: #00A3FF;
  color: #e2e8f0;
}

.formula-chip-active {
  background: #00A3FF22;
  border-color: #00A3FF88;
  color: #7dd3fc;
}

.formula-chip-ok {
  border-color: #10b98133;
}

.formula-chip-ok:hover,
.formula-chip-ok.formula-chip-active {
  background: #10b98122;
  border-color: #10b98188;
  color: #6ee7b7;
}

.formula-chip-err {
  border-color: #ef444433;
}

.formula-chip-err:hover,
.formula-chip-err.formula-chip-active {
  background: #ef444422;
  border-color: #ef444488;
  color: #fca5a5;
}

.formula-chip-count {
  background: #0f172a;
  border-radius: 10px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
}

.formula-chip .metric-check {
  display: none;
}

.formula-chip.formula-chip-active .metric-check {
  display: inline-flex;
}

/* Badge pequeño en la fila del SKU */
.formula-sku-badge {
  font-size: 10px;
  padding: 1px 5px;
  margin-left: 4px;
  vertical-align: middle;
}

/* ── Maestro de productos terminados: tabla columnar (SKU + fórmula) ── */
/* Contenedor: apila pager superior · tabla · pager inferior. Sin scroll interno:
   la tabla se expande a lo alto y los pagers quedan por fuera de la tabla. */
.formula-maestro-resultado {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Wrap solo de la tabla: crece a lo alto sin scroll interno. overflow visible
   (la tabla está fijada al 100% de ancho, no puede desbordar horizontalmente),
   así el thead sticky se ancla al scroll de la página. */
.formula-maestro-wrap {
  max-height: none;
  overflow: visible;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.formula-maestro-table {
  table-layout: fixed;
  width: 100%;
}

.formula-maestro-table th,
.formula-maestro-table td {
  padding: 8px 10px;
  font-size: .8rem;
  vertical-align: middle;
  overflow-wrap: anywhere;
  white-space: normal;
}

.formula-maestro-table tbody tr:hover td {
  background: #1d2433;
}

/* Separador sutil al empezar cada SKU (agrupación visual en tabla plana) */
.formula-row-skustart td {
  border-top: 2px solid #2a3242;
}

.formula-col-code {
  white-space: nowrap;
}

.formula-code-chip {
  display: inline-block;
  font-size: .74rem;
  font-weight: 600;
  color: #cbd5e1;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 1px 6px;
}

.formula-cell-desc {
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.formula-cell-medida {
  color: var(--muted);
  font-size: .77rem;
  white-space: nowrap;
}

/* Columna Versión: puede combinar dos versiones ("En línea / Casillero"), así que permite wrap */
.formula-cell-version {
  color: var(--muted);
  font-size: .77rem;
  line-height: 1.25;
}

.formula-col-center {
  text-align: center;
}

.formula-muted {
  color: var(--muted);
  font-style: italic;
  font-weight: 500;
}

/* Columna de acción (botón Ojo) */
.formula-col-action {
  text-align: center;
  white-space: nowrap;
}

.formula-eye-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s, color .15s;
}

.formula-eye-btn:hover {
  border-color: #00A3FF;
  color: #7dd3fc;
  background: #00A3FF14;
}

.orders-filters {
  gap: 12px;
  align-items: flex-end;
}

.cola-search-field {
  min-width: 440px;
}

.filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.clear-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #111621;
  color: var(--text);
  font-size: .9rem;
  font-weight: 600;
}

.clear-link:hover {
  border-color: #3a4863;
  background: #171f2d;
}

.orders-metrics {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Divisor entre dos sets de métricas-filtro en la misma línea */
.metrics-divider {
  width: 1px;
  align-self: stretch;
  min-height: 20px;
  background: var(--border);
  margin: 0 4px;
}

.metric-filter {
  cursor: pointer;
  border-width: 1px;
  transition: transform .14s ease, filter .14s ease;
}

.metric-filter:hover {
  transform: translateY(-1px);
  filter: brightness(1.07);
}

.metric-filter.active {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 58%, transparent);
}

.metric-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  margin-right: 6px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, currentColor 55%, transparent);
  line-height: 1;
}

.metric-check svg {
  width: 12px;
  height: 12px;
}

.metric-check svg path {
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.orders-table th,
.orders-table td {
  font-size: .83rem;
}

.orders-table {
  table-layout: auto;
  min-width: 0;
  font-family: "Plus Jakarta Sans", "Space Grotesk", "Segoe UI", sans-serif;
}

.config-group-row td {
  background: #0f1e32;
  border-top: 1px solid #294768;
  border-bottom: 1px solid #203a58;
  padding-top: 8px;
  padding-bottom: 8px;
}

.orders-table .col-date,
.orders-table .col-nro,
.orders-table .col-cant,
.orders-table .col-tipo {
  white-space: nowrap;
}

.orders-table .col-date {
  min-width: 90px;
}

.orders-table .col-nro {
  min-width: 110px;
}

.orders-table .col-provider {
  min-width: 120px;
}

.orders-table .col-article {
  min-width: 130px;
}

.orders-table .col-medida {
  min-width: 60px;
  text-align: center;
}

.orders-table .col-grado {
  min-width: 50px;
  text-align: center;
}

.orders-table .col-cosecha {
  min-width: 60px;
  text-align: center;
}

.orders-table .col-tipo {
  min-width: 80px;
}

.orders-table .col-cant {
  min-width: 60px;
  text-align: center;
}

.orders-table .col-actions {
  width: auto;
  min-width: 100px;
  text-align: right;
  white-space: nowrap;
}

.truncate-cell {
  max-width: none;
  overflow-wrap: anywhere;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid transparent;
}

.action-group {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}

.action-btn svg {
  width: 16px;
  height: 16px;
}

.action-btn svg path,
.action-btn svg circle {
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.action-preview {
  color: #9cc9ff;
  background: #233d60;
  border-color: #34557f;
}

.action-download {
  color: #6ee7b7;
  background: #1f4a3f;
  border-color: #2f6b5c;
}

.orders-pagination {
  justify-content: space-between;
  padding-top: 8px;
}

.orders-pagination-top {
  margin-top: 8px;
  margin-bottom: 8px;
}

.pdf-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 999;
}

.pdf-modal.show {
  display: block;
}

.pdf-modal-backdrop {
  position: absolute;
  inset: 0;
  background: #00000099;
  opacity: 0;
}

.pdf-modal-dialog {
  position: absolute;
  inset: 4vh 5vw;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, #161b27 0%, #101521 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
}

.preview-modal-dialog {
  inset: auto;
  width: min(1100px, 94vw);
  height: min(88vh, 900px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.pdf-modal.show .pdf-modal-backdrop {
  animation: modal-backdrop-in .2s ease forwards;
}

.pdf-modal.closing .pdf-modal-backdrop {
  animation: modal-backdrop-out .2s ease forwards;
}

.pdf-modal.show .pdf-modal-dialog {
  animation: modal-dialog-in .2s ease forwards;
}

.pdf-modal.closing .pdf-modal-dialog {
  animation: modal-dialog-out .2s ease forwards;
}

.pdf-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.pdf-modal-header h3 {
  margin: 0;
  font-size: 1rem;
}

.pdf-modal-body {
  flex: 1;
  min-height: 0;
  padding: 10px;
  background: #0b1220;
}

#pdf-preview-frame,
#pdf-artes-frame {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  background: #ffffff;
  border-radius: 10px;
}

.pdf-close-btn {
  height: 34px;
  padding: 0 12px;
}

@keyframes modal-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modal-backdrop-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes modal-dialog-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modal-dialog-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

.arte-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.upload-inline-form {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.upload-input {
  height: 30px;
  width: 170px;
  font-size: .75rem;
  padding: 0 6px;
}

.action-upload {
  color: #f7d491;
  background: #5a4622;
  border-color: #7a5e2c;
}

.upload-modal-dialog {
  inset: auto;
  width: min(560px, 92vw);
  max-height: min(88vh, 560px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.upload-modal-body {
  padding: 18px 18px 16px;
}

.upload-modal-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.upload-articulo {
  margin: 2px 0 10px;
  font-size: 1.02rem;
}

.upload-input-modal {
  width: 100%;
  height: 42px;
}

.upload-hidden-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.upload-file-hint {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
}

.modal-icon-close {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #111824;
  color: var(--muted);
  font-size: 1rem;
  padding: 0;
}

.modal-icon-close:hover {
  color: var(--text);
  border-color: #3a4863;
  background: #182132;
}

.upload-panel {
  border: 1px solid #2a3550;
  border-radius: 12px;
  background: linear-gradient(170deg, #131d30 0%, #111827 100%);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.upload-dropzone {
  min-height: 136px;
  border: 1px solid #354562;
  border-radius: 10px;
  background: #141b29;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  color: #b8cbe8;
  cursor: pointer;
  text-align: center;
}

.upload-dropzone svg {
  width: 30px;
  height: 30px;
  color: #8a9cb9;
}

.upload-dropzone svg path {
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.upload-dropzone span {
  font-size: 1rem;
}

.upload-dropzone:hover,
.upload-dropzone:focus-visible {
  border-color: #4f6990;
  background: #182336;
  outline: none;
}

.upload-dropzone.is-selected {
  border-color: #2f7fc8;
  background: #132841;
}

.upload-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.inline-action-form {
  display: inline-flex;
}

.action-delete {
  color: #ffc0c0;
  background: #582029;
  border-color: #84404a;
}

@media (max-width: 61.25rem) {
  .app-shell { display: block; }
  .sidebar {
    position: static;
    width: 100%;
    bottom: auto;
    height: auto;
    max-height: none;
  }
  .main { margin-left: 0; width: 100%; }
  .content { padding: 1.125rem; }
  .dashboard-page { margin: -18px -18px -20px; }
  .dash-topbar {
    height: auto;
    padding: .625rem .875rem;
    gap: .625rem;
    flex-wrap: wrap;
  }
  .footer-with-sidebar {
    padding-inline-start: 1rem;
  }
  .dashboard-content {
    padding: 14px;
  }
  .status-grid {
    grid-template-columns: 1fr;
  }
  .config-head-actions {
    width: 100%;
    justify-content: space-between;
  }
  .config-checkbox-grid {
    grid-template-columns: 1fr;
  }
  .status-pill {
    justify-self: start;
  }
  .filter-actions {
    width: 100%;
  }

  .cola-search-field {
    min-width: 100%;
  }

  .clear-link,
  .filter-actions button {
    flex: 1;
  }
  .orders-pagination {
    justify-content: center;
  }
  .toast-stack {
    left: 12px;
    right: 12px;
    width: auto;
    top: 12px;
  }
  .upload-actions {
    justify-content: stretch;
  }
  .upload-actions button {
    flex: 1;
  }
  .dash-hero {
    flex-direction: column;
    align-items: flex-start;
  }
  .dash-layout {
    grid-template-columns: 1fr;
  }
  .quick-panel {
    position: static;
  }
}

/* ── Botón trigger del modal Agregar ── */
.agregar-btn-trigger {
  background: #00A3FF22;
  border: 1px solid #00A3FF66;
  border-radius: 8px;
  color: #7dd3fc;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.agregar-btn-trigger:hover {
  background: #00A3FF33;
  border-color: #00A3FFaa;
  color: #bae6fd;
}

/* ── Modal backdrop ── */
.agregar-backdrop {
  position: fixed;
  inset: 0;
  background: #00000088;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(2px);
}

/* ── Dialog ── */
.agregar-dialog {
  background: linear-gradient(180deg, #1a1f2b 0%, #111724 100%);
  border: 1px solid #2a3142;
  border-radius: 16px;
  width: min(1160px, 96%);
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px #00000066;
}

.agregar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px 14px;
  border-bottom: 1px solid #2a3142;
  flex-shrink: 0;
}

.agregar-title {
  margin: 0;
  font-size: 1rem;
  color: #dcecff;
}

.agregar-close {
  background: none;
  border: none;
  color: #64748b;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color 0.15s;
}
.agregar-close:hover { color: #e2e8f0; }

/* ── Body scrollable ── */
.agregar-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
}

/* ── Variante inline (pestaña "Nuevo producto", sin modal) ── */
/* Sin tarjeta de fondo: se quita borde, gradiente, radio y alto fijo del panel. */
.agregar-inline {
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  height: auto;
  gap: 0;
}
.agregar-inline .agregar-body {
  overflow-y: visible;
  flex: none;
  padding: 4px 0 0;
}

/* ── Tipografía y espaciados de la pestaña Nuevo producto ── */
/* Labels más legibles y campos con más aire (scoped para no tocar los forms de precios). */
.agregar-inline .agregar-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #cbd5e1;
  margin-bottom: 3px;
}
.agregar-inline .agregar-field { gap: 7px; }
.agregar-inline .agregar-input,
.agregar-inline .agregar-select {
  font-size: 0.875rem;
  padding: 9px 12px;
}
.agregar-inline .agregar-grid,
.agregar-inline .agregar-grid-3col { gap: 18px 20px; }
.agregar-inline .agregar-seccion {
  padding: 20px 22px;
  margin-top: 18px;
}
.agregar-inline .agregar-seccion-title {
  font-size: 0.9rem;
  margin-bottom: 18px;
}
.agregar-inline .agregar-collapse-summary { font-size: 0.9rem; }
/* Título del panel y chips de tipo, al estándar de las otras pantallas */
.agregar-inline .agregar-title { font-size: 1.05rem; font-weight: 700; }
.agregar-inline .agregar-chip { font-size: 0.78rem; padding: 7px 16px; }
.agregar-inline .chip-toggle span { font-size: 0.8rem; }
.agregar-inline .chips-count { font-size: 0.72rem; }
.agregar-inline .lov-lista-item { font-size: 0.82rem; }

/* ── Chips Clasificador ── */
.agregar-chips {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.agregar-chip {
  padding: 6px 14px;
  border-radius: 999px;
  background: #1e293b;
  border: 1px solid #334155;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.agregar-chip:hover {
  background: #334155;
  color: #f8fafc;
}
.agregar-chip.active {
  background: color-mix(in srgb, #00A3FF 20%, transparent);
  border-color: #00A3FF;
  color: #38bdf8;
}

/* ── Secciones con separador ── */
.agregar-seccion {
  border: 1px solid #1e293b;
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 16px;
}
.agregar-seccion:first-child { margin-top: 16px; }

.agregar-seccion-title {
  margin: 0 0 12px;
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #00A3FF;
}

/* ── Sección colapsable (Contable e impuestos) ── */
.agregar-collapse {
  border: 1px solid #1e293b;
  border-radius: 10px;
  margin-top: 16px;
  /* overflow visible: si no, recorta los popups (LOVs buscables) de los selects internos */
  overflow: visible;
}
/* Mantener el redondeo del summary aunque el contenedor sea overflow:visible */
.agregar-collapse-summary { border-radius: 9px 9px 0 0; }
.agregar-collapse:not([open]) .agregar-collapse-summary { border-radius: 9px; }
.agregar-collapse-summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 16px;
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #00A3FF;
  display: flex;
  align-items: center;
  gap: 10px;
}
.agregar-collapse-summary::-webkit-details-marker { display: none; }
.agregar-collapse-summary::before {
  content: "▸";
  color: #64748b;
  transition: transform 0.15s ease;
}
.agregar-collapse[open] .agregar-collapse-summary::before { transform: rotate(90deg); }
.agregar-collapse-hint {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #475569;
}
.agregar-collapse-body { padding: 0 16px 14px; }

/* ── Campo con checkboxes apilados (flags de stock) ── */
.agregar-field-checks {
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
}

/* ── Grid de campos ── */
.agregar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}

.agregar-grid-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 16px;
}

.agregar-field { display: flex; flex-direction: column; gap: 4px; }
.agregar-field-full { grid-column: 1 / -1; }

.agregar-label {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 500;
}
.agregar-req { color: #f87171; }
.agregar-hint { color: #475569; font-weight: 400; }

.agregar-input,
.agregar-select {
  background: #0f172a;
  border: 1px solid #2a3142;
  border-radius: 6px;
  color: #e2e8f0;
  font-size: 11px;
  padding: 6px 10px;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
}
.agregar-input:focus,
.agregar-select:focus { border-color: #00A3FF; }
.agregar-input[readonly] { color: #64748b; cursor: default; }
.agregar-input-codigo { color: #7dd3fc !important; font-weight: 600; }
.agregar-input-error { border-color: #ef4444 !important; }

.agregar-select option { background: #0f172a; }

/* ── Popup LOV Multiple (details/summary) ── */
details.lov-multi {
  position: relative;
  width: 100%;
}
details.lov-multi summary {
  background: #0f172a;
  border: 1px solid #2a3142;
  border-radius: 6px;
  color: #94a3b8;
  font-size: 12px;
  padding: 6px 10px;
  width: 100%;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  min-height: 30px;
}
details.lov-multi summary::-webkit-details-marker {
  display: none;
}
details.lov-multi summary::after {
  content: '▼';
  font-size: 9px;
  color: #64748b;
}
details[open].lov-multi summary {
  border-color: #00A3FF;
}
details.lov-multi .lov-multi-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  max-height: 180px;
  overflow-y: auto;
  background: #0f172a;
  border: 1px solid #2a3142;
  border-radius: 6px;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lov-multi-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 10px;
  color: #cbd5e1;
  transition: background 0.1s;
}

/* ── Lista LOV visible (reemplaza details/summary) ── */
.lov-lista {
  max-height: 110px;
  overflow-y: auto;
  background: #0f172a;
  border: 1px solid #2a3142;
  border-radius: 6px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.lov-lista-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 10px;
  color: #cbd5e1;
  transition: background 0.1s;
  user-select: none;
}
.lov-lista-item:has(input:checked) {
  background: color-mix(in srgb, #00A3FF 15%, transparent);
  color: #7dd3fc;
  font-weight: 500;
}
.lov-lista-item:hover { background: #1e293b; }
.lov-lista-item input[type="checkbox"] {
  accent-color: #00A3FF;
  cursor: pointer;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.lov-multi-item:hover {
  background: #1e293b;
  color: #f8fafc;
}
.lov-multi-item input[type="checkbox"] {
  accent-color: #00A3FF;
}

/* ── Chips toggleables (Medidas y Periodos en Nuevo producto) ── */
.chips-field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.chips-count {
  font-size: 10px;
  font-weight: 600;
  color: #38bdf8;
  margin-left: 6px;
}
.chips-acciones { display: flex; gap: 6px; flex-shrink: 0; }
.chips-accion {
  background: none;
  border: 1px solid #2a3142;
  border-radius: 6px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}
.chips-accion:hover { border-color: #00A3FF; color: #38bdf8; }

.chips-grupo {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-height: 148px;
  overflow-y: auto;
  padding: 2px;
}
.chip-toggle {
  display: inline-flex;
  cursor: pointer;
  user-select: none;
}
/* El checkbox real queda oculto; el chip visible es el <span>. */
.chip-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.chip-toggle span {
  display: inline-block;
  padding: 6px 13px;
  border-radius: 999px;
  background: #0f172a;
  border: 1px solid #2a3142;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.chip-toggle:hover span { border-color: #475569; color: #e2e8f0; }
.chip-toggle input:checked + span {
  background: color-mix(in srgb, #00A3FF 18%, transparent);
  border-color: #00A3FF;
  color: #7dd3fc;
}
.chip-toggle input:focus-visible + span {
  outline: 2px solid #00A3FF;
  outline-offset: 1px;
}

/* ── Stepper numérico (componente global Mesh) ──
   Uso: <div class="stepper" data-step="0.1" data-min="0" data-max="100">
          <div class="stepper-input-wrap">
            <input type="number" class="stepper-input" ... />
            <span class="stepper-unit">°</span>   (opcional)
          </div>
          <div class="stepper-botones">
            <button type="button" class="stepper-btn stepper-btn-up"   data-dir="1">+</button>
            <button type="button" class="stepper-btn stepper-btn-down" data-dir="-1">−</button>
          </div>
        </div>
   El cableado es global (base.html, delegación de eventos): no requiere onclick. */
.stepper {
  display: flex;
  align-items: stretch;
  background: #0f172a;
  border: 1px solid #2a3142;
  border-radius: 6px;               /* mismo radio que .agregar-input / .agregar-select */
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.stepper:focus-within {
  border-color: #00A3FF;
  box-shadow: 0 0 0 2px color-mix(in srgb, #00A3FF 22%, transparent);
}
.stepper-input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
}
.stepper-input {
  width: 100%;
  border: none;
  background: transparent;
  color: #e2e8f0;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
  padding: 10px 28px 10px 13px;     /* pad-right deja lugar al sufijo de unidad */
  outline: none;
  -moz-appearance: textfield;
  appearance: textfield;
}
/* Ocultar las flechas nativas del input number (usamos las nuestras) */
.stepper-input::-webkit-outer-spin-button,
.stepper-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.stepper-input::placeholder { color: #475569; font-weight: 500; }
.stepper-unit {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  font-size: 0.85rem;
  font-weight: 600;
  pointer-events: none;
}
/* Columna de botones +/− apilados, a la derecha del input */
.stepper-botones {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 38px;
  border-left: 1px solid #2a3142;
}
.stepper-btn {
  flex: 1;
  border: none;
  background: #1e293b;
  color: #94a3b8;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.stepper-btn-down { border-top: 1px solid #2a3142; }
.stepper-btn:hover {
  background: color-mix(in srgb, #00A3FF 22%, transparent);
  color: #38bdf8;
}
.stepper-btn:active {
  background: color-mix(in srgb, #00A3FF 38%, transparent);
  color: #7dd3fc;
}

/* ── Datepicker (componente global Mesh) ──
   Reemplaza a <input type="date"> y <input type="datetime-local"> nativos en TODA la
   app. No se escribe a mano: se usa la macro `partials/datepicker.html`.
   - Se tipea (con máscara dd/mm/aaaa [hh:mm]) o se elige del calendario.
   - Muestra dd/mm/aaaa y envía en un hidden el formato que espera el backend: ISO
     (YYYY-MM-DD / YYYY-MM-DDTHH:MM) o dd/mm/aaaa, según `data-formato`.
   - El calendario es UNO SOLO para toda la página, colgado del <body> y con
     position: fixed. Así no lo recorta un modal con overflow ni una tabla con
     scroll, y no lo descoloca el `transform` del diálogo de abastecimiento.
   - Ancho fijo: una fecha no necesita toda la fila. Antes, dentro de `.filters-bar`
     (grid auto-fit) un único filtro de fecha se estiraba a todo el ancho.
   Cableado global por delegación en base.html. */
.datepicker {
  position: relative;
  display: flex;
  width: 9.5rem;
  max-width: 100%;
  flex: none;
}
.datepicker.dp-con-hora { width: 12.5rem; }
.datepicker .datepicker-input {
  width: 100%;
  padding-right: 36px;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}
.datepicker .datepicker-input.is-invalid,
.datepicker .datepicker-input.is-invalid:hover,
.datepicker .datepicker-input.is-invalid:focus {
  border-color: #ef4444;
  box-shadow: 0 0 0 1px #ef444455;
}
.datepicker-toggle {
  position: absolute;
  right: 1px; top: 1px; bottom: 1px;
  width: 38px;
  border: none;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 6px 6px 0;
  transition: color 0.15s, background 0.15s;
}
.datepicker-toggle svg { width: 16px; height: 16px; }
.datepicker-toggle:hover { color: #38bdf8; background: color-mix(in srgb, #00A3FF 12%, transparent); }
.datepicker.is-open .datepicker-toggle { color: #38bdf8; }

/* Posición (top/left) la calcula el JS al abrir. z-index por encima de los modales
   (999), del sidebar (1100) y del overlay de acceso (1500); por debajo de los toasts. */
.datepicker-popup {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2100;
  width: 268px;
  background: #0f172a;
  border: 1px solid #2a3142;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  padding: 12px;
  user-select: none;
}
.datepicker-popup[hidden] { display: none; }
.dp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 10px;
}
.dp-nav {
  width: 28px; height: 28px;
  flex-shrink: 0;
  border: 1px solid #2a3142;
  border-radius: 6px;
  background: #1e293b;
  color: #94a3b8;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1;
  transition: border-color 0.12s, color 0.12s;
}
.dp-nav:hover { border-color: #00A3FF; color: #38bdf8; }
.dp-title { font-size: 0.85rem; font-weight: 600; color: #dcecff; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-dow {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
  text-align: center;
  padding: 4px 0 6px;
  font-weight: 700;
}
.dp-day {
  aspect-ratio: 1;
  border: none;
  background: transparent;
  color: #cbd5e1;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.8rem;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.1s, color 0.1s;
}
.dp-day:hover:not(:disabled) { background: #1e293b; color: #f8fafc; }
.dp-day.is-today { box-shadow: inset 0 0 0 1px #475569; }
.dp-day.is-selected { background: #00A3FF; color: #06121f; font-weight: 700; }
.dp-day:disabled { color: #334155; cursor: not-allowed; }
.dp-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #1e293b;
}
.dp-action {
  background: none;
  border: none;
  color: #38bdf8;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
}
.dp-action:hover { text-decoration: underline; }
.dp-day:focus-visible,
.dp-nav:focus-visible,
.dp-action:focus-visible { outline: 2px solid #38bdf8; outline-offset: 1px; }

/* Los botones del calendario no heredan el botón global de Mesh. La regla
   `input, select, button { height: 40px }` más el `aspect-ratio: 1` del día forzaban
   cada celda a 40px de ANCHO en vez de 1/7 del calendario, y la columna del domingo
   quedaba afuera. Tampoco el padding ni el salto del hover (translateY). */
.datepicker-popup button {
  min-width: 0;
  transform: none;
  filter: none;
}
.datepicker-popup .dp-day { height: auto; padding: 0; }
.datepicker-popup .dp-nav { padding: 0; }
.datepicker-popup .dp-action { height: auto; }
.datepicker-popup button:hover { transform: none; filter: none; }

/* Fila de hora: sólo en los datepicker con hora. */
.dp-hora {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #1e293b;
}
.dp-hora-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
  font-weight: 700;
  margin-right: auto;
}
.dp-hora-input {
  width: 2.6rem;
  height: 28px;
  box-sizing: border-box;
  text-align: center;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 6px;
  color: #e2e8f0;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  outline: none;
}
.dp-hora-input:focus { border-color: #00A3FF; }
.dp-hora-sep { color: #64748b; font-weight: 700; }
.agregar-check-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  color: #94a3b8;
  transition: background 0.1s;
}
.agregar-check-item:hover { background: #1e293b; color: #e2e8f0; }
.agregar-check-item input[type="checkbox"] { accent-color: #00A3FF; }

/* ── Footer ── */
.agregar-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px 18px;
  border-top: 1px solid #2a3142;
  flex-shrink: 0;
}

.agregar-btn-cancel {
  background: none;
  border: 1px solid #334155;
  border-radius: 8px;
  color: #94a3b8;
  font-size: .9rem;
  padding: 10px 22px;
  cursor: pointer;
  transition: all 0.15s;
}
.agregar-btn-cancel:hover { border-color: #64748b; color: #e2e8f0; }

.agregar-btn-save {
  background: #00A3FF;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  padding: 10px 22px;
  cursor: pointer;
  transition: background 0.15s;
}
.agregar-btn-save:hover { background: #0090e0; }

/* ── Layout superior del modal: 2 columnas + fila inferior ── */
.agregar-top-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}

.agregar-col-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.agregar-col-title {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00A3FF;
}

.agregar-bottom-row {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #1e293b;
}

.agregar-codigo-vigencia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ── Parámetros de Ítems ── */
/* ============================================================
   Parámetros de Ítems — panel rediseñado (mosaico balanceado)
   Reutiliza tokens globales de Mesh (--primary, --card, --bg…),
   y los del tema Mesh.
   ============================================================ */
.pi-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 0 3rem;
}

/* Los paneles de los dropdowns (select-con-búsqueda) comparten z-index (900)
   con el footer; como el footer va después en el DOM, tapaba los desplegables
   que se abren cerca del final. Los elevamos por encima del footer (900) pero
   por debajo de sidebar (1100) y topbar (1200). */
.pi-page .lov.is-open { z-index: 1000; }

/* El panel cerrado sigue siendo position:absolute y, al estar debajo de su
   trigger, extendía el scrollHeight del documento por debajo del footer
   (generaba un gran espacio vacío al final). Al cerrarlo lo sacamos del layout
   con display:none; cuando se abre (.show) vuelve a mostrarse. */

/* ── header ── */
.pi-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.pi-title {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  color: var(--primary);
  font-size: 1.95rem;
  font-weight: 700;
  letter-spacing: .01em;
}

/* ── tabs segmentadas ── */
.pi-tabs {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  margin: 18px 0 22px;
  background: #0f131d;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.pi-tab {
  height: 34px;
  padding: 0 16px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.pi-tab:hover { background: #19202c; color: #d6deea; transform: none; filter: none; }
.pi-tab.active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 80%, #fff 20%), var(--primary));
  color: #04121f;
  font-weight: 700;
}

/* ── grid ── */
.pi-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  align-items: stretch;
}
.pi-col-2 { grid-column: span 2; }
.pi-col-3 { grid-column: span 3; }

/* ── tarjeta de sección ── */
.pi-section {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--card), var(--card-2));
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
}
.pi-sec-head { display: flex; align-items: center; gap: 11px; }
.pi-sec-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--primary) 16%, #0d1724);
  border: 1px solid color-mix(in srgb, var(--primary) 42%, var(--border));
  color: color-mix(in srgb, var(--primary) 68%, #fff 32%);
}
.pi-sec-icon svg { width: 19px; height: 19px; }
.pi-sec-title {
  font-family: "Space Grotesk", sans-serif;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: #eef6ff;
}

.pi-fields { display: flex; flex-direction: column; gap: 13px; }
.pi-fields-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 16px; }
.pi-span-2 { grid-column: span 2; }

/* ── campo ── */
/* min-width:0 permite que los controles encojan dentro del grid/flex y no
   desborden la tarjeta cuando el texto de una opción es largo. */
.pi-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pi-label {
  font-size: .71rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}

/* Dentro del panel reutilizamos el select-con-búsqueda y el stepper globales,
   pero los ajustamos al diseño del mosaico. */
.pi-field .lov { width: 100%; min-width: 0; }

/* steppers: +/- uno al lado del otro (horizontal), con acento azul del diseño */
.pi-field .stepper { border-radius: 10px; background: #0f131d; }
.pi-field .stepper-botones {
  flex-direction: row-reverse;   /* orden DOM [+,−] → se ve [−][+] */
  width: auto;
  border-left: 1px solid var(--border);
}
.pi-field .stepper-btn {
  flex: 0 0 38px;
  width: 38px;
  background: #141a26;
  color: #5fbcff;
  font-size: 1.15rem;
}
.pi-field .stepper-btn:hover { background: #1a2333; color: #8fd0ff; transform: none; }
.pi-field .stepper-btn-down { border-top: none; }
.pi-field .stepper-btn-up { border-left: 1px solid var(--border); }

/* ── toggle binario (Sí / No) ── */
.pi-toggle {
  height: 40px;
  display: flex;
  padding: 4px;
  gap: 4px;
  width: 100%;
  background: #0f131d;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.pi-toggle-opt {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .83rem;
  font-weight: 600;
  line-height: 1;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}
/* neutralizamos el hover global de <button> (translateY) para que no salte */
.pi-toggle-opt:hover { color: #d6deea; transform: none; filter: none; }
.pi-toggle-opt.is-on { background: #20293a; color: #dff0ff; border: 1px solid #2f3b52; }

/* ── barra de acciones ── */
.pi-actionbar {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.pi-btn {
  height: 40px;
  border-radius: 10px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s;
}
.pi-btn-primary {
  padding: 0 22px;
  border: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 80%, #fff 20%), var(--primary));
  color: #04121f;
}
.pi-btn-primary:hover { filter: brightness(1.05); }

@media (max-width: 900px) {
  .pi-grid { grid-template-columns: 1fr; }
  .pi-col-2, .pi-col-3 { grid-column: span 1; }
  .pi-fields-2 { grid-template-columns: 1fr; }
  .pi-span-2 { grid-column: span 1; }
}

/* ── Clases genéricas para layout de búsqueda y filtros ── */

.search-filter-container {
  margin-bottom: 12px;
}

.search-input-bar {
  margin-bottom: 12px;
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.search-input-bar input {
  flex: 1;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #0f131d;
  color: var(--text);
  padding: 0 12px;
  font-size: .84rem;
}

.search-input-bar input::placeholder {
  color: var(--muted);
}

.search-input-bar input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
}

.search-btn-primary {
  flex-shrink: 0;
  height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--primary);
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--primary);
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.search-btn-primary:hover {
  background: color-mix(in srgb, var(--primary) 25%, transparent);
  border-color: var(--primary);
}

.search-btn-primary:active {
  background: color-mix(in srgb, var(--primary) 35%, transparent);
}

.clear-btn-secondary {
  flex-shrink: 0;
  height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid #475569;
  background: transparent;
  color: #94a3b8;
  font-size: .84rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.clear-btn-secondary:hover {
  background: #1e293b;
  border-color: #64748b;
  color: #cbd5e1;
}

.filters-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  padding: 0;
  min-width: 0;
}

.filter-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.filter-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #64748b;
}

.filter-select {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 6px;
  color: #e2e8f0;
  font-size: 11px;
  padding: 5px 6px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.filter-select:focus,
.filter-select:hover {
  border-color: #00A3FF;
}

.filter-select option {
  background: #1e293b;
  color: #e2e8f0;
}

/* Maestro de artes: el filtro "Tipo de Insumo" usa el mismo ancho que su
   dropdown desplegable (el panel del searchable-select), en lugar de estirarse
   a todo el ancho de la fila. Acotado a #filtros-artes para no afectar otras
   vistas. */
#filtros-artes .filters-bar {
  grid-template-columns: max-content;
}

#filtros-artes .filter-item {
  width: 360px;
  max-width: 92vw;
}

#filtros-artes .filter-label {
  font-size: 12px;
}

/* El panel desplegado toma exactamente el ancho del trigger (filtro cerrado). */

/* Consulta de artes: mismo ajuste que el maestro de artes. */
#filtros-consulta .filters-bar {
  grid-template-columns: max-content;
}

#filtros-consulta .filter-item {
  width: 360px;
  max-width: 92vw;
}

#filtros-consulta .filter-label {
  font-size: 12px;
}

/* Órdenes de compra: mismo ajuste. Tiene hasta dos filtros (Proveedor y Tipo
   de Insumo), por eso usa auto-fit para mantenerlos en fila a 360px cada uno. */
#filtros-ordenes .filters-bar {
  grid-template-columns: repeat(auto-fit, 360px);
}

#filtros-ordenes .filter-item {
  width: 360px;
  max-width: 92vw;
}

#filtros-ordenes .filter-label {
  font-size: 12px;
}

/* Permisos de usuario: mismo ajuste que el maestro de artes. */
#filtros-permisos .filters-bar {
  grid-template-columns: max-content;
}

#filtros-permisos .filter-item {
  width: 360px;
  max-width: 92vw;
}

#filtros-permisos .filter-label {
  font-size: 12px;
}

/* Maestro de bottleshot: mismo ajuste que el maestro de artes (un solo filtro: Marca). */
#filtros-bottleshot .filters-bar {
  grid-template-columns: max-content;
}

#filtros-bottleshot .filter-item {
  width: 360px;
  max-width: 92vw;
}

#filtros-bottleshot .filter-label {
  font-size: 12px;
}

/* Consulta de bottleshot: mismo ajuste que la consulta de artes (un solo filtro: Tipo). */
#filtros-consulta-bottleshot .filters-bar {
  grid-template-columns: max-content;
}

#filtros-consulta-bottleshot .filter-item {
  width: 360px;
  max-width: 92vw;
}

#filtros-consulta-bottleshot .filter-label {
  font-size: 12px;
}

/* ─────────────────────────────────────────────────────────────────────────
   LOV compacto y buscable (componente reutilizable — ver partials/lov.html)
   Trigger 34px, panel flotante denso, código alineado a la izquierda.
   Colores por tokens de tema (--border/--text/--muted/--primary) + literales
   del handoff (#0F131D surface-input, #5F6B7E placeholder, #DFF0FF primary-ink,
   #1D2433 hover, gradiente #1A1F2B→#141925).
   ───────────────────────────────────────────────────────────────────────── */
@keyframes lov-fade-in { from { opacity: 0; } to { opacity: 1; } }

.lov {
  position: relative;
  width: 100%;
  font-family: "Plus Jakarta Sans", sans-serif;
}
.lov.is-open { z-index: 100; }

.lov-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  /* Mínimo y no fijo: con una línea mide 34px como siempre, y si la opción elegida no
     entra, el campo crece en vez de cortarla. Pedido del owner (2026-09-12): con el texto
     cortado no se sabe qué se eligió — el mismo artículo con medida UNIDAD y M3 se veía
     idéntico porque la medida va al final. */
  min-height: 34px;
  height: auto;
  padding: 5px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #0f131d;
  color: var(--text);
  font-family: inherit;
  font-size: 0.84rem;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.14s ease;
}
.lov.is-open .lov-trigger { border-color: #2a6db0; }
.lov-trigger[disabled] { opacity: 0.5; cursor: not-allowed; }

/* El dato completo, siempre: salto de línea en vez de puntos suspensivos. */
.lov-triggertext {
  flex: 1;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.lov-triggertext.lov-ph { color: #5f6b7e; }

.lov-caret {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 0.7rem;
  transition: transform 0.14s ease;
}
.lov.is-open .lov-caret { transform: rotate(180deg); }

.lov-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  /* En una columna angosta (los renglones de la orden) el panel del ancho del campo
     partía cada opción en muchas líneas. */
  min-width: min(300px, 90vw);
  z-index: 2;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(180deg, #1a1f2b 0%, #141925 100%);
  box-shadow: 0 20px 34px #00000080;
  padding: 4px;
  animation: lov-fade-in 0.12s ease-out;
}
.lov-panel[hidden] { display: none; }

.lov-search {
  width: 100%;
  box-sizing: border-box;
  height: 30px;
  margin-bottom: 4px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #0f131d;
  color: var(--text);
  padding: 0 10px;
  font-family: inherit;
  font-size: 0.8rem;
  outline: none;
}

.lov-list {
  max-height: 210px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.lov-opt {
  display: flex;
  /* baseline y no center: si la descripción ocupa dos líneas, el código queda a la altura
     de la primera. */
  align-items: baseline;
  gap: 8px;
  width: 100%;
  /* La regla global `button { height: 40px }` fijaba el alto: con la descripción en dos
     líneas, las opciones se encimaban. Y `flex-shrink: 0` porque `.lov-list` es una
     columna flex con `max-height`: sin eso, con muchas opciones se achican para entrar
     en el alto de la lista en vez de hacer scroll, y el texto se pisa. */
  height: auto;
  flex-shrink: 0;
  text-align: left;
  border: none;
  cursor: pointer;
  padding: 6px 9px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.82rem;
  background: transparent;
  color: var(--text);
}
.lov-opt:hover { background: #1d2433; }
.lov-opt.is-sel {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: #dff0ff;
}
.lov-opt[hidden] { display: none; }

.lov-code {
  flex-shrink: 0;
  min-width: 60px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  font-weight: 600;
}
.lov-opt.is-sel .lov-code { color: var(--primary); }

.lov-name {
  flex: 1;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

.lov-check {
  flex-shrink: 0;
  color: var(--primary);
  font-size: 0.8rem;
  visibility: hidden;
}
.lov-opt.is-sel .lov-check { visibility: visible; }

.lov-empty {
  padding: 14px 10px;
  text-align: center;
  color: var(--muted);
  font-style: italic;
  font-size: 0.8rem;
}
.lov-empty[hidden] { display: none; }

/* El <select> nativo cuando el LOV lo genera el enhancer global (base.html):
   invisible, pero presente en el DOM. Sigue enviando el valor con el form y
   sigue siendo enfocable, que es lo que necesita la validación nativa de los
   campos required (con display:none el navegador no puede enfocarlo y falla). */
.lov-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Apertura hacia arriba (la decide el controlador cuando no hay lugar abajo). */
.lov-panel.lov-up {
  top: auto;
  bottom: calc(100% + 4px);
}

/* Panel ancho: para LOVs de trigger angosto con descripciones largas
   (data-panel-width="wide", ej. las cuentas contables de parámetros). */
.lov-panel-wide {
  right: auto;
  width: max(100%, 420px);
  max-width: min(92vw, 560px);
}

.lov.is-disabled .lov-trigger { opacity: 0.5; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════════════════
   Nuevo producto (rediseño): acordeón global + layout 2 columnas + preview
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Acordeón (componente global) ──
   Uso: <details class="acordeon" open>
          <summary class="acordeon-summary">Título</summary>
          <div class="acordeon-body"> ... </div>
        </details>
   Nativo: sin JS, sobrevive a los swaps de HTMX. Caret ▸ rota con [open]. */
.acordeon {
  border: 1px solid #2a3142;
  border-radius: 12px;
  background: linear-gradient(180deg, #161d2b, #111724);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  /* visible: si no, recorta los popups de los LOV buscables internos */
  overflow: visible;
}
.acordeon + .acordeon { margin-top: 12px; }
.acordeon-summary {
  cursor: pointer;
  list-style: none;
  padding: 15px 18px;
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #00A3FF;
}
.acordeon-summary::-webkit-details-marker { display: none; }
.acordeon-summary::before {
  content: "▸";
  color: #64748b;
  font-size: 0.8rem;
  transition: transform 0.16s ease;
}
.acordeon[open] .acordeon-summary::before { transform: rotate(90deg); }
.acordeon-body { padding: 0 18px 18px; }

/* ── Layout de 2 columnas de "Nuevo producto" ── */
.np-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
  gap: 16px;
  align-items: start;
}
.np-grid .agregar-chips { grid-column: 1 / -1; margin-bottom: 0; }
.np-col-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
@media (max-width: 900px) {
  .np-grid { grid-template-columns: 1fr; }
}

/* ── Panel de vista previa (sticky) ── */
.np-preview {
  position: sticky;
  top: 14px;
  display: flex;
  flex-direction: column;
  border: 1px solid #2a3142;
  border-radius: 14px;
  background: linear-gradient(170deg, #141b28, #0e131e);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
@media (max-width: 900px) { .np-preview { position: static; } }

.np-preview-head {
  padding: 14px 16px 0;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #64748b;
}
.np-identity { display: flex; gap: 12px; align-items: center; padding: 12px 16px; }
.np-bottle {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 12px;
  background: radial-gradient(circle at 30% 30%, rgba(0, 163, 255, 0.35), rgba(0, 163, 255, 0.08));
  border: 1px solid #2a3142;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7dd3fc;
}
.np-name { font-size: 1rem; font-weight: 700; color: #f5f7fa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-name.is-empty { color: #64748b; font-style: italic; font-weight: 500; }
.np-code { font-size: 0.78rem; color: #38bdf8; font-variant-numeric: tabular-nums; margin-top: 2px; }

.np-badges { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; }
.np-badge {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid #2a3142;
  background: #131a26;
  color: #94a3b8;
}
.np-badge-tipo { border-color: #00A3FF; color: #7dd3fc; background: color-mix(in srgb, #00A3FF 15%, transparent); }
.np-badge-stock { border-color: #10B981; color: #6ee7b7; background: color-mix(in srgb, #10B981 15%, transparent); }

.np-divider { height: 1px; background: #2a3142; margin: 0 16px; }

.np-attrs { padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; }
.np-attr { display: flex; justify-content: space-between; gap: 12px; font-size: 0.78rem; }
.np-attr-k { color: #94a3b8; flex-shrink: 0; }
.np-attr-v { color: #f5f7fa; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-attr-v.is-empty { color: #64748b; }

.np-resumen { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.np-resumen-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.np-mini-chip {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid #2a3142;
  background: #131a26;
  color: #cbd5e1;
  font-variant-numeric: tabular-nums;
}
.np-empty-note { font-size: 0.78rem; color: #64748b; font-style: italic; }
.np-sku { font-size: 0.8rem; color: #cbd5e1; font-variant-numeric: tabular-nums; }
.np-sku strong { color: #7dd3fc; }

.np-foot {
  margin-top: auto;
  border-top: 1px solid #2a3142;
  background: #0e1421;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.np-progress-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 0.76rem; }
.np-progress-txt { color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-progress-txt.is-ready { color: #10B981; font-weight: 600; }
.np-progress-count { color: #94a3b8; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.np-progress-bar { height: 6px; border-radius: 999px; background: #1a2230; overflow: hidden; margin-top: 6px; }
.np-progress-fill { height: 100%; width: 0; background: #00A3FF; border-radius: 999px; transition: width 0.25s ease, background 0.25s ease; }
.np-progress-fill.is-ready { background: #10B981; }

.np-actions { display: flex; gap: 8px; }
.np-btn-cancel {
  flex: 1;
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid #2a3142;
  background: transparent;
  color: #94a3b8;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.np-btn-cancel:hover { border-color: #475569; color: #e2e8f0; }
.np-btn-save {
  flex: 2;
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid #00A3FF;
  background: #00A3FF;
  color: #04121f;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.np-btn-save:disabled { opacity: 0.5; cursor: not-allowed; }

/* ==================================================================
   Acceso Usuarios — tarjetas de módulo dentro del modal de edición.
   Un módulo por tarjeta: interruptor en la cabecera y sus opciones como
   casillas en grilla. Los tamaños siguen los controles ya usados en Mesh
   (inputs y botones de 36px, secundarios de 34px, radios de 10px).
   ================================================================== */

/* ---------- Acciones sobre el usuario, dentro del modal ---------- */

.acceso-detalle-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.acceso-btn-ghost,
.acceso-btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #131a26;
  color: #93a0b4;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
}

/* En el detalle el resto de los controles mide 40px (Descripción, Cancelar,
   Guardar): los tres botones de acción se alinean a esa altura. */
.acceso-detalle-acciones .acceso-btn-ghost,
.acceso-detalle-acciones .acceso-btn-danger {
  height: 40px;
  padding: 0 15px;
  font-size: .85rem;
}

.acceso-btn-ghost:hover { border-color: #3a4863; color: #c3ccda; }

.acceso-btn-danger {
  border-color: color-mix(in srgb, var(--bad) 33%, var(--border));
  background: color-mix(in srgb, var(--bad) 10%, transparent);
  color: #ef8080;
}

.acceso-btn-danger:hover {
  background: color-mix(in srgb, var(--bad) 18%, transparent);
}

.acceso-btn-primary {
  height: 36px;
  padding: 0 20px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 60%, var(--border));
  background: var(--primary);
  color: #04121f;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
}

.acceso-btn-primary:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ---------- Interruptor del módulo ---------- */

.acceso-switch-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}

.acceso-switch-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.acceso-switch {
  position: relative;
  flex-shrink: 0;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #1a2230;
  transition: background .16s, border-color .16s;
}

.acceso-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #5f6b7e;
  transition: left .16s, background .16s;
}

/* ---------- Tarjeta de módulo ---------- */

.acceso-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, #161d2b 0%, #111724 100%);
  box-shadow: 0 10px 30px #00000033;
  overflow: hidden;
}

.acceso-card-head {
  padding: 13px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.acceso-card-head .acceso-switch-label { flex: 1; min-width: 0; }

.acceso-card-title {
  flex: 1;
  min-width: 0;
  font-size: .94rem;
  font-weight: 700;
  color: #93a0b4;
}

.acceso-card-body {
  padding: 0 18px 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px;
  opacity: .4;
  transition: opacity .12s;
}

/* La casilla del módulo es hermana de la cabecera y del cuerpo, así que su
   estado se propaga con `~`. El cuerpo se atenúa mientras el módulo está
   apagado: sus opciones no llegan al menú hasta habilitarlo. */
.acceso-card-input:checked ~ .acceso-card-body { opacity: 1; }

.acceso-card-input:checked ~ .acceso-card-head .acceso-card-title { color: #fff; }

.acceso-card-input:checked ~ .acceso-card-head .acceso-switch {
  background: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 70%, #fff);
}

.acceso-card-input:checked ~ .acceso-card-head .acceso-switch-knob {
  left: 18px;
  background: #04121f;
}

.acceso-card-input:focus-visible ~ .acceso-card-head .acceso-switch {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ---------- Opción del menú ---------- */

.acceso-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #131a26;
  color: color-mix(in srgb, var(--text) 88%, var(--muted));
  font-size: .84rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: all .12s;
}

.acceso-opt-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.acceso-opt-input:checked + .acceso-opt {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: #fff;
}

.acceso-opt-input:focus-visible + .acceso-opt {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.acceso-check {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  border-radius: 6px;
  border: 1px solid #3a4863;
  background: #0f131d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
}

.acceso-opt-input:checked + .acceso-opt .acceso-check {
  border-color: var(--primary);
  background: var(--primary);
  color: #04121f;
}

.acceso-opt-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Opción o módulo que el rol del usuario no habilita: se muestra pero no se
   puede marcar. Se bloquea con pointer-events y no con [disabled], para que el
   checkbox siga viajando en el POST y guardar no pise el valor ya cargado. */
.acceso-opt.is-disabled {
  opacity: .42;
  cursor: not-allowed;
  pointer-events: none;
}

.acceso-card.is-disabled {
  opacity: .5;
}

.acceso-card.is-disabled .acceso-card-head {
  pointer-events: none;
}

/* ---------- Campos y modales chicos (nombre / contraseña) ---------- */

.acceso-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.acceso-field-label {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 500;
}

.acceso-input {
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #0f131d;
  color: var(--text);
  font-family: inherit;
  font-size: .85rem;
  outline: none;
}

.acceso-input:focus {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
}

.acceso-input::placeholder { color: #5f6b7e; }

/* Cerrar el modal desde la cabecera: hasta ahora solo se salía clickeando
   afuera o con Escape. La cabecera ya es flex con space-between. */
.acceso-modal-close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: #93a0b4;
  font-family: inherit;
  font-size: .9rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}

.acceso-modal-close:hover {
  border-color: #3a4863;
  background: #131a26;
  color: var(--text);
}

.acceso-modal-close:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.acceso-modal-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}

.acceso-modal-desc {
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.45;
}

.acceso-modal-warn {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  color: #f0c98a;
  font-size: .8rem;
  line-height: 1.45;
}

.acceso-modal-error {
  color: #ef8080;
  font-size: .79rem;
}

.acceso-modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: #0e1421;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ---------- Vista de detalle de un acceso ---------- */

.acceso-detalle .acceso-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}

/* El selector del alta no se estira a todo el ancho de la vista. */
.acceso-detalle-usuario {
  max-width: 32rem;
  margin-top: 14px;
}

/* ---------- Columna "Contraseña" de la grilla ---------- */

.acceso-verclave-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 11px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #131a26;
  color: #93a0b4;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}

.acceso-verclave-btn:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: #c9e7ff;
}

/* La contraseña revelada: monoespaciada y seleccionable, sobre fondo propio
   para que se distinga de un campo editable. */
.acceso-clave-revelada {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px 0;
}

.acceso-clave-valor {
  display: block;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border));
  border-radius: 10px;
  background: #0f131d;
  color: var(--text);
  font-family: "Consolas", "Menlo", monospace;
  font-size: 1.05rem;
  letter-spacing: .04em;
  word-break: break-all;
  user-select: all;
}

.acceso-clave-revelada .acceso-modal-footer {
  margin: 0 -20px;
}

.acceso-detalle-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}

.acceso-detalle-footer button {
  min-width: 8rem;
}

/* ── Auditoría global (Configuración) ──
   Diseño de Claude Design (Auditoria.dc.html, 2026-09-28), bajado a clases propias.
   Todas las clases son `aud-*` y las usa sólo esta pantalla. Los colores salen de
   :root y de la paleta de .badge (info/warn/ok/admin); los tamaños de control son
   los de la app: 40px para inputs y selects (regla global), .78rem para etiquetas. */

.aud-page {
  max-width: 1080px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.aud-page .config-title { margin-bottom: 0; }

/* La advertencia de que el historial tiene huecos va arriba y no al pie: es una
   limitación real y el que investiga tiene que saberla antes de concluir "no pasó". */
.aud-aviso {
  margin: 0;
  padding: 10px 14px;
  border: 1px solid #f59e0b40;
  border-left: 3px solid var(--warn);
  border-radius: 10px;
  background: #f59e0b12;
  color: #fcd34d;
  font-size: .82rem;
}

.aud-filtros {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
  box-shadow: 0 10px 30px #00000033;
}

.aud-filtros-fila {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.aud-buscar {
  position: relative;
  flex: 1;
  min-width: 240px;
}

.aud-buscar-icono {
  position: absolute;
  left: 12px;
  top: 11px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.aud-buscar-input {
  width: 100%;
  padding: 0 12px 0 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #0f131d;
  color: var(--text);
  font-family: inherit;
  font-size: .88rem;
  outline: none;
}

.aud-buscar-input:focus { border-color: #1678b8; }
.aud-buscar-input::placeholder { color: var(--muted); }

.aud-btn-secundario {
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #111621;
  color: #c9d4e3;
  font-family: inherit;
  font-weight: 600;
  font-size: .85rem;
  cursor: pointer;
}

.aud-btn-secundario:hover { border-color: #3a4863; color: var(--text); transform: none; }

.aud-filtros-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px 12px;
  align-items: end;
}

.aud-campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.aud-campo-label {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
}

.aud-select { width: 100%; }

/* Control segmentado del período. Los botones viven dentro de un contenedor de 40px,
   así que se neutraliza la regla global `button { height: 40px }` y el transform
   del hover global. */
.aud-segmentado {
  display: flex;
  gap: 2px;
  height: 40px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #0f131d;
}

.aud-segmento {
  flex: 1;
  height: auto;
  padding: 0 6px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-weight: 600;
  font-size: .8rem;
  white-space: nowrap;
  cursor: pointer;
}

.aud-segmento:hover { color: var(--text); transform: none; }

.aud-segmento.is-active {
  background: #00a3ff2e;
  color: #e8f6ff;
  font-weight: 700;
}

/* Chips de módulo, con el conteo de operaciones de cada uno. */
.aud-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.aud-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #111621;
  color: #c9d4e3;
  font-family: inherit;
  font-weight: 600;
  font-size: .8rem;
  cursor: pointer;
}

.aud-chip:hover { border-color: #3a4863; color: var(--text); transform: none; }

.aud-chip.is-active {
  border-color: var(--primary);
  background: #00a3ff24;
  color: #e8f6ff;
}

.aud-chip-count {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.aud-chip.is-active .aud-chip-count { color: #7fcfff; font-weight: 700; }

/* Paginación, arriba y abajo de la lista. */
.aud-paginacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.aud-paginacion-pie { margin: 16px 0 0; }

.aud-paginacion-label {
  color: var(--text);
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
}

.aud-paginacion-btns { display: flex; gap: 6px; }

.aud-pag-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #0f131d;
  color: var(--text);
  font-size: 1rem;
  cursor: pointer;
}

.aud-pag-btn:hover:not(:disabled) { border-color: #3a4863; transform: none; }
.aud-pag-btn:disabled { color: #4a5569; cursor: not-allowed; }

.aud-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 36px 24px;
  border: 1px dashed #2a3346;
  border-radius: 14px;
  background: #161b27;
  text-align: center;
}

.aud-vacio span { color: var(--muted); font-size: .88rem; }

.aud-btn-acento {
  height: 36px;
  margin-top: 4px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid #00a3ff66;
  background: #00a3ff1f;
  color: #7fcfff;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Días y eventos */
.aud-dias {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.aud-dia {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aud-dia-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 2px 4px;
}

.aud-dia-titulo {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
}

.aud-dia-sub { color: var(--muted); font-size: .82rem; }

.aud-dia-linea {
  flex: 1;
  height: 1px;
  align-self: center;
  background: var(--border);
}

.aud-dia-conteo {
  color: var(--muted);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}

.aud-evento {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(170deg, #171f2f 0%, #131a28 100%);
  overflow: hidden;
}

.aud-evento-head {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.aud-evento-head::-webkit-details-marker { display: none; }
.aud-evento-head:hover { background: #1b2334; }

.aud-evento-hora {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.aud-evento-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.aud-evento-titulo {
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  overflow-wrap: anywhere;
}

.aud-evento-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.aud-evento-usuario {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #c9d4e3;
  font-size: .78rem;
  font-weight: 600;
}

.aud-evento-usuario svg {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.aud-evento-sku {
  color: var(--muted);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}

.aud-evento-side {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
  color: var(--muted);
  font-size: .78rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.aud-evento-caret::before { content: "▸"; color: #7ea2cc; font-size: .8rem; }
.aud-evento[open] .aud-evento-caret::before { content: "▾"; }

.aud-evento-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 16px 16px 92px;
  padding-top: 12px;
  border-top: 1px solid #232a3a;
}

.aud-linea {
  display: grid;
  gap: 10px;
  align-items: center;
  min-height: 28px;
}

.aud-linea-campo { grid-template-columns: 84px minmax(110px, max-content) minmax(0, 1fr); }
.aud-linea-item { grid-template-columns: 84px minmax(0, 1fr) auto; }

.aud-tag {
  justify-self: start;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}

.aud-tag-campo { background: #3b82f622; color: #93c5fd; }
.aud-tag-alta { background: #10b98122; color: #6ee7b7; }
.aud-tag-baja { background: #ef444422; color: #fca5a5; }
.aud-tag-reemplazo { background: #f59e0b22; color: #fcd34d; }

.aud-linea-campo-nombre {
  color: var(--muted);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  overflow-wrap: anywhere;
}

.aud-valores {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: .84rem;
  font-variant-numeric: tabular-nums;
  min-width: 0;
}

.aud-valor {
  padding: 2px 8px;
  border-radius: 6px;
  overflow-wrap: anywhere;
}

.aud-valor-antes {
  background: #ef444418;
  border: 1px solid #ef444440;
  color: #fca5a5;
  text-decoration: line-through;
}

.aud-valor-despues {
  background: #10b98118;
  border: 1px solid #10b98140;
  color: #6ee7b7;
}

.aud-valor-vacio {
  border: 1px dashed #3a4863;
  color: var(--muted);
  font-style: italic;
}

.aud-flecha { color: var(--muted); }

.aud-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
  font-size: .84rem;
  color: #e6ebf2;
}

.aud-item-antes { color: var(--muted); text-decoration: line-through; }

.aud-item-codigo {
  color: var(--muted);
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
}

.aud-item-cant {
  min-width: 44px;
  text-align: right;
  color: #c9d4e3;
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}

.aud-sin-detalle {
  color: var(--muted);
  font-size: .82rem;
  font-style: italic;
}

.aud-motivo {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px dashed #232a3a;
  font-size: .82rem;
  color: #c9d4e3;
}

.aud-motivo-label {
  color: var(--muted);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Coincidencias de la búsqueda, dentro de títulos, valores e ítems. */
.aud-hit {
  background: #00a3ff40;
  color: #fff;
  border-radius: 3px;
  padding: 0 1px;
}

/* Badge de módulo: misma forma que .badge; un color de la paleta por módulo. */
.aud-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: .72rem;
  border: 1px solid transparent;
  white-space: nowrap;
}

.aud-badge-formulas { background: #3b82f622; border-color: #3b82f655; color: #93c5fd; }
.aud-badge-abastecimiento { background: #f59e0b22; border-color: #f59e0b55; color: #fcd34d; }
.aud-badge-proveedores { background: #10b98122; border-color: #10b98155; color: #6ee7b7; }
.aud-badge-configuracion { background: #8b5cf622; border-color: #8b5cf655; color: #c4b5fd; }
.aud-badge-neutro { background: #93a0b41a; border-color: #93a0b440; color: #c9d4e3; }

/* En pantallas angostas el cuerpo deja de alinearse con el título (no hay lugar
   para la columna de la hora) y las líneas se apilan. */
@media (max-width: 40rem) {
  .aud-evento-head { grid-template-columns: 48px minmax(0, 1fr); }
  .aud-evento-side { grid-column: 2; padding-top: 0; }
  .aud-evento-cuerpo { margin-left: 16px; }
  .aud-linea-campo,
  .aud-linea-item { grid-template-columns: 1fr; gap: 4px; }
  .aud-item-cant { text-align: left; }
}

/* ── Copiar fórmula ──
   Nada de tamaños nuevos: controles al tamaño de `.acceso-check` (19x19, ~L.6010),
   texto de fila al tamaño de `.nf-table td` (.83rem), aviso en .74rem itálica
   (el patrón de los avisos chicos de fórmulas), fila apagada a la
   opacidad de `.acceso-card.is-disabled`, fila objetivo al color de
   `.formula-row-selected` y fila reemplazada al fondo de `.badge.ok`. */

/* Slider de destino: reusa `.formula-version-slider` del detalle (track, knob y
   transición). Lo único propio es el ancho de las dos mitades: el knob es `width: 50%`,
   así que las dos opciones tienen que medir IGUAL o queda descentrado — y acá los
   textos ("Este mismo producto" / "Otro producto") son mucho más largos que
   "En línea" / "Casillero", que es para lo que estaban dimensionados los 104px. */
.cf-destino-opt {
  flex: 0 0 168px;
  width: 168px;
}

/* `.formula-version-slider` es `inline-flex`, pero acá su padre `.nf-section` es flex en
   columna: sin `align-self`, el hijo se estira a todo el ancho y el knob —que es `50%` del
   track— termina cubriendo las dos opciones y parte del vacío. Con `flex-start` el track
   vuelve a medir lo que miden sus dos botones. */
.cf-destino-slider {
  align-self: flex-start;
  margin: 2px 0 4px;
}

/* Dos grillas propias. La del alta (.nf-grid-datos-1) es de 3 columnas y acá van 2
   campos en los dos bloques, así que dejaba una columna muerta a la derecha; y en
   Destino, con el selector de producto oculto, Tamaño quedaba estirado sobre la
   primera columna de 2fr. */
.cf-grid-destino {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
  align-items: end;
}

/* Con "Este mismo producto" el selector de producto está oculto y Tamaño queda solo:
   no debe estirarse a toda la fila. La clase la pone el JS al mover el slider —no se
   usa `:has()` a propósito, por la decisión ya registrada en memory/MEMORY.md
   (2026-08-20): en este proyecto el pintado condicional va por clase, que es más
   predecible y anda en navegadores más viejos. */
.cf-grid-destino.cf-solo-tamano {
  grid-template-columns: minmax(0, 260px);
}

.cf-grid-datos {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
  align-items: end;
}

.cf-radio,
.cf-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: .83rem;
  color: var(--text);
}

.cf-radio input[type="radio"],
.cf-check input[type="checkbox"] {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

/* El LOV de producto destino necesita más ancho que el resto de la grilla de 3
   columnas de `.nf-grid-datos-1`: ocupa las primeras dos, el Tamaño la tercera. */
.cf-field-otro { grid-column: span 2; }

/* C2: `.nf-field{display:flex}` y `.nf-section{display:flex}` (arriba, L.2855/2865)
   son reglas de autor y le ganan al `[hidden]` del user-agent -- mismo gotcha ya
   documentado en memory/MEMORY.md (2026-08-21, "El combo se veía aunque estuviera
   hidden"). Sin esto, el LOV de "Producto destino" y el panel "Reemplazar
   componente" se ven siempre, aunque el radio diga "Este mismo producto" o no haya
   ninguna fila marcada para reemplazar. */
.cf-field-otro[hidden],
#cf-reemplazo[hidden] { display: none; }

/* C1: la celda de acciones de esta tabla lleva DOS botones (Reemplazar + Quitar),
   a diferencia de la de "Nueva fórmula" (formulas_nueva_formula.html), que tiene
   uno solo. La regla compartida `.nf-table th, td { overflow:hidden; white-space:
   nowrap }` (L.2920) los recorta aunque el <col> de esta columna sea más ancho
   (colgroup nuevo en formulas_copiar_formula.html, 190px). Se relaja acá, scopeada
   a `.cf-bloque` para no tocar la tabla de Nueva fórmula, que no lo necesita. */
.cf-bloque .nf-td-del {
  white-space: normal;
  overflow: visible;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

/* Los dos botones de la fila, más compactos que `.nf-del` estándar, para que
   "Reemplazar" y "Quitar" entren en un solo renglón dentro de su columna. */
.cf-bloque .nf-td-del .nf-del { padding: 0 9px; }

/* Descripción y Tipo cortan en dos renglones en vez de recortarse: `.nf-table td` es
   `nowrap` + `overflow: hidden`, que en esta tabla escondía textos como
   "Material de embalaje" sin ninguna señal. Acotado a `.cf-bloque` para no tocar la
   tabla del alta, que tiene menos columnas y no lo necesita. */
.cf-bloque .cf-td-desc,
.cf-bloque .cf-td-tipo {
  white-space: normal;
  overflow: visible;
  line-height: 1.35;
}

.cf-bloque { transition: opacity .15s; }

.cf-bloque-off { opacity: .5; }
.cf-bloque-off .nf-table-wrap { pointer-events: none; }

.cf-row-target td { background: #1d3d66 !important; }

.cf-row-reemplazada td { background: #10b98122 !important; }

.cf-td-desc,
.cf-td-tipo { font-size: .83rem; }

.cf-tag-d { margin-left: 6px; }

.cf-aviso {
  font-size: .74rem;
  font-style: italic;
  min-height: 0;
}

/* ── Códigos EAN/DUN (ticket #60) ──────────────────────────────────────────
   Maestro y detalle conviven en el DOM; `data-view` decide cuál se ve. Mismo
   patrón que Acceso Usuarios, Listas de Precios y el monitor de fórmulas. */

#eandun-content[data-view="master"] #eandun-detail { display: none; }
#eandun-content[data-view="detail"] #eandun-master { display: none; }

/* "+ Nuevo código" comparte la fila de los chips de estado, pegado a la derecha. */
.eandun-filtros .eandun-nuevo-btn {
  margin-left: auto;
}

/* Los códigos de barras se leen dígito a dígito: monoespaciado y un poco de
   tracking para no confundir 0/O ni 1/l al cotejarlos contra una etiqueta. */
.eandun-col-codigo,
.eandun-input-codigo {
  font-family: "Consolas", "SFMono-Regular", "Menlo", monospace;
  letter-spacing: .04em;
}

.eandun-col-detalle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Una fila dada de baja sigue existiendo y se puede reactivar: se atenúa, no se
   tacha ni se esconde. */
.eandun-row-baja > td { opacity: .55; }
.eandun-row-baja:hover > td { opacity: .8; }

/* La grilla usa el margen estándar de .table-wrap (14px): un override a 6px la
   dejaba pegada a la fila de chips y "+ Nuevo código". */

/* ── Detalle ── */

.eandun-form-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.eandun-group-title {
  margin: 0;
  font-size: .92rem;
  font-weight: 600;
  color: var(--text);
}

.eandun-group-hint {
  margin: -6px 0 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.45;
}

.eandun-grid-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 16px;
}

.eandun-field-ancho { grid-column: 1 / -1; }

.eandun-field-hint {
  color: #6b7789;
  font-size: .72rem;
  line-height: 1.35;
}

.eandun-field-hint code {
  font-size: .72rem;
  color: #93a0b4;
}

.eandun-textarea {
  height: auto;
  min-height: 56px;
  padding: 8px 12px;
  line-height: 1.45;
  resize: vertical;
}

/* El error de validación va bajo el formulario y en rojo, no en un alert: el
   usuario conserva lo que había tipeado y ve qué campo corregir. */
.eandun-error {
  margin: 0;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #ef444455;
  background: #ef444418;
  color: #fca5a5;
  font-size: .82rem;
  line-height: 1.45;
}

/* "Dar de baja" queda a la izquierda, separado de Cancelar/Guardar, para que no
   se toque por inercia al confirmar. */
.eandun-detalle-footer { align-items: center; }
.eandun-footer-spacer { flex: 1 1 auto; }

/* .acceso-btn-danger/.acceso-btn-ghost son inline-flex con align-items pero sin
   justify-content: con min-width el texto queda pegado a la izquierda. */
.eandun-estado-btn {
  min-width: 8rem;
  justify-content: center;
}

/* El <form> es un solo hijo de .formula-detail, así que se come su gap de 16px
   y las dos tarjetas quedaban pegadas. Se lo repone acá adentro. */
.eandun-detalle #eandun-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── EAN/DUN en la lista de inclusión (ticket #60, pieza 2) ──────────────── */

/* La celda queda como celda de tabla: darle display:flex a un <td> lo saca del
   layout de tabla y descoloca toda la columna. El apilado va en el div interno. */
.inclusion-col-eandun {
  vertical-align: middle;
  white-space: nowrap;
}

.inclusion-eandun-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.25;
}

.inclusion-eandun-clave {
  font-family: "Consolas", "SFMono-Regular", "Menlo", monospace;
  letter-spacing: .03em;
  font-size: .8rem;
  color: var(--text);
}

/* El EAN va abajo y más chico: es el dato de control, no el identificador. */
.inclusion-eandun-ean {
  font-family: "Consolas", "SFMono-Regular", "Menlo", monospace;
  font-size: .68rem;
  color: var(--muted);
}

/* El editor reemplaza la tabla en vez de abrirse dentro de una celda:
   `.inclusion-detalle-wrap` tiene overflow-x: auto y recortaría el panel
   flotante del LOV. Acá abre con aire. */
.inclusion-eandun-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 14px;
  padding: 18px 20px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #121725;
}

.inclusion-eandun-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.inclusion-eandun-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.inclusion-eandun-meta {
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
}

.inclusion-eandun-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Ancho acotado: el LOV no necesita ocupar toda la pantalla y así el panel
   flotante queda alineado con el campo. */
.inclusion-eandun-campo { max-width: 26rem; }

.inclusion-eandun-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.inclusion-eandun-footer button { min-width: 8rem; }

.inclusion-eandun-vacio { margin: 0; }
.inclusion-eandun-vacio a { color: var(--primary); }

/* ── Monitor de Abastecimiento ─────────────────────────────────────────────
   Grilla de órdenes de compra con sus guías de recepción anidadas.
   Reusa .orders-table, .badge y .table-wrap; sólo agrega lo propio del monitor. */

.abast-table .abast-col-exp { width: 2.5rem; text-align: center; }
.abast-table .abast-col-num { text-align: right; white-space: nowrap; }
.abast-table .abast-col-estado,
.abast-table .abast-col-avance { white-space: nowrap; }

/* El botón de expandir gira su chevron al abrirse. */
.abast-expand {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  color: var(--muted);
  line-height: 0;
  border-radius: 0.25rem;
  transition: transform 0.15s ease, color 0.15s ease;
}
.abast-expand:hover { color: var(--text); background: #ffffff0d; }
.abast-expand svg { width: 1rem; height: 1rem; }
.abast-expand svg path {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.abast-expand.abierto { transform: rotate(90deg); color: var(--primary); }

/* Cantidad pendiente: se destaca sólo cuando queda algo por recibir. */
.abast-pend { color: var(--warn); font-weight: 600; }

.abast-obs {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

/* Badges de estado del circuito 7. Los no declarados en la parametría
   (E, L, M) caen en `desconocido` y se muestran en gris, sin interpretar. */
.abast-estado-pendiente   { background: #f59e0b22; border-color: #f59e0b55; color: #fcd34d; }
.abast-estado-autorizada  { background: #10b98122; border-color: #10b98155; color: #6ee7b7; }
.abast-estado-rechazada   { background: #ef444422; border-color: #ef444455; color: #fca5a5; }
.abast-estado-desconocido { background: #9ca3af22; border-color: #9ca3af55; color: #cbd5e1; }

.abast-avance-sin_recibir { background: #f59e0b22; border-color: #f59e0b55; color: #fcd34d; }
.abast-avance-parcial     { background: #3b82f622; border-color: #3b82f655; color: #93c5fd; }
.abast-avance-completa    { background: #10b98122; border-color: #10b98155; color: #6ee7b7; }

/* Fila de detalle: existe siempre pero está vacía hasta que se expande,
   así que no ocupa alto ni dibuja bordes mientras tanto. */
.abast-detalle-row > td { padding: 0 !important; border: none !important; }
.abast-detalle:empty { display: none; }
/* Contraído. base.css no tiene reset global: sin esta regla el detalle queda
   visible aunque el botón diga lo contrario. */
.abast-detalle.oculto { display: none; }

.abast-detalle-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: 1.25rem;
  padding: 1rem 1.25rem 1.25rem 3rem;
  background: var(--card-2);
  border-bottom: 1px solid var(--border);
}

.abast-detalle-titulo {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.abast-subtable { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.abast-subtable th {
  text-align: left;
  padding: 0.35rem 0.5rem;
  color: var(--muted);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.abast-subtable td {
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid #ffffff0a;
  vertical-align: top;
}
.abast-subtable tr:last-child td { border-bottom: none; }

.abast-art-cod { font-family: ui-monospace, monospace; font-size: 0.75rem; color: var(--muted); }
.abast-art-desc { display: block; }

.abast-badge-mn { margin-left: 0.35rem; font-size: 0.7rem; }

.abast-sin-guias { color: var(--muted); font-size: 0.85rem; margin: 0; }
.abast-vacio { text-align: center; color: var(--muted); padding: 2rem 1rem; }

/* Monitor comercial: observaciones generales de la nota de venta (OBS_FAC_VEN). Es
   texto libre del ERP con saltos de línea —marcación, direcciones, lo que lleva la
   factura— y sin pre-wrap se lee como un solo párrafo. Mismo tamaño que la subtabla. */
.com-observaciones {
  margin: 0;
  font-size: 0.8rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  /* SIN tope de alto ni scroll, a propósito: acá están la marcación de las cajas y lo que
     tiene que llevar la factura, y un scroll interno esconde el final a quien no lo ve. El
     alto se controla dándole todo el ancho y colapsando los saltos dobles del ERP
     (comercial/service.py, _normalizar_observaciones). */
}
/* Se muestran con el botón "Ver observaciones". `base.css` no tiene reset de [hidden]:
   sin esta regla el atributo no alcanza si algo le da display al párrafo. */
.com-observaciones[hidden] { display: none; }
/* Mismo botón secundario que "Limpiar filtros", a la altura de los controles del detalle
   (34px, como .lov-trigger y .nf-input). */
.com-btn-obs { height: 34px; }
/* Observación de una línea de la nota, bajo el artículo. Es texto libre de hasta 500
   caracteres: respeta los saltos y parte palabras largas en vez de ensanchar la tabla. */
.com-obs-linea { white-space: pre-wrap; overflow-wrap: anywhere; }
.com-btn-obs[aria-expanded="true"] { margin-bottom: 0.6rem; }

/* Detalle de una nota de venta. Parte del de abastecimiento (`.abast-detalle-body`, dos
   columnas de 22rem), pero ahí la tabla de renglones tiene 6 columnas y acá 10: en media
   grilla los encabezados se partían letra por letra y la fila expandida medía 2.160px.
   Renglones y observaciones a todo el ancho; las guías también, porque al lado de las
   observaciones completas quedaban flotando en un bloque casi vacío. */
.com-detalle-body {
  grid-template-columns: minmax(0, 1fr);
}
.com-tabla-scroll { overflow-x: auto; }
.com-detalle-body .abast-subtable th,
.com-detalle-body .abast-subtable .com-nowrap,
.com-detalle-body .abast-subtable .abast-col-num { white-space: nowrap; }

/* Botón de reimprimir de la grilla del monitor. */
.abast-table .abast-col-acc { width: 2.5rem; text-align: center; }
.abast-print {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem;
  border-radius: 0.25rem;
  color: var(--muted);
  line-height: 0;
  transition: color 0.15s ease, background 0.15s ease;
}
.abast-print:hover { color: var(--primary); background: #ffffff0d; }
.abast-print svg { width: 1.05rem; height: 1.05rem; }
.abast-print svg path {
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Solapas del monitor: "Pendientes" es el trabajo, "Completadas" el archivo. */
.abast-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.9rem;
}
.abast-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.55rem 1rem;
  margin-bottom: -1px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0.25rem 0.25rem 0 0;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.abast-tab:hover { color: var(--text); background: #ffffff0a; }
.abast-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.abast-tab-n {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.4rem;
  border-radius: 0.75rem;
  background: #ffffff14;
  font-size: 0.75rem;
  font-weight: 700;
}
.abast-tab.active .abast-tab-n { background: #00a3ff26; color: var(--primary); }
.abast-subfiltros { margin-bottom: 0.5rem; }

/* ── Alta de orden de compra ─────────────────────────────────────────────── */
.abast-titulo-fila {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.abast-btn-nueva { white-space: nowrap; }

/* El modal reusa .pdf-modal (inset: 4vh 5vw), que es el ancho real que necesita el
   LOV de artículos. Acá sólo se lo acota para que no se estire en pantallas grandes
   y se le da al cuerpo su propio scroll. */
.abast-modal-dialog {
  /* Centrado en el área de contenido, no en la ventana: el sidebar es `fixed` con
     z-index 1100 y el modal va en 999, así que un diálogo centrado en el viewport queda
     tapado por el menú. El `margin-left` de media barra lo corre a la derecha justo lo
     necesario, y el `top` lo baja debajo del topbar. */
  inset: auto auto auto 50%;
  top: calc(var(--topbar-h) + 1rem);
  transform: translateX(-50%);
  margin-left: calc(var(--sidebar-w) / 2);
  /* Ancho: los LOV de proveedor y condición de pago llevan textos largos
     ("VIÑEDOS ERRAZURIZ OVALLE S.A." / "CTA.CTE. 30 DÍAS") y a 68rem se cortaban. */
  width: min(88rem, calc(97vw - var(--sidebar-w)));
  max-height: calc(100vh - var(--topbar-h) - 2rem);
}
/* Con el sidebar apilado arriba no hay nada a la izquierda que esquivar. */
@media (max-width: 61.25rem) {
  .abast-modal-dialog {
    margin-left: 0;
    width: 96vw;
    top: 2vh;
    max-height: 96vh;
  }
}
/* El bloque de moneda son dos campos de la misma grilla, no un contenedor aparte. */
.abast-moneda-slot { display: contents; }
.abast-modal-body {
  overflow-y: auto;
  padding: 1rem 1.1rem;
  background: transparent;
  /* Aire abajo para que el panel del último LOV se despliegue sin quedar pegado
     al borde: el panel es absolute y el cuerpo recorta. */
  padding-bottom: 9rem;
}
.abast-modal-tit { margin: 0; font-size: 1.05rem; }
.pdf-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 0.75rem 1.1rem;
  border-top: 1px solid var(--border);
}
.abast-recibir {
  margin-left: 0.3rem;
  border: none;
  background: none;
  cursor: pointer;
}
.abast-art { display: flex; flex-direction: column; line-height: 1.25; }
.abast-art span { font-size: 0.78rem; color: var(--muted); }

.abast-btn-nota {
  margin-right: auto;
  font-size: 0.78rem;
  color: #fca5a5;
  max-width: 46ch;
  line-height: 1.3;
}
.abast-btn-nota[hidden] { display: none; }

.pdf-modal-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.3rem;
}
.pdf-modal-close:hover { color: var(--text); }

.abast-cabecera {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 0.9rem 1rem;
  margin-bottom: 1.2rem;
}
.abast-field-ancho { grid-column: 1 / -1; }
.abast-hint {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.7rem;
  color: var(--muted);
}
/* Altura pareja con el trigger del LOV (34px), que es el patrón del resto de Mesh. */
.abast-input {
  height: 34px;
  width: 100%;
  box-sizing: border-box;
}

.abast-sub {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.abast-nf-table { table-layout: fixed; width: 100%; }
.abast-nf-table .abast-num { text-align: right; }
.abast-nf-table td { vertical-align: top; padding: 0.3rem 0.35rem; }
.abast-add { margin-top: 0.6rem; }
.abast-del { min-width: 1.9rem; justify-content: center; }

.abast-totales {
  display: flex;
  justify-content: flex-end;
  gap: 1.5rem;
  margin-top: 1.1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
}
.abast-totales > div { text-align: right; }
.abast-totales span {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.abast-totales strong { font-size: 1rem; }
.abast-total-final strong { font-size: 1.25rem; color: var(--primary); }
.abast-nota-total {
  margin: 0.4rem 0 0;
  text-align: right;
  font-size: 0.72rem;
  color: var(--muted);
}

.abast-ok, .abast-error {
  padding: 0.7rem 0.9rem;
  border-radius: 0.4rem;
  margin-bottom: 0.9rem;
  font-size: 0.9rem;
}
.abast-ok { background: #10b98118; border: 1px solid #10b98155; color: #6ee7b7; }
.abast-error { background: #ef444418; border: 1px solid #ef444455; color: #fca5a5; }
.abast-ok-nota { display: block; margin-top: 0.2rem; font-size: 0.78rem; opacity: 0.85; }

/* ─────────────────────────────────────────────────────────────────────────
   Listas de precios: alta de lista, edición y baja de un precio
   Reusa .precios-form-* del alta de producto; acá va sólo lo propio.
   ───────────────────────────────────────────────────────────────────────── */

/* Campo que ocupa el resto de la fila (el nombre de la lista, al lado del código) */
.precios-field-ancho { grid-column: span 2; }

@media (max-width: 900px) {
  .precios-field-ancho { grid-column: span 1; }
}

/* Dato de sólo lectura en el form de edición: mismo alto que un input, sin serlo */
.precios-ed-fijo {
  margin: 0;
  padding: 8px 10px;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-2);
  color: var(--text);
  font-size: .88rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.precios-copia-aviso { margin: 0 0 12px; }

/* El botón de quitar se pinta en rojo sólo al pasar por encima: en la grilla
   compite con el de editar y un rojo permanente grita más de lo que aporta. */
.precios-btn-quitar:hover {
  border-color: var(--bad);
  color: #fca5a5;
  background: #ef444414;
}

/* ── Confirmación de baja ── */
.precios-baja-resumen {
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-2);
}

.precios-baja-articulo {
  margin: 0;
  font-size: .9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}

.precios-baja-alerta {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid #f59e0b55;
  border-radius: 8px;
  background: #f59e0b14;
}

/* Con EAN/DUN de por medio el borrado pierde un dato que no vuelve: el aviso
   sube de tono, no de tamaño. */
.precios-baja-alerta.es-grave {
  border-color: #ef444455;
  background: #ef444414;
}

.precios-baja-alerta-titulo {
  margin: 0;
  font-size: .9rem;
  color: var(--text);
}

.precios-baja-alerta-detalle {
  margin: 8px 0 0;
  font-size: .82rem;
  color: var(--muted);
}

.precios-baja-clientes {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 260px;
  overflow-y: auto;
}

.precios-baja-clientes li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
}

.precios-baja-cliente-cod {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  min-width: 4.5rem;
}

.precios-baja-cliente-nom {
  color: var(--text);
  flex: 1;
  min-width: 0;
}

/* ── Comercial > Clientes (Task 8) ────────────────────────────────────────── */
/* Master/detail: mismo mecanismo que #monitor-content / #acceso-content /
   #eandun-content — la grilla y el formulario conviven en el DOM y `data-view`
   decide cuál se ve. Sin esto los dos quedarían visibles a la vez. */
#clientes-content[data-view="master"] #clientes-detail { display: none; }
#clientes-content[data-view="detail"] #clientes-master { display: none; }

.cli-btn-nueva { white-space: nowrap; }

.cli-form-wrap { max-width: 980px; margin: 0 auto; }

.cli-form-sec + .cli-form-sec { margin-top: 18px; }

.cli-textarea {
  min-height: 64px;
  resize: vertical;
  font-family: inherit;
}

/* ── Grilla de solicitudes ── */
.cli-table th, .cli-table td { white-space: nowrap; }
.cli-col-nro { width: 13%; }
.cli-col-mercado { width: 9%; }
.cli-col-codigo { width: 11%; }
.cli-col-estado { width: 11%; }
.cli-col-origen { width: 7%; }
.cli-col-usuario { width: 9%; }
/* Fix Task 9: la columna pasó de un botón a hasta tres (Ver · Editar · Enviar),
   así que necesita más ancho y que los botones se alineen a la derecha sin
   desbordar. `.cli-acciones-fila` es el contenedor flex; el `form` del Enviar va
   adentro como un hijo más. */
.cli-col-acciones { width: 16%; text-align: right; }
.cli-col-acciones form { display: inline-flex; margin: 0; }

.cli-acciones-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
}

.cli-btn-accion { white-space: nowrap; }

/* ── Detalle de una solicitud (Task 9 / hallazgo A3) ──
   Reusa las clases del formulario (`agregar-field`, `agregar-label`,
   `agregar-grid-3col`) para que las medidas sean las mismas: acá sólo se define
   cómo se ve un VALOR de sólo lectura donde el form tiene un input. La altura se
   alinea a la de `.agregar-input` (40px con su padding) para que una fila mixta
   no quede escalonada. */
.cli-det-valor {
  margin: 0;
  padding: 9px 0;
  font-size: .9rem;
  color: var(--text);
  line-height: 1.35;
  min-height: 40px;
  word-break: break-word;
}

.cli-det-valor .abast-obs { display: block; }

/* Un campo vacío se dice, no se deja en blanco: en blanco no se distingue de un
   hueco del código, que es la confusión que esta pantalla existe para evitar. */
.cli-det-vacio {
  color: var(--muted);
  font-size: .82rem;
  font-style: italic;
}

.cli-det-obs { white-space: pre-wrap; }

.cli-det-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.cli-det-nota,
.cli-form-aviso {
  margin: 10px 0 0;
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.5;
}

.cli-det-acciones { flex-wrap: wrap; }

.cli-det-eventos { width: 100%; }
.cli-det-eventos th,
.cli-det-eventos td { white-space: nowrap; }

/* La reasignación de código cambia la identidad de un cliente en el maestro del
   ERP contradiciendo un número que ya salió por correo: en el rastro tiene que
   saltar a la vista, no ser una fila más. */
.cli-det-eventos tr.cli-det-reasig > td {
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  font-weight: 600;
}

.cli-det-eventos tr.cli-det-reasig-nota > td {
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  white-space: normal;
  font-size: .82rem;
  line-height: 1.5;
}