/* Black Legal · componentes v1.2
   Requiere tokens/tokens.css y css/fonts.css cargados antes.
   Todas las clases llevan el prefijo bl- (modificadores con --, estados con bl-is-). Nada se aplica fuera de .bl-root salvo las clases bl-*.
   Los componentes usan solo tokens semánticos: cambian con data-theme="dark" o dentro de .bl-on-dark. */

/* ───────── Base (ámbito .bl-root) ───────── */
.bl-root{margin:0;font:400 var(--fs-body)/1.65 var(--font-body);color:var(--bl-text);background:var(--bl-bg);-webkit-font-smoothing:antialiased}
.bl-root *,.bl-root *::before,.bl-root *::after{box-sizing:border-box}
.bl-root h1,.bl-root h2,.bl-root h3{font-family:var(--font-display);font-weight:400;line-height:1.15;margin:0}
.bl-root :focus-visible{outline:2px solid var(--bl-focus);outline-offset:3px}
.bl-root [hidden]{display:none!important}
.bl-on-dark{color:var(--bl-text)}
.bl-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bl-icon{display:inline-block;inline-size:var(--bl-icon-size,1em);block-size:var(--bl-icon-size,1em);flex:none}
.bl-eyebrow{font:500 var(--fs-label)/1 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--bl-text-muted);margin-bottom:var(--sp-4)}
.bl-note{font-size:var(--fs-small);color:var(--bl-text-muted)}
.bl-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--fs-small)}
@media (prefers-reduced-motion:reduce){.bl-root *,.bl-root *::before,.bl-root *::after,.bl-toast{transition:none!important;animation:none!important}}

/* ───────── Botón ───────── */
.bl-btn{--h:48px;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:var(--h);min-width:44px;padding:0 var(--sp-5);font:600 var(--fs-small)/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;border:var(--bw) solid transparent;border-radius:var(--r-sm);cursor:pointer;text-decoration:none;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.bl-btn--primary{background:var(--bl-action-bg);color:var(--bl-action-text)}
.bl-btn--primary:hover{background:var(--bl-action-hover-bg);border-color:var(--bl-action-hover-border)}
.bl-btn--secondary{background:transparent;color:var(--bl-text);border-color:var(--bl-text)}
.bl-btn--secondary:hover{background:var(--bl-text);color:var(--bl-bg)}
.bl-btn--ghost{background:transparent;color:var(--bl-text);padding:0 var(--sp-3);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--bl-text-muted)}
.bl-btn--ghost:hover{text-decoration-color:var(--bl-text);background:var(--bl-surface-2)}
.bl-btn--danger{background:var(--bl-error);color:var(--bl-white)}
.bl-btn--danger:hover{background:var(--bl-error-hover)}
.bl-btn:disabled,.bl-btn[aria-disabled="true"]{opacity:1;background:var(--bl-surface-2);color:var(--bl-text-disabled);border-color:var(--bl-border-ui);cursor:not-allowed;text-decoration:none}
.bl-btn[aria-busy="true"]{pointer-events:none}
.bl-spinner{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:bl-spin 800ms linear infinite}
@keyframes bl-spin{to{transform:rotate(360deg)}}

/* ───────── Formulario ───────── */
.bl-field{display:flex;flex-direction:column;gap:var(--sp-2)}
.bl-field label,.bl-field legend{font:600 var(--fs-small)/1.4 var(--font-body)}
.bl-field--grow{flex:1 1 240px;min-width:0}
.bl-req{color:var(--bl-error-text)}
.bl-help{font-size:var(--fs-small);color:var(--bl-text-muted)}
.bl-input{width:100%;min-height:48px;padding:12px var(--sp-4);font:400 var(--fs-body)/1.4 var(--font-body);color:var(--bl-text);background:var(--bl-surface);border:var(--bw) solid var(--bl-control-border);border-radius:var(--r-sm);transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
textarea.bl-input{min-height:128px;resize:vertical}
.bl-input:hover{border-color:var(--bl-text)}
.bl-input:focus{outline:none;border-color:var(--bl-text);box-shadow:0 0 0 3px var(--bl-focus-halo)}
.bl-input[aria-invalid="true"]{border-color:var(--bl-error-text);box-shadow:inset 3px 0 0 var(--bl-error-text)}
.bl-err{display:none;gap:var(--sp-2);color:var(--bl-error-text);font-size:var(--fs-small);font-weight:500;align-items:flex-start}
.bl-field.bl-is-error .bl-err{display:flex}
.bl-err .bl-icon{--bl-icon-size:16px;margin-top:3px}
.bl-opts{display:grid;gap:var(--sp-2);border:0;padding:0;margin:0}
.bl-opt{display:flex;align-items:center;gap:var(--sp-3);min-height:44px;cursor:pointer}
.bl-opt input{width:20px;height:20px;accent-color:var(--bl-action-bg);flex:none}
.bl-form-summary{display:none;border:var(--bw) solid var(--bl-error-text);border-radius:var(--r-sm);padding:var(--sp-4);margin-bottom:var(--sp-5);background:var(--bl-error-bg)}
.bl-form-summary.bl-is-shown{display:block}
.bl-form-summary strong{color:var(--bl-error-text)}
.bl-form-summary ul{margin:var(--sp-2) 0 0;padding-left:var(--sp-5)}
.bl-form-success{display:none;border:var(--bw) solid var(--bl-success-text);border-radius:var(--r-sm);padding:var(--sp-5);background:var(--bl-success-bg)}
.bl-form-success.bl-is-shown{display:block}
.bl-form-success h3{color:var(--bl-success-text);margin-bottom:var(--sp-2)}

/* ───────── Tarjeta de servicio ───────── */
.bl-svc{display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-5);border:var(--bw) solid var(--bl-border-ui);border-radius:var(--r-md);background:var(--bl-surface);text-decoration:none;color:var(--bl-text);transition:border-color var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
.bl-svc__num{font:500 var(--fs-label)/1 var(--font-body);letter-spacing:.2em;color:var(--bl-text-muted)}
.bl-svc h3{font-size:var(--fs-h3)}
.bl-svc p{color:var(--bl-text-muted);font-size:var(--fs-small)}
.bl-svc__more{margin-top:auto;font:600 var(--fs-small)/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;display:inline-flex;gap:var(--sp-2);align-items:center;padding-top:var(--sp-3);border-top:var(--bw) solid var(--bl-border-ui)}
.bl-svc .bl-icon{--bl-icon-size:16px}
@media (hover:hover){.bl-svc:hover{border-color:var(--bl-text);transform:translateY(-2px)}.bl-svc:hover .bl-svc__more{border-top-color:var(--bl-gold)}}
.bl-svc--feat{background:var(--bl-inverse-bg);color:var(--bl-inverse-text);border-color:var(--bl-feat-border)}
.bl-svc--feat p,.bl-svc--feat .bl-svc__num{color:var(--bl-inverse-text-muted)}
.bl-svc--feat .bl-svc__more{border-top-color:var(--bl-inverse-line);color:var(--bl-gold)}

/* ───────── Navegación y pestañas ───────── */
.bl-nav{display:flex;align-items:center;gap:var(--sp-5);background:var(--bl-inverse-bg);padding:var(--sp-3) var(--sp-5);border-radius:var(--r-md);flex-wrap:wrap}
.bl-nav img{height:36px;width:auto;display:block}
.bl-nav ul{list-style:none;display:flex;gap:var(--sp-1);margin:0 auto 0 var(--sp-5);padding:0;flex-wrap:wrap}
.bl-nav a.bl-nav__link{display:flex;align-items:center;min-height:44px;padding:0 var(--sp-3);color:var(--bl-inverse-text-soft);text-decoration:none;font-size:var(--fs-small);border-bottom:2px solid transparent}
.bl-nav a.bl-nav__link:hover{color:var(--bl-inverse-text)}
.bl-nav a.bl-nav__link[aria-current="page"]{color:var(--bl-inverse-text);border-bottom-color:var(--bl-gold)}
.bl-root .bl-nav :focus-visible{outline-color:var(--bl-gold)}
.bl-tabs{display:flex;gap:var(--sp-1);border-bottom:var(--bw) solid var(--bl-border-ui);margin-bottom:var(--sp-4);overflow-x:auto}
.bl-tab{min-height:44px;padding:0 var(--sp-4);background:none;border:0;border-bottom:2px solid transparent;font:600 var(--fs-small)/1 var(--font-body);cursor:pointer;color:var(--bl-text-muted);white-space:nowrap}
.bl-tab:hover{color:var(--bl-text)}
.bl-tab[aria-selected="true"]{color:var(--bl-text);border-bottom-color:var(--bl-gold)}

/* ───────── Insignias y alertas (fondo tintado + borde + icono + texto) ───────── */
.bl-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:var(--bw) solid currentColor;border-radius:100px;font:600 var(--fs-label)/1.2 var(--font-body);letter-spacing:.06em}
.bl-badge .bl-icon{--bl-icon-size:12px;--bl-icon-stroke:3}
.bl-badge--neutral{color:var(--bl-text)}
.bl-badge--ok{color:var(--bl-success-text);background:var(--bl-success-bg)}
.bl-badge--warn{color:var(--bl-warning-text);background:var(--bl-warning-bg)}
.bl-badge--err{color:var(--bl-error-text);background:var(--bl-error-bg)}
.bl-badge--gold{color:var(--bl-gold);background:var(--bl-black);border-color:var(--bl-gold)}
.bl-alert{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-4);border:var(--bw) solid;border-radius:var(--r-sm);background:var(--bl-surface);color:var(--bl-text);font-size:var(--fs-small)}
.bl-alert .bl-icon{--bl-icon-size:20px;margin-top:2px}
.bl-alert strong{display:block;font-size:var(--fs-body);margin-bottom:2px}
.bl-alert p{color:var(--bl-text)}
.bl-alert--info{border-color:var(--bl-text);background:var(--bl-info-bg)}
.bl-alert--ok{border-color:var(--bl-success-text);background:var(--bl-success-bg)}
.bl-alert--ok strong,.bl-alert--ok .bl-icon{color:var(--bl-success-text)}
.bl-alert--warn{border-color:var(--bl-warning-text);background:var(--bl-warning-bg)}
.bl-alert--warn strong,.bl-alert--warn .bl-icon{color:var(--bl-warning-text)}
.bl-alert--err{border-color:var(--bl-error-text);background:var(--bl-error-bg)}
.bl-alert--err strong,.bl-alert--err .bl-icon{color:var(--bl-error-text)}

/* ───────── Modal, aviso, métrica ───────── */
dialog.bl-dialog{border:var(--bw) solid var(--bl-border-strong);border-radius:var(--r-md);box-shadow:var(--bl-elev-3);padding:0;max-width:min(520px,calc(100vw - 32px));width:100%;background:var(--bl-surface);color:var(--bl-text)}
dialog.bl-dialog::backdrop{background:var(--bl-overlay)}
.bl-dialog__body{padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-4)}
.bl-dialog__actions{display:flex;gap:var(--sp-3);justify-content:flex-end;flex-wrap:wrap;margin-top:var(--sp-3)}
.bl-toast{position:fixed;right:var(--sp-5);bottom:var(--sp-5);z-index:var(--z-toast);box-shadow:var(--bl-elev-2);background:var(--bl-inverse-bg);color:var(--bl-inverse-text);border-left:3px solid var(--bl-gold);padding:var(--sp-4) var(--sp-5);border-radius:var(--r-sm);font-size:var(--fs-small);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
.bl-toast.bl-is-shown{opacity:1;transform:none}
.bl-metric{padding:var(--sp-5);border:var(--bw) solid var(--bl-border-ui);border-radius:var(--r-md);background:var(--bl-surface)}
.bl-metric__value{display:block;font:400 clamp(1.75rem,3vw,2.5rem)/1 var(--font-display);white-space:nowrap}
.bl-metric__label{display:block;font-size:var(--fs-small);color:var(--bl-text-muted)}

/* ───────── Elevación y capas ───────── */
/* Jerarquía por borde y superficie; solo lo que flota lleva sombra. Capas con tokens --z-*: ningún componente usa un número suelto. */
.bl-elev-0{box-shadow:var(--bl-elev-0)}
.bl-elev-1{box-shadow:var(--bl-elev-1)}
.bl-elev-2{box-shadow:var(--bl-elev-2)}
.bl-elev-3{box-shadow:var(--bl-elev-3)}
.bl-sticky{position:sticky;top:0;z-index:var(--z-sticky)}
.bl-menu{position:absolute;z-index:var(--z-dropdown);min-width:200px;padding:var(--sp-1);background:var(--bl-surface);color:var(--bl-text);border:var(--bw) solid var(--bl-border-ui);border-radius:var(--r-md);box-shadow:var(--bl-elev-1)}
.bl-menu__item{display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:44px;padding:0 var(--sp-3);background:none;border:0;border-radius:var(--r-sm);font:400 var(--fs-small)/1.4 var(--font-body);color:inherit;text-align:left;cursor:pointer}
.bl-menu__item:hover{background:var(--bl-surface-2)}
.bl-menu__item--danger{color:var(--bl-error-text)}
.bl-menu__item .bl-icon{--bl-icon-size:16px}