/* =========================================================
   PR4001 — UI/UX Refresh · STATRIA
   - Paleta viva, gradientes, botones y formularios unificados
   - Password con toggle, inputs con ícono, estados de validación
   - Cards con hover-lift, tablas mejoradas, landing menos plana
========================================================= */

/* ===========================
   🎛️ VARIABLES + THEME
=========================== */
:root{
  /* Brand */
  --brand: #0f62fe;
  --brand-2: #0043ce;
  --accent: #ff385c;
  --success: #16a34a;
  --warning: #f59e0b;
  --danger:  #ef4444;
  /* Mobile viewport helpers (set by /static/js/viewport.js) */
  --vh: 1vh;
  --header-height: 0px;

  /* Backgrounds */
  --bg: #f4f6f9;
  --bg-soft: #f7f8fb;
  --card: #ffffff;

  /* Typography */
  --ink: #0f172a;
  --muted: #6b7280;

  /* Decor */
  --ring: rgba(15, 98, 254, .25);
  --radius: 12px;
  --gap: 14px;

  /* Inputs */
  --input-height: 44px;
  --input-radius: 10px;
  --input-border: #e5e7eb;
  --input-padding-y: 10px;
  --input-padding-x: 12px;
  --input-font-size: 15px;

  /* Gradients */
  --brand-grad: linear-gradient(135deg, #1c4ffd, #0f62fe 55%, #0043ce);
  --bg-grad: linear-gradient(180deg, #fff, #f7f9ff 65%, #f3f6ff);
}

/* ===========================
   🎨 GENERALES
=========================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ 
  height:100%; 
  scroll-behavior:smooth;
  /* Keep anchor jumps below sticky headers */
  scroll-padding-top: var(--header-height);
}
body{
  height:100%;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  margin:0; padding:0;
  background: var(--bg-grad);
  color: var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* If a header is taken out of flow (fixed), offset main content safely. */
body.st-mainOffset main{
  padding-top: var(--header-height);
}
/* Utility for full-height containers without 100vh (mobile-safe). */
.full-height{
  height: calc(var(--vh) * 100);
}
input, select, textarea, button{ font-family: inherit; }
h1,h2,h3{ color:#0f2342; margin-top:0; }
h1{ font-weight:900; letter-spacing:-.02em; }
h2{ font-weight:800; letter-spacing:-.01em; }
h3{ font-weight:700; }
p{ line-height:1.6; }
strong{ font-weight:700; color:#0f2342; }
.hidden{ display:none !important; }

/* =========================
   PWA / Offline (Phase 1)
   ========================= */
.st-offline{
  position:sticky;
  top:0;
  z-index:9999;
  background:#111827;
  color:#fff;
  padding:10px 14px;
  font-weight:800;
  font-size:13px;
  letter-spacing:.2px;
  border-bottom:1px solid rgba(255,255,255,.15);
}

/* PWA install banner (dashboard) */
.st-install-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#f8fafc;
  margin:10px 0 14px;
}
.st-install-banner__text{
  font-weight:800;
  color:#0f172a;
  font-size:13px;
}
.st-install-banner__btn{ white-space:nowrap; }

/* Global overlay for loading/saving (Step 4 / edit) */
.st-busy-overlay{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.52);
  backdrop-filter: blur(2px);
  /* IMPORTANT: must block clicks behind the overlay */
  pointer-events: auto;
  touch-action: none;
  cursor: wait;
}
.st-busy-overlay.hidden{ display:none !important; }
.st-busy-overlay__card{
  width: min(92vw, 460px);
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  padding: 16px;
  pointer-events: auto;
}
.st-busy-overlay__title{
  font-weight: 950;
  color: var(--ink);
  font-size: 1.05rem;
  margin: 0 0 6px 0;
}
.st-busy-overlay__msg{
  color: #334155;
  font-weight: 700;
  margin: 0;
  line-height: 1.35;
}
.st-busy-overlay__bar{
  margin-top: 12px;
  height: 10px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}
.st-busy-overlay__bar > div{
  height: 100%;
  width: 40%;
  background: var(--brand-grad);
  border-radius: 999px;
  animation: stBusy 1.1s ease-in-out infinite;
}
@keyframes stBusy{
  0%{ transform: translateX(-30%); width: 35%; }
  50%{ transform: translateX(90%); width: 55%; }
  100%{ transform: translateX(-30%); width: 35%; }
}

/* During edit-load: prevent intermediate steps from flashing */
.section.is-loading-test .wizard-step{ visibility: hidden; }

/* Toast notifications (no native alert/confirm) */
.st-toast-wrap{
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 99998;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(92vw, 420px);
  pointer-events: none;
}

/* Desktop: center toasts (mobile stays bottom-right) */
@media (min-width: 821px){
  .st-toast-wrap{
    left: 50%;
    right: auto;
    top: 18px;
    bottom: auto;
    transform: translateX(-50%);
    align-items: center;
  }
  .st-toast{
    width: min(520px, 92vw);
  }
}
.st-toast{
  pointer-events: auto;
  display: grid;
  grid-template-columns: 22px 1fr 28px;
  align-items: start;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: #fff;
  box-shadow: 0 14px 36px rgba(16,24,40,.16);
  transform: translateY(8px);
  opacity: 0;
  animation: stToastIn .18s ease-out forwards;
}
.st-toast__icon{
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.st-toast__title{
  font-weight: 950;
  color: var(--ink);
  font-size: .95rem;
  margin: 0 0 2px 0;
}
.st-toast__msg{
  margin: 0;
  color: #334155;
  font-weight: 700;
  line-height: 1.3;
  font-size: .9rem;
}
.st-toast__close{
  appearance: none;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(248,250,252,.85);
  color: #0f172a;
  border-radius: 10px;
  width: 28px; height: 28px;
  cursor: pointer;
  font-weight: 900;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.st-toast__close:hover{ background: #fff; }
.st-toast__close:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--ring); }
.st-toast--success{ border-color: rgba(22,163,74,.28); background: linear-gradient(180deg, #ffffff, #f0fdf4); }
.st-toast--error{ border-color: rgba(239,68,68,.28); background: linear-gradient(180deg, #ffffff, #fef2f2); }
.st-toast--info{ border-color: rgba(15,98,254,.28); background: linear-gradient(180deg, #ffffff, #eff6ff); }
.st-toast--loading{ border-color: rgba(15,98,254,.28); background: linear-gradient(180deg, #ffffff, #eff6ff); }
.st-spinner{
  width: 18px; height: 18px;
  border-radius: 999px;
  border: 3px solid rgba(15,98,254,.22);
  border-top-color: rgba(15,98,254,.95);
  animation: stSpin .8s linear infinite;
}
@keyframes stSpin{ to { transform: rotate(360deg); } }
@keyframes stToastIn{
  to { transform: translateY(0); opacity: 1; }
}
@keyframes stToastOut{
  to { transform: translateY(8px); opacity: 0; }
}

/* Confirm modal */
.st-confirm{
  position: fixed;
  inset: 0;
  z-index: 99997;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}
.st-confirm.is-open{ display:flex; }
.st-confirm__card{
  width: min(92vw, 520px);
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  overflow: hidden;
}
.st-confirm__head{
  padding: 12px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.st-confirm__title{
  font-weight: 950;
  color: var(--ink);
  margin: 0;
  font-size: 1rem;
}
.st-confirm__x{
  appearance: none;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(248,250,252,.85);
  color: #0f172a;
  border-radius: 10px;
  width: 32px; height: 32px;
  cursor: pointer;
  font-weight: 900;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.st-confirm__x:hover{ background: #fff; }
.st-confirm__x:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--ring); }
.st-confirm__body{ padding: 14px; }
.st-confirm__msg{ margin:0; color:#0f172a; font-weight:700; line-height:1.35; }
.st-confirm__actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top: 14px;
}

/* Section improvements */
.section{ position:relative; }
.section-head{ text-align:center; max-width:720px; margin:0 auto 2rem; }
.section-title{ 
  font-size:clamp(1.75rem, 2vw + 1rem, 2.5rem); 
  margin-bottom:.5rem;
  color:#0f2342;
}
.section-head p{ 
  font-size:1.05rem; 
  color:#6b7280; 
  margin:0;
}

/* Test catalog: pillar page micro-link */
.tc-pillar{
  font-size:.98rem;
  line-height:1.4;
  color:#6b7280;
}
.tc-pillar__link{
  margin-left:.35rem;
  color:#1d4ed8;
  text-decoration:none;
  font-weight:600;
}
.tc-pillar__link:hover{
  text-decoration:underline;
}

/* Test catalog: callout card (pillar CTA) */
.tc-callout{
  background: linear-gradient(180deg, #0b1220 0%, #0a1835 100%);
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 18px;
  padding: 18px 16px;
  color: rgba(248,250,252,.96);
  box-shadow: 0 18px 48px rgba(2,6,23,.18);
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}
.tc-callout__kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight: 850;
  font-size: .82rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(248,250,252,.82);
  margin-bottom: 6px;
}
.tc-callout__title{
  margin: 0 0 6px 0;
  font-size: 1.35rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fff;
}
.tc-callout__sub{
  margin: 0;
  color: rgba(248,250,252,.90);
  line-height: 1.55;
  max-width: 62ch;
}
.tc-callout__actions{
  flex: 0 0 auto;
}
.tc-callout__btn{
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
  white-space: nowrap;
}
.tc-callout__btn:hover{
  background: var(--brand-2) !important;
  border-color: var(--brand-2) !important;
}
@media (max-width: 820px){
  .tc-callout{
    flex-direction: column;
    align-items: flex-start;
  }
  .tc-callout__btn{ width: 100%; }
}

/* ===========================
   📌 SIDEBAR (PANEL)
=========================== */
.sidebar{
  position:fixed; left:0; top:0; width:220px; height: calc(var(--vh) * 100);
  background: var(--brand-2); color:#fff;
  display:flex; flex-direction:column; align-items:center; padding-top:1rem;
  transition:transform .25s ease, box-shadow .2s ease; z-index:1300;
  box-shadow: 0 12px 32px rgba(0,0,0,.15);
}
.sidebar h2{ color:#fff; font-size:1.3rem; margin-bottom:1rem; }

.sidebar-nav{
  width:100%;
  padding:0 14px 14px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.nav-btn{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color:#fff;
  font-size:.95rem;
  font-weight:800;
  cursor:pointer;
  text-align:left;
  transition: background .2s ease, transform .05s ease, border-color .2s ease;
  text-decoration:none;
}
.nav-btn:hover{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.22);
}
.nav-btn:active{ transform: translateY(1px); }
.nav-btn:focus-visible{ outline:none; box-shadow: 0 0 0 4px rgba(255,255,255,.22); }
.nav-btn--active{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.3);
}
.nav-icon{
  width:20px; height:20px;
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 20px;
  opacity:.95;
}
.nav-icon svg{ width:20px; height:20px; display:block; }
.nav-label{ min-width:0; }
.logout-btn.nav-btn{
  margin-top:auto;
  border-color: rgba(255,255,255,.14);
}

.drawer-overlay{
  position:fixed;
  inset:0;
  background: rgba(15,23,42,.48);
  backdrop-filter: blur(2px);
  z-index:1250;
}

/* ===========================
   📌 CONTENIDO (PANEL)
=========================== */
.content{ margin-left:240px; padding:2rem; max-width:1100px; }
.section{
  background:var(--card); padding:1.25rem; border-radius:var(--radius);
  box-shadow:0 8px 24px rgba(16,24,40,.06); margin-bottom:1.25rem;
}
.section--alt{ background:var(--bg-soft); }
.section--spacious{ padding:3.25rem 0; }
.section-header{ display:flex; align-items:center; gap:10px; margin:0 0 .75rem; }
.section-title{ font-size:1.15rem; font-weight:800; color:var(--ink); }
.section-sub{ margin-left:auto; font-size:.9rem; color:var(--muted); }

/* Dashboard top row - 2 cards (50% each) */
.dashboard-top-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.25rem;
  margin-bottom:1.25rem;
}
.dashboard-second-row{
  margin-top: 1.25rem;
}
.dashboard-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:1.25rem;
  box-shadow:0 2px 8px rgba(16,24,40,.04);
  transition:box-shadow .2s ease;
  overflow:hidden; /* avoid any horizontal bleed */
  min-width:0;
}
.dashboard-card:hover{
  box-shadow:0 4px 12px rgba(16,24,40,.08);
}
.card-subtitle{
  font-size:.95rem;
  font-weight:700;
  color:var(--ink);
  margin:0 0 1rem;
  text-align:center;
}

.card-title{
  font-size:1.02rem;
  font-weight:900;
  color:var(--ink);
  margin:0 0 .25rem;
}
.card-subline{
  color:var(--muted);
  font-weight:700;
  font-size:.88rem;
  margin:0 0 .75rem;
}

/* Delivery status */
.delivery-card{
  background: linear-gradient(135deg, rgba(240,253,244,.85), #ffffff);
  border-color: rgba(34,197,94,.22);
}
.delivery-card--ready{
  box-shadow:0 12px 28px rgba(16,185,129,.12);
}
.delivery-metrics{
  display:grid;
  grid-template-columns: 1.1fr .9fr .9fr;
  gap:10px;
  margin: .6rem 0 .2rem;
  min-width:0;
}
.delivery-metric{
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:12px;
  padding:10px 10px;
  min-width:0;
}
.delivery-metric.primary{
  border-color: rgba(34,197,94,.25);
}
.delivery-metric__value{
  font-weight:1000;
  font-size:1.35rem;
  color:#0f172a;
  line-height:1;
}
.delivery-metric__label{
  margin-top:4px;
  font-weight:800;
  font-size:.78rem;
  color:#475569;
  text-transform:uppercase;
  letter-spacing:.04em;
  white-space:normal;
  word-break:break-word;
}

/* Action required list */
.action-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.action-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 12px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  text-decoration:none;
  box-shadow:0 6px 18px rgba(16,24,40,.06);
}
.action-item:hover{
  border-color: rgba(15,98,254,.30);
  box-shadow:0 10px 26px rgba(16,24,40,.10);
}
.action-item__main{ min-width:0; }
.action-item__asset{
  font-weight:950;
  color:#0f172a;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 100%;
}
.action-item__type{
  margin-top:2px;
  font-weight:800;
  color:#475569;
  font-size:.9rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 100%;
}
.action-empty{
  padding:12px;
  text-align:center;
  color:#64748b;
  font-weight:800;
  border:1px dashed #cbd5e1;
  border-radius:14px;
  background:#fff;
}

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

/* Completion card */
.completion-card{
  display:flex;
  flex-direction:column;
}
.completion-content{
  display:flex;
  align-items:center;
  gap:1.5rem;
  flex:1;
}
.pie-wrapper-compact{
  flex-shrink:0;
  width:140px;
  height:140px;
}
.pie-wrapper-compact canvas{
  width:140px !important;
  height:140px !important;
}
.completion-stats-compact{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.percent-display{
  text-align:center;
}
.percent-number-compact{
  display:block;
  font-size:2.5rem;
  font-weight:800;
  color:var(--brand);
  line-height:1;
}
.stats-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.5rem;
}
.stat-item-compact{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.15rem;
}
.stat-value-compact{
  font-size:1.5rem;
  font-weight:800;
  color:var(--ink);
  line-height:1;
}
.stat-label-compact{
  font-size:.75rem;
  color:var(--muted);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.3px;
}
.stat-divider-compact{
  width:1px;
  height:35px;
  background:#e5e7eb;
}

/* Freelance-only secondary progress (Finalize Rate) */
.progress-secondary{
  margin-top: 14px;
}

/* Pass/Fail compare card (light blue) */
.passfail-card{
  margin-top: 14px;
  background: linear-gradient(135deg, rgba(15,98,254,.08), rgba(255,255,255,1));
  border:1px solid rgba(147,197,253,.75);
  border-radius:14px;
  padding:14px 14px;
}
.passfail-card__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.passfail-card__title{
  font-weight:900;
  color:#0f2342;
  font-size:.9rem;
}
.passfail-card__sub{
  color:#475569;
  font-weight:800;
  font-size:.82rem;
}
.passfail-card__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.passfail-metric{
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:12px;
  padding:10px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.passfail-metric__label{
  font-weight:950;
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#0f2342;
}
.passfail-metric__value{
  font-weight:1000;
  font-size:1.25rem;
  color:#0f172a;
}
.passfail-metric.pass{
  border-color: rgba(34,197,94,.25);
}
.passfail-metric.fail{
  border-color: rgba(239,68,68,.22);
}
.passfail-bar{
  margin-top:10px;
  height:10px;
  border-radius:999px;
  background: rgba(239,68,68,.12);
  overflow:hidden;
  border:1px solid rgba(15,23,42,.08);
}
.passfail-bar__fill{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, rgba(34,197,94,.85), rgba(34,197,94,1));
}

@media (max-width: 560px){
  .passfail-card__head{ flex-direction:column; align-items:flex-start; }
  .passfail-card__grid{ grid-template-columns: 1fr; }
}
.progress-secondary__divider{
  height: 1px;
  background: #e5e7eb;
  margin: 0 0 12px;
}

/* Badge-style finalize rate (freelance only) */
.finalize-badge{
  border-radius: 14px;
  border: 1px solid rgba(22, 163, 74, 0.22);
  background: linear-gradient(180deg, rgba(240, 253, 244, 0.95), rgba(236, 253, 245, 0.55));
  padding: 10px 12px;
  box-shadow: 0 10px 26px rgba(16,24,40,.06);
}
.finalize-badge__head{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}
.finalize-badge__icon{
  width: 28px;
  height: 28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 10px;
  color: #166534;
  background: rgba(22, 163, 74, 0.12);
  border: 1px solid rgba(22, 163, 74, 0.20);
}
.finalize-badge__tag{
  font-weight: 950;
  font-size: .72rem;
  letter-spacing: .45px;
  color: #14532d;
  background: rgba(22, 163, 74, 0.12);
  border: 1px solid rgba(22, 163, 74, 0.18);
  padding: 4px 8px;
  border-radius: 999px;
  text-transform: uppercase;
}
.finalize-badge__value{
  font-weight: 950;
  color: var(--ink);
  font-size: .95rem;
  line-height: 1.1;
  white-space: normal;
}
.finalize-badge__value #finalize-rate{
  color: #0f172a;
}
.finalize-badge__sub{
  margin-top: 6px;
  color: #166534;
  font-weight: 800;
  font-size: .82rem;
  line-height: 1.25;
}

/* Placeholder card (for future chart) */
.placeholder-card{
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-style:dashed;
}
.placeholder-content{
  text-align:center;
}
.placeholder-text{
  font-size:.85rem;
  color:#94a3b8;
  font-weight:600;
  font-style:italic;
}
.kpi-number{
  font-size:2.2rem;
  font-weight:950;
  color:var(--brand);
  line-height:1;
  text-align:center;
}
.kpi-label{
  margin-top:8px;
  font-size:.8rem;
  font-weight:800;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.4px;
  text-align:center;
}

/* Dashboard: Oldest Incomplete Tests block */
.oldest-block{ width:100%; }
.oldest-block__title{
  font-weight:950;
  color:var(--ink);
  font-size:1.05rem;
  margin:0 0 4px 0;
  text-align:left;
}
.oldest-block__sub{
  color:var(--muted);
  font-weight:800;
  font-size:.9rem;
  margin:0 0 10px 0;
  text-align:left;
}
.oldest-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.oldest-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid #e5e7eb;
  background:#fff;
  text-decoration:none;
  transition: transform .08s ease, box-shadow .18s ease, border-color .18s ease;
}
.oldest-item:hover{
  transform: translateY(-1px);
  border-color:#c7d2fe;
  box-shadow:0 8px 18px rgba(16,24,40,.10);
}
.oldest-item__main{ min-width:0; }
.oldest-item__loc{
  font-weight:950;
  color:var(--ink);
  font-size:.95rem;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 240px;
}
.oldest-item__type{
  margin-top:4px;
  font-weight:800;
  color:#475569;
  font-size:.86rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 240px;
}
.oldest-item__age{
  flex:0 0 auto;
  font-weight:950;
  font-size:.82rem;
  color:#0b4bd6;
  background: rgba(15,98,254,.10);
  border:1px solid rgba(15,98,254,.22);
  padding:6px 10px;
  border-radius:999px;
  white-space:nowrap;
}
.oldest-empty{
  padding:10px 12px;
  border-radius:14px;
  border:1px dashed #cbd5e1;
  background:#fff;
  color:#64748b;
  font-weight:800;
}
.oldest-more{
  margin-top:10px;
  color:#64748b;
  font-weight:900;
  font-size:.9rem;
  text-align:left;
}

/* Compact variant (freelance) */
.oldest-block--compact .oldest-block__sub{ margin-bottom:8px; }
.oldest-block--compact .oldest-item{ padding:8px 10px; border-radius:12px; }
.oldest-block--compact .oldest-item__loc,
.oldest-block--compact .oldest-item__type{ max-width: 210px; }
.oldest-block--compact .oldest-item__age{ padding:5px 9px; font-size:.8rem; }
.chart-empty{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  color:#64748b;
  font-weight:800;
  text-align:center;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 12px;
  border: 1px dashed #cbd5e1;
}

/* Chart container compact - fixed height */
.chart-container-compact{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:1.25rem;
  box-shadow:0 2px 8px rgba(16,24,40,.04);
}
.chart-inner-compact{
  position:relative;
  height:220px;
  max-height:220px;
}
.chart-inner-compact canvas{
  max-height:220px !important;
}

/* Mobile responsive */
@media (max-width:980px){
  .dashboard-top-row{
    grid-template-columns:1fr;
    gap:1rem;
  }
  .completion-content{
    flex-direction:column;
    gap:1rem;
  }
  .pie-wrapper-compact{
    width:120px;
    height:120px;
  }
  .pie-wrapper-compact canvas{
    width:120px !important;
    height:120px !important;
  }
  .percent-number-compact{
    font-size:2rem;
  }
  .stat-value-compact{
    font-size:1.25rem;
  }
  .chart-inner-compact{
    height:200px;
    max-height:200px;
  }
  .placeholder-card{
    min-height:120px;
  }
}

/* ===========================
   📊 TABLAS (LISTAS)
=========================== */
.table-test{
  width:100%; border-collapse:separate; border-spacing:0; margin:1rem auto;
  background:#f9f9f9; border-radius:10px; overflow:hidden;
  box-shadow:0 4px 18px rgba(16,24,40,.06);
}
.table-test th,.table-test td{ border:1px solid #e5e7eb; padding:.75rem; text-align:center; font-size:.92rem; }
.table-test th{ background:#eaf1ff; font-weight:800; color:#0f2342; }

/* ===========================
   ✅ BOTONES
=========================== */
.btn{
  --bshadow: 0 6px 18px rgba(15,98,254,.25);
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
  gap:8px;
  padding:.62rem 1.1rem; 
  border:1px solid transparent; 
  border-radius:999px;
  cursor:pointer; 
  font-size:.92rem; 
  font-weight:700; 
  line-height:1.2;
  text-decoration:none;
  background:var(--brand-grad); 
  color:#fff;
  transition: transform .1s, box-shadow .2s, filter .2s;
  box-shadow: var(--bshadow);
}
.btn:hover{ 
  filter:saturate(1.08) brightness(1.05); 
  transform:translateY(-1px);
  box-shadow: 0 8px 24px rgba(15,98,254,.35);
}
.btn:active{ transform:translateY(0); }
.btn:focus-visible{ 
  outline:none; 
  box-shadow:0 0 0 4px var(--ring), var(--bshadow); 
}

/* Button variants */
.btn-primary, .btn.btn-primary {
  background:var(--brand-grad);
  color:#fff;
  box-shadow: 0 6px 18px rgba(15,98,254,.25);
}
.btn-primary:hover, .btn.btn-primary:hover {
  filter:saturate(1.08) brightness(1.05);
  box-shadow: 0 8px 24px rgba(15,98,254,.35);
}

.btn-secondary, .btn.btn-secondary {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  color: #fff;
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.25);
}
.btn-secondary:hover, .btn.btn-secondary:hover {
  filter: brightness(1.08);
  box-shadow: 0 8px 24px rgba(22, 163, 74, 0.35);
}

.btn.sec{ 
  background:#fff; 
  color:var(--ink); 
  border:2px solid #e5e7eb; 
  box-shadow:0 3px 10px rgba(16,24,40,.06); 
}
.btn.sec:hover{ 
  background:#f7f9ff; 
  border-color:#c7d2fe;
}
.btn.outline{ 
  background:transparent; 
  color:var(--brand-2); 
  border:2px solid currentColor; 
}
.btn.ghost{ 
  background:transparent; 
  color:#0f2342; 
  border-color:transparent; 
}
.btn.danger{ 
  background:linear-gradient(135deg,#f05252,#ef4444); 
}
.btn.success{ 
  background:linear-gradient(135deg,#22c55e,#16a34a); 
}
.btn.small{ 
  padding:.4rem .7rem; 
  font-size:.85rem; 
}
.btn.btn-lg, .btn-lg{ 
  padding:.9rem 1.4rem; 
  font-size:1.02rem; 
}

/* ===========================
   🔘 Button rows (flex-gap safe)
   - Uses margins so spacing works even on older mobile browsers
=========================== */
.st-btnRow{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  margin:-6px;
}
.st-btnRow > *{
  margin:6px;
}
.st-btnRow--between{
  justify-content:space-between;
}

/* Flex-gap fallback for older mobile browsers (e.g. iOS < 14.5) */
.no-flex-gap .toolbar{ gap: 0 !important; }
.no-flex-gap .toolbar > *{ margin-right:10px; margin-bottom:10px; }
.no-flex-gap .pills{ gap: 0 !important; }
.no-flex-gap .pills > *{ margin-right:8px; margin-bottom:8px; }
.no-flex-gap .header-cta{ gap: 0 !important; }
.no-flex-gap .header-cta > *{ margin-left:10px; }
.no-flex-gap .header-cta > *:first-child{ margin-left:0; }
.no-flex-gap .cta-row{ gap: 0 !important; }
.no-flex-gap .cta-row > *{ margin-right:12px; margin-bottom:12px; }
.no-flex-gap .cable-set-controls__actions{ gap: 0 !important; margin: -6px; }
.no-flex-gap .cable-set-controls__actions > *{ margin: 6px; }
.no-flex-gap .tp-generalActions{ gap: 0 !important; margin: -6px; }
.no-flex-gap .tp-generalActions > *{ margin: 6px; }

/* ===========================
   🧭 Toolbar / filtros
=========================== */
.toolbar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:10px; }
.pills{ display:flex; gap:8px; flex-wrap:wrap; }
.pill{
  padding:.35rem .7rem; border-radius:999px; border:1px solid #e5e7eb;
  background:#fff; cursor:pointer; font-weight:700; color:#0f2342;
  transition:background .2s, color .2s, transform .05s;
}
.pill:hover{ background:#f5f7ff; }
.pill.active{ background:var(--brand); color:#fff; border-color:var(--brand); }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:.25rem .6rem; border-radius:999px; font-size:.8rem; font-weight:800; }
.chip.ok{ background:#ecfdf5; color:#047857; }

/* ===========================
   ✅ My Test – Card List UI
=========================== */
.mytest-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:12px;
}
.mytest-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:14px 14px;
  box-shadow:0 4px 18px rgba(16,24,40,.06);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.mytest-card__left{ min-width:0; }
.mytest-card__title{
  font-size:1.05rem;
  font-weight:900;
  color:#0f172a;
  line-height:1.15;
  margin-bottom:4px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mytest-card__subtitle{
  font-size:.9rem;
  font-weight:800;
  color:#334155;
  margin-bottom:8px;
}
.mytest-card__meta{
  font-size:.82rem;
  font-weight:700;
  color:#64748b;
}
.mytest-card__right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  flex:0 0 auto;
}
.mytest-actions{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.mytest-btn{
  border:1px solid transparent;
  border-radius:10px;
  padding:.55rem .85rem;
  min-height:40px;
  font-weight:900;
  font-size:.85rem;
  cursor:pointer;
  transition:transform .05s, background .15s, border-color .15s;
  line-height:1;
}
.mytest-btn:active{ transform:translateY(1px); }
.mytest-btn--primary{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
}
.mytest-btn--primary:hover{ background:var(--brand-2); border-color:var(--brand-2); }
.mytest-btn--secondary{
  background:#f8fafc;
  color:#0f172a;
  border-color:#e2e8f0;
}
.mytest-btn--secondary:hover{ background:#eef2f7; border-color:#cbd5e1; }

.mytest-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.3rem .6rem;
  border-radius:999px;
  font-size:.78rem;
  font-weight:900;
  border:1px solid transparent;
  white-space:nowrap;
}
.mytest-badges{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.mytest-card--completed{ border-color:#2563eb; }
.mytest-badge--completed{ background:#ecfdf5; color:#047857; border-color:#86efac; }
.mytest-card--incompleted{ border-color:#f59e0b; }
.mytest-badge--incompleted{ background:#fffbeb; color:#92400e; border-color:#fcd34d; }
.mytest-card--in_progress{ border-color:#f59e0b; }
.mytest-badge--in_progress{ background:#fffbeb; color:#92400e; border-color:#fcd34d; }
.mytest-card--draft{ border-color:#94a3b8; }
.mytest-badge--draft{ background:#f1f5f9; color:#334155; border-color:#cbd5e1; }

.mytest-card--finalized{ border-color:#2563eb; }
.mytest-card--finalized-pass{ border-color:#22c55e; }
.mytest-card--finalized-fail{ border-color:#ef4444; }
.mytest-badge--finalized{ background:#eff6ff; color:#1d4ed8; border-color:#93c5fd; }

.mytest-badge--pass{ background:#ecfdf5; color:#047857; border-color:#86efac; }
.mytest-badge--fail{ background:#fef2f2; color:#b91c1c; border-color:#fecaca; }

.mytest-lock{
  margin-left:6px;
  font-size:.9em;
  opacity:.9;
}

.mytest-empty{
  padding:16px;
  text-align:center;
  color:#64748b;
  font-weight:700;
  background:#fff;
  border:1px dashed #cbd5e1;
  border-radius:14px;
}

@media (max-width:768px){
  .mytest-card{
    flex-direction:column;
    align-items:stretch;
  }
  .mytest-card__right{
    align-items:flex-start;
  }
  .mytest-actions{
    justify-content:flex-start;
  }
}
.chip.warn{ background:#fff7ed; color:#c2410c; }
.chip.ok{ background:#ecfdf5; color:#047857; }
.chip.danger{ background:#fef2f2; color:#b91c1c; }
.chip.todo{ background:#eef2ff; color:#3730a3; }
.search{ position:relative; flex:1 1 260px; min-width:200px; }
.search input{ width:100%; border:1px solid #e5e7eb; border-radius:999px; padding:10px 38px 10px 14px; background:#fff; }
.search .clear{ position:absolute; right:6px; top:50%; transform:translateY(-50%); border:none; background:transparent; cursor:pointer; font-size:18px; color:#9ca3af; }

/* ===========================
   📝 FORMULARIO — UNIFICADO (incluye password)
=========================== */
form{
  max-width:900px; margin:auto; background:var(--card); padding:1.25rem;
  border-radius:var(--radius); box-shadow:0 8px 24px rgba(16,24,40,.06);
}
fieldset{ border:1px solid #e5e7eb; border-radius:var(--radius); margin-bottom:1.25rem; padding:1rem; background:#fff; }
legend{ font-weight:800; font-size:1rem; color:#004080; padding:0 .4rem; }
label{ display:inline-block; margin:0 0 .35rem; font-weight:700; line-height:1.2; color:var(--ink); }

/* Inputs normalizados */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="url"],
input[type="search"],
select,
textarea{
  width:100%; min-height:var(--input-height);
  padding: var(--input-padding-y) var(--input-padding-x);
  border:1px solid var(--input-border); border-radius:var(--input-radius);
  font-size:var(--input-font-size); line-height:1.2; outline:none;
  background:#fff; transition: border .15s, box-shadow .15s, background .2s;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
input:focus, select:focus, textarea:focus{ border-color:var(--brand); box-shadow:0 0 0 4px var(--ring); }

/* Ícono de input + toggle de password */
.field{ position:relative; }
.field .input-addon{
  position:absolute; inset-inline-start:10px; top:50%; transform:translateY(-50%);
  color:#64748b; pointer-events:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.input-with-icon{ padding-inline-start:38px !important; }
.field .input-addon svg{
  width:19px;
  height:19px;
  stroke: currentColor;
  stroke-width:1.9;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.field:focus-within .input-addon{ color: var(--brand); }
.password-toggle{
  position:absolute; inset-inline-end:8px; top:50%; transform:translateY(-50%);
  background:transparent; border:0; color:#64748b; cursor:pointer; padding:6px; border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.password-toggle:hover{ color:#0f2342; background:#f3f6ff; }
.password-toggle svg{
  width:19px;
  height:19px;
  stroke: currentColor;
  stroke-width:1.9;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.field:focus-within .password-toggle{ color: var(--brand); }
.password-toggle .pw-icon--off{ display:none; }
.password-toggle.is-revealed .pw-icon--on{ display:none; }
.password-toggle.is-revealed .pw-icon--off{ display:inline; }

/* Estados */
.is-error{ border-color:var(--danger) !important; box-shadow:0 0 0 4px rgba(239,68,68,.18) !important; }
.is-success{ border-color:var(--success) !important; box-shadow:0 0 0 4px rgba(34,197,94,.18) !important; }
.hint{ font-size:.82rem; color:var(--muted); margin-top:.3rem; }

/* Hint popovers (wizard setup/execution) */
.hint--inline-hidden{ display:none !important; }
.hint-pop{
  position:relative;
  display:inline-flex;
  margin-left:8px;
  vertical-align:middle;
}
.hint-btn{
  width:22px;
  height:22px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.14);
  background:rgba(255,255,255,.9);
  color:var(--brand);
  font-weight:900;
  line-height:1;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 22px rgba(16,24,40,.10);
}
.hint-btn:hover{ background:#fff; border-color:rgba(15,98,254,.35); }
.hint-btn:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--ring); }
.hint-bubble{
  position:absolute;
  z-index:20;
  top:calc(100% + 10px);
  left:0;
  width:min(320px, 70vw);
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(226,232,240,.9);
  background:rgba(255,255,255,.98);
  box-shadow:0 14px 36px rgba(16,24,40,.18);
  color:#334155;
  font-weight:700;
  font-size:.9rem;
  line-height:1.35;
  display:none;
}
.hint-bubble::before{
  content:"";
  position:absolute;
  top:-6px;
  left:10px;
  width:10px;
  height:10px;
  background:rgba(255,255,255,.98);
  border-left:1px solid rgba(226,232,240,.9);
  border-top:1px solid rgba(226,232,240,.9);
  transform:rotate(45deg);
}
.hint-pop.is-open .hint-bubble{ display:block; }

@media (max-width: 820px){
  .hint-bubble{
    left:auto;
    right:0;
    width:min(320px, 84vw);
  }
  .hint-bubble::before{ left:auto; right:10px; }
}
.hint.error{ color:#b91c1c; }

/* ===========================
   ☑️ Custom checkbox (auth + public forms)
=========================== */
.check{
  display:flex;
  align-items:center;
  gap:10px;
  user-select:none;
}
.check input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  width:18px;
  height:18px;
  border-radius:6px;
  border:1.5px solid #cbd5e1;
  background:#fff;
  display:inline-grid;
  place-content:center;
  transition:border-color .15s, background .15s, box-shadow .15s, transform .05s;
  flex:0 0 auto;
}
.check input[type="checkbox"]::after{
  content:"";
  width:9px;
  height:5px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(45deg) scale(0);
  transform-origin:center;
  transition:transform .12s ease-out;
  margin-top:-1px;
}
.check input[type="checkbox"]:checked{
  background:var(--brand);
  border-color:var(--brand);
}
.check input[type="checkbox"]:checked::after{
  transform:rotate(45deg) scale(1);
}
.check input[type="checkbox"]:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px var(--ring);
  border-color:var(--brand);
}

/* Buttons w/ subtle inline icon */
.btn .btn-icon{
  display:inline-flex;
  align-items:center;
  margin-left:.45rem;
  vertical-align:middle;
}
.btn .btn-icon svg{
  width:18px;
  height:18px;
  stroke: currentColor;
  stroke-width:1.9;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Language toggle */
.lang-switch{
  position:relative;
  display:inline-flex;
}
.lang-btn{
  min-height:36px;
  padding:.35rem .5rem;
  border-radius:10px;
  border:1px solid rgba(15,98,254,.18);
  background: linear-gradient(135deg, rgba(15,98,254,.06), rgba(255,255,255,.96));
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 22px rgba(16,24,40,.10);
  gap:8px;
}
.lang-btn:hover{ border-color:rgba(15,98,254,.35); background: linear-gradient(135deg, rgba(15,98,254,.10), rgba(255,255,255,.96)); }
.lang-btn:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--ring); border-color:var(--brand); }
.lang-flag svg{
  width:28px;
  height:18px;
  display:block;
  border-radius:6px;
  box-shadow:0 2px 8px rgba(0,0,0,.14);
  border:1px solid rgba(2,6,23,.10);
}
.lang-btn::after{
  content:"";
  width:0;
  height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid #64748b;
  opacity:.9;
}
.lang-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:128px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 12px 30px rgba(16,24,40,.16);
  padding:4px;
  display:none;
  z-index:9999;
}
.lang-switch.is-open .lang-menu{ display:block; }
.lang-item{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 8px;
  border-radius:10px;
  border:0;
  background:#fff;
  cursor:pointer;
  font-weight:800;
  color:#0f172a;
  font-size:.9rem;
}
.lang-item:hover{ background:#f1f5f9; }
.lang-item .lang-name{ font-weight:900; color:#334155; }

/* =========================
   Onboarding (spotlight + bubble)
   ========================= */
.onb-root{
  position:fixed;
  inset:0;
  /* Keep onboarding below the platform header/sidebar */
  z-index:1100;
  pointer-events:none; /* allow interacting with underlying UI */
}
.onb-root.hidden{ display:none; }

.onb-spotlight{
  position:absolute;
  border-radius:14px;
  box-shadow:0 0 0 9999px rgba(2,6,23,.45);
  outline:2px solid rgba(59,130,246,.55);
  background:rgba(255,255,255,.02);
  pointer-events:none; /* NEVER block clicks on desktop */
  transition: top 180ms ease, left 180ms ease, width 180ms ease, height 180ms ease, box-shadow 180ms ease;
}

.onb-bubble{
  position:absolute;
  max-width:320px;
  width:min(320px, calc(100vw - 32px));
  background:rgba(255,255,255,.96);
  border:1px solid rgba(226,232,240,.9);
  border-radius:16px;
  box-shadow:0 14px 40px rgba(15,23,42,.18);
  padding:14px 14px 12px;
  pointer-events:auto;
  transform:translateY(6px);
  opacity:0;
  transition:opacity 180ms ease, transform 180ms ease;
  max-height: calc((var(--vh) * 100) - 32px);
  overflow: auto;
}
.onb-bubble--fixed{
  max-width:520px;
  width:min(520px, calc(100vw - 32px));
}
.onb-root.is-active .onb-bubble{
  opacity:1;
  transform:translateY(0);
}

.onb-bubble__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
.onb-title{
  font-weight:800;
  font-size:14px;
  color:var(--ink);
  letter-spacing:.1px;
}
.onb-progress{
  font-size:12px;
  font-weight:700;
  color:#64748b;
}
.onb-text{
  font-size:13px;
  line-height:1.35;
  color:#334155;
  margin-bottom:12px;
}
.onb-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.onb-actions .btn{
  min-height:36px;
  padding:8px 12px;
}
.onb-skip{
  margin-left:auto;
  background:transparent;
  border:0;
  color:#64748b;
  font-weight:700;
  font-size:12px;
  text-decoration:underline;
  cursor:pointer;
}
.onb-skip:hover{ color:#334155; }

.onb-arrow{
  position:absolute;
  width:10px;
  height:10px;
  background:rgba(255,255,255,.96);
  border-left:1px solid rgba(226,232,240,.9);
  border-top:1px solid rgba(226,232,240,.9);
  transform:rotate(45deg);
}
.onb-bubble--below .onb-arrow{ top:-6px; left:18px; }
.onb-bubble--above .onb-arrow{ bottom:-6px; left:18px; transform:rotate(225deg); }
.onb-bubble--mobile .onb-arrow{ display:none; }

@media (max-width: 820px){
  .onb-spotlight{ border-radius:16px; }
  .onb-actions .btn{
    flex: 1 1 auto;
  }
  .onb-skip{
    flex: 1 1 100%;
    margin-left: 0;
    text-align: center;
  }
}

/* Layouts del form */
.field-group{ display:flex; gap:.5rem; flex-wrap:wrap; }
.form-grid{ display:grid; grid-template-columns:1fr; gap:var(--gap); }
@media (min-width:720px){
  .form-grid.cols-2{ grid-template-columns:1fr 1fr; }
  .form-grid.cols-3{ grid-template-columns:1fr 1fr 1fr; }
}

/* Cámara / adjuntos */
.camera-label{
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  background:#0077cc; color:#fff; padding:.45rem .6rem; border-radius:8px; cursor:pointer;
  font-size:.85rem; border:1px solid rgba(0,0,0,.05); transition: background .2s, transform .05s;
  box-shadow:0 3px 12px rgba(0,0,0,.08);
}
.camera-label:hover{ background:#005fa3; }
.camera-label:active{ transform:translateY(1px); }
.camera-label .attach-text{ font-size:.75rem; color:#dbeafe; }

/* Textareas auto-grow */
.obs,.obs-auto{ min-height:28px; line-height:1.25; overflow-y:hidden; resize:none; }

/* ===========================
   ✅ TABLA DE RESULTADOS (test)
=========================== */
/* Test table - Desktop optimized */
.test-table{
  width:100%; border-collapse:separate; border-spacing:0; margin-top:1.5rem; 
  font-size:.88rem; border-radius:12px; overflow:hidden; box-shadow:0 2px 8px rgba(16,24,40,.06);
  background:#fff; border:1px solid #e5e7eb;
}
.test-table caption{
  /* Ensure caption spans full table width on all breakpoints */
  display: table-caption;
  caption-side: top;
  width: 100%;
  box-sizing: border-box;
  font-size:1rem; font-weight:700; color:#fff; text-align:left;
  padding:.85rem 1rem; 
  background:linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  margin-bottom:0; letter-spacing:.3px;
  border-radius:12px;
  overflow:visible;
}

/* Step 4 caption should span full card width (desktop) */
@media (min-width:769px){
  /* Keep caption fully visible (no horizontal bleed that gets clipped) */
  #result-block .test-table{ overflow: visible; }
  #result-block .test-table caption{
    display:block;
    width:100%;
    margin:0 0 1rem 0;
    border-radius:12px;
    box-sizing:border-box;
  }
}

/* Step 4: Cable set caption actions (delete button) */
.set-caption{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  flex-wrap:wrap;
}
.set-caption__title{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:normal;
  line-height:1.2;
  flex:1 1 220px;
}
.set-caption__meta{
  flex:0 0 auto;
  font-weight:900;
  font-size:.85rem;
  padding:.35rem .55rem;
  border-radius:999px;
  background: rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
}
.set-caption__actions{
  display:flex;
  gap:8px;
  flex:0 0 auto;
}
.set-del-btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
  color:#fff;
  font-weight:950;
  width:34px;
  height:34px;
  border-radius:10px;
  cursor:pointer;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.set-del-btn:hover{ background: rgba(255,255,255,.18); }
.set-del-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
}

/* Step 4: explicit cable set controls (Add/Remove) */
.cable-set-controls{
  margin-top: 14px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
}
.cable-set-controls__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap: wrap;
}
.cable-set-controls__hint{
  font-weight:800;
  color: var(--ink);
}
.cable-set-controls__actions{
  display:flex;
  gap:10px;
  flex: 1 1 360px;
  min-width: 220px;
  max-width: 100%;
  justify-content: flex-end;
  min-width: 0;
}
.cable-set-controls{
  overflow: visible;
}
.cable-set-controls__actions .select{
  width: 100%;
  max-width: 520px;
  min-width: 0;
}

/* Keep Execution controls compact (all viewports)
   NOTE: these two controls are rendered dynamically from load_form.js:
   - button#btn-add-cable-set
   - select#st_tool_id_exec (class="select")
*/
#btn-add-cable-set{
  flex: 0 0 auto;
  width: auto;
  padding: .35rem .65rem !important;
  font-size: .82rem !important;
  min-height: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 10px rgba(16,24,40,.12) !important;
}

/* Execution certificate dropdown should match normal input sizing */
#st_tool_id_exec{
  width: min(320px, 100%) !important;
  max-width: 320px !important;
  min-height: 32px !important;
  height: 32px !important;
  padding: .35rem .55rem !important;
  font-size: .82rem !important;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  background: #fff;
  box-shadow: 0 2px 10px rgba(16,24,40,.08);
  appearance: auto;
}

/* If a select is injected without the id, still keep it compact here */
.cable-set-controls__actions select.select,
.cable-set-controls__actions .select{
  min-height: 32px;
  height: 32px;
  padding: .35rem .55rem;
  font-size: .82rem;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  background: #fff;
  box-shadow: 0 2px 10px rgba(16,24,40,.08);
}
.cable-set-controls__sub{
  margin-top:6px;
  font-size:12px;
  color: #475569;
}
.test-table th{ 
  background:#f8fafc; 
  font-weight:700; color:#334155; font-size:.8rem; 
  text-transform:uppercase; letter-spacing:.5px;
  padding:.65rem .7rem; 
  border-bottom:2px solid #e2e8f0;
  text-align:left;
  position:sticky;
  top:0;
  z-index:10;
}
.test-table tbody tr{ 
  transition:background .15s ease; border-bottom:1px solid #f1f5f9;
}
.test-table tbody tr:hover{ background:#fafbfc; }
.test-table tbody tr:last-child{ border-bottom:none; }
.test-table td{ 
  padding:.6rem .7rem; 
  vertical-align:middle; 
  border-right:1px solid #f1f5f9;
}
.test-table td:last-child{ border-right:none; }

/* Point column destacado */
.test-table td:first-child{
  font-weight:700;
  color:var(--brand);
  font-size:.9rem;
  background:#f8fafc;
}

/* Compact inputs */
.test-table input[type="text"], 
.test-table input[type="number"], 
.test-table select{
  width:100%; box-sizing:border-box; padding:.45rem .55rem; font-size:.85rem; 
  border-radius:6px; border:1px solid #cbd5e1; transition:all .2s ease;
  background:#fff;
}
.test-table input:focus, .test-table select:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(15,98,254,.1);
  background:#fafbfc;
}
.test-table textarea{
  width:100%; padding:.45rem .55rem; font-size:.84rem; border-radius:6px; 
  border:1px solid #cbd5e1; resize:vertical; min-height:36px;
  font-family:inherit; transition:all .2s ease;
}
.test-table textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(15,98,254,.1);
  background:#fafbfc;
}

/* NA button */
.na-btn{
  background:#fff; border:1px solid #cbd5e1; color:#64748b; 
  padding:.4rem .7rem; cursor:pointer; 
  font-size:.8rem; font-weight:600; border-radius:6px; 
  transition:all .2s ease; white-space:nowrap;
  display:inline-block;
}
.na-btn:hover{ 
  background:#f1f5f9; border-color:#94a3b8; 
  transform:translateY(-1px); box-shadow:0 2px 4px rgba(0,0,0,.05);
}
.na-btn.active{ 
  background:var(--brand); border-color:var(--brand); color:#fff; 
  box-shadow:0 2px 8px rgba(15,98,254,.25);
}

/* Result combined - vertical stack */
.result-combined{
  display:flex; flex-direction:column; gap:6px;
}

/* Camera label */
.camera-label{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; 
  padding:.45rem .65rem;
  background:#f8fafc; border:1px solid #e2e8f0; border-radius:6px; 
  font-size:.8rem; font-weight:600;
  transition:all .2s ease; color:#475569;
  white-space:nowrap;
}
.camera-label:hover{
  background:#eef2f7; border-color:#cbd5e1; 
  transform:translateY(-1px); box-shadow:0 2px 4px rgba(0,0,0,.05);
}
.camera-label .attach-text{
  font-size:.75rem; color:#10b981; font-weight:600;
}

/* Result container improvements */
#result-container{
  margin-top:1rem;
  overflow-x:hidden;
}
#result-block{
  background:#fafbfc;
  padding:1.5rem;
  border-radius:12px;
  border:1px solid #e5e7eb;
}

/* Step 4 context header (sticky) */
.step4-context{
  position: sticky;
  top: 0;
  z-index: 20;
  margin: -1.5rem -1.5rem 14px -1.5rem; /* match #result-block padding */
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(15,98,254,.10), rgba(0,67,206,.06));
  border-bottom: 1px solid #e5e7eb;
  backdrop-filter: blur(6px);
}
.step4-context__row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.step4-context__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.step4-context__title{
  font-weight: 950;
  color: #0f172a;
  font-size: 1.05rem;
  line-height: 1.15;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.step4-context__sub{
  margin-top: 6px;
  color: #475569;
  font-weight: 800;
  font-size: .9rem;
  line-height: 1.25;
}
.step4-context__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
  flex: 0 0 auto;
}
.step4-pill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius:999px;
  border:1px solid #c7d2fe;
  background:#eef2ff;
  color:#1e293b;
  font-weight: 900;
  font-size: .78rem;
  white-space: nowrap;
}
.step4-pill--primary{
  border-color: rgba(15,98,254,.35);
  background: rgba(15,98,254,.12);
  color: #0b4bd6;
}

/* ===========================
   🧩 Step 4 — Test Point Cards
   - Nested layout per point (not flat inputs)
   - Result + Evidence (2 columns desktop)
   - Mobile order: Result → Photo → Observation
=========================== */
.tp-card-row:hover{ background:transparent !important; }
.tp-card-cell{
  padding:0 !important;
  border-right:none !important;
}
.tp-card-cell::before{ display:none !important; content:none !important; }

.tp-card{
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#fff;
  box-shadow:0 2px 10px rgba(16,24,40,.06);
  overflow:hidden;
}
.tp-card.is-collapsed .tp-card__grid{ display:none; }
.tp-card__header--clickable{ cursor:pointer; }

.tp-card__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  background:linear-gradient(135deg, rgba(15,98,254,.06), rgba(0,67,206,.06));
  border-bottom:1px solid #e5e7eb;
}
.tp-card__title{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.tp-title-text{
  font-weight:800;
  color:#0f2342;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:520px;
}
.tp-title-input{
  max-width:520px;
}
.tp-card__headerRight{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

.tp-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.4px;
  text-transform:uppercase;
  border:1px solid transparent;
}
.tp-status--pending{ background:#eef2ff; color:#3730a3; border-color:#c7d2fe; }
.tp-status--completed{ background:#ecfdf5; color:#047857; border-color:#a7f3d0; }
.tp-status--na{ background:#fff7ed; color:#c2410c; border-color:#fed7aa; }

.tp-card__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  padding:14px;
}
.tp-block{
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  padding:12px;
  box-shadow:0 1px 6px rgba(16,24,40,.04);
}
.tp-block__title{
  font-weight:900;
  color:#0f2342;
  font-size:.85rem;
  margin:0 0 10px;
  text-transform:uppercase;
  letter-spacing:.4px;
}
.tp-block--obs{
  grid-column: 1 / -1;
}

.tp-resultControls{
  display:flex;
  gap:10px;
  align-items:flex-start;
  flex-wrap:wrap;
}
.tp-na-toggle{ flex:0 0 auto; }
.tp-inputWrap{
  display:flex;
  align-items:stretch;
  gap:8px;
  flex:1 1 320px;
}
.tp-value-input{ min-width:160px; }
.tp-value-input--secondary{ min-width:160px; }
.tp-unitSuffix{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  border:1px solid #cbd5e1;
  border-radius:10px;
  background:#f8fafc;
  color:#334155;
  font-weight:800;
  min-height:var(--input-height);
  white-space:nowrap;
}

.tp-extras{
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:10px;
}
.tp-field__label{
  font-size:.78rem;
  font-weight:800;
  color:#64748b;
  margin-bottom:6px;
  text-transform:uppercase;
  letter-spacing:.4px;
}

.tp-circuit{
  width:100%;
  min-height:44px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:10px 12px;
  font-weight:800;
  color:var(--ink);
  background:#fff;
}
.tp-circuit:focus{
  outline:none;
  box-shadow:0 0 0 4px var(--ring);
  border-color:#93c5fd;
}

.tp-uploadCard{
  border:2px dashed #c7d2fe;
  border-radius:12px;
  padding:12px;
  background:linear-gradient(135deg, rgba(15,98,254,.04), rgba(0,67,206,.03));
}
.tp-uploadBtn{
  width:100%;
  border:1px solid #c7d2fe;
  background:#fff;
  color:#0f2342;
  border-radius:10px;
  padding:10px 12px;
  font-weight:900;
  cursor:pointer;
}
.tp-uploadBtn:hover{
  background:#f7f9ff;
  border-color:#94a3b8;
}
.tp-uploadHint{
  margin-top:8px;
  font-size:.82rem;
  color:#64748b;
  font-weight:700;
}
.tp-uploadPreviews{
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap:10px;
}
.tp-selectedThumb{
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(16,24,40,.06);
  /* Needed so the per-point "X" (absolute) is visible */
  position:relative;
}
.tp-selectedThumb img{
  width:100%;
  height:110px;
  object-fit:cover;
  display:block;
  background:#f3f4f6;
}
.tp-selectedMeta{
  padding:8px 10px;
  font-size:.78rem;
  font-weight:800;
  color:#334155;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tp-removeBtn{
  width:100%;
  border:0;
  background:#fee2e2;
  color:#991b1b;
  font-weight:900;
  padding:8px 10px;
  cursor:pointer;
}
.tp-removeBtn:hover{ background:#fecaca; }

.tp-uploadExistingGrid{
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap:10px;
}
.tp-thumb{
  display:block;
  border:1px solid #e5e7eb;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  text-decoration:none;
  box-shadow:0 2px 8px rgba(16,24,40,.06);
}
.tp-thumb img{
  width:100%;
  height:110px;
  object-fit:cover;
  display:block;
  background:#f3f4f6;
}
.tp-thumb__file{
  display:block;
  padding:10px;
  font-weight:800;
  color:#0f2342;
  font-size:.85rem;
}

/* General images: thumbnail + X remove */
.tp-generalThumbWrap{
  position:relative;
}
.tp-selectedThumb--general{
  position:relative;
}
.tp-xBtn{
  position:absolute;
  top:6px;
  right:6px;
  width:28px;
  height:28px;
  border-radius:999px;
  border:0;
  background:rgba(15, 23, 42, .78);
  color:#fff;
  font-size:18px;
  line-height:28px;
  font-weight:900;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.tp-xBtn:hover{
  background:rgba(153, 27, 27, .9);
}
.tp-generalActions{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:10px;
  margin-bottom:10px;
  flex-wrap:wrap;
}

/* General images previews (same style) */
.tp-generalPreviews .tp-uploadPreviews,
.tp-generalPreviews .tp-uploadExistingGrid{
  margin-top:0;
}

@media (max-width: 860px){
  .tp-card__grid{
    grid-template-columns:1fr;
  }
  /* Mobile stacking order: Result → Photo → Observation */
  .tp-block--result{ order:1; }
  .tp-block--photo{ order:2; }
  .tp-block--obs{ order:3; }
}
.wizard-step fieldset{
  border:none;
  padding:0;
  margin:0;
}
.wizard-step legend{
  font-size:1.2rem;
  font-weight:700;
  color:var(--brand);
  margin-bottom:1.5rem;
  padding-bottom:.5rem;
  border-bottom:2px solid #e5e7eb;
  width:100%;
}

/* Mobile: Card-based layout para cada test point */
@media (max-width:768px){
  html, body{
    overflow-x: hidden;
  }
  /* Wizard form should use full screen width on mobile */
  form#form-test{
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0.75rem;
  }
  /* Remove extra inner padding around Step 4 so cards can be full width */
  #wizard-step4{
    width: 100%;
    max-width: 100%;
  }
  /* Step 4 should feel like the main working screen on mobile */
  #result-block{
    padding: 0.5rem;
    background: transparent;
    border: none;
    border-radius: 0;
  }
  /* Hard stop: never allow horizontal scrolling in Step 4 */
  #result-container,
  #result-block,
  #step4-context,
  .tp-card,
  .tp-card__grid{
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  /* If any global "table-responsive" styles exist, neutralize them for Step 4 */
  #result-container.table-responsive{
    overflow-x: hidden !important;
  }
  /* On mobile, keep context in normal flow (no overlay over set caption) */
  .step4-context{
    position: static;
    top: auto;
    margin: 8px 0 12px 0;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
  }
  /* Context header: wrap, no truncation */
  .step4-context__top{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .step4-context__meta{
    justify-content: flex-start;
    width: 100%;
  }
  .step4-context__title{
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
  }
  /* If tp-card UI is active, remove the extra row padding so cards are truly full-width */
  .test-table tbody tr.tp-card-row{
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    margin-bottom: 14px;
  }
  .tp-card{
    width: 100%;
    margin: 0;
    max-width: 100%;
  }
  .tp-title-text, .tp-title-input{ max-width: 100% !important; }
  /* Test point header: stack title + status vertically */
  .tp-card__header{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .tp-card__title{
    width: 100%;
    align-items: flex-start;
  }
  .tp-title-text{
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
  }
  .tp-card__headerRight{
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  /* Cable set controls: prevent button clipping on narrow screens */
  .cable-set-controls__row{
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }
  .cable-set-controls__hint{
    width: 100%;
    white-space: normal;
    word-break: break-word;
  }
  .cable-set-controls__actions{
    width: 100%;
    flex-wrap: wrap;
    /* In mobile we switch the parent row to column; prevent this block from
       "growing" vertically (it inherits `flex: 1 ...` from desktop). */
    flex: 0 0 auto;
  }

  /* Mobile: align "Add set" button to the left */
  #st-cable-set-controls .cable-set-controls__actions{
    justify-content: flex-start;
  }
  .cable-set-controls__actions .btn{
    flex: 1 1 160px;
    min-width: 0;
  }
  /* Mobile: avoid giant single "Add set" button */
  #btn-add-cable-set{
    flex: 0 0 auto;
    width: auto;
    padding: .55rem .9rem;
    font-size: .9rem;
    min-height: 40px;
  }

  /* Execution tool selector: keep it compact */
  #st-tool-controls .cable-set-controls__actions{
    justify-content: flex-start;
  }
  #st-tool-controls .cable-set-controls__actions .select{
    max-width: 420px;
  }
  #st_tool_id_exec{
    max-width: 420px;
  }

  /* Step 4 general photos: stack button + hint (avoid overflow) */
  .tp-generalActions{
    flex-direction: column;
    align-items: stretch;
  }
  .tp-generalActions .tp-uploadHint{
    margin-top: 0;
  }

  /* Result controls: stack value + unit, keep readable */
  .tp-resultControls{
    flex-direction: column;
    align-items: stretch;
  }
  .tp-inputWrap{
    flex-direction: column;
    width: 100%;
    flex: 1 1 auto;
  }
  .tp-value-input,
  .tp-value-input--secondary{
    min-width: 0;
    width: 100%;
  }
  .tp-unitSuffix{
    align-self: flex-start;
    margin-top: 4px;
    min-height: 38px;
  }

  .tp-uploadExistingGrid{ max-width: 100%; }
  .tp-uploadExistingGrid, .tp-uploadPreviews{ overflow-x:hidden; }
  .tp-card__grid{
    padding: 12px;
  }

  .test-table{
    display:block;
    border:none;
    box-shadow:none;
    background:transparent;
  }
  .test-table caption{
    display:block;
    border-radius:10px;
    margin-bottom:1rem;
    font-size:1.05rem;
  }
  .test-table thead{
    display:none;
  }
  .test-table tbody{
    display:block;
  }
  .test-table tbody tr{
    display:block;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:1.25rem;
    margin-bottom:1.25rem;
    box-shadow:0 2px 10px rgba(16,24,40,.08);
  }
  .test-table tbody tr:hover{
    background:#fff;
    box-shadow:0 4px 16px rgba(16,24,40,.12);
    transform:translateY(-1px);
    transition:all .2s ease;
  }
  .test-table td{
    display:block;
    width:100%;
    border:none;
    padding:.65rem 0;
    text-align:left;
    position:relative;
  }
  .test-table td:not(:last-child){
    border-bottom:1px solid #f1f5f9;
    padding-bottom:.85rem;
    margin-bottom:.65rem;
  }
  .test-table td:first-child{
    background:linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
    color:#fff;
    font-size:1.05rem;
    font-weight:700;
    padding:.75rem 1rem;
    margin:-1.25rem -1.25rem 1rem -1.25rem;
    border-radius:12px 12px 0 0;
    border-bottom:none;
  }
  .test-table td::before{
    content:attr(data-label);
    display:block;
    font-weight:700;
    color:#64748b;
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.6px;
    margin-bottom:.6rem;
    line-height:1;
  }
  .test-table td:first-child::before{
    display:none;
  }
  .result-combined{
    gap:8px;
  }
  .na-btn{
    width:100%;
    padding:.55rem;
    font-size:.88rem;
  }
  .test-table input[type="text"],
  .test-table input[type="number"],
  .test-table select,
  .test-table textarea{
    font-size:.9rem;
    padding:.55rem .65rem;
  }
  .camera-label{
    width:100%;
    justify-content:center;
    padding:.6rem;
    font-size:.88rem;
  }
}

/* ===========================
   🧷 Sticky actions
=========================== */
.sticky-actions{
  position:sticky; bottom:0; z-index:5;
  background: linear-gradient(180deg, transparent, rgba(245,247,251,.92) 30%);
  padding-top:10px; margin-top:10px;
}

/* ===========================
   ✨ LANDING / HOME
=========================== */
.landing-body{ background:#fff; color:var(--ink); }
.container{ 
  width:min(1200px,92vw); 
  margin-inline:auto; 
  padding-inline:24px;
}
@media (max-width:768px){
  .container{ width:min(100%, 94vw); padding-inline:16px; }
}

/* ===========================
   LANDING GUARDRAILS (buttons)
=========================== */
body.landing-body .btn-primary,
body.landing-body .btn-guardar {
  /* Force landing to use ONLY .btn and .btn.sec */
  background: var(--brand-grad) !important;
  color: #fff !important;
}
/* Landing: keep secondary buttons green (not forced to blue) */
body.landing-body .btn-secondary{
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
  color: #fff !important;
}

.site-header{
  position:sticky; top:0; z-index:50; 
  background:var(--brand);
  box-shadow:0 2px 16px rgba(0,0,0,.15); 
  backdrop-filter:saturate(1.1) blur(12px);
  /* Stabilize header block size (prevents <main> shift) */
  min-height:80px;
  /* iOS notch safe-area */
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
body.landing-body .site-header{
  background:var(--brand);
}
.header-row{ 
  display:flex; 
  align-items:center; 
  gap:32px; 
  padding:16px 0; 
  min-height:80px;
  flex-wrap:nowrap;
}
.brand{ text-decoration:none; }
/* IMPORTANT: keep intrinsic logo size aligned with rendered size to prevent CLS */
.brand-logo{ width:160px; max-width:160px; height:auto; display:block; }
@media (min-width: 821px){
  .brand-logo{ width:220px; max-width:220px; }
}
.main-nav{ flex:1; }
.main-nav ul{ 
  display:flex; 
  gap:28px; 
  list-style:none; 
  padding:0; 
  margin:0; 
}
.main-nav a{ 
  color:#fff; 
  text-decoration:none; 
  font-weight:700;
  font-size:.95rem;
  transition:color .2s;
}
.main-nav a:hover{ color:rgba(255,255,255,.8); }
.main-nav .is-active a{ color:#fff; font-weight:800; }
.header-cta{ 
  margin-left:auto; 
  display:flex; 
  gap:10px; 
  align-items:center; 
  min-height:40px;
  flex-wrap:nowrap;
  white-space:nowrap;
}
.header-tools-mobile{ display:none; }
.nav-toggle{ 
  display:none; 
  background:none; 
  border:0; 
  padding:8px; 
  margin-left:auto; 
  cursor:pointer;
}
.nav-toggle span{ 
  display:block; 
  width:26px; 
  height:3px; 
  background:#fff; 
  margin:5px 0; 
  border-radius:2px;
  transition:all .3s;
}

/* Hero Unified (sin slider) */
.hero{ padding:0; background:var(--bg-grad); }
.hero-unified{ padding:80px 0; min-height:70vh; display:flex; align-items:center; }
.hero-content-wrapper{
  display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;
}
.hero-text{ max-width:640px; }
.hero-title{ 
  margin:.2em 0 .5em; 
  font-size: clamp(2rem, 3vw + 1rem, 3rem); 
  line-height:1.15; 
  color:#0f2342;
  font-weight:900;
}
.lead{ 
  font-size:clamp(1.08rem, .8vw + 1rem, 1.25rem); 
  color:#374151; 
  line-height:1.6;
  margin-bottom:1.5rem;
}
.cta-row{ display:flex; gap:12px; margin-top:20px; flex-wrap:wrap; }
.hero-note{
  margin-top:16px; font-size:.9rem; color:var(--muted);
}
.hero-note a{ color:var(--brand); font-weight:700; text-decoration:none; }
.hero-note a:hover{ text-decoration:underline; }
.hero-visual{ 
  display:flex; 
  align-items:center; 
  justify-content:center; 
}

/* Controles */
.slider-controls{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:14px; z-index:5; }
.slider-controls .prev,.slider-controls .next{
  background:rgba(0,0,0,.5); color:#fff; border:none; width:36px; height:36px; border-radius:50%; cursor:pointer;
  font-size:1.2rem; display:flex; align-items:center; justify-content:center; transition:background .2s;
}
.slider-controls .prev:hover,.slider-controls .next:hover{ background:rgba(0,0,0,.7); }
.slider-controls .slider-dots{ display:flex; gap:8px; }
.slider-controls .slider-dots button{ width:10px; height:10px; border-radius:50%; border:none; background:#d1d5db; cursor:pointer; transition:background .2s; }
.slider-controls .slider-dots button[aria-current="true"]{ background:#0f62fe; }

/* Benefits Grid (nuevo diseño) */
.benefits-grid{ 
  display:grid; 
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); 
  gap:24px; 
  margin-top:40px; 
}
.benefit-card{
  background:#fff; 
  border:1px solid #e5e7eb; 
  border-radius:16px; 
  padding:32px 24px;
  box-shadow:0 6px 18px rgba(16,24,40,.06);
  transition: transform .2s ease, box-shadow .3s ease, border-color .2s ease;
  text-align:center;
}
.benefit-card:hover{ 
  transform: translateY(-5px); 
  box-shadow:0 16px 40px rgba(16,24,40,.15); 
  border-color:#c7d2fe; 
}
.benefit-card h3{ 
  margin:1rem 0 .75rem; 
  font-size:1.15rem; 
  color:#0f2342;
  font-weight:800;
}
.benefit-card p{ 
  line-height:1.6; 
  color:#4b5563;
  font-size:.95rem;
}
.benefit-icon{ 
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
  width:64px; 
  height:64px; 
  border-radius:16px; 
  color:#fff; 
  background:var(--brand-grad);
  box-shadow:0 4px 12px rgba(15,98,254,.3);
  margin-bottom:8px;
}
.benefit-icon svg{ width:32px; height:32px; }
.benefits-cta{ 
  text-align:center; 
  margin-top:48px; 
}

/* Text Center utility */
.text-center{ text-align:center; }

/* Features (cards) - legacy */
.features{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:14px; }
.feature-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:22px;
  box-shadow:0 6px 18px rgba(16,24,40,.06);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.feature-card:hover{ transform: translateY(-3px); box-shadow:0 12px 28px rgba(16,24,40,.12); border-color:#dfe7ff; }
.feature-card h3{ margin:.4rem 0 .35rem; }
.feature-icon{ display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:12px; font-weight:900; color:#fff; background:var(--brand-2); }

/* CTA Banner */
.cta-banner{
  margin-top:48px; 
  padding:32px 28px; 
  border-radius:16px;
  background: linear-gradient(135deg, rgba(15,98,254,.08), rgba(0,67,206,.08));
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  gap:24px;
  box-shadow:0 8px 24px rgba(16,24,40,.08);
  border:1px solid rgba(15,98,254,.1);
}
.cta-banner .cta-text h3{ 
  margin:0 0 8px; 
  color:#0f2342;
  font-size:1.3rem;
}
.cta-banner .cta-text p{ 
  color:#4b5563; 
  font-size:.95rem;
}

@media (max-width:768px){
  .cta-banner{ 
    flex-direction:column; 
    text-align:center; 
    padding:24px 20px;
  }
  .cta-banner .btn{ width:100%; }
}

/* Sponsors / Compatibility */
.sponsor-grid{ 
  display:grid; 
  grid-template-columns:repeat(6,1fr); 
  gap:20px; 
  align-items:center; 
  margin-top:40px;
}
.sponsor{ 
  background:#fff; 
  border:1px solid #e5e7eb; 
  border-radius:14px; 
  padding:20px; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  height:100px; 
  transition: transform .2s, box-shadow .3s, border-color .2s;
  cursor:default;
}
.sponsor img{ 
  max-height:48px; 
  max-width:100%;
  width:auto; 
  opacity:.75; 
  filter:grayscale(100%) contrast(1.1); 
  transition:all .3s;
}
.sponsor:hover{ 
  transform:translateY(-3px); 
  box-shadow:0 12px 32px rgba(16,24,40,.12); 
  border-color:#c7d2fe;
}
.sponsor:hover img{ 
  filter:none; 
  opacity:1; 
  transform:scale(1.05);
}

/* Contact/Signup */
.contact-wrap{ display:grid; grid-template-columns:1.2fr .8fr; gap:24px; }
.contact-form{ border:1px solid #e5e7eb; border-radius:14px; padding:18px; background:#fff; box-shadow:0 6px 18px rgba(16,24,40,.06); }
.contact-side{ align-self:start; }
.contact-side h3{ margin-top:0; }
.contact-side ul{ margin:0 0 10px; padding:0; list-style:none; }
.contact-side li+li{ margin-top:6px; }
.small{ font-size:.9rem; }
.signup-form{ max-width:720px; }

/* Auth (login/signup) – same modern landing styling */
.auth-shell{
  max-width: 760px;
  margin: 0 auto;
}
.auth-head{
  text-align: center;
  margin: 0 auto 18px;
}
.auth-card{
  max-width: 520px;
  margin: 0 auto;
  padding: 22px 22px 18px;
}
.auth-form label{ display:block; font-weight:700; margin: 10px 0 6px; color:#0f2342; }
.auth-check{ display:flex; align-items:center; gap:8px; margin: 10px 0 14px; }
.auth-foot{ text-align:center; margin-top: 14px; }

@media (max-width:560px){
  .auth-card{ padding: 18px 16px 14px; }
}

/* ===========================
   🧩 Test Setup (Wizard merged step)
=========================== */
.setup-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:14px 14px;
  box-shadow:0 4px 18px rgba(16,24,40,.06);
  margin:12px 0;
}
.setup-card__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.setup-card__title{
  font-weight:950;
  color:#0f172a;
  letter-spacing:.2px;
}
.setup-card__sub{
  color:#64748b;
  font-weight:700;
  font-size:.86rem;
}
.setup-card--primary{
  border-color: rgba(15,98,254,.25);
  background: linear-gradient(135deg, rgba(15,98,254,.08), rgba(0,67,206,.04));
}
.setup-card--secondary{
  background:#fbfdff;
}
.setup-card--strong{
  border-color: rgba(15,98,254,.20);
}
.setup-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

/* Desktop: reduce vertical whitespace in Setup (fewer fields now) */
@media (min-width: 900px){
  #wizard-step1 .setup-card{
    margin: 8px 0;
    padding: 10px 12px;
  }
  #wizard-step1 .setup-card__head{
    margin-bottom: 6px;
  }
  #wizard-step1 .setup-grid{
    gap: 10px;
  }
}

/* Cable section per set (meta row) */
.test-table tbody tr.set-meta-row{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 12px;
}
.test-table tbody tr.set-meta-row td{
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: var(--ink) !important;
  font-weight: 700;
}
.test-table tbody tr.set-meta-row td::before{
  display: none !important;
}
.test-table tbody tr.set-meta-row td:first-child{
  background: transparent !important;
  color: var(--ink) !important;
  font-size: .95rem !important;
  font-weight: 900 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
.set-meta-row .form-group{
  display: block;
  margin: 0 !important;
}
.set-meta-row .form-group label{
  margin: 0;
  font-weight: 900;
  color: #0f172a;
  display: block;
  margin-bottom: 6px;
}
.set-meta-row .form-group input{
  max-width: 420px;
}
@media (max-width: 820px){
  .set-meta-row .form-group{
    flex-direction: column;
    align-items: flex-start;
  }
  .set-meta-row .form-group input{
    max-width: 100%;
  }
}

/* Ensure meta row never inherits the mobile blue header styles */
@media (max-width: 820px){
  .test-table tbody tr.set-meta-row{
    display: block;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 12px 0 !important;
    transform: none !important;
  }
  .test-table tbody tr.set-meta-row td{
    display: block;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
  }
  .test-table tbody tr.set-meta-row td:first-child{
    background: transparent !important;
    color: var(--ink) !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
}

/* Observation toggle */
.tp-obsToggle{
  width: 100%;
  margin-top: 8px;
  appearance: none;
  border: 1px dashed rgba(15,98,254,.35);
  background: rgba(239,246,255,.75);
  color: #0f172a;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 900;
  cursor: pointer;
}
.tp-obsToggle:hover{
  border-style: solid;
  box-shadow: 0 6px 18px rgba(15,98,254,.12);
}
.tp-photoToggle{
  width: 100%;
  margin-top: 8px;
  appearance: none;
  border: 1px dashed rgba(15,98,254,.35);
  background: rgba(239,246,255,.75);
  color: #0f172a;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 900;
  cursor: pointer;
}
.tp-photoToggle:hover{
  border-style: solid;
  box-shadow: 0 6px 18px rgba(15,98,254,.12);
}
.tp-photoBody{ margin-top: 10px; }
.tp-obsBody{
  margin-top: 10px;
}

/* Inline cable section editor in set meta row */
.cs-inline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.cs-inline__left{ min-width: 220px; }
.cs-inline__label{
  font-weight:900;
  color:#0f2342;
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.4px;
}
.cs-inline__value{
  margin-top:2px;
  color:#334155;
  font-weight:800;
  font-size:.92rem;
}
.cs-inline__edit{
  display:flex;
  align-items:center;
  gap:8px;
}
.cs-inline__input{
  width:140px;
  min-height:44px;
}
.cs-inline__unit{
  font-weight:900;
  color:#64748b;
}

/* Compact tool selector once applied (execution step) */
.tool-compact{
  margin-top: 8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background: #f8fafc;
}
.tool-compact__ok{
  font-weight:900;
  color:#0f2342;
  font-size:.92rem;
}

/* ---------- Image preview modal (execution Step 4) ---------- */
.st-imgmodal.hidden { display: none !important; }
.st-imgmodal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
}
.st-imgmodal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.72);
}
.st-imgmodal__panel{
  position: relative;
  z-index: 1;
  max-width: min(1100px, calc(100vw - 32px));
  max-height: calc((var(--vh) * 100) - 32px);
  background: #0b1220;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 10px;
}
.st-imgmodal__close{
  justify-self: end;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
}
.st-imgmodal__img{
  display: block;
  max-width: 100%;
  max-height: calc((var(--vh) * 100) - 120px);
  object-fit: contain;
  background: #0b1220;
  border-radius: 10px;
}
@media (min-width: 900px){
  .setup-grid--context{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items:end;
  }
  .setup-grid--tech{
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items:end;
  }
}
@media (max-width: 899px){
  .setup-grid--context,
  .setup-grid--tech{
    grid-template-columns:1fr;
  }
}

/* How It Works Grid */
.how-it-works-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:32px;
  margin-top:40px;
  margin-bottom:48px;
}
.how-card{
  text-align:center;
  padding:24px;
}
.how-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:64px;
  border-radius:50%;
  background:var(--brand-grad);
  color:#fff;
  font-size:1.8rem;
  font-weight:900;
  margin-bottom:20px;
  box-shadow:0 4px 12px rgba(15,98,254,.3);
}
.how-card h3{
  margin:0 0 12px;
  font-size:1.2rem;
  color:#0f2342;
}
.how-card p{
  color:#6b7280;
  line-height:1.6;
}
@media (max-width:768px){
  .how-it-works-grid{
    grid-template-columns:1fr;
    gap:24px;
  }
}

/* =========================================================
   Landing Page v2 (product-first, SEO + conversion)
========================================================= */
.lp-section{
  padding:108px 0;
}
.lp-section--compact{
  padding:84px 0;
}
.lp-section--dominant{
  padding:132px 0;
}
.lp-section--alt{
  background: #f8f9fa;
}
.lp-section--cta{
  padding:92px 0;
}
.lp-section--diff{
  padding:64px 0;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  border-top: 1px solid rgba(15,23,42,.06);
  border-bottom: 1px solid rgba(15,23,42,.06);
}
.lp-section--signal{
  padding:56px 0 96px;
  background: linear-gradient(180deg, #fbfcff 0%, #ffffff 100%);
}
.lp-section--not{
  background:
    radial-gradient(900px 520px at 18% 20%, rgba(15,98,254,.06), transparent 60%),
    radial-gradient(700px 420px at 85% 30%, rgba(245,158,11,.08), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fbfbff 100%);
}

/* Dark / featured sections */
.lp-section--dark{
  background: radial-gradient(1200px 700px at 20% 10%, rgba(15,98,254,.20), transparent 55%),
              radial-gradient(900px 600px at 85% 35%, rgba(99,102,241,.22), transparent 52%),
              linear-gradient(180deg, #0b1220 0%, #0a1835 100%);
  color:#e5e7eb;
  position:relative;
  overflow:hidden;
}
.lp-section--dark::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(700px 420px at 35% 0%, rgba(255,255,255,.06), transparent 55%);
  pointer-events:none;
}
.lp-h2--on-dark{ color:#fff !important; }
.lp-sub--on-dark{ color: rgba(248,250,252,.94) !important; }
.lp-section--dark .lp-h2{ color:#fff !important; }
.lp-section--dark .lp-sub{ color: rgba(248,250,252,.94) !important; }
.lp-kicker{
  display:inline-block;
  font-weight:900;
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  padding:.28rem .62rem;
  border-radius:999px;
  margin-bottom:12px;
}
.lp-microproof{
  margin-top:18px;
  font-weight:800;
  color: rgba(255,255,255,.92);
}
.lp-head{
  text-align:center;
  max-width:860px;
  margin:0 auto 46px;
}
.lp-h2{
  font-size: clamp(1.6rem, 1.2vw + 1.1rem, 2.3rem);
  margin:0 0 10px;
  color:#0f2342;
  letter-spacing:-.01em;
}
.lp-sub{
  margin:0;
  color: var(--muted);
  font-size:1.05rem;
}
.lp-muted{
  margin:28px auto 0;
  max-width:860px;
  text-align:center;
  color: var(--muted);
}
.lp-small{
  margin:18px 0 0;
  color: var(--muted);
  font-size:.95rem;
}

/* Hero */
.lp-hero{
  padding:112px 0 88px;
  background: #ffffff;
  /* Stabilize above-the-fold */
  min-height: calc(var(--vh) * 100);
}
.lp-proofbar{
  margin-top:28px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
.lp-proof{
  background: #fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  box-shadow:0 10px 26px rgba(16,24,40,.08);
  padding:14px 14px;
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.lp-proof__icon{
  width:38px;
  height:38px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(15,98,254,.12);
  border:1px solid rgba(15,98,254,.18);
  color:#1d4ed8;
  flex:0 0 auto;
}
.lp-proof__title{
  font-weight:900;
  color:#0f2342;
  font-size:.95rem;
  line-height:1.2;
}
.lp-proof__sub{
  margin-top:2px;
  color:#475569;
  font-size:.9rem;
  line-height:1.35;
}

/* Differentiator block */
.lp-diff{
  max-width: 980px;
  margin: 0 auto;
  padding: 26px 22px;
  border-radius: 20px;
  background:
    radial-gradient(900px 520px at 20% 0%, rgba(15,98,254,.10), transparent 60%),
    linear-gradient(135deg, rgba(15,98,254,.06), rgba(255,255,255,.96));
  border: 1px solid rgba(15,98,254,.12);
  box-shadow: 0 16px 44px rgba(16,24,40,.10);
}
.lp-diff__title{
  margin: 0 0 12px;
  font-size: clamp(1.35rem, 1.0vw + 1.1rem, 1.95rem);
  letter-spacing: -.01em;
  color:#0f2342;
}
.lp-diff__bullets{
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 8px;
  font-weight: 850;
  color:#0f172a;
}
.lp-diff__bullets li{
  line-height: 1.35;
}

/* Production signal */
.lp-signal{
  margin: 0 auto;
  max-width: 920px;
  text-align:center;
  font-weight: 850;
  color:#0f2342;
  opacity: .9;
}
.lp-hero__grid{
  display:grid;
  /* desktop: make image dominate (~65%) */
  grid-template-columns: .85fr 1.55fr;
  align-items:center;
  gap:44px;
}
.lp-hero__text{ display:flex; flex-direction:column; justify-content:center; }
.lp-hero__title{
  /* reduce ~10–15% for better balance */
  font-size: clamp(1.9rem, 2.35vw + 0.95rem, 2.75rem);
  line-height:1.08;
  margin:0 0 14px;
}
.lp-hero__lead{
  font-size:1.08rem;
  color:#334155;
  margin:0 0 22px;
  max-width: 62ch;
}
.lp-hero__cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:4px;
}
.lp-cta{
  padding:1.05rem 1.7rem !important;
  font-size:1.06rem !important;
  box-shadow:0 12px 30px rgba(15,98,254,.32) !important;
}
.lp-hero__note{
  margin:14px 0 0;
  color: var(--muted);
  font-size:.92rem;
}
.lp-hero__note a{ color:var(--brand); font-weight:800; text-decoration:none; }
.lp-hero__note a:hover{ text-decoration:underline; }
/* Single screenshot in hero */
.lp-hero-shot{
  margin:0;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  box-shadow:0 12px 32px rgba(16,24,40,.10);
  overflow:hidden;
  position:relative;
}
.lp-hero-shot img{
  width:100%;
  height:auto;
  display:block;
  border-bottom:1px solid #e5e7eb;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0);
}
/* Hero uses <picture> sources for responsiveness */
.lp-hero-shot picture{ display:block; position:relative; }
.lp-hero-shot picture::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(15,23,42,.12); /* subtle overlay for contrast */
  pointer-events:none;
}
@media (max-width: 820px){
  .lp-hero-shot{ background:#0b1220; }
  .lp-hero-shot img{
    aspect-ratio: 3 / 4; /* taller on mobile */
    object-fit: contain; /* show full screenshot */
    border-bottom:none;
  }
}
.lp-hero-shot figcaption{
  padding:12px 14px;
  font-size:.92rem;
  color:#475569;
  font-weight:700;
}

/* Tabs (screenshots) */
.lp-tabs{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:18px;
  box-shadow:0 12px 32px rgba(16,24,40,.10);
  overflow:hidden;
}
.lp-tabs input{ position:absolute; opacity:0; pointer-events:none; }
.lp-tabs__bar{
  display:flex;
  gap:6px;
  padding:10px;
  background:linear-gradient(180deg,#f8fafc,#f3f6ff);
  border-bottom:1px solid #e5e7eb;
}
.lp-tab{
  flex:1;
  text-align:center;
  padding:.55rem .6rem;
  border-radius:999px;
  font-weight:900;
  font-size:.85rem;
  cursor:pointer;
  user-select:none;
  color:#0f172a;
  background:#fff;
  border:1px solid #e5e7eb;
}
.lp-tab:hover{ background:#f7f9ff; }
.lp-tabs__panes{
  position:relative;
}
.lp-pane{
  display:none;
  margin:0;
  padding:14px 14px 18px;
}
.lp-pane img{
  width:100%;
  height:auto;
  border-radius:12px;
  display:block;
  border:1px solid #e5e7eb;
  background:#f8fafc;
}
.lp-pane figcaption{
  margin-top:10px;
  font-size:.92rem;
  color:#475569;
  font-weight:700;
}
#lp-tab-1:checked ~ .lp-tabs__panes .lp-pane:nth-child(1){ display:block; }
#lp-tab-2:checked ~ .lp-tabs__panes .lp-pane:nth-child(2){ display:block; }
#lp-tab-3:checked ~ .lp-tabs__panes .lp-pane:nth-child(3){ display:block; }
#lp-tab-4:checked ~ .lp-tabs__panes .lp-pane:nth-child(4){ display:block; }
#lp-tab-1:checked ~ .lp-tabs__bar .lp-tab:nth-child(1),
#lp-tab-2:checked ~ .lp-tabs__bar .lp-tab:nth-child(2),
#lp-tab-3:checked ~ .lp-tabs__bar .lp-tab:nth-child(3),
#lp-tab-4:checked ~ .lp-tabs__bar .lp-tab:nth-child(4){
  background: var(--brand-grad);
  color:#fff;
  border-color: transparent;
}

/* Workflow */
.lp-workflow{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:16px;
}
.lp-step{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:18px 16px;
  box-shadow:0 8px 22px rgba(16,24,40,.06);
  transition: transform .18s ease, box-shadow .25s ease, border-color .18s ease;
  will-change: transform;
}
.lp-step:hover{
  transform: translateY(-4px);
  box-shadow:0 14px 34px rgba(16,24,40,.12);
  border-color:#c7d2fe;
}
.lp-step__kicker{
  display:inline-block;
  font-weight:900;
  font-size:.78rem;
  color:#1d4ed8;
  background:rgba(15,98,254,.10);
  border:1px solid rgba(15,98,254,.18);
  padding:.25rem .6rem;
  border-radius:999px;
  margin-bottom:10px;
}
.lp-h3{
  margin:0 0 8px;
  font-size:1.06rem;
}
.lp-step p{ margin:0; color:#475569; font-size:.96rem; }
.lp-step__hint{
  margin-top:8px !important;
  color:#64748b;
  font-size:.86rem !important;
  font-weight:700;
}

/* Supported test types */
.lp-types{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
  max-width: 1040px;
  margin: 0 auto;
}
.lp-type{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:14px 14px;
  box-shadow:0 10px 26px rgba(16,24,40,.06);
}
.lp-type__cat{
  display:inline-block;
  font-weight:950;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#0b3aa7;
  background: rgba(15,98,254,.10);
  border:1px solid rgba(15,98,254,.16);
  padding:.22rem .55rem;
  border-radius:999px;
  margin-bottom:10px;
}
.lp-type__name{
  font-weight:950;
  color:#0f172a;
  letter-spacing:-.01em;
}
.lp-supported-note{
  max-width: 920px;
  margin: 14px auto 8px;
  color:#475569;
  font-weight:700;
}
.lp-supported-link{
  display:inline-block;
  font-weight:900;
  color:#1d4ed8;
  text-decoration:none;
}
.lp-supported-link:hover{ text-decoration:underline; }

@media (max-width: 920px){
  .lp-types{ grid-template-columns: repeat(2, 1fr); }
}

/* ===========================
   📘 Test Catalog (public)
=========================== */
.tc-block{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:18px;
  padding:18px 16px;
  box-shadow:0 12px 32px rgba(16,24,40,.08);
  margin-bottom:16px;
}
.tc-block--sticky{
  position: sticky;
  top: 76px;
  z-index: 10;
}
.tc-title{
  margin:0 0 8px;
  font-weight:950;
  color:#0f172a;
  letter-spacing:-.01em;
  font-size:1.08rem;
}
.tc-sub{
  margin:0 0 14px;
  color:#475569;
  font-weight:700;
  max-width: 920px;
}
.tc-flow{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
}
.tc-flow__step{
  background: linear-gradient(135deg, rgba(15,98,254,.06), rgba(255,255,255,1));
  border:1px solid rgba(147,197,253,.55);
  border-radius:16px;
  padding:12px 12px;
  display:grid;
  grid-template-columns: 30px 1fr;
  gap:10px;
  align-items:start;
}
.tc-flow__num{
  width:30px;
  height:30px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
  color:#0b3aa7;
  background: rgba(15,98,254,.10);
  border:1px solid rgba(15,98,254,.18);
}
.tc-flow__name{
  font-weight:950;
  color:#0f172a;
  margin:0 0 4px;
  grid-column:2;
}
.tc-flow__desc{
  color:#475569;
  font-weight:700;
  font-size:.92rem;
  grid-column:2;
}
.tc-disclaimer{
  margin:12px 0 0;
  color:#64748b;
  font-weight:700;
  font-size:.9rem;
}
.tc-cat__title{
  font-weight:950;
  color:#0f172a;
  margin: 0 0 10px;
  font-size:1.05rem;
}
.tc-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
.tc-grid--one{ grid-template-columns: 1fr; }
.tc-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:18px;
  padding:14px 14px;
  box-shadow:0 10px 26px rgba(16,24,40,.06);
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}
.tc-card__main{
  text-decoration:none;
  color:inherit;
  display:block;
}
.tc-card__title{
  margin:0;
  font-weight:950;
  color:#0f172a;
  letter-spacing:-.01em;
}
.tc-card__desc{
  margin:6px 0 0;
  color:#475569;
  font-weight:700;
}
.tc-card__short{
  margin:6px 0 0;
  color:#334155;
  font-weight:800;
}
/* catalog: selection-first (details live in test pages) */
.tc-card__expanded{ display:none; }
.tc-meta{
  margin-top:10px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.tc-stage{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:950;
  font-size:.74rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#0b3aa7;
  background: rgba(15,98,254,.10);
  border:1px solid rgba(15,98,254,.16);
  padding:.22rem .55rem;
  border-radius:999px;
}
.tc-why{
  display:none;
}
.tc-why__label{
  font-weight:950;
  font-size:.78rem;
  color:#0f172a;
  margin-bottom:4px;
}
.tc-why__text{
  color:#334155;
  font-weight:800;
  line-height:1.35;
}
.tc-card__includes{
  border-top:1px solid #eef2f7;
  padding-top:10px;
}
.tc-card__includes-title{
  font-weight:950;
  color:#0f172a;
  font-size:.9rem;
  margin-bottom:6px;
}
.tc-card__includes-list{
  margin:0;
  padding-left: 1.1rem;
  color:#334155;
  font-weight:700;
}
.tc-card__cta{
  margin-top:auto;
  width:100%;
  text-align:center;
}
.tc-card__actions{
  margin-top:auto;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.tc-card__btn{
  flex:1;
  text-align:center;
  min-width: 0;
  white-space:normal;
  max-width:100%;
  overflow-wrap:anywhere;
  line-height:1.15;
  padding:.75rem .9rem;
  font-size:.92rem;
}
@media (max-width: 560px){
  .tc-card__actions{ flex-direction:column; }
}

/* Pillar page (/electrical-commissioning) */
.pillar{
  max-width:1040px;
}
.pillar-head{
  margin-bottom:22px;
}
.pillar-h1{
  font-size:clamp(2.0rem, 3.2vw, 3.1rem);
  line-height:1.12;
  margin:0 0 10px;
  letter-spacing:-0.02em;
}
.pillar-lead{
  font-size:1.08rem;
  line-height:1.65;
  color:#0f172a;
  margin:0 0 10px;
}
.pillar-body{
  font-size:1.02rem;
  line-height:1.7;
  color:#0f172a;
}
.pillar-h2{
  margin:28px 0 10px;
  font-size:1.45rem;
  line-height:1.25;
  letter-spacing:-0.01em;
}
.pillar-h3{
  margin:20px 0 8px;
  font-size:1.15rem;
  line-height:1.25;
}
.pillar-ul,
.pillar-ol{
  margin:10px 0 14px 1.15rem;
}
.pillar-ul li,
.pillar-ol li{
  margin:6px 0;
}
.pillar-muted{
  color:rgba(15, 23, 42, 0.68);
  font-weight:500;
}
.pillar-cta{
  margin-top:22px;
  padding:16px;
  border:1px solid rgba(15, 23, 42, 0.12);
  border-radius:14px;
  background:rgba(15, 23, 42, 0.03);
}
.pillar-cta__lead{
  margin:0 0 12px;
  font-weight:600;
}

/* Test detail (public) */
.tc-detail{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:18px;
  padding:18px 16px;
  box-shadow:0 12px 32px rgba(16,24,40,.08);
}
.tc-purpose{
  margin-top:12px;
  display:flex;
  gap:12px;
  align-items:flex-start;
  background: linear-gradient(135deg, rgba(16,185,129,.10), rgba(255,255,255,1));
  border:1px solid rgba(16,185,129,.22);
  border-radius:16px;
  padding:12px 12px;
}
.tc-purpose__icon{
  width:34px;
  height:34px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(15,98,254,.10);
  border:1px solid rgba(15,98,254,.16);
  flex:0 0 auto;
  color:#1d4ed8;
}
.tc-purpose__title{
  font-weight:950;
  color:#0f172a;
  margin:0 0 2px;
}
.tc-purpose__text{
  margin:0;
  color:#475569;
  font-weight:700;
}
.tc-glance{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
}
.tc-glance__item{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:12px 12px;
  box-shadow:0 10px 26px rgba(16,24,40,.06);
  min-width:0;
}
.tc-glance__icon{
  width:30px;
  height:30px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(15,98,254,.10);
  border:1px solid rgba(15,98,254,.16);
  margin-bottom:8px;
  color:#1d4ed8;
}
.tc-ico{
  width:18px;
  height:18px;
  display:block;
}
.tc-glance__label{
  font-weight:950;
  font-size:.78rem;
  color:#0f172a;
  margin-bottom:4px;
}
.tc-glance__value{
  color:#475569;
  font-weight:800;
  font-size:.92rem;
  line-height:1.25;
}
.tc-includes{
  margin-top:12px;
  background: linear-gradient(135deg, rgba(15,98,254,.06), rgba(255,255,255,1));
  border:1px solid rgba(147,197,253,.55);
  border-radius:16px;
  padding:12px 12px;
}
.tc-includes__title{
  font-weight:950;
  color:#0f172a;
  margin:0 0 8px;
}
.tc-includes__list{
  margin:0;
  padding-left: 1.1rem;
  color:#334155;
  font-weight:700;
}
.tc-detail__body{
  margin-top:12px;
}
.tc-h2{
  margin:14px 0 8px;
  font-weight:950;
  color:#0f172a;
  font-size:1.02rem;
}
.tc-bullets{
  margin:0 0 10px;
  padding-left: 1.1rem;
  color:#475569;
  font-weight:700;
}
.tc-par{
  margin:0 0 10px;
  color:#475569;
  font-weight:700;
  line-height:1.55;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
.tc-bullets li{
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
.tc-flowline{
  margin:0;
  color:#64748b;
  font-weight:700;
  font-size:.95rem;
  line-height:1.55;
}
.tc-bullets{
  line-height:1.55;
}

@media (max-width: 980px){
  .tc-flow{ grid-template-columns: 1fr; }
  .tc-grid{ grid-template-columns: repeat(2, 1fr); }
  .tc-block--sticky{ position: static; }
  .tc-glance{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .tc-grid{ grid-template-columns: 1fr; }
  .tc-glance{ grid-template-columns: 1fr; }
}

/* Screenshot grid */
.lp-shots{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}
.lp-shot{
  margin:0;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  box-shadow:0 8px 22px rgba(16,24,40,.06);
  overflow:hidden;
  transition: transform .18s ease, box-shadow .25s ease, border-color .18s ease;
  will-change: transform;
}
.lp-shot:hover{
  transform: translateY(-4px);
  box-shadow:0 14px 34px rgba(16,24,40,.12);
  border-color:#c7d2fe;
}
.lp-shot img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background:#f8fafc;
}
.lp-shot figcaption{
  padding:12px 14px 14px;
  font-size:.92rem;
  color:#475569;
  font-weight:700;
}

/* Feature cards */
.lp-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}
.lp-grid--2{ grid-template-columns: repeat(2, 1fr); }
.lp-grid--tight{ gap:12px; }
.lp-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:18px 16px;
  box-shadow:0 8px 22px rgba(16,24,40,.06);
  transition: transform .18s ease, box-shadow .25s ease, border-color .18s ease;
  will-change: transform;
}
.lp-card:hover{
  transform: translateY(-4px);
  box-shadow:0 14px 34px rgba(16,24,40,.12);
  border-color:#c7d2fe;
}
.lp-card p{ margin:0; color:#475569; font-size:.96rem; }
.lp-card--labeled{
  position:relative;
  padding-top:20px;
}
.lp-card--labeled p{
  /* Leave space for the top-right label pill */
  padding-right: 92px;
}
.lp-card__label{
  position:absolute;
  top:14px;
  right:14px;
  font-weight:900;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#0b3aa7;
  background: rgba(15,98,254,.10);
  border:1px solid rgba(15,98,254,.16);
  padding:.22rem .55rem;
  border-radius:999px;
}

@media (max-width: 520px){
  .lp-card--labeled p{ padding-right: 74px; }
}
.lp-card--highlight{
  grid-column: 1 / -1;
  background: radial-gradient(600px 220px at 20% 10%, rgba(15,98,254,.14), transparent 62%),
              linear-gradient(135deg, rgba(15,98,254,.08), rgba(255,255,255,.92));
  border-color:#c7d2fe;
}
.lp-card__highlight-kicker{
  font-weight:900;
  font-size:.78rem;
  color:#1d4ed8;
  margin-bottom:8px;
}
.lp-card--icon{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.lp-card__icon{
  width:32px;
  height:32px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(16,185,129,.10);
  border:1px solid rgba(16,185,129,.18);
  color:#059669;
  flex:0 0 auto;
  margin-top:1px;
}

/* AHA bridge */
.lp-section--aha{
  padding:72px 0;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  border-top:1px solid rgba(15,23,42,.06);
  border-bottom:1px solid rgba(15,23,42,.06);
}
.lp-aha{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  align-items:center;
  gap:18px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:18px;
  box-shadow:0 14px 34px rgba(16,24,40,.10);
  padding:22px 18px;
}
.lp-diagram{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.lp-node{
  padding:.55rem .75rem;
  border-radius:999px;
  font-weight:900;
  border:1px solid rgba(15,98,254,.18);
  background: rgba(15,98,254,.08);
  color:#0f2342;
}
.lp-node--active{
  background: var(--brand-grad);
  color:#fff;
  border-color: transparent;
  box-shadow:0 10px 26px rgba(15,98,254,.26);
}
.lp-arrow{
  font-weight:900;
  color:#64748b;
}

/* Finalize split + flow */
.lp-split{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:26px;
  align-items:start;
  position:relative;
  z-index:1;
}
.lp-verdict{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.lp-verdict__line{
  font-weight:950;
  font-size:1.08rem;
  color:#fff;
  letter-spacing:-.01em;
}
.lp-verdict__line:nth-child(1){ opacity:.92; }
.lp-verdict__line:nth-child(2){ opacity:.96; }
.lp-verdict__line:nth-child(3){ opacity:.98; }
.lp-verdict__line:nth-child(4){ opacity:1; }
.lp-flow{
  list-style:none;
  padding:0;
  margin:0;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:18px 16px;
}
.lp-flow__step{
  padding-bottom:16px;
}
.lp-flow__step{
  position:relative;
  padding-left:22px;
  padding-bottom:14px;
}
.lp-flow__step:not(:last-child)::after{
  content:"";
  position:absolute;
  left:10px;
  top:10px;
  bottom:6px;
  width:2px;
  background: linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,.08));
}
.lp-flow__dot{
  position:absolute;
  left:3px;
  top:4px;
  width:14px;
  height:14px;
  border-radius:50%;
  background: rgba(255,255,255,.92);
  box-shadow:0 10px 22px rgba(0,0,0,.25);
}
.lp-flow__title{
  font-weight:950;
  color:#fff;
  letter-spacing:-.01em;
}
.lp-flow__body{
  margin-top:2px;
  color: rgba(226,232,240,.86);
  font-size:.93rem;
}
.lp-cta-inline{
  margin-top:14px;
}

/* Report showcase */
.lp-report__kicker{
  text-align:center;
  font-weight:900;
  font-size:.9rem;
  color:#1d4ed8;
  margin:0 0 14px;
}

/* Project certification overview */
.lp-overview{
  display:grid;
  /* desktop: image ~65% */
  grid-template-columns: .85fr 1.55fr;
  gap:18px;
  align-items:start;
  max-width: 1040px;
  margin: 0 auto 18px;
}
.lp-iconlist{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.lp-iconlist li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 12px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  box-shadow:0 10px 26px rgba(16,24,40,.06);
  color:#0f172a;
  font-weight:800;
}
.lp-iconlist__icon{
  width:26px;
  height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 26px;
  border-radius:10px;
  background:rgba(15,98,254,.10);
  border:1px solid rgba(15,98,254,.18);
  font-size:16px;
}
.lp-shot__label{
  position:absolute;
  left:12px;
  top:12px;
  background: rgba(15,23,42,.88);
  color:#fff;
  font-weight:900;
  font-size:.82rem;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}
.lp-shot--overview{
  position:relative;
  cursor: zoom-in;
}
.lp-shot--overview img{
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 10%; /* top-center focus */
}

/* Overview lightbox */
.lp-lightbox{
  position:fixed;
  inset:0;
  background: rgba(2,6,23,.70);
  display:none;
  align-items:center;
  justify-content:center;
  z-index: 9999;
  padding: 18px;
}
.lp-lightbox.is-open{ display:flex; }
.lp-lightbox__panel{
  width: min(1100px, 96vw);
  max-height: min(82vh, 860px);
  background:#fff;
  border-radius: 16px;
  overflow:hidden;
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
  position:relative;
}
.lp-lightbox__img{
  width:100%;
  height:100%;
  max-height: min(82vh, 860px);
  object-fit: contain;
  display:block;
  background:#0b1220;
}
.lp-lightbox__close{
  position:absolute;
  top:10px;
  right:10px;
  width:38px;
  height:38px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(15,23,42,.70);
  color:#fff;
  font-weight:900;
  cursor:pointer;
}
.lp-lightbox__close:hover{ background: rgba(15,23,42,.88); }

@media (max-width: 920px){
  .lp-overview{ grid-template-columns: 1fr; }
}
.lp-shot--hero{
  margin: 0 auto 18px;
  /* Slightly smaller on desktop (avoid oversized report previews) */
  max-width: 680px;
}
.lp-shot--hero img{
  /* Show full report preview (no crop, no letterbox) */
  aspect-ratio: auto;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  background: #fff;
}
.lp-report__proofs{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  margin: 0 auto 18px;
  max-width: 680px;
}
.lp-shot--crop img{
  /* Show full previews (no crop, no forced aspect ratio) */
  aspect-ratio: auto;
  height: auto;
  max-height: 360px;
  object-fit: contain;
  background: #fff;
}
.lp-shot--table img{
  transform: none;
}
.lp-shot--photos img{
  transform: none;
}

/* FAQ accordion */
.lp-faq{
  max-width: 920px;
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.lp-qa{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  box-shadow:0 10px 26px rgba(16,24,40,.08);
  padding:0;
  overflow:hidden;
}
.lp-qa__q{
  list-style:none;
  cursor:pointer;
  padding:16px 16px;
  font-weight:950;
  color:#0f2342;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.lp-qa__q::-webkit-details-marker{ display:none; }
.lp-qa__q::after{
  content:"+";
  font-weight:900;
  color:#1d4ed8;
}
.lp-qa[open] .lp-qa__q::after{ content:"–"; }
.lp-qa__a{
  padding:0 16px 16px;
  color:#475569;
  font-size:.96rem;
}

/* What STATRIA is not (distinct block style) */
.lp-not-grid{
  max-width: 920px;
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}
.lp-not-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:16px 16px;
  background:#fff;
  border:1px dashed rgba(15,98,254,.25);
  border-radius:16px;
  box-shadow:0 10px 26px rgba(16,24,40,.06);
}
.lp-not-x{
  width:34px;
  height:34px;
  border-radius:12px;
  background: rgba(239,68,68,.10);
  border:1px solid rgba(239,68,68,.18);
  color:#dc2626;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:1000;
  flex:0 0 auto;
  margin-top:1px;
}
.lp-not-text{
  font-weight:900;
  color:#0f2342;
}

/* Benefits */
.lp-benefits{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}
.lp-benefit{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:18px;
  padding:18px 16px;
  display:flex;
  gap:14px;
  align-items:flex-start;
  box-shadow:0 10px 26px rgba(16,24,40,.08);
  transition: transform .18s ease, box-shadow .25s ease, border-color .18s ease;
  will-change: transform;
}
.lp-benefit:hover{
  transform: translateY(-4px);
  box-shadow:0 16px 38px rgba(16,24,40,.14);
  border-color:#c7d2fe;
}
.lp-benefit__badge{
  flex:0 0 auto;
  width:84px;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
}
.lp-benefit__icon{
  width:36px;
  height:36px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(15,98,254,.10);
  border:1px solid rgba(15,98,254,.18);
  color:#0f62fe;
}
.lp-benefit__metric{
  width:84px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:1000;
  border-radius:12px;
  background:rgba(22,163,74,.10);
  border:1px solid rgba(22,163,74,.20);
  color:#0f172a;
}
.lp-benefit:nth-child(2) .lp-benefit__icon{ background:rgba(22,163,74,.10); border-color:rgba(22,163,74,.20); color:#16a34a; }
.lp-benefit:nth-child(2) .lp-benefit__metric{ background:rgba(15,98,254,.10); border-color:rgba(15,98,254,.18); }
.lp-benefit:nth-child(3) .lp-benefit__icon{ background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.22); color:#b45309; }
.lp-benefit:nth-child(3) .lp-benefit__metric{ background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.22); }
.lp-benefit__body p{ margin:0; color:#475569; font-size:.96rem; }

@media (max-width: 980px){
  .lp-hero__grid{ grid-template-columns:1fr; gap:26px; }
  .lp-hero{ padding:64px 0 54px; }
  .lp-hero__text{ text-align:center; }
  .lp-hero__lead{ margin-left:auto; margin-right:auto; }
  .lp-hero__cta{ justify-content:center; }
  .lp-workflow{ grid-template-columns:1fr 1fr; }
  .lp-grid{ grid-template-columns:1fr 1fr; }
  .lp-benefits{ grid-template-columns:1fr; }
  .lp-shots{ grid-template-columns:1fr; }
  .lp-proofbar{ grid-template-columns:1fr; }
  .lp-aha{ grid-template-columns:1fr; text-align:center; }
  .lp-split{ grid-template-columns:1fr; }
  .lp-report__proofs{ grid-template-columns: 1fr; }
  /* Reduce report previews on tablet/mobile */
  .lp-shot--hero{ max-width: 520px; }
  .lp-shot--hero img{ max-height: 420px; }
  .lp-report__proofs{ max-width: 520px; }
  .lp-shot--crop img{ max-height: 320px; }
}
@media (max-width: 560px){
  .lp-section{ padding:78px 0; }
  .lp-section--compact{ padding:70px 0; }
  .lp-section--dominant{ padding:96px 0; }
  .lp-hero{ padding:84px 0 64px; }
  .lp-workflow{ grid-template-columns:1fr; }
  .lp-grid{ grid-template-columns:1fr; }
  .lp-tab{ font-size:.8rem; padding:.5rem .55rem; }
  .lp-shot--hero{ max-width: 420px; }
  .lp-shot--hero img{ max-height: 360px; }
  .lp-report__proofs{ max-width: 420px; }
  .lp-shot--crop img{ max-height: 280px; }
  /* More comfortable mobile text */
  .lp-hero__lead,
  .lp-step p,
  .lp-card p,
  .lp-benefit__body p,
  .lp-shot figcaption{
    font-size: .875rem;
  }
}

/* For-who cards: equal height + better padding */
.for-who-card{
  display:flex;
  flex-direction:column;
  padding:36px 28px;
}
.for-who-card .btn{ margin-top:auto; }

/* Logos: increase contrast (still grayscale by default) */
.sponsor{
  box-shadow:0 8px 22px rgba(16,24,40,.06);
}
.sponsor img{
  opacity:.92;
  filter:grayscale(100%) contrast(1.2);
}

/* For Who Grid */
.for-who-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:32px;
  margin-top:40px;
}
.for-who-card{
  background:#fff;
  border:2px solid #e5e7eb;
  border-radius:16px;
  padding:32px;
  position:relative;
  transition: transform .2s ease, box-shadow .3s ease, border-color .2s ease;
}
.for-who-card.featured{
  border-color:var(--brand);
  box-shadow:0 8px 24px rgba(15,98,254,.15);
}
.for-who-card:hover{
  transform:translateY(-5px);
  box-shadow:0 12px 32px rgba(16,24,40,.15);
}
.for-who-badge{
  display:inline-block;
  padding:6px 16px;
  border-radius:999px;
  font-size:.85rem;
  font-weight:700;
  text-transform:uppercase;
  margin-bottom:16px;
  background:var(--brand-grad);
  color:#fff;
}
.for-who-card h3{
  margin:0 0 12px;
  font-size:1.4rem;
  color:#0f2342;
}
.for-who-card > p{
  color:#6b7280;
  margin-bottom:20px;
  line-height:1.6;
}
.for-who-card .bullets{
  margin-bottom:24px;
}
.for-who-card .btn{
  width:100%;
  justify-content:center;
}
@media (max-width:768px){
  .for-who-grid{
    grid-template-columns:1fr;
    gap:24px;
  }
}

/* Final CTA */
.final-cta{
  background:linear-gradient(135deg, rgba(15,98,254,.08), rgba(0,67,206,.08));
}
.cta-banner-large{
  text-align:center;
  max-width:720px;
  margin:0 auto;
  padding:48px 24px;
}
.cta-banner-large--dark{
  background: radial-gradient(900px 520px at 20% 0%, rgba(15,98,254,.22), transparent 60%),
              radial-gradient(700px 420px at 85% 35%, rgba(99,102,241,.22), transparent 60%),
              linear-gradient(180deg, #0b1220 0%, #0a1835 100%);
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;
  box-shadow:0 18px 46px rgba(2,6,23,.26);
}
.cta-banner-large--dark h2{ color:#fff !important; }
.cta-banner-large--dark p{ color: rgba(248,250,252,.88) !important; }
.cta-banner-large h2{
  font-size:clamp(1.75rem, 3vw, 2.5rem);
  margin:0 0 16px;
  color:#0f2342;
}
.cta-banner-large p{
  font-size:1.1rem;
  color:#6b7280;
  margin-bottom:32px;
}
.cta-banner-large .cta-row{
  justify-content:center;
}

/* Applications Grid */
.applications-grid{ 
  display:grid; 
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); 
  gap:28px; 
  margin-top:40px; 
}
.application-card{
  background:#fff; 
  border:1px solid #e5e7eb; 
  border-radius:16px; 
  overflow:hidden;
  box-shadow:0 6px 18px rgba(16,24,40,.06);
  transition: transform .2s ease, box-shadow .3s ease;
}
.application-card:hover{ 
  transform: translateY(-5px); 
  box-shadow:0 16px 40px rgba(16,24,40,.15); 
}
.app-media{ 
  width:100%; 
  height:220px; 
  overflow:hidden; 
  background:#f3f4f6; 
}
.app-media img{ 
  width:100%; 
  height:100%; 
  object-fit:cover; 
  transition:transform .3s ease;
}
.application-card:hover .app-media img{ transform:scale(1.05); }
.application-card h3{ 
  margin:1.25rem 1.25rem .75rem; 
  font-size:1.2rem; 
  color:#0f2342;
  font-weight:800;
}
.application-card p{ 
  margin:0 1.25rem 1.5rem; 
  line-height:1.6; 
  color:#4b5563;
  font-size:.95rem;
}
.more-info{ 
  text-align:center; 
  margin-top:32px; 
}
.more-link{ 
  color:var(--brand); 
  font-weight:700; 
  font-size:1rem;
  text-decoration:none; 
  transition:color .2s;
}
.more-link:hover{ 
  color:var(--brand-2); 
  text-decoration:underline; 
}

/* Footer */
.site-footer{ 
  margin-top:80px; 
  /* Subtle separator (not a hard cut) */
  border-top:1px solid rgba(255,255,255,.06);
  background:#1e3a5f; 
  padding:48px 0 24px;
}
body.landing-body .site-footer{
  background:#1e3a5f;
}
.footer-container{ 
  display:grid; 
  grid-template-columns:1.5fr 2fr; 
  gap:48px; 
  margin-bottom:32px;
}
.footer-main{ }
.footer-brand{ 
  display:flex; 
  gap:12px; 
  align-items:center; 
  margin-bottom:12px;
}
.footer-brand img{ height:32px; width:auto; filter:brightness(0) invert(1); }
.footer-brand strong{ font-size:1.3rem; color:#fff; }
.footer-tagline{ 
  color:rgba(255,255,255,.6); 
  font-size:.9rem; 
  margin:0;
  max-width:320px;
}
.footer-links{ 
  display:grid; 
  grid-template-columns:repeat(3, 1fr); 
  gap:24px; 
}
.footer-col h4{ 
  font-size:.9rem; 
  font-weight:600; 
  color:rgba(255,255,255,.95); 
  margin:0 0 12px;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.footer-col ul{ 
  list-style:none; 
  padding:0; 
  margin:0; 
}
.footer-col ul li{ margin-bottom:8px; }
.footer-col a{ 
  color:rgba(255,255,255,.75); 
  text-decoration:none; 
  font-size:.9rem;
  transition:color .2s;
}
.footer-col a:hover,
.footer-col a:focus-visible{
  color:#fff;
  text-decoration:none;
}
.footer-bottom{ 
  padding-top:24px; 
  border-top:1px solid rgba(255,255,255,.08); 
  text-align:center;
}
.copyright{ 
  margin:0; 
  color:rgba(255,255,255,.5); 
  font-size:.85rem; 
}

/* ===========================
   🖼️ Media uniforme (FIXED)
=========================== */
.media-wrap{
  width:100%; 
  aspect-ratio: 16/9; 
  border-radius:var(--radius); 
  overflow:hidden;
  background:#f3f4f6; 
  box-shadow:0 2px 10px rgba(16,24,40,.06);
  position:relative;
}
.media-wrap img{ 
  width:100%; 
  height:100%; 
  object-fit:cover; 
  display:block;
  max-width:100%;
}
/* Hero visual exception */
.hero-visual .media-wrap{
  aspect-ratio:16/10;
  height:auto;
  max-height:520px;
}
@media (max-width:768px){
  .hero-visual .media-wrap{
    aspect-ratio:16/9;
    max-height:280px;
  }
}

/* ===========================
   📱 Responsive
=========================== */
.hamburger{ 
  display:none; 
  font-size:1.5rem;
  width:44px;
  height:44px;
  align-items:center;
  justify-content:center;
  background:var(--brand-2); 
  color:#fff; 
  border:none; 
  border-radius:10px;
  cursor:pointer;
  transition:all .2s ease;
  box-shadow:0 4px 12px rgba(15,98,254,.25);
}
.hamburger:hover{
  background:var(--brand);
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(15,98,254,.35);
}
.hamburger:active{
  transform:translateY(0);
}

/* Mobile header for platform */
.mobile-header{
  display:none;
}

@media (max-width:1024px){
  .mobile-header{
    display:flex !important;
    background:var(--brand-2);
    color:#fff;
    padding: calc(env(safe-area-inset-top) + 1rem) calc(env(safe-area-inset-right) + 1rem) 1rem calc(env(safe-area-inset-left) + 1rem);
    /* iOS Safari: sticky is safer than fixed (address bar / keyboard) */
    position:sticky;
    top:0;
    z-index:1200;
    box-shadow:0 2px 8px rgba(0,0,0,.1);
    border-radius: 0;
    margin: 0;
  }
  .mobile-title{
    flex:1;
  color:#fff;
  }
  /* Header is in-flow (sticky), so no hardcoded padding-top offsets */
  .content{ margin-left:0; padding:1rem; max-width:100%; padding-top: 1rem; }
  .sidebar{
    left:0;
    transform: translateX(-110%);
    box-shadow: 8px 0 24px rgba(0,0,0,.18);
  }
  .sidebar.active{
    transform: translateX(0);
  }
  .hamburger{
    display:flex !important; 
    position:relative;
    top:0;
    right:0;
    margin:0;
  }
  
  /* Hero responsive */
  .hero-content-wrapper{ grid-template-columns:1fr; gap:32px; }
  .hero-text{ max-width:100%; text-align:center; }
  .hero-visual{ order:-1; }
  .hero-image{ height:400px; }
  .cta-row{ justify-content:center; }
  
  /* Benefits */
  .benefits-grid{ grid-template-columns:repeat(2, 1fr); gap:20px; }
  
  /* Applications */
  .applications-grid{ grid-template-columns:repeat(2, 1fr); }
  
  /* Footer */
  .footer-container{ grid-template-columns:1fr; gap:32px; }
  .footer-links{ grid-template-columns:repeat(3, 1fr); gap:20px; }
}

/* ===========================
   📎 Certificates – filters + table polish
=========================== */
.cert-filters{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-end;
  margin:10px 0 16px;
  padding:12px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  box-shadow: 0 2px 8px rgba(16,24,40,.04);
}
.cert-filter label{
  display:block;
  margin:0 0 6px;
  font-size:.85rem;
  font-weight:800;
  color:var(--muted);
}
.cert-fixed-project{
  min-width:200px;
}
.cert-fixed-project__label{
  display:block;
  font-size:.85rem;
  font-weight:800;
  color:var(--muted);
  margin-bottom:6px;
}
.cert-fixed-project__value{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#fff;
  font-weight:900;
  color:var(--ink);
}
.cert-project-pill{
  padding:12px;
  border-radius:14px;
  color:#fff;
  background: var(--brand-grad);
  box-shadow: 0 6px 18px rgba(15,98,254,.25);
}

/* Certificates actions as clean links */
.btn-link{
  appearance:none;
  border:none;
  background:transparent;
  color: var(--brand-2);
  font-weight:900;
  cursor:pointer;
  padding:8px 10px;
  border-radius:10px;
  text-decoration:none;
}
.btn-link:hover{
  background:#eef2ff;
}
.btn-link:focus-visible{
  outline:none;
  box-shadow: 0 0 0 4px var(--ring);
}
.btn-link + .btn-link{ margin-left:6px; }
#table-certificates td[data-label="Actions"]{ white-space:nowrap; }
#table-certificates{
  background:#fff;
}
#table-certificates tbody tr{
  transition: transform .08s ease, box-shadow .2s ease;
}
#table-certificates tbody tr:hover{
  box-shadow: 0 6px 18px rgba(16,24,40,.08);
}

@media (max-width:980px){
  .features{ grid-template-columns:1fr 1fr; }
  .sponsor-grid{ grid-template-columns:repeat(3,1fr); }
  .contact-wrap{ grid-template-columns:1fr; }
}

@media (max-width:768px){
  /* Header mobile */
  .header-row{ position:relative; }
  .main-nav{ display:none; }
  .header-cta{ display:none; }
  .header-tools-mobile{ display:flex; gap:10px; align-items:center; margin-left:auto; }
  .nav-toggle{ display:flex; flex-direction:column; margin-left:0; }
  
  /* Mobile menu open state - unified panel */
  .header-row.menu-open .main-nav{ 
    display:block;
    position:absolute; 
    top:100%; 
    left:0; 
    right:0; 
    background:var(--brand); 
    border-top:1px solid rgba(255,255,255,.15);
    box-shadow:0 8px 16px rgba(0,0,0,.2);
    z-index:100;
    padding:16px;
  }
  .header-row.menu-open .main-nav ul{ 
    flex-direction:column; 
    padding:0; 
    gap:0;
    margin:0 0 16px 0;
  }
  .header-row.menu-open .main-nav li{
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .header-row.menu-open .main-nav li:last-child{
    border-bottom:none;
  }
  .header-row.menu-open .main-nav a{
    display:block;
    padding:14px 0;
    font-size:1.05rem;
  }
  /* CTAs inside mobile nav */
  .header-row.menu-open .main-nav .header-cta{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding-top:16px;
    border-top:1px solid rgba(255,255,255,.15);
    position:static;
    background:transparent;
    margin:0;
  }
  .header-row.menu-open .main-nav .header-cta .btn{ 
    width:100%; 
    justify-content:center; 
    display:flex;
  }
  .header-row.menu-open .main-nav .header-cta .btn.sec{ 
    display:flex; 
  }
  
  /* Hero */
  .hero-unified{ padding:48px 0; min-height:auto; }
  .hero-content-wrapper{ gap:24px; }
  .hero-image{ height:280px; border-radius:16px; }
  .hero-title{ font-size:1.65rem; text-align:center; line-height:1.2; }
  .lead{ text-align:center; font-size:1rem; }
  .hero-note{ text-align:center; }
  
  /* Benefits */
  .benefits-grid{ grid-template-columns:1fr; gap:20px; }
  .benefit-card{ padding:28px 20px; }
  .benefit-icon{ width:56px; height:56px; }
  .benefit-icon svg{ width:28px; height:28px; }
  
  /* Applications */
  .applications-grid{ grid-template-columns:1fr; gap:24px; }
  .app-media{ height:200px; }
  
  /* Features legacy */
  .features{ grid-template-columns:1fr; }
  
  /* Sponsors */
  .sponsor-grid{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .sponsor{ height:90px; padding:16px; }
  .sponsor img{ max-height:42px; }
  
  /* Footer */
  .footer-links{ grid-template-columns:1fr; gap:28px; }
  .footer-main{ text-align:center; }
  .footer-tagline{ margin:0 auto; }
  .footer-col{ text-align:center; }
  
  /* Section spacing */
  .section--spacious{ padding:2.5rem 0; }
  .section-head{ margin-bottom:2rem; padding-inline:8px; }
  .section-title{ font-size:1.65rem; }
  
  /* CTA row */
  .cta-row{ flex-direction:column; width:100%; }
  .cta-row .btn{ width:100%; max-width:100%; justify-content:center; }
  
  /* Reportes */
  .text-col h3{ font-size:1.3rem; }
  .text-col p{ font-size:.95rem; }
}

/* Ultra-small phones: keep hamburger visible (prevent logo from pushing it out) */
@media (max-width:520px){
  .header-row{ gap:12px; padding:12px 0; }
  .brand{ display:flex; align-items:center; min-width:0; flex:1; }
  .brand-logo{
    width:clamp(140px, 42vw, 220px);
    max-width:clamp(140px, 42vw, 220px);
  }
  .header-tools-mobile{ gap:6px; }
  .nav-toggle{ padding:6px; }
}

  /* Tablas a cards */
  .test-table, .test-table thead, .test-table tbody, .test-table th, .test-table td, .test-table tr{ display:block; width:100%; }
  .test-table thead{ display:none; }
  .test-table tr{ margin-bottom:12px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; padding:8px; box-shadow:0 4px 14px rgba(16,24,40,.05); }
  .test-table td{ border:none; display:flex; justify-content:space-between; gap:10px; padding:8px 6px; text-align:left; }
  .test-table td::before{ content:attr(data-label); font-weight:800; color:var(--muted); flex:1; padding-right:10px; }

  .table-test, .table-test thead, .table-test tbody, .table-test th, .table-test td, .table-test tr{ display:block; width:100%; }
  .table-test thead{ display:none; }
  .table-test tr{ margin-bottom:12px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; padding:8px; box-shadow:0 4px 14px rgba(16,24,40,.05); }
  .table-test td{ border:none; display:flex; justify-content:space-between; gap:10px; padding:8px 6px; text-align:left; }
  .table-test td::before{ content:attr(data-label); font-weight:800; color:var(--muted); flex:1; padding-right:10px; }

  .toolbar{ gap:8px; }
  .search{ flex:1 1 100%; }
}

/* ===========================
   🔬 Utilidades / Alertas
=========================== */
.mt-0{ margin-top:0 !important; }
.mb-0{ margin-bottom:0 !important; }
.mb-1{ margin-bottom:.25rem !important; }
.mb-2{ margin-bottom:.5rem !important; }
.mb-3{ margin-bottom:.75rem !important; }
.text-muted{ color:var(--muted) !important; }
.w-100{ width:100% !important; }

/* Auth: keep "forgot password" readable (black) */
.auth-links{
  display:flex;
  justify-content:flex-start;
  margin-top:10px;
}
.auth-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(248,250,252,.9);
  color:#0f172a !important;
  font-weight:800;
  text-decoration:none;
}
.auth-link:hover{
  background:#fff;
  border-color: rgba(15,98,254,.25);
  box-shadow: 0 10px 22px rgba(16,24,40,.10);
  text-decoration:none;
}
.auth-form .field{ margin-bottom: 12px; }
.auth-form .btn.w-100{ margin-top: 6px; }

.alert{ border-radius:12px; padding:12px 14px; margin:8px 0; }
.alert-success{ background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; }
.alert-danger{ background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }

.card{
  background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:18px;
  transition:transform .15s, box-shadow .2s, border-color .2s;
}
.card:hover{ transform: translateY(-2px); border-color:#dfe7ff; box-shadow:0 10px 26px rgba(16,24,40,.12); }

/* ===========================
   📄 Reportes Profesionales Section (layout alternado)
=========================== */
.reportes-rows{ 
  display:flex; 
  flex-direction:column; 
  gap:56px; 
  margin-top:48px; 
}
.reporte-row{ 
  display:grid; 
  grid-template-columns:1.1fr .9fr; 
  gap:40px; 
  align-items:center; 
}
.reporte-row.reverse{ grid-template-columns:.9fr 1.1fr; }
.reporte-col .media-wrap{ 
  /* Reduce oversized images on desktop */
  aspect-ratio:16/10; 
  height:auto;
  min-height:clamp(240px, 28vw, 380px);
  max-height:420px;
  box-shadow:0 12px 32px rgba(16,24,40,.12);
}
.reporte-col .media-wrap img{
  object-fit:contain;
  width:100%;
  height:100%;
}
.text-col h3{ 
  margin:.1rem 0 1rem; 
  font-size:1.5rem; 
  color:#0f2342;
  font-weight:800;
}
.text-col p{ 
  margin:0 0 1.25rem; 
  color:#4b5563; 
  line-height:1.7;
  font-size:1rem;
}
.bullets{ 
  margin:0; 
  padding-left:0; 
  list-style:none;
}
.bullets li{ 
  padding-left:32px; 
  position:relative;
  margin-bottom:12px;
  color:#374151;
  line-height:1.6;
}
.bullets li::before{
  content:"✓";
  position:absolute;
  left:0;
  color:#16a34a;
  font-weight:900;
  font-size:1.1rem;
}

@media (max-width: 980px){
  .reporte-row,
  .reporte-row.reverse{ 
    grid-template-columns:1fr; 
    gap:32px;
  }
  /* Texto siempre primero en mobile */
  .text-col{ order:1; }
  .media-col{ order:2; }
  .reporte-col .media-wrap{ 
    min-height:220px;
    max-height:360px;
  }
  .reportes-rows{ gap:48px; }
}

/* ===========================
   📋 CERTIFICATE FORMS - 2 COLUMNS + MODERN DESIGN
=========================== */
.cert-form-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 900px;
  padding: 20px;
}

/* Pretty file input (PDF attach) */
.st-file{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  margin:-6px;
}
.st-file > *{
  margin:6px;
}
.st-file__input{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}
.st-file__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}
.st-file__meta{
  min-width: 220px;
  flex: 1 1 220px;
}
.st-file__name{
  display:inline-flex;
  align-items:center;
  padding:10px 12px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#f8fafc;
  color:#334155;
  font-weight:800;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media (min-width: 768px) {
  .cert-form-2col {
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
  }
  
  .cert-form-2col label {
    grid-column: span 1;
    align-self: end;
    font-weight: 600;
    color: #374151;
    font-size: 14px;
    margin-bottom: 6px;
  }
  
  .cert-form-2col input,
  .cert-form-2col select {
    grid-column: span 1;
  }
  
  /* Full width elements */
  .cert-form-2col > div[style*="grid-column"],
  .cert-form-2col button[type="submit"] {
    grid-column: 1 / -1;
  }
}

/* Enhanced date inputs */
input[type="date"],
input[type="datetime-local"],
input[type="time"] {
  position: relative;
  padding: 12px 14px;
  font-size: 15px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  background: linear-gradient(to bottom, #ffffff, #f9fafb);
  color: #1f2937;
  transition: all 0.2s ease;
  cursor: pointer;
  font-family: inherit;
}

input[type="date"]:hover,
input[type="datetime-local"]:hover,
input[type="time"]:hover {
  border-color: #667eea;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}

input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15), 0 2px 8px rgba(102, 126, 234, 0.2);
}

/* Calendar icon enhancement */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(0.5) sepia(1) saturate(5) hue-rotate(220deg);
  transition: filter 0.2s;
  padding: 4px;
  border-radius: 4px;
}

input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator {
  filter: invert(0.4) sepia(1) saturate(6) hue-rotate(220deg);
  background: rgba(102, 126, 234, 0.1);
}

/* Consistent button styles across dashboards */
.btn-primary,
.btn-guardar,
button[type="submit"].btn,
button[type="submit"].btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: .62rem 1.1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--brand-grad);
  color: #fff;
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .1s, box-shadow .2s, filter .2s;
  box-shadow: 0 6px 18px rgba(15,98,254,.25);
  text-decoration: none;
}

.btn-primary:hover,
.btn-guardar:hover,
button[type="submit"].btn:hover {
  filter:saturate(1.08) brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(15,98,254,.35);
}

.btn-primary:active,
.btn-guardar:active,
button[type="submit"].btn:active {
  transform: translateY(0);
}

/* Certificate tabs styling (use standard .btn styles) */
.cert-tabs {
  display: flex;
  gap: 12px;
  margin: 12px 0 20px;
  flex-wrap: wrap;
}

.cert-tabs .btn{
  border-radius: 12px;
}

/* Chips for multi test-type selection */
.cert-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  grid-column: 1 / -1;
}
.cert-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid #c7d2fe;
  background:#eef2ff;
  color:#1e293b;
  font-weight:900;
  font-size:.85rem;
}
.cert-chip__x{
  width:22px; height:22px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
  border:1px solid rgba(30,41,59,.18);
  background:rgba(255,255,255,.85);
  color:#0f172a;
  cursor:pointer;
  line-height:1;
  padding:0;
}
.cert-chip__x:hover{ background:#fff; }
.cert-chip__x:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--ring); }

/* ===========================
   📎 Certificates – Card List (match My Test)
=========================== */
.cert-card-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:12px;
}
.cert-card .mytest-card__title{ white-space:normal; }
.cert-card .mytest-card__subtitle{ white-space:normal; }

/* ===========================
   📱 Step 4 — Mobile Guardblock (UI BLOCKER)
   Purpose: ensure tp-card layout wins over any global table-to-card rules.
=========================== */
@media (max-width:768px){
  #wizard-step4{
    overflow-x: hidden;
  }
  #wizard-step4 #result-container{
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  #wizard-step4 .table-responsive{
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* TP card rows: remove any extra "table card" wrapper padding/banners */
  #wizard-step4 .test-table{
    width: 100% !important;
    max-width: 100% !important;
  }
  #wizard-step4 .test-table tr.tp-card-row{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 0 14px 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #wizard-step4 .test-table tr.tp-card-row td{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }
  #wizard-step4 .test-table tr.tp-card-row td::before{
    display: none !important;
    content: none !important;
  }
  #wizard-step4 .test-table tr.tp-card-row td:first-child{
    background: transparent !important;
    color: inherit !important;
    border-radius: 0 !important;
  }

  /* Card itself must never exceed screen width */
  #wizard-step4 .tp-card{
    width: 100% !important;
    max-width: 100% !important;
  }
}