/* ==========================================================
   NEL · Capa de pulido visual (Web · H5 · BPM)
   Se carga DESPUÉS de las hojas de cada superficie.
   Solo refina tokens existentes: radios, sombras, ritmo
   tipográfico, estados hover y algunos defectos de maquetación.
   No introduce colores nuevos ni gradientes.
   ========================================================== */

/* ---------- Tipografía ---------- */
h1, h2, .display, .h5-hero-title, .wpanel-title { text-wrap: balance; }
p, .lead, .meta, .service-desc, .qa-desc, .pc-desc { text-wrap: pretty; }
.display { letter-spacing: -0.028em; }
.eyebrow { font-weight: 700; letter-spacing: .08em; }

/* ---------- Botones ---------- */
.btn { border-radius: 10px; font-weight: 650; }
.btn-sm { border-radius: 8px; }
.btn-lg { border-radius: 12px; }
.btn-primary { box-shadow: 0 1px 2px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.08); }
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:active { transform: translateY(1px); box-shadow: var(--nel-shadow-1); }
.btn-secondary { box-shadow: var(--nel-shadow-1); }
.btn svg { flex-shrink: 0; }

/* ---------- Campos ---------- */
.input { border-radius: 10px; }
.input-lg { border-radius: 12px; }

/* ---------- Tarjetas (todas las superficies) ---------- */
.card,
.service-card,
.audience-card,
.qa-card,
.pb-card,
.kpi,
.wpanel,
.v-stepper {
  border-color: var(--nel-ink-150);
  box-shadow: var(--nel-shadow-1);
}
.card, .pb-card, .kpi, .qa-card { border-radius: 14px; }
.service-card, .audience-card, .wpanel, .v-stepper { border-radius: 18px; }

.service-card:hover,
.qa-card:hover,
.card-hover:hover {
  border-color: var(--nel-brand-200);
  box-shadow: 0 14px 32px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.04);
}
.service-card .service-title { font-size: 16.5px; letter-spacing: -0.01em; }
.service-card .service-meta { border-top-color: var(--nel-ink-100); }

.qa-card .icon-plate,
.audience-head .icon-plate { transition: background var(--nel-t-fast) var(--nel-ease-out), color var(--nel-t-fast) var(--nel-ease-out); }
.qa-card:hover .icon-plate { background: var(--nel-brand-800); color: #fff; }

.card-header { background: var(--nel-surface); }
.card-footer { background: var(--nel-ink-50); }

/* Plaquitas de icono: borde tenue para dar volumen */
.icon-plate { box-shadow: inset 0 0 0 1px var(--nel-brand-200); }

/* ---------- Avisos ---------- */
.alert { border-radius: 12px; }
.notice-bar { border-radius: 14px; padding: 16px 20px; }

/* ---------- Web · Cabecera y hero ---------- */
.site-header { box-shadow: 0 1px 0 rgba(15,23,42,.02); }
.site-nav a { border-radius: 8px; }
.hero-search { border-radius: 16px; box-shadow: 0 12px 32px rgba(18,70,150,.08), 0 1px 2px rgba(15,23,42,.04); }
.hero-search:focus-within { border-color: var(--nel-brand-600); box-shadow: 0 12px 32px rgba(18,70,150,.10), var(--nel-focus-ring); }
.hero-search .btn { border-radius: 12px; }
.chip-suggest { background: rgba(255,255,255,.8); }
.trust-item .icon-plate, .trust-item > span:first-child { flex-shrink: 0; }

.section-header h2 { letter-spacing: -0.022em; }

/* ---------- Web · Pie ---------- */
.site-footer { margin-top: 80px; }
.footer-links a { transition: color var(--nel-t-fast) var(--nel-ease-out), transform var(--nel-t-fast) var(--nel-ease-out); }
.footer-links a:hover { transform: translateX(2px); }

/* ---------- Tablas ---------- */
.table-wrap, .bpm-table-wrap { border-radius: 14px; }
.table thead th, .bpm-table thead th, .pb-table th { background: var(--nel-ink-50); color: var(--nel-ink-500); }

/* BPM · tabla de bandeja: los encabezados largos no deben solaparse
   y el botón de acción no debe recortarse. */
.pb-table th { white-space: normal; line-height: 1.35; vertical-align: bottom; overflow-wrap: normal; word-break: keep-all; }
.pb-table col:nth-child(3) { width: 20% !important; }
.pb-table col:nth-child(5) { width: 13% !important; }
.pb-table col:nth-child(6) { width: 11% !important; }
.pb-table col:nth-child(7) { width: 104px !important; }
.pb-table td:last-child, .pb-table th:last-child { text-align: right; padding-right: 20px; }
.pb-table td:last-child .btn { min-width: 76px; }
.pb-table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--nel-brand-600); }
.pb-card-head { padding: 16px 20px; }
.pb-card-head h2 { font-size: 16px; letter-spacing: -0.01em; }

/* ---------- BPM · Barra lateral ---------- */
.bpm-sidebar { box-shadow: inset -1px 0 0 rgba(255,255,255,.04); }
.bpm-nav-item { border-radius: 10px; padding: 10px 12px; }
.bpm-nav-item.is-active {
  background: rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.bpm-nav-item.is-active::before { top: 10px; bottom: 10px; background: var(--nel-brand-400); }
.bpm-inst-badge { border-radius: 12px; }
.bpm-topbar { box-shadow: 0 1px 0 rgba(15,23,42,.02); }
.kpi-icon { border-radius: 10px; }

/* ---------- H5 ---------- */
/* Marco del dispositivo en pantallas anchas: esquinas y borde suaves */
@media (min-width: 421px) {
  .h5-outer { padding: 28px 12px; }
  .h5-frame {
    border-radius: 32px;
    box-shadow: 0 0 0 1px var(--nel-ink-150), 0 30px 80px rgba(15,23,42,.10);
    overflow: clip;
  }
}
.h5-card { border-radius: 16px; border-color: var(--nel-ink-150); box-shadow: var(--nel-shadow-1); }
.h5-search { border-radius: 14px; }
.h5-search:focus-within { border-color: var(--nel-brand-600); box-shadow: var(--nel-focus-ring); }
.h5-svc-tile { border-radius: 14px; }
.h5-svc-tile:active { transform: scale(.97); }
.h5-featured { border-radius: 16px; box-shadow: var(--nel-shadow-1); }
.h5-chip { background: var(--nel-surface); }
.h5-appbar .back-btn { box-shadow: var(--nel-shadow-1); }
.h5-tab.is-active svg { stroke-width: 2.1; }
.h5-action-bar .btn { border-radius: 12px; }

/* ---------- Asistente (wizard Web) ---------- */
.vstep { border-radius: 10px; padding: 8px 6px; margin: 0 -6px; transition: background var(--nel-t-fast) var(--nel-ease-out); }
.vstep:hover { background: var(--nel-ink-50); }
.vstep + .vstep::before { left: 21px; }
.wpanel-head { background: var(--nel-surface); }
.wpanel-foot { background: var(--nel-surface); }

/* ---------- Scrollbar y selección ---------- */
::selection { background: var(--nel-brand-200); }

@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover, .footer-links a:hover, .h5-svc-tile:active { transform: none; }
}

/* ==========================================================
   Duotone icon plates — featured surfaces (home trust bar, audience)
   ========================================================== */
.icon-plate.duo-plate {
  --duo-fill: rgba(58,149,236,.26);
  --duo-accent: var(--nel-brand-600);
  position: relative;
  color: var(--nel-brand-800);
  background:
    radial-gradient(120% 90% at 20% 0%, #fff 0%, rgba(255,255,255,0) 60%),
    linear-gradient(160deg, var(--nel-brand-50) 0%, var(--nel-brand-100) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(18,70,150,.10),
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(14,56,120,.08),
    0 6px 14px -6px rgba(18,70,150,.28);
}
.icon-plate.duo-plate svg { stroke-width: 1.6; overflow: visible; }
.icon-plate.duo-sm { width: 40px; height: 40px; border-radius: 12px; }
.icon-plate.duo-lg { width: 56px; height: 56px; border-radius: 16px; }
.icon-plate.duo-lg::after {
  content: ""; position: absolute; inset: 4px; border-radius: 12px;
  border: 1px dashed rgba(18,70,150,.10); pointer-events: none;
}
.audience-card .icon-plate.duo-plate,
.trust-item .icon-plate.duo-plate {
  transition: transform var(--nel-t-fast) var(--nel-ease-out), box-shadow var(--nel-t-fast) var(--nel-ease-out), background var(--nel-t-fast) var(--nel-ease-out);
}
.audience-card:hover .icon-plate.duo-plate {
  --duo-fill: rgba(255,255,255,.16);
  --duo-accent: var(--nel-brand-400);
  background: linear-gradient(160deg, var(--nel-brand-700) 0%, var(--nel-brand-900) 100%) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 22px -8px rgba(14,56,120,.55);
}
.audience-card:hover .icon-plate.duo-lg::after { border-color: rgba(255,255,255,.18); }
.trust-item:hover .icon-plate.duo-plate { transform: translateY(-1px); }
.audience-card.is-empty .icon-plate.duo-plate { --duo-accent: var(--nel-brand-400); }

.icon-plate.duo-md { width: 48px; height: 48px; border-radius: 14px; }
.icon-plate.duo-xs { width: 34px; height: 34px; border-radius: 10px; }
.icon-plate.duo-muted {
  --duo-fill: rgba(107,122,148,.14);
  --duo-accent: var(--nel-brand-600);
  color: var(--nel-ink-600, #4A5873);
  background: linear-gradient(160deg, #FAFBFD 0%, #EEF1F6 100%);
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.07), inset 0 1px 0 #fff, 0 1px 2px rgba(15,23,42,.06);
}
.qa-card .icon-plate.duo-plate,
.help-topic .icon-plate.duo-plate,
.channel-card .icon-plate.duo-plate,
.id-actions .icon-plate.duo-plate { transition: transform var(--nel-t-fast) var(--nel-ease-out), box-shadow var(--nel-t-fast) var(--nel-ease-out), background var(--nel-t-fast) var(--nel-ease-out), color var(--nel-t-fast) var(--nel-ease-out); }
.qa-card:hover .icon-plate.duo-plate,
.help-topic:hover .icon-plate.duo-plate,
a:hover > .icon-plate.duo-md {
  --duo-fill: rgba(255,255,255,.16);
  --duo-accent: var(--nel-brand-400);
  background: linear-gradient(160deg, var(--nel-brand-700) 0%, var(--nel-brand-900) 100%);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 22px -8px rgba(14,56,120,.55);
}

/* ---- Duotone plates: generic (auto-upgraded by icons.js on any plate container) ---- */
.duo-plate.duo-plate {
  --duo-fill: rgba(58,149,236,.26);
  --duo-accent: var(--nel-brand-600);
  color: var(--nel-brand-800);
  background:
    radial-gradient(120% 90% at 20% 0%, #fff 0%, rgba(255,255,255,0) 60%),
    linear-gradient(160deg, var(--nel-brand-50) 0%, var(--nel-brand-100) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(18,70,150,.10),
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(14,56,120,.08),
    0 6px 14px -6px rgba(18,70,150,.28);
  transition: transform var(--nel-t-fast) var(--nel-ease-out), box-shadow var(--nel-t-fast) var(--nel-ease-out), background var(--nel-t-fast) var(--nel-ease-out), color var(--nel-t-fast) var(--nel-ease-out);
}
.duo-plate svg { overflow: visible; }
.duo-plate.duo-muted.duo-muted {
  --duo-fill: rgba(107,122,148,.14);
  color: var(--nel-ink-600, #4A5873);
  background: linear-gradient(160deg, #FAFBFD 0%, #EEF1F6 100%);
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.07), inset 0 1px 0 #fff, 0 1px 2px rgba(15,23,42,.06);
}
.aud-card.is-active .duo-plate.duo-plate,
.hm-aud button.is-active .duo-plate.duo-plate,
.qa-card:hover .duo-plate.duo-plate,
.help-topic:hover .duo-plate.duo-plate,
.audience-card:hover .duo-plate.duo-plate {
  --duo-fill: rgba(255,255,255,.16);
  --duo-accent: var(--nel-brand-400);
  color: #fff;
  background: linear-gradient(160deg, var(--nel-brand-700) 0%, var(--nel-brand-900) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 22px -8px rgba(14,56,120,.55);
}
.aud-card:not(.is-active):hover .duo-plate.duo-plate { transform: translateY(-1px); }
.auth-feature-ico.duo-plate.duo-plate {
  --duo-fill: rgba(125,186,244,.16);
  --duo-accent: #fff;
  color: var(--nel-brand-300);
  background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.14);
}
.lookup-illus.duo-plate, .auth-mini-ico.duo-plate { border-radius: 22px; }