/* ============================================================
   WOLFBITE UI · components.css · v1.0.0
   Componentes de aplicación. Prefijo wb- (no colisiona con las
   clases de las apps). Estados: .is-active .is-open .is-invalid
   .is-loading .is-visible .is-selected. Requiere tokens + base.
   ============================================================ */

/* ══ BOTONES ═══════════════════════════════════════════════ */
.wb-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--wb-s2);
  min-height:var(--wb-tap);padding:0 18px;
  font-family:var(--wb-f-titulo);font-weight:600;font-size:.95rem;line-height:1.1;letter-spacing:.005em;
  color:var(--wb-tinta);background:var(--wb-superficie);
  border:var(--wb-borde) solid var(--wb-linea-fuerte);border-radius:var(--wb-radio);
  text-decoration:none;cursor:pointer;user-select:none;white-space:nowrap;
  transition:background-color var(--wb-dur) var(--wb-ease),border-color var(--wb-dur) var(--wb-ease),color var(--wb-dur) var(--wb-ease);
  position:relative;
}
.wb-btn:hover{background:rgba(21,24,28,.06);color:var(--wb-tinta)}
.wb-btn:active{background:rgba(21,24,28,.12)}
.wb-btn--primary{background:var(--wb-plano);border-color:var(--wb-plano);color:var(--wb-superficie)}
.wb-btn--primary:hover{background:var(--wb-plano-osc);border-color:var(--wb-plano-osc);color:var(--wb-superficie)}
.wb-btn--primary:active{background:#0F2E58}
.wb-btn--danger{background:var(--wb-oxido);border-color:var(--wb-oxido);color:var(--wb-superficie)}
.wb-btn--danger:hover{background:var(--wb-oxido-osc);border-color:var(--wb-oxido-osc);color:var(--wb-superficie)}
.wb-btn--danger-outline{background:var(--wb-superficie);border-color:var(--wb-oxido);color:var(--wb-oxido)}
.wb-btn--danger-outline:hover{background:var(--wb-oxido-tinte);color:var(--wb-oxido)}
.wb-btn--ok{background:var(--wb-ok);border-color:var(--wb-ok);color:var(--wb-superficie)}
.wb-btn--ok:hover{background:#185A38;border-color:#185A38;color:var(--wb-superficie)}
.wb-btn--ghost{border-color:transparent;background:transparent;color:var(--wb-plano);text-decoration:underline;text-underline-offset:3px}
.wb-btn--ghost:hover{background:var(--wb-plano-tinte);color:var(--wb-plano-osc)}
.wb-btn--sm{min-height:var(--wb-tap-sm);padding:0 12px;font-size:.85rem}
.wb-btn--lg{min-height:52px;padding:0 24px;font-size:1.05rem}
.wb-btn--block{display:flex;width:100%}
.wb-btn--icon{width:var(--wb-tap);padding:0;font-size:1.15rem}
.wb-btn--icon.wb-btn--sm{width:var(--wb-tap-sm)}
.wb-btn:disabled,.wb-btn.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.wb-btn.is-loading{color:transparent!important;pointer-events:none}
.wb-btn.is-loading::after{
  content:'';position:absolute;width:18px;height:18px;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;
  animation:wb-girar .8s linear infinite;
}
.wb-btn:not(.wb-btn--primary):not(.wb-btn--danger):not(.wb-btn--ok).is-loading::after{border-color:var(--wb-linea);border-top-color:var(--wb-plano)}
@keyframes wb-girar{to{transform:rotate(360deg)}}
/* grupo de acciones: en móvil apilado, primaria al final (más cerca del pulgar) */
.wb-acciones{display:flex;flex-direction:column;gap:var(--wb-s2)}
.wb-acciones .wb-btn{width:100%}
@media(min-width:700px){.wb-acciones{flex-direction:row;justify-content:flex-end}.wb-acciones .wb-btn{width:auto}}

/* ══ CAMPOS ════════════════════════════════════════════════ */
.wb-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.wb-label{font-size:var(--wb-t-sm);font-weight:600;color:var(--wb-tinta)}
.wb-label .req{color:var(--wb-oxido)}
.wb-label .opc{color:var(--wb-cota);font-weight:400}
.wb-input{
  width:100%;min-height:var(--wb-tap);padding:10px 12px;
  font-family:var(--wb-f-ui);font-size:var(--wb-t-base);line-height:1.3;color:var(--wb-tinta);
  background:var(--wb-campo);border:var(--wb-borde) solid var(--wb-linea);border-radius:var(--wb-radio);
  appearance:none;-webkit-appearance:none;
  transition:border-color var(--wb-dur) var(--wb-ease),box-shadow var(--wb-dur) var(--wb-ease);
}
.wb-input::placeholder{color:var(--wb-cota-2)}
.wb-input:hover{border-color:#B8C0BC}
.wb-input:focus,.wb-input.is-focus{border-color:var(--wb-plano);box-shadow:0 0 0 3px var(--wb-plano-foco);outline:none}
.wb-input.is-invalid,.wb-field.is-invalid .wb-input{border-color:var(--wb-oxido)}
.wb-input.is-invalid:focus,.wb-field.is-invalid .wb-input:focus{box-shadow:0 0 0 3px var(--wb-oxido-foco)}
.wb-input:disabled{background:var(--wb-papel);color:var(--wb-cota-2);border-color:var(--wb-linea);cursor:not-allowed}
.wb-input:read-only:not(select){background:var(--wb-papel);color:var(--wb-cota)}
select.wb-input{
  padding-right:36px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2315181C' fill='none' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
select.wb-input:disabled{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A848E' fill='none' stroke-width='1.6'/%3E%3C/svg%3E")}
textarea.wb-input{min-height:96px;resize:vertical;line-height:1.45}
input.wb-input[type=date],input.wb-input[type=time]{color-scheme:light}
.wb-input--monto{font-family:var(--wb-f-mono);font-weight:500;font-size:1.125rem;font-variant-numeric:tabular-nums;text-align:right}
.wb-input--monto-xl{font-size:1.5rem;min-height:52px}
.wb-field__help{font-size:var(--wb-t-sm);color:var(--wb-cota)}
.wb-field__error{font-size:var(--wb-t-sm);font-weight:500;color:var(--wb-oxido);display:none}
.wb-field.is-invalid .wb-field__error{display:block}
/* grupo con prefijo/sufijo ($ · % · USDT) */
.wb-input-group{display:flex;align-items:stretch;min-width:0}
.wb-input-group .wb-input{flex:1;min-width:0}
.wb-input-group__prefix,.wb-input-group__suffix{
  display:flex;align-items:center;padding:0 12px;
  font-family:var(--wb-f-mono);font-weight:500;font-size:var(--wb-t-base);color:var(--wb-cota);
  background:var(--wb-papel);border:var(--wb-borde) solid var(--wb-linea);
}
.wb-input-group__prefix{border-right:0}
.wb-input-group__suffix{border-left:0}
.wb-input-group:focus-within .wb-input-group__prefix,.wb-input-group:focus-within .wb-input-group__suffix{border-color:var(--wb-plano)}
/* fila de campos: 1 col móvil, 2 en escritorio */
.wb-fields-2{display:grid;grid-template-columns:1fr;gap:var(--wb-s3)}
@media(min-width:560px){.wb-fields-2{grid-template-columns:1fr 1fr}}
/* check / radio / switch */
.wb-check{display:flex;align-items:center;gap:10px;min-height:var(--wb-tap);cursor:pointer;font-size:var(--wb-t-base)}
.wb-check input{width:20px;height:20px;accent-color:var(--wb-plano);flex-shrink:0;cursor:pointer}
.wb-switch{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--wb-tap);cursor:pointer}
.wb-switch input{position:absolute;opacity:0;width:0;height:0}
.wb-switch__track{position:relative;width:46px;height:26px;flex-shrink:0;background:var(--wb-papel);border:var(--wb-borde) solid var(--wb-linea-fuerte);transition:background-color var(--wb-dur) var(--wb-ease)}
.wb-switch__track::after{content:'';position:absolute;top:3px;left:3px;width:17px;height:17px;background:var(--wb-tinta);transition:transform var(--wb-dur) var(--wb-ease)}
.wb-switch input:checked+.wb-switch__track{background:var(--wb-plano);border-color:var(--wb-plano)}
.wb-switch input:checked+.wb-switch__track::after{background:var(--wb-superficie);transform:translateX(20px)}
.wb-switch input:focus-visible+.wb-switch__track{outline:var(--wb-foco);outline-offset:var(--wb-foco-offset)}
/* control segmentado (tipo: ingreso/salida, USDT/transferencia) */
.wb-seg{display:flex;border:var(--wb-borde) solid var(--wb-linea-fuerte);background:var(--wb-superficie)}
.wb-seg__opt{
  flex:1;min-height:var(--wb-tap);padding:0 10px;
  font-family:var(--wb-f-titulo);font-weight:600;font-size:.9rem;color:var(--wb-cota);
  border-right:var(--wb-borde) solid var(--wb-linea);background:transparent;
  transition:background-color var(--wb-dur) var(--wb-ease),color var(--wb-dur) var(--wb-ease);
}
.wb-seg__opt:last-child{border-right:0}
.wb-seg__opt:hover{color:var(--wb-tinta)}
.wb-seg__opt.is-active{background:var(--wb-tinta);color:var(--wb-superficie)}
.wb-seg__opt--ok.is-active{background:var(--wb-ok)}
.wb-seg__opt--bad.is-active{background:var(--wb-oxido)}
.wb-seg__opt--plano.is-active{background:var(--wb-plano)}

/* ══ BADGES · DOTS ═════════════════════════════════════════ */
.wb-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 8px;min-height:22px;
  font-family:var(--wb-f-mono);font-weight:500;font-size:var(--wb-t-xs);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
  color:var(--wb-cota);background:var(--wb-papel);border:var(--wb-borde-fino) solid var(--wb-linea);
}
.wb-badge--ok{color:var(--wb-ok);background:var(--wb-ok-tinte);border-color:rgba(21,128,61,.35)}
.wb-badge--warn{color:var(--wb-ambar);background:var(--wb-ambar-tinte);border-color:rgba(138,90,0,.35)}
.wb-badge--bad{color:var(--wb-oxido);background:var(--wb-oxido-tinte);border-color:rgba(198,40,40,.35)}
.wb-badge--info{color:var(--wb-plano);background:var(--wb-plano-tinte);border-color:rgba(27,75,140,.35)}
.wb-badge--solid{color:var(--wb-superficie);background:var(--wb-tinta);border-color:var(--wb-tinta)}
.wb-badge--solid.wb-badge--ok{background:var(--wb-ok);border-color:var(--wb-ok)}
.wb-badge--solid.wb-badge--warn{background:var(--wb-ambar);border-color:var(--wb-ambar)}
.wb-badge--solid.wb-badge--bad{background:var(--wb-oxido);border-color:var(--wb-oxido)}
.wb-badge--solid.wb-badge--info{background:var(--wb-plano);border-color:var(--wb-plano)}
.wb-dot{display:inline-block;width:8px;height:8px;background:var(--wb-cota);flex-shrink:0}
.wb-dot--ok{background:var(--wb-ok)} .wb-dot--warn{background:var(--wb-ambar)} .wb-dot--bad{background:var(--wb-oxido)} .wb-dot--info{background:var(--wb-plano)}

/* ══ ALERTAS ═══════════════════════════════════════════════ */
.wb-alert{
  display:flex;gap:12px;align-items:flex-start;
  padding:12px 14px;font-size:.95rem;color:var(--wb-tinta-2);
  background:var(--wb-superficie);border:var(--wb-borde) solid var(--wb-linea);border-left:3px solid var(--wb-cota);
}
.wb-alert__t{font-family:var(--wb-f-titulo);font-weight:600;font-size:.98rem;color:var(--wb-tinta);margin-bottom:2px}
.wb-alert--info{border-left-color:var(--wb-plano);background:var(--wb-plano-tinte)}
.wb-alert--ok{border-left-color:var(--wb-ok);background:var(--wb-ok-tinte)}
.wb-alert--warn{border-left-color:var(--wb-ambar);background:repeating-linear-gradient(45deg,rgba(138,90,0,.07) 0 6px,transparent 6px 14px),var(--wb-superficie)}
.wb-alert--bad{border-left-color:var(--wb-oxido);background:var(--wb-oxido-tinte)}
.wb-alert--bad .wb-alert__t{color:var(--wb-oxido)}
.wb-alert--warn .wb-alert__t{color:var(--wb-ambar)}
.wb-alert--ok .wb-alert__t{color:var(--wb-ok)}

/* ══ TOASTS ════════════════════════════════════════════════ */
.wb-toast-region{position:fixed;left:var(--wb-s3);right:var(--wb-s3);bottom:calc(var(--wb-nav-h) + var(--wb-safe-b) + var(--wb-s3));z-index:var(--wb-z-toast);display:flex;flex-direction:column;gap:8px;pointer-events:none}
@media(min-width:700px){.wb-toast-region{left:auto;right:var(--wb-s6);bottom:var(--wb-s6);top:auto;width:360px}}
.wb-toast{
  pointer-events:auto;display:flex;gap:10px;align-items:flex-start;
  padding:12px 14px;font-size:.93rem;line-height:1.4;
  color:var(--wb-superficie);background:var(--wb-tinta);border:1px solid rgba(255,255,255,.35);border-left:3px solid var(--wb-plano);
  opacity:0;transform:translateY(8px);transition:opacity var(--wb-dur) var(--wb-ease),transform var(--wb-dur) var(--wb-ease);
}
.wb-toast.is-visible{opacity:1;transform:none}
.wb-toast--ok{border-left-color:#3FBF7F}
.wb-toast--warn{border-left-color:#E0A425}
.wb-toast--bad{border-left-color:#E4674A}
.wb-toast__t{font-family:var(--wb-f-titulo);font-weight:600;display:block}
.wb-toast--static{opacity:1;transform:none} /* solo para mostrarlo en línea (styleguide) */

/* ══ PANELES (láminas) ═════════════════════════════════════ */
.wb-panel{background:var(--wb-superficie);border:var(--wb-borde) solid var(--wb-linea-fuerte)}
.wb-panel--suave{border-color:var(--wb-linea)}
.wb-panel__hd{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 14px;border-bottom:var(--wb-borde) solid var(--wb-linea-fuerte);font-family:var(--wb-f-mono);font-size:var(--wb-t-xs);font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--wb-tinta);flex-wrap:wrap;min-height:40px}
.wb-panel--suave .wb-panel__hd{border-bottom-color:var(--wb-linea)}
.wb-panel__hd span:last-child:not(:first-child){color:var(--wb-cota)}
.wb-panel__bd{padding:14px}
.wb-panel__bd--flush{padding:0}
.wb-panel__ft{padding:10px 14px;border-top:var(--wb-borde-fino) solid var(--wb-linea);font-size:var(--wb-t-sm);color:var(--wb-cota)}
.wb-panel--warn{border-color:var(--wb-oxido);background:repeating-linear-gradient(45deg,rgba(198,40,40,.055) 0 7px,transparent 7px 16px),var(--wb-superficie)}
.wb-panel--warn .wb-panel__hd{border-bottom-color:var(--wb-oxido);color:var(--wb-oxido)}

/* ══ STATS (dato principal vs secundario) ═══════════════════ */
.wb-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--wb-s3)}
.wb-stats--3{grid-template-columns:repeat(2,minmax(0,1fr))}
.wb-stats--4{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:700px){.wb-stats--3{grid-template-columns:repeat(3,minmax(0,1fr))}.wb-stats--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.wb-stats--3 .wb-stat:last-child:nth-child(odd),.wb-stats .wb-stat--full{grid-column:1/-1}
@media(min-width:700px){.wb-stats--3 .wb-stat:last-child:nth-child(odd){grid-column:auto}}
.wb-stat{background:var(--wb-superficie);border:var(--wb-borde) solid var(--wb-linea-fuerte);padding:12px 14px;min-width:0}
.wb-stat__k{font-family:var(--wb-f-mono);font-size:var(--wb-t-xs);font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--wb-cota);margin-bottom:6px}
/* tamaño fluido: en 2 columnas a 360-460px un monto de 11 cifras cabe en una línea */
.wb-stat__v{font-family:var(--wb-f-mono);font-weight:700;font-size:clamp(1.15rem,5.2vw,var(--wb-t-monto));line-height:1.15;font-variant-numeric:tabular-nums;color:var(--wb-tinta);overflow-wrap:anywhere}
.wb-stat__s{font-size:var(--wb-t-sm);color:var(--wb-cota);margin-top:4px}
.wb-stat--xl .wb-stat__v{font-size:clamp(1.6rem,8vw,var(--wb-t-monto-xl))}
.wb-stat--ok .wb-stat__v{color:var(--wb-ok)}
.wb-stat--bad .wb-stat__v{color:var(--wb-oxido)}
.wb-stat--warn .wb-stat__v{color:var(--wb-ambar)}
.wb-stat--plano .wb-stat__v{color:var(--wb-cifra-azul)}
.wb-stat--principal{border-width:2px}

/* ══ TABLAS ════════════════════════════════════════════════ */
.wb-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--wb-superficie);border:var(--wb-borde) solid var(--wb-linea-fuerte)}
.wb-table{width:100%;font-size:.93rem}
.wb-table th{font-family:var(--wb-f-mono);font-weight:500;font-size:var(--wb-t-xs);letter-spacing:.04em;text-transform:uppercase;color:var(--wb-cota);text-align:left;padding:9px 10px;border-bottom:var(--wb-borde) solid var(--wb-linea-fuerte);white-space:nowrap;background:var(--wb-superficie)}
.wb-table td{padding:10px;border-bottom:var(--wb-borde-fino) solid var(--wb-linea);vertical-align:middle}
.wb-table tbody tr:last-child td{border-bottom:0}
.wb-table th.wb-num{text-align:right}
.wb-table tbody tr:hover td{background:rgba(21,24,28,.035)}
.wb-table tr.is-selected td{background:var(--wb-plano-tinte)}
.wb-table tr.is-muted td{color:var(--wb-cota)}
.wb-table tfoot td,.wb-table tr.wb-total td{font-weight:600;border-top:var(--wb-borde) solid var(--wb-linea-fuerte);background:var(--wb-papel)}
.wb-table--dense td{padding:6px 8px;font-size:.88rem}
.wb-table--dense th{padding:7px 8px}
.wb-table--sticky thead th{position:sticky;top:0;z-index:1}
.wb-table .wb-acc{white-space:nowrap;text-align:right}
/* Modo tarjetas en móvil: cada <td> lleva data-label="..." */
@media(max-width:699px){
  .wb-table--cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .wb-table--cards,.wb-table--cards tbody,.wb-table--cards tr,.wb-table--cards td{display:block;width:100%}
  .wb-table--cards tr{border-bottom:var(--wb-borde) solid var(--wb-linea-fuerte);padding:10px 12px}
  .wb-table--cards tbody tr:last-child{border-bottom:0}
  .wb-table--cards td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:4px 0;border:0;text-align:right}
  .wb-table--cards td::before{content:attr(data-label);font-family:var(--wb-f-mono);font-size:var(--wb-t-xs);letter-spacing:.04em;text-transform:uppercase;color:var(--wb-cota);text-align:left;flex-shrink:0}
  .wb-table--cards td.wb-td-main{font-weight:600;font-size:1rem;padding-bottom:6px}
  .wb-table--cards td.wb-td-main::before{display:none}
  .wb-table--cards td.wb-td-main{justify-content:space-between}
  .wb-table--cards td.wb-acc{justify-content:flex-end;padding-top:8px}
  .wb-table--cards td.wb-acc::before{display:none}
  .wb-table--cards tbody tr:hover td{background:transparent}
  .wb-table--cards tr.wb-total{background:var(--wb-papel)}
}

/* ══ LISTAS DE MOVIMIENTOS ═════════════════════════════════ */
.wb-list{background:var(--wb-superficie);border:var(--wb-borde) solid var(--wb-linea-fuerte)}
.wb-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;min-height:56px;padding:10px 12px;border-bottom:var(--wb-borde-fino) solid var(--wb-linea);color:inherit;text-decoration:none;width:100%;text-align:left}
.wb-row:last-child{border-bottom:0}
.wb-row--clickable{cursor:pointer}
.wb-row--clickable:hover{background:rgba(21,24,28,.035)}
.wb-row__ico{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-family:var(--wb-f-mono);font-size:.8rem;font-weight:500;color:var(--wb-cota);background:var(--wb-papel);border:var(--wb-borde-fino) solid var(--wb-linea);flex-shrink:0}
.wb-row__ico--ok{color:var(--wb-ok);border-color:rgba(21,128,61,.35);background:var(--wb-ok-tinte)}
.wb-row__ico--bad{color:var(--wb-oxido);border-color:rgba(198,40,40,.35);background:var(--wb-oxido-tinte)}
.wb-row__t{font-size:.98rem;font-weight:500;color:var(--wb-tinta);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-row__m{font-family:var(--wb-f-mono);font-size:var(--wb-t-xs);color:var(--wb-cota);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb-row__monto{font-family:var(--wb-f-mono);font-weight:500;font-size:1.02rem;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.wb-row__sub{font-family:var(--wb-f-mono);font-size:var(--wb-t-xs);color:var(--wb-cota);text-align:right;margin-top:2px}

/* ══ NAVEGACIÓN · BARRA SUPERIOR ═══════════════════════════ */
.wb-topbar{position:sticky;top:0;z-index:var(--wb-z-topbar);background:var(--wb-superficie);border-bottom:2px solid var(--wb-plano)} /* trazo azul fino: separa la barra de las hojas que pasan debajo */
.wb-topbar__in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--wb-topbar-h);padding-inline:var(--wb-s4);max-width:var(--wb-ancho-ancho);margin-inline:auto}
.wb-brand{position:relative;display:inline-block;padding:3px 10px;font-family:var(--wb-f-titulo);font-weight:700;font-size:1.05rem;letter-spacing:.05em;color:var(--wb-tinta);text-decoration:none;white-space:nowrap}
.wb-brand::before,.wb-brand::after{content:'';position:absolute;width:8px;height:8px;border:0 solid var(--wb-tinta)}
.wb-brand::before{top:0;left:0;border-top-width:1.5px;border-left-width:1.5px}
.wb-brand::after{bottom:0;right:0;border-bottom-width:1.5px;border-right-width:1.5px}
.wb-brand small{display:block;font-family:var(--wb-f-mono);font-weight:400;font-size:.62rem;letter-spacing:.06em;color:var(--wb-cota);line-height:1;margin-top:2px}
.wb-topbar__ctx{display:flex;align-items:center;gap:8px;min-width:0}
.wb-topbar__acts{display:flex;align-items:center;gap:4px}
.wb-topbar__acts .wb-btn--icon{border-color:transparent;background:transparent;font-size:1.2rem}
.wb-topbar__acts .wb-btn--icon:hover{background:rgba(21,24,28,.06)}
.wb-topbar .wb-input--ctx{min-height:36px;padding:6px 30px 6px 10px;font-family:var(--wb-f-mono);font-size:.8rem;font-weight:500;width:auto;background-position:right 10px center}
@media(max-width:699px){.wb-topbar .wb-input--ctx{font-size:16px;min-height:var(--wb-tap-sm)}}
/* tabs (escritorio, o segunda fila) */
.wb-tabs{display:flex;gap:2px;border-bottom:var(--wb-borde) solid var(--wb-linea-fuerte);overflow-x:auto;-webkit-overflow-scrolling:touch}
.wb-tab{flex-shrink:0;min-height:var(--wb-tap);padding:0 14px;font-family:var(--wb-f-ui);font-weight:500;font-size:.92rem;color:var(--wb-cota);border-bottom:2px solid transparent;margin-bottom:-1.5px;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.wb-tab:hover{color:var(--wb-tinta)}
.wb-tab.is-active{color:var(--wb-plano);border-bottom-color:var(--wb-plano);font-weight:600}
.wb-tab__n{font-family:var(--wb-f-mono);font-size:var(--wb-t-xs);padding:1px 6px;background:var(--wb-papel);border:1px solid var(--wb-linea)}
/* pestañas directamente sobre la mesa (fuera de paneles): línea fina clara y activo en cian */
.wb-tabs--fondo{border-bottom:1px solid var(--wb-fondo-linea)}
.wb-tabs--fondo .wb-tab{color:var(--wb-fondo-texto-2);margin-bottom:-1px}
.wb-tabs--fondo .wb-tab:hover{color:var(--wb-fondo-texto)}
.wb-tabs--fondo .wb-tab.is-active{color:#FFFFFF;border-bottom-color:var(--wb-fondo-acento)}
.wb-tabs--fondo .wb-tab__n{background:rgba(255,255,255,.12);border-color:var(--wb-fondo-linea);color:inherit}

/* ══ NAVEGACIÓN · BARRA INFERIOR (móvil) ═══════════════════ */
.wb-bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:var(--wb-z-nav);display:flex;background:var(--wb-superficie);border-top:2px solid var(--wb-plano);padding-bottom:var(--wb-safe-b)}
.wb-bottomnav__item{position:relative;flex:1;min-height:var(--wb-nav-h);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-family:var(--wb-f-ui);font-weight:500;font-size:.72rem;letter-spacing:.01em;color:var(--wb-cota);text-decoration:none;padding:6px 4px}
.wb-bottomnav__ico{width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;line-height:1}
.wb-bottomnav__ico svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.75}
.wb-bottomnav__item.is-active{color:var(--wb-plano);font-weight:600}
.wb-bottomnav__item.is-active::before{content:'';position:absolute;top:-2px;left:18%;right:18%;height:3px;background:var(--wb-plano)}
.wb-bottomnav__item:active{background:rgba(21,24,28,.06)}
@media(min-width:700px){.wb-bottomnav{display:none}}

/* ══ NAVEGACIÓN · SIDEBAR (escritorio) + DRAWER (móvil) ════ */
.wb-layout-sidebar{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:100dvh}
.wb-sidebar{background:var(--wb-superficie);border-right:var(--wb-borde) solid var(--wb-linea-fuerte);padding:var(--wb-s4) 0;display:flex;flex-direction:column;gap:2px}
.wb-sidebar__hd{padding:0 var(--wb-s4) var(--wb-s4);border-bottom:var(--wb-borde-fino) solid var(--wb-linea);margin-bottom:var(--wb-s3)}
.wb-sidebar__item{display:flex;align-items:center;gap:10px;min-height:var(--wb-tap);padding:0 var(--wb-s4);font-size:.95rem;font-weight:500;color:var(--wb-cota);border-left:3px solid transparent;text-decoration:none;width:100%;text-align:left}
.wb-sidebar__item:hover{color:var(--wb-tinta);background:rgba(21,24,28,.04)}
.wb-sidebar__item.is-active{color:var(--wb-plano);background:var(--wb-plano-tinte);border-left-color:var(--wb-plano);font-weight:600}
.wb-sidebar__sec{padding:var(--wb-s3) var(--wb-s4) var(--wb-s1);font-family:var(--wb-f-mono);font-size:var(--wb-t-xs);letter-spacing:.05em;text-transform:uppercase;color:var(--wb-cota)}
.wb-drawer-overlay{display:none;position:fixed;inset:0;background:var(--wb-velo);z-index:calc(var(--wb-z-drawer) - 1)}
@media(max-width:899px){
  .wb-layout-sidebar{grid-template-columns:minmax(0,1fr)}
  .wb-sidebar{position:fixed;top:0;bottom:0;left:0;width:min(280px,84vw);z-index:var(--wb-z-drawer);transform:translateX(-100%);transition:transform var(--wb-dur) var(--wb-ease);overflow-y:auto}
  .wb-sidebar.is-open{transform:none}
  .wb-drawer-overlay.is-open{display:block}
}

/* ══ CHIPS (filtros) ═══════════════════════════════════════ */
.wb-chips{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px;scrollbar-width:none}
.wb-chips::-webkit-scrollbar{display:none}
.wb-chip{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;font-family:var(--wb-f-ui);font-weight:500;font-size:.9rem;color:var(--wb-tinta);background:var(--wb-superficie);border:var(--wb-borde) solid var(--wb-linea);white-space:nowrap;cursor:pointer;text-decoration:none}
.wb-chip:hover{border-color:var(--wb-tinta)}
.wb-chip.is-active{background:var(--wb-tinta);border-color:var(--wb-tinta);color:var(--wb-superficie)}
.wb-chip__n{font-family:var(--wb-f-mono);font-size:var(--wb-t-xs);opacity:.8}
.wb-chip--ok.is-active{background:var(--wb-ok);border-color:var(--wb-ok)}
.wb-chip--bad.is-active{background:var(--wb-oxido);border-color:var(--wb-oxido)}
.wb-chip--warn.is-active{background:var(--wb-ambar);border-color:var(--wb-ambar)}

/* ══ BARRA DE DÍA (fecha + navegación) ═════════════════════ */
.wb-daybar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wb-daybar .wb-input{width:auto;min-width:150px;font-family:var(--wb-f-mono);font-weight:500}
.wb-daybar__hoy{margin-left:auto}

/* ══ MODAL (hoja inferior en móvil · centrado en escritorio) ═ */
.wb-modal{position:fixed;inset:0;z-index:var(--wb-z-modal);display:none;align-items:flex-end;justify-content:center;background:var(--wb-velo);padding:0}
.wb-modal.is-open{display:flex}
.wb-modal__card{width:100%;max-height:94dvh;display:flex;flex-direction:column;background:var(--wb-superficie);border-top:var(--wb-borde) solid var(--wb-linea-fuerte);box-shadow:var(--wb-sombra-hoja);animation:wb-subir var(--wb-dur) var(--wb-ease)}
@keyframes wb-subir{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
.wb-modal__hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px 12px 18px;border-bottom:var(--wb-borde) solid var(--wb-linea-fuerte);flex-shrink:0}
.wb-modal__t{font-family:var(--wb-f-titulo);font-weight:700;font-size:1.15rem;line-height:1.2}
.wb-modal__bd{padding:18px;overflow-y:auto;flex:1;min-height:0}
.wb-modal__ft{padding:12px 18px calc(12px + var(--wb-safe-b));border-top:var(--wb-borde) solid var(--wb-linea-fuerte);background:var(--wb-superficie);flex-shrink:0}
.wb-modal__ft .wb-acciones{gap:8px}
.wb-modal--static{position:static;display:flex;background:none;padding:0}
.wb-modal--static .wb-modal__card{max-height:none;box-shadow:none;border:var(--wb-borde) solid var(--wb-linea-fuerte);animation:none}
@media(min-width:700px){
  .wb-modal{align-items:center;padding:24px}
  .wb-modal__card{max-width:520px;max-height:90vh;border:var(--wb-borde) solid var(--wb-linea-fuerte);box-shadow:none}
  .wb-modal__ft{padding-bottom:12px}
  .wb-modal--static{padding:0}
}

/* ══ FAB (acción principal al alcance del pulgar) ══════════ */
.wb-fab{position:fixed;right:var(--wb-s4);bottom:calc(var(--wb-nav-h) + var(--wb-safe-b) + var(--wb-s4));z-index:var(--wb-z-fab);width:56px;height:56px;display:flex;align-items:center;justify-content:center;font-family:var(--wb-f-titulo);font-weight:700;font-size:1.8rem;line-height:1;color:var(--wb-superficie);background:var(--wb-plano);border:var(--wb-borde) solid var(--wb-fondo-texto)} /* borde claro: se despega de la mesa azul */
.wb-fab:hover{background:var(--wb-plano-osc)}
.wb-fab--ext{width:auto;padding:0 20px 0 16px;gap:8px;font-size:1rem}
.wb-fab--ext b{font-size:1.5rem;font-weight:700}
@media(min-width:700px){.wb-fab{right:var(--wb-s6);bottom:var(--wb-s6)}}

/* ══ ESTADOS: VACÍO · CARGANDO · ERROR ═════════════════════ */
.wb-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:40px 18px;border:var(--wb-borde) dashed var(--wb-linea);background:var(--wb-superficie)}
.wb-empty__ico{font-family:var(--wb-f-mono);font-size:1.4rem;color:var(--wb-cota);width:48px;height:48px;display:flex;align-items:center;justify-content:center;border:var(--wb-borde-fino) solid var(--wb-linea);margin-bottom:6px}
.wb-empty__t{font-family:var(--wb-f-titulo);font-weight:600;font-size:1.05rem}
.wb-empty__p{font-size:var(--wb-t-sm);color:var(--wb-cota);max-width:34ch}
.wb-empty .wb-btn{margin-top:10px}
.wb-loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:28px;color:var(--wb-cota);font-size:var(--wb-t-sm)}
.wb-spinner{width:20px;height:20px;border:2px solid var(--wb-linea);border-top-color:var(--wb-plano);border-radius:50%;animation:wb-girar .8s linear infinite;flex-shrink:0}
.wb-skeleton{display:block;height:14px;background:var(--wb-linea);animation:wb-pulso 1.2s ease-in-out infinite}
.wb-skeleton--t{height:20px;width:60%}
.wb-skeleton--monto{height:28px;width:45%}
.wb-skeleton--fila{height:52px;margin-bottom:1px}
@keyframes wb-pulso{0%,100%{opacity:1}50%{opacity:.45}}
.wb-error-state{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px;border:var(--wb-borde) solid var(--wb-oxido);border-left-width:3px;background:var(--wb-oxido-tinte)}
.wb-error-state__t{font-family:var(--wb-f-titulo);font-weight:600;color:var(--wb-oxido)}
.wb-error-state__p{font-size:var(--wb-t-sm);color:var(--wb-tinta-2)}

/* ══ LOGIN ═════════════════════════════════════════════════ */
.wb-login{min-height:100dvh;display:grid;place-items:center;padding:20px} /* la mesa de fondo ya trae retícula y resplandor */
.wb-login__card{width:100%;max-width:400px;background:var(--wb-superficie);border:var(--wb-borde) solid rgba(255,255,255,.85);padding:28px 22px 24px;position:relative}
.wb-login__card::before,.wb-login__card::after{content:'';position:absolute;width:12px;height:12px;border:0 solid var(--wb-fondo-acento)}
.wb-login__card::before{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px}
.wb-login__card::after{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px}
.wb-login__brand{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:22px}
.wb-login__brand .wb-brand{font-size:var(--wb-t-2xl);padding:4px 12px}
.wb-login__sub{font-family:var(--wb-f-mono);font-size:var(--wb-t-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--wb-cota)}
.wb-login__ft{margin-top:18px;font-family:var(--wb-f-mono);font-size:var(--wb-t-xs);color:var(--wb-cota);letter-spacing:.03em}
.wb-login--demo{min-height:0;padding:24px 14px}

/* ══ MISCELÁNEA ════════════════════════════════════════════ */
.wb-kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;font-size:.93rem}
.wb-kv dt{font-family:var(--wb-f-mono);font-size:var(--wb-t-xs);letter-spacing:.04em;text-transform:uppercase;color:var(--wb-cota);padding-top:3px}
.wb-kv dd{text-align:right;font-weight:700}
.wb-divider{border:0;border-top:var(--wb-borde) solid var(--wb-linea-fuerte);margin:var(--wb-s4) 0}
.wb-sec-hd{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:12px;border-top:var(--wb-borde) solid var(--wb-linea-fuerte);margin-bottom:12px;flex-wrap:wrap}
.wb-sec-hd .wb-rotulo{overflow-wrap:anywhere;min-width:0}
@media(min-width:700px){.wb-sec-hd .wb-rotulo{white-space:nowrap}}
.wb-kbd{font-family:var(--wb-f-mono);font-size:var(--wb-t-xs);padding:1px 6px;border:1px solid var(--wb-linea);background:var(--wb-papel)}