/* ByBConnect Design System v3
   Experiencia transversal, dinámica y accesible para todos los módulos. */

:root{
  --bb-v3-gap-xs:6px;
  --bb-v3-gap-sm:10px;
  --bb-v3-gap:16px;
  --bb-v3-gap-lg:24px;
  --bb-v3-control:42px;
  --bb-v3-content:1680px;
  --bb-v3-ease:cubic-bezier(.2,.75,.25,1);
  --bb-v3-ring:0 0 0 3px color-mix(in srgb,var(--bb-primary) 20%,transparent);
}

html{scroll-padding-top:112px}
body{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
body,button,input,select,textarea{font-family:"Segoe UI Variable","Segoe UI",Inter,system-ui,-apple-system,sans-serif}
:where(button,a,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid color-mix(in srgb,var(--bb-primary) 48%,transparent)!important;
  outline-offset:2px!important;
}
:where(button,a,input,select,textarea):disabled{cursor:not-allowed!important;filter:saturate(.55);opacity:.58}

/* Navegación de página: feedback inmediato sin bloquear el trabajo. */
.bb-nav-progress{
  position:fixed;z-index:120;top:0;left:0;width:100%;height:3px;overflow:hidden;
  pointer-events:none;opacity:0;transition:opacity .18s ease;
}
.bb-nav-progress:before{
  content:"";display:block;width:34%;height:100%;border-radius:0 999px 999px 0;
  background:linear-gradient(90deg,#5fd6ae,var(--bb-primary),#8fb5ff);
  box-shadow:0 0 15px color-mix(in srgb,var(--bb-primary) 55%,transparent);
  transform:translateX(-120%);
}
.bb-nav-progress.is-active{opacity:1}
.bb-nav-progress.is-active:before{animation:bb-v3-progress 1.05s var(--bb-v3-ease) infinite}
.bb-nav-progress.is-done{opacity:0}
.bb-nav-progress.is-done:before{width:100%;transform:translateX(0);animation:none;transition:transform .12s ease}
@keyframes bb-v3-progress{0%{transform:translateX(-120%)}70%{transform:translateX(235%)}100%{transform:translateX(320%)}}

.bb-back-to-top{
  position:fixed;z-index:28;right:22px;bottom:22px;display:grid!important;width:42px!important;height:42px!important;
  min-height:42px!important;place-items:center;padding:0!important;border:1px solid color-mix(in srgb,var(--bb-primary) 34%,var(--bb-border))!important;
  border-radius:13px!important;background:var(--bb-surface)!important;color:var(--bb-primary)!important;
  box-shadow:0 12px 30px rgba(8,25,56,.2)!important;font-size:1rem!important;
  opacity:0;pointer-events:none;transform:translateY(12px)!important;transition:opacity .2s ease,transform .2s var(--bb-v3-ease)!important;
}
.bb-back-to-top.is-visible{opacity:1;pointer-events:auto;transform:none!important}
.bb-back-to-top:hover{background:var(--bb-primary)!important;color:#fff!important}

/* Shell más limpio, estable y con mejor aprovechamiento del espacio. */
.app-view>main{min-width:0;overflow-x:clip;padding-inline:clamp(22px,2.3vw,42px)!important}
.app-view main>header{
  position:sticky!important;top:0!important;isolation:isolate;min-height:88px!important;margin-bottom:22px!important;
  box-shadow:0 8px 24px color-mix(in srgb,var(--bb-bg) 68%,transparent);
}
.app-view main>header:after{
  content:"";position:absolute;z-index:-1;inset:auto 0 -1px;width:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--bb-primary),#6c98f4);transition:width .28s var(--bb-v3-ease);
}
body.bb-page-busy .app-view main>header:after{width:100%}
.header-title{max-width:none;min-width:0;flex:1 1 auto}
.top-actions{min-width:0;flex:0 0 auto}
.header-title .eyebrow{display:flex;align-items:center;gap:7px}
.header-title .eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--bb-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--bb-accent) 12%,transparent)}
#page-context{max-width:700px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#content{
  isolation:isolate;max-width:var(--bb-v3-content)!important;min-width:0;overflow-anchor:none;
  padding-bottom:36px;transition:opacity .16s ease,transform .2s var(--bb-v3-ease)!important;
}
#content>*{min-width:0}
#content.bb-v3-ready{animation:bb-v3-page .25s var(--bb-v3-ease) both}
@keyframes bb-v3-page{from{opacity:.25;transform:translateY(7px)}to{opacity:1;transform:none}}

/* Portadas: más compactas, claras y orientadas a la acción. */
.module-hero{
  min-height:148px!important;padding:clamp(24px,2.2vw,34px)!important;
  border-radius:22px!important;box-shadow:0 16px 38px rgba(20,63,148,.18)!important;
}
.module-hero h2{max-width:900px!important;font-size:clamp(1.5rem,2vw,2rem)!important}
.module-hero p{max-width:850px!important;font-size:.84rem!important}
.module-hero>:where(button,a.button-link){min-width:0!important;min-height:40px!important;padding:9px 14px!important;white-space:nowrap}

/* Jerarquía de secciones y tarjetas. */
.bb-content-section{position:relative;min-width:0}
.bb-content-section+.bb-content-section{margin-top:2px}
.card,.area-kpi-card,[class$="-card"],[class*="-card "]{min-width:0}
.card{transition:border-color .2s ease,box-shadow .2s ease,transform .2s var(--bb-v3-ease)!important}
.card:not(.bb-interactive-card):hover{border-color:var(--bb-border)!important;box-shadow:var(--bb-shadow-sm)!important;transform:none!important}
.bb-interactive-card:hover{border-color:color-mix(in srgb,var(--bb-primary) 28%,var(--bb-border))!important;box-shadow:0 16px 34px color-mix(in srgb,var(--bb-primary) 11%,transparent)!important;transform:translateY(-2px)!important}
.bb-interactive-card:focus-within{border-color:color-mix(in srgb,var(--bb-primary) 42%,var(--bb-border))!important;box-shadow:var(--bb-v3-ring)!important}
.panel-title,.bb-card-heading{
  min-width:0;align-items:flex-start!important;gap:14px!important;margin-bottom:16px!important;
}
.panel-title>:first-child,.bb-card-heading>:first-child{min-width:0}
.panel-title h2,.panel-title h3,.bb-card-heading h2,.bb-card-heading h3{line-height:1.28!important}
.panel-title p,.bb-card-heading p{max-width:820px;color:var(--bb-muted)!important;line-height:1.5!important}

/* Indicadores: cifras fáciles de leer y tarjetas consistentes. */
.metrics,.area-dashboard-kpis,[class$="-kpis"],[class*="-kpis "]{
  align-items:stretch!important;gap:14px!important;
}
.bb-kpi-card{
  position:relative;isolation:isolate;overflow:hidden;min-height:132px!important;
  border:1px solid var(--bb-border)!important;border-radius:16px!important;background:var(--bb-surface)!important;
  box-shadow:var(--bb-shadow-sm)!important;
}
.bb-kpi-card:after{
  content:"";position:absolute;z-index:-1;right:-28px;bottom:-34px;width:94px;height:94px;border-radius:50%;
  background:color-mix(in srgb,var(--bb-primary) 7%,transparent);pointer-events:none;
}
.bb-kpi-card>:where(strong,h2){font-variant-numeric:tabular-nums lining-nums}
.bb-kpi-card>:where(small,p,span){overflow-wrap:anywhere}

/* Pestañas: barra desplazable, selección visible y navegación por teclado. */
:where([class$="-tabs"],[class*="-tabs "],.tabs)[role="tablist"]{
  position:relative;z-index:1;top:auto;scroll-snap-type:x proximity;scroll-padding-inline:8px;
  overscroll-behavior-inline:contain;box-shadow:0 8px 18px color-mix(in srgb,var(--bb-bg) 72%,transparent)!important;
}
:where([class$="-tabs"],[class*="-tabs "],.tabs)[role="tablist"]>:where(button,a){
  position:relative;scroll-snap-align:start;transition:color .16s ease,background .16s ease,border-color .16s ease!important;
}
:where([class$="-tabs"],[class*="-tabs "],.tabs)[role="tablist"]>:where(.active,[aria-selected="true"]):after{
  content:"";position:absolute;right:12px;bottom:3px;left:12px;height:2px;border-radius:2px;background:var(--bb-primary);
}

/* Formularios guiados y campos más amigables. */
#content form.bb-form-v3{min-width:0}
#content form.bb-form-v3>:where(.grid,[class$="-grid"],[class*="-grid "]){min-width:0;align-items:start;column-gap:16px!important;row-gap:13px!important}
#content form.bb-form-v3 label{min-width:0;margin-top:12px!important;line-height:1.35}
#content form.bb-form-v3 label.bb-required-label:before{content:"* ";color:var(--bb-danger);font-weight:900}
#content :where(input,select,textarea){transition:border-color .16s ease,box-shadow .16s ease,background .16s ease!important}
#content :where(input,select,textarea):hover:not(:disabled){border-color:color-mix(in srgb,var(--bb-primary) 35%,var(--bb-border-strong))!important}
#content :where(input,select,textarea).bb-field-has-value:not(:focus){background:color-mix(in srgb,var(--bb-accent) 4%,var(--bb-surface-soft))!important}
#content :where(input,select,textarea)[aria-invalid="true"]{border-color:var(--bb-danger)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--bb-danger) 13%,transparent)!important}
.bb-form-guide{
  display:grid;grid-column:1/-1;width:100%;gap:8px;margin:0 0 18px;padding:13px 15px;border:1px solid var(--bb-border);
  border-radius:13px;background:color-mix(in srgb,var(--bb-primary) 4%,var(--bb-surface-soft));
}
.bb-form-guide-copy{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--bb-muted);font-size:.7rem}
.bb-form-guide-copy strong{color:var(--bb-text);font-size:.72rem}
.bb-form-guide-track{height:6px;overflow:hidden;border-radius:999px;background:var(--bb-bg-deep)}
.bb-form-guide-track i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--bb-primary),var(--bb-accent));transition:width .25s var(--bb-v3-ease)}
.bb-form-guide.is-complete{border-color:color-mix(in srgb,var(--bb-accent) 35%,var(--bb-border));background:color-mix(in srgb,var(--bb-accent) 7%,var(--bb-surface))}

/* Acciones: tamaño compacto, prioridad reconocible y cancelar siempre visible. */
#content :where(button,.button-link){min-height:38px;max-width:100%;line-height:1.2;transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease!important}
#content :where(button,.button-link):not(:disabled):active{transform:translateY(1px)!important}
#content .bb-action-primary{border:1px solid var(--bb-primary)!important;background:linear-gradient(135deg,var(--bb-primary),var(--bb-primary-strong))!important;color:#fff!important;box-shadow:0 7px 16px color-mix(in srgb,var(--bb-primary) 19%,transparent)!important}
#content .bb-action-primary:hover{box-shadow:0 10px 22px color-mix(in srgb,var(--bb-primary) 25%,transparent)!important;transform:translateY(-1px)!important}
#content .bb-action-secondary{border:1px solid var(--bb-border-strong)!important;background:var(--bb-surface)!important;color:var(--bb-text)!important;box-shadow:none!important}
#content .bb-action-secondary:hover{border-color:color-mix(in srgb,var(--bb-primary) 45%,var(--bb-border))!important;background:var(--bb-primary-soft)!important;color:var(--bb-primary-strong)!important}
#content .bb-action-danger{border:1px solid color-mix(in srgb,var(--bb-danger) 52%,var(--bb-border))!important;background:color-mix(in srgb,var(--bb-danger) 10%,var(--bb-surface))!important;color:var(--bb-danger)!important;box-shadow:none!important}
#content .bb-icon-action{display:inline-grid!important;width:40px!important;height:40px!important;min-height:40px!important;place-items:center;padding:0!important;border-radius:11px!important;font-size:1.05rem!important}
:where(.row-actions,[class$="-actions"],[class*="-actions "]){min-width:0;align-items:center!important;flex-wrap:wrap!important;gap:9px!important}
:where(.row-actions,[class$="-actions"],[class*="-actions "])>:where(button,a){width:auto!important;max-width:100%;margin:0!important}

/* Filtros, herramientas y selectores alineados. */
:where([class$="-filters"],[class*="-filters "],.filters,[class$="-toolbar"],[class*="-toolbar "]){min-width:0}
:where([class$="-filters"],[class*="-filters "],.filters,[class$="-toolbar"],[class*="-toolbar "])>:where(label,div,span){min-width:0}
:where([class$="-filters"],[class*="-filters "],.filters,[class$="-toolbar"],[class*="-toolbar "]) label{margin-top:0!important}

/* Tablas: encabezado persistente, lectura por filas y desplazamiento accesible. */
.bb-responsive-table{
  position:relative;min-width:0;overscroll-behavior-inline:contain;background:var(--bb-surface);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bb-border) 72%,transparent);
}
.bb-responsive-table:focus-visible{box-shadow:var(--bb-v3-ring)!important}
.bb-responsive-table th{position:sticky;z-index:2;top:0;white-space:nowrap}
.bb-responsive-table tbody tr:nth-child(even){background:color-mix(in srgb,var(--bb-surface-soft) 48%,transparent)}
.bb-responsive-table tbody tr:hover{background:var(--bb-primary-soft)!important}
.bb-responsive-table td{vertical-align:middle;line-height:1.42}
.bb-responsive-table :where(td,th):first-child{padding-left:16px}
.bb-responsive-table :where(td,th):last-child{padding-right:16px}

/* Desplegables y estados vacíos con interacción clara. */
#content details{min-width:0}
#content details>summary{border-radius:10px;transition:background .16s ease,color .16s ease}
#content details>summary:hover{background:color-mix(in srgb,var(--bb-primary) 6%,transparent)}
#content details[open]>summary{color:var(--bb-primary-strong)}
:where(.bb-empty-state,.empty-state,.area-empty-state,.loan-empty,.commercial-empty,.mail-empty){min-height:168px!important}
:where(.bb-empty-state,.empty-state,.area-empty-state,.loan-empty,.commercial-empty,.mail-empty) strong{font-size:.9rem}

/* Ventanas: encabezado y acciones siempre utilizables. */
dialog{
  scrollbar-gutter:stable;overscroll-behavior:contain;border:1px solid var(--bb-border-strong)!important;
  box-shadow:0 32px 90px rgba(3,12,30,.45)!important;
}
dialog[open]{animation:bb-v3-dialog .2s var(--bb-v3-ease) both}
dialog::backdrop{background:rgba(3,10,24,.68)!important;backdrop-filter:blur(4px)}
dialog :where(.dialog-heading,.modal-heading,[class$="-dialog-head"]){position:sticky!important;z-index:4;top:0;background:var(--bb-surface)!important}
dialog :where(.dialog-actions,.modal-actions,[class$="-actions"]):last-child{position:sticky;z-index:4;bottom:0;background:var(--bb-surface)!important}
dialog button.bb-icon-action{border:1px solid var(--bb-border-strong)!important;background:var(--bb-surface-soft)!important;color:var(--bb-text)!important}
@keyframes bb-v3-dialog{from{opacity:0;transform:translateY(9px) scale(.992)}to{opacity:1;transform:none}}

/* Ayudas y notificaciones visibles, sin depender solo del color. */
.error:not(:empty){display:flex;align-items:flex-start;gap:7px;margin-top:8px;padding:9px 11px;border:1px solid color-mix(in srgb,var(--bb-danger) 32%,var(--bb-border));border-radius:9px;background:color-mix(in srgb,var(--bb-danger) 8%,var(--bb-surface));line-height:1.4}
.error:not(:empty):before{content:"!";display:grid;width:18px;height:18px;flex:0 0 18px;place-items:center;border-radius:50%;background:var(--bb-danger);color:#fff;font-size:.68rem;font-weight:900}
.success:not(:empty){padding:9px 11px;border:1px solid color-mix(in srgb,var(--bb-accent) 34%,var(--bb-border));border-radius:9px;background:color-mix(in srgb,var(--bb-accent) 8%,var(--bb-surface))}

@media(max-width:1240px){
  .header-title{max-width:calc(100% - 220px)}
}

@media(max-width:900px){
  .app-view>main{padding-inline:20px!important}
  .app-view main>header{position:sticky!important;min-height:82px!important}
  .header-title{max-width:calc(100% - 205px)}
  .module-hero{min-height:132px!important}
  #content form.bb-form-v3>:where(.grid,[class$="-grid"],[class*="-grid "]){grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))!important}
}

@media(max-width:680px){
  :root{--bb-v3-control:44px}
  html{scroll-padding-top:88px}
  .app-view>main{padding-inline:13px!important}
  .app-view main>header{top:0!important;margin-bottom:16px!important;background:var(--bb-bg)!important;box-shadow:none}
  .header-title{max-width:calc(100vw - 80px)}
  #page-title{max-width:calc(100vw - 108px)!important}
  .top-actions>:where(button,a){width:40px!important;max-width:40px!important;min-width:40px!important;flex:0 0 40px!important}
  .sidebar-footer{grid-template-columns:1fr!important}
  .sidebar-footer .logout{width:100%!important;height:44px!important;min-height:44px!important;padding:8px 12px!important;font-size:.72rem!important}
  .sidebar-footer .logout:after{display:none!important;content:none!important}
  #content{gap:14px!important;padding-bottom:74px}
  .module-hero{min-height:0!important;padding:21px 18px!important;border-radius:18px!important}
  .module-hero>:where(button,a.button-link){width:100%!important;margin-top:14px!important}
  :where([class$="-tabs"],[class*="-tabs "],.tabs)[role="tablist"]{margin-inline:-1px!important;padding:5px!important;border-radius:12px!important}
  :where([class$="-tabs"],[class*="-tabs "],.tabs)[role="tablist"]>:where(button,a){min-height:40px!important;padding:9px 11px!important}
  .bb-form-guide-copy{align-items:flex-start;flex-direction:column;gap:3px}
  :where(.row-actions,[class$="-actions"],[class*="-actions "])>:where(button,a){flex:1 1 auto!important;justify-content:center}
  .bb-back-to-top{right:14px;bottom:14px}
  .loan-toolbar{overflow:hidden!important}
  .loan-period{display:grid!important;width:100%;grid-template-columns:40px minmax(0,.82fr) minmax(0,1.18fr) 40px;align-items:end;gap:8px!important}
  .loan-period label{width:auto!important;min-width:0!important}
  .loan-period button{width:40px!important;min-width:40px!important;padding:0!important}
  .loan-legend{width:100%;gap:10px 14px!important}
  dialog{width:calc(100vw - 12px)!important;max-width:none!important;max-height:calc(100dvh - 12px)!important;border-radius:16px!important}
}

@media(max-width:430px){
  .module-hero h2{font-size:1.34rem!important}
  .card{padding:16px!important}
  :where([class$="-filters"],[class*="-filters "],.filters,[class$="-toolbar"],[class*="-toolbar "]){padding:13px!important}
  #content :where(button,.button-link){white-space:normal}
}

@media(prefers-reduced-motion:reduce){
  .bb-nav-progress:before,.bb-nav-progress.is-active:before,#content.bb-v3-ready,dialog[open]{animation:none!important}
  .bb-interactive-card:hover,#content .bb-action-primary:hover{transform:none!important}
}