/* ==========================================================================
   FUSION CABINET — sistema visual del area de cliente (estilo webtrade marc-)
   Aislado a proposito (no toca csswebtradev5Marc.css / stylesv3menumarc.css).
   Lo usan: el contenedor #akicontenidonormal y todos los DEVwebsite/modulescabinet/*.html
   ========================================================================== */

:root{
  --cab-accent:#00bea0;
  --cab-accent-2:#04d3b2;
  --cab-danger:#ff5b6e;
  --cab-warn:#ffb74d;
}

/* ---- contenedor de secciones ---- */
.marc-cab{
  width:100%;
  height:calc(100dvh - 48px);          /* alto util bajo el topbar (48px) */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--bs-body-bg,#131722);
  color:var(--bs-body-color,#e8ebf2);
  padding:24px clamp(14px,4vw,40px) 64px;
}
.marc-cab *{ box-sizing:border-box; }
.marc-cab-wrap{ max-width:1040px; margin:0 auto; }

/* ---- cabecera de pagina ---- */
.marc-cab-page{ display:flex; align-items:flex-start; gap:14px; margin:4px 0 22px; }
.marc-cab-page__ico{
  flex:0 0 auto; width:44px; height:44px; border-radius:13px;
  display:flex; align-items:center; justify-content:center; font-size:22px;
  color:var(--cab-accent);
  background:color-mix(in srgb, var(--cab-accent) 14%, transparent);
}
.marc-cab-page__tt{ margin:0; font-size:22px; font-weight:700; letter-spacing:-.01em; }
.marc-cab-page__sub{ margin:2px 0 0; font-size:13.5px; opacity:.62; }

/* ---- grid + tarjetas ---- */
.marc-cab-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:16px; }
.marc-cab-card{
  background:color-mix(in srgb, var(--bs-body-color,#fff) 4%, var(--bs-body-bg,#131722));
  border:1px solid color-mix(in srgb, var(--bs-body-color,#fff) 12%, transparent);
  border-radius:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.10);
  overflow:hidden;
}
.marc-cab-card__head{ padding:16px 18px 0; }
.marc-cab-card__title{ margin:0; font-size:15.5px; font-weight:650; }
.marc-cab-card__hint{ margin:3px 0 0; font-size:12.5px; opacity:.6; }
.marc-cab-card__body{ padding:16px 18px; }
.marc-cab-card__foot{ padding:14px 18px; border-top:1px solid color-mix(in srgb, var(--bs-body-color,#fff) 9%, transparent); display:flex; gap:10px; align-items:center; }
.marc-cab-card--span2{ grid-column:1 / -1; }

/* ---- formularios ---- */
.marc-cab-field{ display:block; margin:0 0 15px; }
.marc-cab-label{ display:block; font-size:12.5px; font-weight:600; opacity:.78; margin:0 0 6px; }
.marc-cab-input,.marc-cab-select,.marc-cab-textarea{
  width:100%; appearance:none; -webkit-appearance:none;
  background:var(--bs-body-bg,#0f131b);
  color:inherit;
  border:1px solid color-mix(in srgb, var(--bs-body-color,#fff) 16%, transparent);
  border-radius:11px; padding:11px 13px; font-size:14px; line-height:1.2;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.marc-cab-textarea{ min-height:96px; resize:vertical; }
.marc-cab-select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23889' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; }
.marc-cab-input:focus,.marc-cab-select:focus,.marc-cab-textarea:focus{
  outline:none; border-color:var(--cab-accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--cab-accent) 22%, transparent);
}
.marc-cab-input.is-invalid,.marc-cab-select.is-invalid{ border-color:var(--cab-danger); box-shadow:0 0 0 3px color-mix(in srgb, var(--cab-danger) 20%, transparent); }
.marc-cab-input::placeholder,.marc-cab-textarea::placeholder{ color:color-mix(in srgb, var(--bs-body-color,#fff) 40%, transparent); }
.marc-cab-input[disabled],.marc-cab-select[disabled]{ opacity:.55; cursor:not-allowed; }
.marc-cab-help{ font-size:11.5px; opacity:.55; margin:6px 2px 0; }
.marc-cab-row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:560px){ .marc-cab-row2{ grid-template-columns:1fr; } }

/* importe grande (deposito/retiro) */
.marc-cab-amount{ display:flex; align-items:center; gap:8px; }
.marc-cab-amount__cur{ font-size:20px; font-weight:700; opacity:.7; }
.marc-cab-amount input{ font-size:28px; font-weight:750; padding:8px 4px; border:none; background:transparent; color:inherit; width:100%; }
.marc-cab-amount input:focus{ outline:none; }
.marc-cab-amount{ border-bottom:2px solid color-mix(in srgb, var(--bs-body-color,#fff) 18%, transparent); }
.marc-cab-amount:focus-within{ border-color:var(--cab-accent); }

/* ---- botones ---- */
.marc-cab-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:14px; font-weight:650; line-height:1; cursor:pointer;
  padding:12px 18px; border-radius:11px; border:1px solid transparent;
  transition:transform .06s, filter .15s, background .15s, border-color .15s; text-decoration:none;
}
.marc-cab-btn:active{ transform:translateY(1px); }
.marc-cab-btn--primary{ background:linear-gradient(135deg,var(--cab-accent),var(--cab-accent-2)); color:#04211c; }
.marc-cab-btn--primary:hover{ filter:brightness(1.05); }
.marc-cab-btn--ghost{ background:transparent; border-color:color-mix(in srgb, var(--bs-body-color,#fff) 22%, transparent); color:inherit; }
.marc-cab-btn--ghost:hover{ background:color-mix(in srgb, var(--bs-body-color,#fff) 8%, transparent); }
.marc-cab-btn--danger{ background:var(--cab-danger); color:#2a0a0e; }
.marc-cab-btn--block{ width:100%; }
.marc-cab-btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ---- badges / chips ---- */
.marc-cab-badge{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; letter-spacing:.02em; }
.marc-cab-badge--real{ background:color-mix(in srgb,var(--cab-accent) 18%,transparent); color:var(--cab-accent); }
.marc-cab-badge--demo{ background:color-mix(in srgb,var(--cab-warn) 18%,transparent); color:var(--cab-warn); }
.marc-cab-badge--ok{ background:color-mix(in srgb,var(--cab-accent) 18%,transparent); color:var(--cab-accent); }
.marc-cab-badge--pend{ background:color-mix(in srgb,var(--cab-warn) 18%,transparent); color:var(--cab-warn); }
.marc-cab-badge--no{ background:color-mix(in srgb,var(--cab-danger) 18%,transparent); color:var(--cab-danger); }

/* ---- notas / banners (reemplazan los alert-success/danger inline de Falcon) ---- */
.marc-cab-note{ display:flex; align-items:flex-start; gap:10px; padding:13px 15px; border-radius:12px; font-size:13.5px; line-height:1.5; margin:0 0 16px; border:1px solid transparent; }
.marc-cab-note i{ font-size:18px; flex:0 0 auto; margin-top:1px; }
.marc-cab-note--ok{ background:color-mix(in srgb,var(--cab-accent) 12%, transparent); border-color:color-mix(in srgb,var(--cab-accent) 35%, transparent); color:var(--cab-accent); }
.marc-cab-note--warn{ background:color-mix(in srgb,var(--cab-warn) 12%, transparent); border-color:color-mix(in srgb,var(--cab-warn) 35%, transparent); color:var(--cab-warn); }
.marc-cab-note--err{ background:color-mix(in srgb,var(--cab-danger) 12%, transparent); border-color:color-mix(in srgb,var(--cab-danger) 35%, transparent); color:var(--cab-danger); }
.marc-cab-note--info{ background:color-mix(in srgb, var(--bs-body-color,#fff) 7%, transparent); border-color:color-mix(in srgb, var(--bs-body-color,#fff) 14%, transparent); color:inherit; opacity:.92; }

/* ---- filas/listas (metodos de pago, cuentas) ---- */
.marc-cab-list{ display:flex; flex-direction:column; gap:10px; }
.marc-cab-rowitem{
  display:flex; align-items:center; gap:12px; padding:13px 15px; cursor:pointer;
  background:color-mix(in srgb, var(--bs-body-color,#fff) 4%, var(--bs-body-bg,#131722));
  border:1px solid color-mix(in srgb, var(--bs-body-color,#fff) 12%, transparent);
  border-radius:13px; transition:border-color .15s, background .15s;
}
.marc-cab-rowitem:hover{ border-color:color-mix(in srgb,var(--cab-accent) 55%,transparent); }
.marc-cab-rowitem.is-active{ border-color:var(--cab-accent); background:color-mix(in srgb,var(--cab-accent) 10%, var(--bs-body-bg,#131722)); }
.marc-cab-rowitem__ico{ width:38px; height:38px; flex:0 0 auto; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:19px; background:color-mix(in srgb, var(--bs-body-color,#fff) 8%, transparent); }
.marc-cab-rowitem__ico img{ max-width:24px; max-height:24px; }
.marc-cab-rowitem__main{ flex:1 1 auto; min-width:0; }
.marc-cab-rowitem__t{ font-size:14px; font-weight:600; }
.marc-cab-rowitem__s{ font-size:12px; opacity:.6; }

/* ---- estados de carga / error ---- */
.marc-cab-loading{ display:flex; align-items:center; justify-content:center; min-height:50vh; }
.marc-cab-spin{ width:34px; height:34px; border-radius:50%; border:3px solid color-mix(in srgb, var(--bs-body-color,#fff) 18%, transparent); border-top-color:var(--cab-accent); animation:marcCabSpin .8s linear infinite; }
@keyframes marcCabSpin{ to{ transform:rotate(360deg); } }
.marc-cab-error{ text-align:center; padding:40px 20px; color:var(--cab-danger); font-weight:600; }
.marc-cab-empty{ text-align:center; padding:34px 16px; opacity:.55; font-size:13.5px; }

/* tablas simples */
.marc-cab-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.marc-cab-table th{ text-align:left; font-weight:600; opacity:.6; padding:10px 12px; border-bottom:1px solid color-mix(in srgb, var(--bs-body-color,#fff) 12%, transparent); }
.marc-cab-table td{ padding:11px 12px; border-bottom:1px solid color-mix(in srgb, var(--bs-body-color,#fff) 7%, transparent); }

/* ---- separador / cabecera de grupo en el rail ---- */
.marc-rail__sep{ height:1px; margin:10px 12px; background:color-mix(in srgb, var(--bs-body-color,#fff) 14%, transparent); }

/* ==========================================================================
   Pulido del LOGIN existente (.global-login) al estilo dark moderno
   (sin tocar IDs/markup: loginnow -> loginAPPCLIENTS)
   ========================================================================== */
/* VISIBILIDAD DEL LOGIN — el viejo `.global-login{display:none !important}` (csswebtradev5Marc.css:2775)
   lo ocultaba SIEMPRE. Lo mostramos SOLO con aria-hidden="false" (gana por especificidad 0,2,0 + !important)
   y SIN sesion. Al loguear (body.bodylogeado) se vuelve a ocultar. showlogin()/badlogin ponen aria-hidden="false". */
.global-login[aria-hidden="false"]{ position:fixed; inset:0; z-index:1030; display:flex !important; flex-direction:column; align-items:center; justify-content:center; padding:20px;
  background:radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb,var(--cab-accent) 16%, #0b0f16), #0b0f16); }
body.bodylogeado .global-login{ display:none !important; }
.global-login__inner{ width:100%; max-width:420px; }
.global-login__content{
  background:color-mix(in srgb,#fff 4%, #131722);
  border:1px solid color-mix(in srgb,#fff 12%, transparent);
  border-radius:20px; padding:30px 28px;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.global-login__brand{ text-align:center; margin-bottom:20px; }
.global-login__brand-image{ display:flex; justify-content:center; }
.global-login__description{ color:#aeb6c6; font-size:14px; }
.global-login__description b{ color:#fff; }
.global-login__form-control{ margin-bottom:14px; }
.global-login__form-control label{ display:block; font-size:12.5px; font-weight:600; color:#aeb6c6; margin-bottom:6px; }
.global-login__form-control input[type=text],
.global-login__form-control input[type=password]{
  width:100%; background:#0f131b; color:#fff;
  border:1px solid color-mix(in srgb,#fff 16%, transparent); border-radius:11px;
  padding:12px 13px; font-size:14.5px; transition:border-color .15s, box-shadow .15s;
}
.global-login__form-control input:focus{ outline:none; border-color:var(--cab-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--cab-accent) 22%, transparent); }
.global-login__form-message{ display:none; color:var(--cab-danger); font-size:12px; margin-top:5px; }
.js-login-control.is-invalid .global-login__form-message,
.js-login-control.has-error .global-login__form-message{ display:block; }
.btn--login{
  width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(135deg,var(--cab-accent),var(--cab-accent-2)); color:#04211c;
  border:none; border-radius:12px; padding:13px 18px; font-weight:700; font-size:15px; cursor:pointer;
  transition:filter .15s, transform .06s;
}
.btn--login:hover{ filter:brightness(1.05); }
.btn--login:active{ transform:translateY(1px); }
.btn--login .btn__icon svg{ width:18px; height:18px; }
.global-login__footer{ text-align:center; margin-top:18px; }
.global-login__footer-link{ color:var(--cab-accent); font-size:13px; text-decoration:none; }
.global-login__footer-link:hover{ text-decoration:underline; }

/* ==========================================================================
   Compat con clases load-bearing que conservan los <script> de los modulos
   (el JS togglea estas clases; aqui solo les damos aspecto marc-)
   ========================================================================== */
/* boton deshabilitado: el JS hace classList.add('disabled'|'btn-disabled'|'is-busy') */
.marc-cab-btn.disabled,.marc-cab-btn.btn-disabled,.marc-cab-btn.is-busy{ opacity:.5; cursor:not-allowed; pointer-events:none; }
.marc-cab-btn.is-busy::after{ content:""; width:14px; height:14px; margin-left:6px; border-radius:50%; border:2px solid currentColor; border-top-color:transparent; display:inline-block; animation:marcCabSpin .8s linear infinite; }
/* mensajes de validacion (Bootstrap controla el display via .is-invalid/.was-validated) */
.marc-cab .invalid-feedback,#authentication-modal .invalid-feedback{ color:var(--cab-danger); font-size:11.5px; margin-top:5px; }
.marc-cab .form-check,#authentication-modal .form-check{ display:flex; align-items:center; gap:8px; margin:6px 0; }
.marc-cab .form-check-input,#authentication-modal .form-check-input,.marc-cab input[type=checkbox],.marc-cab input[type=radio]{ accent-color:var(--cab-accent); width:17px; height:17px; }

/* ==========================================================================
   Pulido del MODAL DE REGISTRO (#authentication-modal) — Bootstrap modal, tema dark
   ========================================================================== */
#authentication-modal .modal-content{
  background:color-mix(in srgb,#fff 4%, #131722); color:var(--bs-body-color,#e8ebf2);
  border:1px solid color-mix(in srgb,#fff 12%, transparent); border-radius:18px; overflow:hidden;
}
#authentication-modal .modal-header{
  background:#1c1c20; color:#fafafa;
  border:0; padding:20px 24px; position:relative;
}
#authentication-modal .modal-header .text-white,#authentication-modal #authentication-modal-label,#authentication-modal #authentication-modal-label2{ color:#fafafa !important; }
#authentication-modal .modal-body{ padding:22px 24px; }
#authentication-modal .form-label{ font-size:12.5px; font-weight:600; opacity:.8; margin-bottom:6px; }
#authentication-modal .form-control,#authentication-modal .form-select{
  width:100%; background:var(--bs-body-bg,#0f131b); color:inherit;
  border:1px solid color-mix(in srgb,#fff 16%, transparent); border-radius:11px; padding:11px 13px; font-size:14px; margin-bottom:2px;
}
#authentication-modal .form-control:focus,#authentication-modal .form-select:focus{ outline:none; border-color:rgba(255,255,255,.45); box-shadow:0 0 0 3px rgba(255,255,255,.12); }
#authentication-modal .btn-primary{
  width:100%; background:#fafafa; color:#18181b;
  border:none; border-radius:12px; padding:13px; font-weight:700; font-size:15px; cursor:pointer; margin-top:6px;
}
#authentication-modal .btn-primary:hover{ filter:brightness(1.05); }
#authentication-modal .alert{ border-radius:11px; padding:12px 14px; font-size:13.5px; margin:14px 24px 0; background:color-mix(in srgb,var(--cab-danger) 14%, transparent); color:var(--cab-danger); border:1px solid color-mix(in srgb,var(--cab-danger) 35%, transparent); }
#authentication-modal a{ color:#d4d4d8; }