/* ============================================================
   VALIDA · DESIGN TOKENS — canonical production mirror
   Source of truth for semantic color roles consumed by the portable CSS
   and React adapters. Brand green remains available for marks and
   decorative/large applications; functional UI uses the semantic roles.
   ============================================================ */

@font-face{
  font-family:"Geist Sans";
  src:url("assets/fonts/Geist[wght].woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Geist Mono";
  src:url("assets/fonts/GeistMono[wght].woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root,.light,[data-theme="light"]{
  --font-sans:'Geist Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-mono:'Geist Mono',ui-monospace,SFMono-Regular,'Roboto Mono',Menlo,Monaco,Consolas,monospace;

  /* Superficies (light) */
  --color-surface:#FAFAFA;
  --color-surface-secondary:#F3F4F6;
  --color-surface-elevated:#FFFFFF;
  --color-surface-card:#FFFFFF;
  --color-input-bg:#F9FAFB;
  --color-hover-bg:#F3F4F6;

  /* Bordes (light) */
  --color-border-subtle:#E5E7EB;
  --color-border-default:#D1D5DB;
  --color-border-hover:#9CA3AF;

  /* Texto (light): all functional foregrounds use these roles. */
  --color-text-primary:#111827;
  --color-text-secondary:#475467;
  --color-text-muted:#667085;
  --color-text-hint:#667085;

  /* Marca. `brand-green` is not a small-text/action foreground. */
  --color-brand-navy:#0E3D66;
  --color-brand-green:#2A8F64;
  --color-brand-green-light:#4FB185;
  --color-brand-accent:#2A8F64;
  --color-brand-accent-hover:#247856;
  --color-accent-soft:rgba(42,143,100,.08);
  --color-wordmark:#263247;

  /* Semantic actions, accent text and focus. */
  --color-action-primary:#176B4A;
  --color-action-primary-hover:#145C3F;
  --color-action-primary-foreground:#FFFFFF;
  --color-text-accent:#176B4A;
  --color-focus:#176B4A;
  --color-focus-ring:0 0 0 2px var(--color-focus);
  /* Non-text UI boundaries/indicators (WCAG 2.2 SC 1.4.11). */
  --color-control-border:#8590A2;
  --color-control-border-hover:#667085;
  --color-control-border-selected:#176B4A;
  --color-control-indicator:#667085;
  --color-control-indicator-selected:#176B4A;
  --color-control-invalid:#9A2F2F;
  --color-control-track:#667085;
  --color-control-track-interior:#F3F4F6;
  --color-surface-accent:rgba(42,143,100,.08);
  --color-surface-accent-hover:rgba(42,143,100,.12);
  --color-border-accent:rgba(42,143,100,.3);
  --color-border-accent-strong:#A9D9BF;

  /* Shared component roles. */
  --color-sidebar-group-text:#667085;
  --color-nav-text:#1F2937;
  --color-nav-icon:#667085;
  --color-nav-active-surface:#F3F5F8;
  --color-nav-active-border:#D9E1EC;
  --color-nav-active-text:#111827;
  --color-nav-rail-active:rgba(42,143,100,.35);
  --color-avatar-from:#374151;
  --color-avatar-to:#111827;
  --color-avatar-text:#FFFFFF;
  --color-overlay:rgba(13,16,26,.45);
  --color-detail-surface:#FFFFFF;
  --color-detail-surface-header:#EDF1F6;
  --color-detail-border:#DCE4EF;
  --color-verified-icon:#0E66C5;
  --color-verified-icon-foreground:#FFFFFF;
  /* Categorical chart series are independent from semantic status colors. */
  --color-data-series-1:#176B4A;
  --color-data-series-2:#0E3D66;
  --color-data-series-3:#0C4A5A;
  --color-data-series-4:#5925DC;
  --color-data-series-5:#70521A;
  --color-data-series-6:#334155;
  --shadow-control:0 1px 2px rgba(16,24,40,.05);
  --shadow-modal:0 28px 80px rgba(15,23,42,.28);
  --shadow-toast:0 8px 20px -6px rgba(15,23,42,.16);
  --shadow-card:0 4px 10px rgba(16,24,40,.08);

  /* Semántica de estado (fondos, texto y bordes). */
  --tone-success-bg:#E6F4EE; --tone-success-tx:#247856; --tone-success-bd:#A9D9BF;
  --tone-warning-bg:#FFF8E6; --tone-warning-tx:#70521A; --tone-warning-bd:#E9D7A8;
  --tone-danger-bg:#FFF1F1;  --tone-danger-tx:#9A2F2F;  --tone-danger-bd:#F0B8B8;
  --tone-info-bg:#EEF7FB;    --tone-info-tx:#0C4A5A;    --tone-info-bd:#B8D8E8;
  --tone-neutral-bg:#F1F5F9; --tone-neutral-tx:#334155; --tone-neutral-bd:#E2E8F0;
  --tone-purple-bg:#F4F3FF;  --tone-purple-tx:#5925DC;  --tone-purple-bd:#D9D6FE;

  /* Radios (producción). */
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:14px; --r-full:9999px;
  --r-control:9px;

  /* Closed foundations: keep semantic component CSS free from local values. */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
  --font-size-xs:12px; --font-size-sm:14px; --font-size-md:16px; --font-size-lg:18px; --font-size-xl:24px; --font-size-2xl:32px;
  --font-weight-light:300; --font-weight-regular:400; --font-weight-medium:500; --font-weight-semibold:600;
  --line-height-compact:1.2; --line-height-default:1.5; --line-height-relaxed:1.65;
  --control-compact:36px; --control-default:44px; --control-large:48px; --control-dense-hit-target:40px;
  --shell-sidebar:260px; --shell-sidebar-collapsed:72px; --shell-topbar:64px;
  --z-base:0; --z-sticky:20; --z-navigation:30; --z-modal:40; --z-toast:50;
  --motion-fast:120ms; --motion-default:180ms; --motion-panel:240ms; --motion-easing:ease-out;
  --focus-ring-width:2px; --focus-ring-offset:2px;
}

.dark,[data-theme="dark"]{
  --color-surface:#0C0E14;
  --color-surface-secondary:#111318;
  --color-surface-elevated:#1A1F28;
  --color-surface-card:#141720;
  --color-input-bg:#1C2029;
  --color-hover-bg:#1E2330;

  --color-border-subtle:rgba(255,255,255,.12);
  --color-border-default:rgba(255,255,255,.24);
  --color-border-hover:rgba(255,255,255,.4);

  --color-text-primary:#F0F0F2;
  --color-text-secondary:#B8C1CF;
  --color-text-muted:#A7B0BE;
  --color-text-hint:#8F9BAB;

  --color-brand-navy:#F8FAFC;
  --color-brand-green:#3FB07E;
  --color-brand-green-light:#6FD3A0;
  --color-brand-accent:#6FD3A0;
  --color-brand-accent-hover:#7EE0AB;
  --color-accent-soft:rgba(111,211,160,.12);
  --color-wordmark:#F3F5F8;

  --color-action-primary:#247856;
  --color-action-primary-hover:#176B4A;
  --color-action-primary-foreground:#FFFFFF;
  --color-text-accent:#6FD3A0;
  --color-focus:#86E6B4;
  --color-focus-ring:0 0 0 2px var(--color-focus);
  /* Non-text UI boundaries/indicators (WCAG 2.2 SC 1.4.11). */
  --color-control-border:#667085;
  --color-control-border-hover:#8F9BAB;
  --color-control-border-selected:#2A8F64;
  --color-control-indicator:#8F9BAB;
  --color-control-indicator-selected:#2A8F64;
  --color-control-invalid:#FF9A9A;
  --color-control-track:#8F9BAB;
  --color-control-track-interior:#111318;
  --color-surface-accent:rgba(111,211,160,.16);
  --color-surface-accent-hover:rgba(111,211,160,.24);
  --color-border-accent:rgba(111,211,160,.55);
  --color-border-accent-strong:#6FD3A0;

  --color-sidebar-group-text:#A7B0BE;
  --color-nav-text:#D1D5DB;
  --color-nav-icon:#D1D5DB;
  --color-nav-active-surface:rgba(255,255,255,.08);
  --color-nav-active-border:rgba(255,255,255,.24);
  --color-nav-active-text:#FFFFFF;
  --color-nav-rail-active:rgba(111,211,160,.55);
  --color-avatar-from:#6B7280;
  --color-avatar-to:#1F2937;
  --color-avatar-text:#FFFFFF;
  --color-overlay:rgba(0,0,0,.62);
  --color-detail-surface:#141720;
  --color-detail-surface-header:#1C2029;
  --color-detail-border:rgba(255,255,255,.24);
  --color-verified-icon:#58A6FF;
  --color-verified-icon-foreground:#0C0E14;
  --color-data-series-1:#8AE3B5;
  --color-data-series-2:#58A6FF;
  --color-data-series-3:#8FC0E6;
  --color-data-series-4:#C4B5FD;
  --color-data-series-5:#F8C46A;
  --color-data-series-6:#C2CAD6;
  --shadow-control:0 1px 2px rgba(0,0,0,.22);
  --shadow-modal:0 28px 80px rgba(0,0,0,.55);
  --shadow-toast:0 8px 20px -6px rgba(0,0,0,.45);
  --shadow-card:0 4px 10px rgba(0,0,0,.32);

  --tone-success-bg:#153A2B; --tone-success-tx:#8AE3B5; --tone-success-bd:#3C8C68;
  --tone-warning-bg:#3B2A0E; --tone-warning-tx:#F8C46A; --tone-warning-bd:#A97822;
  --tone-danger-bg:#421C21;  --tone-danger-tx:#FF9A9A;  --tone-danger-bd:#B95058;
  --tone-info-bg:#12313B;    --tone-info-tx:#8FC0E6;    --tone-info-bd:#4E8CA8;
  --tone-neutral-bg:#252D39; --tone-neutral-tx:#C2CAD6; --tone-neutral-bd:#64748B;
  --tone-purple-bg:#2E2457;  --tone-purple-tx:#C4B5FD;  --tone-purple-bd:#7564CA;
}


/* Combined portable VALIDA stylesheet. */

/* ============================================================
   VALIDA · COMPONENTES — portable canonical CSS.
   Functional colors are semantic token references. Brand green is reserved
   for marks/decorative use; action and status foregrounds use AA roles.
   ============================================================ */

body{
  margin:0; font-family:var(--font-sans); color:var(--color-text-primary);
  background:var(--color-surface); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.v-mono{font-family:var(--font-mono)}

/* ---------- Botones ---------- */
.v-btn{font-family:var(--font-sans);font-weight:400;font-size:13px;border-radius:var(--r-control);padding:0 14px;min-height:var(--control-default);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;transition:background var(--motion-default) var(--motion-easing),border-color var(--motion-default) var(--motion-easing),box-shadow var(--motion-default) var(--motion-easing)}
.v-btn--primary{background:var(--color-action-primary);border-color:var(--color-action-primary);color:var(--color-action-primary-foreground)!important}
.v-btn--primary:hover{background:var(--color-action-primary-hover);border-color:var(--color-action-primary-hover)}
.v-btn--secondary{background:var(--color-surface-elevated);border-color:var(--color-control-border);box-shadow:var(--shadow-control);color:var(--color-text-secondary)}
.v-btn--secondary:hover{background:var(--color-hover-bg);border-color:var(--color-control-border-hover)}
.v-btn--ghost{background:transparent;color:var(--color-text-accent);padding:0 8px}
.v-btn[disabled]{opacity:.6;cursor:not-allowed}

/* ---------- Inputs ---------- */
.v-label{font-size:12px;font-weight:500;color:var(--color-text-secondary);margin-bottom:8px;display:block}
.v-input{display:block;min-height:var(--control-default);width:100%;font-family:var(--font-sans);font-size:14px;padding:10px 14px;border:1px solid var(--color-control-border);border-radius:var(--r-control);background:var(--color-input-bg);box-shadow:var(--shadow-control);color:var(--color-text-primary);outline:none;transition:box-shadow var(--motion-default) var(--motion-easing),border-color var(--motion-default) var(--motion-easing)}
.v-input::placeholder{color:var(--color-text-muted)}
.v-input:hover:not(:disabled){border-color:var(--color-control-border-hover)}
.v-input:focus{box-shadow:var(--color-focus-ring);border-color:var(--color-focus)}
.v-input[aria-invalid="true"]{border-color:var(--color-control-invalid)}
.v-hint{font-size:12px;color:var(--color-text-muted);margin-top:8px;line-height:1.5}

/* ---------- Badges de estado (pill con borde) ---------- */
.v-badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;border:1px solid transparent;padding:4px 11px;font-size:12px;font-weight:600;line-height:1.4}
.v-badge--sm{padding:3px 10px;font-size:11px}
.v-badge--success{background:var(--tone-success-bg);color:var(--tone-success-tx);border-color:var(--tone-success-bd)}
.v-badge--warning{background:var(--tone-warning-bg);color:var(--tone-warning-tx);border-color:var(--tone-warning-bd)}
.v-badge--danger{background:var(--tone-danger-bg);color:var(--tone-danger-tx);border-color:var(--tone-danger-bd)}
.v-badge--info{background:var(--tone-info-bg);color:var(--tone-info-tx);border-color:var(--tone-info-bd)}
.v-badge--neutral{background:var(--tone-neutral-bg);color:var(--tone-neutral-tx);border-color:var(--tone-neutral-bd)}
.v-badge--purple{background:var(--tone-purple-bg);color:var(--tone-purple-tx);border-color:var(--tone-purple-bd)}

/* ---------- Card ---------- */
.v-card{background:var(--color-surface-card);border:1px solid var(--color-border-subtle);border-radius:12px}

/* ---------- Sidebar (blanco, 3 zonas) ---------- */
.v-sidebar{width:var(--shell-sidebar);background:var(--color-surface-card);border-right:1px solid var(--color-border-subtle);display:flex;flex-direction:column;font-family:var(--font-sans)}
.v-sidebar__head{height:var(--shell-topbar);display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 18px;border-bottom:1px solid var(--color-border-subtle)}
.v-sidebar__group{font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--color-sidebar-group-text);padding:0 12px 8px}
.v-sidebar__zone{padding:0 12px}
.v-sidebar__divider{height:1px;background:var(--color-border-subtle);margin:10px 0}
.v-navitem{display:flex;align-items:center;gap:10px;min-height:40px;padding:8px 12px;border-radius:8px;border:1px solid transparent;font-size:14px;font-weight:300;color:var(--color-nav-text);cursor:pointer;text-align:left;width:100%;background:transparent}
.v-navitem > svg,.v-navitem .v-navitem__ic{color:var(--color-nav-icon);display:flex;flex-shrink:0}
.v-navitem:hover{color:var(--color-text-accent)}
.v-navitem:hover .v-navitem__ic{color:var(--color-text-accent)}
.v-navitem.is-active{background:var(--color-nav-active-surface);border-color:var(--color-nav-active-border);color:var(--color-nav-active-text);font-weight:400;cursor:default}
.v-navitem.is-active .v-navitem__ic{color:var(--color-text-accent)}
.v-navchildren{position:relative;margin-left:24px;padding-left:8px}
.v-navchildren__rail{position:absolute;left:0;top:4px;bottom:4px;width:1px;background:var(--color-border-subtle)}
.v-navchildren__rail.is-active{background:var(--color-nav-rail-active)}

/* ---------- Topbar (aligned to the sidebar header) ---------- */
.v-topbar{height:var(--shell-topbar);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 24px;background:var(--color-surface-card);border-bottom:1px solid var(--color-border-subtle)}
.v-crumbs{display:flex;align-items:center;gap:8px;font-size:14px}
.v-crumbs__sep{color:var(--color-text-muted)}
.v-crumbs__muted{color:var(--color-text-secondary)}
.v-crumbs__active{color:var(--color-text-primary);font-weight:500}
.v-search{display:flex;align-items:center;gap:8px;min-height:var(--control-default);background:var(--color-input-bg);border:1px solid var(--color-control-border);border-radius:var(--r-control);box-shadow:var(--shadow-control);padding:8px 14px;color:var(--color-text-secondary);font-size:14px;cursor:pointer}
.v-search:hover{border-color:var(--color-control-border-hover)}
.v-kbd{font-family:var(--font-mono);font-size:11px;background:var(--color-border-subtle);border-radius:4px;padding:1px 6px;color:var(--color-text-secondary)}
.v-iconbtn{width:var(--control-default);height:var(--control-default);border-radius:var(--r-control);display:grid;place-items:center;color:var(--color-text-secondary);border:1px solid transparent;background:transparent;cursor:pointer}
.v-iconbtn--bordered{border-color:var(--color-control-border);box-shadow:var(--shadow-control)}
.v-iconbtn--bordered:hover{border-color:var(--color-control-border-hover)}
.v-avatar{width:32px;height:32px;border-radius:9999px;background:linear-gradient(135deg,var(--color-avatar-from),var(--color-avatar-to));display:grid;place-items:center;color:var(--color-avatar-text);font-size:13px;font-weight:600}

/* ---------- Tabla (registry) ---------- */
.v-table-card{background:var(--color-surface-card);border:1px solid var(--color-border-subtle);border-radius:12px;overflow:hidden}
.v-table-toolbar{padding:16px;border-bottom:1px solid var(--color-border-subtle);display:flex;align-items:center;gap:12px}
.v-table-search{position:relative;flex:1}
.v-table-search input{min-height:var(--control-default);width:100%;border:1px solid var(--color-control-border);background:var(--color-input-bg);border-radius:var(--r-control);box-shadow:var(--shadow-control);padding:10px 16px 10px 40px;font-size:14px;color:var(--color-text-primary);font-family:inherit;outline:none}
.v-table-search input:hover:not(:disabled){border-color:var(--color-control-border-hover)}
.v-table-search input:focus{box-shadow:var(--color-focus-ring);border-color:var(--color-focus)}
.v-filter-btn{display:inline-flex;align-items:center;gap:8px;min-height:var(--control-default);border:1px solid var(--color-control-border);background:var(--color-input-bg);box-shadow:var(--shadow-control);color:var(--color-text-secondary);border-radius:var(--r-control);padding:10px 16px;font-size:14px;font-weight:500;cursor:pointer}
.v-filter-btn:hover{border-color:var(--color-control-border-hover)}
.v-filter-btn.is-active{border-color:var(--color-control-border-selected);background:var(--color-surface-accent);color:var(--color-text-accent)}
.v-table{width:100%;border-collapse:collapse}
.v-table thead tr{background:var(--color-input-bg)}
.v-table th{padding:12px 16px;font-size:12px;font-weight:600;color:var(--color-text-secondary);text-align:left}
.v-table th.is-center{text-align:center}
.v-table td{padding:14px 16px;font-size:14px;color:var(--color-text-primary);border-top:1px solid var(--color-surface-secondary)}
.v-table tbody tr{cursor:pointer}
.v-table tbody tr:hover{background:var(--color-input-bg)}
.v-cell-icon{width:32px;height:32px;border-radius:8px;background:var(--color-surface-accent);display:grid;place-items:center;flex:none;color:var(--color-text-accent)}
.v-table-foot{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--color-border-subtle);font-size:13px;color:var(--color-text-secondary)}

/* ---------- Empty state ---------- */
.v-empty{background:var(--color-surface-card);border:1px solid var(--color-border-subtle);border-radius:12px;padding:44px;text-align:center}
.v-empty__t{font-size:16px;font-weight:600;color:var(--color-text-primary);margin-top:16px}
.v-empty__p{font-size:13.5px;color:var(--color-text-secondary);margin:6px 0 18px;line-height:1.55}

/* ---------- Wizard / stepper ---------- */
.v-stepper{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.v-step{display:flex;align-items:center;gap:11px;border:1px solid var(--color-control-border);border-radius:12px;padding:11px 14px;background:var(--color-surface-card)}
.v-step__i{width:26px;height:26px;border-radius:9px;background:var(--color-input-bg);color:var(--color-text-muted);display:grid;place-items:center;font-size:12px;font-weight:600;border:1px solid var(--color-control-border)}
.v-step.is-active{border-color:var(--color-control-border-selected);background:var(--color-surface-accent)}
.v-step.is-active .v-step__i{background:var(--color-control-indicator-selected);color:var(--color-action-primary-foreground);border-color:var(--color-control-indicator-selected)}
.v-step.is-done .v-step__i{background:var(--color-surface-accent);color:var(--color-action-primary-hover);border-color:var(--color-control-border-selected)}
.v-progress{box-sizing:border-box;width:150px;height:6px;border:1px solid var(--color-control-track);border-radius:9999px;background:var(--color-control-track-interior);overflow:hidden}
.v-progress > span{display:block;height:100%;border-radius:inherit;background:var(--color-control-indicator-selected)}

/* ---------- View modal (DetailModalScaffold) ---------- */
.v-modal-backdrop{position:fixed;inset:0;background:var(--color-overlay);display:flex;align-items:center;justify-content:center;padding:28px;z-index:var(--z-modal)}
.v-modal{width:100%;max-width:900px;background:var(--color-surface-card);border:1px solid var(--color-border-subtle);border-radius:14px;box-shadow:var(--shadow-modal);overflow:hidden}
.v-modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;border-bottom:1px solid var(--color-border-subtle);padding:20px 24px}
.v-modal__kicker{margin:0 0 6px;font-size:12px;color:var(--color-text-secondary)}
.v-modal__title{margin:0;font-size:20px;font-weight:500;color:var(--color-text-primary);display:inline-flex;align-items:center;gap:6px}
.v-verified{width:15px;height:15px;flex:none;border-radius:9999px;background:var(--color-verified-icon);display:inline-flex;align-items:center;justify-content:center}
.v-verified::after{content:"";display:block;width:4px;height:7px;transform:translateY(-.5px) rotate(45deg);border-right:1.5px solid var(--color-verified-icon-foreground);border-bottom:1.5px solid var(--color-verified-icon-foreground)}
.v-mtag{display:inline-flex;align-items:center;min-height:24px;border-radius:6px;border:1px solid var(--color-border-default);background:var(--color-surface-card);color:var(--color-text-secondary);padding:0 10px;font-size:11px}
.v-mtag--success{border-color:var(--tone-success-bd);background:var(--tone-success-bg);color:var(--tone-success-tx)}
.v-mtag--warning{border-color:var(--tone-warning-bd);background:var(--tone-warning-bg);color:var(--tone-warning-tx)}
.v-modal__tabs{margin:16px 24px;display:flex;gap:4px;flex-wrap:wrap;border:1px solid var(--color-control-border);background:var(--color-surface-card);border-radius:12px;padding:4px}
.v-mtab{min-height:40px;display:inline-flex;align-items:center;border-radius:9px;padding:0 12px;font-size:12.5px;color:var(--color-text-secondary);cursor:pointer;background:transparent;border:none}
.v-mtab:hover{background:var(--color-surface-accent-hover);color:var(--color-text-accent)}
.v-mtab.is-active{background:var(--color-action-primary);color:var(--color-action-primary-foreground)}
.v-modal__body{padding:20px 24px 24px;display:grid;gap:20px}
.v-detail-surface{overflow:hidden;border-radius:12px;border:1px solid var(--color-detail-border);background:var(--color-detail-surface)}
.v-detail-surface__head{border-bottom:1px solid var(--color-detail-border);background:var(--color-detail-surface-header);padding:12px 16px}
.v-detail-surface__head h2{margin:0;font-size:14px;font-weight:500;color:var(--color-text-primary)}
.v-detail-surface__head p{margin:4px 0 0;font-size:12px;color:var(--color-text-secondary);font-weight:300}
.v-field-grid{padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.v-field{border:1px solid var(--color-detail-border);border-radius:8px;background:var(--color-detail-surface);padding:10px 12px}
.v-field span{display:block;font-size:11px;color:var(--color-text-secondary);font-weight:300}
.v-field strong{display:block;margin-top:4px;font-size:13px;font-weight:400;color:var(--color-text-primary)}
.v-modal__foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--color-border-subtle);padding:14px 24px;font-size:11px;color:var(--color-text-secondary);font-weight:300}

/* ---------- Alertas / notas (ajustadas al contenido) ---------- */
.v-note{display:inline-flex;gap:12px;align-items:flex-start;max-width:480px;background:var(--color-surface-secondary);border:1px solid var(--color-border-subtle);border-radius:14px;padding:13px 15px}
.v-note__ic{width:32px;height:32px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center}
.v-note__t{font-size:13.5px;font-weight:600;color:var(--color-text-primary)}
.v-note__d{font-size:12.5px;color:var(--color-text-secondary);margin-top:2px;line-height:1.5}
.v-note--success .v-note__ic{background:var(--tone-success-bg);color:var(--tone-success-tx)}
.v-note--info .v-note__ic{background:var(--tone-info-bg);color:var(--tone-info-tx)}
.v-note--warning .v-note__ic{background:var(--tone-warning-bg);color:var(--tone-warning-tx)}
.v-note--danger .v-note__ic{background:var(--tone-danger-bg);color:var(--tone-danger-tx)}

/* ---------- Toast (ajustado al largo del texto, sin barra) ---------- */
.v-toast{display:inline-flex;gap:10px;align-items:flex-start;max-width:360px;background:var(--color-surface-card);border:1px solid var(--color-border-subtle);border-radius:12px;padding:11px 12px;box-shadow:var(--shadow-toast)}
.v-toast__ic{width:28px;height:28px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center}
.v-toast__t{font-size:13px;font-weight:600;color:var(--color-text-primary)}
.v-toast__d{font-size:12px;color:var(--color-text-secondary);margin-top:1px;line-height:1.45}
.v-toast__x{width:40px;height:40px;padding:0;border:1px solid var(--color-border-subtle);border-radius:var(--r-full);background:var(--color-surface-secondary);box-shadow:var(--shadow-control);flex:none;display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);margin:-4px -2px -4px 6px;cursor:pointer}
.v-toast__x:hover{border-color:var(--color-control-border-hover);background:var(--color-surface-accent);color:var(--color-text-accent)}
.v-toast__x:focus-visible{outline:none;box-shadow:var(--color-focus-ring)}
.v-toast--success .v-toast__ic{background:var(--tone-success-bg);color:var(--tone-success-tx)}
.v-toast--warning .v-toast__ic{background:var(--tone-warning-bg);color:var(--tone-warning-tx)}
.v-toast--danger .v-toast__ic{background:var(--tone-danger-bg);color:var(--tone-danger-tx)}
.v-toast--info .v-toast__ic{background:var(--tone-info-bg);color:var(--tone-info-tx)}
.v-toast--neutral .v-toast__ic{background:var(--tone-neutral-bg);color:var(--tone-neutral-tx)}

/* ---------- Diálogo de confirmación ---------- */
.v-dialog{width:100%;max-width:420px;background:var(--color-surface-card);border:1px solid var(--color-border-subtle);border-radius:14px;box-shadow:var(--shadow-modal);padding:22px}
.v-dialog__eyebrow{color:var(--color-text-accent);font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.v-dialog__title{font-size:17px;font-weight:600;color:var(--color-text-primary);margin:6px 0 8px}
.v-dialog__body{font-size:13.5px;color:var(--color-text-secondary);line-height:1.55}
.v-dialog__actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}

/* ---------- Iconography contract ---------- */
.v-icon,.valida-icon{width:18px;height:18px;display:inline-block;flex:none;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}

/* ---------- System-wide accessibility contract ---------- */
:where(button, [href], input, select, textarea, [tabindex]):focus-visible{
  outline:none;
  box-shadow:var(--color-focus-ring);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }
}

/* In forced-color environments the user agent's system palette is the source
 * of truth. These rules preserve boundaries, focus and selected state without
 * depending on VALIDA brand colors. */
@media (forced-colors:active){
  :where(.v-btn,.v-input,.v-select,.v-check,.v-radio,.v-switch,.v-dialog,.v-modal,.v-note,.v-toast,.v-table-wrap,.v-empty,.v-navitem,.v-mtab){
    border-color:CanvasText;
    box-shadow:none;
    forced-color-adjust:auto;
  }
  :where(button,[href],input,select,textarea,[tabindex]):focus-visible{
    outline:2px solid Highlight;
    outline-offset:2px;
    box-shadow:none;
  }
  :where([aria-current="page"],[aria-selected="true"],[aria-checked="true"],.is-active,.is-selected){
    outline:2px solid Highlight;
    outline-offset:-2px;
  }
  :where(:disabled,[aria-disabled="true"],.is-disabled){
    border-color:GrayText;
    color:GrayText;
  }
  :where(.v-progress>span,.v-switch__thumb,.v-step.is-active .v-step__i){
    background:Highlight;
    forced-color-adjust:none;
  }
  :where(.v-note,.v-toast,.v-empty){
    border:1px solid currentColor;
  }
}

/* Approved refinement, 2026-09-04. This is an adoption boundary, not a theme.
   No inherited token/font overrides: a preserved Flow subtree keeps its baseline.
   Keep .valida-preserve on a consumer's WHOLE Flow route (canvas + controls).
   ValidaFlowList is also excluded automatically, including its action slots.
   Portaled VALIDA components carry the same boundary through useValidaThemeScope.
*/
:is(.valida-refined, .valida-refined *):is(.valida-button, .valida-badge, .valida-tag, .v-btn, .v-badge, .v-tag):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
  font-weight: var(--font-weight-medium);
}
:is(.valida-refined, .valida-refined *):is(.valida-button, .v-btn, .valida-field__input, .v-input, .v-select, .valida-combobox__input):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
  min-height: var(--control-default);
  font-size: var(--font-size-sm);
  border-radius: var(--r-control);
}
:is(.valida-refined, .valida-refined *):is(.valida-page-title, [data-valida-type="page-title"]):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-compact);
}
:is(.valida-refined, .valida-refined *):is(.valida-section-title, [data-valida-type="section-title"]):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-compact);
}
:is(.valida-refined, .valida-refined *):is(.valida-card h2, .valida-dialog__title, .valida-drawer__title, .valida-view-modal__title):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-compact);
}
:is(.valida-refined, .valida-refined *):is(.valida-prose, [data-valida-type="reading"]):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
}

/* Functional boundaries must remain visible; subtle borders are for surfaces.
   Auth keeps its approved composition, mark and navy-to-green gradient. */
:is(.valida-refined, .valida-refined *):is(.valida-auth-form .valida-field__input):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
  border: 1px solid var(--color-control-border);
}

:is(.valida-refined, .valida-refined *):is(.valida-auth-form .valida-field__input:focus-visible):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
  box-shadow: var(--color-focus-ring);
  outline: none;
}

:is(.valida-refined, .valida-refined *):is(.valida-auth-form .valida-field.is-invalid .valida-field__input):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
  border-color: var(--color-control-invalid);
}

:is(.valida-refined, .valida-refined *):is(.valida-auth-form__submit):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
  min-width: 0;
  min-height: var(--control-dense-hit-target);
  border-radius: var(--r-control);
  /* Bulk/Vouchers login reference: web/styles/base.css + portable .v-btn. */
  font-size: 13px;
  box-shadow: var(--shadow-control);
  overflow-wrap: anywhere;
}

:is(.valida-refined, .valida-refined *):is(.valida-auth-form__submit:hover:not(:disabled, :focus-visible)):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
  box-shadow: var(--shadow-control);
}

:is(.valida-refined, .valida-refined *):is(.valida-auth-form__submit:focus-visible):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
  box-shadow: var(--color-focus-ring);
}

:is(.valida-refined, .valida-refined *):is(.valida-auth-shell, .valida-auth-card, .valida-auth-form, .valida-auth-form .valida-field, .valida-auth-form .valida-field__input, .valida-auth-form__submit):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
  box-sizing: border-box;
  min-width: 0;
}

:is(.valida-refined, .valida-refined *):is(.valida-auth-card):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
  padding: clamp(var(--space-4), 6%, var(--space-8));
}

:is(.valida-refined, .valida-refined *):is(.valida-auth-card__brand):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
  flex-wrap: wrap;
  gap: var(--space-2);
}

:is(.valida-refined, .valida-refined *):is(.valida-auth-card__lockup .valida-brand-lockup):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
  max-width: 100%;
  font-size: var(--font-size-md);
}

:is(.valida-refined, .valida-refined *):is(.valida-auth-card__lockup .valida-brand-lockup__mark):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
  height: var(--space-5);
}

:is(.valida-refined, .valida-refined *):is(.valida-auth-card__lockup .valida-brand-lockup__product):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

:is(.valida-refined, .valida-refined *):is(.valida-auth-form__submit-content, .valida-auth-form__submit-brand):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
}

:is(.valida-refined, .valida-refined *):is(.valida-auth-form__submit-mark):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
  height: 18px;
}

@media (max-width: 480px), (pointer: coarse) {
  :is(.valida-refined, .valida-refined *):is(.valida-auth-form__submit):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
    min-height: var(--control-default);
  }
}

/* Short feedback hugs its content; long text wraps within the containing surface.
   React and portable recipes share the same spacing and dismiss target. */
:is(.valida-refined, .valida-refined *):is(.valida-alert, .valida-toast, .v-note, .v-toast):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
  box-sizing: border-box;
  display: inline-flex;
  align-items: flex-start;
  align-self: start;
  justify-self: start;
  width: fit-content;
  min-width: 0;
  max-width: min(100%, 360px);
  min-height: 0;
  height: auto;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-lg);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-default);
  overflow-wrap: anywhere;
}

:is(.valida-refined, .valida-refined *):is(.valida-alert > div, .valida-toast__content, .v-note > :not(.v-note__ic), .v-toast > :not(.v-toast__ic, .v-toast__x)):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
  flex: 1 1 auto;
  min-width: 0;
}

:is(.valida-refined, .valida-refined *):is(.valida-alert strong, .valida-toast__content > strong, .v-note__t, .v-toast__t):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-compact);
}

:is(.valida-refined, .valida-refined *):is(.valida-toast__content > div:not(.valida-toast__action), .v-note__d, .v-toast__d):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
  display: block;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-default);
}

:is(.valida-refined, .valida-refined *):is(.valida-alert__symbol):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
  flex: none;
}

:is(.valida-refined, .valida-refined *):is(.valida-toast__icon, .v-note__ic, .v-toast__ic, .valida-notification-row__icon):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
  flex: none;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--r-md);
}

:is(.valida-refined, .valida-refined *):is(.valida-toast__dismiss, .v-toast__x):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
  flex: none;
  width: var(--control-default);
  height: var(--control-default);
  min-width: var(--control-default);
  min-height: var(--control-default);
  margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-1)) calc(-1 * var(--space-1)) 0;
}

/* Notification-center rows keep their container width and readable full text. */
:is(.valida-refined, .valida-refined *):is(.valida-notification-row):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
  box-sizing: border-box;
  min-width: 0;
  min-height: var(--control-default);
  gap: var(--space-2);
  padding: var(--space-2);
}

:is(.valida-refined, .valida-refined *):is(.valida-notification-row__title):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
}

:is(.valida-refined, .valida-refined *):is(.valida-notification-row__meta):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
  max-width: 8ch;
  overflow-wrap: anywhere;
}

/* Boolean controls retain their glyphs and a 44px label target without wide cards. */
:is(.valida-refined, .valida-refined *):is(.valida-choice-field, .valida-radio-group, .valida-checkbox-group, .valida-switch-wrap):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
  width: fit-content;
  min-width: 0;
  max-width: min(100%, 360px);
  justify-self: start;
  overflow-wrap: anywhere;
}

:is(.valida-refined, .valida-refined *):is(.valida-choice):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
  align-items: center;
  min-height: var(--control-default);
  gap: var(--space-2);
}

:is(.valida-refined, .valida-refined *):is(.valida-checkbox-option):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
  min-width: 0;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
}

:is(.valida-refined, .valida-refined *):is(.valida-switch-wrap > span:last-child):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
  min-width: 0;
}

/* Icon-only controls keep their glyph size, with a 44px pointer/keyboard target. */
:is(.valida-refined, .valida-refined *):is(.v-iconbtn, .valida-dialog__close, .valida-drawer__close, .valida-view-modal__close,
    .valida-command__close, .valida-toast__dismiss, .valida-app-shell__collapse):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
  min-width: var(--control-default);
  min-height: var(--control-default);
}

/* Remove decoration only, not semantic status backgrounds or action affordances. */
:is(.valida-refined, .valida-refined *):is(.valida-quick-action__icon):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
  background: transparent;
  border-radius: 0;
}

:is(.valida-refined, .valida-refined *):is(.valida-view-modal__body > .valida-card):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

/* No brand/palette replacement. Existing gray navigation and semantic greens
   remain authoritative. Only transform/opacity interpolate; states stay instant. */
:is(.valida-refined, .valida-refined *):is(.valida-button, .v-btn, .valida-auth-form__provider, .valida-quick-action,
    .valida-notification-row, .valida-switch__thumb):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
  transition: transform var(--motion-fast) var(--motion-easing), opacity var(--motion-fast) var(--motion-easing);
}

:is(.valida-refined, .valida-refined *):is(.valida-dialog, .valida-drawer, .valida-view-modal, .valida-popover,
    .valida-dropdown, .valida-tooltip, .valida-combobox__popup):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
  transition: transform var(--motion-default) var(--motion-easing), opacity var(--motion-default) var(--motion-easing);
}

:is(.valida-refined, .valida-refined *):is(.valida-app-shell, .valida-progress__fill):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
  transition: none;
}

@media (prefers-reduced-motion:reduce) {:is(.valida-refined, .valida-refined *):not(.valida-preserve, .valida-preserve *, .valida-flow-list, .valida-flow-list *) {
    animation: none !important;
    transition: none !important;
  }
}


/* Canonical VALIDA React component styles. */

/* The third-party card renderer is scoped and restyled below with VALIDA tokens. */
/* crd-ui@0.13.0 styles inlined for portable VALIDA consumers. */
/* crd-ui — card visualization styles.
   Customize via the custom properties below; brand themes via .crd--brand-*. */

/* The public knobs (--crd-*) are never declared on .crd itself — they are only
   read, with the default supplied as the var() fallback. A declaration here
   would beat any inherited value, so this is what lets a knob set anywhere
   (an ancestor, a utility class, an inline style) actually reach the card.
   Brand and variant themes feed the private --_crd-*-theme slots instead, so
   a user value still takes precedence over them. */
.crd {
  --_crd-width: var(--crd-width, 290px);
  --_crd-radius: var(--crd-radius, 14px);
  --_crd-font: var(--crd-font, 'Avenir Next', 'Segoe UI', ui-sans-serif, sans-serif);
  --_crd-color: var(--crd-color, var(--_crd-color-theme, #fff));
  --_crd-bg: var(--crd-bg, var(--_crd-bg-theme, linear-gradient(135deg, #43464b, #1e2126)));
  --_crd-shadow: var(--crd-shadow, 0 8px 24px rgba(0, 0, 0, 0.28));
  --_crd-flip-duration: var(--crd-flip-duration, 0.75s);

  width: var(--_crd-width);
  aspect-ratio: 1.586; /* ISO/IEC 7810 ID-1 */
  perspective: 1000px;
  font-family: var(--_crd-font);
  color: var(--_crd-color);
}

/* Brand themes */
.crd--brand-visa      { --_crd-bg-theme: linear-gradient(135deg, #0f509e, #1399cd); }
.crd--brand-mastercard{ --_crd-bg-theme: linear-gradient(135deg, #354057, #191c22); }
.crd--brand-amex      { --_crd-bg-theme: linear-gradient(135deg, #106d90, #4ba6c3); }
.crd--brand-discover  { --_crd-bg-theme: linear-gradient(135deg, #d05e28, #f2a33c); }
.crd--brand-dinersclub{ --_crd-bg-theme: linear-gradient(135deg, #33526f, #6f9ab8); }
.crd--brand-jcb       { --_crd-bg-theme: linear-gradient(135deg, #1d6b48, #37a26a); }
.crd--brand-unionpay  { --_crd-bg-theme: linear-gradient(135deg, #274b70, #b23a48); }
.crd--brand-maestro   { --_crd-bg-theme: linear-gradient(135deg, #45327a, #7a5fb8); }
.crd--brand-elo       { --_crd-bg-theme: linear-gradient(135deg, #2d2d2d, #565656); }
.crd--brand-hipercard { --_crd-bg-theme: linear-gradient(135deg, #8a1a2b, #c34a5a); }

/* ---- Variants ----
   Brand-agnostic finishes selected via the `variant` option; they override
   the per-brand gradient (the brand still shows through its logo). Layered
   CSS gradients + an SVG grain layer, no external assets. */

.crd {
  --crd-noise-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  --crd-noise-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Ember: warm grainy bloom over a dark crown, number on a dark band,
   light lower body. */
.crd--v-ember {
  --_crd-color-theme: #17181c;
  --_crd-bg-theme:
    var(--crd-noise-light),
    linear-gradient(180deg, rgba(10, 10, 12, 0.95) 0%, rgba(26, 19, 10, 0.85) 16%, rgba(140, 95, 30, 0.32) 32%, transparent 50%),
    radial-gradient(90% 46% at 50% 24%, rgba(255, 176, 64, 0.6), rgba(255, 150, 40, 0.14) 58%, transparent 74%),
    linear-gradient(180deg, transparent 37%, #101013 37%, #101013 61%, transparent 61%),
    linear-gradient(180deg, #d9d6d0 0%, #f0efeb 100%);
}

.crd--v-ember .crd__number {
  color: #f5f5f2;
}

.crd--v-ember .crd__logo {
  color: #f2f2ef;
}

/* The back logo sits on the light lower body, not the dark crown. */
.crd--v-ember .crd__logo--back {
  color: #17181c;
}

.crd--v-ember .crd__name,
.crd--v-ember .crd__expiry {
  text-shadow: none;
}

.crd--v-ember .crd__ring {
  box-shadow: 0 0 0 1.5px rgba(255, 165, 60, 0.9);
}

/* Holo: iridescent interference over near-black — two offset ripple fields
   crossing over soft color blooms. */
.crd--v-holo {
  --_crd-color-theme: #f4f4f6;
  --_crd-bg-theme:
    var(--crd-noise-light),
    repeating-radial-gradient(circle at 18% 30%, rgba(255, 255, 255, 0.1) 0 1.5px, transparent 1.5px 5px),
    repeating-radial-gradient(circle at 82% 70%, rgba(255, 255, 255, 0.08) 0 1.5px, transparent 1.5px 6px),
    radial-gradient(75% 90% at 22% 24%, rgba(64, 224, 208, 0.5), transparent 60%),
    radial-gradient(70% 80% at 78% 30%, rgba(186, 120, 255, 0.45), transparent 60%),
    radial-gradient(80% 90% at 60% 85%, rgba(255, 230, 120, 0.35), transparent 60%),
    radial-gradient(70% 80% at 20% 80%, rgba(90, 160, 255, 0.4), transparent 60%),
    linear-gradient(160deg, #16161c, #101014);
}

/* Porcelain: near-white with faint pastel washes, dark type. */
.crd--v-porcelain {
  --_crd-color-theme: #1d1d1f;
  --_crd-bg-theme:
    var(--crd-noise-dark),
    radial-gradient(60% 70% at 12% 88%, rgba(255, 205, 120, 0.35), transparent 65%),
    radial-gradient(55% 65% at 45% 65%, rgba(255, 140, 160, 0.22), transparent 65%),
    radial-gradient(60% 75% at 88% 45%, rgba(130, 160, 255, 0.28), transparent 65%),
    linear-gradient(180deg, #fbfafa, #f2f1f3);
}

.crd--v-porcelain .crd__number,
.crd--v-porcelain .crd__name,
.crd--v-porcelain .crd__expiry {
  text-shadow: none;
}

.crd--v-porcelain .crd__ring {
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.45);
}

/* Sunset (default): blooms on cream, name on a dark base band. The bloom
   palette adapts to the detected brand via the custom properties below. */
.crd--v-sunset {
  --_crd-color-theme: #17171a;
  --crd-sunset-a: rgba(255, 170, 40, 0.75);
  --crd-sunset-b: rgba(70, 190, 255, 0.65);
  --crd-sunset-c: rgba(255, 120, 190, 0.5);
  --crd-sunset-ring: rgba(255, 140, 0, 0.9);
  --_crd-bg-theme:
    var(--crd-noise-light),
    linear-gradient(180deg, transparent 64%, #131316 64%),
    radial-gradient(55% 60% at 38% 34%, var(--crd-sunset-a), transparent 68%),
    radial-gradient(50% 65% at 78% 38%, var(--crd-sunset-b), transparent 66%),
    radial-gradient(45% 55% at 85% 78%, var(--crd-sunset-c), transparent 65%),
    linear-gradient(180deg, #f6efe4, #f1eae2);
}

.crd--v-sunset .crd__number {
  text-shadow: none;
}

.crd--v-sunset .crd__name,
.crd--v-sunset .crd__expiry {
  color: #f4f4f2;
}

/* The back logo sits on the dark base band. */
.crd--v-sunset .crd__logo--back {
  color: #f4f4f2;
}

.crd--v-sunset .crd__ring {
  box-shadow: 0 0 0 1.5px var(--crd-sunset-ring);
}

/* Brand-tinted sunset blooms */
.crd--v-sunset.crd--brand-visa {
  --crd-sunset-a: rgba(35, 95, 220, 0.6);
  --crd-sunset-b: rgba(95, 200, 255, 0.55);
  --crd-sunset-c: rgba(150, 125, 255, 0.4);
  --crd-sunset-ring: rgba(35, 95, 220, 0.9);
}

.crd--v-sunset.crd--brand-mastercard {
  --crd-sunset-a: rgba(255, 95, 40, 0.65);
  --crd-sunset-b: rgba(255, 185, 40, 0.6);
  --crd-sunset-c: rgba(230, 60, 60, 0.4);
  --crd-sunset-ring: rgba(240, 90, 35, 0.9);
}

.crd--v-sunset.crd--brand-amex {
  --crd-sunset-a: rgba(35, 140, 195, 0.6);
  --crd-sunset-b: rgba(110, 220, 230, 0.5);
  --crd-sunset-c: rgba(60, 115, 220, 0.4);
  --crd-sunset-ring: rgba(35, 140, 195, 0.9);
}

.crd--v-sunset.crd--brand-discover {
  --crd-sunset-a: rgba(255, 135, 30, 0.7);
  --crd-sunset-b: rgba(255, 205, 85, 0.55);
  --crd-sunset-c: rgba(250, 105, 60, 0.45);
  --crd-sunset-ring: rgba(245, 125, 30, 0.9);
}

.crd--v-sunset.crd--brand-dinersclub {
  --crd-sunset-a: rgba(70, 110, 165, 0.55);
  --crd-sunset-b: rgba(140, 185, 225, 0.5);
  --crd-sunset-c: rgba(100, 140, 255, 0.35);
  --crd-sunset-ring: rgba(70, 110, 165, 0.9);
}

.crd--v-sunset.crd--brand-jcb {
  --crd-sunset-a: rgba(45, 165, 95, 0.6);
  --crd-sunset-b: rgba(65, 130, 230, 0.5);
  --crd-sunset-c: rgba(230, 75, 95, 0.4);
  --crd-sunset-ring: rgba(45, 165, 95, 0.9);
}

.crd--v-sunset.crd--brand-unionpay {
  --crd-sunset-a: rgba(220, 65, 75, 0.55);
  --crd-sunset-b: rgba(45, 155, 165, 0.5);
  --crd-sunset-c: rgba(55, 95, 175, 0.4);
  --crd-sunset-ring: rgba(220, 65, 75, 0.9);
}

.crd--v-sunset.crd--brand-maestro {
  --crd-sunset-a: rgba(10, 95, 205, 0.55);
  --crd-sunset-b: rgba(240, 75, 60, 0.5);
  --crd-sunset-c: rgba(255, 155, 60, 0.4);
  --crd-sunset-ring: rgba(10, 95, 205, 0.9);
}

.crd--v-sunset.crd--brand-elo {
  --crd-sunset-a: rgba(255, 200, 45, 0.6);
  --crd-sunset-b: rgba(235, 65, 60, 0.5);
  --crd-sunset-c: rgba(45, 85, 205, 0.4);
  --crd-sunset-ring: rgba(235, 65, 60, 0.9);
}

.crd--v-sunset.crd--brand-hipercard {
  --crd-sunset-a: rgba(200, 45, 65, 0.6);
  --crd-sunset-b: rgba(255, 115, 95, 0.5);
  --crd-sunset-c: rgba(255, 65, 105, 0.35);
  --crd-sunset-ring: rgba(200, 45, 65, 0.9);
}

/* Graphite: brushed near-black with fine vertical pinstripes and a deep
   left edge. */
.crd--v-graphite {
  --_crd-color-theme: #e8e9ec;
  --_crd-bg-theme:
    var(--crd-noise-light),
    linear-gradient(90deg, rgba(5, 6, 8, 0.9) 0%, rgba(5, 6, 8, 0.75) 10%, transparent 13%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 7px),
    linear-gradient(115deg, #262930 0%, #1a1c21 45%, #23262c 70%, #16181c 100%);
}

.crd__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  /* Springy rotation: overshoots ~180° and settles back. */
  transition: transform var(--_crd-flip-duration) cubic-bezier(0.34, 1.3, 0.5, 1);
}

.crd--flipped .crd__inner {
  transform: rotateY(180deg);
}

/* ---- Flip choreography ----
   .crd--flipping is added transiently by the core on every flip: the card
   jumps off the surface in an arc with a wrist-flick tilt, its shadow
   deepens while airborne, and a light sheen sweeps across the faces. */

.crd--flipping {
  animation: crd-lift var(--_crd-flip-duration) cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes crd-lift {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
  35% {
    transform: translateY(-7%) scale(1.06) rotate(-2.5deg);
  }
  70% {
    transform: translateY(-4%) scale(1.04) rotate(1.2deg);
  }
  100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

.crd--flipping .crd__front,
.crd--flipping .crd__back {
  animation: crd-airborne-shadow var(--_crd-flip-duration) cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes crd-airborne-shadow {
  0%,
  100% {
    box-shadow: var(--_crd-shadow);
  }
  45% {
    box-shadow: 0 34px 54px rgba(0, 0, 0, 0.45);
  }
}

/* Sheen layer: parked fully transparent, swept during the flip. */
.crd__front::after,
.crd__back::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.32) 48%,
    rgba(255, 255, 255, 0.08) 53%,
    transparent 62%
  );
  background-size: 260% 100%;
  background-position: 135% 0;
}

.crd--flipping .crd__front::after,
.crd--flipping .crd__back::after {
  animation: crd-sheen var(--_crd-flip-duration) ease;
}

@keyframes crd-sheen {
  from {
    background-position: 135% 0;
  }
  to {
    background-position: -35% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crd__inner {
    transition: none;
  }

  .crd--flipping,
  .crd--flipping .crd__front,
  .crd--flipping .crd__back,
  .crd--flipping .crd__front::after,
  .crd--flipping .crd__back::after {
    animation: none;
  }
}

/* ---- Hover tilt (opt-in via the `tilt` option) ----
   Adapted from Transitions.dev's card tilt: the pointer position (written by
   the core into --crd-tilt-* custom properties) rotates the card in 3D and
   drives a cursor-tracked glare. A faster transition while hovering makes the
   tilt follow the cursor; on leave it eases slowly back to flat. */

.crd--tilt {
  position: relative;
  touch-action: none;
  transform: perspective(1000px) rotateX(var(--crd-tilt-rx, 0deg))
    rotateY(var(--crd-tilt-ry, 0deg));
  transition: transform 1000ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.crd--tilt.crd--tilt-hover {
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Cursor-tracked glare: layered soft circles that add like light (screen
   blend) at the pointer position. Only shown while tilt is on and hovered. */
.crd__glare {
  position: absolute;
  inset: 0;
  border-radius: var(--_crd-radius);
  pointer-events: none;
  opacity: 0;
  z-index: 3;
  mix-blend-mode: screen;
  background:
    radial-gradient(
      circle 95px at var(--crd-tilt-gx, 50%) var(--crd-tilt-gy, 50%),
      rgba(255, 255, 255, 0.48),
      rgba(255, 255, 255, 0.06) 52%,
      rgba(255, 255, 255, 0) 84%
    ),
    radial-gradient(
      circle 200px at var(--crd-tilt-gx, 50%) var(--crd-tilt-gy, 50%),
      rgba(255, 255, 255, 0.22),
      rgba(255, 255, 255, 0.04) 58%,
      rgba(255, 255, 255, 0) 78%
    ),
    radial-gradient(
      circle 360px at var(--crd-tilt-gx, 50%) var(--crd-tilt-gy, 50%),
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0) 88%
    );
  transition: opacity 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.crd--tilt.crd--tilt-hover .crd__glare {
  opacity: 0.32;
}

@media (prefers-reduced-motion: reduce) {
  .crd--tilt {
    transform: none !important;
    transition: none !important;
  }

  .crd__glare {
    display: none;
  }
}

/* The tilt tracks a cursor, so it's a hover-only enhancement: on touch devices
   it's flattened, the glare hidden, and touch-action restored — otherwise the
   pointer-driven tilt fires erratically on tap and its touch-action:none
   swallows scroll gestures over the card. */
@media (hover: none) {
  .crd--tilt {
    transform: none !important;
    transition: none !important;
    touch-action: auto;
  }

  .crd--tilt .crd__glare {
    display: none;
  }
}

.crd__front,
.crd__back {
  position: absolute;
  inset: 0;
  border-radius: var(--_crd-radius);
  background: var(--_crd-bg);
  box-shadow: var(--_crd-shadow);
  backface-visibility: hidden;
  overflow: hidden;
  padding: 6.5%;
  box-sizing: border-box;
}

.crd__back {
  transform: rotateY(180deg);
  padding: 0;
}

/* ---- Front ---- */

.crd__chip {
  width: 15%;
  color: #d4b26a;
}

.crd__chip svg,
.crd__logo svg {
  display: block;
  width: 100%;
  height: auto;
}

.crd__logo {
  position: absolute;
  top: 6.5%;
  right: 6.5%;
  width: 26%;
  color: var(--_crd-color);
}

.crd__number {
  margin-top: 9%;
  font-size: calc(var(--_crd-width) / 17.5);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

.crd__footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 4%;
  margin-top: 8%;
}

.crd__name {
  font-size: calc(var(--_crd-width) / 24);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crd__name--placeholder {
  opacity: 0.55;
}

.crd__expiry {
  text-align: right;
  flex-shrink: 0;
}

.crd__expiry-label {
  display: block;
  font-size: calc(var(--_crd-width) / 41);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.65;
}

.crd__expiry-value {
  font-size: calc(var(--_crd-width) / 24);
  font-variant-numeric: tabular-nums;
}

/* ---- Display layout ----
   Presents an existing card (dashboards): expiry and CVC sit on a meta row on
   the front, under the number. Hidden by default; the layout='display' class
   reveals it and hides the form-mode expiry in the footer. */

.crd__meta {
  display: none;
}

.crd--l-display .crd__meta {
  display: flex;
  gap: 9%;
  margin-top: 6%;
}

.crd__meta-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
}

.crd__meta-label {
  font-size: calc(var(--_crd-width) / 30);
  letter-spacing: 0.02em;
  opacity: 0.55;
}

.crd__meta-expiry,
.crd__meta-cvc {
  font-size: calc(var(--_crd-width) / 22);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}

.crd--l-display .crd__footer .crd__expiry {
  display: none;
}

.crd--l-display .crd__footer {
  margin-top: 5%;
}

/* Copyable fields: a subtle hover affordance and a transient "Copied" bubble.
   The number/expiry already carry padding + radius from the focus-ring block;
   the meta values get their own so the hover pill wraps them snugly. */
[data-crd-copy] {
  position: relative;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s ease-out;
}

.crd__meta-expiry[data-crd-copy],
.crd__meta-cvc[data-crd-copy] {
  padding: 1px 5px;
  margin: -1px -5px;
}

[data-crd-copy]:hover,
[data-crd-copy]:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  outline: none;
}

/* Shared bubble above the field: 'Click to copy' on hover, 'Copied' after a
   copy. One ::after, its content swapped by state. */
[data-crd-copy]::after {
  content: attr(data-copy-label);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.15em 0.5em;
  border-radius: 5px;
  background: rgba(20, 20, 24, 0.92);
  color: #fff;
  font-size: calc(var(--_crd-width) / 30);
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease-out;
}

[data-crd-copy]:hover::after,
[data-crd-copy]:focus-visible::after {
  opacity: 1;
}

/* The copied state wins over hover (later rule) and fades itself out. */
[data-crd-copy][data-copied]::after {
  content: attr(data-copied-label);
  opacity: 1;
  animation: crd-copied 1.2s ease-out forwards;
}

@keyframes crd-copied {
  0%,
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-crd-copy]::after {
    transition: none;
  }
  [data-crd-copy][data-copied]::after {
    animation: none;
  }
}

/* ---- Focus ring ----
   A single ring element travels between the focused sections, sliding and
   resizing with a spring — the core keeps its transform/size in sync. */

.crd__number,
.crd__name,
.crd__expiry {
  border-radius: 6px;
  padding: 2px 6px;
  margin-left: -6px;
}

.crd__ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 8px;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.7);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.4s cubic-bezier(0.3, 1.35, 0.45, 1),
    width 0.4s cubic-bezier(0.3, 1.35, 0.45, 1),
    height 0.4s cubic-bezier(0.3, 1.35, 0.45, 1),
    opacity 0.18s ease;
}

.crd__ring--on {
  opacity: 1;
}

/* Applied for one frame when the ring (re)appears, so it materializes on the
   new section instead of sliding in from a stale position. */
.crd__ring--instant {
  transition: opacity 0.18s ease;
}

@media (prefers-reduced-motion: reduce) {
  .crd__ring {
    transition: opacity 0.18s ease;
  }
}

/* ---- Back ---- */

.crd__stripe {
  margin-top: 8%;
  height: 18%;
  background: rgba(0, 0, 0, 0.55);
}

.crd__signature {
  margin: 6% 6.5% 0;
  height: 16%;
  border-radius: 5px;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.85),
    rgba(255, 255, 255, 0.85) 3px,
    rgba(220, 220, 220, 0.85) 3px,
    rgba(220, 220, 220, 0.85) 6px
  );
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 3%;
  box-sizing: border-box;
}

.crd__cvc {
  color: #333;
  font-size: calc(var(--_crd-width) / 26);
  font-style: italic;
  letter-spacing: 0.15em;
  font-variant-numeric: tabular-nums;
}

/* The back has no traveling ring, so CVC focus highlights the signature
   strip itself — same stroke as the front ring. */
.crd__signature {
  transition: box-shadow 0.18s ease;
}

.crd--focus-cvc .crd__signature {
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.7);
}

.crd__logo--back {
  top: auto;
  bottom: 6.5%;
  width: 20%;
  opacity: 0.85;
}


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

.valida-checkbox-group{
  display:grid;
  gap:8px;
  max-width:36rem;
}

.valida-checkbox-group__label{
  color:var(--color-text-primary);
  font-size:var(--font-size-sm);
  font-weight:var(--font-weight-semibold);
}

.valida-checkbox-group__description{
  color:var(--color-text-secondary);
  font-size:var(--font-size-xs);
  line-height:var(--line-height-default);
  margin-top:-4px;
}

.valida-checkbox-group__options{
  display:grid;
  gap:0;
}

.valida-checkbox-option{
  align-items:center;
  background:var(--color-surface-card);
  border:1px solid var(--color-control-border);
  border-radius:var(--r-md);
  color:var(--color-text-primary);
  cursor:pointer;
  display:flex;
  font:inherit;
  gap:12px;
  min-height:44px;
  padding:10px 12px;
  position:relative;
  text-align:left;
  width:100%;
}

.valida-checkbox-option + .valida-checkbox-option{margin-top:4px}
.valida-checkbox-option:hover:not(:disabled){background:var(--color-hover-bg);border-color:var(--color-control-border-hover)}
.valida-checkbox-option:disabled{cursor:not-allowed;opacity:.6}
.valida-checkbox-option:focus-visible{box-shadow:var(--color-focus-ring);outline:none;z-index:1}
.valida-checkbox-option.is-checked{background:var(--tone-success-bg);border-color:var(--color-control-border-selected)}
.valida-checkbox-option.is-run-start:not(.is-run-end){border-bottom-left-radius:0;border-bottom-right-radius:0}
.valida-checkbox-option.is-run-middle{border-radius:0;margin-top:-1px}
.valida-checkbox-option.is-run-end:not(.is-run-start){border-top-left-radius:0;border-top-right-radius:0;margin-top:-1px}
.valida-checkbox-option.is-run-start:not(.is-run-end) + .valida-checkbox-option{margin-top:-1px}

.valida-checkbox-option__indicator{
  align-items:center;
  background:var(--color-surface-elevated);
  border:1.5px solid var(--color-control-indicator);
  border-radius:5px;
  color:var(--color-surface-elevated);
  display:grid;
  flex:none;
  height:18px;
  place-items:center;
  width:18px;
}

.valida-checkbox-option.is-checked .valida-checkbox-option__indicator{
  background:var(--color-control-indicator-selected);
  border-color:var(--color-control-indicator-selected);
}

.valida-checkbox-option__check{display:grid;place-items:center;width:16px;height:16px}

.valida-checkbox-option__copy{display:grid;gap:2px;min-width:0}
.valida-checkbox-option__label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:1.35}
.valida-checkbox-option__description{color:var(--color-text-secondary);font-size:var(--font-size-xs);line-height:1.45}

.valida-textarea{min-height:112px;resize:vertical;line-height:1.55}
.valida-choice-field,.valida-radio-group{display:grid;gap:8px}.valida-choice-field__error{margin:0;color:var(--tone-danger-tx);font-size:var(--font-size-xs);line-height:var(--line-height-default)}
.valida-choice{position:relative;display:flex;align-items:flex-start;gap:10px;min-height:40px;color:var(--color-text-primary);cursor:pointer}.valida-choice>input{position:absolute;width:1px;height:1px;margin:-1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.valida-choice__indicator{display:grid;place-items:center;flex:none;width:20px;height:20px;margin-top:1px;border:1px solid var(--color-control-border);border-radius:6px;background:var(--color-input-bg);color:transparent;box-shadow:var(--shadow-control)}.valida-choice:hover .valida-choice__indicator{border-color:var(--color-control-border-hover)}.valida-choice>input:checked+.valida-choice__indicator,.valida-choice>input:indeterminate+.valida-choice__indicator{border-color:var(--color-control-border-selected);background:var(--color-control-indicator-selected);color:var(--color-action-primary-foreground)}.valida-choice>input:focus-visible+.valida-choice__indicator{box-shadow:var(--color-focus-ring)}.valida-choice>input:disabled~*{opacity:.58}.valida-choice:has(input:disabled){cursor:not-allowed}.valida-choice__copy{display:grid;gap:2px;min-width:0}.valida-choice__copy strong{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);line-height:1.35}.valida-choice__copy>span{color:var(--color-text-secondary);font-size:var(--font-size-xs);line-height:1.45}.valida-choice-field.is-invalid .valida-choice__indicator,.valida-radio-group.is-invalid .valida-choice__indicator{border-color:var(--tone-danger-bd)}
.valida-radio-group{min-width:0;margin:0;padding:0;border:0}.valida-radio-group>legend{padding:0;color:var(--color-text-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}.valida-radio-group>p{margin:2px 0 0;color:var(--color-text-secondary);font-size:var(--font-size-xs);line-height:1.45}.valida-radio-group__options{display:grid;gap:10px;margin-top:4px}.valida-choice--radio .valida-choice__indicator{border-radius:var(--r-full)}.valida-choice--radio>input:checked+.valida-choice__indicator{border:5px solid var(--color-control-indicator-selected);background:var(--color-action-primary-foreground)}
.valida-toast{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:flex-start;gap:10px;width:min(100%,380px);padding:12px;border:1px solid var(--tone-neutral-bd);border-radius:var(--r-lg);background:var(--color-surface-card);color:var(--color-text-primary)}.valida-toast__icon{display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r-md);background:var(--tone-neutral-bg);color:var(--tone-neutral-tx)}.valida-toast__content{display:grid;gap:2px;min-width:0}.valida-toast__content>strong{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);line-height:1.35}.valida-toast__content>div:not(.valida-toast__action){color:var(--color-text-secondary);font-size:var(--font-size-xs);line-height:1.45}.valida-toast__action{margin-top:7px}.valida-toast__dismiss{display:grid;place-items:center;width:40px;height:40px;margin:-5px -5px -5px 0;padding:0;border:0;border-radius:var(--r-md);background:transparent;color:var(--color-text-muted);cursor:pointer}.valida-toast__dismiss:hover{background:var(--color-hover-bg);color:var(--color-text-primary)}.valida-toast__dismiss:focus-visible{outline:none;box-shadow:var(--color-focus-ring)}.valida-toast--success{border-color:var(--tone-success-bd)}.valida-toast--success .valida-toast__icon{background:var(--tone-success-bg);color:var(--tone-success-tx)}.valida-toast--warning{border-color:var(--tone-warning-bd)}.valida-toast--warning .valida-toast__icon{background:var(--tone-warning-bg);color:var(--tone-warning-tx)}.valida-toast--danger{border-color:var(--tone-danger-bd)}.valida-toast--danger .valida-toast__icon{background:var(--tone-danger-bg);color:var(--tone-danger-tx)}.valida-toast--info{border-color:var(--tone-info-bd)}.valida-toast--info .valida-toast__icon{background:var(--tone-info-bg);color:var(--tone-info-tx)}

.valida-text-morph{display:inline-block}

.valida-number-flow{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
}

.valida-payment-card{display:grid;gap:10px;justify-items:start;width:100%}
.valida-payment-card:not(.valida-payment-card--provider-original) .crd{
  --crd-font:var(--font-sans);
  --crd-radius:var(--r-xl);
  --crd-shadow:var(--shadow-card);
  --crd-width:320px;
  max-width:100%;
  width:320px;
}
.valida-payment-card--artwork .crd{--crd-bg:var(--valida-card-background)}
.valida-payment-card__notice{color:var(--color-text-secondary);font-size:var(--font-size-xs);line-height:1.5;max-width:320px;margin:0}

/* Baseline primitives: default controls meet 44px; compact visual controls must be wrapped by a 40px hit target. */
.valida-button{align-items:center;border:1px solid transparent;border-radius:var(--r-control);cursor:pointer;display:inline-flex;font:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);justify-content:center;line-height:var(--line-height-compact);min-height:var(--control-default);padding:var(--space-2) var(--space-4);transition:background var(--motion-fast) var(--motion-easing),border-color var(--motion-fast) var(--motion-easing),box-shadow var(--motion-fast) var(--motion-easing),color var(--motion-fast) var(--motion-easing)}
.valida-button--primary{background:var(--color-action-primary);color:var(--color-action-primary-foreground)}.valida-button--primary:hover:not(:disabled){background:var(--color-action-primary-hover)}.valida-button--secondary{background:var(--color-surface-card);border-color:var(--color-control-border);box-shadow:var(--shadow-control);color:var(--color-text-primary)}.valida-button--secondary:hover:not(:disabled),.valida-button--tertiary:hover:not(:disabled){background:var(--color-hover-bg)}.valida-button--tertiary{background:transparent;color:var(--color-text-accent)}.valida-button--destructive{background:var(--tone-danger-bg);border-color:var(--tone-danger-bd);color:var(--tone-danger-tx)}.valida-button:disabled{cursor:not-allowed;opacity:.6}.valida-button:focus-visible,.valida-field__input:focus-visible,.valida-switch:focus-visible{box-shadow:var(--color-focus-ring);outline:none}
.valida-field{display:grid;gap:var(--space-1)}.valida-field>label{color:var(--color-text-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}.valida-field__input{background:var(--color-input-bg);border:1px solid var(--color-control-border);border-radius:var(--r-control);box-shadow:var(--shadow-control);color:var(--color-text-primary);font:inherit;min-height:var(--control-default);padding:0 var(--space-3);width:100%}.valida-field__input:disabled{cursor:not-allowed;opacity:.6}.valida-field__hint,.valida-field__error{font-size:var(--font-size-xs);line-height:var(--line-height-default);margin:0}.valida-field__hint{color:var(--color-text-secondary)}.valida-field__error{color:var(--tone-danger-tx)}.valida-field.is-invalid .valida-field__input{border-color:var(--color-control-invalid)}
/* Custom select affordance: subtle chevron with breathing room instead of the edge-hugging native arrow. */
.valida-select-wrap{position:relative;display:block}
.valida-select{appearance:none;padding-right:var(--space-10);text-overflow:ellipsis}
.valida-select::-ms-expand{display:none}
.valida-select__chevron{position:absolute;right:var(--space-4);top:50%;transform:translateY(-50%);color:var(--color-text-muted);pointer-events:none}
.valida-select-wrap:has(.valida-select:disabled) .valida-select__chevron{opacity:.6}
.valida-switch-wrap{align-items:flex-start;cursor:pointer;display:inline-flex;gap:var(--space-2);min-height:var(--control-default);padding-block:4px;position:relative}.valida-switch__input{block-size:1px;clip:rect(0 0 0 0);inline-size:1px;margin:-1px;opacity:0;overflow:hidden;position:absolute;white-space:nowrap}.valida-switch{align-items:center;background:var(--color-control-track-interior);border:1px solid var(--color-control-border);border-radius:var(--r-full);display:inline-flex;flex:none;height:24px;margin-block:6px;padding:2px;width:40px}.valida-switch__thumb{background:var(--color-control-indicator);border-radius:var(--r-full);height:18px;transition:transform var(--motion-fast) var(--motion-easing);width:18px}.valida-switch__input:checked + .valida-switch{background:var(--color-action-primary);border-color:var(--color-action-primary)}.valida-switch__input:checked + .valida-switch .valida-switch__thumb{background:var(--color-action-primary-foreground);transform:translateX(16px)}.valida-switch__input:focus-visible + .valida-switch{box-shadow:var(--color-focus-ring);outline:none}.valida-switch__input:disabled + .valida-switch{cursor:not-allowed;opacity:.6}.valida-switch-wrap:has(.valida-switch__input:disabled){cursor:not-allowed}.valida-switch-wrap__label,.valida-switch-wrap__description{display:block}.valida-switch-wrap__label{color:var(--color-text-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);line-height:20px}.valida-switch-wrap__description{color:var(--color-text-secondary);font-size:var(--font-size-xs);line-height:var(--line-height-default);margin-top:var(--space-1)}
.valida-badge{align-items:center;background:var(--tone-neutral-bg);border:1px solid var(--tone-neutral-bd);border-radius:var(--r-full);color:var(--tone-neutral-tx);display:inline-flex;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);line-height:var(--line-height-compact);padding:var(--space-1) var(--space-2)}.valida-badge--success{background:var(--tone-success-bg);border-color:var(--tone-success-bd);color:var(--tone-success-tx)}.valida-badge--warning{background:var(--tone-warning-bg);border-color:var(--tone-warning-bd);color:var(--tone-warning-tx)}.valida-badge--danger{background:var(--tone-danger-bg);border-color:var(--tone-danger-bd);color:var(--tone-danger-tx)}.valida-badge--info{background:var(--tone-info-bg);border-color:var(--tone-info-bd);color:var(--tone-info-tx)}
.valida-alert{align-items:flex-start;background:var(--tone-info-bg);border:1px solid var(--tone-info-bd);border-radius:var(--r-lg);color:var(--tone-info-tx);display:flex;gap:var(--space-2);padding:var(--space-3)}.valida-alert--danger{background:var(--tone-danger-bg);border-color:var(--tone-danger-bd);color:var(--tone-danger-tx)}.valida-alert--warning{background:var(--tone-warning-bg);border-color:var(--tone-warning-bd);color:var(--tone-warning-tx)}.valida-alert--success{background:var(--tone-success-bg);border-color:var(--tone-success-bd);color:var(--tone-success-tx)}.valida-alert__symbol{align-items:center;border:1px solid currentColor;border-radius:var(--r-full);display:inline-flex;font-family:var(--font-mono);font-weight:var(--font-weight-semibold);height:var(--space-5);justify-content:center;width:var(--space-5)}.valida-alert strong{display:block;margin-bottom:var(--space-1)}.valida-alert__action{margin-top:var(--space-2)}
.valida-card{background:var(--color-surface-card);border:1px solid var(--color-border-subtle);border-radius:var(--r-lg);color:var(--color-text-primary);padding:var(--space-5)}.valida-card>header{margin-bottom:var(--space-4)}.valida-card h2{font-size:var(--font-size-lg);line-height:var(--line-height-compact);margin:0}.valida-card header p{color:var(--color-text-secondary);font-size:var(--font-size-sm);line-height:var(--line-height-default);margin:var(--space-1) 0 0}
.valida-icon{display:inline-block;flex:none;vertical-align:middle}
.valida-app-shell{--valida-shell-content-max:1200px;background:var(--color-surface);color:var(--color-text-primary);display:grid;grid-template-columns:var(--shell-sidebar) minmax(0,1fr);min-height:100vh;transition:grid-template-columns var(--motion-panel) var(--motion-easing)}.valida-app-shell--content-wide{--valida-shell-content-max:1600px}.valida-app-shell--content-workbench{--valida-shell-content-max:none}.valida-app-shell.is-collapsed{grid-template-columns:var(--shell-sidebar-collapsed) minmax(0,1fr)}.valida-app-shell__sidebar{background:var(--color-surface-card);border-right:1px solid var(--color-border-subtle);display:flex;flex-direction:column;min-width:0}.valida-app-shell__sidebar-head{align-items:center;border-bottom:1px solid var(--color-border-subtle);display:flex;height:var(--shell-topbar);justify-content:space-between;min-width:0;padding:0 var(--space-4)}.valida-app-shell__brand{align-items:center;display:flex;min-width:0}.valida-app-shell__brand-full{align-items:center;display:flex;min-width:0}.valida-app-shell__collapse{align-items:center;background:transparent;border:1px solid transparent;border-radius:var(--r-md);color:var(--color-text-secondary);cursor:pointer;display:inline-flex;flex:none;height:var(--control-dense-hit-target);justify-content:center;padding:0;width:var(--control-dense-hit-target)}.valida-app-shell__collapse:hover{background:var(--color-hover-bg);border-color:var(--color-border-subtle);color:var(--color-text-primary)}.valida-app-shell__collapse:focus-visible{box-shadow:var(--color-focus-ring);outline:none}.valida-app-shell__sidebar-body{overflow-x:hidden;padding:var(--space-4)}.valida-app-shell__main{min-width:0}.valida-app-shell__topbar{align-items:center;background:var(--color-surface-card);border-bottom:1px solid var(--color-border-subtle);display:flex;height:var(--shell-topbar);padding:0 var(--space-5);position:sticky;top:0;z-index:var(--z-sticky)}.valida-app-shell__content{box-sizing:border-box;margin:0 auto;max-width:var(--valida-shell-content-max);padding:var(--space-6);width:100%}
.valida-app-shell.is-collapsed .valida-app-shell__sidebar-head{justify-content:center;padding:0}.valida-app-shell.is-collapsed .valida-app-shell__brand{display:none}.valida-app-shell.is-collapsed .valida-app-shell__sidebar-body{padding:var(--space-3) var(--space-2)}.valida-app-shell.is-collapsed [data-valida-sidebar-label]{display:none}
.valida-shell-nav{display:grid;gap:var(--space-1)}.valida-shell-nav__group{color:var(--color-sidebar-group-text);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:.04em;margin:var(--space-3) var(--space-2) var(--space-1);text-transform:uppercase}.valida-shell-nav__item{align-items:center;background:transparent;border:1px solid transparent;border-radius:var(--r-md);color:var(--color-nav-text);display:flex;font-size:var(--font-size-sm);gap:var(--space-3);min-height:var(--control-dense-hit-target);padding:var(--space-2) var(--space-3);text-decoration:none}.valida-shell-nav__item .valida-icon{color:var(--color-nav-icon)}.valida-shell-nav__item:hover{background:var(--color-hover-bg);color:var(--color-text-primary)}.valida-shell-nav__item:focus-visible{box-shadow:var(--color-focus-ring);outline:none}.valida-shell-nav__item[aria-current="page"],.valida-shell-nav__item.is-active{background:var(--color-nav-active-surface);border-color:var(--color-nav-active-border);color:var(--color-nav-active-text);font-weight:var(--font-weight-semibold)}.valida-app-shell.is-collapsed .valida-shell-nav__item{gap:0;justify-content:center;padding-left:0;padding-right:0}.valida-app-shell.is-collapsed .valida-shell-nav__group{display:none}

.valida-auth-shell{align-items:center;background:var(--color-surface);color:var(--color-text-primary);display:flex;justify-content:center;min-height:100vh;padding:var(--space-8) var(--space-5)}
.valida-auth-card{background:var(--color-surface-card);border:1px solid var(--color-border-subtle);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:var(--space-8);width:min(100%,440px)}
.valida-auth-card__brand{align-items:center;display:flex;justify-content:flex-start;margin-bottom:var(--space-6)}
.valida-auth-card__brand:has(.valida-auth-card__action){justify-content:space-between}
.valida-auth-card__lockup{align-items:center;display:flex;justify-content:flex-start;min-width:0}
.valida-auth-card__lockup img{display:block;height:auto;max-height:40px;max-width:160px}
.valida-auth-card__action{margin:-6px -6px 0 0}
.valida-auth-card__intro{margin-bottom:var(--space-6);text-align:left}
.valida-auth-card__eyebrow{color:var(--color-brand-accent);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:.06em;margin:0 0 var(--space-2);text-transform:uppercase}
.valida-auth-card__intro h1{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);letter-spacing:-.01em;line-height:var(--line-height-compact);margin:0 0 var(--space-2);text-wrap:balance}
.valida-auth-card__intro>p:last-child{color:var(--color-text-secondary);font-size:var(--font-size-sm);line-height:var(--line-height-default);margin:0;max-width:340px}
.valida-auth-form{display:grid;gap:var(--space-4);margin-top:0}
.valida-auth-form .valida-field{gap:var(--space-2)}
.valida-auth-form .valida-field>label{color:var(--color-text-secondary);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium)}
.valida-auth-form .valida-field__input{border-color:var(--color-border-subtle);border-radius:var(--r-md);box-shadow:none;min-height:var(--control-default)}
.valida-auth-form__utilities{align-items:center;color:var(--color-text-secondary);display:flex;font-size:var(--font-size-xs);justify-content:space-between;min-height:18px}
.valida-auth-form__utilities a{color:inherit;text-decoration:none}
.valida-auth-form__utilities a:hover{color:var(--color-brand-accent)}
.valida-auth-form__mode{background:transparent;border:0;color:var(--color-text-secondary);cursor:pointer;font:inherit;font-size:var(--font-size-xs);justify-self:center;padding:var(--space-1) 0}
.valida-auth-form__mode:hover{color:var(--color-brand-accent)}
.valida-auth-form__mode:focus-visible{box-shadow:var(--color-focus-ring);outline:none}
/* Canonical login action, ported from the production NORMA/Legal login: navy→green
   gradient, 58px pill (18px radius from the approved reference), inverse mark inline. */
.valida-auth-form__submit{width:100%;min-height:58px;margin-top:var(--space-1);border:0;border-radius:18px;background:var(--valida-auth-action-gradient,var(--color-action-primary));font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);letter-spacing:-.02em;box-shadow:0 20px 34px color-mix(in srgb,var(--valida-auth-action-shadow,var(--color-action-primary)) 24%,transparent),inset 0 1px 0 color-mix(in srgb,var(--color-action-primary-foreground) 14%,transparent);transition:transform var(--motion-fast) var(--motion-easing),box-shadow var(--motion-fast) var(--motion-easing),opacity var(--motion-fast) var(--motion-easing)}
.valida-auth-form__submit:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 24px 40px color-mix(in srgb,var(--valida-auth-action-shadow,var(--color-action-primary)) 28%,transparent),inset 0 1px 0 color-mix(in srgb,var(--color-action-primary-foreground) 16%,transparent)}
.valida-auth-form__submit-content{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2)}
.valida-auth-form__submit-brand{display:inline-flex;align-items:center;gap:var(--space-2)}
.valida-auth-form__submit-mark{display:block;flex:none;height:18px;width:auto}
.valida-auth-form__divider{display:flex;align-items:center;gap:var(--space-3);margin:var(--space-2) 0 0;color:var(--color-text-muted);font-size:var(--font-size-xs)}
.valida-auth-form__divider::before,.valida-auth-form__divider::after{content:"";height:1px;flex:1;background:var(--color-border-subtle)}
.valida-auth-form__providers{display:grid;gap:var(--space-3)}
.valida-auth-form__provider{display:flex;align-items:center;justify-content:center;gap:var(--space-3);min-height:52px;border:1px solid var(--color-border-default);border-radius:var(--r-lg);background:var(--color-surface-card);color:var(--color-text-primary);font:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);cursor:pointer;transition:transform var(--motion-fast) var(--motion-easing),border-color var(--motion-fast) var(--motion-easing),background var(--motion-fast) var(--motion-easing)}
.valida-auth-form__provider:hover:not(:disabled){transform:translateY(-1px);border-color:var(--color-border-accent);background:var(--color-hover-bg)}
.valida-auth-form__provider:focus-visible{box-shadow:var(--color-focus-ring);outline:none}
.valida-auth-form__provider:disabled{cursor:not-allowed;opacity:.6}
.valida-vendor-mark{display:block;flex:none}
.valida-two-factor-form{gap:var(--space-5)}

.valida-profile-panel{display:grid;gap:18px;grid-template-columns:190px minmax(0,1fr)}.valida-profile-panel__summary{align-items:center;background:var(--color-surface);border-radius:var(--r-lg);display:flex;flex-direction:column;padding:var(--space-5) 14px 14px;text-align:center}.valida-profile-panel__avatar{align-items:center;background:var(--color-surface-accent);border-radius:var(--r-full);color:var(--color-text-accent);display:inline-flex;font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);height:64px;justify-content:center;margin-bottom:var(--space-3);width:64px}.valida-profile-panel__summary>strong{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}.valida-profile-panel__job{color:var(--color-text-secondary);font-size:var(--font-size-xs);margin:3px 0 var(--space-3)}.valida-profile-panel__member{color:var(--color-text-muted);font-size:var(--font-size-xs);margin-top:9px}.valida-profile-panel__security{margin-top:var(--space-4);width:100%}.valida-profile-panel__security>*{width:100%}.valida-profile-panel__details{align-content:start;display:grid;gap:var(--space-3)}.valida-profile-panel__details .valida-field__input:disabled{cursor:default;opacity:1}.valida-profile-panel__details>p{color:var(--color-text-secondary);font-size:var(--font-size-xs);line-height:var(--line-height-default);margin:0}

.valida-email-preview{background:var(--color-surface-secondary);border:1px solid var(--color-border-subtle);border-radius:var(--r-lg);color:var(--color-text-primary);margin:auto;max-width:620px;overflow:hidden;padding:var(--space-6)}.valida-email-preview>header{background:var(--color-surface-card);padding:var(--space-6) var(--space-6) 0}.valida-email-preview>header img{display:block;height:auto;max-height:22px;max-width:112px}.valida-email-preview__body{background:var(--color-surface-card);padding:var(--space-6)}.valida-email-preview__eyebrow{color:var(--color-brand-accent);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:.04em;margin:0 0 var(--space-2);text-transform:uppercase}.valida-email-preview h2{font-size:var(--font-size-lg);line-height:var(--line-height-compact);margin:0 0 var(--space-3)}.valida-email-preview__copy{color:var(--color-text-secondary);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed)}.valida-email-preview__copy p{margin:0 0 var(--space-3)}.valida-email-preview__action{margin-top:var(--space-5)}.valida-email-preview>footer{align-items:flex-start;color:var(--color-text-muted);display:flex;font-size:var(--font-size-xs);gap:var(--space-2);line-height:var(--line-height-default);padding:var(--space-4) var(--space-5)}

@media (max-width:768px){.valida-app-shell,.valida-app-shell.is-collapsed{grid-template-columns:1fr}.valida-app-shell__sidebar{border-bottom:1px solid var(--color-border-subtle);border-right:0}.valida-app-shell__sidebar-head,.valida-app-shell.is-collapsed .valida-app-shell__sidebar-head{justify-content:space-between;padding:0 var(--space-3)}.valida-app-shell.is-collapsed .valida-app-shell__brand{display:flex}.valida-app-shell__sidebar-body,.valida-app-shell.is-collapsed .valida-app-shell__sidebar-body{padding:var(--space-3)}.valida-app-shell.is-collapsed [data-valida-sidebar-label]{display:initial}.valida-app-shell.is-collapsed .valida-shell-nav__group{display:block}.valida-app-shell.is-collapsed .valida-shell-nav__item{gap:var(--space-3);justify-content:flex-start;padding:var(--space-2) var(--space-3)}.valida-app-shell__content{padding:var(--space-4)}.valida-profile-panel{grid-template-columns:1fr}}
@media (max-width:520px){.valida-auth-shell{padding:var(--space-5) 14px}.valida-auth-card{padding:28px 22px}.valida-auth-form__utilities{align-items:flex-start;flex-direction:column;gap:var(--space-2)}.valida-email-preview{padding:var(--space-3)}.valida-email-preview__body{padding:var(--space-6) var(--space-4)}}

/* Keep the canonical primary label white even when a consumer supplies a
   broader button color rule. The visual track stays compact while its label
   aligns to the first 24px text line inside the 44px hit target. */
.valida-button--primary,
.valida-button--primary:hover:not(:disabled),
.valida-button--primary:active:not(:disabled){color:var(--color-action-primary-foreground)!important}
.valida-switch{margin-block:0}
.valida-switch-wrap__label{line-height:24px}

/* Canonical visual refinements: compact feedback, Geist data, and calm forms. */
.valida-alert{align-self:start;justify-self:start;width:fit-content;max-width:100%}
.valida-toast__dismiss{
  align-self:start;
  width:40px;
  height:40px;
  margin:-5px -5px -5px 2px;
  border:1px solid var(--color-border-subtle);
  border-radius:var(--r-full);
  background:var(--color-surface-secondary);
  box-shadow:var(--shadow-control);
}
.valida-toast__dismiss:hover{border-color:var(--color-control-border-hover);background:var(--color-surface-accent);color:var(--color-text-accent)}
.valida-number-flow{font-family:var(--font-sans);font-variant-numeric:tabular-nums}
.valida-badge{justify-self:start;width:fit-content;max-width:100%;white-space:nowrap}
.valida-field{gap:var(--space-2)}
.valida-field__input{font-family:var(--font-sans);font-size:var(--font-size-sm);line-height:var(--line-height-default)}
.valida-field__input::placeholder{color:var(--color-text-hint);font-family:var(--font-sans);opacity:.78}
.valida-textarea{padding-block:var(--space-3)}
.valida-two-factor-form .valida-field__input{font-size:var(--font-size-md);font-weight:var(--font-weight-medium);letter-spacing:.18em;text-align:center}
.valida-profile-panel__summary{border:1px solid var(--color-border-subtle);background:var(--color-surface-secondary)}
.valida-profile-panel__avatar{box-shadow:0 0 0 4px var(--color-surface-accent)}
.valida-profile-panel__details{gap:var(--space-4)}

.valida-dialog__backdrop{position:fixed;inset:0;z-index:var(--z-modal);background:color-mix(in srgb,var(--color-brand-navy) 48%,transparent);backdrop-filter:blur(3px);transition:opacity var(--motion-fast) var(--motion-easing)}
.valida-dialog__viewport{position:fixed;inset:0;z-index:var(--z-modal);display:grid;place-items:center;padding:var(--space-5);overflow:auto}
/* Modals are flat by owner decision (2026-08-25): separation comes from the backdrop and border, not drop shadows. */
.valida-dialog{position:relative;width:min(100%,560px);max-height:min(760px,calc(100dvh - 40px));overflow:auto;border:1px solid var(--color-border-subtle);border-radius:var(--r-xl);background:var(--color-surface-card);color:var(--color-text-primary);padding:var(--space-6);transition:opacity var(--motion-fast) var(--motion-easing),transform var(--motion-fast) var(--motion-easing)}
.valida-dialog__header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:var(--space-4)}
.valida-dialog__eyebrow{margin:0 0 var(--space-2);color:var(--color-text-accent);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:.04em;text-transform:uppercase}
.valida-dialog__title{margin:0;font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);line-height:var(--line-height-compact)}
.valida-dialog__description{max-width:46rem;margin:var(--space-3) 0 0;color:var(--color-text-secondary);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed)}
.valida-dialog__body{margin-top:var(--space-5);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed)}
.valida-dialog__body>:first-child{margin-top:0}.valida-dialog__body>:last-child{margin-bottom:0}
.valida-dialog__footer{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-6)}
.valida-dialog__close{display:grid;place-items:center;width:40px;height:40px;margin:-6px -6px 0 0;padding:0;border:1px solid var(--color-border-subtle);border-radius:var(--r-full);background:var(--color-surface-secondary);box-shadow:var(--shadow-control);color:var(--color-text-secondary);cursor:pointer}
.valida-dialog__close:hover{border-color:var(--color-control-border-hover);background:var(--color-surface-accent);color:var(--color-text-accent)}
.valida-dialog__close:focus-visible{outline:none;box-shadow:var(--color-focus-ring)}
.valida-dialog[data-starting-style],.valida-dialog[data-ending-style]{opacity:0;transform:translateY(8px) scale(.985)}
.valida-dialog__backdrop[data-starting-style],.valida-dialog__backdrop[data-ending-style]{opacity:0}

@media (prefers-reduced-motion:reduce){
  .valida-button,.valida-switch__thumb,.valida-app-shell{transition:none !important}
  .valida-checkbox-option{transition:none !important}
  .valida-payment-card .crd__inner{transition:none !important}
  .valida-dialog,.valida-dialog__backdrop{transition:none !important}
}

@media (max-width:520px){.valida-dialog__viewport{align-items:end;padding:var(--space-3)}.valida-dialog{width:100%;max-height:calc(100dvh - 24px);padding:var(--space-5)}}

.valida-drawer__backdrop{position:fixed;inset:0;z-index:var(--z-modal);background:color-mix(in srgb,var(--color-brand-navy) 48%,transparent);backdrop-filter:blur(3px);transition:opacity var(--motion-fast) var(--motion-easing)}
.valida-drawer__viewport{position:fixed;inset:0;z-index:var(--z-modal);display:flex;pointer-events:none}
.valida-drawer__viewport--right{justify-content:flex-end}.valida-drawer__viewport--left{justify-content:flex-start}.valida-drawer__viewport--bottom{align-items:flex-end}
.valida-drawer{pointer-events:auto;width:min(92vw,440px);height:100%;border:1px solid var(--color-border-subtle);background:var(--color-surface-card);color:var(--color-text-primary);transition:transform var(--motion-default) var(--motion-easing)}
.valida-drawer--right{border-radius:var(--r-xl) 0 0 var(--r-xl)}.valida-drawer--left{border-radius:0 var(--r-xl) var(--r-xl) 0}.valida-drawer--bottom{width:100%;height:auto;max-height:min(82dvh,760px);border-radius:var(--r-xl) var(--r-xl) 0 0}
.valida-drawer__content{display:flex;min-height:100%;max-height:100%;flex-direction:column;padding:var(--space-6)}
.valida-drawer__header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:var(--space-4)}
.valida-drawer__eyebrow{margin:0 0 var(--space-2);color:var(--color-text-accent);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:.04em;text-transform:uppercase}
.valida-drawer__title{margin:0;font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);line-height:var(--line-height-compact)}
.valida-drawer__description{margin:var(--space-3) 0 0;color:var(--color-text-secondary);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed)}
.valida-drawer__body{flex:1;overflow:auto;margin-top:var(--space-6);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed)}
.valida-drawer__footer{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--color-border-subtle)}
.valida-drawer__close{display:grid;place-items:center;width:40px;height:40px;margin:-6px -6px 0 0;padding:0;border:1px solid var(--color-border-subtle);border-radius:var(--r-full);background:var(--color-surface-secondary);box-shadow:var(--shadow-control);color:var(--color-text-secondary);cursor:pointer}
.valida-drawer__close:hover{border-color:var(--color-control-border-hover);background:var(--color-surface-accent);color:var(--color-text-accent)}.valida-drawer__close:focus-visible{outline:none;box-shadow:var(--color-focus-ring)}
.valida-drawer--right[data-starting-style],.valida-drawer--right[data-ending-style]{transform:translateX(100%)}.valida-drawer--left[data-starting-style],.valida-drawer--left[data-ending-style]{transform:translateX(-100%)}.valida-drawer--bottom[data-starting-style],.valida-drawer--bottom[data-ending-style]{transform:translateY(100%)}
.valida-drawer__backdrop[data-starting-style],.valida-drawer__backdrop[data-ending-style]{opacity:0}

@media (prefers-reduced-motion:reduce){.valida-drawer,.valida-drawer__backdrop{transition:none !important}}
@media (max-width:520px){.valida-drawer:not(.valida-drawer--bottom){width:100%;border-radius:0}.valida-drawer__content{padding:var(--space-5)}}

.valida-dropdown{min-width:220px;max-width:min(320px,calc(100vw - 16px));padding:var(--space-2);border:1px solid var(--color-border-subtle);border-radius:var(--r-lg);background:var(--color-surface-card);color:var(--color-text-primary);outline:none;transform-origin:var(--transform-origin);transition:opacity var(--motion-fast) var(--motion-easing),transform var(--motion-fast) var(--motion-easing)}
.valida-dropdown[data-starting-style],.valida-dropdown[data-ending-style]{opacity:0;transform:scale(.97)}
.valida-dropdown__entry{display:contents}.valida-dropdown__item{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:var(--space-2);min-height:40px;padding:var(--space-2) var(--space-3);border-radius:var(--r-md);color:var(--color-text-secondary);font-size:var(--font-size-sm);line-height:var(--line-height-default);outline:none;cursor:pointer;user-select:none}
.valida-dropdown__item[data-highlighted]{background:var(--color-surface-accent);color:var(--color-text-accent)}.valida-dropdown__item[data-disabled]{color:var(--color-text-muted);cursor:not-allowed;opacity:.62}.valida-dropdown__item--destructive:not([data-disabled]){color:var(--tone-danger-tx)}
.valida-dropdown__icon,.valida-dropdown__chevron{display:grid;place-items:center}.valida-dropdown__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.valida-dropdown__shortcut{padding:0;border:0;background:transparent;color:var(--color-text-muted);font-family:var(--font-mono);font-size:var(--font-size-xs)}
.valida-dropdown__separator{height:1px;margin:var(--space-2);background:var(--color-border-subtle)}

@media (prefers-reduced-motion:reduce){.valida-dropdown{transition:none !important}}

.valida-tooltip{z-index:var(--z-toast);max-width:min(280px,calc(100vw - 16px));padding:var(--space-2) var(--space-3);border:1px solid var(--color-border-default);border-radius:var(--r-md);background:var(--color-surface-elevated);color:var(--color-text-primary);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);line-height:var(--line-height-default);text-wrap:balance;transform-origin:var(--transform-origin);transition:opacity var(--motion-fast) var(--motion-easing),transform var(--motion-fast) var(--motion-easing)}
.valida-tooltip[data-starting-style],.valida-tooltip[data-ending-style]{opacity:0;transform:scale(.96)}.valida-tooltip__arrow{display:flex;color:var(--color-surface-elevated)}.valida-tooltip__arrow>svg{fill:currentColor}

@media (prefers-reduced-motion:reduce){.valida-tooltip{transition:none !important}}

.valida-combobox{display:grid;gap:var(--space-2);width:100%}.valida-combobox__label{color:var(--color-text-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}
.valida-combobox__control{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;min-height:var(--control-default);border:1px solid var(--color-control-border);border-radius:var(--r-control);background:var(--color-input-bg);box-shadow:var(--shadow-control);color:var(--color-text-secondary);transition:border-color var(--motion-default) var(--motion-easing),box-shadow var(--motion-default) var(--motion-easing)}
.valida-combobox__control:focus-within{border-color:var(--color-control-border-selected);box-shadow:var(--color-focus-ring)}.valida-combobox--invalid .valida-combobox__control{border-color:var(--color-control-invalid)}
.valida-combobox__search{margin-left:var(--space-3)}.valida-combobox__input{min-width:0;width:100%;height:42px;padding:0 var(--space-3);border:0;background:transparent;color:var(--color-text-primary);font:inherit;font-size:var(--font-size-sm);outline:none}.valida-combobox__input::placeholder{color:var(--color-text-hint)}
.valida-combobox__clear{display:grid;place-items:center;width:40px;height:40px;margin-right:var(--space-1);padding:0;border:0;border-radius:var(--r-full);background:transparent;color:var(--color-text-muted);cursor:pointer}.valida-combobox__clear:hover{background:var(--color-surface-accent);color:var(--color-text-accent)}.valida-combobox__clear:focus-visible{outline:none;box-shadow:var(--color-focus-ring)}.valida-combobox__clear[data-disabled]{display:none}
.valida-combobox__help{margin:0;color:var(--color-text-muted);font-size:var(--font-size-xs);line-height:var(--line-height-default)}.valida-combobox__help--error{color:var(--tone-danger-tx)}
.valida-combobox__popup{min-width:var(--anchor-width);max-width:min(420px,calc(100vw - 16px));max-height:min(320px,var(--available-height));overflow:auto;padding:var(--space-2);border:1px solid var(--color-border-subtle);border-radius:var(--r-lg);background:var(--color-surface-card);color:var(--color-text-primary);outline:none;transform-origin:var(--transform-origin);transition:opacity var(--motion-fast) var(--motion-easing),transform var(--motion-fast) var(--motion-easing)}
.valida-combobox__popup[data-starting-style],.valida-combobox__popup[data-ending-style]{opacity:0;transform:scale(.98)}.valida-combobox__list{display:grid;gap:var(--space-1)}
.valida-combobox__option{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-2);min-height:40px;padding:var(--space-2) var(--space-3);border-radius:var(--r-md);color:var(--color-text-secondary);font-size:var(--font-size-sm);outline:none;cursor:pointer}.valida-combobox__option[data-highlighted]{background:var(--color-surface-accent);color:var(--color-text-accent)}.valida-combobox__option[data-disabled]{color:var(--color-text-muted);cursor:not-allowed;opacity:.62}.valida-combobox__indicator{display:grid;place-items:center;color:var(--color-text-accent)}.valida-combobox__empty{padding:var(--space-4);color:var(--color-text-muted);font-size:var(--font-size-sm);text-align:center}

@media (prefers-reduced-motion:reduce){.valida-combobox__control,.valida-combobox__popup{transition:none !important}}

.valida-data-grid{width:100%;overflow-x:auto;border:1px solid var(--color-border-subtle);border-radius:var(--r-lg);background:var(--color-surface-card);box-shadow:var(--shadow-control)}
.valida-data-grid table{width:100%;min-width:640px;border-collapse:collapse;color:var(--color-text-primary);font-size:var(--font-size-sm)}.valida-data-grid caption{padding:var(--space-4);border-bottom:1px solid var(--color-border-subtle);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);text-align:left}.valida-data-grid th,.valida-data-grid td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border-subtle);text-align:left;vertical-align:middle}.valida-data-grid th{background:var(--color-surface-secondary);color:var(--color-text-secondary);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:.02em}.valida-data-grid tbody tr:last-child td{border-bottom:0}.valida-data-grid tbody tr:hover{background:var(--color-hover-bg)}.valida-data-grid tbody tr[aria-selected="true"]{background:var(--color-surface-accent)}.valida-data-grid [data-align="center"]{text-align:center}.valida-data-grid [data-align="end"]{text-align:right}.valida-data-grid__selection{width:48px;padding:0!important;text-align:center!important}.valida-data-grid__selection-control{display:grid;width:40px;height:40px;margin:auto;place-items:center;cursor:pointer}.valida-data-grid__selection-control:has(input:disabled){cursor:not-allowed;opacity:.58}.valida-data-grid__selection-control input{width:18px;height:18px;margin:0;accent-color:var(--color-action-primary)}.valida-data-grid__selection-control input:focus-visible{outline:none;box-shadow:var(--color-focus-ring)}
.valida-data-grid__state{display:grid;gap:var(--space-2);min-height:136px;place-content:center;padding:var(--space-6);border:1px dashed var(--color-control-border);border-radius:var(--r-lg);background:var(--color-surface-secondary);color:var(--color-text-secondary);font-size:var(--font-size-sm);text-align:center}.valida-data-grid__state strong{color:var(--color-text-primary);font-size:var(--font-size-base)}.valida-data-grid__state--error{border-color:var(--tone-danger-bd);background:var(--tone-danger-bg);color:var(--tone-danger-tx)}.valida-data-grid__state--error strong{color:inherit}

.valida-pagination{display:flex;align-items:center;gap:var(--space-2)}.valida-pagination__pages{display:flex;align-items:center;gap:var(--space-1);margin:0;padding:0;list-style:none}.valida-pagination__entry{display:flex;align-items:center;gap:var(--space-1)}.valida-pagination__button{display:grid;min-width:40px;height:40px;padding:0 var(--space-2);place-items:center;border:1px solid transparent;border-radius:var(--r-md);background:transparent;color:var(--color-text-secondary);font:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer}.valida-pagination__button:hover:not(:disabled){border-color:var(--color-border-subtle);background:var(--color-hover-bg);color:var(--color-text-primary)}.valida-pagination__button[aria-current="page"]{border-color:var(--color-control-border-selected);background:var(--color-surface-accent);color:var(--color-text-accent);font-weight:var(--font-weight-semibold)}.valida-pagination__button:focus-visible{outline:none;box-shadow:var(--color-focus-ring)}.valida-pagination__button:disabled{cursor:not-allowed;opacity:.45}.valida-pagination__ellipsis{display:grid;width:24px;height:40px;place-items:center;color:var(--color-text-muted)}

.valida-skeleton{width:100%}.valida-skeleton__visual{display:grid;gap:var(--space-2)}.valida-skeleton__line{display:block;width:var(--valida-skeleton-width,100%);height:14px;border-radius:var(--r-full);background:linear-gradient(90deg,var(--color-surface-accent),var(--color-surface-secondary),var(--color-surface-accent));background-size:200% 100%;animation:valida-skeleton-shimmer 1.4s var(--motion-easing) infinite}.valida-skeleton--avatar .valida-skeleton__line{width:48px;height:48px}.valida-skeleton--card .valida-skeleton__line{width:min(100%,520px);height:104px;border-radius:var(--r-lg)}
@keyframes valida-skeleton-shimmer{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.valida-skeleton__line{animation:none!important}}
@media (max-width:640px){.valida-data-grid{border-radius:var(--r-md)}.valida-pagination{justify-content:space-between}.valida-pagination__pages li:not(:has([aria-current="page"])){display:none}.valida-pagination__pages li:has([aria-current="page"]){display:flex}.valida-pagination__ellipsis{display:none}}

.valida-file-upload{display:grid;gap:var(--space-4);width:100%}.valida-file-upload__dropzone{position:relative;display:grid;min-height:184px;padding:var(--space-6);place-content:center;justify-items:center;gap:var(--space-2);border:1.5px dashed var(--color-control-border);border-radius:var(--r-xl);background:var(--color-surface-secondary);color:var(--color-text-secondary);text-align:center;cursor:pointer;transition:border-color var(--motion-fast) var(--motion-easing),background var(--motion-fast) var(--motion-easing),box-shadow var(--motion-fast) var(--motion-easing)}.valida-file-upload__dropzone:hover:not([data-disabled]){border-color:var(--color-control-border-hover);background:var(--color-surface-accent)}.valida-file-upload__dropzone:focus-within{border-color:var(--color-control-border-selected);box-shadow:var(--color-focus-ring)}.valida-file-upload__dropzone[data-disabled]{cursor:not-allowed;opacity:.58}.valida-file-upload__dropzone>input{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.valida-file-upload__icon{display:grid;width:44px;height:44px;place-items:center;border:1px solid var(--color-border-subtle);border-radius:var(--r-full);background:var(--color-surface-card);box-shadow:var(--shadow-control);color:var(--color-text-accent)}.valida-file-upload__dropzone strong{color:var(--color-text-primary);font-size:var(--font-size-base)}.valida-file-upload__dropzone>span:not(.valida-file-upload__icon){font-size:var(--font-size-sm)}.valida-file-upload__dropzone small{color:var(--color-text-muted);font-size:var(--font-size-xs)}
.valida-file-upload__rejections{display:grid;gap:var(--space-2)}.valida-file-upload__rejections:empty{display:none}.valida-file-upload__rejections p{display:flex;align-items:flex-start;gap:var(--space-2);margin:0;padding:var(--space-3);border:1px solid var(--tone-danger-bd);border-radius:var(--r-md);background:var(--tone-danger-bg);color:var(--tone-danger-tx);font-size:var(--font-size-sm)}
.valida-file-upload__items{display:grid;gap:var(--space-2);margin:0;padding:0;list-style:none}.valida-file-upload__item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-3);min-height:64px;padding:var(--space-3);border:1px solid var(--color-border-subtle);border-radius:var(--r-lg);background:var(--color-surface-card);color:var(--color-text-primary)}.valida-file-upload__item[data-status="error"]{border-color:var(--tone-danger-bd)}.valida-file-upload__item[data-status="complete"]{border-color:var(--tone-success-bd)}.valida-file-upload__file-icon{display:grid;width:36px;height:36px;place-items:center;border-radius:var(--r-md);background:var(--color-surface-accent);color:var(--color-text-accent)}.valida-file-upload__item[data-status="error"] .valida-file-upload__file-icon{background:var(--tone-danger-bg);color:var(--tone-danger-tx)}.valida-file-upload__item[data-status="complete"] .valida-file-upload__file-icon{background:var(--tone-success-bg);color:var(--tone-success-tx)}.valida-file-upload__item-copy{display:grid;gap:var(--space-1);min-width:0}.valida-file-upload__item-copy>strong{overflow:hidden;font-size:var(--font-size-sm);text-overflow:ellipsis;white-space:nowrap}.valida-file-upload__item-copy>span{color:var(--color-text-secondary);font-size:var(--font-size-xs)}.valida-file-upload__progress{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-2)}.valida-file-upload__progress progress{width:100%;height:8px;accent-color:var(--color-action-primary)}.valida-file-upload__actions{display:flex;gap:var(--space-1)}.valida-file-upload__actions button{display:grid;width:40px;height:40px;padding:0;place-items:center;border:1px solid var(--color-border-subtle);border-radius:var(--r-full);background:var(--color-surface-secondary);color:var(--color-text-secondary);cursor:pointer}.valida-file-upload__actions button:hover{border-color:var(--color-control-border-hover);background:var(--color-surface-accent);color:var(--color-text-accent)}.valida-file-upload__actions button:focus-visible{outline:none;box-shadow:var(--color-focus-ring)}
@media (prefers-reduced-motion:reduce){.valida-file-upload__dropzone{transition:none!important}}
@media (max-width:520px){.valida-file-upload__dropzone{min-height:164px;padding:var(--space-5)}.valida-file-upload__item{grid-template-columns:auto minmax(0,1fr)}.valida-file-upload__actions{grid-column:1/-1;justify-content:flex-end}}

.valida-error-boundary{position:relative;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);padding-right:calc(var(--space-4) + 36px);border:1px solid var(--tone-danger-bd);border-radius:var(--r-xl);background:var(--tone-danger-bg);color:var(--tone-danger-tx)}.valida-error-boundary__icon{display:grid;flex:none;width:36px;height:36px;place-items:center;border:1px solid currentColor;border-radius:var(--r-full)}.valida-error-boundary__copy{display:grid;gap:var(--space-1);min-width:0}.valida-error-boundary__retry{position:absolute;top:var(--space-3);right:var(--space-3);display:grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid color-mix(in srgb,currentColor 35%,transparent);border-radius:var(--r-full);background:transparent;color:inherit;cursor:pointer;transition:background var(--motion-fast) var(--motion-easing),border-color var(--motion-fast) var(--motion-easing)}.valida-error-boundary__retry:hover{background:color-mix(in srgb,currentColor 10%,transparent);border-color:currentColor}.valida-error-boundary__retry:focus-visible{outline:none;box-shadow:var(--color-focus-ring)}.valida-error-boundary__copy h2{margin:0;color:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);letter-spacing:-.01em;line-height:var(--line-height-compact)}.valida-error-boundary__copy p{margin:0;color:inherit;font-size:var(--font-size-xs);line-height:var(--line-height-default)}
.valida-theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:44px;padding:var(--space-2) var(--space-4);border:1px solid var(--color-control-border);border-radius:var(--r-control);background:var(--color-surface-card);box-shadow:var(--shadow-control);color:var(--color-text-primary);font:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:background var(--motion-fast) var(--motion-easing),border-color var(--motion-fast) var(--motion-easing),box-shadow var(--motion-fast) var(--motion-easing),color var(--motion-fast) var(--motion-easing)}.valida-theme-toggle:hover{border-color:var(--color-control-border-hover);background:var(--color-hover-bg)}.valida-theme-toggle:focus-visible{outline:none;box-shadow:var(--color-focus-ring)}
@media (prefers-reduced-motion:reduce){.valida-theme-toggle{transition:none!important}}

.valida-tabs{display:grid;gap:var(--space-3);width:100%}.valida-tabs__list{position:relative;display:flex;gap:var(--space-1);padding:var(--space-1);border:1px solid var(--color-control-border);border-radius:var(--r-lg);background:var(--color-surface-card);overflow-x:auto}.valida-tabs__tab{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 var(--space-3);border:0;border-radius:var(--r-md);background:transparent;color:var(--color-text-secondary);font:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);white-space:nowrap;cursor:pointer}.valida-tabs__tab:hover:not([data-disabled]){background:var(--color-hover-bg);color:var(--color-text-primary)}.valida-tabs__tab[data-active]{color:var(--color-action-primary-foreground)}.valida-tabs__tab[data-disabled]{cursor:not-allowed;opacity:.5}.valida-tabs__tab:focus-visible{outline:none;box-shadow:var(--color-focus-ring)}.valida-tabs__indicator{position:absolute;z-index:0;left:var(--active-tab-left);top:var(--space-1);width:var(--active-tab-width);height:var(--active-tab-height);border-radius:var(--r-md);background:var(--color-action-primary);transition:left var(--motion-fast) var(--motion-easing),top var(--motion-fast) var(--motion-easing),width var(--motion-fast) var(--motion-easing),height var(--motion-fast) var(--motion-easing)}.valida-tabs__panels{min-width:0}.valida-tabs__panel{color:var(--color-text-primary);outline:none}.valida-tabs__panel:focus-visible{border-radius:var(--r-md);box-shadow:var(--color-focus-ring)}.valida-tabs--vertical{grid-template-columns:minmax(140px,220px) minmax(0,1fr);align-items:start}.valida-tabs--vertical .valida-tabs__list{flex-direction:column;overflow:visible}.valida-tabs--vertical .valida-tabs__tab{justify-content:flex-start}.valida-tabs--vertical .valida-tabs__indicator{left:var(--space-1);top:var(--active-tab-top);width:var(--active-tab-width);height:var(--active-tab-height)}
@media (prefers-reduced-motion:reduce){.valida-tabs__indicator{transition:none!important}}
@media (max-width:520px){.valida-tabs--vertical{grid-template-columns:1fr}.valida-tabs--vertical .valida-tabs__list{flex-direction:row;overflow-x:auto}.valida-tabs--vertical .valida-tabs__tab{justify-content:center}.valida-tabs--vertical .valida-tabs__indicator{left:var(--active-tab-left);top:var(--space-1)}}

.valida-accordion{border:1px solid var(--color-control-border);border-radius:var(--r-lg);background:var(--color-surface-card);overflow:hidden}.valida-accordion__item+.valida-accordion__item{border-top:1px solid var(--color-border-subtle)}.valida-accordion__header{margin:0}.valida-accordion__trigger{align-items:center;background:transparent;border:0;color:var(--color-text-primary);cursor:pointer;display:flex;font:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);gap:var(--space-3);justify-content:space-between;min-height:var(--control-default);padding:var(--space-3) var(--space-4);text-align:left;width:100%}.valida-accordion__trigger:hover:not([data-disabled]){background:var(--color-hover-bg)}.valida-accordion__trigger[data-disabled]{color:var(--color-text-muted);cursor:not-allowed}.valida-accordion__trigger:focus-visible{box-shadow:inset var(--color-focus-ring);outline:none}.valida-accordion__chevron{flex:none;transition:transform var(--motion-fast) var(--motion-easing)}.valida-accordion__trigger[data-panel-open] .valida-accordion__chevron{transform:rotate(180deg)}.valida-accordion__panel{height:var(--accordion-panel-height);overflow:hidden;transition:height var(--motion-fast) var(--motion-easing)}.valida-accordion__panel>div{color:var(--color-text-secondary);font-size:var(--font-size-sm);line-height:var(--line-height-default);padding:0 var(--space-4) var(--space-4)}

.valida-avatar-wrap{align-items:center;display:inline-flex;gap:var(--space-2)}.valida-avatar{align-items:center;background:var(--color-surface-accent);border:1px solid var(--color-border-subtle);border-radius:var(--r-full);color:var(--color-text-accent);display:inline-flex;flex:none;font-weight:var(--font-weight-semibold);justify-content:center;overflow:hidden}.valida-avatar--sm{font-size:var(--font-size-xs);height:32px;width:32px}.valida-avatar--md{font-size:var(--font-size-sm);height:40px;width:40px}.valida-avatar--lg{font-size:var(--font-size-lg);height:56px;width:56px}.valida-avatar__image{height:100%;object-fit:cover;width:100%}.valida-avatar__fallback{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.valida-avatar__status{align-items:center;color:var(--color-text-secondary);display:inline-flex;font-size:var(--font-size-xs);gap:var(--space-1);white-space:nowrap}.valida-avatar__status>span{background:var(--tone-neutral-tx);border-radius:var(--r-full);height:8px;width:8px}.valida-avatar__status--online>span{background:var(--tone-success-tx)}.valida-avatar__status--away>span{background:var(--tone-warning-tx)}.valida-avatar__status--busy>span{background:var(--tone-danger-tx)}

.valida-breadcrumb{min-width:0}.valida-breadcrumb ol{align-items:center;display:flex;list-style:none;margin:0;min-width:0;padding:0}.valida-breadcrumb li{align-items:center;color:var(--color-text-secondary);display:flex;font-size:var(--font-size-sm);min-width:0}.valida-breadcrumb a,.valida-breadcrumb li>span{border-radius:var(--r-sm);overflow:hidden;padding:var(--space-1);text-overflow:ellipsis;white-space:nowrap}.valida-breadcrumb a{color:var(--color-text-accent);text-decoration:none}.valida-breadcrumb a:hover{text-decoration:underline}.valida-breadcrumb a:focus-visible{box-shadow:var(--color-focus-ring);outline:none}.valida-breadcrumb [aria-current="page"]{color:var(--color-text-primary);font-weight:var(--font-weight-semibold)}.valida-breadcrumb__separator{flex:none;margin:0 var(--space-1)}.valida-breadcrumb__responsive-ellipsis{display:none!important}@media (prefers-reduced-motion:reduce){.valida-accordion__chevron,.valida-accordion__panel{transition:none!important}}@media (max-width:520px){.valida-breadcrumb__responsive-middle{display:none!important}.valida-breadcrumb__responsive-ellipsis{display:flex!important}}

/* Windows High Contrast and browser forced-colors contract. System colors are
 * intentional here: the operating system, not a VALIDA token, is authoritative
 * when a user requests an enforced contrast palette. */
@media (forced-colors:active){
  :where(.valida-button,.valida-field__input,.valida-textarea,.valida-select__trigger,.valida-switch,.valida-checkbox,.valida-radio,.valida-dialog,.valida-drawer,.valida-dropdown,.valida-tooltip,.valida-combobox__control,.valida-combobox__popup,.valida-data-grid,.valida-file-upload__dropzone,.valida-tabs__list,.valida-accordion,.valida-card,.valida-alert,.valida-toast){
    border-color:CanvasText;
    box-shadow:none;
    forced-color-adjust:auto;
  }
  :where(button,[href],input,select,textarea,[tabindex]):focus-visible,
  :where(.valida-combobox__control,.valida-file-upload__dropzone):focus-within{
    outline:2px solid Highlight;
    outline-offset:2px;
    box-shadow:none;
  }
  :where([aria-current="page"],[aria-selected="true"],[aria-checked="true"],[data-active],[data-highlighted],[data-panel-open]){
    outline:2px solid Highlight;
    outline-offset:-2px;
  }
  :where(:disabled,[aria-disabled="true"],[data-disabled]){
    border-color:GrayText;
    color:GrayText;
  }
  :where(.valida-tabs__indicator,.valida-switch__thumb,.valida-progress__bar,.valida-skeleton__line){
    background:Highlight;
    forced-color-adjust:none;
  }
  :where(.valida-alert,.valida-toast,.valida-error-boundary,.valida-data-grid__state,.valida-file-upload__rejections p){
    border:1px solid currentColor;
  }
}

/* Runtime VALIDA lockup: approved mark + wordmark token, optional product suffix.
   Divider + product follow the approved SVG anatomy (valida-gestor-lockup.svg):
   cap-height rule (.667em of the wordmark), product at 38/84 of the wordmark,
   both centered on the divider's vertical middle — owner decision 2026-08-25. */
.valida-brand-lockup{display:inline-flex;align-items:center;gap:.3em;min-width:0;white-space:nowrap}
.valida-brand-lockup__mark{display:block;flex:none;width:auto}
/* Inherited display roles follow the nearest boundary, not any dark ancestor.
   These select existing approved SVGs; they never redraw or recolor the mark. */
:root,.light,[data-theme="light"]{--valida-brand-light-display:block;--valida-brand-dark-display:none}
.dark,[data-theme="dark"]{--valida-brand-light-display:none;--valida-brand-dark-display:block}
.valida-brand-lockup__mark--light{display:var(--valida-brand-light-display,block)}
.valida-brand-lockup__mark--dark{display:var(--valida-brand-dark-display,none)}
.valida-brand-lockup__wordmark{color:var(--color-wordmark);font-family:var(--font-sans);font-size:1em;font-weight:var(--font-weight-semibold);letter-spacing:-.02em;line-height:1}
.valida-brand-lockup__divider{background:var(--color-border-hover);border-radius:var(--r-full);flex:none;height:.667em;opacity:.55;width:max(1px,.036em)}
.valida-brand-lockup__product{color:var(--color-text-muted);font-family:var(--font-sans);font-size:max(9px,.4524em);font-weight:var(--font-weight-medium);letter-spacing:.013em;line-height:1;text-transform:uppercase}
.valida-brand-lockup--sm{font-size:var(--font-size-sm)}
.valida-brand-lockup--sm .valida-brand-lockup__mark{height:16px}
.valida-brand-lockup--md{font-size:var(--font-size-md)}
.valida-brand-lockup--md .valida-brand-lockup__mark{height:20px}
.valida-brand-lockup--lg{font-size:var(--font-size-xl)}
.valida-brand-lockup--lg .valida-brand-lockup__mark{height:26px}


/* Post-0.3 component families live here so their contracts remain reviewable by family. */
.valida-accordion__trigger[data-panel-open] .valida-accordion__chevron{transform:rotate(90deg)}

.valida-popover__positioner{z-index:var(--z-popover)}.valida-popover{background:var(--color-surface-elevated);border:1px solid var(--color-control-border);border-radius:var(--r-lg);color:var(--color-text-primary);max-height:min(70vh,520px);max-width:min(calc(100vw - var(--space-4)),420px);min-width:280px;overflow:auto;transform-origin:var(--transform-origin)}.valida-popover__header{align-items:flex-start;border-bottom:1px solid var(--color-border-subtle);display:flex;gap:var(--space-4);justify-content:space-between;padding:var(--space-4)}.valida-popover__title{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);margin:0}.valida-popover__description{color:var(--color-text-secondary);font-size:var(--font-size-xs);margin:var(--space-1) 0 0}.valida-popover__close{align-items:center;background:transparent;border:1px solid transparent;border-radius:var(--r-md);color:var(--color-text-secondary);cursor:pointer;display:inline-flex;height:36px;justify-content:center;width:36px}.valida-popover__close:hover{background:var(--color-hover-bg);color:var(--color-text-primary)}.valida-popover__close:focus-visible{box-shadow:var(--color-focus-ring);outline:none}.valida-popover__body{padding:var(--space-4)}

.valida-command__backdrop{background:var(--color-overlay-backdrop);inset:0;position:fixed;transition:opacity var(--motion-fast) var(--motion-easing);z-index:var(--z-modal)}.valida-command__viewport{align-items:flex-start;display:flex;inset:0;justify-content:center;padding:12vh var(--space-4) var(--space-4);position:fixed;z-index:var(--z-modal)}.valida-command{background:var(--color-surface-elevated);border:1px solid var(--color-control-border);border-radius:var(--r-xl);max-height:min(72vh,620px);max-width:640px;overflow:hidden;width:100%}.valida-command__search{align-items:center;border-bottom:1px solid var(--color-border-subtle);display:flex;gap:var(--space-3);padding:var(--space-3) var(--space-4)}.valida-command__search>svg{color:var(--color-text-secondary);flex:none}.valida-command__search input{background:transparent;border:0;color:var(--color-text-primary);font:inherit;min-height:44px;outline:0;width:100%}.valida-command__close{align-items:center;background:transparent;border:1px solid transparent;border-radius:var(--r-md);color:var(--color-text-secondary);display:flex;height:36px;justify-content:center;width:36px}.valida-command__close:focus-visible{box-shadow:var(--color-focus-ring);outline:none}.valida-command__results{max-height:52vh;overflow:auto;padding:var(--space-2)}.valida-command__group h3{color:var(--color-text-muted);font-size:var(--font-size-xs);letter-spacing:.06em;margin:var(--space-3) var(--space-2) var(--space-1);text-transform:uppercase}.valida-command__item{align-items:center;background:transparent;border:0;border-radius:var(--r-md);color:var(--color-text-primary);cursor:pointer;display:flex;gap:var(--space-3);min-height:48px;padding:var(--space-2) var(--space-3);text-align:left;width:100%}.valida-command__item>span{display:grid;gap:2px}.valida-command__item small{color:var(--color-text-secondary)}.valida-command__item[aria-selected="true"]{background:var(--color-selected-bg)}.valida-command__item:focus-visible{box-shadow:var(--color-focus-ring);outline:none}.valida-command__item:disabled{cursor:not-allowed;opacity:.5}.valida-command__empty{color:var(--color-text-secondary);padding:var(--space-6);text-align:center}

.valida-date-picker{display:grid;gap:var(--space-1)}.valida-date-picker>label{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}.valida-date-picker__control{align-items:center;background:var(--color-input-bg);border:1px solid var(--color-control-border);border-radius:var(--r-md);display:flex;min-height:var(--control-default)}.valida-date-picker__control:focus-within{border-color:var(--color-focus);box-shadow:var(--color-focus-ring)}.valida-date-picker__control input{background:transparent;border:0;color:var(--color-text-primary);font:inherit;min-height:42px;outline:0;padding:0 var(--space-3);width:100%}.valida-date-picker__control>button{align-items:center;background:transparent;border:0;border-left:1px solid var(--color-border-subtle);color:var(--color-text-secondary);display:flex;height:42px;justify-content:center;width:44px}.valida-date-picker__hint,.valida-date-picker__error{font-size:var(--font-size-xs);margin:0}.valida-date-picker__hint{color:var(--color-text-secondary)}.valida-date-picker__error{color:var(--tone-danger-tx)}.valida-date-picker.is-invalid .valida-date-picker__control{border-color:var(--color-control-invalid)}.valida-date-picker__calendar{display:grid;gap:var(--space-3);width:294px}.valida-date-picker__month{align-items:center;display:flex;gap:var(--space-2);justify-content:space-between;text-transform:capitalize}.valida-date-picker__month button{align-items:center;background:transparent;border:1px solid transparent;border-radius:var(--r-md);color:var(--color-text-primary);display:flex;height:40px;justify-content:center;width:40px}.valida-date-picker__month button:hover{background:var(--color-hover-bg)}.valida-date-picker__month button:focus-visible{box-shadow:var(--color-focus-ring);outline:none}.valida-date-picker__grid{display:grid;gap:2px}.valida-date-picker__weekdays,.valida-date-picker__week{display:grid;grid-template-columns:repeat(7,1fr)}.valida-date-picker__weekdays span{color:var(--color-text-muted);font-size:var(--font-size-xs);text-align:center}.valida-date-picker__blank{min-height:40px}.valida-date-picker__grid button{align-items:center;background:transparent;border:1px solid transparent;border-radius:var(--r-md);color:var(--color-text-primary);display:flex;height:40px;justify-content:center}.valida-date-picker__grid button:hover:not(:disabled){background:var(--color-hover-bg)}.valida-date-picker__grid button[aria-selected="true"]{background:var(--color-action-primary);color:var(--color-action-primary-foreground)}.valida-date-picker__grid button:focus-visible{box-shadow:var(--color-focus-ring);outline:none}.valida-date-picker__grid button:disabled{color:var(--color-text-muted);cursor:not-allowed;opacity:.5}

@media(prefers-reduced-motion:reduce){.valida-command__backdrop{transition:none!important}}
.valida-popover__positioner{z-index:var(--z-toast)}

.valida-tree{display:grid;gap:2px}.valida-tree__branch{display:grid}.valida-tree [role="group"]{display:grid;margin-left:var(--space-5)}.valida-tree__item{align-items:center;border-radius:var(--r-md);color:var(--color-text-primary);cursor:pointer;display:flex;gap:var(--space-2);min-height:40px;padding:var(--space-1) var(--space-2)}.valida-tree__item:hover{background:var(--color-hover-bg)}.valida-tree__item[aria-selected="true"]{background:var(--color-selected-bg);font-weight:var(--font-weight-semibold)}.valida-tree__item[aria-disabled="true"]{color:var(--color-text-muted);cursor:not-allowed}.valida-tree__item:focus-visible{box-shadow:var(--color-focus-ring);outline:none}.valida-tree__toggle{align-items:center;background:transparent;border:0;color:inherit;display:flex;height:32px;justify-content:center;padding:0;width:32px}.valida-tree__toggle:disabled{opacity:.35}.valida-tree__item[aria-expanded="true"]>.valida-tree__toggle svg{transform:rotate(90deg)}

.valida-chart-adapter{--valida-chart-series-1:var(--color-data-series-1);--valida-chart-series-2:var(--color-data-series-2);--valida-chart-series-3:var(--color-data-series-3);--valida-chart-series-4:var(--color-data-series-4);--valida-chart-series-5:var(--color-data-series-5);--valida-chart-series-6:var(--color-data-series-6);background:var(--color-surface-card);border:1px solid var(--color-border-subtle);border-radius:var(--r-lg);display:grid;gap:var(--space-4);margin:0;padding:var(--space-5)}.valida-chart-adapter figcaption h3{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);margin:0}.valida-chart-adapter figcaption p{color:var(--color-text-secondary);font-size:var(--font-size-xs);margin:var(--space-1) 0 0}.valida-chart-adapter__legend{display:flex;flex-wrap:wrap;gap:var(--space-4);list-style:none;margin:0;padding:0}.valida-chart-adapter__legend li{align-items:center;display:flex;font-size:var(--font-size-xs);gap:var(--space-2)}.valida-chart-adapter__legend li>span{border-radius:var(--r-full);height:10px;width:10px}.valida-chart-adapter__plot{align-items:center;color:var(--color-text-secondary);display:flex;justify-content:center;min-height:220px;overflow:hidden}.valida-chart-adapter__plot>svg{height:auto;max-height:280px;width:100%}.valida-chart-adapter__state{align-items:center;background:var(--color-surface-secondary);border-radius:var(--r-md);color:var(--color-text-secondary);display:flex;justify-content:center;min-height:180px;padding:var(--space-6);text-align:center}.valida-chart-adapter__state.is-error{background:var(--tone-danger-bg);color:var(--tone-danger-tx)}.valida-chart-adapter__data{border-top:1px solid var(--color-border-subtle);padding-top:var(--space-3)}.valida-chart-adapter__data summary{color:var(--color-text-accent);cursor:pointer;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}.valida-chart-adapter__table{margin-top:var(--space-3);overflow:auto}.valida-chart-adapter__table table{border-collapse:collapse;width:100%}.valida-chart-adapter__table caption{font-size:var(--font-size-xs);text-align:left}.valida-chart-adapter__table th,.valida-chart-adapter__table td{border-bottom:1px solid var(--color-border-subtle);font-size:var(--font-size-sm);padding:var(--space-2);text-align:left}.valida-chart-adapter__table th{font-weight:var(--font-weight-semibold)}

/* Estados vacíos, spinner, progreso y stepper — familia Estado ampliada (owner integration 2026-08-27). */
.valida-empty-state{display:grid;justify-items:center;gap:var(--space-2);padding:var(--space-6);border:1px dashed var(--color-border-default);border-radius:var(--r-lg);background:var(--color-surface-card);text-align:center}.valida-empty-state__icon{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-lg);background:var(--color-surface-accent);color:var(--color-text-accent)}.valida-empty-state__title{margin:0;color:var(--color-text-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}.valida-empty-state__description{margin:0;max-width:36ch;color:var(--color-text-secondary);font-size:var(--font-size-xs);line-height:var(--line-height-default)}.valida-empty-state__actions{display:flex;gap:var(--space-2);margin-top:var(--space-2)}.valida-empty-state--compact{grid-auto-flow:column;justify-content:center;align-items:center;gap:var(--space-3);padding:var(--space-4);text-align:left}.valida-empty-state--compact .valida-empty-state__icon{width:28px;height:28px;border-radius:var(--r-md)}.valida-empty-state--compact .valida-empty-state__actions{margin-top:0}.valida-empty-state--error{border-style:solid;border-color:var(--tone-danger-bd);background:var(--tone-danger-bg)}.valida-empty-state--error .valida-empty-state__icon{background:transparent;border:1px solid currentColor;border-radius:var(--r-full);color:var(--tone-danger-tx)}.valida-empty-state--error .valida-empty-state__title{color:var(--tone-danger-tx)}.valida-empty-state--error .valida-empty-state__description{color:var(--tone-danger-tx)}
.valida-spinner{position:relative;display:inline-grid;place-items:center;color:var(--color-action-primary)}.valida-spinner__ring{width:100%;height:100%;border:2px solid color-mix(in srgb,currentColor 22%,transparent);border-top-color:currentColor;border-radius:var(--r-full);animation:valida-spin 1s linear infinite}.valida-spinner--page .valida-spinner__ring{border-width:3px}@keyframes valida-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.valida-spinner__ring{animation:valida-spinner-pulse 1.2s ease-in-out infinite;border-top-color:color-mix(in srgb,currentColor 22%,transparent)}@keyframes valida-spinner-pulse{50%{opacity:.35}}}
.valida-progress{display:grid;gap:var(--space-2)}.valida-progress__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3)}.valida-progress__label{color:var(--color-text-secondary);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium)}.valida-progress__value{color:var(--color-text-primary);font-family:var(--font-mono);font-size:var(--font-size-md);font-variant-numeric:tabular-nums;font-weight:var(--font-weight-semibold);letter-spacing:-.02em;line-height:1}.valida-progress__value small{margin-left:1px;color:var(--color-text-muted);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium)}.valida-progress__value--pending{color:var(--color-text-muted);letter-spacing:.12em}.valida-progress__track{position:relative;height:11px;overflow:hidden;border:1px solid var(--color-border-subtle);border-radius:var(--r-full);background:var(--color-surface-secondary)}.valida-progress__tick{position:absolute;top:1px;bottom:1px;width:1px;background:color-mix(in srgb,var(--color-border-default) 70%,transparent)}.valida-progress__fill{position:absolute;inset:0 auto 0 0;z-index:1;width:0;border-radius:var(--r-full);background:linear-gradient(90deg,color-mix(in srgb,var(--color-action-primary) 55%,var(--color-brand-navy)) 0%,var(--color-action-primary) 78%,color-mix(in srgb,var(--color-action-primary) 78%,var(--color-action-primary-foreground)) 100%);transition:width 320ms var(--motion-easing)}.valida-progress--indeterminate .valida-progress__fill{width:32%;animation:valida-progress-slide 1.4s cubic-bezier(.45,0,.25,1) infinite}@keyframes valida-progress-slide{from{transform:translateX(-120%)}to{transform:translateX(430%)}}@media (prefers-reduced-motion:reduce){.valida-progress--indeterminate .valida-progress__fill{animation:none;width:100%;opacity:.4}}
.valida-stepper{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0;padding:0;list-style:none}.valida-stepper__step{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border:1px solid var(--color-border-subtle);border-radius:var(--r-lg);background:var(--color-surface-card)}.valida-stepper__index{display:grid;flex:none;place-items:center;width:22px;height:22px;border-radius:var(--r-full);background:var(--color-surface-secondary);color:var(--color-text-muted);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold)}.valida-stepper__copy{display:grid}.valida-stepper__label{color:var(--color-text-secondary);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium)}.valida-stepper__description{color:var(--color-text-muted);font-size:var(--font-size-xs)}.valida-stepper__step.is-current{border-color:var(--color-border-hover);background:var(--color-surface-accent)}.valida-stepper__step.is-current .valida-stepper__index{background:var(--color-action-primary);color:var(--color-action-primary-foreground)}.valida-stepper__step.is-current .valida-stepper__label{color:var(--color-text-primary)}.valida-stepper__step.is-done .valida-stepper__index{background:var(--tone-success-bg);color:var(--tone-success-tx)}

.valida-flow-list{--valida-flow-marker-size:32px;color:var(--color-text-primary);display:grid;gap:0;max-width:760px;width:100%}
.valida-flow-list__terminal{align-items:center;display:grid;gap:var(--space-3);grid-template-columns:var(--valida-flow-marker-size) minmax(0,1fr);min-height:44px;padding-inline:var(--space-4)}
.valida-flow-list__terminal strong{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:.06em;text-transform:uppercase}
.valida-flow-list__terminal-marker{background:var(--color-control-indicator);border:4px solid var(--color-surface-card);border-radius:var(--r-full);box-shadow:0 0 0 1px var(--color-border-default);height:12px;justify-self:center;width:12px;z-index:1}
.valida-flow-list__terminal--start{padding-bottom:var(--space-2)}
.valida-flow-list__terminal--end{padding-top:var(--space-2)}
.valida-flow-list__stages{display:grid;gap:var(--space-3);list-style:none;margin:0;padding:0;position:relative}
.valida-flow-list__stages::before{background:var(--color-border-default);bottom:calc(var(--space-3) * -1);content:"";left:calc(var(--space-4) + var(--valida-flow-marker-size) / 2);position:absolute;top:calc(var(--space-3) * -1);width:1px}
.valida-flow-list__stage{background:var(--color-surface-card);border:1px solid var(--color-border-subtle);border-radius:var(--r-lg);display:grid;grid-template-columns:minmax(0,1fr) auto;min-width:0;position:relative;transition:background var(--motion-fast) var(--motion-easing),border-color var(--motion-fast) var(--motion-easing),box-shadow var(--motion-fast) var(--motion-easing)}
.valida-flow-list__stage:hover{border-color:var(--color-border-hover)}
.valida-flow-list__stage.is-selected{background:var(--color-surface-accent);border-color:var(--color-control-border-selected);box-shadow:inset 3px 0 0 var(--color-control-border-selected)}
.valida-flow-list__select{align-items:start;background:transparent;border:0;color:inherit;display:grid;font:inherit;gap:var(--space-3);grid-template-columns:var(--valida-flow-marker-size) minmax(0,1fr);min-height:72px;min-width:0;padding:var(--space-4);text-align:left;width:100%}
button.valida-flow-list__select{cursor:pointer}
button.valida-flow-list__select:focus-visible{border-radius:var(--r-lg);box-shadow:var(--color-focus-ring);outline:none}
.valida-flow-list__marker{align-items:center;background:var(--color-surface-secondary);border:1px solid var(--color-border-default);border-radius:var(--r-full);color:var(--color-text-secondary);display:inline-flex;font-family:var(--font-mono);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);height:var(--valida-flow-marker-size);justify-content:center;position:relative;width:var(--valida-flow-marker-size);z-index:1}
.valida-flow-list__marker.is-complete{background:var(--tone-success-bg);border-color:var(--tone-success-bd);color:var(--tone-success-tx)}
.valida-flow-list__marker.is-warning{background:var(--tone-warning-bg);border-color:var(--tone-warning-bd);color:var(--tone-warning-tx)}
.valida-flow-list__marker.is-error{background:var(--tone-danger-bg);border-color:var(--tone-danger-bd);color:var(--tone-danger-tx)}
.valida-flow-list__copy{display:grid;gap:var(--space-2);min-width:0}
.valida-flow-list__heading{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:space-between}
.valida-flow-list__heading>strong{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);line-height:var(--line-height-default)}
.valida-flow-list__type{align-items:center;color:var(--color-text-secondary);display:flex;font-size:var(--font-size-xs);gap:var(--space-2)}
.valida-flow-list__metadata{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.valida-flow-list__metadata-item{background:var(--color-surface-secondary);border:1px solid var(--color-border-subtle);border-radius:var(--r-full);color:var(--color-text-secondary);font-size:var(--font-size-xs);line-height:var(--line-height-compact);padding:var(--space-1) var(--space-2)}
.valida-flow-list__metadata-item .is-mono{font-family:var(--font-mono)}
.valida-flow-list__tools{align-items:center;display:flex;gap:var(--space-1);padding:var(--space-3) var(--space-3) var(--space-3) 0}
.valida-flow-list__drag-handle,.valida-flow-list__actions{align-items:center;display:flex;min-height:44px}
.valida-flow-list__drag-handle button,.valida-flow-list__actions button{min-height:40px;min-width:40px}

@media (max-width:520px){
  .valida-flow-list__stage{grid-template-columns:minmax(0,1fr)}
  .valida-flow-list__select{padding:var(--space-3)}
  .valida-flow-list__heading{align-items:flex-start;justify-content:flex-start}
  .valida-flow-list__heading>strong{flex-basis:100%;overflow-wrap:anywhere}
  .valida-flow-list__tools{border-top:1px solid var(--color-border-subtle);justify-content:flex-end;padding:var(--space-2) var(--space-3)}
  .valida-flow-list__stages::before{left:calc(var(--space-3) + var(--valida-flow-marker-size) / 2)}
  .valida-flow-list__terminal{padding-inline:var(--space-3)}
}

@media (prefers-reduced-motion:reduce){.valida-flow-list__stage{transition:none!important}}

/* Tags, chips y counts — extensión semántica del Badge. */
.valida-tag{display:inline-flex;align-items:center;gap:var(--space-1);height:22px;padding:0 var(--space-2);border:1px solid var(--tone-neutral-bd);border-radius:var(--r-md);background:var(--tone-neutral-bg);color:var(--tone-neutral-tx);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);line-height:1}.valida-tag--mono{font-family:var(--font-mono);font-weight:var(--font-weight-medium)}.valida-tag--success{border-color:var(--tone-success-bd);background:var(--tone-success-bg);color:var(--tone-success-tx)}.valida-tag--warning{border-color:var(--tone-warning-bd);background:var(--tone-warning-bg);color:var(--tone-warning-tx)}
.valida-chip{display:inline-flex;align-items:center;gap:var(--space-1);height:26px;padding:0 var(--space-1) 0 var(--space-3);border:1px solid var(--color-border-hover);border-radius:var(--r-full);background:var(--color-surface-accent);color:var(--color-text-accent);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium)}.valida-chip.is-disabled{opacity:.5}.valida-chip__remove{display:grid;place-items:center;width:18px;height:18px;padding:0;border:0;border-radius:var(--r-full);background:transparent;color:inherit;cursor:pointer}.valida-chip__remove:hover:not(:disabled){color:var(--tone-danger-tx)}.valida-chip__remove:focus-visible{outline:none;box-shadow:var(--color-focus-ring)}.valida-chip__remove:disabled{cursor:not-allowed}
.valida-count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 var(--space-1);border-radius:var(--r-full);background:var(--color-surface-secondary);color:var(--color-text-secondary);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);line-height:1}.valida-count--active{background:var(--color-action-primary);color:var(--color-action-primary-foreground)}.valida-count--alert{background:var(--tone-danger-tx);color:var(--tone-danger-bg)}

/* StatCard y QuickAction — familia Datos. */
.valida-stat-card{display:grid;gap:var(--space-1);padding:var(--space-3) var(--space-4);border:1px solid var(--color-border-subtle);border-radius:var(--r-lg);background:var(--color-surface-card)}.valida-stat-card__label{margin:0;color:var(--color-text-muted);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);letter-spacing:.05em;text-transform:uppercase}.valida-stat-card__value{margin:0;color:var(--color-text-primary);font-family:var(--font-mono);font-size:var(--font-size-2xl);font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:var(--line-height-compact)}.valida-stat-card__delta{margin:0;font-size:var(--font-size-xs);font-weight:var(--font-weight-medium)}.valida-stat-card__delta--success{color:var(--tone-success-tx)}.valida-stat-card__delta--danger{color:var(--tone-danger-tx)}.valida-stat-card__meta{margin:0;color:var(--color-text-secondary);font-size:var(--font-size-xs)}
.valida-quick-action{display:grid;justify-items:start;gap:var(--space-2);min-height:120px;padding:var(--space-4);border:1px solid var(--color-border-subtle);border-radius:var(--r-lg);background:var(--color-surface-card);color:var(--color-text-primary);font:inherit;text-align:left;cursor:pointer;transition:border-color var(--motion-fast) var(--motion-easing),transform var(--motion-fast) var(--motion-easing)}.valida-quick-action:hover:not(:disabled){border-color:var(--color-border-hover);transform:translateY(-1px)}.valida-quick-action:focus-visible{outline:none;box-shadow:var(--color-focus-ring)}.valida-quick-action:disabled{cursor:not-allowed;opacity:.55}.valida-quick-action__icon{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-lg);background:var(--color-surface-accent);color:var(--color-text-accent)}.valida-quick-action__title{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.valida-quick-action__description{color:var(--color-text-secondary);font-size:var(--font-size-xs)}.valida-quick-action__cta{display:inline-flex;align-items:center;gap:var(--space-1);margin-top:auto;color:var(--color-text-accent);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium)}

/* Banners, ribbon y filas de notificación — familia Comunicaciones ampliada. */
.valida-system-banner{display:flex;align-items:center;gap:var(--space-2);min-height:40px;padding:var(--space-1) var(--space-5);border-bottom:1px solid var(--tone-info-bd);background:var(--tone-info-bg);color:var(--tone-info-tx);font-size:var(--font-size-sm)}.valida-system-banner--warning{border-color:var(--tone-warning-bd);background:var(--tone-warning-bg);color:var(--tone-warning-tx)}.valida-system-banner--neutral{border-color:var(--tone-neutral-bd);background:var(--tone-neutral-bg);color:var(--tone-neutral-tx)}.valida-system-banner__copy{min-width:0}.valida-system-banner__action{margin-left:auto;flex:none;font-weight:var(--font-weight-medium)}.valida-system-banner__action a,.valida-system-banner__action button{display:inline-flex;align-items:center;min-height:26px;padding:0 var(--space-2);border:1px solid color-mix(in srgb,currentColor 32%,transparent);border-radius:var(--r-md);background:transparent;color:inherit;font:inherit;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);text-decoration:none;cursor:pointer}.valida-system-banner__action a:hover,.valida-system-banner__action button:hover{background:color-mix(in srgb,currentColor 10%,transparent)}.valida-system-banner__action a:focus-visible,.valida-system-banner__action button:focus-visible{outline:none;box-shadow:var(--color-focus-ring)}.valida-system-banner__dismiss{display:grid;flex:none;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:var(--r-full);background:transparent;color:inherit;cursor:pointer}.valida-system-banner__dismiss:hover{background:color-mix(in srgb,currentColor 10%,transparent)}.valida-system-banner__dismiss:focus-visible{outline:none;box-shadow:var(--color-focus-ring)}.valida-system-banner__action:not(:last-child)+.valida-system-banner__dismiss{margin-left:0}.valida-system-banner:not(:has(.valida-system-banner__action)) .valida-system-banner__dismiss{margin-left:auto}
.valida-ribbon{display:inline-flex;align-items:center;height:20px;padding:0 var(--space-2);border:1px solid var(--color-border-hover);border-radius:var(--r-sm);background:var(--color-surface-accent);color:var(--color-text-accent);font-size:10px;font-weight:var(--font-weight-semibold);letter-spacing:.06em;text-transform:uppercase}.valida-ribbon--demo{border-color:var(--tone-info-bd);background:var(--tone-info-bg);color:var(--tone-info-tx)}.valida-ribbon--staging{border-color:var(--tone-warning-bd);background:var(--tone-warning-bg);color:var(--tone-warning-tx)}
.valida-notification-row{display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:52px;padding:var(--space-2) var(--space-3) var(--space-2) var(--space-2);border:1px solid var(--color-border-subtle);border-radius:var(--r-lg);background:var(--color-surface-card);color:var(--color-text-primary);font:inherit;text-align:left}.valida-notification-row__icon{display:grid;flex:none;place-items:center;width:30px;height:30px;border:1px solid var(--tone-neutral-bd);border-radius:var(--r-md);background:var(--tone-neutral-bg);color:var(--tone-neutral-tx)}.valida-notification-row--success .valida-notification-row__icon{border-color:var(--tone-success-bd);background:var(--tone-success-bg);color:var(--tone-success-tx)}.valida-notification-row--warning .valida-notification-row__icon{border-color:var(--tone-warning-bd);background:var(--tone-warning-bg);color:var(--tone-warning-tx)}.valida-notification-row--danger .valida-notification-row__icon{border-color:var(--tone-danger-bd);background:var(--tone-danger-bg);color:var(--tone-danger-tx)}.valida-notification-row--info .valida-notification-row__icon{border-color:var(--tone-info-bd);background:var(--tone-info-bg);color:var(--tone-info-tx)}.valida-notification-row__title{flex:1;min-width:0;overflow:hidden;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);letter-spacing:-.006em;text-overflow:ellipsis;white-space:nowrap}.valida-notification-row__meta{flex:none;color:var(--color-text-muted);font-family:var(--font-sans);font-size:var(--font-size-xs);font-weight:var(--font-weight-light);letter-spacing:.01em}.valida-notification-row.is-unread .valida-notification-row__title{font-weight:var(--font-weight-semibold)}.valida-notification-row.is-unread{background:color-mix(in srgb,var(--color-surface-accent) 55%,var(--color-surface-card))}button.valida-notification-row{cursor:pointer;transition:border-color var(--motion-fast) var(--motion-easing),background var(--motion-fast) var(--motion-easing),transform var(--motion-fast) var(--motion-easing)}button.valida-notification-row:hover{border-color:var(--color-border-hover);background:var(--color-hover-bg);transform:translateY(-1px)}button.valida-notification-row:focus-visible{outline:none;box-shadow:var(--color-focus-ring)}

/* View modal — detalle de entidad/expediente. La confirmación vive en ValidaDialog. */
.valida-view-modal__backdrop{position:fixed;inset:0;z-index:var(--z-modal);background:color-mix(in srgb,var(--color-brand-navy) 48%,transparent);backdrop-filter:blur(3px);transition:opacity var(--motion-fast) var(--motion-easing)}.valida-view-modal__viewport{position:fixed;inset:0;z-index:var(--z-modal);display:grid;place-items:center;padding:var(--space-5);overflow:auto}.valida-view-modal{position:relative;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;width:min(100%,720px);max-height:min(820px,calc(100dvh - 40px));overflow:hidden;border:1px solid var(--color-border-subtle);border-radius:var(--r-xl);background:var(--color-surface-card);color:var(--color-text-primary);transition:opacity var(--motion-fast) var(--motion-easing),transform var(--motion-fast) var(--motion-easing)}.valida-view-modal--md{width:min(100%,560px)}.valida-view-modal--xl{width:min(100%,960px)}.valida-view-modal__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--space-5) var(--space-3)}.valida-view-modal__eyebrow{margin:0 0 var(--space-1);color:var(--color-text-accent);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:.05em;text-transform:uppercase}.valida-view-modal__title-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}.valida-view-modal__title{margin:0;font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);letter-spacing:-.01em}.valida-view-modal__tags{display:inline-flex;flex-wrap:wrap;gap:var(--space-1)}.valida-view-modal__close{display:grid;flex:none;place-items:center;width:36px;height:36px;padding:0;border:1px solid transparent;border-radius:var(--r-md);background:transparent;color:var(--color-text-secondary);cursor:pointer}.valida-view-modal__close:hover{background:var(--color-hover-bg);color:var(--color-text-primary)}.valida-view-modal__close:focus-visible{outline:none;box-shadow:var(--color-focus-ring)}.valida-view-modal__tabs{padding:0 var(--space-5) var(--space-3)}.valida-view-modal__body{overflow:auto;padding:var(--space-4) var(--space-5);border-top:1px solid var(--color-border-subtle);background:var(--color-surface-secondary)}.valida-view-modal__body>*{min-width:0}.valida-view-modal__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-5);border-top:1px solid var(--color-border-subtle);color:var(--color-text-secondary);font-size:var(--font-size-xs)}
@media (prefers-reduced-motion:reduce){.valida-spinner__ring,.valida-progress__fill,.valida-quick-action,.valida-view-modal,.valida-view-modal__backdrop{transition:none!important}}