@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* ─── Assai monochromatic system v2 ─────────────────────────────────────
     Palette: dark teal background + 1 accent (#5eead4) + status (red, green).
     Hierarchy via type weight + opacity, not color. */

  /* Surface */
  --bg:        #0a2730;
  --bg-soft:   #0e3540;
  --bg-deep:   #07212a;
  --panel:     rgba(255,255,255,.04);
  --border:    rgba(255,255,255,.10);
  --hairline:  rgba(255,255,255,.08);
  --shadow:    none;

  /* Ink */
  --ink:           #ecf6f8;
  --muted-strong:  rgba(236,246,248,.78);
  --muted:         rgba(236,246,248,.55);
  --muted-soft:    rgba(236,246,248,.32);

  /* THE accent — usar para activo, importante, foco. Punto. */
  --accent:        #5eead4;
  --accent-soft:   rgba(94,234,212,.14);
  --accent-line:   rgba(94,234,212,.42);
  --accent-strong: #2dd4bf;
  --accent-dark:   #0d9488;
  --accent-mid:    #5eead4;   /* alias legacy */

  /* Status — solo crítico real */
  --critical:      #ef4444;
  --critical-soft: rgba(239,68,68,.12);
  --success:       #4ade80;
  --success-soft:  rgba(74,222,128,.12);

  /* Surface tints semánticos — switchean con tema */
  --surface-tint:        rgba(255,255,255,.04);
  --surface-tint-strong: rgba(255,255,255,.10);
  --input-bg:            rgba(0,0,0,.32);
  --input-bg-focus:      rgba(0,0,0,.48);
  --row-hover:           rgba(255,255,255,.04);

  /* Legacy aliases — quedan apuntando al accent o al ink, no rompen llamadas viejas */
  --water:         var(--accent);
  --water-dark:    var(--accent-strong);
  --water-soft:    var(--accent-soft);
  --water-mid:     var(--accent);
  --cyan:          var(--accent);
  --navy:          var(--bg);
  --navy-soft:     var(--bg-soft);
  --blue:          var(--accent);
  --blue-strong:   var(--accent-strong);
  --blue-soft:     var(--accent-soft);
  --aqua:          var(--accent);
  --green:         var(--success);
  --yellow:        var(--muted-strong);
  --red:           var(--critical);
}

/* ─── Light theme override ─────────────────────────────────────────────── */
:root[data-theme="light"] {
  --bg:        #f4f8f9;
  --bg-soft:   #ffffff;
  --bg-deep:   #e9eff1;
  --panel:     rgba(10,39,48,.02);
  --border:    rgba(10,39,48,.14);
  --hairline:  rgba(10,39,48,.08);

  --ink:           #0a2730;
  --muted-strong:  rgba(10,39,48,.78);
  --muted:         rgba(10,39,48,.55);
  --muted-soft:    rgba(10,39,48,.32);

  /* Accent más oscuro en light para contraste sobre blanco */
  --accent:        #0d9488;
  --accent-soft:   rgba(13,148,136,.10);
  --accent-line:   rgba(13,148,136,.32);
  --accent-strong: #0f766e;
  --accent-dark:   #134e4a;
  --accent-mid:    #0d9488;

  --critical:      #dc2626;
  --critical-soft: rgba(220,38,38,.08);
  --success:       #059669;
  --success-soft:  rgba(5,150,105,.08);

  /* Surface tints adaptados a light */
  --surface-tint:        rgba(10,39,48,.03);
  --surface-tint-strong: rgba(10,39,48,.07);
  --input-bg:            #ffffff;
  --input-bg-focus:      #f7fafa;
  --row-hover:           rgba(10,39,48,.03);

  /* Sidebar — fondo blanco, texto dark teal */
  --sidebar-bg:          #ffffff;
  --sidebar-border:      rgba(10,39,48,.10);
  --sidebar-text:        rgba(10,39,48,.55);
  --sidebar-text-active: #0a2730;
  --sidebar-item-hover:  rgba(13,148,136,.06);
  --sidebar-item-active: rgba(13,148,136,.10);
  --sidebar-accent:      #0d9488;
  /* Sidebar — deep navy */
  --sidebar-w: 224px;
  --sidebar-bg: #051525;
  --sidebar-border: rgba(122,246,246,0.07);
  --sidebar-text: rgba(200,225,240,0.45);
  --sidebar-text-active: #ffffff;
  --sidebar-item-hover: rgba(122,246,246,0.05);
  --sidebar-item-active: rgba(13,148,136,0.22);
  --sidebar-accent: #7af6f6;
  /* Layout */
  --topbar-h: 54px;
  --content-pad: 28px;
  /* Radii */
  --radius-lg: 12px;
  --radius-md: 8px;
  --radius-sm: 5px;
  /* Type */
  --font-sans: "Plus Jakarta Sans", "Inter", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", monospace;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.modal-open {
  overflow: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

/* ─── Layout shell ───────────────────────────────────────────────────────── */

.app-shell {
  display: flex;
  min-height: 100vh;
  width: 100%;
  opacity: 0;
  transition: opacity .2s ease;
}
.app-shell.is-ready {
  opacity: 1;
}

/* ─── Sidebar ────────────────────────────────────────────────────────────── */

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 200;
  overflow-y: auto;
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 20px 16px 18px;
  border-bottom: 1px solid var(--sidebar-border);
  position: relative;
}
.sidebar__collapse {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 1px solid var(--sidebar-border, rgba(148,163,184,.12));
  border-radius: 6px;
  color: var(--text-secondary, #94a3b8);
  cursor: pointer;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease;
}
.sidebar__collapse:hover {
  background: rgba(94,234,212,.08);
  color: var(--accent, #5eead4);
  border-color: var(--accent, #5eead4);
}

.sidebar__logo {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: #ffffff;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}

.sidebar__logo-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  object-position: center top;
}

.sidebar__brand-copy strong {
  display: block;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.sidebar__brand-copy small {
  display: block;
  color: var(--sidebar-accent);
  font-size: 0.685rem;
  font-weight: 500;
  margin-top: 2px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.sidebar__nav {
  flex: 1;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
}

.sidebar__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 16px;
  border: none;
  border-left: 2px solid transparent;
  background: transparent;
  color: var(--sidebar-text);
  font-size: 0.84rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  letter-spacing: -0.005em;
}

.sidebar__item:hover {
  background: var(--sidebar-item-hover);
  color: rgba(255,255,255,0.85);
}

.sidebar__item.is-active {
  background: var(--sidebar-item-active);
  color: var(--sidebar-text-active);
  border-left-color: var(--sidebar-accent);
  font-weight: 600;
}

.sidebar__item svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.65;
  transition: opacity 0.1s;
}

.sidebar__item:hover svg,
.sidebar__item.is-active svg {
  opacity: 1;
}

.sidebar__divider {
  height: 1px;
  background: var(--sidebar-border);
  margin: 6px 16px;
}

.sidebar__footer {
  padding: 12px 14px;
  border-top: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.assai-wordmark {
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0.35;
  transition: opacity 0.15s;
}

.assai-wordmark:hover {
  opacity: 0.6;
}

.assai-wordmark span {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

.sidebar .date-chip {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  color: var(--sidebar-text);
  font-size: 0.72rem;
  padding: 6px 10px;
  width: 100%;
  text-align: center;
  white-space: normal;
  line-height: 1.4;
}

/* ─── Main wrap ──────────────────────────────────────────────────────────── */

.main-wrap {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ─── Topbar ─────────────────────────────────────────────────────────────── */

.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 var(--content-pad);
  background: var(--bg-soft);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--hairline);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 100;
}
/* Home / area mode — align with 48px hero padding */
.topbar--wide {
  padding: 0 48px;
}

.topbar__page-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.03em;
  white-space: nowrap;
  margin-right: 4px;
}

.sync-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(-2px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.sync-chip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.sync-chip.is-success {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.sync-chip.is-warning {
  color: #9a6700;
  border-color: color-mix(in srgb, #f5c451 50%, var(--border));
  background: color-mix(in srgb, #f5c451 18%, var(--surface));
}

.topbar__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

/* ─── Content area ───────────────────────────────────────────────────────── */

.content {
  flex: 1;
  overflow-y: auto;
  padding: var(--content-pad);
  display: grid;
  gap: 20px;
  align-content: start;
  min-height: 0;
}
/* In home/area mode (bare) the main-wrap scrolls naturally */
.main-wrap--bare .content {
  display: block;
  padding: 0;
  gap: 0;
  overflow-y: visible;
}

#modalRoot {
  position: relative;
  z-index: 1200;
}

/* Legacy topbar brand — no longer rendered, kept for safety */
.topbar__brand { display: none; }
.brand-lockup { display: none; }
.brand-mark { display: none; }
.topbar__copy { display: none; }

.eyebrow,
.section-tag {
  margin: 0 0 5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--muted);
}

.hero-panel h2,
.panel h2,
.detail-hero h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.panel h3 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.subtitle,
.muted {
  color: var(--muted);
}

.date-chip {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  color: var(--muted);
  border: 1px solid var(--border);
  font-weight: 600;
  font-size: 0.78rem;
  white-space: nowrap;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: -0.01em;
  box-shadow: 0 1px 3px rgba(13,148,136,0.25);
  transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.08s ease;
  white-space: nowrap;
}

.button svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.button:hover {
  background: var(--accent-dark);
  box-shadow: 0 3px 8px rgba(13,148,136,0.30);
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(0);
}

.button--sm {
  padding: 6px 12px;
  font-size: 0.8rem;
}

.button--sm svg {
  width: 13px;
  height: 13px;
}

.button--secondary {
  background: linear-gradient(135deg, var(--accent-mid), var(--accent));
  color: #fff;
}

.button--ghost {
  background: var(--surface-tint);
  color: var(--ink);
  box-shadow: none;
  border: 1px solid var(--border);
}

.button--ghost:hover {
  background: var(--surface-tint-strong);
  filter: none;
}

.topbar__search {
  position: relative;
  display: flex;
  align-items: center;
}

.topbar__search-icon {
  position: absolute;
  left: 9px;
  width: 14px;
  height: 14px;
  color: var(--muted);
  pointer-events: none;
  flex-shrink: 0;
}

.topbar__search-input {
  width: 200px;
  padding: 7px 12px 7px 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  color: var(--ink);
  font-size: 0.83rem;
  transition: border-color 0.12s, width 0.18s, background 0.12s;
}

.topbar__search-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
  width: 250px;
  background: var(--panel);
}

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

.button--danger {
  background: var(--red);
  color: #fff;
  border: none;
}

.button--danger:hover {
  filter: brightness(0.92);
}

.modal.modal--sm {
  max-width: 400px;
}

.confirm-dialog {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 4px 0;
}

.confirm-dialog__message {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink);
}

.confirm-dialog__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* view-nav replaced by sidebar — hidden if still rendered */
.view-nav { display: none; }
.view-nav__item { display: none; }

.hero-panel,
.panel,
.detail-hero {
  background: var(--surface-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.hero-panel {
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 55%, #071a2e 100%);
  border-color: transparent;
  color: #fff;
}

.hero-panel .eyebrow,
.hero-panel .section-tag {
  color: rgba(255,255,255,0.55);
}

.hero-panel h2 {
  color: #fff;
  font-size: 1.35rem;
  letter-spacing: -0.04em;
}

.hero-panel p {
  color: rgba(255,255,255,0.72);
  font-size: 0.875rem;
  line-height: 1.6;
}

.hero-panel .button {
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  box-shadow: none;
}

.hero-panel .button:hover {
  background: rgba(255,255,255,0.22);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Cards inside the hero aside adapt to dark background */
.hero-panel .traffic {
  border-width: 1px;
}

.hero-panel .next-action {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
}

.hero-panel .next-action strong {
  color: #fff;
}

.hero-panel .next-action p {
  color: rgba(255,255,255,0.65);
  margin-bottom: 0;
}

.hero-panel .next-action .section-tag {
  color: rgba(255,255,255,0.45);
}

.panel {
  padding: 22px 24px;
}

.hero-panel,
.detail-hero {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding: 22px;
}

.hero-panel__main {
  max-width: 44rem;
}

.hero-panel__aside {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  min-width: 300px;
}

.traffic {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid;
  display: grid;
  gap: 4px;
}

.traffic--verde {
  background: rgba(21,128,61,.14);
  border-color: rgba(134,239,172,.25);
  color: #86efac;
}

.traffic--amarillo {
  background: rgba(180,83,9,.14);
  border-color: rgba(252,211,77,.25);
  color: #fcd34d;
}

.traffic--rojo {
  background: rgba(153,27,27,.14);
  border-color: rgba(252,165,165,.25);
  color: #fca5a5;
}

.traffic__label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.traffic__label::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.traffic p {
  margin: 2px 0 0;
  font-size: 0.86rem;
  line-height: 1.45;
}

.next-action {
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
  border: 1px solid var(--border);
}

.next-action strong {
  display: block;
  margin-bottom: 6px;
  font-size: 1.1rem;
}

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

.kpi-grid,
.panel-grid,
.metrics-grid,
.summary-grid,
.tech-pulse-grid,
.tech-sheet,
.workflow-grid,
.role-guide-grid,
.request-board {
  display: grid;
  gap: 18px;
}

.kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kpi-card,
.metric-card,
.tech-pulse-card {
  padding: 18px 20px 16px;
  border-radius: var(--radius-lg);
  background: var(--surface-tint-strong);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.kpi-card::before,
.metric-card::before,
.tech-pulse-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #0d9488, #7af6f6);
}

.kpi-card span,
.metric-card span,
.summary-grid span,
.tech-sheet__item span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.kpi-card strong,
.metric-card strong {
  display: block;
  margin: 12px 0 6px;
  font-size: 2.2rem;
  letter-spacing: -0.06em;
  line-height: 1;
  color: var(--ink);
  font-weight: 800;
}

.kpi-card p {
  margin: 0;
  color: var(--muted);
}

.tech-pulse-grid {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 12px;
}

.tech-pulse-card {
  background: var(--panel);
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.tech-pulse-card strong {
  display: block;
  flex-shrink: 0;
  font-size: 2.4rem;
  letter-spacing: -0.06em;
  line-height: 1;
  color: var(--accent);
  font-weight: 800;
  min-width: 1.8ch;
  padding-top: 1px;
}

.tech-pulse-card__body {
  flex: 1;
  min-width: 0;
}

.tech-pulse-card__body span {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  text-wrap: balance;
}

.tech-pulse-card p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.45;
  text-wrap: balance;
}

.panel-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workflow-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.workflow-card,
.role-guide-card,
.action-checklist__item,
.request-board__column,
.request-board__card {
  border: 1px solid rgba(122,246,246,.12);
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
}

.workflow-card {
  padding: 18px;
}

.workflow-card__step {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(13,148,136,.18);
  color: #5eead4;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
}

.workflow-card strong,
.role-guide-card strong,
.action-checklist__item strong,
.request-board__header strong {
  display: block;
  margin-bottom: 8px;
}

.workflow-card__value {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  margin-bottom: 10px;
}

.workflow-card p,
.role-guide-card p,
.action-checklist__item p,
.request-board__helper,
.request-board__card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.role-guide-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.role-guide-card,
.action-checklist__item {
  padding: 18px;
}

.action-checklist {
  display: grid;
  gap: 12px;
}

.request-board {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
}

.request-board__column {
  padding: 14px;
}

.request-board__header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}

.request-board__header span {
  min-width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 700;
}

.request-board__helper {
  margin-bottom: 12px;
  font-size: 0.8rem;
}

.request-board__list {
  display: grid;
  gap: 10px;
}

.request-board__card {
  padding: 12px;
}

.request-board__card small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
}

.request-board__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}


.panel__header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.flow-strip,
.stack-list,
.critical-list,
.timeline,
.alert-list,
.sources-list {
  display: grid;
  gap: 14px;
}

.flow-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.flow-card,
.alert-card {
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
  border: 1px solid rgba(122,246,246,.12);
  transition: box-shadow 0.15s, transform 0.12s;
}

.flow-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

.flow-card__count {
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 1;
  color: var(--ink);
}

.flow-card__label {
  margin: 10px 0 14px;
  font-weight: 700;
  font-size: 0.875rem;
}

.meter {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: var(--surface-tint-strong);
  overflow: hidden;
}

.meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-mid), var(--accent));
}

.meter--slim {
  width: 110px;
  height: 8px;
}

.stack-row,
.duration-row,
.critical-item,
.timeline__item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.stack-row__meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.metrics-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 18px;
}

.duration-table {
  display: grid;
  gap: 10px;
}

.duration-row {
  padding: 14px 0;
  border-top: 1px solid var(--border);
}

.summary-inline {
  display: flex;
  gap: 12px;
  color: var(--muted);
}

.summary-pill {
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  font-size: 0.84rem;
}

.filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
  border: 1px solid var(--border);
}

label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 0.92rem;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  background: var(--panel);
  color: var(--ink);
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: transparent;
}

.filters__actions,
.form-actions,
.action-row,
.quick-statuses {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.filters__actions {
  align-self: end;
}

.table-wrap {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th {
  text-align: left;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-bottom: 12px;
}

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

.table--matrix.table--matrix-readable th,
.table--matrix.table--matrix-readable td {
  white-space: normal;
  vertical-align: top;
}

.table--matrix.table--matrix-readable td {
  overflow-wrap: anywhere;
  line-height: 1.45;
}

.matrices-intro {
  background: var(--panel);
}

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

.matrix-summary-card {
  text-align: left;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--ink);
}

.matrix-summary-card.is-active {
  border-color: rgba(13, 148, 136, 0.30);
  box-shadow: 0 8px 20px rgba(13, 148, 136, 0.10);
}

.matrix-summary-card span {
  display: block;
  color: var(--muted);
  font-size: 0.85rem;
}

.matrix-summary-card strong {
  display: block;
  margin: 10px 0 8px;
  font-size: 1.2rem;
}

.matrix-summary-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.source-link {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
}

.source-link span {
  color: var(--muted);
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

.matrix-footnote {
  margin: 16px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.table td {
  padding: 16px 8px;
  border-top: 1px solid var(--border);
}

.table tr.is-overdue {
  background: rgba(202,90,77,.1);
  box-shadow: inset 3px 0 0 var(--red);
}

.table tbody tr:hover {
  background: var(--row-hover);
}

.mono {
  font-family: var(--font-mono);
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
}

.chip--info {
  background: rgba(32,199,234,.14);
  color: #67e8f9;
}

.chip--accent {
  background: rgba(13,148,136,.18);
  color: #5eead4;
}

.chip--warning {
  background: rgba(201,163,58,.14);
  color: #fcd34d;
}

.chip--danger {
  background: rgba(202,90,77,.14);
  color: #fca5a5;
}

.chip--success {
  background: rgba(79,155,97,.14);
  color: #86efac;
}

.chip--neutral {
  background: rgba(13,148,136,.14);
  color: #5eead4;
}

.chip--priority {
  background: rgba(13,148,136,.16);
  color: #5eead4;
}

.date-stack {
  display: grid;
  gap: 4px;
}

.detail-hero__chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.detail-layout {
  align-items: start;
}

.summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 18px;
}

.summary-grid div {
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
  border: 1px solid var(--border);
}

.summary-grid strong {
  display: block;
  margin-top: 10px;
  font-size: 1.05rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.service-summary-grid,
.service-callouts {
  display: grid;
  gap: 18px;
}

.service-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

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

.request-pipeline-card {
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--panel);
}

.request-pipeline-card span {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
}

.request-pipeline-card strong {
  display: block;
  margin-top: 10px;
  font-size: 1.5rem;
  line-height: 1;
}

.request-pipeline-card--neutral {
  background: var(--surface-tint);
}

.request-pipeline-card--warning {
  background: rgba(201,163,58,.08);
}

.request-pipeline-card--info {
  background: rgba(14,116,144,.08);
}

.request-pipeline-card--success {
  background: rgba(79,155,97,.08);
}

.service-decision-card {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  margin-bottom: 16px;
}

.service-decision-card--success {
  background: linear-gradient(180deg, rgba(79, 155, 97, 0.08), rgba(255, 255, 255, 0.98));
}

.service-decision-card--warning {
  background: linear-gradient(180deg, rgba(201, 163, 58, 0.12), rgba(255, 255, 255, 0.98));
}

.service-decision-card--danger {
  background: linear-gradient(180deg, rgba(202, 90, 77, 0.12), rgba(255, 255, 255, 0.98));
}

.service-decision-card--neutral {
  background: linear-gradient(180deg, rgba(13, 148, 136, 0.07), rgba(255, 255, 255, 0.98));
}

.service-decision-card__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
}

.service-callouts {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.service-callouts--compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 16px;
}

.service-callout {
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
  border: 1px solid var(--border);
}

.service-callout--compact {
  padding: 12px 14px;
}

.service-callout--compact p {
  font-size: 0.86rem;
  line-height: 1.45;
}

.service-callout span,
.table-note {
  display: block;
  color: var(--muted);
  font-size: 0.85rem;
}

.service-callout p,
.table-note {
  margin: 8px 0 0;
}

.risk-flag-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.service-source {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.service-history-list {
  display: grid;
  gap: 14px;
}

.service-history-item {
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
  border: 1px solid var(--border);
}

.service-history-item p,
.service-history-item small {
  margin: 8px 0 0;
  color: var(--muted);
}

.service-history-item__meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
}

.service-history-item__next-step {
  margin: 10px 0 8px;
  font-size: 0.84rem;
  color: var(--ink);
}

.service-history-item__header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.service-history-item__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.service-action-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.service-flow-note {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(13,148,136,.2);
  background: rgba(13,148,136,.08);
}

.service-flow-note strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
}

.service-flow-note p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.service-flow-note--modal {
  margin: 0 24px 8px;
}

.service-flow-note--wide {
  margin-bottom: 0;
}

.service-guide__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.service-guide__step {
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(122,246,246,.1);
  background: var(--bg-soft);
}

.service-guide__index {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.84rem;
  font-weight: 800;
  margin-bottom: 10px;
}

.service-guide__step strong {
  display: block;
  margin-bottom: 8px;
}

.service-guide__step p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.holding-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid;
  margin-bottom: 16px;
  font-size: 0.88rem;
}

.holding-alert--warning {
  background: rgba(202,138,4,.12);
  border-color: rgba(202,138,4,.4);
  color: #fcd34d;
}

.holding-alert--critical {
  background: rgba(234,88,12,.12);
  border-color: rgba(234,88,12,.4);
  color: #fdba74;
}

.holding-alert--expired {
  background: rgba(153,27,27,.14);
  border-color: rgba(252,165,165,.3);
  color: #fca5a5;
}

.chip--holding-expired {
  background: rgba(153,27,27,.14);
  color: #fca5a5;
  border: 1px solid rgba(252,165,165,.3);
}

.chip--holding-critical {
  background: rgba(234,88,12,.12);
  color: #fdba74;
  border: 1px solid rgba(234,88,12,.35);
}

.chip--holding-warning {
  background: rgba(202,138,4,.12);
  color: #fcd34d;
  border: 1px solid rgba(202,138,4,.35);
}

.chip--holding-ok {
  background: var(--bg-soft);
  color: var(--muted);
  border: 1px solid var(--border);
}

.chip--proceso {
  background: rgba(32,199,234,.14);
  color: #67e8f9;
}

.chip--atrasada {
  background: rgba(202,90,77,.14);
  color: #fca5a5;
}

.chip--lista {
  background: rgba(79,155,97,.14);
  color: #86efac;
}

.holding-none {
  color: var(--muted);
  font-size: 0.84rem;
}

.service-checklist {
  display: grid;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
}

.service-check-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.88rem;
}

.service-check-item:hover {
  background: var(--panel);
}

.service-check-item input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
}

.service-check-item span {
  font-weight: 600;
}

.service-check-item small {
  color: var(--muted);
  font-size: 0.76rem;
}

.linked-services {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  gap: 6px;
}

.linked-services li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
}

.linked-services li span {
  color: var(--muted);
  font-size: 0.8rem;
}

.panel__section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.service-layout {
  align-items: start;
}

.service-layout > .panel,
.matrices-intro,
.table-wrap {
  min-width: 0;
}

.table-wrap.table-wrap--stacked {
  overflow-x: visible;
}

.table-wrap.table-wrap--stacked .table {
  table-layout: fixed;
}

.table.table--services th:nth-child(1),
.table.table--services td:nth-child(1) {
  width: 18%;
}

.table.table--services th:nth-child(2),
.table.table--services td:nth-child(2) {
  width: 10%;
}

.table.table--services th:nth-child(3),
.table.table--services td:nth-child(3) {
  width: 10%;
}

.table.table--services th:nth-child(4),
.table.table--services td:nth-child(4) {
  width: 8%;
}

.table.table--services th:nth-child(5),
.table.table--services td:nth-child(5) {
  width: 12%;
}

.table.table--services th:nth-child(6),
.table.table--services td:nth-child(6) {
  width: 28%;
}

.table.table--services th:nth-child(7),
.table.table--services td:nth-child(7) {
  width: 14%;
}

.client-group {
  margin-bottom: 20px;
}

.client-group__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.client-group__header h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.client-group__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.tech-sheet {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 18px;
}

.tech-sheet__item {
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
  border: 1px solid var(--border);
}

.tech-sheet__item strong {
  display: block;
  margin-top: 8px;
  font-size: 0.98rem;
  line-height: 1.35;
}

.detail-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.detail-form--compact {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  margin: 18px 0;
}

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

.stage-rail {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.stage-pill {
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--muted);
  font-weight: 600;
  font-size: 0.84rem;
}

.stage-pill.is-current {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(13,148,136,0.30);
}

.timeline__item {
  align-items: flex-start;
}

.timeline__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 6px;
  background: var(--accent);
  flex: 0 0 auto;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.18);
}

.timeline p,
.timeline small,
.empty {
  margin: 6px 0 0;
  color: var(--muted);
}

.critical-item {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(122,246,246,.12);
  border-radius: var(--radius-md);
  background: var(--bg-soft);
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  transition: background .15s, border-color .15s;
}
.critical-item:hover {
  background: var(--surface-tint-strong);
  border-color: var(--accent-line);
}

.alert-card__rank {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(202, 90, 77, 0.14);
  color: var(--red);
  font-weight: 800;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px 20px;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(12px);
  z-index: 1200;
  overflow: auto;
}

.modal {
  position: relative;
  z-index: 1201;
  width: min(820px, calc(100vw - 40px));
  max-height: 90vh;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 24px;
  border-radius: 10px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
}

.modal__header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.modal .detail-form {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* ── Wizard ───────────────────────────────────────────────────────────────── */
.wizard-header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}

.wizard-steps {
  display: flex;
  align-items: center;
  gap: 0;
}

.wizard-step-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-soft);
  transition: color .18s;
}

.wizard-step-item.is-active {
  color: var(--ink);
}

.wizard-step-item.is-done {
  color: var(--accent-mid);
}

.wizard-step-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  background: var(--surface-tint-strong);
  border: 1.5px solid var(--border);
  flex-shrink: 0;
  transition: background .18s, border-color .18s;
}

.wizard-step-item.is-active .wizard-step-badge {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.wizard-step-item.is-done .wizard-step-badge {
  background: rgba(13,148,136,.25);
  border-color: var(--accent-mid);
  color: var(--accent-mid);
}

.wizard-step-connector {
  flex: 1;
  height: 1.5px;
  background: var(--border);
  margin: 0 4px;
  max-width: 36px;
}

.wizard-step-connector.is-done {
  background: var(--accent);
}

.wizard-progress {
  height: 3px;
  background: var(--surface-tint-strong);
  border-radius: 4px;
  overflow: hidden;
}

.wizard-progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width .25s ease;
}

.wizard-pane {
  display: none;
}

.wizard-pane.is-active {
  display: block;
}

.wizard-section {
  margin-bottom: 20px;
}

.wizard-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-mid);
  margin: 0 0 10px;
  padding: 0 0 6px;
  border-bottom: 1px solid rgba(13,148,136,.2);
}

.wizard-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

.wizard-footer__back {
  margin-right: auto;
}

.wizard-hint {
  font-size: 11px;
  color: var(--muted);
  margin-right: auto;
}

/* service checklist in wizard */
.wizard-pane .service-checklist {
  grid-template-columns: repeat(2, minmax(0,1fr));
}

.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1300;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(24, 32, 61, 0.92);
  color: #fff;
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.toast.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.toast.is-error {
  background: rgba(202, 90, 77, 0.96);
}

.empty-state {
  text-align: center;
  padding: 54px 24px;
}

@media (max-width: 1100px) {
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .panel-grid--two,
  .flow-strip,
  .filters,
  .tech-pulse-grid,
  .tech-sheet,
  .workflow-grid,
  .role-guide-grid,
  .request-board,
  .matrix-summary-grid,
  .service-summary-grid,
  .service-callouts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ─── Sidebar visibility via classes (replaces inline styles) ─────────────── */
.sidebar.is-open { display: flex; }
.sidebar:not(.is-open) { display: none; }

/* Collapsed state: sidebar hidden but config mode stays active */
.sidebar.is-collapsed { display: none; }
.main-wrap.sidebar-collapsed { margin-left: 0; }

/* Desktop: sidebar and content coexist side by side */
.main-wrap.has-sidebar { margin-left: var(--sidebar-w); }
.main-wrap:not(.has-sidebar) { margin-left: 0; }

/* Sidebar overlay — only visible on mobile to close the drawer */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(2px);
  display: none;
}

@media (max-width: 760px) {
  /* Mobile: sidebar becomes a drawer overlay, content stays at margin 0 */
  .sidebar.is-open {
    box-shadow: 4px 0 24px rgba(0,0,0,.3);
  }
  .main-wrap.has-sidebar {
    margin-left: 0;
  }
  /* Overlay only appears on mobile */
  .sidebar-overlay.is-visible { display: block; }

  .hero-panel,
  .detail-hero,
  .panel__header,
  .stack-row,
  .duration-row,
  .critical-item,
  .detail-form--compact {
    flex-direction: column;
    align-items: stretch;
  }

  .topbar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
    height: auto;
  }

  .topbar__page-title {
    font-size: 0.88rem;
  }

  .topbar__actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .kpi-grid,
  .panel-grid--two,
  .flow-strip,
  .metrics-grid,
  .summary-grid,
  .detail-form,
  .filters,
  .tech-pulse-grid,
  .tech-sheet,
  .workflow-grid,
  .role-guide-grid,
  .request-board,
  .matrix-summary-grid,
  .service-summary-grid,
  .service-callouts {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-panel__aside {
    min-width: 0;
  }

  .modal .detail-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .modal-backdrop {
    place-items: start center;
    padding-top: 16px;
  }

  .modal {
    max-height: calc(100vh - 32px);
  }
}

/* ─── Checklist de recepción ────────────────────────────────────────────── */

.checklist-progress {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--bg-soft);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.checklist-form {
  display: grid;
  gap: 8px;
}

.checklist-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel);
  transition: background 0.12s ease;
}

.checklist-item.is-checked {
  background: rgba(21,128,61,.12);
  border-color: rgba(134,239,172,.25);
}

.checklist-item__main {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 500;
}

.checklist-item__main input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--green);
  flex-shrink: 0;
}

.checklist-item__nota {
  width: 200px;
  padding: 5px 8px;
  font-size: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-soft);
  color: var(--ink);
}

.checklist-item__nota:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

/* ─── Restore label (styled as button) ──────────────────────────────────── */

.topbar__restore-label {
  cursor: pointer;
}

/* ─── Print stylesheet ───────────────────────────────────────────────────── */

@media print {
  .sidebar,
  .topbar,
  .view-nav,
  .topbar__actions,
  .panel__header .button,
  .action-row,
  .quick-statuses,
  #observationForm,
  #analystForm,
  #editSampleForm,
  #assignResponsibleForm,
  #checklistForm .form-actions,
  .holding-alert,
  [data-print-detail],
  [data-close-modal],
  [data-advance-stage],
  [data-retreat-stage] {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .app-shell {
    width: 100%;
    margin: 0;
  }

  .main-wrap {
    margin-left: 0;
    height: auto;
  }

  .content {
    overflow-y: visible;
  }

  .panel,
  .detail-hero,
  .panel-grid {
    box-shadow: none;
    border: 1px solid #ccc;
    break-inside: avoid;
  }

  .panel-grid--two {
    grid-template-columns: 1fr 1fr;
  }

  .checklist-item {
    break-inside: avoid;
  }

  .detail-hero {
    margin-bottom: 16px;
  }

  .sidebar {
    display: none;
  }

  .main-wrap {
    margin-left: 0;
  }
}

/* ─── Topbar dropdown menu ───────────────────────────────────────────────── */

.topbar__menu-wrap {
  position: relative;
}

.topbar__menu-trigger svg {
  width: 16px;
  height: 16px;
}

.topbar__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 500;
  min-width: 200px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 24px rgba(0,0,0,.45);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.topbar__dropdown[hidden] {
  display: none;
}

.topbar__dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s;
}

.topbar__dropdown-item:hover {
  background: var(--bg-soft);
}

.topbar__dropdown-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--muted);
}

.topbar__dropdown-item--danger {
  color: var(--red);
}

.topbar__dropdown-item--danger svg {
  color: var(--red);
}

.topbar__dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 3px 4px;
}

/* ─── Matrices editables ─────────────────────────────────────────────────── */

.table--editable td {
  padding: 6px 4px;
}

.matrix-cell-input {
  width: 100%;
  min-width: 80px;
  padding: 5px 8px;
  font-size: 0.82rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  color: var(--ink);
  transition: border-color 0.12s, background 0.12s;
}

.matrix-cell-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: transparent;
  background: var(--panel);
}

.matrix-delete-btn {
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.matrix-delete-btn:hover {
  background: rgba(220,38,38,.12);
  border-color: rgba(220,38,38,.4);
  color: #f87171;
}

.matrix-edit-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.matrix-modified-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
  margin-left: 4px;
}

.matrix-pill--modified {
  background: rgba(13, 148, 136, 0.09);
  color: var(--accent-dark);
  border-color: rgba(13, 148, 136, 0.25);
  font-size: 0.76rem;
}

/* ─── ETFA panel ─────────────────────────────────────────────────────────── */

.etfa-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 4px;
}

.etfa-status-card {
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--panel);
}

.etfa-status-card__label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-bottom: 8px;
}

.etfa-status-card__count {
  display: block;
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 6px;
}

.etfa-status-card--activo .etfa-status-card__count { color: #166534; }
.etfa-status-card--parcial .etfa-status-card__count { color: #92400e; }
.etfa-status-card--brecha .etfa-status-card__count { color: #991b1b; }

.etfa-param-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-top: 1px solid var(--border);
  font-size: 0.88rem;
}

.etfa-param-row__name {
  font-weight: 600;
}

.etfa-param-row__matrix {
  color: var(--muted);
  font-size: 0.82rem;
}

.etfa-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}

.etfa-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.etfa-badge--activo {
  background: rgba(21,128,61,.14);
  color: #86efac;
  border: 1px solid rgba(134,239,172,.25);
}

.etfa-badge--parcial {
  background: rgba(180,83,9,.14);
  color: #fcd34d;
  border: 1px solid rgba(252,211,77,.25);
}

.etfa-badge--no {
  background: var(--bg-soft);
  color: var(--muted);
  border: 1px solid var(--border);
}

.etfa-note {
  font-size: 0.8rem;
  color: var(--muted);
  font-style: italic;
}

.etfa-compliance-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 2fr;
  gap: 12px;
  align-items: start;
  padding: 11px 0;
  border-top: 1px solid var(--border);
  font-size: 0.88rem;
}

@media (max-width: 1100px) {
  .etfa-status-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .etfa-status-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .etfa-param-row,
  .etfa-compliance-row {
    grid-template-columns: 1fr;
  }
}

/* ─── Cotizador ─────────────────────────────────────────────────────────────── */

.cotizador-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
}

/* Tabs */
.cot-tabs {
  display: flex;
  gap: 2px;
  padding: 16px 20px 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.cot-tab {
  padding: 8px 18px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}

.cot-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.cot-tab:hover:not(.is-active) {
  color: var(--ink);
}

/* Package grid */
.cot-pkg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  padding: 20px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.cot-pkg-card {
  position: relative;
  background: var(--panel);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cot-pkg-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
}

.cot-pkg-card.is-selected {
  border-color: var(--accent);
  background: rgba(13,148,136,.08);
}

.cot-pkg-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cot-pkg-badge {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  padding: 2px 7px;
  border-radius: 4px;
}

.cot-pkg-uf {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink);
}

.cot-pkg-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.cot-pkg-sub {
  font-size: 0.75rem;
  color: var(--muted);
}

.cot-pkg-desc {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.4;
  flex: 1;
}

.cot-pkg-footer {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 4px;
}

.cot-pkg-footer svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.cot-pkg-check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 20px;
  height: 20px;
  background: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cot-pkg-check svg {
  width: 11px;
  height: 11px;
  stroke: white;
}

/* Summary bar */
.cot-summary-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: var(--panel);
  flex-shrink: 0;
}

.cot-summary-text {
  font-size: 0.8125rem;
  color: var(--muted);
}

.cot-summary-text strong {
  color: var(--ink);
}

/* A la medida */
.cot-medida-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.cot-medida-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.cot-search-input {
  flex: 1;
  max-width: 360px;
  height: 34px;
  padding: 0 12px;
  font-size: 0.8125rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-soft);
  color: var(--ink);
  outline: none;
}

.cot-search-input:focus {
  border-color: var(--accent);
  background: var(--bg-soft);
}

.cot-medida-count {
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
}

.cot-param-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.cot-param-header {
  display: grid;
  grid-template-columns: 1fr 160px 90px 80px;
  gap: 12px;
  padding: 8px 20px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}

.cot-param-row {
  display: grid;
  grid-template-columns: 1fr 160px 90px 80px;
  gap: 12px;
  padding: 9px 20px;
  font-size: 0.8rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  align-items: center;
  transition: background 0.1s;
}

.cot-param-row:hover {
  background: var(--bg-soft);
}

.cot-param-row.is-selected {
  background: rgba(13,148,136,.08);
}

.cot-param-check {
  display: none;
}

.cot-param-name {
  color: var(--ink);
  font-weight: 500;
  padding-left: 4px;
}

.cot-param-row.is-selected .cot-param-name::before {
  content: "✓ ";
  color: var(--accent);
  font-weight: 700;
}

.cot-param-matrices {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.cot-param-tag {
  font-size: 0.68rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--muted);
  white-space: nowrap;
}

.cot-param-unit {
  font-size: 0.75rem;
  color: var(--muted);
}

.cot-param-uf {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.cot-empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 0.8125rem;
}

/* ─── Encargo ────────────────────────────────────────────────────────────────── */

.cot-tab--primary { font-weight: 700; }
.cot-tab--primary.is-active { color: var(--accent); }

.cot-enc-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cot-enc-muestreo-toggle {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.cot-enc-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--fg);
  cursor: pointer;
}
.cot-enc-muestreo-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 6px;
  font-size: 0.8125rem;
}
.cot-enc-muestreo-label { color: var(--muted); }
.cot-enc-muestreo-uf { font-weight: 700; color: var(--accent); }

.cot-enc-puntos-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.cot-enc-punto {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.cot-enc-punto-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface-2);
  flex-wrap: wrap;
}
.cot-enc-mode-switch {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}
.cot-enc-mode-btn {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.cot-enc-mode-btn.is-active {
  background: var(--accent);
  color: var(--surface);
}
.cot-enc-nombre {
  flex: 1;
  min-width: 160px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  color: var(--fg);
  font-size: 0.8125rem;
}
.cot-enc-direccion {
  flex: 1.25;
  min-width: 220px;
}
.cot-enc-tipo {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  color: var(--fg);
  font-size: 0.8125rem;
}
.cot-enc-comuna {
  min-width: 150px;
}
.cot-enc-nmuestras-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
}
.cot-enc-nmuestras {
  width: 56px;
  padding: 5px 6px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  color: var(--fg);
  font-size: 0.8125rem;
  text-align: right;
}
.cot-enc-nombre:focus, .cot-enc-tipo:focus, .cot-enc-nmuestras:focus {
  outline: none;
  border-color: var(--accent);
}
.cot-enc-remove {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cot-enc-remove:hover { background: var(--border); color: var(--danger, #ef4444); }

.cot-enc-pkgs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
}
.cot-enc-medida {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}
.cot-enc-param-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-wrap: wrap;
}
.cot-enc-param-search {
  flex: 1 1 240px;
  max-width: none;
}
.cot-enc-param-count {
  font-size: 0.75rem;
  color: var(--muted);
}
.cot-enc-param-list {
  max-height: 280px;
  border: none;
}
.cot-enc-param-header,
.cot-enc-param-row {
  grid-template-columns: minmax(0, 1fr) 110px 88px 82px;
}
.cot-enc-param-header {
  padding: 8px 12px;
}
.cot-enc-param-row {
  padding: 8px 12px;
}
.cot-enc-param-row .cot-param-name {
  padding-left: 0;
}
.cot-enc-param-empty {
  padding: 18px 12px;
  font-size: 0.78rem;
  color: var(--muted);
}
.cot-enc-param-summary {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 0.78rem;
  color: var(--muted);
}
.cot-enc-param-summary strong {
  color: var(--accent);
}

.cot-enc-pkg {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  min-width: 140px;
  max-width: 200px;
  transition: border-color 0.12s, background 0.12s;
}
.cot-enc-pkg:hover { border-color: var(--accent); }
.cot-enc-pkg.is-suggested { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 4%, transparent); }
.cot-enc-pkg.is-selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.cot-enc-pkg-badge {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border-radius: 3px;
  padding: 1px 5px;
  align-self: flex-start;
  margin-bottom: 2px;
}
.cot-enc-pkg-name { font-size: 0.8rem; font-weight: 600; color: var(--fg); }
.cot-enc-pkg-sub { font-size: 0.7rem; color: var(--muted); }
.cot-enc-pkg-uf { font-size: 0.75rem; font-weight: 700; color: var(--accent); margin-top: 2px; }
.cot-enc-pkg-check {
  position: absolute;
  top: 6px; right: 8px;
  font-size: 0.875rem;
  color: var(--accent);
  font-weight: 700;
}

.cot-enc-punto-total {
  padding: 8px 14px;
  font-size: 0.8125rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.cot-enc-punto-total strong { color: var(--accent); }
.cot-enc-punto-hint { font-style: italic; font-size: 0.75rem; }
.cot-enc-preview-mode {
  color: var(--muted);
  font-size: 0.72rem;
}

.cot-enc-geo-panel {
  padding: 10px 12px 0;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 3%, var(--surface));
}

.cot-enc-geo-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.cot-enc-geo-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--muted);
  font-size: 0.74rem;
}

.cot-enc-geo-pill strong {
  color: var(--accent);
}

.cot-enc-geo-selected,
.cot-enc-geo-error {
  margin-top: 8px;
  font-size: 0.75rem;
}

.cot-enc-geo-selected {
  color: var(--muted);
}

.cot-enc-geo-error {
  color: #9a6700;
}

.cot-enc-geo-results {
  display: grid;
  gap: 8px;
  padding: 10px 0 12px;
}

.cot-enc-geo-result {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
}

.cot-enc-geo-result:hover {
  border-color: var(--accent);
}

.cot-enc-geo-result strong {
  font-size: 0.8rem;
  color: var(--fg);
}

.cot-enc-geo-result span {
  font-size: 0.72rem;
  color: var(--muted);
}

.cot-enc-options {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cot-enc-desc-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--muted);
}
.cot-enc-desc-input {
  width: 72px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  color: var(--fg);
  font-size: 0.8125rem;
  text-align: right;
}
.cot-enc-desc-input:focus { outline: none; border-color: var(--accent); }

.cot-enc-totals-panel {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.cot-enc-totals-empty {
  padding: 20px;
  text-align: center;
  color: var(--muted);
  font-size: 0.8125rem;
  font-style: italic;
}
.cot-enc-totals-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.cot-enc-totals-table thead th {
  padding: 10px 14px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--surface-2);
  text-align: left;
  color: var(--fg);
}
.cot-enc-totals-table tbody td,
.cot-enc-totals-table tfoot td {
  padding: 7px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
}
.cot-enc-subtotal-row td { font-weight: 600; background: color-mix(in srgb, var(--accent) 5%, transparent); }
.cot-enc-total-row td { font-weight: 700; font-size: 0.875rem; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent) !important; }
.cot-enc-uf-ref { font-size: 0.7rem !important; color: var(--muted); opacity: 0.7; padding-bottom: 10px !important; }

.cot-enc-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-bottom: 8px;
}

/* ─── Muestreo en terreno ──────────────────────────────────────────────────── */
.cot-m-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cot-m-group-header {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 20px 0 8px;
  border-bottom: 2px solid var(--accent);
  margin-bottom: 12px;
  margin-top: 12px;
}
.cot-m-group-header:first-child { margin-top: 0; }

.cot-m-section {
  margin-bottom: 20px;
}

.cot-m-section-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 8px;
}

.cot-m-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.cot-m-table thead th {
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
}
.cot-m-table tbody tr:hover td { background: var(--surface-2); }
.cot-m-table tbody td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--fg);
}
.cot-m-table tfoot td {
  padding: 6px 8px;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--fg);
  border-top: 2px solid var(--border);
  text-align: right;
}
.cot-m-table tfoot td:last-child { color: var(--accent); }

.cot-m-unit { color: var(--muted); font-size: 0.75rem; white-space: nowrap; }
.cot-m-cost { color: var(--muted); font-size: 0.75rem; white-space: nowrap; text-align: right; }
.cot-m-uf-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
}
.cot-m-qty-cell { width: 80px; }
.cot-m-subtotal { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.cot-m-qty-input {
  width: 68px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--fg);
  font-size: 0.8125rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cot-m-qty-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent);
}

.cot-m-fuel-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.cot-m-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 500;
}
.cot-m-field-input, .cot-m-select {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--fg);
  font-size: 0.8125rem;
  min-width: 100px;
}
.cot-m-field-input:focus, .cot-m-select:focus {
  outline: none;
  border-color: var(--accent);
}
.cot-m-field-result {
  padding: 5px 0;
  font-size: 0.8125rem;
  color: var(--fg);
}

.cot-m-fuel-result {
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: 6px;
  padding: 6px 10px;
  display: inline-block;
}

.cot-m-totals-panel {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.cot-m-totals-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.cot-m-totals-table thead th {
  padding: 10px 14px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg);
  background: var(--surface-2);
  text-align: left;
}
.cot-m-totals-table tbody td, .cot-m-totals-table tfoot td {
  padding: 6px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
}
.cot-m-totals-group td {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted) !important;
  background: var(--surface-2);
  padding: 8px 14px 4px !important;
}
.cot-m-subtotal-row td {
  font-weight: 600;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--accent) !important;
}
.cot-m-total-row td {
  font-weight: 700;
  font-size: 0.875rem !important;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent) !important;
}
.cot-m-totals-divider td {
  padding: 2px 0 !important;
  background: var(--border);
}
.cot-m-uf-row td {
  padding: 8px 14px;
  font-size: 0.8rem;
  color: var(--muted);
}
.cot-m-uf-row:first-child td { padding-top: 10px; }
.cot-m-uf-ref {
  font-size: 0.7rem !important;
  color: var(--muted);
  padding-bottom: 10px !important;
  opacity: 0.7;
}

.cot-m-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 0 8px;
}

/* Muestreo preview — firma */
.cot-m-signers {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  padding-top: 32px;
}
.cot-m-signers > div {
  text-align: center;
  font-size: 0.8125rem;
}
.cot-m-signers p { margin: 2px 0; }

/* Preview */
.cot-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.cot-preview-doc {
  max-width: 780px;
  margin: 24px auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  font-size: 0.825rem;
  color: var(--ink);
  line-height: 1.5;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
}

.cot-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 22px 36px 16px;
  background: var(--accent);
  color: #fff;
}

.cot-preview-lab {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cot-preview-lab strong {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #fff;
}

.cot-preview-lab span {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.72);
  font-weight: 400;
}

.cot-preview-ref {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.7);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: right;
}

.cot-preview-cover {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(240px, 0.7fr);
  gap: 20px;
  padding: 24px 36px 20px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 18%, transparent), transparent 44%),
    linear-gradient(180deg, rgba(13,148,136,.1), var(--bg) 82%);
  border-bottom: 1px solid var(--border);
}

.cot-preview-eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.cot-preview-title {
  margin: 0 0 8px;
  font-size: 1.55rem;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.cot-preview-lead {
  margin: 0;
  max-width: 50ch;
  font-size: 0.86rem;
  color: var(--muted);
}

.cot-preview-kpis {
  display: grid;
  gap: 10px;
}

.cot-preview-kpi {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.88);
}

.cot-preview-kpi span {
  display: block;
  margin-bottom: 5px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.cot-preview-kpi strong {
  font-size: 0.96rem;
  color: var(--ink);
}

/* Body padding injected after the header */
.cot-preview-doc .cot-preview-meta,
.cot-preview-doc .cot-preview-ensayo-table,
.cot-preview-doc .cot-preview-section,
.cot-preview-doc .cot-preview-notes,
.cot-preview-doc .cot-preview-summary-table,
.cot-preview-doc .cot-preview-conditions,
.cot-preview-doc .cot-preview-signature {
  padding-left: 36px;
  padding-right: 36px;
}

.cot-preview-doc .cot-preview-meta {
  padding-top: 24px;
}

.cot-preview-doc .cot-preview-signature {
  padding-bottom: 32px;
}

.cot-preview-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.cot-preview-client-form h3 {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0 0 10px;
}

.cot-client-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cot-client-fields label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 500;
}

.cot-field {
  height: 30px;
  padding: 0 8px;
  font-size: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-soft);
  color: var(--ink);
  outline: none;
}

.cot-field:focus {
  border-color: var(--accent);
  background: var(--bg-soft);
}

.cot-preview-greeting {
  font-size: 0.8rem;
  line-height: 1.7;
}

.cot-preview-greeting p:first-child {
  margin-top: 0;
}

.cot-preview-ensayo-table,
.cot-preview-params-table,
.cot-preview-summary-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
  font-size: 0.8rem;
}

.cot-preview-ensayo-table th,
.cot-preview-params-table th {
  background: var(--accent);
  color: #fff;
  padding: 8px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid var(--accent-dark);
}

.cot-preview-ensayo-table td,
.cot-preview-params-table td,
.cot-preview-summary-table td {
  padding: 6px 10px;
  border: 1px solid var(--border);
  vertical-align: top;
}

.cot-preview-summary-table {
  max-width: 300px;
  margin-left: auto;
}

.cot-total-row td {
  background: rgba(13,148,136,.12);
  color: var(--accent);
  font-weight: 700;
}

.text-right {
  text-align: right;
}

.cot-preview-section {
  margin-bottom: 20px;
}

.cot-preview-section h4 {
  font-size: 0.8rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cot-preview-notes {
  font-size: 0.75rem;
  color: var(--muted);
  padding: 12px 0;
  border-top: 1px solid var(--border);
  margin-bottom: 16px;
}

.cot-preview-conditions {
  font-size: 0.775rem;
  line-height: 1.6;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  margin-bottom: 16px;
}

.cot-preview-signature {
  font-size: 0.8rem;
  padding-top: 12px;
}

.planning-hero {
  background: linear-gradient(135deg, #0d3b66 0%, #146c94 52%, #f29f05 100%);
}

.planning-chip-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.planning-chip {
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
}

.planning-chip.is-active {
  background: rgba(255,255,255,.18);
  color: #fff;
}

.planning-filters {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.planning-area-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.planning-area-card,
.planning-focus-item {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.planning-area-card {
  padding: 18px;
  display: grid;
  gap: 14px;
}

.planning-area-card.is-active {
  border-color: color-mix(in srgb, var(--water) 50%, var(--border));
  box-shadow: 0 10px 28px rgba(13, 148, 136, 0.12);
}

.planning-area-card__header,
.planning-focus-item__top,
.planning-focus-item__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.planning-area-card__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.planning-area-card__stats span,
.planning-focus-item__meta span {
  display: block;
  color: var(--muted);
  font-size: 0.73rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.planning-area-card__stats strong {
  display: block;
  margin-top: 6px;
  font-size: 1.35rem;
  letter-spacing: -0.04em;
}

.planning-meter {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(37,99,235,.12);
}

.planning-meter span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--water), #f29f05);
}

.planning-area-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.planning-area-card__meta span,
.planning-focus-item__area,
.planning-badge {
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 0.72rem;
  font-weight: 700;
}

.planning-area-card__meta span,
.planning-focus-item__area {
  background: var(--bg-soft);
  color: var(--muted);
  border: 1px solid var(--border);
}

.planning-focus-list {
  display: grid;
  gap: 12px;
}

.planning-focus-item {
  padding: 16px;
}

.planning-focus-item strong {
  display: block;
  margin-top: 10px;
  margin-bottom: 8px;
}

.planning-focus-item p {
  margin: 0 0 10px;
  color: var(--muted);
  line-height: 1.5;
}

.planning-badge--pending {
  background: rgba(180,35,24,.14);
  color: #fca5a5;
}

.planning-badge--in_progress {
  background: rgba(15,118,110,.14);
  color: #5eead4;
}

.planning-badge--note {
  background: rgba(180,83,9,.14);
  color: #fcd34d;
}

.planning-meeting-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.planning-meeting-form__notes {
  grid-column: 1 / -1;
}

/* Print */
@media print {
  .sidebar,
  .topbar,
  .cot-preview-toolbar,
  .cot-preview-client-form,
  .no-print {
    display: none !important;
  }

  .main-wrap {
    margin-left: 0 !important;
    height: auto !important;
  }

  .content {
    overflow-y: visible !important;
  }

  .cot-preview-doc {
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 20px;
    max-width: 100%;
    box-shadow: none;
  }

  .cot-preview-meta {
    grid-template-columns: 1fr;
  }

  .cot-preview-cover {
    grid-template-columns: 1fr;
    padding-left: 0;
    padding-right: 0;
    background: transparent;
  }

  .cotizador-wrap {
    height: auto;
  }
}

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

  .planning-filters,
  .planning-area-grid,
  .planning-meeting-form {
    grid-template-columns: 1fr;
  }

  .cot-pkg-grid {
    grid-template-columns: 1fr;
  }

  .cot-param-header,
  .cot-param-row {
    grid-template-columns: 1fr 80px;
  }

  .cot-param-matrices,
  .cot-param-unit {
    display: none;
  }

  .cot-preview-meta {
    grid-template-columns: 1fr;
  }

  .cot-preview-cover {
    grid-template-columns: 1fr;
    padding: 20px;
  }
}




/* ═══════════════════════════════════════════════════════════════════════════
   Assai — Area system v2 — Premium
   ─────────────────────────────────────────────────────────────────────────── */

/* ─── User chip ──────────────────────────────────────────────────────────── */
.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
}
.user-chip__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.user-chip__role {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-mid);
  background: rgba(13,148,136,.18);
  padding: 2px 9px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: .02em;
}
.user-chip__signout {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  align-items: center;
  padding: 5px;
  border-radius: var(--radius-sm);
  transition: color .12s, background .12s;
}
.user-chip__signout:hover {
  color: #f87171;
  background: rgba(220,38,38,.12);
}

/* ─── User avatar (users management table) ─────────────────────────────────── */
.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(13,148,136,.28);
  color: var(--accent-mid);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ─── Home panel ─────────────────────────────────────────────────────────── */
.home-panel {
  min-height: calc(100vh - var(--topbar-h));
  background: var(--bg);
  font-family: var(--font-sans);
  display: flex;
  flex-direction: column;
}

/* Hero band */
.home-panel__hero {
  background: transparent;
  padding: 52px 48px 76px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.home-panel__hero::before {
  display: none;
}
.home-panel__eyebrow {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .14em;
  margin: 0 0 12px;
  position: relative;
}
.home-panel__title {
  font-size: 42px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.05em;
  margin: 0;
  line-height: 1.05;
  position: relative;
  max-width: 560px;
}

/* Cards overlap the bottom of the hero */
.home-panel__body {
  padding: 0 48px 72px;
  margin-top: -28px;
  position: relative;
  z-index: 1;
  flex: 1;
}
.home-panel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
  max-width: 1200px;
}

/* ─── Area card ──────────────────────────────────────────────────────────── */
.area-card {
  background: var(--surface-tint);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 22px 22px 18px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 20px rgba(0,0,0,.25);
  transition:
    background .18s,
    border-color .18s,
    box-shadow .24s cubic-bezier(.25,.46,.45,.94),
    transform  .24s cubic-bezier(.25,.46,.45,.94);
  position: relative;
  overflow: hidden;
}
/* Accent stripe on left edge */
.area-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--area-color, var(--accent));
  opacity: 0;
  transition: opacity .24s;
}
.area-card:hover {
  background: var(--surface-tint-strong);
  border-color: var(--accent-line);
  box-shadow: 0 8px 36px rgba(0,0,0,.4);
  transform: translateY(-6px);
}
.area-card:hover::before {
  opacity: 1;
}
.area-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
}
.area-card__area-tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--area-color, var(--accent));
  text-transform: uppercase;
  letter-spacing: .12em;
  background: color-mix(in srgb, var(--area-color, var(--accent)) 10%, transparent);
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}
.area-card__icon {
  color: var(--muted-soft);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.area-card__body {
  flex: 1;
  margin-bottom: 20px;
}
.area-card__big-number {
  font-size: 68px;
  font-weight: 800;
  color: var(--area-color, var(--accent));
  line-height: 1;
  letter-spacing: -.07em;
  display: block;
  margin-bottom: 5px;
}
.area-card__big-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-soft);
  letter-spacing: .01em;
  display: block;
}
/* Used when there's no number (muestreo) */
.area-card__no-number {
  font-size: 30px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.03em;
  line-height: 1.1;
  display: block;
  margin-bottom: 6px;
}
.area-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  margin-top: auto;
}
.area-card__note {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-soft);
}
.area-card__note.is-ok    { color: #16a34a; }
.area-card__note.is-warn  { color: #d97706; font-weight: 600; }
.area-card__note.is-alert { color: #dc2626; font-weight: 700; }
.area-card__cta {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 3px;
  letter-spacing: -.01em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ─── Area view shell ────────────────────────────────────────────────────── */
.area-view {
  min-height: calc(100vh - var(--topbar-h));
  background: var(--bg);
}

/* Stats bar — frosted strip with stat dividers, sticky on scroll */
.area-stats {
  background: var(--bg-soft);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--hairline);
  padding: 0 48px;
  display: flex;
  align-items: stretch;
  gap: 0;
  position: sticky;
  top: 0;
  z-index: 10;
}
.area-stat {
  padding: 20px 40px 20px 0;
  flex-shrink: 0;
}
/* Divider BEFORE each stat that follows another stat */
.area-stat + .area-stat {
  padding-left: 40px;
  border-left: 1px solid var(--hairline);
}
.area-stats__spacer {
  margin-left: auto;
  display: flex;
  align-items: center;
  padding: 14px 0;
}
.area-stat__value {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  margin-bottom: 4px;
  color: var(--ink);
  white-space: nowrap;
}
.area-stat__value.is-ok    { color: #16a34a; }
.area-stat__value.is-warn  { color: #d97706; }
.area-stat__value.is-alert { color: #dc2626; }
.area-stat__label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  white-space: nowrap;
}

.area-content {
  padding: 32px 48px;
}
.area-section { margin-bottom: 32px; }
.area-section__title {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin: 0 0 14px;
}

/* ─── Area table ─────────────────────────────────────────────────────────── */
.area-table {
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  overflow: hidden;
}
.area-table__head {
  padding: 10px 22px;
  background: var(--surface-tint);
  border-bottom: 1px solid var(--hairline);
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .09em;
  display: grid;
  align-items: center;
  gap: 16px;
}
.area-table__row {
  padding: 14px 22px;
  border-bottom: 1px solid var(--hairline);
  display: grid;
  align-items: center;
  gap: 16px;
  transition: background .1s;
}
.area-table__row:last-child { border-bottom: none; }
.area-table__row:hover      { background: var(--row-hover); }
.area-table__row.is-alert   { background: rgba(220,38,38,.08); }
.area-table__code {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  font-family: var(--font-mono);
  letter-spacing: .01em;
}
.area-table__sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.area-table__empty {
  padding: 64px 24px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}

/* ─── Stage pill ─────────────────────────────────────────────────────────── */
.stage-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.stage-pill--recepcion   { background: rgba(37,99,235,.15);  color: #93c5fd; }
.stage-pill--registro    { background: rgba(13,148,136,.18); color: #5eead4; }
.stage-pill--preparacion { background: rgba(180,83,9,.15);   color: #fcd34d; }
.stage-pill--analisis    { background: rgba(13,148,136,.15); color: #5eead4; }
.stage-pill--revision    { background: rgba(190,18,60,.15);  color: #fda4af; }
.stage-pill--informe     { background: rgba(21,128,61,.15);  color: #86efac; }

/* ─── Area button ────────────────────────────────────────────────────────── */
.area-btn {
  border: none;
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-sans);
  transition: opacity .12s, transform .12s;
  white-space: nowrap;
}
.area-btn:hover { opacity: .82; transform: translateY(-1px); }
.area-btn--primary {
  background: var(--accent);
  color: #fff;
}
.area-btn--ghost {
  background: rgba(13,148,136,.15);
  color: var(--accent-mid);
}
.area-btn--large {
  font-size: 13px;
  padding: 10px 20px;
  border-radius: var(--radius-md);
}
.area-btn--danger-ghost {
  background: rgba(220,38,38,.12);
  color: #f87171;
}

/* ─── Alert grid (Jefatura) ──────────────────────────────────────────────── */
.area-alerts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 16px;
  align-items: start;
}

/* ─── Jefatura filter bar ───────────────────────────────────────────────────── */
.jef-filter-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 0 0 14px;
}
.jef-filter-btn {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--muted);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background .12s, color .12s, border-color .12s;
}
.jef-filter-btn:hover {
  background: var(--surface-tint-strong);
  color: var(--ink);
}
.jef-filter-btn.is-active {
  background: rgba(13,148,136,.22);
  border-color: rgba(13,148,136,.5);
  color: var(--accent-mid);
}
.jef-filter-count {
  background: var(--surface-tint-strong);
  color: var(--ink);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
}
.jef-filter-count.is-accent {
  background: rgba(147,51,234,.3);
  color: #d8b4fe;
}

/* ─── Jefatura seal ─────────────────────────────────────────────────────────── */
.jef-seal {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #86efac;
  background: rgba(134,239,172,.12);
  border: 1px solid rgba(134,239,172,.25);
  border-radius: 6px;
  padding: 3px 9px;
  letter-spacing: .02em;
  font-family: var(--font-mono, monospace);
}

/* ─── Alert card ─────────────────────────────────────────────────────────── */
.alert-card {
  background: var(--surface-tint);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 20px rgba(0,0,0,.22);
}
.alert-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--hairline);
}
.alert-card__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.alert-card__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  flex: 1;
  letter-spacing: -.01em;
}
.alert-card__count {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 20px;
}
.alert-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--hairline);
  gap: 12px;
  transition: background .1s;
}
.alert-card__row:last-child { border-bottom: none; }
.alert-card__row:hover      { background: var(--row-hover); }

/* ─── Muestreo mobile form ───────────────────────────────────────────────── */
.muestreo-shell {
  min-height: calc(100vh - var(--topbar-h));
  background: var(--bg);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px 80px;
}
.muestreo-card {
  width: 100%;
  max-width: 560px;
  background: var(--surface-tint);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 40px;
  box-shadow:
    0 2px 20px rgba(0,0,0,.3),
    0 8px 40px rgba(0,0,0,.25);
}
.muestreo-card__title {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.03em;
  margin: 0 0 6px;
}
.muestreo-card__sub {
  font-size: 13px;
  color: var(--muted-soft);
  margin: 0 0 32px;
}
.muestreo-field { margin-bottom: 20px; }
.muestreo-field label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .09em;
  margin-bottom: 7px;
}
.muestreo-field input,
.muestreo-field select {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 15px;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--input-bg);
  transition: border-color .13s, box-shadow .13s;
  appearance: none;
}
.muestreo-field input:focus,
.muestreo-field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(13,148,136,.18);
}
.muestreo-submit {
  width: 100%;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: 14px;
  font-size: 14px;
  font-weight: 800;
  font-family: var(--font-sans);
  cursor: pointer;
  margin-top: 10px;
  letter-spacing: -.02em;
  transition: background .13s, transform .12s;
}
.muestreo-submit:hover { background: #2d1b69; transform: translateY(-1px); }
.muestreo-success {
  text-align: center;
  padding: 32px 0 16px;
}
.muestreo-success__icon {
  width: 56px;
  height: 56px;
  background: rgba(21,128,61,.16);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  color: #86efac;
}
.muestreo-success__title {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.03em;
  margin: 0 0 8px;
}
.muestreo-success__sub {
  font-size: 13px;
  color: var(--muted-soft);
  margin: 0 0 28px;
  line-height: 1.5;
}
.muestreo-success__meds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 20px;
}
.muestreo-success__med {
  display: inline-block;
  padding: 4px 11px;
  background: rgba(13,148,136,.18);
  color: var(--accent-mid);
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
  letter-spacing: -.01em;
}

/* ─── Muestreo selector screen ─────────────────────────────────────────────── */
.muestreo-shell--selector {
  background: var(--bg);
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
}
.muestreo-selector {
  width: 100%;
  max-width: 720px;
}
.muestreo-selector__header {
  margin-bottom: 40px;
}
.muestreo-selector__eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted-soft);
  margin: 0 0 12px;
}
.muestreo-selector__title {
  font-size: 28px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.045em;
  margin: 0;
  line-height: 1.15;
}
.muestreo-selector__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.muestreo-type-card {
  background: var(--surface-tint);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 32px 28px 30px;
  text-align: left;
  cursor: pointer;
  transition: background .18s, border-color .18s, transform .13s, box-shadow .18s;
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-family: var(--font-sans);
  box-shadow: 0 2px 20px rgba(0,0,0,.25);
}
.muestreo-type-card:hover {
  background: var(--surface-tint-strong);
  border-color: var(--accent-line);
  transform: translateY(-3px);
  box-shadow: 0 8px 36px rgba(0,0,0,.35);
}
.muestreo-type-card__badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-tint-strong);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 10px;
  align-self: flex-start;
}
.muestreo-type-card__icon {
  color: var(--muted);
  margin: 4px 0 2px;
}
.muestreo-type-card__name {
  font-size: 21px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.035em;
  margin: 0;
}
.muestreo-type-card__desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.muestreo-type-card__cta {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted-strong);
  margin-top: 4px;
  transition: color .15s;
}
.muestreo-type-card:hover .muestreo-type-card__cta { color: var(--accent); }

/* ── Wide card for MC-003 ── */
.muestreo-card--wide {
  max-width: 720px;
}

/* ── Back button ── */
.muestreo-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-soft);
  font-family: var(--font-sans);
  padding: 0;
  margin-bottom: 22px;
  transition: color .13s;
}
.muestreo-back-btn:hover { color: var(--accent); }

/* ── Radio groups ── */
.muestreo-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.muestreo-radio {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  padding: 7px 13px;
  background: var(--surface-tint);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  transition: background .12s, border-color .12s;
  user-select: none;
}
.muestreo-radio input[type="radio"] { accent-color: var(--accent); margin: 0; }
.muestreo-radio:has(input:checked) {
  background: rgba(13,148,136,.2);
  border-color: rgba(13,148,136,.45);
  color: var(--accent-mid);
}

/* ── Aliquots table ── */
.alicuotas-wrap {
  overflow-x: auto;
}
.alicuotas-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 520px;
}
.alicuotas-table th {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  padding: 0 8px 10px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1.5px solid var(--hairline);
}
.alicuotas-table td {
  padding: 5px 4px;
  vertical-align: middle;
}
.alicuota-n {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted-soft);
  text-align: center;
  min-width: 22px;
}
.alicuota-row:not(:last-child) td {
  border-bottom: 1px solid var(--hairline);
}
.alicuota-input {
  width: 100%;
  min-width: 60px;
  box-sizing: border-box;
  padding: 7px 9px;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--input-bg);
  transition: border-color .12s, box-shadow .12s;
  appearance: none;
}
.alicuota-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(13,148,136,.18);
}
.alicuota-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted-soft);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 5px;
  transition: color .12s, background .12s;
}
.alicuota-remove:hover { color: #f87171; background: rgba(220,38,38,.12); }
.alicuotas-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 8px 14px;
  background: none;
  border: 1.5px dashed rgba(255,255,255,.18);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: rgba(255,255,255,.45);
  cursor: pointer;
  transition: border-color .12s, color .12s;
}
.alicuotas-add-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

@media (max-width: 680px) {
  .muestreo-selector__cards { grid-template-columns: 1fr; gap: 12px; }
  .muestreo-selector__title { font-size: 22px; }
  .muestreo-type-card       { padding: 24px 22px; }
  .muestreo-shell--selector { padding: 40px 20px; }
}

/* ── MC-002 badge ── */
.muestreo-card__badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-mid);
  background: rgba(13,148,136,.18);
  border-radius: 6px;
  padding: 3px 9px;
  margin-bottom: 12px;
}

/* ── Sections ── */
.muestreo-section {
  border-top: 1px solid rgba(255,255,255,.07);
  padding-top: 24px;
  margin-top: 8px;
  margin-bottom: 4px;
}
.muestreo-section:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
.muestreo-section__title {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.35);
  margin: 0 0 18px;
}

/* ── Row layout (2-column) ── */
.muestreo-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ── Required asterisk ── */
.muestreo-req {
  color: #e53935;
  font-weight: 900;
  margin-left: 2px;
}

/* ── GPS button ── */
.muestreo-gps-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  background: rgba(13,148,136,.06);
  border: 1.5px dashed rgba(13,148,136,.22);
  border-radius: var(--radius-md);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-sans);
  padding: 11px 14px;
  cursor: pointer;
  margin-top: 2px;
  margin-bottom: 4px;
  transition: background .13s, border-color .13s;
}
.muestreo-gps-btn:hover {
  background: rgba(13,148,136,.1);
  border-color: rgba(13,148,136,.38);
}
.muestreo-gps-btn:disabled {
  opacity: .55;
  cursor: default;
}
.muestreo-gps-btn.is-success {
  background: rgba(22,163,74,.12);
  border-color: rgba(134,239,172,.3);
  color: #86efac;
}

/* ── Measurements grid ── */
.muestreo-measurements {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.muestreo-measure {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.muestreo-measure label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  letter-spacing: .09em;
}
.muestreo-measure__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.muestreo-measure__input-wrap input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 58px 10px 12px;
  border: 1.5px solid rgba(255,255,255,.12);
  border-radius: var(--radius-md);
  font-size: 15px;
  font-family: var(--font-sans);
  color: #fff;
  background: rgba(255,255,255,.07);
  transition: border-color .13s, box-shadow .13s;
  appearance: none;
}
.muestreo-measure__input-wrap input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(13,148,136,.18);
}
.muestreo-measure__unit {
  position: absolute;
  right: 12px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.35);
  pointer-events: none;
  white-space: nowrap;
}
.muestreo-measure__status {
  position: absolute;
  right: 42px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  flex-shrink: 0;
  transition: background-color .2s;
}
.muestreo-measure__status.is-ok   { background: #16a34a; }
.muestreo-measure__status.is-warn { background: #d97706; }
.muestreo-measure__status.is-bad  { background: #dc2626; }

/* ── Copyable código chip (success state) ── */
.muestreo-code-chip {
  display: inline-block;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .04em;
  font-family: var(--font-mono, monospace);
  color: var(--accent-mid);
  background: rgba(13,148,136,.18);
  border: 1.5px solid rgba(13,148,136,.35);
  border-radius: 10px;
  padding: 10px 22px;
  cursor: pointer;
  transition: background .13s, transform .1s;
  margin-bottom: 6px;
}
.muestreo-code-chip:hover {
  background: rgba(13,148,136,.28);
  transform: translateY(-1px);
}

/* ── Textarea in muestreo-field ── */
.muestreo-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1.5px solid rgba(255,255,255,.12);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-family: var(--font-sans);
  color: #fff;
  background: rgba(255,255,255,.07);
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
  transition: border-color .13s, box-shadow .13s;
}
.muestreo-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(13,148,136,.12);
}

/* ── Error message ── */
.muestreo-error {
  background: rgba(220,38,38,.12);
  border: 1.5px solid #fca5a5;
  border-radius: var(--radius-md);
  color: #b91c1c;
  font-size: 13px;
  font-weight: 500;
  padding: 11px 14px;
  margin-bottom: 14px;
}

/* ── Responsive adjustments ── */
@media (max-width: 580px) {
  .muestreo-row             { grid-template-columns: 1fr; }
  .muestreo-measurements    { grid-template-columns: 1fr 1fr; }
  .muestreo-card            { padding: 28px 22px; max-width: 100%; }
}

/* ─── Login screen ───────────────────────────────────────────────────────── */
.login-shell {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  font-family: var(--font-sans);
  position: relative;
  overflow: hidden;
  animation: assai-fadein .22s ease both;
}
@keyframes assai-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.login-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 80% at 85% -20%, rgba(13,148,136,.42) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at -15% 115%, rgba(13,148,136,.22) 0%, transparent 55%);
  pointer-events: none;
}
.login-card {
  background: rgba(255,255,255,.055);
  border: 1.5px solid rgba(255,255,255,.1);
  border-radius: 24px;
  padding: 50px 44px;
  width: 100%;
  max-width: 380px;
  box-shadow:
    0 4px 24px rgba(0,0,0,.35),
    0 32px 80px rgba(0,0,0,.4);
  position: relative;
  z-index: 1;
}
.login-card__eyebrow {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,.38);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin: 0 0 8px;
}
.login-card__title {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em;
  margin: 0 0 34px;
}
.login-field { margin-bottom: 18px; }
.login-field label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  letter-spacing: .09em;
  margin-bottom: 7px;
}
.login-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1.5px solid rgba(255,255,255,.12);
  border-radius: var(--radius-md);
  font-size: 15px;
  font-family: var(--font-sans);
  color: #fff;
  background: rgba(255,255,255,.07);
  transition: border-color .13s, box-shadow .13s;
}
.login-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(13,148,136,.18);
}
.login-error {
  background: rgba(185,28,28,.14);
  border: 1px solid rgba(252,165,165,.3);
  border-radius: var(--radius-md);
  padding: 10px 13px;
  font-size: 13px;
  color: #fca5a5;
  margin-bottom: 16px;
  display: none;
}
.login-submit {
  width: 100%;
  padding: 13px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 800;
  font-family: var(--font-sans);
  cursor: pointer;
  letter-spacing: -.02em;
  margin-top: 8px;
  transition: background .13s, transform .12s;
}
.login-submit:hover      { background: var(--accent-dark); transform: translateY(-1px); }
.login-submit:disabled   { opacity: .6; cursor: default; transform: none; }

/* ─── Admin area: filtros + grupos por cliente ──────────────────────────── */
.admin-filters {
  background: var(--surface-tint);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 14px 18px;
}
.admin-filters__row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 14px;
}
.admin-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  min-width: 160px;
}
.admin-filter select,
.admin-filter input {
  padding: 8px 10px;
  background: var(--input-bg);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  min-width: 160px;
}
.admin-filter select:focus,
.admin-filter input:focus {
  outline: none;
  border-color: var(--accent-line);
  background: var(--input-bg-focus);
}

.admin-group { margin-bottom: 18px; }
.admin-group[open] .admin-group__summary { border-bottom: 1px solid var(--hairline); }
.admin-group__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  background: var(--surface-tint);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  transition: background .12s;
}
.admin-group__summary::-webkit-details-marker { display: none; }
.admin-group__summary:hover { background: var(--surface-tint-strong); }
.admin-group__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.005em;
}
.admin-group__chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ─── Breadcrumb de áreas (back link en sub-modos como coach) ──────────── */
.area-breadcrumb {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 32px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
  padding-bottom: 12px;
  margin-bottom: 4px;
}
.area-breadcrumb__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.7);
  padding: 6px 12px 6px 9px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.area-breadcrumb__back:hover {
  background: rgba(255,255,255,.06);
  color: var(--ink);
  border-color: rgba(255,255,255,.20);
}
.area-breadcrumb__title {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.55);
  letter-spacing: -.005em;
}
.area-breadcrumb__source {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.55);
  padding: 4px 10px;
  background: rgba(13,148,136,.10);
  border: 1px solid rgba(13,148,136,.28);
  border-radius: 8px;
}
.area-breadcrumb__source strong {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0;
}

/* ─── Inbox de solicitudes (en Recepción) ──────────────────────────────── */
.inbox-origin {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-align: center;
}
.inbox-origin.is-web {
  background: rgba(37,99,235,.18);
  color: #93c5fd;
  border: 1px solid rgba(37,99,235,.35);
}
.inbox-origin.is-walkin {
  background: rgba(13,148,136,.18);
  color: #5eead4;
  border: 1px solid rgba(13,148,136,.35);
}

.inbox-status {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.inbox-status.is-nueva {
  background: rgba(217,119,6,.16);
  color: #fbbf24;
  border: 1px solid rgba(217,119,6,.35);
}
.inbox-status.is-proceso {
  background: rgba(122,246,246,.10);
  color: #7af6f6;
  border: 1px solid rgba(122,246,246,.28);
}
.inbox-status.is-aprobada {
  background: rgba(74,222,128,.12);
  color: #4ade80;
  border: 1px solid rgba(74,222,128,.32);
}
:root[data-theme="light"] .inbox-status.is-aprobada {
  background: rgba(5,150,105,.10);
  color: #059669;
  border-color: rgba(5,150,105,.30);
}

/* ─── Coach de proximidad (cotización rápida en Recepción) ──────────────── */
.coach-shell { gap: 24px; display: flex; flex-direction: column; }

.coach-disclaimer {
  margin: 8px 32px 0;
  padding: 8px 12px;
  font-size: 11px;
  color: var(--muted);
  background: var(--surface-tint);
  border-left: 2px solid var(--accent-line);
  border-radius: 4px;
  font-style: italic;
}

.coach-section__hint {
  font-size: 12px;
  color: rgba(255,255,255,.45);
  margin: -4px 0 14px;
  line-height: 1.5;
}

/* Sección "Paquetes normativos" — entrada rápida cuando el cliente pide un decreto completo */
.coach-pkg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.coach-pkg-card {
  text-align: left;
  background: var(--surface-tint);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  overflow: hidden;
  transition: background .12s, border-color .12s, transform .12s;
  display: flex;
  flex-direction: column;
  font-family: inherit;
  color: var(--ink);
}
.coach-pkg-card__main {
  text-align: left;
  background: transparent;
  border: none;
  padding: 14px 14px 12px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background .12s;
}
.coach-pkg-card__main:hover {
  background: rgba(94,234,212,.06);
}
.coach-pkg-card.is-added .coach-pkg-card__main:hover {
  background: rgba(94,234,212,.10);
}
.coach-pkg-card__expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 9px 14px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--hairline);
  color: var(--muted-strong);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.coach-pkg-card__expand-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
.coach-pkg-card__expand-icon {
  transition: transform .2s ease;
}
.coach-pkg-card.is-expanded .coach-pkg-card__expand-icon {
  transform: rotate(180deg);
}
.coach-pkg-card__params {
  list-style: none;
  margin: 0;
  padding: 4px 14px 12px;
  border-top: 1px solid var(--hairline);
  background: rgba(0,0,0,.10);
  max-height: 260px;
  overflow-y: auto;
  animation: pkgParamsFade .18s ease;
}
:root[data-theme="light"] .coach-pkg-card__params {
  background: rgba(10,39,48,.03);
}
@keyframes pkgParamsFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.coach-pkg-card__param {
  padding: 6px 0;
  border-bottom: 1px dashed var(--hairline);
}
.coach-pkg-card__param:last-child { border-bottom: none; }
.coach-pkg-card__param-name {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}
.coach-pkg-card__param-meta {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
  font-weight: 500;
}
/* Hover solo eleva sutil si no está expandido (para no mover algo grande) */
.coach-pkg-card:not(.is-expanded):hover {
  border-color: var(--accent-line);
  transform: translateY(-1px);
}
.coach-pkg-card.is-added {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.coach-pkg-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.coach-pkg-card__norma {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.coach-pkg-card__check {
  font-size: 10px;
  font-weight: 800;
  color: #7af6f6;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.coach-pkg-card__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin: 4px 0 0;
  line-height: 1.25;
}
.coach-pkg-card__meta {
  font-size: 11px;
  color: rgba(255,255,255,.42);
  margin: 0;
}
.coach-pkg-card__price {
  font-size: 16px;
  font-weight: 800;
  color: #5eead4;
  margin: 4px 0 0;
  font-variant-numeric: tabular-nums;
}

/* Param dim cuando ya está cubierto por un paquete agregado */
.coach-param.is-in-pkg {
  opacity: .5;
  border-style: dashed;
}
.coach-param.is-in-pkg .coach-param__uf {
  text-decoration: line-through;
  color: rgba(255,255,255,.35);
}
.coach-param__hint {
  font-size: 10px;
  font-weight: 700;
  color: #7af6f6;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-left: 6px;
}

.coach-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}

.coach-client__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.coach-input {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.42);
}
.coach-input--full { grid-column: 1 / -1; }
.coach-input input,
.coach-input textarea {
  padding: 9px 11px;
  background: var(--input-bg);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  resize: vertical;
}
.coach-input input:focus,
.coach-input textarea:focus {
  outline: none;
  border-color: var(--accent-line);
  background: var(--input-bg-focus);
}

.coach-matrix-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.coach-matrix-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  color: var(--muted-strong);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.coach-matrix-chip:hover {
  background: var(--surface-tint);
  border-color: var(--border);
  color: var(--ink);
}
.coach-matrix-chip.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.coach-matrix-chip__count {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted-soft);
  background: var(--surface-tint);
  padding: 1px 6px;
  border-radius: 10px;
}
.coach-matrix-chip.is-active .coach-matrix-chip__count {
  background: rgba(94,234,212,.18);
  color: var(--accent);
}

.coach-search {
  width: 100%;
  padding: 10px 13px;
  background: var(--input-bg);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  margin-bottom: 12px;
}
.coach-search:focus {
  outline: none;
  border-color: var(--accent-line);
  background: var(--input-bg-focus);
}

.coach-section__sub {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.32);
  margin: 14px 0 6px;
}
.coach-selected,
.coach-pool {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.coach-pool {
  max-height: 480px;
  overflow-y: auto;
  padding-right: 6px;
}

.coach-param {
  display: grid;
  grid-template-columns: 22px 1fr 130px 70px;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  background: var(--surface-tint);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.coach-param:hover { background: var(--surface-tint-strong); border-color: var(--border); }
.coach-param.is-selected {
  background: rgba(13,148,136,.14);
  border-color: rgba(13,148,136,.5);
}
.coach-param input[type=checkbox] { accent-color: #0d9488; }
.coach-param__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.coach-param__matrix {
  font-size: 11px;
  color: rgba(255,255,255,.42);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.coach-param__uf {
  font-size: 12px;
  font-weight: 700;
  color: #5eead4;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.coach-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 16px;
}

.coach-card {
  background: linear-gradient(135deg, rgba(13,148,136,.10), rgba(122,246,246,.05));
  border: 1px solid rgba(122,246,246,.22);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.coach-card__head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 10px;
  margin-bottom: 10px;
}
.coach-card__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 2px;
}
.coach-card__norma {
  font-size: 11px;
  color: rgba(255,255,255,.5);
  margin: 0;
}
.coach-savings {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: #16a34a;
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.coach-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 10px;
}
.coach-progress__bar {
  flex: 1;
  height: 6px;
  background: var(--surface-tint-strong);
  border-radius: 3px;
  overflow: hidden;
}
.coach-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, #0d9488, #7af6f6);
  border-radius: 3px;
  transition: width .25s;
}
.coach-progress__label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.6);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.coach-missing {
  font-size: 12px;
  color: rgba(255,255,255,.65);
  margin: 0 0 12px;
  line-height: 1.6;
}
.coach-missing strong { color: var(--ink); margin-right: 4px; }
.coach-missing__chip {
  display: inline-block;
  padding: 2px 7px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 5px;
  font-size: 11px;
  margin: 2px 2px 2px 0;
}
.coach-missing__more {
  font-size: 11px;
  color: rgba(255,255,255,.4);
  font-style: italic;
}

.coach-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
  border: 1px dashed var(--hairline);
  border-radius: 12px;
}

.coach-cart-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-tint);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 13px;
}
.coach-cart-row__sub {
  font-size: 11px;
  color: var(--muted);
}

@media (max-width: 1024px) {
  .coach-grid           { grid-template-columns: 1fr; }
  .coach-client__grid   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coach-side           { position: static; }
}
@media (max-width: 640px) {
  .coach-client__grid   { grid-template-columns: 1fr; }
  .coach-param          { grid-template-columns: 22px 1fr 70px; }
  .coach-param__matrix  { display: none; }
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .home-panel__hero { padding: 44px 32px 72px; }
  .home-panel__body { padding: 0 32px 64px; }
  .topbar--wide     { padding: 0 32px; }
  .area-stats       { padding: 0 32px; }
  .area-content     { padding: 28px 32px; }
  .area-alerts-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .home-panel__hero  { padding: 30px 20px 58px; }
  .home-panel__title { font-size: 28px; }
  .home-panel__body  { padding: 0 16px 52px; margin-top: -18px; }
  .home-panel__grid  { grid-template-columns: 1fr; gap: 12px; }
  .area-card         { padding: 22px 22px 18px; }
  .area-card__big-number { font-size: 52px; }
  .topbar--wide      { padding: 0 20px; }
  .area-stats        { padding: 0 20px; overflow-x: auto; flex-wrap: nowrap; }
  .area-stat         { padding: 14px 24px 14px 0; flex-shrink: 0; }
  .area-stat + .area-stat { padding-left: 24px; }
  .area-stat__value  { font-size: 26px; }
  .area-content      { padding: 20px 16px; }
  .area-table__head,
  .area-table__row   { padding: 10px 16px; font-size: 12px; }
  .area-alerts-grid  { grid-template-columns: 1fr; }
  .muestreo-card     { padding: 28px 24px; border-radius: 16px; }
  .login-card        { padding: 36px 28px; border-radius: 20px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ASSAI v2 — Monochromatic override layer (MVP pro)
   ───────────────────────────────────────────────────────────────────────────
   Neutraliza el sistema de colores por área y simplifica todo a:
   ink + 3 opacidades + un único accent (#5eead4) + crítico solo cuando importa.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Stats — value mono, modificadores opcionales */
.area-stat__value          { color: var(--ink) !important; font-weight: 800; }
.area-stat__value.is-accent    { color: var(--accent) !important; }
.area-stat__value.is-attention { color: var(--accent) !important; }
.area-stat__value.is-critical  { color: var(--critical) !important; }
.area-stat__value.is-muted     { color: var(--muted-soft) !important; }

/* Area cards — todos al accent, ignoran inline --area-color */
.area-card               { --area-color: var(--accent) !important; }
.area-card__big-number   { color: var(--ink); }
.area-card__big-label,
.area-card__no-number    { color: var(--muted); }
.area-card__area-tag     { color: var(--muted-strong); }
.area-card__icon         { color: var(--accent); }
.area-card__cta          { color: var(--accent); }
.area-card__note.is-alert { color: var(--accent); }
.area-card__note.is-ok    { color: var(--muted); }

/* Stage pills — un solo estilo, sin per-stage colors */
.stage-pill,
.stage-pill--recepcion,
.stage-pill--registro,
.stage-pill--preparacion,
.stage-pill--analisis,
.stage-pill--revision,
.stage-pill--informe {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border: 1px solid var(--accent-line) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
}

/* Chips — tres familias: default mono, accent, critical */
.chip,
.chip--neutral,
.chip--priority,
.chip--proceso,
.chip--lista {
  background: rgba(255,255,255,.06) !important;
  color: var(--muted-strong) !important;
  border: 1px solid var(--hairline) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
}
.chip--atrasada,
.chip--holding-critical {
  background: var(--critical-soft) !important;
  color: var(--critical) !important;
  border: 1px solid rgba(239,68,68,.32) !important;
}

/* Coach: cards sin gradientes, hairline + accent stroke */
.coach-card {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid var(--hairline) !important;
  border-left: 2px solid var(--accent) !important;
}
.coach-savings {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border: 1px solid var(--accent-line);
  font-weight: 700;
}
.coach-progress__fill {
  background: var(--accent) !important;
}
.coach-pkg-card {
  background: var(--surface-tint) !important;
  border: 1px solid var(--hairline) !important;
}
.coach-pkg-card:not(.is-expanded):hover {
  border-color: var(--accent-line) !important;
}
.coach-pkg-card.is-added {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.coach-pkg-card__check { color: var(--accent) !important; }
.coach-pkg-card__price { color: var(--ink) !important; }
.coach-param.is-selected {
  background: var(--accent-soft) !important;
  border-color: var(--accent-line) !important;
}
.coach-param__uf { color: var(--accent) !important; }
.coach-param__hint { color: var(--accent) !important; }

/* Inbox cells — clases que reemplazan inline styles */
.area-table__code-soft { font-weight: 500; color: var(--muted); }
.area-table__check {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.area-table__check.is-done    { color: var(--accent); }
.area-table__check.is-pending { color: var(--muted-strong); }

.inbox-cell-strong { font-size: 12px; font-weight: 700; color: var(--muted-strong); }
.inbox-cell-uf     { font-size: 12px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.inbox-cell-date   { font-size: 11px; color: var(--muted); }

/* Inbox origin/status — todos a la familia accent + mono */
.inbox-origin.is-web,
.inbox-origin.is-walkin {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border: 1px solid var(--accent-line) !important;
}
.inbox-origin.is-web::before  { content: "·"; margin-right: 4px; opacity: .5; }
.inbox-status.is-nueva {
  background: rgba(255,255,255,.06) !important;
  color: var(--muted-strong) !important;
  border: 1px solid var(--hairline) !important;
}
.inbox-status.is-proceso {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border: 1px solid var(--accent-line) !important;
}

/* Admin — celdas mono */
.admin-date { font-weight: 600; color: var(--ink); }
.admin-date__sub { font-size: 11px; color: var(--muted); }
.admin-entrega { font-size: 12px; color: var(--muted); font-weight: 500; }
.admin-entrega.is-done { color: var(--accent); font-weight: 700; }
.admin-pending { color: var(--muted-soft); font-size: 13px; }

/* Buttons — area-btn primary al accent puro */
.area-btn--primary {
  background: var(--accent) !important;
  color: #062520 !important;
  border-color: var(--accent) !important;
  font-weight: 700;
}
.area-btn--primary:hover {
  background: var(--accent-strong) !important;
  border-color: var(--accent-strong) !important;
}
.area-btn--ghost {
  background: transparent !important;
  color: var(--muted-strong) !important;
  border-color: var(--hairline) !important;
}
.area-btn--ghost:hover {
  background: var(--surface-tint) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}

/* Botones legacy — preservar accent en .button (CTA primaria),
   .button--ghost queda mono. */
.button:hover {
  background: var(--accent-strong);
}
.button--ghost {
  background: transparent !important;
  border: 1px solid var(--hairline) !important;
  color: var(--muted-strong) !important;
  box-shadow: none !important;
}
.button--ghost:hover {
  background: var(--surface-tint) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
  filter: none !important;
}
.button--secondary {
  background: var(--accent) !important;
  color: #fff;
}

/* Panels — sin shadow, hairline */
.panel {
  background: var(--bg-soft) !important;
  border: 1px solid var(--hairline) !important;
  box-shadow: none !important;
}

/* Sidebar — alineado al sistema */
.sidebar { background: var(--bg-deep); border-right: 1px solid var(--hairline); }
.sidebar__item.is-active {
  background: var(--accent-soft) !important;
  color: var(--ink) !important;
  border-left: 2px solid var(--accent) !important;
}

/* Topbar */
.topbar {
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
}

/* Home panel — quitar gradientes ruidosos */
.home-panel__hero {
  background: transparent !important;
}
.home-panel__hero::before { display: none !important; }

/* Login — alineado al sistema */
.login-shell { background: var(--bg); }
.login-card  { background: var(--bg-soft); border: 1px solid var(--hairline); box-shadow: none; }

/* Quitar shadow generico */
.area-table { box-shadow: none !important; border-color: var(--hairline) !important; }

/* Trafic light variants — mono+critical */
.traffic--green  { background: var(--accent-soft); color: var(--accent); }
.traffic--yellow { background: rgba(255,255,255,.06); color: var(--muted-strong); }
.traffic--red    { background: var(--critical-soft); color: var(--critical); }

/* User chip — accent badge para rol */
.user-chip__role {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}

/* ─── Dashboard alert (inbox notifier) ─────────────────────────────────── */
.dashboard-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 16px 20px;
  margin-bottom: 22px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
}
.dashboard-alert__body {
  display: flex;
  align-items: center;
  gap: 14px;
}
.dashboard-alert__icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(94,234,212,.18);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dashboard-alert__title {
  font-size: 14px;
  color: var(--ink);
  font-weight: 700;
  display: block;
}
.dashboard-alert__sub {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* KPI cards en dashboard — alineados al sistema */
.kpi-card,
.kpi-grid > * {
  background: var(--bg-soft) !important;
  border: 1px solid var(--hairline) !important;
  box-shadow: none !important;
}

/* Flow strip (embudo comercial en dashboard) */
.flow-card {
  background: var(--bg-soft) !important;
  border: 1px solid var(--hairline) !important;
}
.flow-card__count { color: var(--accent) !important; }
.flow-card__label { color: var(--muted-strong) !important; }

/* Stack list (estado general por etapa) */
.stack-row {
  border-bottom: 1px solid var(--hairline) !important;
}
.stack-row strong { color: var(--ink); }
.stack-row__meta span { color: var(--accent); font-weight: 700; }

/* ─── Config gear (admin) — entra a modo Configuración ─────────────── */
.user-chip__gear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 7px;
  color: var(--muted-strong);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s, transform .12s;
}
.user-chip__gear:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-line);
  transform: rotate(45deg);
}

/* ─── Theme toggle button (en user chip) ─────────────────────────────── */
.user-chip__theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 7px;
  color: var(--muted-strong);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.user-chip__theme:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-line);
}

/* ─── Light theme overrides para componentes con rgba blanco hardcoded ─── */

:root[data-theme="light"] body {
  /* Background base ya viene de --bg pero por safety reseteamos cualquier
     gradiente residual del dark theme. */
  background: var(--bg);
  color: var(--ink);
}

/* Tablas / rows que usan rgba(255,255,255,X) — switch al surface tint */
:root[data-theme="light"] .area-table {
  background: var(--bg-soft) !important;
  border-color: var(--hairline) !important;
}
:root[data-theme="light"] .area-table__head {
  background: var(--surface-tint) !important;
  color: var(--muted) !important;
  border-bottom-color: var(--hairline) !important;
}
:root[data-theme="light"] .area-table__row {
  border-bottom-color: var(--hairline) !important;
}
:root[data-theme="light"] .area-table__row:hover {
  background: var(--row-hover) !important;
}
:root[data-theme="light"] .area-table__code { color: var(--ink); }
:root[data-theme="light"] .area-table__sub  { color: var(--muted); }
:root[data-theme="light"] .area-table__empty { color: var(--muted); }

/* Stat values + labels */
:root[data-theme="light"] .area-stat__value { color: var(--ink) !important; }
:root[data-theme="light"] .area-stat__label { color: var(--muted) !important; }

/* Coach: inputs, search, picker rows */
:root[data-theme="light"] .coach-search,
:root[data-theme="light"] .coach-input input,
:root[data-theme="light"] .coach-input textarea,
:root[data-theme="light"] .admin-filter input,
:root[data-theme="light"] .admin-filter select,
:root[data-theme="light"] .topbar__search-input {
  background: var(--input-bg) !important;
  border-color: var(--hairline) !important;
  color: var(--ink) !important;
}
:root[data-theme="light"] .coach-search:focus,
:root[data-theme="light"] .coach-input input:focus,
:root[data-theme="light"] .coach-input textarea:focus,
:root[data-theme="light"] .admin-filter input:focus,
:root[data-theme="light"] .admin-filter select:focus,
:root[data-theme="light"] .topbar__search-input:focus {
  background: var(--input-bg-focus) !important;
  border-color: var(--accent-line) !important;
}

:root[data-theme="light"] .coach-param {
  background: var(--surface-tint) !important;
  border-color: var(--hairline) !important;
  color: var(--ink);
}
:root[data-theme="light"] .coach-param:hover {
  background: var(--surface-tint-strong) !important;
}
:root[data-theme="light"] .coach-param.is-selected {
  background: var(--accent-soft) !important;
  border-color: var(--accent-line) !important;
}
:root[data-theme="light"] .coach-param__name { color: var(--ink); }
:root[data-theme="light"] .coach-param__matrix { color: var(--muted); }

:root[data-theme="light"] .coach-card,
:root[data-theme="light"] .coach-pkg-card,
:root[data-theme="light"] .coach-cart-row {
  background: var(--bg-soft) !important;
  border-color: var(--hairline) !important;
}
:root[data-theme="light"] .coach-card { border-left-color: var(--accent) !important; }
:root[data-theme="light"] .coach-card__name,
:root[data-theme="light"] .coach-pkg-card__name { color: var(--ink); }
:root[data-theme="light"] .coach-card__norma,
:root[data-theme="light"] .coach-pkg-card__norma,
:root[data-theme="light"] .coach-pkg-card__meta { color: var(--muted); }
:root[data-theme="light"] .coach-pkg-card {
  background: var(--bg-soft) !important;
}
:root[data-theme="light"] .coach-pkg-card.is-added {
  background: var(--bg-soft) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent) inset;
}
:root[data-theme="light"] .coach-pkg-card:not(.is-expanded):hover {
  border-color: var(--accent-line) !important;
}
:root[data-theme="light"] .coach-pkg-card__main:hover {
  background: rgba(13,148,136,.05) !important;
}
:root[data-theme="light"] .coach-progress__bar {
  background: var(--surface-tint-strong) !important;
}
:root[data-theme="light"] .coach-empty {
  border-color: var(--hairline) !important;
  color: var(--muted) !important;
}
:root[data-theme="light"] .coach-missing {
  color: var(--muted-strong) !important;
}
:root[data-theme="light"] .coach-missing__chip {
  background: var(--surface-tint) !important;
  border-color: var(--hairline) !important;
}
:root[data-theme="light"] .coach-disclaimer {
  background: var(--surface-tint) !important;
  color: var(--muted-strong) !important;
}

/* Admin filters */
:root[data-theme="light"] .admin-filters {
  background: var(--bg-soft) !important;
  border-color: var(--hairline) !important;
}
:root[data-theme="light"] .admin-filter {
  color: var(--muted) !important;
}
:root[data-theme="light"] .admin-group__summary {
  background: var(--surface-tint) !important;
  border-color: var(--hairline) !important;
}
:root[data-theme="light"] .admin-group__summary:hover {
  background: var(--surface-tint-strong) !important;
}
:root[data-theme="light"] .admin-group__name { color: var(--ink); }

/* Buttons en light */
:root[data-theme="light"] .area-btn--ghost {
  color: var(--muted-strong) !important;
  border-color: var(--hairline) !important;
}
:root[data-theme="light"] .area-btn--ghost:hover {
  background: var(--surface-tint) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}
:root[data-theme="light"] .area-btn--primary {
  background: var(--accent) !important;
  color: #ffffff !important;
}
:root[data-theme="light"] .area-btn--primary:hover {
  background: var(--accent-strong) !important;
}

/* Topbar y sidebar en light */
:root[data-theme="light"] .topbar {
  background: var(--bg-soft);
  border-bottom-color: var(--hairline);
}
:root[data-theme="light"] .topbar__page-title { color: var(--ink); }
:root[data-theme="light"] .sidebar {
  background: var(--bg-soft);
  border-right-color: var(--hairline);
}
:root[data-theme="light"] .sidebar__item:hover {
  background: var(--accent-soft);
  color: var(--ink);
}
:root[data-theme="light"] #labName { color: var(--ink); }
:root[data-theme="light"] #labTagline { color: var(--muted); }

/* Login en light */
:root[data-theme="light"] .login-shell { background: var(--bg); }
:root[data-theme="light"] .login-card  {
  background: var(--bg-soft);
  border-color: var(--hairline);
  box-shadow: 0 1px 2px rgba(10,39,48,.05), 0 8px 24px rgba(10,39,48,.06);
}
:root[data-theme="light"] .login-card__eyebrow { color: var(--accent); }
:root[data-theme="light"] .login-card__title { color: var(--ink); }
:root[data-theme="light"] .login-field label { color: var(--muted-strong); }
:root[data-theme="light"] .login-field input {
  background: var(--input-bg);
  border-color: var(--hairline);
  color: var(--ink);
}

/* Area cards en light: hover */
:root[data-theme="light"] .area-card {
  background: var(--bg-soft) !important;
  border-color: var(--hairline) !important;
}
:root[data-theme="light"] .area-card__big-number,
:root[data-theme="light"] .area-card__no-number { color: var(--ink); }
:root[data-theme="light"] .area-card__big-label { color: var(--muted); }
:root[data-theme="light"] .area-card__area-tag { color: var(--muted-strong); }
:root[data-theme="light"] .area-card:hover {
  background: var(--accent-soft) !important;
  border-color: var(--accent-line) !important;
}

/* Inbox section */
:root[data-theme="light"] .inbox-cell-strong { color: var(--muted-strong); }
:root[data-theme="light"] .inbox-cell-date { color: var(--muted); }

/* Dashboard alert */
:root[data-theme="light"] .dashboard-alert {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}
:root[data-theme="light"] .dashboard-alert__title { color: var(--ink); }
:root[data-theme="light"] .dashboard-alert__sub { color: var(--muted); }

/* Panels generic */
:root[data-theme="light"] .panel {
  background: var(--bg-soft) !important;
  border-color: var(--hairline) !important;
  color: var(--ink);
}
:root[data-theme="light"] .panel h2,
:root[data-theme="light"] .panel h3,
:root[data-theme="light"] .panel h4 { color: var(--ink); }
:root[data-theme="light"] .muted { color: var(--muted); }

/* User chip en light */
:root[data-theme="light"] .user-chip__name { color: var(--ink); }
:root[data-theme="light"] .user-chip__theme,
:root[data-theme="light"] .user-chip__signout {
  border-color: var(--hairline);
  color: var(--muted-strong);
}
:root[data-theme="light"] .user-chip__theme:hover,
:root[data-theme="light"] .user-chip__signout:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-line);
}

/* Coach matrix chips en light */
:root[data-theme="light"] .coach-matrix-chip {
  border-color: var(--hairline);
  color: var(--muted-strong);
}
:root[data-theme="light"] .coach-matrix-chip:hover {
  background: var(--surface-tint);
  color: var(--ink);
}
:root[data-theme="light"] .coach-matrix-chip__count {
  background: var(--surface-tint);
  color: var(--muted);
}

/* Area breadcrumb en light */
:root[data-theme="light"] .area-breadcrumb {
  border-bottom-color: var(--hairline);
}
:root[data-theme="light"] .area-breadcrumb__back {
  border-color: var(--hairline);
  color: var(--muted-strong);
}
:root[data-theme="light"] .area-breadcrumb__back:hover {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

/* Sidebar footer + brand */
:root[data-theme="light"] .sidebar__divider { background: var(--hairline); }
:root[data-theme="light"] .assai-wordmark { color: var(--muted-strong); }
:root[data-theme="light"] .date-chip {
  /* Already accent — solo asegurar contraste */
  background: var(--accent-soft) !important;
  color: var(--accent-strong) !important;
}

/* Topbar dropdown menu (export / restore) */
:root[data-theme="light"] .topbar__dropdown {
  background: var(--bg-soft);
  border-color: var(--hairline);
  box-shadow: 0 4px 16px rgba(10,39,48,.08);
}
:root[data-theme="light"] .topbar__dropdown-item:hover {
  background: var(--accent-soft);
}
:root[data-theme="light"] .topbar__dropdown-divider {
  background: var(--hairline);
}

/* KPI cards / flow / stack rows en light */
:root[data-theme="light"] .kpi-card,
:root[data-theme="light"] .flow-card {
  background: var(--bg-soft) !important;
  border-color: var(--hairline) !important;
}
:root[data-theme="light"] .stack-row strong { color: var(--ink); }

/* ─── Light theme — overrides agresivos para hardcoded whites/purples ──── */

/* Backgrounds que estaban hardcoded en navy/purple → switch al sistema */
:root[data-theme="light"] .area-view {
  background: var(--bg) !important;
}
:root[data-theme="light"] .area-stats {
  background: rgba(255,255,255,.85) !important;
  backdrop-filter: blur(20px);
  border-bottom-color: var(--hairline) !important;
}
:root[data-theme="light"] .area-stat + .area-stat {
  border-left-color: var(--hairline) !important;
}

/* Home panel hero — texto al ink */
:root[data-theme="light"] .home-panel__hero { color: var(--ink); }
:root[data-theme="light"] .home-panel__title { color: var(--ink) !important; }
:root[data-theme="light"] .home-panel__eyebrow { color: var(--muted-strong) !important; }
:root[data-theme="light"] .home-panel { color: var(--ink); }

/* Area cards — todos los textos al ink/muted */
:root[data-theme="light"] .area-card__big-number,
:root[data-theme="light"] .area-card__no-number {
  color: var(--ink) !important;
}
:root[data-theme="light"] .area-card__big-label,
:root[data-theme="light"] .area-card__area-tag,
:root[data-theme="light"] .area-card__note {
  color: var(--muted) !important;
}

/* Area-stat values y labels en area-stats sticky */
:root[data-theme="light"] .area-stat__value { color: var(--ink) !important; }
:root[data-theme="light"] .area-stat__label { color: var(--muted) !important; }

/* Area-section títulos */
:root[data-theme="light"] .area-section__title { color: var(--muted-strong) !important; }

/* Area-table — fondo blanco sólido en light */
:root[data-theme="light"] .area-table {
  background: var(--bg-soft) !important;
  border-color: var(--hairline) !important;
  box-shadow: 0 1px 2px rgba(10,39,48,.04) !important;
}
:root[data-theme="light"] .area-table__head {
  background: var(--surface-tint) !important;
  color: var(--muted) !important;
  border-bottom-color: var(--hairline) !important;
}
:root[data-theme="light"] .area-table__row {
  border-bottom-color: var(--hairline) !important;
}
:root[data-theme="light"] .area-table__row:hover {
  background: var(--row-hover) !important;
}
:root[data-theme="light"] .area-table__code { color: var(--ink) !important; }
:root[data-theme="light"] .area-table__code-soft { color: var(--muted) !important; }
:root[data-theme="light"] .area-table__sub  { color: var(--muted) !important; }
:root[data-theme="light"] .area-table__empty { color: var(--muted) !important; }

/* Area-table check status */
:root[data-theme="light"] .area-table__check.is-pending { color: var(--muted-strong) !important; }
:root[data-theme="light"] .area-table__check.is-done { color: var(--accent-strong) !important; }

/* Login screen en light — texto */
:root[data-theme="light"] .login-card__eyebrow { color: var(--accent-strong) !important; }
:root[data-theme="light"] .login-card__title { color: var(--ink) !important; }
:root[data-theme="light"] .login-field label { color: var(--muted-strong) !important; }
:root[data-theme="light"] .login-field input {
  background: var(--input-bg) !important;
  border-color: var(--hairline) !important;
  color: var(--ink) !important;
}
:root[data-theme="light"] .login-field input::placeholder { color: var(--muted-soft) !important; }
:root[data-theme="light"] .login-error { color: var(--critical) !important; }
:root[data-theme="light"] .login-submit {
  background: var(--accent) !important;
  color: #ffffff !important;
}
:root[data-theme="light"] .login-submit:hover { background: var(--accent-strong) !important; }

/* Topbar y page title — blanco→ink */
:root[data-theme="light"] .topbar__page-title { color: var(--ink) !important; }
:root[data-theme="light"] .topbar { color: var(--ink); }
:root[data-theme="light"] .user-chip__name { color: var(--ink) !important; }

/* Sidebar items y brand */
:root[data-theme="light"] .sidebar__item {
  color: var(--muted-strong) !important;
}
:root[data-theme="light"] .sidebar__item.is-active span { color: var(--ink) !important; }
:root[data-theme="light"] .sidebar__item:hover { color: var(--ink) !important; }
:root[data-theme="light"] #labName { color: var(--ink) !important; }
:root[data-theme="light"] #labTagline { color: var(--muted) !important; }

/* Coach disclaimer banner */
:root[data-theme="light"] .coach-disclaimer {
  background: var(--surface-tint) !important;
  color: var(--muted-strong) !important;
}

/* Coach client form */
:root[data-theme="light"] .coach-input { color: var(--muted) !important; }
:root[data-theme="light"] .coach-input input::placeholder,
:root[data-theme="light"] .coach-input textarea::placeholder,
:root[data-theme="light"] .coach-search::placeholder {
  color: var(--muted-soft) !important;
}
:root[data-theme="light"] .coach-section__sub,
:root[data-theme="light"] .coach-section__hint {
  color: var(--muted) !important;
}
:root[data-theme="light"] .coach-pkg-card__price {
  color: var(--accent-strong) !important;
}

/* Area breadcrumb title + source */
:root[data-theme="light"] .area-breadcrumb__title { color: var(--muted-strong) !important; }
:root[data-theme="light"] .area-breadcrumb__source { color: var(--muted) !important; }
:root[data-theme="light"] .area-breadcrumb__source strong { color: var(--ink) !important; }

/* Date eyebrow del home */
:root[data-theme="light"] .home-panel__eyebrow { color: var(--muted) !important; }

/* Coach matrix chips en light — corregir contraste */
:root[data-theme="light"] .coach-matrix-chip {
  border-color: var(--hairline) !important;
  color: var(--muted-strong) !important;
}
:root[data-theme="light"] .coach-matrix-chip__count {
  background: var(--surface-tint) !important;
  color: var(--muted) !important;
}

/* Inbox cells */
:root[data-theme="light"] .inbox-cell-strong { color: var(--muted-strong) !important; }
:root[data-theme="light"] .inbox-cell-date { color: var(--muted) !important; }
:root[data-theme="light"] .inbox-status.is-nueva {
  background: var(--surface-tint) !important;
  color: var(--muted-strong) !important;
  border-color: var(--hairline) !important;
}

/* Admin filters en light */
:root[data-theme="light"] .admin-filter {
  color: var(--muted) !important;
}
:root[data-theme="light"] .admin-date { color: var(--ink) !important; }
:root[data-theme="light"] .admin-date__sub { color: var(--muted) !important; }
:root[data-theme="light"] .admin-entrega { color: var(--muted) !important; }
:root[data-theme="light"] .admin-entrega.is-done { color: var(--accent-strong) !important; }
:root[data-theme="light"] .admin-pending { color: var(--muted-soft) !important; }

/* Coach KPIs accent variant en light — más oscuro para contraste sobre fondo claro */
:root[data-theme="light"] .area-stat__value.is-accent,
:root[data-theme="light"] .area-stat__value.is-attention {
  color: var(--accent-strong) !important;
}

/* Capa "vida" — accent dot del topbar — debe seguir visible en light */
:root[data-theme="light"] .topbar__page-title::before {
  background: var(--accent) !important;
  box-shadow: 0 0 8px rgba(13,148,136,.35) !important;
}

/* Area cards área tag y hover en light */
:root[data-theme="light"] .area-card__icon { color: var(--accent) !important; }
:root[data-theme="light"] .area-card__cta { color: var(--accent-strong) !important; }
:root[data-theme="light"] .area-card:hover .area-card__icon,
:root[data-theme="light"] .area-card:hover .area-card__cta {
  color: var(--accent-dark) !important;
}

/* Sidebar items SVG icon color en light */
:root[data-theme="light"] .sidebar__item svg { color: currentColor; }
:root[data-theme="light"] .sidebar__item.is-active svg { color: var(--accent-strong) !important; }

/* Sync chip + date chip en light */
:root[data-theme="light"] .sync-chip { color: var(--muted) !important; }

/* User chip role badge en light — más contraste */
:root[data-theme="light"] .user-chip__role {
  background: var(--accent-soft) !important;
  color: var(--accent-strong) !important;
}

/* Theme toggle button en light — mantener visible */
:root[data-theme="light"] .user-chip__theme {
  background: var(--accent-soft) !important;
  color: var(--accent-strong) !important;
  border-color: var(--accent-line) !important;
}
:root[data-theme="light"] .user-chip__theme:hover {
  background: var(--accent) !important;
  color: #ffffff !important;
}

/* Toast en light */
:root[data-theme="light"] .toast {
  background: var(--bg-soft) !important;
  color: var(--ink) !important;
  border: 1px solid var(--hairline) !important;
  border-left: 3px solid var(--accent) !important;
  box-shadow: 0 4px 16px rgba(10,39,48,.10) !important;
}

/* ─── Defensa de tipografía: forzar sans en headings para evitar serif fallback ─ */
html, body,
h1, h2, h3, h4, h5, h6,
p, span, div, button, input, textarea, select, label, table, td, th,
.home-panel__title, .area-card__big-number, .area-card__no-number,
.coach-pkg-card__name, .coach-card__name {
  font-family: "Plus Jakarta Sans", "Inter", "Helvetica Neue", "Arial", system-ui, sans-serif !important;
}

/* ─── Theme toggle — hacerlo MUY visible ─────────────────────────────────── */
.user-chip__theme {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border: 1px solid var(--accent-line) !important;
  width: 32px !important;
  height: 32px !important;
}
.user-chip__theme:hover {
  background: var(--accent) !important;
  color: var(--bg) !important;
  border-color: var(--accent) !important;
  transform: scale(1.05);
}

/* ─── Detalle de muestra (vista enfocada en Recepción) ───────────────── */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 18px;
}
.detail-cell__label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 4px;
}
.detail-cell__value {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}
.detail-cell__value--mono {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: .01em;
}
.detail-checklist {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.detail-checklist__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface-tint);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  color: var(--ink);
  font-size: 13px;
}
.detail-checklist__item:hover {
  background: var(--surface-tint-strong);
}
.detail-checklist__item.is-done {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}
.detail-checklist__item input[type=checkbox] { accent-color: var(--accent); }
.detail-notes {
  background: var(--surface-tint);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.55;
}
.detail-history {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  overflow: hidden;
}
.detail-history__row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--hairline);
}
.detail-history__row:last-child { border-bottom: none; }
.detail-history__time {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.detail-history__body strong {
  font-size: 13px;
  color: var(--ink);
}
.detail-history__detail {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* ─── Tu actividad de hoy ───────────────────────────────────────────── */
.activity-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.activity-counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.activity-count {
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 14px 16px;
}
.activity-count__num {
  font-size: 28px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.activity-count__num.is-muted { color: var(--muted-soft); }
.activity-count__label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ─── Modal de reporte ─────────────────────────────────────────────── */
.modal--report {
  max-width: 720px;
  width: 92%;
}
.report-modal__hint {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 18px;
  line-height: 1.5;
  background: var(--surface-tint);
  border-left: 2px solid var(--accent);
  padding: 10px 14px;
  border-radius: 4px;
}
.report-modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.report-modal__field span {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.report-modal__field textarea {
  background: var(--input-bg);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 10px 12px;
  resize: vertical;
  line-height: 1.5;
}
.report-modal__field textarea:focus {
  outline: none;
  border-color: var(--accent-line);
  background: var(--input-bg-focus);
}

.modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 24px;
  border-top: 1px solid var(--hairline);
}

/* Print de cotización: ahora se hace via window.open() con HTML standalone
   (ver printCoachQuote en app.js). No requiere @media print acá. */

/* ─── Hoja de Registro (multi-analista) ───────────────────────────────── */
.analyst-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  margin-bottom: 16px;
  background: var(--surface-tint);
  border: 1px solid var(--hairline);
  border-radius: 10px;
}
.analyst-banner__title {
  margin: 0;
  font-size: 13px;
  color: var(--muted-strong);
}
.analyst-banner__title strong { color: var(--ink); font-weight: 700; }
.analyst-banner__sub {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 8px;
}
.sheet-header__eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  margin: 0 0 4px;
}
.sheet-header__title {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
  font-family: var(--font-mono);
  letter-spacing: .01em;
}
.sheet-header__meta {
  font-size: 12px;
  color: var(--muted);
  margin: 4px 0 0;
}
.sheet-progress-box {
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}
.sheet-progress-bar {
  width: 280px;
  height: 8px;
  background: var(--surface-tint-strong);
  border-radius: 4px;
  overflow: hidden;
}
.sheet-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-strong), var(--accent));
  border-radius: 4px;
  transition: width .3s;
}
.sheet-progress-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.sheet-area-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.sheet-area-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  background: var(--surface-tint);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  color: var(--muted-strong);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.sheet-area-chip.is-full {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-line);
}

.sheet-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.sheet-add-select {
  background: var(--input-bg);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  color: var(--ink);
  padding: 8px 12px;
  font-family: inherit;
  font-size: 13px;
  min-width: 260px;
  cursor: pointer;
}
.sheet-add-select:focus {
  outline: none;
  border-color: var(--accent-line);
}

.sheet-table {
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  overflow: hidden;
}
.sheet-head,
.sheet-row {
  display: grid;
  grid-template-columns: 1.4fr 1.3fr 0.9fr 1fr 1.2fr 1fr 120px;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--hairline);
}
.sheet-head {
  background: var(--surface-tint);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.sheet-row:last-child { border-bottom: none; }
.sheet-row.is-other { opacity: .6; background: var(--surface-tint); }
.sheet-row.is-mine { background: var(--bg-soft); }
.sheet-row.is-done.is-mine { background: var(--accent-soft); }
.sheet-cell {
  font-size: 12px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
}
.sheet-cell--param strong {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  display: block;
  line-height: 1.3;
}
.sheet-cell__area {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid;
  margin-top: 3px;
}
.sheet-cell--method,
.sheet-cell--ld {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted-strong);
}
.sheet-cell--value input,
.sheet-cell--obs input {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 6px 8px;
  font-family: inherit;
  font-size: 12px;
  color: var(--ink);
}
.sheet-cell--value input:focus,
.sheet-cell--obs input:focus {
  outline: none;
  border-color: var(--accent-line);
  background: var(--input-bg-focus);
}
.sheet-value-done {
  font-weight: 700;
  color: var(--accent);
  font-family: var(--font-mono);
}
.sheet-value-pending {
  color: var(--muted-soft);
  font-style: italic;
}
.sheet-cell--executor {
  font-size: 11px;
  color: var(--muted);
}
.sheet-cell--actions {
  display: flex;
  justify-content: flex-end;
}
.sheet-cell--actions .area-btn {
  padding: 5px 10px;
  font-size: 11px;
}

.sheet-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
}
.sheet-empty p { margin: 0 0 8px; }

@media (max-width: 1100px) {
  .sheet-head,
  .sheet-row {
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-flow: row;
  }
  .sheet-cell--param { grid-column: 1 / -1; }
  .sheet-header {
    flex-direction: column;
    align-items: stretch;
  }
  .sheet-progress-box { align-items: stretch; }
  .sheet-progress-bar { width: 100%; }
  .sheet-area-chips { justify-content: flex-start; }
}

/* ─── Selects dentro de tabla de usuarios ──────────────────────────────── */
.users-role-select,
.users-area-select {
  background: var(--input-bg);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  color: var(--ink);
  padding: 4px 8px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  min-width: 120px;
}
.users-role-select:focus,
.users-area-select:focus {
  outline: none;
  border-color: var(--accent-line);
  background: var(--input-bg-focus);
}

/* ─── Muestreo inbox + selector 3 cards ──────────────────────────────── */
.muestreo-inbox {
  margin-bottom: 22px;
  padding: 20px 24px;
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 14px;
}
.muestreo-inbox__head {
  margin-bottom: 14px;
}
.muestreo-inbox__eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--accent);
  margin: 0 0 4px;
}
.muestreo-inbox__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.muestreo-inbox__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.muestreo-inbox__row {
  display: grid;
  grid-template-columns: 90px 1.4fr 1.6fr 90px 80px 140px 80px;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--surface-tint);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--ink);
  transition: background .12s, border-color .12s, transform .1s;
}
.muestreo-inbox__row:hover {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  transform: translateY(-1px);
}
.muestreo-inbox__ref {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}
.muestreo-inbox__client strong {
  display: block;
  font-size: 13px;
  color: var(--ink);
}
.muestreo-inbox__client span {
  font-size: 11px;
  color: var(--muted);
}
.muestreo-inbox__address {
  font-size: 12px;
  color: var(--muted-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.muestreo-inbox__address em {
  color: var(--muted-soft);
  font-style: italic;
}
.muestreo-inbox__type,
.muestreo-inbox__items {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-strong);
}
.muestreo-inbox__date {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 10px;
  text-align: right;
}
.muestreo-inbox__datestr {
  color: var(--muted);
}
.muestreo-inbox__status {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 9px;
  align-self: flex-end;
}
.muestreo-inbox__status.is-pendiente {
  background: rgba(217,119,6,.16);
  color: #fbbf24;
  border: 1px solid rgba(217,119,6,.35);
}
:root[data-theme="light"] .muestreo-inbox__status.is-pendiente {
  background: rgba(217,119,6,.10);
  color: #b45309;
  border-color: rgba(217,119,6,.30);
}
.muestreo-inbox__status.is-completada {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-line);
}
.muestreo-inbox__status.is-aprobada {
  background: var(--success-soft);
  color: var(--success);
  border: 1px solid rgba(74,222,128,.32);
}
.muestreo-inbox__cta {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-align: right;
}

.muestreo-selector__cards--three {
  grid-template-columns: repeat(3, 1fr);
}
.muestreo-selector__cards--two {
  grid-template-columns: repeat(2, 1fr);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 900px) {
  .muestreo-selector__cards--three,
  .muestreo-selector__cards--two { grid-template-columns: 1fr; }
  .muestreo-inbox__row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .muestreo-inbox__ref,
  .muestreo-inbox__cta { grid-column: 1 / -1; }
}

/* Form de cotizar muestreo */
.muestreo-cost-form {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 12px;
  background: var(--surface-tint);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 14px;
}
.muestreo-cost-form .coach-input--full {
  grid-column: 2 / 3;
}
@media (max-width: 640px) {
  .muestreo-cost-form { grid-template-columns: 1fr; }
  .muestreo-cost-form .coach-input--full { grid-column: 1; }
}

/* ─── Sección Entrega de muestra (coach) — compacta ──────────────────── */
.coach-sampling { margin-bottom: 18px; }
.sampling-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.sampling-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.sampling-pills {
  display: inline-flex;
  background: var(--surface-tint);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 2px;
  gap: 0;
}
.sampling-pill {
  padding: 6px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--muted-strong);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.sampling-pill:hover {
  color: var(--ink);
}
.sampling-pill.is-active {
  background: var(--accent);
  color: #062520;
}
:root[data-theme="light"] .sampling-pill.is-active {
  color: #ffffff;
}

.sampling-details {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: var(--surface-tint);
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--accent);
  border-radius: 8px;
  animation: samplingExpand .18s ease;
}
.sampling-details__grid {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 12px;
}
.sampling-details__address { min-width: 0; }
@keyframes samplingExpand {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.inbox-sampling-chip {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
@media (max-width: 640px) {
  .sampling-details__grid { grid-template-columns: 1fr; }
}

/* ─── Skeletons (loading placeholders) ─────────────────────────────────── */
@keyframes skeletonPulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 0.9; }
}
.skeleton {
  display: inline-block;
  background: linear-gradient(90deg, var(--surface-tint) 0%, var(--surface-tint-strong) 50%, var(--surface-tint) 100%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: skeletonShimmer 1.4s ease-in-out infinite, skeletonPulse 1.4s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes skeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton--text {
  display: block;
  height: 13px;
  border-radius: 3px;
}
.skeleton--wide   { width: 60%; }
.skeleton--narrow { width: 38%; }
.skeleton--pill {
  width: 72px;
  height: 18px;
  border-radius: 4px;
}
.skeleton--btn {
  width: 60px;
  height: 28px;
  border-radius: 6px;
  justify-self: end;
}
.area-table__row--skeleton {
  pointer-events: none;
}
.area-table__row--skeleton:hover { background: transparent !important; }

/* ─── Modal Invitar usuario ─────────────────────────────────────────────── */
.modal--invite {
  max-width: 460px;
  width: 92%;
}
.invite-hint {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 18px;
  line-height: 1.55;
  background: var(--surface-tint);
  border-left: 2px solid var(--accent);
  padding: 10px 14px;
  border-radius: 4px;
}
.invite-error {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--critical-soft);
  border: 1px solid rgba(239,68,68,.32);
  border-radius: 6px;
  color: var(--critical);
  font-size: 12px;
}
.modal--invite .report-modal__field input,
.modal--invite .report-modal__field select {
  background: var(--input-bg);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  color: var(--ink);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
}
.modal--invite .report-modal__field input:focus,
.modal--invite .report-modal__field select:focus {
  outline: none;
  border-color: var(--accent-line);
  background: var(--input-bg-focus);
}

/* ─── Capa "vida" — re-introduce accent estratégico donde el mono aplana ─── */

/* Topbar: page title con un punto accent prefijo, sutil pero presente */
.topbar__page-title {
  position: relative;
  padding-left: 16px;
}
.topbar__page-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(94,234,212,.4);
}

/* Section titles — eyebrow accent mark */
.area-section__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted-strong) !important;
}
.area-section__title::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--accent);
  flex-shrink: 0;
}

/* Headings dentro de panels — color ink completo */
.panel h2, .panel h3, .panel h4 {
  color: var(--ink);
}

/* Section tags (panel eyebrow) — accent en vez de muted */
.section-tag {
  color: var(--accent) !important;
  font-weight: 700;
}

/* Area cards — accent al hover, no plano */
.area-card {
  transition: background .15s, border-color .15s, transform .15s;
}
.area-card:hover {
  border-color: var(--accent-line) !important;
  background: var(--accent-soft) !important;
  transform: translateY(-2px);
}
.area-card:hover .area-card__icon,
.area-card:hover .area-card__cta {
  color: var(--accent-strong) !important;
}

/* Area-stat__value — número grande siempre con un toque vivo */
.area-stat__value {
  font-variant-numeric: tabular-nums;
}

/* Date chip / today indicator */
.date-chip {
  color: var(--accent) !important;
  border: 1px solid var(--accent-line) !important;
  background: var(--accent-soft) !important;
}

/* Sync chip — accent cuando "synced" */
.sync-chip { color: var(--muted) !important; }

/* Coach card — el ahorro pop visual cuando es alto */
.coach-savings {
  text-shadow: 0 0 12px rgba(94,234,212,.3);
}

/* Coach progress label — accent */
.coach-progress__label { color: var(--accent) !important; }

/* Toast — accent border-left en vez de plano */
.toast {
  border-left: 3px solid var(--accent) !important;
}

/* Inputs en focus — ring accent */
input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-soft);
  border-color: var(--accent-line) !important;
}

/* Breadcrumb back button — hover accent */
.area-breadcrumb__back:hover {
  color: var(--accent) !important;
  border-color: var(--accent-line) !important;
}

/* Coach disclaimer — borde accent ya existía, asegurar contraste */
.coach-disclaimer {
  color: var(--muted) !important;
  border-left-color: var(--accent-line) !important;
}

/* Sidebar item active — text con accent leve */
.sidebar__item.is-active span { color: var(--ink); }
.sidebar__item.is-active svg  { color: var(--accent); }

/* Search input topbar — accent halo en focus */
.topbar__search-input:focus {
  border-color: var(--accent-line) !important;
}


/* ─── Pitaia preview ───────────────────────────────────────────────────── */
.pp-panel { padding: 28px 32px; }
.pp-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; margin-bottom: 16px;
}
.pp-header h1 { margin: 0 0 6px 0; font-size: 24px; }
.pp-lead { margin: 0; color: var(--text-secondary, #94a3b8); font-size: 13.5px; max-width: 56ch; }
.pp-header-actions { display: flex; gap: 8px; flex-shrink: 0; }
.pp-btn {
  background: transparent; border: 1px solid var(--surface-border, rgba(148,163,184,.18));
  color: var(--text-primary, #e2e8f0); padding: 8px 14px; border-radius: 6px;
  font: inherit; cursor: pointer; transition: all .15s ease;
}
.pp-btn:hover { border-color: var(--accent, #5eead4); color: var(--accent, #5eead4); }
.pp-btn--primary { background: var(--accent, #5eead4); color: #0a0a0a; border-color: var(--accent, #5eead4); }
.pp-btn--primary:hover { filter: brightness(1.08); }
.pp-btn--ghost { padding: 6px 10px; font-size: 12.5px; }

.pp-status { font-size: 12.5px; margin-bottom: 18px; padding: 8px 12px; border-radius: 6px;
  background: var(--surface-tint, rgba(148,163,184,.06)); }
.pp-status-ok { color: var(--accent, #5eead4); }
.pp-status-warn { color: #f59e0b; }

.pp-sites { margin-bottom: 24px; }
.pp-sites-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pp-sites-head h3 { margin: 0; font-size: 14px; font-weight: 600; }
.pp-sites-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pp-sites-table th { text-align: left; padding: 8px 6px; font-weight: 500; color: var(--text-secondary, #94a3b8); border-bottom: 1px solid var(--surface-border, rgba(148,163,184,.18)); }
.pp-sites-table th.num, .pp-sites-table td.num { text-align: right; }
.pp-sites-table td { padding: 4px 6px; border-bottom: 1px solid var(--surface-border-soft, rgba(148,163,184,.08)); }
.pp-input { width: 100%; background: transparent; border: 1px solid transparent;
  color: inherit; padding: 6px 8px; border-radius: 4px; font: inherit; }
.pp-input:focus { border-color: var(--accent, #5eead4); outline: none; background: var(--surface-tint, rgba(148,163,184,.06)); }
.pp-input--num { text-align: right; max-width: 70px; }
.pp-row-del { background: transparent; border: 1px solid transparent; color: var(--text-secondary, #94a3b8);
  width: 26px; height: 26px; border-radius: 4px; cursor: pointer; font-size: 18px; line-height: 1; }
.pp-row-del:hover { color: #ef4444; border-color: #ef4444; }

.pp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0; }
.pp-card { padding: 16px; border-radius: 8px; border: 1px solid var(--surface-border, rgba(148,163,184,.18));
  background: var(--surface-tint, rgba(148,163,184,.04)); }
.pp-card--margen { border-color: var(--accent, #5eead4); background: rgba(94,234,212,.05); }
.pp-card__label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary, #94a3b8); margin-bottom: 8px; }
.pp-card__value { font-size: 22px; font-weight: 600; margin-bottom: 4px; }
.pp-card--margen .pp-card__value { color: var(--accent, #5eead4); }
.pp-card__sub { font-size: 12.5px; color: var(--text-secondary, #94a3b8); margin-bottom: 8px; }
.pp-card__memoria { font-size: 11.5px; color: var(--text-secondary, #94a3b8); line-height: 1.45; opacity: .85; }

.pp-results-table { margin-top: 18px; }
.pp-results-table h3 { margin: 0 0 8px 0; font-size: 13.5px; font-weight: 600; }
.pp-results-table table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pp-results-table th { text-align: left; padding: 6px 8px; color: var(--text-secondary, #94a3b8); font-weight: 500; border-bottom: 1px solid var(--surface-border, rgba(148,163,184,.18)); }
.pp-results-table td { padding: 5px 8px; border-bottom: 1px solid var(--surface-border-soft, rgba(148,163,184,.08)); }
.pp-results-table th.num, .pp-results-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

.pp-plan { margin-top: 16px; padding: 10px 14px; background: var(--surface-tint, rgba(148,163,184,.06));
  border-radius: 6px; font-size: 12.5px; color: var(--text-secondary, #94a3b8); }
.pp-empty { padding: 24px; text-align: center; color: var(--text-secondary, #94a3b8);
  background: var(--surface-tint, rgba(148,163,184,.04)); border-radius: 8px; font-size: 13.5px; }
.pp-error { padding: 14px 16px; background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.3);
  color: #fca5a5; border-radius: 6px; font-size: 13px; }

/* Volver a Recepción (header del cotizador en modo área) */
.pp-btn--back {
  margin-bottom: 8px; font-size: 12.5px; padding: 6px 10px;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-secondary, #94a3b8);
}
.pp-btn--back:hover { color: var(--accent, #5eead4); }

/* Bloque cliente — buscador + chip seleccionado.
   Usa tokens semánticos (--ink, --muted, --border, --bg-soft, etc.) que ya
   tienen overrides automáticos en :root[data-theme="light"]. Antes usaba
   fallbacks fijos como #0f172a y #94a3b8 que pintaban el dropdown navy
   sobre fondo claro. */
.pp-client {
  position: relative;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-tint);
}
.pp-client--selected {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.pp-client__label {
  display: block;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); margin-bottom: 6px;
}
.pp-client__name { font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--ink); }
.pp-client__sub  { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.pp-client__search { position: relative; }
.pp-client__input {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 6px; padding: 9px 12px; font-size: 14px;
  color: var(--ink);
}
.pp-client__input:focus {
  border-color: var(--accent);
  background: var(--input-bg-focus);
}
.pp-client-results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  z-index: 20;
  max-height: 320px; overflow-y: auto;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.pp-client-result {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; text-align: left;
  background: transparent; border: none; padding: 9px 12px;
  cursor: pointer; color: var(--ink); font: inherit;
  border-bottom: 1px solid var(--hairline);
}
.pp-client-result:last-child { border-bottom: none; }
.pp-client-result:hover { background: var(--surface-tint-strong); }
.pp-client-result__name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.pp-client-result__sub  { font-size: 12px; color: var(--muted); }
.pp-client-empty {
  padding: 14px; text-align: center; font-size: 12.5px;
  color: var(--muted);
}

/* Tarjeta de "Pitaia detectó del correo" — aparece encima del buscador
   cuando el cotizador llegó desde un correo parseado y aún no se vinculó
   con un cliente del DB. Muestra razón social, RUT, contacto, email, etc.
   para que la secretaria los vea de un vistazo y decida vincular o crear. */
.pp-client-detected {
  margin: -4px -4px 12px;
  padding: 12px 14px;
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  border-radius: 6px;
}
.pp-client-detected__head {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 8px;
}
.pp-client-detected__icon {
  font-size: 14px;
  line-height: 1;
}
.pp-client-detected__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
}
.pp-client-detected__rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px 16px;
}
.pp-client-detected__row {
  display: flex;
  flex-direction: column;
  font-size: 12.5px;
  min-width: 0;
}
.pp-client-detected__row strong {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin-bottom: 1px;
}
.pp-client-detected__row span {
  color: var(--ink);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-client-detected__hint {
  font-size: 11.5px;
  color: var(--muted);
  font-style: italic;
}
.pp-client-detected__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--accent-line);
}
.pp-client-detected__row--missing strong {
  color: rgba(220, 38, 38, 0.85);
}
.pp-client-detected__row--missing span {
  color: var(--muted-soft);
  font-style: italic;
  font-weight: 400;
}
.pp-btn--sm {
  padding: 6px 12px;
  font-size: 12px;
}

/* Variante de la tarjeta detected para el cotizador de análisis (encargo).
   Hereda layout y colores de pp-client-detected pero queda margin-top: 0
   porque vive arriba del cot-enc-body, no dentro de pp-client. */
.pp-client-detected--enc {
  margin: 0 0 18px;
}
.pp-client-detected--enc .pp-client-detected__head {
  position: relative;
  padding-right: 28px;
}
.pp-client-detected--enc .pp-banner__dismiss {
  position: absolute;
  top: -2px;
  right: 0;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.pp-client-detected--enc .pp-banner__dismiss:hover {
  background: var(--surface-tint-strong);
  color: var(--ink);
}
.pp-client-detected__analisis {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--accent-line);
  font-size: 12px;
  color: var(--muted-strong);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.pp-client-detected__analisis strong {
  color: var(--ink);
  margin-right: 4px;
}
.pp-tag {
  display: inline-block;
  padding: 2px 8px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
}
.pp-tag--soft {
  background: var(--surface-tint-strong);
  color: var(--muted-strong);
}
@media (max-width: 600px) {
  .pp-client-detected__rows {
    grid-template-columns: 1fr;
  }
}

/* Acciones de guardar al pie del cotizador */
.pp-save-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--surface-border-soft, rgba(148,163,184,.08));
}
.pp-save-actions .pp-btn[disabled] { opacity: .5; cursor: not-allowed; }
.pp-save-ok  { font-size: 12.5px; color: var(--accent, #5eead4); }
.pp-save-err { font-size: 12.5px; color: #fca5a5; }

/* Mis cotizaciones (lista en Recepción) */
.cot-list {
  display: flex; flex-direction: column; gap: 6px;
}
.cot-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 14px;
  background: var(--surface-tint, rgba(148,163,184,.04));
  border: 1px solid var(--surface-border-soft, rgba(148,163,184,.08));
  border-radius: 8px;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.cot-row:hover {
  border-color: var(--accent, #5eead4);
  background: var(--surface-tint, rgba(94,234,212,.05));
}
.cot-row__main { min-width: 0; flex: 1; }
.cot-row__numero { font-size: 11.5px; color: var(--text-secondary, #94a3b8); letter-spacing: .03em; margin-bottom: 2px; }
.cot-row__cliente {
  font-size: 14px; font-weight: 500; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cot-row__meta { font-size: 12px; color: var(--text-secondary, #94a3b8); margin-top: 3px; }
.cot-row__right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  flex-shrink: 0;
}
.cot-row__pill {
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 999px; text-transform: uppercase;
  background: rgba(148,163,184,.14); color: var(--text-secondary, #94a3b8);
}
.cot-row__pill.is-borrador  { background: rgba(148,163,184,.16); color: #cbd5e1; }
.cot-row__pill.is-enviada   { background: rgba(94,234,212,.14);  color: #5eead4; }
.cot-row__pill.is-aceptada  { background: rgba(34,197,94,.16);   color: #86efac; }
.cot-row__pill.is-rechazada { background: rgba(239,68,68,.14);   color: #fca5a5; }
.cot-row__pill.is-anulada   { background: rgba(148,163,184,.14); color: #94a3b8; }
.cot-row__monto {
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.cot-empty {
  padding: 16px;
  font-size: 12.5px; color: var(--text-secondary, #94a3b8);
  background: var(--surface-tint, rgba(148,163,184,.04));
  border-radius: 8px; border: 1px dashed var(--surface-border, rgba(148,163,184,.18));
}

@media (max-width: 760px) {
  .pp-client--selected { flex-direction: column; align-items: flex-start; gap: 8px; }
  .pp-save-actions { flex-direction: column; align-items: stretch; }
  .pp-save-actions .pp-btn { width: 100%; padding: 12px 14px; font-size: 14px; }
}

@media (max-width: 900px) {
  .pp-cards { grid-template-columns: 1fr; }
  .pp-header { flex-direction: column; }
}

/* Mobile (<= 760 px): tablas con scroll horizontal y inputs cómodos al tacto */
@media (max-width: 760px) {
  .pp-panel { padding: 16px 14px; }
  .pp-header h1 { font-size: 20px; }
  .pp-lead { font-size: 13px; }
  .pp-header-actions {
    width: 100%;
    flex-direction: column;
    gap: 6px;
  }
  .pp-header-actions .pp-btn { width: 100%; padding: 12px 14px; font-size: 14px; }

  .pp-sites-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .pp-sites-head .pp-btn--ghost { width: 100%; padding: 10px; font-size: 13px; }

  /* Tablas en mobile: scroll horizontal con indicador */
  .pp-sites,
  .pp-results-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: -14px;
    margin-right: -14px;
    padding-left: 14px;
    padding-right: 14px;
  }
  .pp-sites-table,
  .pp-results-table table {
    min-width: 520px;
  }
  .pp-input { padding: 10px 8px; font-size: 14px; }
  .pp-input--num { max-width: 56px; }
  .pp-row-del { width: 32px; height: 32px; font-size: 20px; }

  .pp-card { padding: 14px; }
  .pp-card__value { font-size: 24px; }
  .pp-card__sub { font-size: 13px; }
  .pp-card__memoria { font-size: 12px; }

  .pp-status { font-size: 12px; }
  .pp-plan { font-size: 12px; }
}

/* ─── Cotizador: estados, badges, empty state, leyenda Af/Ef/Pr ──────────── */

.pp-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.pp-pill--borrador  { background: rgba(148,163,184,.18); color: #475569; }
.pp-pill--enviada   { background: rgba(37,99,235,.16);  color: #1d4ed8; }
.pp-pill--aceptada  { background: rgba(16,185,129,.16); color: #047857; }
.pp-pill--rechazada { background: rgba(239,68,68,.16);  color: #b91c1c; }
.pp-pill--anulada   { background: rgba(100,116,139,.16); color: #475569; text-decoration: line-through; }

:root[data-theme="dark"] .pp-pill--borrador  { color: #cbd5e1; }
:root[data-theme="dark"] .pp-pill--enviada   { color: #93c5fd; }
:root[data-theme="dark"] .pp-pill--aceptada  { color: #6ee7b7; }
:root[data-theme="dark"] .pp-pill--rechazada { color: #fca5a5; }
:root[data-theme="dark"] .pp-pill--anulada   { color: #cbd5e1; }

/* Status banner compacto cuando solo es un detalle (admin con catálogo OK). */
.pp-status--mini {
  padding: 6px 10px;
  font-size: 11.5px;
  opacity: .75;
}

/* Contador chiquito al lado del título "Sitios". */
.pp-sites-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(148,163,184,.14);
  color: var(--text-secondary, #64748b);
  font-size: 12px;
  font-weight: 600;
  vertical-align: middle;
}

/* Leyenda Af / Ef / Pr al pie de la tabla — explica las abreviaturas a las
   secretarias que recién empiezan, sin tener que abrir documentación. */
.pp-sites-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 8px 2px 0;
  padding: 0;
  font-size: 11.5px;
  color: var(--text-secondary, #64748b);
  line-height: 1.6;
}
.pp-sites-legend strong {
  color: var(--text, #0f172a);
  font-weight: 700;
  margin-right: 4px;
}
:root[data-theme="dark"] .pp-sites-legend strong { color: #e2e8f0; }

/* Botón calcular abajo de la tabla — ancho, prominente, cerca de los inputs. */
.pp-sites-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}
.pp-btn--wide {
  min-width: 220px;
  padding: 10px 22px;
  font-size: 14px;
}

/* Empty state del cotizador — primera carga sin sitios. */
.pp-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 24px;
  border: 1px dashed var(--surface-border, rgba(148,163,184,.3));
  border-radius: 12px;
  background: var(--surface-tint, rgba(148,163,184,.04));
}
.pp-empty-state__icon {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(94,234,212,.12);
  color: #0d9488;
  margin-bottom: 16px;
}
:root[data-theme="dark"] .pp-empty-state__icon {
  background: rgba(94,234,212,.16);
  color: #5eead4;
}
.pp-empty-state h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
}
.pp-empty-state p {
  margin: 0 0 18px;
  font-size: 13.5px;
  color: var(--text-secondary, #64748b);
  max-width: 420px;
  line-height: 1.55;
}

/* Botón "+ Agregar sitio" más prominente con borde dashed sutil. */
.pp-sites-head .pp-btn--ghost {
  border: 1px dashed var(--surface-border, rgba(148,163,184,.3));
  padding: 6px 14px;
  font-weight: 500;
}
.pp-sites-head .pp-btn--ghost:hover {
  border-style: solid;
  border-color: var(--accent, #5eead4);
  color: var(--accent, #5eead4);
}

/* Hint debajo de los botones cuando faltan datos para guardar. */
.pp-save-hint {
  align-self: center;
  font-size: 12px;
  color: var(--text-secondary, #64748b);
  font-style: italic;
}
.pp-save-actions { gap: 10px; align-items: center; flex-wrap: wrap; }

/* Botón Imprimir / PDF — discreto, no compite con Marcar enviada. */
#ppPrint:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* Coach: divider y rows "fuera de la matriz seleccionada" — el caso típico
   es buscar pH con la matriz "Agua residual" filtrada y descubrir que el
   parámetro hoy solo está cargado bajo A.Potable / F.Industriales en el
   catálogo. Mostramos un divider y los rows con un chip "otra matriz" en
   tono de aviso para que la secretaria sepa que existe pero hay que validar. */
.coach-pool__divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 10px;
}
.coach-pool__divider-line {
  flex: 1;
  height: 1px;
  background: var(--surface-border, rgba(148,163,184,.25));
}
.coach-pool__divider-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-secondary, #64748b);
}
.coach-pool__hint {
  margin: 0 0 8px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-secondary, #64748b);
  background: rgba(245,158,11,.08);
  border-left: 2px solid rgba(245,158,11,.55);
  border-radius: 4px;
}
.coach-param.is-out-of-matrix {
  background: rgba(245,158,11,.04);
  border-color: rgba(245,158,11,.18);
}
.coach-param__matrix--alt {
  color: rgba(217,119,6,1) !important;
  font-weight: 600;
}
:root[data-theme="dark"] .coach-param__matrix--alt {
  color: rgba(252,211,77,1) !important;
}

/* Botones de acción del detail de muestreo — Cancelar / Devolver a recepción.
   En desktop se alinean a la derecha; en mobile se apilan full-width para que
   el muestrador no tenga que pelear con tap targets pequeños. */
/* Link "Preparar para mañana / otro día" debajo del saludo del muestrador.
   Discreto pero accesible — no compite con los cards "Puntual / Compuesto"
   que son la acción primaria del momento (registro AHORA). */
.muestreo-prep-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 10px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}
.muestreo-prep-link:hover {
  border-style: solid;
  border-color: var(--accent-line);
  color: var(--accent);
}

/* Borradores de muestreo "Listos para terreno" — sección que aparece arriba
   del selector cuando hay muestras pre-llenadas desde el lab. Click en cada
   fila abre el form correspondiente con todos los datos cargados. */
.muestreo-borradores {
  margin: 0 auto 18px;
  max-width: 760px;
  padding: 16px 18px;
  border: 1px solid var(--surface-border, rgba(94,234,212,.3));
  border-radius: 10px;
  background: rgba(94,234,212,.05);
}
.muestreo-borradores__head { margin-bottom: 12px; }
.muestreo-borradores__eyebrow {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(13,148,136,1);
}
:root[data-theme="dark"] .muestreo-borradores__eyebrow { color: rgba(94,234,212,1); }
.muestreo-borradores__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}
.muestreo-borradores__list { display: flex; flex-direction: column; gap: 8px; }
.muestreo-borrador-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--surface-border, rgba(148,163,184,.18));
  border-radius: 8px;
  background: var(--surface, #fff);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color .15s ease;
}
.muestreo-borrador-row:hover {
  border-color: rgba(13,148,136,.6);
}
:root[data-theme="dark"] .muestreo-borrador-row {
  background: rgba(15,23,42,.7);
}
.muestreo-borrador-row__main { min-width: 0; }
.muestreo-borrador-row__title {
  font-weight: 700;
  font-size: 14px;
  color: var(--text, #0f172a);
}
:root[data-theme="dark"] .muestreo-borrador-row__title { color: #e2e8f0; }
.muestreo-borrador-row__sub {
  font-size: 12.5px;
  color: var(--text-secondary, #64748b);
  margin-top: 2px;
}
.muestreo-borrador-row__notes {
  font-size: 11.5px;
  color: var(--text-secondary, #94a3b8);
  font-style: italic;
  margin-top: 4px;
}
.muestreo-borrador-row__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  justify-content: center;
}
.muestreo-borrador-row__kind {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(94,234,212,.18);
  color: rgba(13,148,136,1);
}
.muestreo-borrador-row__fecha {
  font-size: 11.5px;
  color: var(--text-secondary, #64748b);
}
.muestreo-borrador-row__cta {
  font-size: 12px;
  font-weight: 600;
  color: rgba(13,148,136,1);
}
:root[data-theme="dark"] .muestreo-borrador-row__cta { color: rgba(94,234,212,1); }

/* Badge en el header del form cuando entra con prefill desde un borrador. */
.muestreo-prefill-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(94,234,212,.18);
  color: rgba(13,148,136,1);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  vertical-align: middle;
}
:root[data-theme="dark"] .muestreo-prefill-badge { color: rgba(94,234,212,1); }

/* Modal mediano para "Preparar terreno". */
.modal--md { max-width: 580px; width: 95vw; }
.bd-form {
  padding: 16px 22px;
  max-height: 70vh;
  overflow-y: auto;
}
.bd-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 22px;
  border-top: 1px solid var(--surface-border, rgba(148,163,184,.18));
}
@media (max-width: 760px) {
  .muestreo-borrador-row { grid-template-columns: 1fr; }
  .muestreo-borrador-row__right {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .bd-actions { flex-direction: column-reverse; }
  .bd-actions .area-btn { width: 100%; }
}

/* Modal de confirmación pre-envío: resumen humano y aprobación explícita
   antes de mandar la muestra al laboratorio. Es alto y scrolleable porque
   los forms de terreno tienen muchísima info. Se ve bien tanto en desktop
   como en mobile (los muestradores van a usarlo en celular). */
.modal--lg { max-width: 720px; width: 95vw; }
.mc-modal { max-height: 92vh; display: flex; flex-direction: column; }
.mc-modal__body {
  flex: 1; overflow-y: auto;
  padding: 18px 22px;
  background: var(--surface-alt, #f8fafc);
}
:root[data-theme="dark"] .mc-modal__body { background: rgba(15,23,42,.5); }
.mc-modal__actions {
  display: flex; gap: 10px; justify-content: space-between;
  padding: 14px 22px;
  border-top: 1px solid var(--surface-border, rgba(148,163,184,.18));
  background: var(--surface, #fff);
}
.modal__sub {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--text-secondary, #64748b);
}
.mc-summary { display: flex; flex-direction: column; gap: 16px; }
.mc-summary__group {
  background: var(--surface, #fff);
  border: 1px solid var(--surface-border, rgba(148,163,184,.18));
  border-radius: 8px;
  padding: 12px 14px;
}
:root[data-theme="dark"] .mc-summary__group {
  background: rgba(15,23,42,.7);
}
.mc-summary__title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-secondary, #64748b);
}
.mc-summary__row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 10px;
  padding: 5px 0;
  font-size: 13px;
  align-items: baseline;
}
.mc-summary__row + .mc-summary__row {
  border-top: 1px dashed var(--surface-border, rgba(148,163,184,.16));
}
.mc-summary__label {
  font-weight: 600;
  color: var(--text-secondary, #64748b);
  font-size: 12px;
}
.mc-summary__value { color: var(--text, #0f172a); }
:root[data-theme="dark"] .mc-summary__value { color: #e2e8f0; }
.mc-summary__unit { color: var(--text-secondary, #94a3b8); font-weight: 400; font-size: 11.5px; }
.mc-summary__hint {
  color: var(--text-secondary, #94a3b8);
  font-size: 11.5px;
  font-style: italic;
}
.mc-summary__warn {
  color: rgba(217,119,6,1);
  font-weight: 600;
}
:root[data-theme="dark"] .mc-summary__warn { color: rgba(252,211,77,1); }
.mc-summary__multiline {
  white-space: pre-wrap;
  display: block;
  line-height: 1.5;
}
.mc-summary__row--multi {
  grid-template-columns: 140px 1fr;
}
.mc-summary__signature {
  display: block;
  max-width: 280px;
  height: auto;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--surface-border, rgba(148,163,184,.25));
  border-radius: 4px;
}
.mc-summary__photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  padding: 4px 0;
}
.mc-summary__photo {
  display: flex; flex-direction: column; gap: 4px;
}
.mc-summary__photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--surface-border, rgba(148,163,184,.18));
}
.mc-summary__photo-caption {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-secondary, #64748b);
}
@media (max-width: 760px) {
  .mc-modal__body { padding: 14px 14px; }
  .mc-modal__actions { padding: 12px 14px; flex-direction: column-reverse; }
  .mc-modal__actions .area-btn { width: 100%; }
  .mc-summary__row { grid-template-columns: 1fr; gap: 2px; padding: 4px 0; }
  .mc-summary__row + .mc-summary__row { border-top: 1px dashed var(--surface-border, rgba(148,163,184,.12)); padding-top: 6px; }
}

/* Firma del cliente en terreno — canvas táctil + nombre + RUT, o motivo
   libre cuando el cliente no firma. El canvas se redimensiona via CSS pero
   el buffer del canvas se mantiene en 640x220 (resolución suficiente para
   firma + buen aspect ratio en mobile). */
.firma-block { padding-bottom: 4px; }
.firma-hint {
  font-size: 11.5px;
  color: var(--text-secondary, #94a3b8);
  font-style: italic;
  font-weight: 400;
  margin-left: 6px;
  vertical-align: middle;
}
.firma-toggle {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.firma-form { margin-top: 6px; }
.firma-canvas-label {
  margin: 6px 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
}
.firma-canvas-wrap {
  position: relative;
  border: 1px dashed var(--surface-border, rgba(148,163,184,.4));
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}
.firma-canvas {
  display: block;
  width: 100%;
  height: 220px;
  touch-action: none;
  cursor: crosshair;
  background: #ffffff;
}
.firma-clear {
  position: absolute;
  top: 8px; right: 8px;
  padding: 5px 10px;
  border: 1px solid var(--surface-border, rgba(148,163,184,.4));
  border-radius: 4px;
  background: #ffffff;
  color: var(--text-secondary, #64748b);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.firma-clear:hover {
  background: #f8fafc;
  color: rgba(220,38,38,1);
  border-color: rgba(220,38,38,.4);
}
@media (max-width: 760px) {
  .firma-canvas { height: 180px; }
  .firma-toggle { flex-direction: column; gap: 8px; }
}

/* Envases capturados: lista dinámica que reemplaza los selects únicos de
   tipo_envase + preservante. Cada fila tiene su propio header con número de
   envase y botón "X" para quitarla (oculto cuando es el único). */
.envases-block { padding-bottom: 4px; }
.envases-count {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(148,163,184,.16);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
  vertical-align: middle;
}
.envases-list { display: flex; flex-direction: column; gap: 12px; }
.envase-row {
  padding: 12px;
  border: 1px solid var(--surface-border, rgba(148,163,184,.2));
  border-radius: 8px;
  background: var(--surface-tint, rgba(148,163,184,.04));
}
.envase-row__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.envase-row__num {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-secondary, #64748b);
}
.envase-row__remove {
  width: 26px; height: 26px;
  border: none; border-radius: 50%;
  background: rgba(220,38,38,.12);
  color: rgba(220,38,38,1);
  font-size: 18px; font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.envase-row__remove:hover { background: rgba(220,38,38,.22); }
.envases-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px dashed var(--surface-border, rgba(148,163,184,.4));
  border-radius: 8px;
  background: transparent;
  color: var(--accent, #0d9488);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.envases-add-btn:hover {
  background: rgba(94,234,212,.06);
  border-style: solid;
}
.muestreo-hint {
  font-size: 11px;
  color: var(--text-secondary, #94a3b8);
  font-weight: 400;
  font-style: italic;
  margin-left: 4px;
}

/* Evidencia fotográfica del form de muestreo (puntual + compuesto).
   Cards con thumbnail + caption en grid mobile-first; botón "Tomar foto"
   ocupa el ancho completo y en mobile abre la cámara directo. */
.evidence-block { padding-bottom: 4px; }
.evidence-count {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(148,163,184,.16);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
  vertical-align: middle;
}
.evidence-empty {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary, #64748b);
  font-style: italic;
}
.evidence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.evidence-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--surface-border, rgba(148,163,184,.18));
  border-radius: 8px;
  background: var(--surface-tint, rgba(148,163,184,.04));
}
.evidence-card__thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(0,0,0,.05);
}
.evidence-card__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.evidence-card__remove {
  position: absolute;
  top: 6px; right: 6px;
  width: 26px; height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,.65);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.evidence-card__remove:hover { background: rgba(220,38,38,.85); }
.evidence-card__caption {
  width: 100%;
  resize: vertical;
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid var(--surface-border, rgba(148,163,184,.25));
  border-radius: 4px;
  background: var(--surface, #fff);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text, #0f172a);
}
.evidence-card__caption::placeholder {
  color: var(--text-secondary, #94a3b8);
  font-style: italic;
}
.evidence-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 12px 14px;
  border: 1px dashed var(--surface-border, rgba(148,163,184,.4));
  border-radius: 8px;
  background: var(--surface-tint, rgba(148,163,184,.04));
  color: var(--accent, #0d9488);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
}
.evidence-add-btn:hover {
  background: rgba(94,234,212,.08);
  border-style: solid;
}
.evidence-file-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

@media (max-width: 760px) {
  .evidence-grid { grid-template-columns: repeat(2, 1fr); }
  .evidence-card__caption { font-size: 13px; min-height: 50px; }
}

.muestreo-detail-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
@media (max-width: 760px) {
  .muestreo-detail-actions { flex-direction: column-reverse; }
  .muestreo-detail-actions .area-btn {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
  }
}


/* ─── E2: Pitaia parse quote — vista de ingesta de correos ─────────────── */

.pq-view {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 28px 60px;
}

.pq-header h2 {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 700;
}

.pq-subtitle {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 24px;
  max-width: 720px;
}

.pq-form {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}

.pq-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text, #111827);
}

.pq-form textarea {
  width: 100%;
  font-family: ui-monospace, SF Mono, Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
  padding: 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  resize: vertical;
  min-height: 240px;
  background: var(--bg-soft, #fafafa);
}

.pq-form textarea:focus {
  outline: none;
  border-color: var(--accent, #2563eb);
  background: var(--surface, #fff);
}

.pq-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.pq-btn {
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s;
}

.pq-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pq-btn--primary {
  background: var(--accent, #2563eb);
  color: white;
  border-color: var(--accent, #2563eb);
}

.pq-btn--primary:hover:not(:disabled) {
  background: var(--accent-strong, #1d4ed8);
}

.pq-btn--ghost {
  background: transparent;
  color: var(--text, #111827);
  border-color: var(--border, #e5e7eb);
}

.pq-btn--ghost:hover:not(:disabled) {
  background: var(--bg-soft, #f3f4f6);
}

.pq-loading {
  text-align: center;
  padding: 32px;
  background: var(--bg-soft, #fafafa);
  border-radius: 10px;
  margin: 20px 0;
}

.pq-loading p {
  color: var(--muted, #6b7280);
  margin: 12px 0 0;
  font-size: 14px;
}

.pq-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border, #e5e7eb);
  border-top-color: var(--accent, #2563eb);
  border-radius: 50%;
  animation: pq-spin 0.8s linear infinite;
  margin: 0 auto;
}

@keyframes pq-spin {
  to { transform: rotate(360deg); }
}

.pq-result {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  padding: 22px;
  margin-top: 20px;
}

.pq-result-summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  padding-bottom: 12px;
}

.pq-result-summary h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.pq-result-meta {
  font-size: 12px;
  color: var(--muted, #6b7280);
  font-family: ui-monospace, monospace;
  display: flex;
  gap: 14px;
}

.pq-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.pq-result-card {
  background: var(--bg-soft, #fafafa);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 14px 16px;
}

.pq-result-card h4 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #6b7280);
}

.pq-result-card p {
  margin: 4px 0;
  font-size: 14px;
  line-height: 1.5;
}

.pq-count {
  background: var(--accent, #2563eb);
  color: white;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 700;
  margin-left: 6px;
  vertical-align: middle;
}

.pq-tag {
  display: inline-block;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
  background: var(--accent-soft, #dbeafe);
  color: var(--accent-strong, #1d4ed8);
  border-radius: 12px;
}

.pq-site {
  border-bottom: 1px solid var(--border, #e5e7eb);
  padding: 8px 0;
  font-size: 14px;
}

.pq-site:last-child {
  border-bottom: none;
}

.pq-muted {
  color: var(--muted, #9ca3af);
}

.pq-alerts {
  border-radius: 8px;
  padding: 14px 16px;
  margin: 12px 0;
  font-size: 14px;
}

.pq-alerts h4 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
}

.pq-alerts ul {
  margin: 0;
  padding-left: 20px;
}

.pq-alerts li {
  margin: 4px 0;
  line-height: 1.5;
}

.pq-alerts--critical {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.pq-alerts--warn {
  background: #fef3c7;
  color: #78350f;
  border: 1px solid #fde68a;
}

.pq-alerts--ok {
  background: #d1fae5;
  color: #064e3b;
  border: 1px solid #a7f3d0;
  padding: 12px 16px;
  font-weight: 600;
}

.pq-observ {
  background: var(--bg-soft, #fafafa);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 12px 0;
}

.pq-observ h4 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #6b7280);
}

.pq-observ p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.pq-raw {
  margin-top: 16px;
  border-top: 1px solid var(--border, #e5e7eb);
  padding-top: 14px;
}

.pq-raw summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--muted, #6b7280);
  user-select: none;
  padding: 4px 0;
}

.pq-raw summary:hover {
  color: var(--text, #111827);
}

.pq-raw pre {
  background: #1f2937;
  color: #e5e7eb;
  padding: 14px;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.5;
  overflow-x: auto;
  margin: 10px 0 0;
  max-height: 400px;
  overflow-y: auto;
}

/* Tema oscuro — ajustes mínimos */
[data-theme="dark"] .pq-form,
[data-theme="dark"] .pq-result,
[data-theme="dark"] .pq-result-card,
[data-theme="dark"] .pq-loading,
[data-theme="dark"] .pq-observ {
  background: var(--surface, #1f2937);
  border-color: var(--border, #374151);
}

[data-theme="dark"] .pq-form textarea {
  background: var(--bg-soft, #111827);
  color: var(--text, #f3f4f6);
}

[data-theme="dark"] .pq-alerts--critical {
  background: #7f1d1d;
  color: #fecaca;
  border-color: #991b1b;
}

[data-theme="dark"] .pq-alerts--warn {
  background: #78350f;
  color: #fef3c7;
  border-color: #92400e;
}

[data-theme="dark"] .pq-alerts--ok {
  background: #064e3b;
  color: #d1fae5;
  border-color: #065f46;
}


/* ─── E2 v2: rediseño del resultado de Pitaia con semáforo de estado ──── */

.pq-status {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 22px;
  border-radius: 12px;
  margin: 24px 0 18px;
  border: 1px solid transparent;
}

.pq-status__icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.pq-status__body {
  flex: 1;
}

.pq-status__body h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
}

.pq-status__body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.9;
}

.pq-status--ok {
  background: #d1fae5;
  color: #064e3b;
  border-color: #a7f3d0;
}

.pq-status--warn {
  background: #fef3c7;
  color: #78350f;
  border-color: #fde68a;
}

.pq-status--danger {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
}

.pq-status--error {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
}

.pq-result__title {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 700;
  color: var(--muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Sitios — formato compacto y limpio */
.pq-site {
  padding: 10px 0;
  border-bottom: 1px dashed var(--border, #e5e7eb);
}

.pq-site:last-child {
  border-bottom: none;
}

.pq-site__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 14px;
}

.pq-site__location {
  font-size: 13px;
  color: var(--muted, #6b7280);
}

.pq-site__detail {
  font-size: 13px;
  color: var(--muted, #6b7280);
  margin-top: 2px;
}

.pq-site__note {
  font-size: 12px;
  color: var(--muted, #9ca3af);
  margin-top: 4px;
  padding-left: 12px;
  border-left: 2px solid var(--border, #e5e7eb);
  font-style: italic;
}

/* Marca elementos faltantes con énfasis sutil */
.pq-missing {
  color: #92400e;
  font-style: italic;
  font-size: 13px;
}

.pq-missing-box {
  background: #fef3c7;
  color: #78350f;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
}

/* Pills de paquetes y parámetros */
.pq-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0;
}

.pq-pills-row--secondary {
  margin-top: 10px;
  align-items: center;
}

.pq-pills-label {
  font-size: 12px;
  color: var(--muted, #6b7280);
  font-weight: 600;
  margin-right: 4px;
}

.pq-pill {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  background: var(--bg-soft, #f3f4f6);
  color: var(--text, #111827);
  border-radius: 6px;
  border: 1px solid var(--border, #e5e7eb);
}

.pq-pill--package {
  background: var(--accent-soft, #dbeafe);
  color: var(--accent-strong, #1d4ed8);
  border-color: transparent;
  font-weight: 600;
}

/* Bloques de alertas / preguntas / notas — nuevo estilo conversacional */
.pq-block {
  border-radius: 10px;
  padding: 16px 18px;
  margin: 14px 0;
  border: 1px solid transparent;
}

.pq-block h4 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pq-block p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
}

.pq-list {
  margin: 0;
  padding-left: 22px;
  list-style: disc;
}

.pq-list li {
  margin: 6px 0;
  font-size: 14px;
  line-height: 1.55;
}

.pq-block--danger {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
}

.pq-block--warn {
  background: #fef9c3;
  color: #713f12;
  border-color: #fde68a;
}

.pq-block--note {
  background: #eff6ff;
  color: #1e3a8a;
  border-color: #bfdbfe;
}

.pq-raw__meta {
  display: flex;
  gap: 14px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--muted, #6b7280);
  margin: 8px 0;
}

/* Tema oscuro — ajustes */
[data-theme="dark"] .pq-status--ok {
  background: #064e3b;
  color: #d1fae5;
  border-color: #065f46;
}

[data-theme="dark"] .pq-status--warn,
[data-theme="dark"] .pq-block--warn {
  background: #78350f;
  color: #fef3c7;
  border-color: #92400e;
}

[data-theme="dark"] .pq-status--danger,
[data-theme="dark"] .pq-status--error,
[data-theme="dark"] .pq-block--danger {
  background: #7f1d1d;
  color: #fecaca;
  border-color: #991b1b;
}

[data-theme="dark"] .pq-block--note {
  background: #1e3a8a;
  color: #bfdbfe;
  border-color: #1e40af;
}

[data-theme="dark"] .pq-pill {
  background: var(--bg-soft, #111827);
  color: var(--text, #f3f4f6);
  border-color: var(--border, #374151);
}

[data-theme="dark"] .pq-pill--package {
  background: #1e3a8a;
  color: #bfdbfe;
}

[data-theme="dark"] .pq-missing-box {
  background: #78350f;
  color: #fef3c7;
}

[data-theme="dark"] .pq-missing {
  color: #fde68a;
}


/* ─── E2 v3: borrador de respuesta + CTA generar cotización ──────────── */

.pq-block--draft {
  background: #f0f9ff;
  color: #0c4a6e;
  border: 1px solid #bae6fd;
  border-radius: 10px;
  padding: 14px 18px 12px;
  margin: 14px 0;
}

.pq-draft__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 12px;
}

.pq-draft__header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  flex: 1;
}

.pq-draft__body {
  background: white;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  padding: 14px 16px;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #111827;
  white-space: pre-wrap;
  word-break: break-word;
}

.pq-draft__hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: #0369a1;
  font-style: italic;
}

.pq-btn--copy {
  background: white;
  color: #0369a1;
  border: 1px solid #7dd3fc;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.pq-btn--copy:hover {
  background: #e0f2fe;
}

.pq-btn--copy-ok {
  background: #d1fae5 !important;
  border-color: #34d399 !important;
  color: #064e3b !important;
}

/* Botón CTA grande al final */
.pq-cta-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border, #e5e7eb);
}

.pq-btn--cta {
  font-size: 15px;
  padding: 12px 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.pq-soon {
  font-size: 11px;
  font-weight: 500;
  background: rgba(0,0,0,0.08);
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pq-btn--cta:disabled {
  cursor: not-allowed;
}

/* Tema oscuro */
[data-theme="dark"] .pq-block--draft {
  background: #0c4a6e;
  color: #bae6fd;
  border-color: #075985;
}

[data-theme="dark"] .pq-draft__body {
  background: #1e293b;
  color: #f1f5f9;
  border-color: #334155;
}

[data-theme="dark"] .pq-draft__hint {
  color: #7dd3fc;
}

[data-theme="dark"] .pq-btn--copy {
  background: #1e293b;
  color: #bae6fd;
  border-color: #075985;
}

[data-theme="dark"] .pq-btn--copy:hover {
  background: #334155;
}


/* ─── E2 v4: cliente con datos granulares ───────────────────────────── */

.pq-mono {
  font-family: ui-monospace, SF Mono, Consolas, monospace;
  font-size: 12px !important;
}

.pq-cliente-line {
  font-size: 13px !important;
  color: var(--text, #111827);
  margin: 6px 0 !important;
}

.pq-cliente-contact {
  margin: 8px 0 4px !important;
  font-size: 14px !important;
}

.pq-contact-name {
  font-weight: 600;
}

.pq-contact-role {
  color: var(--muted, #6b7280);
  font-size: 13px;
}

.pq-cliente-extra {
  margin-top: 8px !important;
  padding: 6px 10px;
  background: var(--bg-soft, #f3f4f6);
  border-radius: 6px;
  font-size: 12px !important;
  color: var(--muted, #6b7280);
  border-left: 2px solid var(--border, #d1d5db);
}

[data-theme="dark"] .pq-cliente-extra {
  background: var(--bg-soft, #111827);
}


/* ═══ Pitaia widget — FAB + panel lateral + chat ═══════════════════════════ */

#pitaia-widget-host {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 1500;
  pointer-events: none;
}
#pitaia-widget-host > * {
  pointer-events: auto;
}

/* ── FAB (cerrado) ──────────────────────────────────────────────────────── */
.pw-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff 0%, #fce7f3 100%);
  border: 2px solid rgba(236, 72, 153, 0.4);
  box-shadow: 0 8px 24px rgba(236, 72, 153, 0.25), 0 2px 6px rgba(0,0,0,0.1);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
  z-index: 1500;
}
.pw-fab:hover {
  transform: scale(1.06) translateY(-2px);
  box-shadow: 0 12px 32px rgba(236, 72, 153, 0.35), 0 4px 8px rgba(0,0,0,0.12);
}
.pw-fab:active {
  transform: scale(0.98);
}
.pw-fab__avatar {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
  border-radius: 50%;
}
.pw-fab__pulse {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(236, 72, 153, 0.5);
  animation: pw-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes pw-pulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* ── Panel abierto ──────────────────────────────────────────────────────── */
.pw-panel {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 600px;
  max-height: calc(100vh - 100px);
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 16px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: pw-slide-up 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1500;
}
@keyframes pw-slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.pw-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
  border-bottom: 1px solid var(--border, #f3e8ff);
  flex-shrink: 0;
}
.pw-panel__title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pw-panel__avatar {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 50%;
  background: white;
  padding: 2px;
  border: 1.5px solid rgba(236, 72, 153, 0.3);
}
.pw-panel__title h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #831843;
}
.pw-panel__title p {
  margin: 0;
  font-size: 12px;
  color: #9d174d;
}
.pw-panel__actions {
  display: flex;
  gap: 4px;
}
.pw-icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: #831843;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.pw-icon-btn:hover {
  background: rgba(236, 72, 153, 0.1);
}

.pw-panel__body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ── Menu ──────────────────────────────────────────────────────────────── */
.pw-menu {
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pw-menu__greeting {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--text, #111827);
  line-height: 1.5;
}
.pw-menu-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--bg-soft, #fafafa);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  padding: 14px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
  width: 100%;
}
.pw-menu-card:hover {
  border-color: rgba(236, 72, 153, 0.5);
  background: #fdf2f8;
  transform: translateY(-1px);
}
.pw-menu-card__icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.pw-menu-card h4 {
  margin: 0 0 3px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #111827);
}
.pw-menu-card p {
  margin: 0;
  font-size: 12px;
  color: var(--muted, #6b7280);
  line-height: 1.4;
}

/* ── Chat ──────────────────────────────────────────────────────────────── */
.pw-chat {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.pw-chat__log {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pw-empty {
  font-size: 13px;
  color: var(--muted, #6b7280);
  line-height: 1.6;
}
.pw-empty p {
  margin: 0 0 8px;
}
.pw-empty ul {
  margin: 0;
  padding-left: 18px;
}
.pw-empty li {
  margin: 4px 0;
  cursor: default;
}

.pw-msg-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.pw-msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: white;
  padding: 1px;
  border: 1px solid rgba(236, 72, 153, 0.2);
  flex-shrink: 0;
  margin-top: 2px;
}

.pw-bubble {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 85%;
  word-wrap: break-word;
  white-space: normal;
}
.pw-bubble--user {
  background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
  color: white;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.pw-bubble--bot {
  background: var(--bg-soft, #f3f4f6);
  color: var(--text, #111827);
  border: 1px solid var(--border, #e5e7eb);
  border-bottom-left-radius: 4px;
}
.pw-bubble--bot strong {
  color: #831843;
}
.pw-bubble--loading {
  padding: 14px 18px;
}

.pw-typing {
  display: inline-flex;
  gap: 4px;
}
.pw-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted, #9ca3af);
  animation: pw-typing 1.2s infinite ease-in-out;
}
.pw-typing span:nth-child(2) { animation-delay: 0.15s; }
.pw-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes pw-typing {
  0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
  30% { opacity: 1; transform: scale(1); }
}

.pw-error {
  padding: 10px 12px;
  background: #fee2e2;
  color: #991b1b;
  border-radius: 8px;
  font-size: 13px;
  border: 1px solid #fecaca;
}

.pw-chat__form {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 12px;
  border-top: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
}
.pw-chat__input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
  resize: none;
  background: var(--bg-soft, #fafafa);
  color: var(--text, #111827);
  line-height: 1.4;
}
.pw-chat__input:focus {
  outline: none;
  border-color: rgba(236, 72, 153, 0.6);
  background: white;
}
.pw-chat__send {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s, transform 0.15s;
  flex-shrink: 0;
}
.pw-chat__send:hover:not(:disabled) {
  transform: scale(1.05);
}
.pw-chat__send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pw-chat__clear {
  background: none;
  border: none;
  color: var(--muted, #9ca3af);
  font-size: 12px;
  padding: 6px 0;
  text-align: center;
  cursor: pointer;
  text-decoration: underline;
  margin-bottom: 6px;
}
.pw-chat__clear:hover {
  color: var(--text, #111827);
}

/* Mobile */
@media (max-width: 600px) {
  .pw-fab {
    bottom: 16px;
    right: 16px;
    width: 56px;
    height: 56px;
  }
  .pw-fab__avatar {
    width: 48px;
    height: 48px;
  }
  .pw-panel {
    bottom: 0;
    right: 0;
    left: 0;
    width: auto;
    max-width: none;
    height: 85vh;
    border-radius: 16px 16px 0 0;
  }
}

/* Tema oscuro */
[data-theme="dark"] .pw-panel {
  background: #1f2937;
  border-color: #374151;
}
[data-theme="dark"] .pw-panel__header {
  background: linear-gradient(135deg, #4a044e 0%, #6b21a8 100%);
  border-bottom-color: #6b21a8;
}
[data-theme="dark"] .pw-panel__title h3,
[data-theme="dark"] .pw-panel__title p,
[data-theme="dark"] .pw-icon-btn {
  color: #fce7f3;
}
[data-theme="dark"] .pw-menu-card {
  background: #111827;
  border-color: #374151;
}
[data-theme="dark"] .pw-menu-card:hover {
  background: #4a044e;
  border-color: #ec4899;
}
[data-theme="dark"] .pw-menu-card h4 {
  color: #f9fafb;
}
[data-theme="dark"] .pw-bubble--bot {
  background: #111827;
  border-color: #374151;
  color: #f3f4f6;
}
[data-theme="dark"] .pw-chat__form {
  background: #1f2937;
  border-top-color: #374151;
}
[data-theme="dark"] .pw-chat__input {
  background: #111827;
  border-color: #374151;
  color: #f3f4f6;
}
[data-theme="dark"] .pw-chat__input:focus {
  background: #1f2937;
}


/* ─── Botón 'Volver al área' en parse-quote cuando viene del widget ───── */
.pq-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-soft, #f3f4f6);
  border: 1px solid var(--border, #e5e7eb);
  color: var(--text, #111827);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 16px;
  transition: all 0.15s;
}
.pq-back:hover {
  background: var(--surface, #fff);
  border-color: rgba(236, 72, 153, 0.4);
  color: #831843;
  transform: translateX(-2px);
}
[data-theme="dark"] .pq-back {
  background: #111827;
  border-color: #374151;
  color: #f3f4f6;
}
[data-theme="dark"] .pq-back:hover {
  border-color: #ec4899;
  color: #fce7f3;
}


/* ─── Banner pre-llenado desde Pitaia en el cotizador ──────────────── */

.pp-banner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 18px;
  border-radius: 12px;
  margin: 12px 0 18px;
}

.pp-banner--pitaia {
  background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
  border: 1px solid rgba(236, 72, 153, 0.3);
}

.pp-banner__icon {
  font-size: 22px;
  line-height: 1.2;
  flex-shrink: 0;
  margin-top: 2px;
}

.pp-banner__body {
  flex: 1;
}

.pp-banner__body strong {
  display: block;
  font-size: 14px;
  color: #831843;
  margin-bottom: 4px;
}

.pp-banner__body p {
  margin: 4px 0;
  font-size: 13px;
  line-height: 1.5;
  color: #6b1d4d;
}

.pp-banner__sub {
  margin-top: 10px !important;
  padding-top: 10px;
  border-top: 1px dashed rgba(236, 72, 153, 0.3);
}

.pp-banner__dismiss {
  margin-top: 10px;
  background: white;
  border: 1px solid rgba(236, 72, 153, 0.4);
  color: #831843;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.pp-banner__dismiss:hover {
  background: #fce7f3;
}

.pp-tag {
  display: inline-block;
  padding: 2px 8px;
  margin: 2px 4px 2px 0;
  font-size: 11px;
  font-weight: 600;
  background: rgba(236, 72, 153, 0.15);
  color: #831843;
  border-radius: 4px;
}
.pp-tag--soft {
  background: rgba(0,0,0,0.05);
  color: #555;
  font-weight: 500;
}

[data-theme="dark"] .pp-banner--pitaia {
  background: linear-gradient(135deg, #4a044e 0%, #6b21a8 100%);
  border-color: #ec4899;
}
[data-theme="dark"] .pp-banner__body strong,
[data-theme="dark"] .pp-banner__body p {
  color: #fce7f3;
}
[data-theme="dark"] .pp-banner__dismiss {
  background: #4a044e;
  color: #fce7f3;
  border-color: #ec4899;
}
[data-theme="dark"] .pp-banner__dismiss:hover {
  background: #6b21a8;
}
[data-theme="dark"] .pp-tag {
  background: rgba(252, 231, 243, 0.15);
  color: #fce7f3;
}


/* ─── Acciones del banner pre-llenado ──────────────────────────────── */

.pp-banner__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  align-items: center;
}

.pp-banner__cta {
  background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.pp-banner__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}


/* ─── Modo operativo cotizador: card único + toggle admin ─────────── */

.pp-card--solo {
  max-width: 480px;
}

.pp-card__hint {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border, rgba(255,255,255,0.12));
  font-size: 12px;
  color: var(--muted, #94a3b8);
  font-style: italic;
  line-height: 1.5;
}

.pp-internal-toggle {
  display: flex;
  justify-content: flex-end;
  margin: -8px 0 12px;
}

.pp-internal-toggle__btn {
  background: none;
  border: 1px dashed var(--border, rgba(148,163,184,0.3));
  color: var(--muted, #94a3b8);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.pp-internal-toggle__btn:hover {
  border-color: var(--accent, #2dd4bf);
  color: var(--text, #f1f5f9);
  background: rgba(45, 212, 191, 0.05);
}


/* ─── Bandeja muestreo: cotizaciones pendientes de confirmación ─────── */

.muestreo-cotiz-pendientes {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(245, 158, 11, 0.04) 100%);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 20px;
}

.muestreo-cotiz-pendientes--loading {
  background: var(--bg-soft, #1f2937);
  border-color: var(--border, rgba(148,163,184,0.2));
  text-align: center;
  color: var(--muted, #94a3b8);
  font-size: 13px;
}

.muestreo-cotiz-pendientes__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.muestreo-cotiz-pendientes__eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #b45309;
  margin: 0 0 4px;
}

[data-theme="dark"] .muestreo-cotiz-pendientes__eyebrow {
  color: #fbbf24;
}

.muestreo-cotiz-pendientes__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text, #f1f5f9);
}

.muestreo-cotiz-pendientes__refresh {
  background: transparent;
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #b45309;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
[data-theme="dark"] .muestreo-cotiz-pendientes__refresh { color: #fbbf24; }
.muestreo-cotiz-pendientes__refresh:hover {
  background: rgba(245, 158, 11, 0.1);
  transform: rotate(180deg);
}

.muestreo-cotiz-pendientes__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.muestreo-cotiz-pendientes__row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: var(--surface, rgba(255,255,255,0.02));
  border: 1px solid var(--border, rgba(148,163,184,0.15));
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
  width: 100%;
}

.muestreo-cotiz-pendientes__row:hover {
  border-color: rgba(245, 158, 11, 0.6);
  background: rgba(245, 158, 11, 0.05);
}

.muestreo-cotiz-pendientes__numero {
  font-family: ui-monospace, SF Mono, Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  color: #b45309;
}
[data-theme="dark"] .muestreo-cotiz-pendientes__numero { color: #fbbf24; }

.muestreo-cotiz-pendientes__client {
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #f1f5f9);
}

.muestreo-cotiz-pendientes__detail {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: var(--muted, #94a3b8);
  text-align: right;
}

.muestreo-cotiz-pendientes__time {
  font-style: italic;
  font-size: 11px;
}

.muestreo-cotiz-pendientes__monto {
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #f1f5f9);
  font-variant-numeric: tabular-nums;
}

.muestreo-cotiz-pendientes__cta {
  font-size: 12px;
  font-weight: 600;
  color: #b45309;
  white-space: nowrap;
}
[data-theme="dark"] .muestreo-cotiz-pendientes__cta { color: #fbbf24; }

@media (max-width: 720px) {
  .muestreo-cotiz-pendientes__row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "numero monto"
      "client client"
      "detail cta";
  }
  .muestreo-cotiz-pendientes__numero  { grid-area: numero; }
  .muestreo-cotiz-pendientes__client  { grid-area: client; }
  .muestreo-cotiz-pendientes__detail  { grid-area: detail; align-items: flex-start; text-align: left; }
  .muestreo-cotiz-pendientes__monto   { grid-area: monto; }
  .muestreo-cotiz-pendientes__cta     { grid-area: cta; text-align: right; }
}


/* ─── Tag de modo de cotización (muestreo vs análisis solo) ───────── */

.pq-modo-tag {
  display: inline-block;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(45, 212, 191, 0.12);
  color: #0d9488;
  border: 1px solid rgba(45, 212, 191, 0.3);
  border-radius: 6px;
  margin-right: auto;
  align-self: center;
}

.pq-modo-tag--analisis {
  background: rgba(99, 102, 241, 0.12);
  color: #4338ca;
  border-color: rgba(99, 102, 241, 0.3);
}

.pq-modo-tag--ambiguo {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.3);
}

[data-theme="dark"] .pq-modo-tag {
  background: rgba(45, 212, 191, 0.18);
  color: #5eead4;
}

[data-theme="dark"] .pq-modo-tag--analisis {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}

[data-theme="dark"] .pq-modo-tag--ambiguo {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
}

.pq-cta-row {
  flex-wrap: wrap;
  gap: 12px;
}

/* ════════════════════════════════════════════════════════════════════════
   REVISIÓN DE GERENCIA — ISO 17025:2017 §8.9
   Bandeja continua + detalle de solicitudes triagiadas por Pitaia
   ════════════════════════════════════════════════════════════════════════ */

.mr-view {
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px 0;
}

.mr-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 24px;
}
.mr-header h1 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--ink);
  margin: 0 0 6px;
}
.mr-lead {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  max-width: 70ch;
}

.mr-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.mr-filters select {
  padding: 7px 10px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 13px;
}

.mr-table-wrap { overflow-x: auto; }
.mr-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  overflow: hidden;
}
.mr-table th {
  text-align: left;
  padding: 12px 16px;
  background: var(--surface-tint);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  border-bottom: 1px solid var(--hairline);
}
.mr-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
  font-size: 13px;
}
.mr-table tbody tr:last-child td { border-bottom: none; }
.mr-table tbody tr { cursor: pointer; transition: background .12s; }
.mr-table tbody tr:hover { background: var(--row-hover); }

.mr-row__main strong { display: block; font-size: 14px; color: var(--ink); }
.mr-row__sub { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.mr-row__inciso { display: block; font-size: 11px; font-weight: 700; color: var(--accent); }
.mr-row__title { display: block; font-size: 12.5px; color: var(--muted-strong); }

.mr-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.mr-pill--nuevo            { background: rgba(59,130,246,.16); color: #93c5fd; }
.mr-pill--triagiado        { background: rgba(168,85,247,.16); color: #d8b4fe; }
.mr-pill--en-revision      { background: rgba(234,179,8,.16); color: #fcd34d; }
.mr-pill--tratar           { background: rgba(245,158,11,.18); color: #fbbf24; }
.mr-pill--responder        { background: rgba(13,148,136,.20); color: #5eead4; }
.mr-pill--archivado        { background: var(--surface-tint-strong); color: var(--muted); }
.mr-pill--escalado         { background: rgba(220,38,38,.18); color: #fca5a5; }
.mr-pill--cerrado          { background: rgba(34,197,94,.18); color: #86efac; }

.mr-prio {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.mr-prio--alta  { background: rgba(220,38,38,.16); color: #fca5a5; }
.mr-prio--media { background: rgba(245,158,11,.16); color: #fbbf24; }
.mr-prio--baja  { background: var(--surface-tint-strong); color: var(--muted); }

.mr-empty {
  padding: 64px 32px;
  text-align: center;
  background: var(--bg-soft);
  border: 1px dashed var(--border);
  border-radius: 12px;
}
.mr-empty h3 { font-size: 16px; color: var(--ink); margin: 0 0 8px; }

.mr-loading { padding: 32px; text-align: center; color: var(--muted); }

/* ─── Detalle de solicitud ─── */
.mr-detail__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  gap: 16px;
}
.mr-detail__head-meta { display: flex; gap: 8px; align-items: center; }

.mr-detail__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
@media (max-width: 1100px) {
  .mr-detail__grid { grid-template-columns: 1fr; }
}

.mr-card {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 14px;
}
.mr-card h3 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin: 0 0 12px;
}
.mr-card--triage {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}
.mr-card__head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.mr-card__head h3 { margin: 0; }

.mr-email-meta {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mr-email-meta strong { color: var(--ink); }

.mr-email-body {
  background: var(--surface-tint);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 420px;
  overflow-y: auto;
  margin: 0;
}

.mr-resumen {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 12px;
  line-height: 1.4;
}

.mr-triage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px 16px;
  margin-bottom: 10px;
}
.mr-triage-grid > div { display: flex; flex-direction: column; }
.mr-triage-grid strong {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 3px;
}
.mr-triage-grid span { font-size: 13px; color: var(--ink); font-weight: 500; }

.mr-razonamiento {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--accent-line);
  font-size: 12.5px;
  color: var(--muted-strong);
}
.mr-razonamiento summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.mr-razonamiento p { margin: 6px 0 0; line-height: 1.5; }

.mr-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}
.mr-field span {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.mr-field select, .mr-field textarea, .mr-field input {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--ink);
  font-family: var(--font-sans);
}

.mr-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.mr-reply-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.mr-reply-sent {
  font-size: 12px;
  color: var(--accent);
  margin: 8px 0 0;
}

#mrReplyText, #mrPasteBody {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--ink);
  font-family: var(--font-sans);
  resize: vertical;
  line-height: 1.5;
}

/* ─── Modal de pegar correo ─── */
.mr-paste-modal { max-width: 720px; }
.mr-paste-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mr-paste-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.mr-paste-form input, .mr-paste-form textarea {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--ink);
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.mr-paste-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 600px) {
  .mr-paste-row { grid-template-columns: 1fr; }
}
.mr-paste-error {
  padding: 10px 12px;
  background: rgba(220,38,38,.12);
  border: 1px solid rgba(220,38,38,.3);
  color: #fca5a5;
  border-radius: 6px;
  font-size: 13px;
}
.mr-paste-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}


/* ─── KPI bar (header de bandeja) ─── */
.mr-kpi-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.mr-kpi {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mr-kpi__label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
}
.mr-kpi__value {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ink);
  line-height: 1;
}
.mr-kpi--alert {
  background: rgba(220,38,38,.08);
  border-color: rgba(220,38,38,.32);
}
.mr-kpi--alert .mr-kpi__value { color: #dc2626; }
.mr-kpi--warn {
  background: rgba(245,158,11,.08);
  border-color: rgba(245,158,11,.32);
}
.mr-kpi--warn .mr-kpi__value { color: #d97706; }
.mr-kpi--ok {
  background: rgba(34,197,94,.07);
  border-color: rgba(34,197,94,.28);
}
.mr-kpi--ok .mr-kpi__value { color: #16a34a; }
.mr-kpi--open .mr-kpi__value { color: var(--accent); }

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

/* ─── Roll-up anual ─── */
.mr-rollup-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.mr-rollup-title h1 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.03em;
  margin: 0 0 4px;
  color: var(--ink);
}
.mr-rollup-actions { display: flex; gap: 8px; align-items: center; }
.mr-rollup-actions select {
  padding: 7px 10px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}
.mr-rollup-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}
.mr-rollup-groups {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mr-rollup-group {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
}
.mr-rollup-group--empty { opacity: .6; }
.mr-rollup-group--fuera { border-color: var(--muted-soft); }
.mr-rollup-group header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.mr-rollup-inciso {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: .02em;
}
.mr-rollup-group h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  flex: 1;
  min-width: 0;
}
.mr-rollup-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
}
.mr-rollup-stats strong { color: var(--ink); font-weight: 700; }
.mr-rollup-descripcion {
  font-size: 12.5px;
  color: var(--muted-strong);
  margin: 0 0 12px;
  line-height: 1.5;
}
.mr-rollup-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mr-rollup-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface-tint);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.mr-rollup-item:hover {
  background: var(--surface-tint-strong);
  border-color: var(--accent-line);
}
.mr-rollup-item__main strong {
  display: block;
  font-size: 13px;
  color: var(--ink);
  font-weight: 600;
}
.mr-rollup-item__main span {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}
.mr-rollup-item__meta {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

@media print {
  .sidebar, .topbar, .mr-rollup-actions, .mr-rollup-header button, .no-print {
    display: none !important;
  }
  .main-wrap { margin-left: 0; }
  .mr-rollup-group { break-inside: avoid; page-break-inside: avoid; }
  .mr-rollup-item { break-inside: avoid; }
}

.mr-empty--error {
  border-color: rgba(220,38,38,.32);
  background: rgba(220,38,38,.05);
}
.mr-empty--error h3 { color: #dc2626; }
.mr-empty--error code {
  background: var(--surface-tint-strong);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink);
}

/* ─── Bloque de acciones de Decisión de gerencia (botón primario contextual) ─── */
.mr-actions-block {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}
.mr-actions-suggestion {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.mr-actions-suggestion__label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--accent);
}
.mr-actions-primary {
  width: 100%;
  font-size: 13px;
  font-weight: 700;
  padding: 11px 14px;
}
.mr-actions-secondary {
  font-size: 12px;
}
.mr-actions-secondary > summary {
  list-style: none;
  cursor: pointer;
  color: var(--muted);
  padding: 4px 0;
  user-select: none;
}
.mr-actions-secondary > summary::-webkit-details-marker { display: none; }
.mr-actions-secondary > summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform .15s ease;
}
.mr-actions-secondary[open] > summary::before {
  transform: rotate(90deg);
}
.mr-actions-secondary > summary:hover { color: var(--ink); }
.mr-actions-secondary__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.mr-actions-final {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--surface-tint);
  border: 1px dashed var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mr-actions-final__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-strong);
}

.mr-email-signature {
  margin-top: 8px;
  font-size: 12px;
}
.mr-email-signature > summary {
  cursor: pointer;
  color: var(--muted);
  padding: 6px 0;
  list-style: none;
  user-select: none;
}
.mr-email-signature > summary::-webkit-details-marker { display: none; }
.mr-email-signature > summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform .15s ease;
}
.mr-email-signature[open] > summary::before {
  transform: rotate(90deg);
}
.mr-email-signature > summary:hover { color: var(--ink); }
.mr-email-body--signature {
  opacity: .65;
  font-size: 12px;
  max-height: 240px;
}